/* ===================================================== application shell
   The page itself never scrolls. The shell fills the viewport, the map takes
   whatever is left over, and every panel that can overflow scrolls inside its
   own box — so nothing ever pushes the board off screen. */
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--fB);font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased}
#shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);
  padding-top:env(safe-area-inset-top,0px)}
.bar{background:var(--bg2);border-bottom:1px solid var(--line);display:flex;align-items:center;
  flex-wrap:wrap;padding-left:max(10px,env(safe-area-inset-left,0px));
  padding-right:max(10px,env(safe-area-inset-right,0px))}
#work{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:8px;min-height:0;
  padding:8px max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
#left{display:grid;grid-template-rows:minmax(160px,1fr) auto auto;gap:8px;min-height:0;min-width:0}
#right{display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:8px;min-height:0;min-width:0}
.mapWrap{position:relative;background:#070904;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;min-height:0}
canvas#map{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:grab;touch-action:none}
canvas#map.drag{cursor:grabbing}
.scrollPane{overflow-y:auto;min-height:0;scrollbar-width:thin}
#bottom{height:128px;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:0}
#bottom .pnl{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#sector{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#sector .ticker{flex:1;min-height:0}
.log{flex:1;height:auto!important;min-height:0}

/* ------------------------------------------------- the unit strip
   Every unit in the Kampfgruppe, always on screen, showing at a glance who
   still needs orders. This is what replaced scrolling a list to find out. */
.strip{display:flex;flex-direction:column;min-height:0}
.stripHead{font-family:var(--fD);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg3);padding:5px 9px;border-bottom:1px solid var(--line);background:var(--bg2);
  display:flex;align-items:center;gap:7px}
.stripHead .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}
.stripHead .r{margin-left:auto;font-family:var(--fM);letter-spacing:0;text-transform:none;color:var(--fg2)}
.chipBtn{background:var(--panel2);border:1px solid var(--line2);border-radius:3px;padding:2px 8px;cursor:pointer;
  font-family:var(--fD);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fg2)}
