/* ============================================================
   WANZER TACTICS — Swiss Industrial Tactical UI
   Dark Gunmetal #0B0E11 / Amber #F59E0B / Cyan #06B6D4
   Crimson #EF4444 / Emerald #10B981
   ============================================================ */
:root{
  --bg:#0B0E11; --bg2:#11161B; --panel:#12181F; --panel2:#0E141A;
  --line:#24303B; --line2:#2F3E4C;
  --amber:#F59E0B; --amber2:#B4770A; --cyan:#06B6D4; --red:#EF4444;
  --green:#10B981; --text:#D7E1EA; --dim:#8CA0B3; --white:#F2F6FA;
  --mono:'Consolas','Lucida Console','Courier New',monospace;
  --sans:'Segoe UI','Arial Narrow',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--mono)}
button{font-family:var(--mono);cursor:pointer}
.hidden{display:none !important}
b{font-weight:700}
#app{position:fixed;inset:0;background:var(--bg)}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:9999;mix-blend-mode:overlay;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.screen{position:absolute;inset:0}

.hbtn{background:#161E26;border:1px solid var(--line2);color:var(--text);padding:6px 12px;font-size:12px;
  letter-spacing:1px;text-transform:uppercase;transition:all .12s}
.hbtn:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 8px rgba(245,158,11,.3)}
.hbtn:disabled{opacity:.35;cursor:default;box-shadow:none;border-color:var(--line)}
.hbtn.back{border-color:var(--cyan)}
.hbtn.back:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px rgba(6,182,212,.3)}
.hbtn.danger{border-color:#5B2222;color:#E08484}
.hbtn.danger:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 8px rgba(239,68,68,.35)}

/* ============================================================ MAIN MENU */
#screen-menu{display:flex;align-items:center;justify-content:center;overflow:hidden}
.menu-backdrop{position:absolute;inset:0;background:
  radial-gradient(1200px 700px at 70% 20%,#16202A 0%,transparent 60%),
  radial-gradient(900px 600px at 20% 90%,#141C14 0%,transparent 55%),var(--bg)}
.menu-grid-lines{position:absolute;inset:0;opacity:.25;background:
  repeating-linear-gradient(90deg,transparent 0 79px,var(--line) 79px 80px),
  repeating-linear-gradient(0deg,transparent 0 79px,var(--line) 79px 80px)}
.menu-frame{position:relative;border:1px solid var(--line2);background:rgba(11,14,17,.88);padding:34px 46px 26px;
  box-shadow:0 0 60px rgba(0,0,0,.8),inset 0 0 40px rgba(6,182,212,.04);max-width:640px;width:92%}
.menu-frame::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(45deg,var(--amber) 0 10px,transparent 10px 20px)}
.menu-tagline{font-size:10px;letter-spacing:3px;color:var(--cyan);margin-bottom:10px}
.menu-title{font-family:var(--sans);font-size:54px;letter-spacing:6px;color:var(--white);font-weight:800;line-height:1}
.menu-title span{color:var(--amber);-webkit-text-stroke:1px #3a2a08}
.menu-sub{font-size:14px;letter-spacing:8px;color:var(--dim);margin:8px 0 4px}
.menu-ver{font-size:10px;color:#4E6172;letter-spacing:1px;border-bottom:1px solid var(--line);padding-bottom:14px}
.menu-buttons{display:flex;flex-direction:column;gap:8px;margin:18px 0 14px}
.mbtn{background:#131A22;border:1px solid var(--line2);color:var(--text);text-align:left;padding:11px 16px;
  font-size:14px;letter-spacing:2px;transition:all .12s;position:relative}
.mbtn::after{content:"»";position:absolute;right:14px;color:var(--line2);transition:all .12s}
.mbtn:hover:not(:disabled){transform:translateX(6px);border-color:var(--amber);color:var(--amber);
  background:#1A2129;box-shadow:-4px 0 0 var(--amber)}
.mbtn:hover:not(:disabled)::after{color:var(--amber)}
.mbtn.primary{border-color:var(--amber);color:var(--amber)}
.mbtn.warn:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);box-shadow:-4px 0 0 var(--cyan)}
.mbtn.danger{color:#B96A6A}
.mbtn.danger:hover:not(:disabled){border-color:var(--red);color:var(--red);box-shadow:-4px 0 0 var(--red)}
.menu-sep{height:1px;background:var(--line);margin:4px 0}
.menu-saveinfo{font-size:11px;color:var(--dim);border:1px dashed var(--line);padding:8px 10px;margin-bottom:12px}
.menu-saveinfo:empty{display:none}
.menu-controls{font-size:10px;color:#5B6E7F;letter-spacing:.5px;line-height:1.7}
.menu-controls b{color:var(--amber2)}


/* ============================================================ OVERLAYS */
.overlay{position:fixed;inset:0;background:rgba(4,7,10,.82);z-index:500;display:flex;
  align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.overlay-box{background:var(--panel);border:1px solid var(--line2);box-shadow:0 0 50px rgba(0,0,0,.9);
  width:460px;max-width:94%;max-height:92vh;overflow:auto;padding:20px 24px;position:relative}
.overlay-box::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:repeating-linear-gradient(45deg,var(--cyan) 0 8px,transparent 8px 16px)}
.overlay-box.wide{width:940px}
.overlay-box.small{width:400px}
.ov-title{font-family:var(--sans);font-size:20px;letter-spacing:3px;color:var(--amber);margin-bottom:14px;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.ov-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.ov-btn{background:#161E26;border:1px solid var(--line2);color:var(--text);padding:9px 18px;font-size:13px;letter-spacing:1.5px}
.ov-btn:hover{border-color:var(--amber);color:var(--amber)}
.ov-btn.primary{border-color:var(--amber);color:var(--amber);background:#1C1710}

.stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.stage-cell{border:1px solid var(--line2);background:#10161D;padding:9px 10px;cursor:pointer;transition:all .12s;
  position:relative;min-height:78px}
.stage-cell:hover:not(.locked){border-color:var(--amber);box-shadow:0 0 10px rgba(245,158,11,.25);transform:translateY(-2px)}
.stage-cell.locked{opacity:.38;cursor:not-allowed;filter:grayscale(.8)}
.stage-cell.cleared{border-color:#2E5F4C}
.stage-cell.cleared::after{content:"CLEAR";position:absolute;top:6px;right:6px;font-size:8px;color:var(--green);letter-spacing:1px}
.stage-cell.boss{border-color:#6B2727}
.stage-cell .s-num{font-size:11px;color:var(--cyan);letter-spacing:1px}
.stage-cell .s-name{font-size:10.5px;color:var(--text);margin-top:3px;line-height:1.3}
.stage-cell .s-theme{font-size:9px;color:var(--dim);margin-top:4px}
.stage-cell .s-boss{position:absolute;bottom:6px;left:10px;font-size:8px;color:var(--red);letter-spacing:2px}

.brief-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brief-col{border:1px solid var(--line);background:var(--panel2);padding:12px;font-size:11.5px;line-height:1.65;min-height:220px}
.brief-col h4{font-size:11px;color:var(--cyan);letter-spacing:2px;margin-bottom:8px;border-bottom:1px dashed var(--line);padding-bottom:5px}
.brief-col .brow{display:flex;justify-content:space-between;color:var(--dim)}
.brief-col .brow b{color:var(--text)}
.brief-col .ehost{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dotted #1D2830;font-size:10.5px}
.brief-col .ehost .bosstag{color:var(--red)}
.brief-deploy{margin-top:12px;border:1px solid var(--line);background:#0D1319;padding:10px 12px;font-size:11px;line-height:1.7}
.brief-deploy .OK{color:var(--green)}
.brief-deploy .BAD{color:var(--red);letter-spacing:1px}
.brief-deploy .odcheck{display:flex;justify-content:space-between;max-width:560px}

.debrief-body,.confirm-body{font-size:13px;line-height:2}
.debrief-body .drow{display:flex;justify-content:space-between;border-bottom:1px dotted #24303B;max-width:420px}
.debrief-body .gain{color:var(--amber);font-size:16px;letter-spacing:1px}
.debrief-body .lost{color:var(--red)}

/* ============================ HANGAR — v1.12 simple showroom ============================ */
#screen-hangar{display:flex;flex-direction:column}
.hangar-topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:2px solid var(--line2);
  background:linear-gradient(180deg,#131A21,#0C1116);flex-wrap:wrap}
.hangar-funds{margin-left:auto;display:flex;gap:14px;align-items:center}
.fund{font-size:14px;border:1px solid var(--line2);padding:5px 12px;background:#10161D;letter-spacing:1px}
.fund.c{color:var(--amber);border-color:#4a3a12}
.launch-btn{background:linear-gradient(#B3202C,#7E121D);border:1px solid #F0606C;color:#fff;font-weight:700;
  letter-spacing:2px;font-size:14px;padding:10px 26px;box-shadow:0 0 16px rgba(239,68,68,.4)}
.launch-btn:hover{filter:brightness(1.2);transform:translateY(-1px)}
.hangar-main{flex:1;display:grid;grid-template-columns:290px 1fr;gap:0;min-height:0}
.hangar-left{border-right:1px solid var(--line);padding:12px 14px 24px;overflow-y:auto;background:var(--panel2)}
.hangar-right{position:relative;display:flex;flex-direction:column;
  background:radial-gradient(700px 500px at 50% 42%,#131B22 0%,#0A0E12 78%)}
.panel-title{font-size:11px;letter-spacing:2px;color:var(--cyan);border-bottom:1px solid var(--line);
  padding-bottom:5px;margin:14px 0 8px}
.panel-title:first-child{margin-top:2px}
#hangar-canvas{flex:1;width:100%;min-height:0;cursor:grab}
.turntable-caption{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:10px;
  color:var(--dim);letter-spacing:2px}
.showroom-bars{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:min(360px,86%);
  background:rgba(10,14,18,.88);border:1px solid var(--line2);padding:10px 12px;font-size:10.5px}
.showroom-bars .sr-name{color:var(--cyan);letter-spacing:2px;font-size:11px;margin-bottom:7px}
.showroom-bars .sr-row{display:flex;align-items:center;gap:8px;margin:3px 0}
.showroom-bars .sr-l{width:46px;color:var(--dim);font-size:9.5px;letter-spacing:1px}
.showroom-bars .sr-bar{flex:1;height:9px;background:#0A0F13;border:1px solid var(--line);position:relative}
.showroom-bars .sr-fill{display:block;height:100%}
.showroom-bars .sr-v{width:40px;text-align:right;color:var(--text);font-size:9.5px}
.showroom-bars .sr-note{margin-top:6px;color:var(--green);font-size:9.5px;letter-spacing:1px}

.unit-tabs{display:flex;gap:8px;flex-wrap:wrap}
.utab{display:flex;align-items:center;gap:7px;border:1px solid var(--line2);background:#10161D;padding:7px 12px;
  color:var(--dim);font-size:11.5px;letter-spacing:1px;transition:all .12s}
.utab .uNum{color:var(--cyan);font-weight:700}
.utab .ucs{color:var(--amber);font-size:10px}
.utab:hover{border-color:var(--cyan)}
.utab.active{border-color:var(--amber);color:var(--white);background:#171E14;box-shadow:inset 0 -2px 0 var(--amber)}

.ch-group{display:flex;flex-direction:column;gap:5px}
.ch-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  border:1px solid var(--line2);background:#0E141B;padding:7px 10px;color:var(--text);font-size:11.5px}
.ch-btn b{letter-spacing:1.5px;font-size:12px}
.ch-btn span{color:var(--dim);font-size:9.5px;letter-spacing:.5px}
.ch-btn:hover{border-color:var(--cyan)}
.ch-btn.active{border-color:var(--amber);background:#17160F;box-shadow:inset 3px 0 0 var(--amber)}
.ch-btn.active b{color:var(--amber)}
.ch-btn.locked{opacity:.45}
.ch-btn:disabled{cursor:not-allowed;opacity:.4;filter:grayscale(.55)}
.armor-btn{width:100%;background:linear-gradient(#15402F,#0C261C);border:1px solid #2E8F65;color:#7FF0BC;
  font-weight:700;letter-spacing:1px;font-size:11.5px;padding:12px 10px;margin-top:2px}
.armor-btn:hover:not(:disabled){filter:brightness(1.25)}
.armor-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.status-simple{margin-top:12px;font-size:10.5px;color:var(--amber);letter-spacing:1px;min-height:16px}

/* ============================================================ BATTLE HUD */
#screen-battle{overflow:hidden}
#battle-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bhud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:8px 14px;
  background:linear-gradient(180deg,rgba(9,12,16,.95),rgba(9,12,16,.75));border-bottom:1px solid var(--line2);z-index:20}
.bhud-stage{font-size:13px;color:var(--white);letter-spacing:1px}
.bhud-stage b{color:var(--amber)}
.bhud-phase{font-size:16px;letter-spacing:4px;color:var(--cyan);font-weight:700;min-width:210px}
.bhud-phase.enemyphase{color:var(--red);animation:blink 1s infinite}
.bhud-turn{font-size:13px;color:var(--dim);border:1px solid var(--line);padding:3px 10px}
.bhud-actions{margin-left:auto;display:flex;gap:8px}

/* FREE SQUAD SELECT — Jalur A: bar tombol cepat ganti unit di atas layar tempur */
#squad-switcher-bar{position:absolute;top:48px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:19;pointer-events:auto;
  flex-wrap:wrap;justify-content:center;max-width:92vw}
.sq-btn{
  cursor:pointer;font-weight:700;font-size:10.5px;letter-spacing:.5px;
  padding:7px 12px;white-space:nowrap;
  color:var(--text);background:linear-gradient(#18222C,#0E1820);
  border:1px solid var(--line2);border-radius:3px;
  transition:filter .12s,transform .08s,box-shadow .1s}
.sq-btn:not(.sq-hint):not(.done):hover{
  filter:brightness(1.35);transform:translateY(-1px);
  box-shadow:0 0 12px rgba(6,182,212,.35)}
.sq-btn.active{border-color:var(--cyan);color:var(--cyan);
  background:linear-gradient(#112530,#0A1A20);
  box-shadow:0 0 14px rgba(6,182,212,.5);animation:amber-pulse 2s ease-in-out infinite}
.sq-btn.done{opacity:.35;cursor:not-allowed}
.sq-btn.sq-hint{opacity:.25;font-size:9px;letter-spacing:.4px;cursor:default;border-color:transparent}
.sq-btn .sq-ap{color:var(--amber);margin-left:5px}
@keyframes amberPulse{0%,100%{box-shadow:0 0 10px rgba(6,182,212,.45)}50%{box-shadow:0 0 22px rgba(6,182,212,.7)}}

.bhud-unit{position:absolute;left:14px;top:58px;width:262px;background:rgba(12,17,22,.94);border:1px solid var(--line2);
  border-left:3px solid var(--amber);padding:12px;z-index:20;font-size:11px}
.u-name{font-family:var(--sans);font-size:15px;letter-spacing:1px;color:var(--white)}
.u-pilot{font-size:10px;color:var(--dim);margin:3px 0 8px;letter-spacing:1px}
.u-aprow{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--amber);margin-bottom:8px}
.apbar{flex:1;height:9px;background:#0A0F13;border:1px solid var(--line)}
.apfill{height:100%;background:var(--amber);transition:width .25s}
.hp4{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.hp4 .hrow{display:grid;grid-template-columns:52px 1fr 66px;gap:7px;align-items:center;font-size:9px}
.hp4 .hrow .hl{color:var(--dim);letter-spacing:1px}
.hp4 .hrow .hl.dead{color:var(--red);text-decoration:line-through}
.hp4 .hrow .hbar{height:9px;background:#0A0F13;border:1px solid var(--line);position:relative}
.hp4 .hrow .hbar .hf{height:100%;transition:width .3s}
.hp4 .hrow .hbar.dying{animation:blink 1s infinite}
.hp4 .hrow .hn{color:var(--dim);text-align:right}
.u-weapons{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.u-weapons .wrow{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim);
  border-bottom:1px dotted #1B2530;padding-bottom:2px}
.u-weapons .wrow b{color:var(--text)}
.u-weapons .wrow.noammo b{color:var(--red)}
.u-weapons .wrow.narml b{color:var(--red);text-decoration:line-through}
.u-cmds{display:flex;gap:6px;margin-bottom:8px}
.hcmd{flex:1;background:#141C14;border:1px solid #2E5F3C;color:#7ED9A7;padding:6px 4px;font-size:9.5px;letter-spacing:1px}
.hcmd:hover:not(:disabled){border-color:var(--green);box-shadow:0 0 8px rgba(16,185,129,.3)}
.hcmd:disabled{opacity:.3}
.u-hint{font-size:9.5px;color:#5B7280;line-height:1.6;border-top:1px dashed var(--line);padding-top:7px}

.bhud-inspect{position:absolute;right:14px;top:58px;width:250px;background:rgba(12,17,22,.94);
  border:1px solid var(--line2);border-right:3px solid var(--red);padding:12px;z-index:20}
.bhud-target{position:absolute;right:14px;bottom:64px;width:330px;background:rgba(10,20,26,.96);
  border:1px solid var(--cyan);padding:12px;z-index:30}
.tg-title{font-size:11px;color:var(--cyan);letter-spacing:1px;margin-bottom:9px}
.tg-weapons{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.tgw{display:grid;grid-template-columns:1fr auto;gap:8px;border:1px solid var(--line2);background:#0C141A;
  padding:7px 9px;font-size:10.5px;cursor:pointer;transition:all .1s}
.tgw:hover:not(.nosel){border-color:var(--amber);background:#171A0F}
.tgw.nosel{opacity:.4;cursor:not-allowed}
.tgw .wstat{color:var(--dim);font-size:9px;margin-top:2px}
.tgw .wap{color:var(--amber)}
.tgw.nolink{border-color:#2E5F4C}

.bhud-log{position:absolute;left:14px;bottom:12px;width:430px;max-height:150px;overflow:hidden;font-size:9.5px;
  line-height:1.65;z-index:15;color:#7C93A8;background:rgba(8,11,15,.72);border:1px solid #17222C;padding:7px 10px;
  display:flex;flex-direction:column-reverse}
.bhud-log .lg{display:block}
.bhud-log .lg-major{color:var(--amber)}
.bhud-log .lg-bad{color:var(--red)}
.bhud-log .lg-good{color:var(--green)}
.bhud-log .lg-sys{color:#4E6172}

/* ---------- cinematic cutscene overlay ---------- */
.cutscene{position:absolute;inset:0;z-index:40;pointer-events:none}
.cs-vspanel{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:grid;
  grid-template-columns:270px 64px 270px;gap:0;background:rgba(9,13,17,.93);border:1px solid var(--line2);
  border-top:2px solid var(--amber);padding:10px 14px;min-width:640px;transition:opacity .2s}
.cs-side{font-size:10px;line-height:1.6}
.cs-side.l{text-align:left}
.cs-side.r{text-align:right}
.cs-side .csn{font-family:var(--sans);font-size:13px;letter-spacing:1px;color:var(--white);margin-bottom:3px}
.cs-side.l .csn{color:var(--cyan)}
.cs-side.r .csn{color:var(--red)}
.cs-side .hrow{display:grid;grid-template-columns:38px 1fr 52px;gap:5px;align-items:center;font-size:8px;margin:1.5px 0}
.cs-side .hrow .hl{color:var(--dim)}
.cs-side .hrow .hl.dead{color:var(--red);text-decoration:line-through}
.cs-side .hrow .hbar{height:7px;background:#0A0F13;border:1px solid var(--line)}
.cs-side .hrow .hbar .hf{height:100%;transition:width .3s}
.cs-side .hrow .hn{color:var(--dim)}
.cs-vs{display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:26px;
  font-weight:800;color:var(--amber);text-shadow:0 0 12px rgba(245,158,11,.6)}
.cs-feed{position:absolute;left:50%;transform:translateX(-50%);bottom:120px;width:560px;display:flex;
  flex-direction:column;align-items:center;gap:5px;font-size:12px;letter-spacing:1px}
.cs-feed .fl{background:rgba(8,12,16,.85);border:1px solid var(--line2);padding:4px 14px;opacity:0;
  animation:riseIn .25s forwards}
.cs-feed .fl.hit{color:var(--amber);border-color:#4a3a12}
.cs-feed .fl.graze{color:var(--dim)}
.cs-feed .fl.miss{color:var(--dim)}
.cs-feed .fl.crit{color:var(--red);border-color:#5B2222;font-weight:700;font-size:13px}
.cs-feed .fl.destroy{color:var(--red);border-color:var(--red);font-weight:700;letter-spacing:2px;
  background:rgba(60,10,10,.8);font-size:13px;animation:destroyPop .5s forwards}
.cs-feed .fl.heal{color:var(--green);border-color:#1E4636}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes destroyPop{0%{transform:scale(1.6)}100%{transform:scale(1)}}
.cs-flash{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .1s}
.cs-banner{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-family:var(--sans);
  font-size:40px;font-weight:800;letter-spacing:6px;color:var(--red);opacity:0;pointer-events:none;
  text-shadow:0 0 24px rgba(239,68,68,.8);white-space:nowrap}
.cs-banner.show{animation:bannerIn 1.1s forwards}
.cs-banner.show.link{color:var(--cyan);text-shadow:0 0 24px rgba(6,182,212,.8)}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(2)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  80%{opacity:1}100%{opacity:0}}

/* ---------- floating world banners ---------- */
.floatstack{position:absolute;inset:0;pointer-events:none;z-index:35}
.fbanner{position:absolute;transform:translate(-50%,-100%);font-size:12px;letter-spacing:2px;font-weight:700;
  background:rgba(8,12,16,.85);border:1px solid var(--line2);padding:3px 10px;white-space:nowrap;
  animation:floatUp 1.6s forwards}
.fbanner.link{color:var(--cyan);border-color:var(--cyan)}
.fbanner.dest{color:var(--red);border-color:var(--red);font-size:13px}
.fbanner.kill{color:var(--amber);border-color:var(--amber);font-size:13px}
.fbanner.miss{color:var(--dim)}
@keyframes floatUp{0%{opacity:0;margin-top:0}10%{opacity:1}80%{opacity:1}100%{opacity:0;margin-top:-46px}}

/* scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0A0F13}
::-webkit-scrollbar-thumb{background:#263241;border:2px solid #0A0F13}
::-webkit-scrollbar-thumb:hover{background:var(--amber2)}

/* appended: hangar toast note */
.hnote{position:absolute;left:14px;bottom:6px;font-size:12px;letter-spacing:.08em;
  color:var(--dim);opacity:0;transition:opacity .25s;pointer-events:none}
.hnote.show{opacity:1;color:var(--red)}
.hnote.show.ok{color:var(--green)}





/* ============================================================
   UPDATE: MASTER PBR WANZER MODELS (buildMasterWanzer)
   - both 3D canvases receive their studio environment map from JS
     (game.js initRenderer/buildBoard + hangar.js ttInit)
   - touch-action off so drag-orbit & wheel zoom are reliable
   ============================================================ */
#battle-canvas,
#hangar-canvas { touch-action: none; }


/* ============================================================
   UPGRADE B - 4-SLOT WEAPON SELECT BAR (battle HUD bottom)
   ============================================================ */
/* WEAPON SLOTS lives INSIDE #bhud-bottom-wrapper (index.html): never overlaps Quick Strike */
#weapon-select-bar{position:relative;left:auto;bottom:auto;transform:none;z-index:31;margin:0 auto;
  padding:7px 14px 10px;background:rgba(8,12,16,.92);border:1px solid #2A3A4A;border-top:2px solid var(--cyan);
  box-shadow:0 6px 26px rgba(0,0,0,.6);max-width:min(96vw,980px)}
#weapon-select-bar .ws-title{font-size:10.5px;letter-spacing:1px;color:var(--cyan);font-weight:700;margin-bottom:6px;text-align:center}
#weapon-select-bar .ws-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.wsel{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:150px;max-width:225px;
  padding:7px 10px 8px;text-align:left;color:var(--text);
  background:linear-gradient(#151D25,#0F151B);border:1px solid var(--line2);transition:filter .12s,box-shadow .12s,transform .08s}
.wsel:not(:disabled):hover{filter:brightness(1.22);transform:translateY(-1px);box-shadow:0 0 10px rgba(6,182,212,.35)}
.wsel .ws-slot{font-size:9.5px;letter-spacing:1px;color:var(--dim);font-weight:700}
.wsel .ws-name{font-size:11px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:205px}
.wsel .ws-stat{font-size:9.5px;color:var(--dim);white-space:nowrap}
.wsel .ws-tip{font-size:9px;color:#5E7285;max-width:205px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsel .ws-block{font-size:9.5px;color:var(--red);font-weight:700;letter-spacing:.5px}
.wsel.active{border-color:var(--amber);box-shadow:0 0 14px rgba(245,158,11,.45);
  background:linear-gradient(#242017,#15120C)}
.wsel.active .ws-slot{color:var(--amber)}
.wsel.blocked{opacity:.42;cursor:not-allowed;filter:grayscale(.7)}
.wsel.blocked .ws-name{color:var(--red)}
.wsel.empty{opacity:.35}

/* ========== UPGRADE FIX — weapon card SVG logo icon ========== */
.wsel{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto auto;
  column-gap:8px;row-gap:2px}
/* icon cell */
.wsel .ws-logo{grid-column:1;grid-row:1 / 3;align-self:center;display:flex;
  align-items:center;justify-content:center;padding:2px 0}
/* slot label under icon */
.wsel .ws-slot{grid-column:1;grid-row:3;font-size:9.5px;letter-spacing:1px;
  color:var(--dim);font-weight:700;text-align:center}
/* name + stat + tip in right cell */
.wsel .ws-name-cell{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:1px}
.wsel .ws-name{font-size:11px;color:var(--white);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:205px;line-height:1.3}
.wsel .ws-stat{font-size:9.5px;color:var(--dim);white-space:nowrap;line-height:1.3}
.wsel .ws-tip,.wsel .ws-block{font-size:9px;color:#5E7285;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.wsel .ws-block{color:var(--red);font-weight:700;letter-spacing:.5px}
.wsel.active{grid-template-columns:46px 1fr;border-color:var(--amber);
  box-shadow:0 0 14px rgba(245,158,11,.45);background:linear-gradient(#242017,#15120C)}
.wsel.active .ws-slot{color:var(--amber)}
/* Empty slot: grey dash SVG */
.wsel.empty .ws-logo svg{opacity:.38}