.chipBtn:hover{border-color:var(--amber);color:var(--fg)}
.stripRow{display:flex;gap:4px;padding:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.uchip{flex:0 0 auto;width:112px;background:var(--panel2);border:1px solid var(--line);border-radius:3px;
  padding:3px 5px 4px;cursor:pointer;text-align:left;position:relative}
.uchip:hover{border-color:var(--line2);background:var(--panel3)}
.uchip.sel{border-color:var(--amber);background:#2a2210}
.uchip.need{box-shadow:inset 0 -2px 0 var(--amber)}
.uchip.done{box-shadow:inset 0 -2px 0 var(--good)}
.uchip.dead{opacity:.35;cursor:default}
.uchip .ur{display:flex;align-items:center;gap:4px}
.uchip img{image-rendering:pixelated;width:34px;height:34px;margin:-5px -3px -6px -4px;flex:none}
.uchip b{font-family:var(--fD);font-size:12px;font-weight:600;line-height:1.1;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uchip .us{font-family:var(--fM);font-size:9px;color:var(--fg3);display:block;line-height:1.3}
.uchip .uo{font-family:var(--fM);font-size:8.5px;line-height:1.3;color:var(--amber2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uchip .uo.none{color:var(--fg3)}
.uchip .ufl{position:absolute;top:2px;right:3px;display:flex;gap:2px}
.uchip .ufl i{width:6px;height:6px;border-radius:50%;display:block}

/* ------------------------------------------------- hover inspector */
.inspect{position:absolute;left:8px;top:8px;width:232px;background:rgba(14,17,8,.95);
  border:1px solid var(--line2);border-radius:4px;padding:7px 9px;pointer-events:none;z-index:4}
.inspect .ih{display:flex;gap:7px;align-items:center;margin-bottom:5px}
.inspect canvas{image-rendering:pixelated;width:48px;height:48px;margin:-7px -5px;flex:none}
.inspect b{font-family:var(--fD);font-size:14.5px;font-weight:700;line-height:1.15;display:block}
.inspect .in2{font-family:var(--fM);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.inspect .irow{display:flex;justify-content:space-between;font-family:var(--fM);font-size:10px;color:var(--fg2)}
.inspect .irow b{display:inline;font-family:var(--fM);font-size:10px;color:var(--fg)}
.inspect .ifoot{margin-top:5px;padding-top:4px;border-top:1px dashed var(--line);font-size:10px;color:var(--fg3)}

/* ------------------------------------------------- tutorial */
.tut{background:var(--panel);border:1px solid var(--line2);border-radius:6px;max-width:640px;width:100%;
  max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.75)}
.tutHead{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg2);display:flex;align-items:baseline;gap:12px}
.tutHead h3{font-family:var(--fD);font-size:23px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--amber2);margin:0}
.tutStep{margin-left:auto;font-size:11px;color:var(--fg3)}
.tutBody{padding:16px 18px;overflow-y:auto;font-size:14px;line-height:1.62;color:var(--fg2)}
.tutBody p{margin:0 0 11px}
.tutBody b{color:var(--fg);font-weight:600}
.tutBody .k{font-family:var(--fM);font-size:12px;background:var(--panel3);border:1px solid var(--line2);
  border-radius:3px;padding:1px 5px;color:var(--amber2)}
.tutBody ul{margin:0 0 11px;padding-left:18px}
.tutBody li{margin-bottom:5px}
.tutBody table{width:100%;border-collapse:collapse;font-family:var(--fM);font-size:11.5px;margin:0 0 11px}
.tutBody th{text-align:left;color:var(--fg3);font-weight:600;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px;border-bottom:1px solid var(--line)}
.tutBody td{padding:4px 8px;border-bottom:1px solid #262b1b;color:var(--fg2)}
.tutBody td:first-child{color:var(--fg)}
.tutFoot{padding:11px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;background:var(--bg2)}
.tutDots{margin-left:auto;display:flex;gap:5px}
.tutDots i{width:7px;height:7px;border-radius:50%;background:var(--line2);display:block}
.tutDots i.on{background:var(--amber)}

@media(max-width:1080px){
  #work{grid-template-columns:minmax(0,1fr)}
  #right{display:none}
}

/* ---- component styles ---- */
/* Layout: map left, dossier column right. Single dark theme, deliberate. */
:root{
  --bg:#0e1008;--bg2:#14170d;--panel:#1a1e12;--panel2:#222719;--panel3:#2b3120;
  --line:#383f27;--line2:#4c5434;--fg:#e3ddc6;--fg2:#a8a88c;--fg3:#73765e;
  --amber:#e6a033;--amber2:#f5c86a;--blu:#8fb0d0;--red:#d06a4a;
  --good:#8fae55;--warn:#d9a441;--bad:#c0503c;
  --fD:"Saira Condensed",Oswald,"Arial Narrow",sans-serif;
  --fB:"IBM Plex Sans",system-ui,sans-serif;--fM:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,


h1,h3{font-family:var(--fD);margin:0}button{font:inherit;color:inherit}

.mono{font-family:var(--fM);font-variant-numeric:tabular-nums}

.logo{font-family:var(--fD);font-weight:800;font-size:17px;letter-spacing:.07em;text-transform:uppercase;padding:9px 15px 9px 0;white-space:nowrap}
.logo span{color:var(--amber)}
.cell{padding:6px 13px;border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.cell em{font-family:var(--fM);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);font-style:normal}
.cell b{font-family:var(--fD);font-weight:700;font-size:16px;line-height:1.15}
.cell b.a{color:var(--amber2)}.cell b.w{color:var(--warn)}.cell b.d{color:var(--bad)}
.barR{margin-left:auto;display:flex;gap:6px;padding:6px 0 6px 13px;align-items:center}
.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:3px;padding:6px 11px;cursor:pointer;
  font-family:var(--fD);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--panel3);border-color:var(--amber)}
.btn:disabled{opacity:.3;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.btn.p{background:#4a3a12;border-color:var(--amber);color:var(--amber2)}
.btn.p:hover:not(:disabled){background:#5e4a18}.btn.sm{padding:4px 8px;font-size:11.5px}

@media(max-width:1060px){}


canvas#map.drag{cursor:grabbing}
.zoomBox{position:absolute;left:10px;bottom:10px;display:flex;gap:4px;background:rgba(14,16,8,.9);border:1px solid var(--line2);border-radius:3px;padding:4px}
.hint{position:absolute;right:10px;bottom:10px;background:rgba(14,16,8,.92);border:1px solid var(--line);border-radius:3px;
  padding:5px 10px;font-family:var(--fM);font-size:10px;color:var(--fg3);max-width:50%;line-height:1.5;pointer-events:none}
.hint b{color:var(--amber2);font-weight:500}

.pnl{background:var(--panel);border:1px solid var(--line);border-radius:4px;min-width:0}
.ph{font-family:var(--fD);font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg3);
  padding:7px 10px;border-bottom:1px solid var(--line);background:var(--bg2);display:flex;align-items:center;gap:7px}
.ph .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}
.ph .r{margin-left:auto;font-family:var(--fM);letter-spacing:0;text-transform:none;color:var(--fg2)}
.ph .stars{color:var(--amber2)}
.empty{padding:14px;color:var(--fg3);font-size:12.5px;line-height:1.55}
.mini{display:block;height:4px;background:#0d0f07;border:1px solid var(--line);margin-top:2px;overflow:hidden}
.mini i{display:block}
/* dossier */
.pbox{background:#0c0e07;border-bottom:1px solid var(--line);padding:8px 8px 0;position:relative}
.pbox canvas.profile{image-rendering:pixelated;width:100%;height:auto;display:block}
.pbox img.profileFallback{image-rendering:pixelated;width:112px;height:112px;display:block;margin:0 auto}
.pcap{display:flex;justify-content:space-between;gap:8px;font-family:var(--fM);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg3);padding:4px 2px 6px}
.dstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.dstrip div{background:var(--panel);padding:5px 7px;min-width:0}
.dstrip em{display:block;font-family:var(--fM);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);font-style:normal}
.dstrip b{font-family:var(--fM);font-size:13px}
.dstrip b.g,.sg b.g{color:var(--good)}.dstrip b.w,.sg b.w{color:var(--warn)}.dstrip b.d,.sg b.d{color:var(--bad)}
.tabs{display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:var(--panel);border:none;padding:7px 2px;cursor:pointer;font-family:var(--fD);font-weight:600;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)}
.tabs button:hover{background:var(--panel2);color:var(--fg2)}
.tabs button[aria-selected="true"]{background:var(--panel3);color:var(--amber2);box-shadow:inset 0 -2px 0 var(--amber)}
.facing{padding:9px 10px;border-bottom:1px solid var(--line)}
.facing .lbl,.ammoBox .lbl,.camBox .lbl,.slotBox .lbl{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.facing .lbl em,.ammoBox .lbl em,.camBox .lbl em,.slotBox .lbl em{font-family:var(--fM);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg3);font-style:normal}
.facing .lbl b,.ammoBox .lbl b,.camBox .lbl b,.slotBox .lbl b{font-family:var(--fD);font-size:15px;color:var(--amber2)}
.dial{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.dial button{background:var(--panel2);border:1px solid var(--line2);border-radius:3px;padding:7px 0;cursor:pointer;
  font-family:var(--fM);font-size:15px;line-height:1;color:var(--fg2)}
.dial button:hover:not(:disabled){border-color:var(--amber);color:var(--fg)}
.dial button[aria-pressed="true"]{background:#4a3a12;border-color:var(--amber);color:var(--amber2)}
.dial button.hub{opacity:.22;cursor:default}
.note,.note2{font-size:11px;color:var(--fg3);margin-top:6px;line-height:1.45}
.note b{color:var(--fg2)}
.note2{padding:9px 10px;border-top:1px solid var(--line);margin:0}
.acts{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.act{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;text-align:left;
  background:transparent;border:none;border-bottom:1px solid var(--line);padding:7px 10px;cursor:pointer}
.act:last-child{border-bottom:none}
.act:hover:not(:disabled){background:var(--panel2)}
.act:disabled{opacity:.33;cursor:not-allowed}
.act .ic{font-family:var(--fM);font-size:13px;color:var(--amber);text-align:center}
.act b{display:block;font-family:var(--fD);font-size:14.5px;font-weight:600;line-height:1.2}
.act small{display:block;color:var(--fg3);font-size:10.5px;line-height:1.3}
.act .cost{font-family:var(--fM);font-size:9px;letter-spacing:.06em;color:var(--fg3);white-space:nowrap}
.act.armed{background:#2a2210;box-shadow:inset 3px 0 0 var(--amber)}.act.armed b{color:var(--amber2)}
.act.set{box-shadow:inset 3px 0 0 var(--good)}.act.set b{color:#cde09a}
.act.free .cost{color:var(--good);font-weight:600}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.sg div{background:var(--panel);padding:5px 9px;min-width:0}
.sg em{display:block;font-family:var(--fM);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);font-style:normal}
.sg b{font-family:var(--fM);font-size:12.5px}
/* crew */
.headcount{padding:9px 10px;border-bottom:1px solid var(--line)}
.headcount em{font-family:var(--fM);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);font-style:normal}
.headcount b{font-family:var(--fD);font-size:26px;font-weight:800;color:var(--amber2);line-height:1;margin-right:5px}
.headcount span{font-family:var(--fM);font-size:11px;color:var(--fg2)}
.headcount small{display:block;font-size:10.5px;color:var(--fg3);line-height:1.45;margin-top:5px}
.supBox,.dmgBox{padding:8px 10px;border-top:1px solid var(--line)}
.supBox em,.dmgBox em{display:block;font-family:var(--fM);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg3);font-style:normal}
.supBox b{font-family:var(--fD);font-size:14px}
.supBox b.g{color:var(--good)}.supBox b.d{color:var(--bad)}
.supBox small,.dmgBox small{display:block;font-size:10.5px;color:var(--fg3);line-height:1.4;margin-top:3px}
.dchip{display:inline-block;font-family:var(--fM);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  background:#3a2412;border:1px solid #8a5420;color:#e8b070;border-radius:2px;padding:2px 6px;margin:3px 3px 0 0}
.crewList{display:flex;flex-direction:column}
.crewRow{display:grid;grid-template-columns:minmax(0,1fr) 78px auto;gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line)}
.cr1 em{font-family:var(--fM);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);font-style:normal}
.cr1 b{display:block;font-family:var(--fD);font-size:15px;font-weight:600;line-height:1.15}
.cr1 small{display:block;color:var(--fg3);font-size:10px;line-height:1.3}
.cr2{min-width:0}.cr2 .lv{font-family:var(--fM);font-size:10px;color:var(--fg2)}
.trait{display:block;font-family:var(--fM);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:#bcd48c;margin-top:3px}
.trait.neg{color:#e0a08c}
.trainBtn{background:var(--panel2);border:1px solid var(--line2);border-radius:3px;padding:5px 8px;cursor:pointer;
  font-family:var(--fD);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.trainBtn em{display:block;font-family:var(--fM);font-size:9px;color:var(--amber2);font-style:normal}
.trainBtn:hover:not(:disabled){border-color:var(--amber)}.trainBtn:disabled{opacity:.32;cursor:not-allowed}
.perkBox{padding:9px 10px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.perkBox em{font-family:var(--fM);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-style:normal;width:100%}
.tag{font-family:var(--fM);font-size:9px;letter-spacing:.05em;text-transform:uppercase;background:#2a3a1a;border:1px solid #46602a;
  color:#bcd48c;border-radius:2px;padding:2px 6px}
/* equipment */
.ammoBox,.camBox,.slotBox{padding:9px 10px;border-bottom:1px solid var(--line)}
.ammoRow{display:grid;grid-template-columns:26px minmax(0,1fr) 22px auto auto;gap:6px;align-items:center;margin-bottom:5px}
.al{font-family:var(--fM);font-size:9.5px;font-weight:600;letter-spacing:.06em}
.al.ap{color:var(--blu)}.al.he{color:#e08a5a}
.an{font-family:var(--fM);font-size:12px;text-align:right}
.pm{background:var(--panel2);border:1px solid var(--line2);border-radius:2px;width:21px;height:21px;cursor:pointer;
  font-family:var(--fM);font-size:12px;line-height:1;padding:0}
.pm:hover{border-color:var(--amber)}
.camRow{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.cam{background:var(--panel2);border:1px solid var(--line2);border-radius:3px;padding:3px 2px 4px;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:1px}
.cam img{image-rendering:pixelated;width:48px;height:48px;margin:-6px 0}
.cam span{font-family:var(--fM);font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg3)}
.cam:hover{border-color:var(--amber)}
.cam.on{background:#4a3a12;border-color:var(--amber)}.cam.on span{color:var(--amber2)}
.slot{display:block;width:100%;text-align:left;background:var(--panel2);border:1px dashed var(--line2);border-radius:3px;
  padding:6px 9px;cursor:pointer;margin-bottom:4px;position:relative}
.slot.filled{border-style:solid;background:var(--panel3)}
.slot:hover{border-color:var(--amber);border-style:solid}
.slot b{display:block;font-family:var(--fD);font-size:13.5px;font-weight:600;line-height:1.2}
.slot small{display:block;color:var(--fg3);font-size:10.5px;line-height:1.3}
.slot em{position:absolute;right:8px;top:7px;font-family:var(--fM);font-size:10px;color:var(--amber2);font-style:normal}
/* detachment */
.dlist{display:flex;flex-direction:column;max-height:258px;overflow-y:auto;scrollbar-width:thin}
.drow{display:grid;grid-template-columns:40px minmax(0,1fr) 78px;gap:7px;align-items:center;padding:4px 8px;
  border-bottom:1px solid var(--line);cursor:pointer}
.drow:hover{background:var(--panel2)}
.drow.on{background:#2a2210;box-shadow:inset 3px 0 0 var(--amber)}
.drow.dead{opacity:.42}
.drow img{image-rendering:pixelated;width:40px;height:40px;margin:-6px 0}
.dn{min-width:0}.dn b{display:block;font-family:var(--fD);font-size:13.5px;font-weight:600;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dst{font-family:var(--fM);font-size:9.5px;color:var(--fg3)}
.dfl{display:flex;gap:3px;flex-wrap:wrap;margin-top:1px}
.f{font-family:var(--fM);font-size:7.5px;letter-spacing:.05em;font-style:normal;border:1px solid var(--line2);
  color:var(--fg3);border-radius:2px;padding:0 3px}
.f.w{color:var(--warn);border-color:#6b5a22}.f.d{color:var(--bad);border-color:#6b3324}
.do{font-family:var(--fM);font-size:9.5px;color:var(--fg2);line-height:1.35;text-align:right}
.do.none{color:var(--fg3)}
/* sector */
.secGrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.secGrid div{background:var(--panel);padding:5px 9px;min-width:0}
.secGrid em{display:block;font-family:var(--fM);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);font-style:normal}
.secGrid b{font-family:var(--fD);font-size:14px}
.secGrid b.g{color:var(--good)}.secGrid b.w{color:var(--warn)}.secGrid b.d{color:var(--bad)}
.ticker{max-height:128px;overflow-y:auto;scrollbar-width:thin;padding:5px 0}
.tk{display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px;padding:3px 9px;font-family:var(--fM);font-size:10px;line-height:1.4}
.tk em{color:var(--fg3);font-style:normal}
.tk span{color:var(--fg2)}
.tk.hi span{color:var(--amber2)}.tk.bad span{color:var(--red)}.tk.good span{color:#a8c272}
.log{height:104px;overflow-y:auto;padding:6px 9px;display:flex;flex-direction:column;gap:3px;font-family:var(--fM);font-size:10px;line-height:1.45;scrollbar-width:thin}
.log div{color:var(--fg2);border-left:2px solid var(--line);padding-left:6px}
.log div.hi{color:var(--fg);border-left-color:var(--amber)}
.log div.kill{color:var(--red);border-left-color:#7a3322}
.log div.sys{color:var(--fg3);border-left-color:transparent;font-style:italic}
.depList{max-height:56vh;overflow-y:auto;display:flex;flex-direction:column}
.depSec{font-family:var(--fD);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);
  padding:11px 15px 5px;border-bottom:1px solid var(--line);background:var(--bg2)}
.depSec em{font-family:var(--fB);font-style:normal;font-size:11px;letter-spacing:0;text-transform:none;color:var(--fg3);margin-left:7px}
.depNone{padding:9px 15px;color:var(--fg3);font-size:12px}
.depRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;
  background:transparent;border:none;border-bottom:1px solid var(--line);padding:8px 15px;cursor:pointer}
.depRow:hover:not(:disabled){background:var(--panel2)}
.depRow:disabled{opacity:.32;cursor:not-allowed}
.depRow b{display:block;font-family:var(--fD);font-size:15px;font-weight:600;line-height:1.2}
.depRow small{display:block;color:var(--fg3);font-size:10.5px;line-height:1.3}
.depRow em{font-family:var(--fM);font-size:13px;color:var(--amber2);font-style:normal}
.predBox{padding:9px 10px;display:flex;flex-direction:column;gap:1px}
.bigKill{display:flex;align-items:baseline;gap:8px;padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:5px}
.bigKill b{font-family:var(--fD);font-size:30px;font-weight:800;color:var(--amber2);line-height:1}
.bigKill em{font-family:var(--fM);font-size:9.5px;color:var(--fg3);font-style:normal;line-height:1.3}
.mhead{font-family:var(--fM);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  margin:7px 0 2px;border-bottom:1px solid var(--line);padding-bottom:2px}
.mrow{display:flex;justify-content:space-between;gap:8px;font-family:var(--fM);font-size:10.5px;color:var(--fg2);padding:1px 0}
.mrow .p{color:var(--good)}.mrow .n{color:var(--bad)}
.mrow b{color:var(--fg)}
.mnote{font-size:10.5px;color:var(--fg3);line-height:1.45;margin-top:7px;border-top:1px dashed var(--line);padding-top:6px}
.vicList{display:flex;flex-direction:column}
.vrow{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 10px;
  border-bottom:1px solid var(--line);cursor:pointer}
.vrow:hover{background:var(--panel2)}
.vdot{width:9px;height:9px;border-radius:50%;background:transparent;border:2px solid var(--red);display:block}
.vdot.on{background:var(--blu);border-color:var(--blu)}
.vn{font-family:var(--fD);font-size:14px;font-weight:600}
.vs{font-family:var(--fM);font-size:9.5px;color:var(--fg3);letter-spacing:.05em}
.vrow.on .vs{color:var(--blu)}
.vicHow{padding:8px 10px;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--fg3);line-height:1.45}
.vicHow em{font-family:var(--fM);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--amber);font-style:normal;display:block}
.vicHow b{color:var(--fg2)}
.vt{display:inline-block;font-family:var(--fM);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:2px;padding:1px 5px;margin:3px 3px 0 0;color:var(--fg3)}
.vt.on{border-color:var(--good);color:#bcd48c}
.scrim{position:fixed;inset:0;background:rgba(6,8,4,.88);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:5px;max-width:560px;width:100%;max-height:86vh;overflow-y:auto}
.modal .mh{padding:14px 17px;border-bottom:1px solid var(--line);background:var(--bg2)}
.modal .mh h3{font-size:21px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--amber2)}
.modal .mh p{margin:3px 0 0;font-size:12.5px;color:var(--fg2)}
.opts{display:flex;flex-direction:column;gap:8px;padding:15px}
.opt{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:11px 13px;cursor:pointer}
.opt:hover{border-color:var(--amber);background:var(--panel3)}
.opt b{display:block;font-family:var(--fD);font-size:16px;font-weight:700}
.opt small{display:block;color:var(--fg2);font-size:12px;margin-top:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- loadout picker & upgrade tree ---- */
.loadBox{padding:9px 10px;border-bottom:1px solid var(--line)}
.loadList{display:flex;flex-direction:column;gap:3px}
.loadRow,.treeRow{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:3px;padding:6px 9px;cursor:pointer}
.loadRow:hover:not(:disabled),.treeRow:hover:not(:disabled){border-color:var(--line2);background:var(--panel3)}
.loadRow.on{border-color:var(--amber);background:#2a2210}
.loadRow b,.treeRow b{display:block;font-family:var(--fD);font-size:13.5px;font-weight:600;line-height:1.2}
.loadRow.on b{color:var(--amber2)}
.loadRow small,.treeRow small{display:block;color:var(--fg3);font-size:10.5px;line-height:1.35}
.lfx{display:block;font-family:var(--fM);font-size:9.5px;color:var(--good);margin-top:2px}
.loadRow.on .lfx,.treeRow.on .lfx{color:#bcd48c}
.treeHead{padding:9px 10px;border-bottom:1px solid var(--line)}
.treeHead em{font-family:var(--fM);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);font-style:normal}
.treeHead b{display:block;font-family:var(--fD);font-size:16px;color:var(--amber2);line-height:1.2}
.treeHead small{display:block;font-size:10.5px;color:var(--fg3);line-height:1.45;margin-top:4px}
.treeList{display:flex;flex-direction:column;gap:3px;padding:7px 10px}
.treeRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.treeRow:disabled{opacity:.34;cursor:not-allowed}
.treeRow.on{border-color:var(--good);background:#232e18}
.treeRow.on b{color:#cde09a}
.tn{min-width:0}
.tc{font-family:var(--fM);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);text-align:right;white-space:nowrap}
.tc em{display:block;font-family:var(--fM);font-size:13px;color:var(--amber2);font-style:normal}
.treeRow.on .tc em{color:var(--good)}

/* ------------------------------------------------------------ save slots */
.saveList{max-height:56vh;overflow-y:auto;display:flex;flex-direction:column}
.saveRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 15px;border-bottom:1px solid var(--line)}
.saveRow:hover{background:var(--panel2)}
.saveMeta b{display:block;font-family:var(--fD);font-size:15px;font-weight:600;line-height:1.2}
.saveMeta small{display:block;color:var(--fg3);font-size:10.5px;line-height:1.45}
.saveMeta small em{font-family:var(--fM);font-size:9.5px;color:var(--fg3);font-style:normal;letter-spacing:.04em}
.saveBtns{display:flex;gap:4px;flex:none}