/* ======== STYLE B — "1987 BROADCAST CRISIS" ========
   All Style B screens live in #stage (1672×941, scaled to fit) — see ui/sb/stage.js.
   Shared builders that emit these classes live in ui/sb/components.js. */

/* Style B fonts (paths are relative to this file, i.e. ui/) */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/barlowcondensed-500.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/barlowcondensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/barlowcondensed-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/barlowcondensed-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibmplexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibmplexmono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ibmplexmono-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibmplexsanscondensed-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ibmplexsanscondensed-600.woff2') format('woff2')}

:root{
  --sb-navy:#0A1824; --sb-panel:#0C1B29; --sb-control:#10283A;
  --sb-border:#23394e; --sb-border2:#1e3346; --sb-page:#05070a;
  --sb-red:#B62B28; --sb-alert:#E34439;
  --sb-ivory:#E7D8B7; --sb-ivory2:#F2E6C8;
  --sb-cyan:#56C7D9; --sb-green:#70BA79; --sb-amber:#e8b33a;
  --sb-muted:#7d92a5; --sb-dim:#5a7186;
}
@keyframes cw-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes cw-ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes cw-scan{0%{background-position:0 0}100%{background-position:0 4px}}

/* stage shell: full-screen layer above the battle shell, below #modal (20) and #cut (120) */
#stage{position:fixed;inset:0;background:var(--sb-page);overflow:hidden;display:none;z-index:18}
.sb-stage{position:absolute;left:50%;top:50%;width:1672px;height:941px;transform:translate(-50%,-50%);transform-origin:center center;background:var(--sb-page);color:var(--sb-ivory);font-family:'IBM Plex Sans Condensed','Saira Condensed',sans-serif}
.sb-stage button{font:inherit;margin:0;cursor:pointer}

/* broadcast fx */
.sb-scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 4px);animation:cw-scan .4s linear infinite;opacity:.5}
.sb-lamp-pulse{position:absolute;border-radius:4px;background:rgba(227,68,57,.28);box-shadow:0 0 26px 10px rgba(227,68,57,.35);animation:cw-blink 1.6s steps(1) infinite;pointer-events:none}
.sb-lamp-dot{width:14px;height:14px;border-radius:50%;background:var(--sb-alert);box-shadow:0 0 12px 3px rgba(227,68,57,.7);animation:cw-blink 1.6s steps(1) infinite;flex:0 0 auto}

/* shared chrome */
.sb-panel{background:linear-gradient(170deg,var(--sb-panel),var(--sb-navy));border:1px solid var(--sb-border);box-shadow:inset 0 1px 0 rgba(140,170,200,.08),0 3px 10px rgba(0,0,0,.5)}
.sb-panel-hd{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:25px;letter-spacing:2.5px;color:var(--sb-ivory);padding:10px 18px;border-bottom:1px solid var(--sb-border);background:var(--sb-control)}
.sb-card{background:var(--sb-panel);border:1px solid var(--sb-border2);box-shadow:inset 0 1px 0 rgba(140,170,200,.06)}
.sb-keycap{display:inline-block;width:22px;height:22px;background:linear-gradient(#efe6d2,#d9cbab);border:2px solid #08090c;box-shadow:inset 0 -3px 4px rgba(0,0,0,.25);flex:0 0 auto}
.sb-btn-guarded{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(#c6362f,#8f1f1b);border:2px solid #1a0d0c;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.6);color:var(--sb-ivory2);font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:8px 18px}
.sb-btn-guarded:hover{filter:brightness(1.12)}
.sb-btn-guarded:disabled{opacity:.45;cursor:default;filter:none}
.sb-hazard{display:flex;gap:7px;height:38px}
.sb-hazard i{width:9px;background:repeating-linear-gradient(115deg,#E7D8B7 0 5px,#a02522 5px 11px)}
.sb-lowerthird{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,var(--sb-red),#7e1f1c);border-top:2px solid #1a0d0c;color:var(--sb-ivory2);font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:0 18px;box-sizing:border-box}
.sb-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sb-row-label{font-family:'IBM Plex Mono',monospace;font-size:15px;color:#9fb2c4}
.sb-seg{display:inline-flex;background:#0A1824;border:2px solid var(--sb-border);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:1px}
.sb-seg button{padding:4px 16px;background:transparent;border:0;border-right:1px solid var(--sb-border);color:var(--sb-dim);text-transform:uppercase}
.sb-seg button:last-child{border-right:0}
.sb-seg button.on{background:var(--sb-control);color:var(--sb-ivory)}
.sb-ticker{position:absolute;background:#0a1420;border:1px solid #23344a;overflow:hidden;display:flex;align-items:center}
.sb-ticker-track{display:flex;gap:70px;white-space:nowrap;animation:cw-ticker 18s linear infinite;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:27px;letter-spacing:3px;color:var(--sb-ivory)}

/* top band (Settings / Skirmish specs): title + right-side telemetry slots */
.sb-topband{position:absolute;left:0;top:0;width:1672px;height:72px;background:linear-gradient(#122333,#0A1824);border-bottom:2px solid #04090f;display:flex;align-items:center;padding:0 24px;box-sizing:border-box;gap:22px}
.sb-topband-back{display:flex;align-items:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:2px;color:#9fb2c4;background:none;border:1px solid var(--sb-border);padding:6px 18px}
.sb-topband-back:hover{border-color:var(--sb-red);color:var(--sb-ivory)}
.sb-topband-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:42px;letter-spacing:5px;color:var(--sb-ivory)}
.sb-topband-sub{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:17px;letter-spacing:1px;color:#9fb2c4}
.sb-topband-telemetry{margin-left:auto;display:flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:2px;color:var(--sb-cyan)}
.sb-tele-val{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:2.5px;color:var(--sb-ivory)}

.sb-topband-tag{font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:2px;color:var(--sb-cyan)}

/* skirmish selection screen (spec: new-stuff/Skirmish Selection.dc.html) */
.sb-board{position:absolute;left:24px;top:96px;width:1624px;height:820px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:1fr;gap:18px}
.sb-sc-card{background:var(--sb-panel) center/cover no-repeat;border:1px solid var(--sb-border);display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.sb-sc-card:hover{border-color:var(--sb-cyan)}
.sb-sc-head{display:flex;align-items:stretch;background:rgba(7,14,20,.58);border-bottom:1px solid var(--sb-border)}
.sb-sc-ch{background:var(--sb-control);color:var(--sb-ivory);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;display:flex;align-items:center;padding:0 12px;border-right:1px solid var(--sb-border);white-space:nowrap}
.sb-sc-title{flex:1;display:flex;align-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:25px;letter-spacing:1.5px;color:var(--sb-ivory);padding:8px 14px;line-height:1.05;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sb-sc-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:10px 14px;gap:8px;min-height:0;background:rgba(7,14,20,.64)}
.sb-sc-sub{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:16px;letter-spacing:.5px;color:#cfe0ee;text-shadow:0 1px 3px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-sc-actions{display:flex;align-items:center;gap:12px}
.sb-sc-map{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--sb-cyan);border:1px solid #1e4652;padding:3px 10px;background:#08141d;white-space:nowrap}
.sb-sc-side{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:2px;padding:6px 20px}
.sb-sc-side.nato{margin-left:auto;color:#cfe2f7;background:var(--sb-control);border:2px solid #2c4a66}
.sb-sc-side.nato:hover{border-color:var(--sb-cyan);background:#153349}
.sb-sc-side.pact{color:#f6d7cf;background:#3a1512;border:2px solid var(--sb-red)}
.sb-sc-side.pact:hover{background:#4d1b17;box-shadow:0 0 14px rgba(227,68,57,.4)}
.sb-sc-badge{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;letter-spacing:1.5px;color:#1a1206;background:var(--sb-amber);padding:3px 9px;margin:8px 12px 0 0;align-self:center;white-space:nowrap}

/* settings screen (spec: new-stuff/Settings.dc.html) */
.sb-set-cols{position:absolute;left:24px;top:96px;width:1624px;height:820px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.sb-set-panel{display:flex;flex-direction:column}
.sb-set-body{padding:18px;display:flex;flex-direction:column;gap:20px;flex:1}
.sb-slider-head{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:15px;color:#9fb2c4;margin-bottom:8px}
.sb-slider-val{color:var(--sb-ivory)}
.sb-slider-bar{position:relative;height:20px;background:#04090f;border:1px solid var(--sb-border)}
.sb-slider-fill{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,var(--sb-cyan) 0 10px,#0a2a33 10px 14px)}
.sb-slider-bar input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sb-toggle{width:88px;box-sizing:border-box}
.sb-toggle button{flex:1;padding:4px 0}
.sb-toggle.live{border-color:var(--sb-green)}
.sb-toggle.live button.on{background:#12351c;color:#8fe09a}
.sb-set-detail{font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.5;color:var(--sb-dim)}
.sb-set-actions{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.sb-btn-flat{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:2px;color:#9fb2c4;background:var(--sb-navy);border:2px solid var(--sb-border);padding:9px 0;text-align:center}
.sb-btn-flat:hover{border-color:var(--sb-cyan);color:var(--sb-ivory)}
.sb-btn-flat.danger{color:#f6d7cf;background:#3a1512;border-color:var(--sb-red)}
.sb-btn-flat.danger:hover{filter:brightness(1.15)}

/* CRT frame: dark bezel around an inner screen area */
.sb-crt{background:linear-gradient(#1a1c20,#0d0f12);border:2px solid #050608;box-shadow:0 3px 10px rgba(0,0,0,.6);padding:10px;box-sizing:border-box}
.sb-crt-screen{position:relative;width:100%;height:100%;background:#081018;border:1px solid var(--sb-border2);overflow:hidden;box-sizing:border-box}

/* readiness pips */
.sb-pips{display:inline-flex;gap:5px}
.sb-pip{width:12px;height:12px;background:#15171b;border:1px solid #050608;box-sizing:border-box}
.sb-pip.lit{background:var(--sb-green);box-shadow:0 0 6px rgba(112,186,121,.6)}
.sb-pip.warn.lit{background:var(--sb-amber);box-shadow:0 0 6px rgba(232,179,58,.6)}

/* formation row (planning / builder lists) */
.sb-frow{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--sb-panel);border:1px solid var(--sb-border2);box-sizing:border-box}
.sb-frow-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:1.5px;color:var(--sb-ivory)}
.sb-frow-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--sb-muted)}

/* objective row (briefing / planning) */
.sb-orow{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Sans Condensed',sans-serif;font-size:16px;color:#9fb2c4}
.sb-orow-mark{width:18px;height:18px;flex:0 0 auto;border:2px solid var(--sb-border);background:#0a121c;color:var(--sb-green);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;box-sizing:border-box}
.sb-orow.done{color:var(--sb-ivory)}
.sb-orow.done .sb-orow-mark{border-color:var(--sb-green)}

/* main menu screen (spec: new-stuff/Main Menu.dc.html) */
.sb-menu-bg{position:absolute;inset:0;width:1672px;height:941px;pointer-events:none}
.sb-menu-mask{position:absolute;left:6px;top:514px;width:486px;height:278px;background:linear-gradient(160deg,#232a33,#161b22 55%,#10141a);box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
.sb-menu-banner{position:absolute;left:8px;top:452px;width:480px;height:62px;background:linear-gradient(#c53531,#a02522);border:2px solid #1a0d0c;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.6);display:flex;align-items:center;gap:14px;padding:0 16px;box-sizing:border-box}
.sb-menu-star{color:var(--sb-ivory2);font-size:26px;line-height:1;text-shadow:0 2px 3px rgba(0,0,0,.5)}
.sb-menu-cta{flex:1;background:none;border:0;padding:0;text-align:left;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:29px;letter-spacing:2.5px;color:var(--sb-ivory2);text-shadow:0 2px 3px rgba(0,0,0,.5)}
.sb-menu-cta:hover{color:#fff}
.sb-menu-list{position:absolute;left:8px;top:520px;width:352px;display:flex;flex-direction:column;gap:9px}
.sb-menu-btn{display:flex;align-items:center;gap:16px;height:46px;background:linear-gradient(#141d2c,#0c1420);border:2px solid #060a10;box-shadow:inset 0 1px 0 rgba(120,150,190,.18),0 2px 6px rgba(0,0,0,.55);padding:0 14px}
.sb-menu-btn:hover:not(:disabled){border-color:var(--sb-red);background:linear-gradient(#1b2740,#101a2c)}
.sb-menu-btn:disabled{opacity:.45;cursor:default}
.sb-menu-btn:disabled .sb-menu-label{color:var(--sb-muted)}
.sb-menu-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:23px;letter-spacing:2.2px;color:var(--sb-ivory);text-shadow:0 2px 2px rgba(0,0,0,.6)}
.sb-channels{position:absolute;left:372px;top:530px;width:118px;display:flex;flex-direction:column;gap:11px}
.sb-ch{display:flex;align-items:center;gap:8px;height:33px;background:linear-gradient(#1a1c20,#0d0f12);border:2px solid #050608;box-shadow:0 2px 5px rgba(0,0,0,.6);padding:0 8px;cursor:pointer}
.sb-ch:hover{border-color:var(--sb-cyan)}
.sb-ch-label{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;letter-spacing:1px;padding:2px 6px;border:1px solid #050608;white-space:nowrap}
.sb-ch-lamp{width:10px;height:10px;border-radius:50%;margin-left:auto}
.sb-navspot{position:absolute;top:790px;width:116px;height:118px;background:transparent;border:2px solid transparent;padding:0}
.sb-navspot:hover{border-color:var(--sb-red);background:rgba(230,80,60,.08);box-shadow:0 0 18px rgba(182,43,40,.45)}

/* ======== battlegroup builder (spec: new-stuff/Battlegroup Builder.dc.html) ========
   Olive-drab "USAREUR OPS CONSOLE MODEL 87A" — deliberately not the navy broadcast chrome. */
@keyframes cw-glow{0%,100%{opacity:.9}50%{opacity:.55}}
.sb-bd{position:absolute;inset:0;background:linear-gradient(#4d4f38,#3c3e2b 40%,#333523);box-shadow:inset 0 0 120px rgba(0,0,0,.55)}
.sb-bd-topband{position:absolute;left:0;top:0;width:1672px;height:74px;display:flex;align-items:center;border-bottom:3px solid #22241a;padding:0 18px;box-sizing:border-box}
.sb-bd-plate{background:#3a3c29;border:2px solid #23251a;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);padding:5px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.35;letter-spacing:1px;color:#cfc9a8}
.sb-bd-plate-auth{padding:7px 14px;font-size:12px;letter-spacing:1.5px;text-align:center}
.sb-bd-title{flex:1;text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:52px;letter-spacing:9px;color:#ddd3ae;text-shadow:0 3px 4px rgba(0,0,0,.5)}
.sb-bd-auth{display:flex;align-items:center;gap:12px}
.sb-bd-lamp{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6a5a,#8f1f1b);border:3px solid #1c1d13;box-shadow:0 0 12px rgba(227,68,57,.7)}

.sb-bd-panel{background:#2e3021;border:3px solid #1d1f15;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.5);box-sizing:border-box}
.sb-bd-catalog{position:absolute;left:22px;top:86px;width:492px;height:576px;background:#2e3021;border:3px solid #1d1f15;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.5);padding:12px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.sb-bd-cat-title{text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:20px;letter-spacing:2px;color:#b7e8a8;text-shadow:0 0 8px rgba(140,230,140,.35)}
.sb-bd-tabs{display:flex;flex-wrap:wrap;gap:7px}
.sb-bd-tab{background:#1e2114;border:2px solid #3a3d28;color:#b9c69b;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;letter-spacing:1px;padding:5px 12px}
.sb-bd-tab:hover{border-color:#e8b33a}
.sb-bd-tab.on{background:#0c1207;border-color:#e8b33a;color:#f4cf6d}
.sb-bd-catlist{flex:1;background:#0c1207;border:2px solid #1a2410;border-radius:4px;overflow-y:auto;padding:8px;min-height:0}
.sb-bd-catlist::-webkit-scrollbar,.sb-bd-rlist::-webkit-scrollbar{width:12px}
.sb-bd-catlist::-webkit-scrollbar-track,.sb-bd-rlist::-webkit-scrollbar-track{background:#141a0c;border-left:2px solid #1a2410}
.sb-bd-catlist::-webkit-scrollbar-thumb,.sb-bd-rlist::-webkit-scrollbar-thumb{background:#334522;border:1px solid #4a5f31}
.sb-bd-urow{display:flex;align-items:center;gap:12px;padding:7px 10px;border:2px solid #1a2410;background:transparent;margin-bottom:6px;cursor:pointer;border-radius:3px}
.sb-bd-urow:hover{border-color:#e8b33a}
.sb-bd-urow.sel{border-color:#e8b33a;background:rgba(232,179,58,.14)}
.sb-bd-urow.locked{opacity:.4}
.sb-bd-uicon{width:52px;height:34px;object-fit:contain;filter:sepia(1) saturate(2.4) hue-rotate(62deg) brightness(1.25);flex:0 0 auto}
.sb-bd-urow.sel .sb-bd-uicon{filter:sepia(1) saturate(4) hue-rotate(-15deg) brightness(1.35)}
.sb-bd-uinfo{flex:1;line-height:1.25;min-width:0}
.sb-bd-uname{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:16px;letter-spacing:1px;color:#b7e8a8;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-bd-urow.sel .sb-bd-uname{color:#f4cf6d}
.sb-bd-uform{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:#7fb573;text-transform:uppercase}
.sb-bd-urow.sel .sb-bd-uform{color:#d9b23a}
.sb-bd-ucp{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:16px;color:#b7e8a8;white-space:nowrap}
.sb-bd-urow.sel .sb-bd-ucp{color:#f4cf6d}
.sb-bd-empty{padding:20px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#7fb573}

.sb-bd-inspect{position:absolute;left:536px;top:86px;width:592px;height:576px;background:#2e3021;border:3px solid #1d1f15;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.5);padding:14px;box-sizing:border-box;display:flex;flex-direction:column}
.sb-bd-screen{flex:1;background:#0c1207;border:2px solid #1a2410;border-radius:4px;display:flex;flex-direction:column;align-items:center;padding:12px;min-height:0}
.sb-bd-iname{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:30px;letter-spacing:3px;color:#b7e8a8;text-shadow:0 0 10px rgba(140,230,140,.4);text-transform:uppercase;text-align:center}
.sb-bd-iform{font-family:'IBM Plex Mono',monospace;font-size:16px;letter-spacing:3px;color:#7fb573;text-transform:uppercase}
.sb-bd-iview{flex:1;min-height:0;width:88%;margin:4px 0;background:radial-gradient(circle at 50% 42%,#1c2a12,#0c1207 72%)}
.sb-bd-iview canvas{display:block;width:100%;height:100%}
.sb-bd-viewimg{flex:1;min-height:0;width:88%;object-fit:contain;margin:4px 0}
.sb-bd-stats{width:100%;border:2px solid #1a2410;display:grid;grid-template-columns:1fr 1fr;font-family:'IBM Plex Mono',monospace;font-size:17px;color:#9fdc90;box-sizing:border-box}
.sb-bd-stat{display:flex;justify-content:space-between;padding:6px 22px}
.sb-bd-stat:nth-child(odd){border-right:1px solid #1a2410}
.sb-bd-stat-v{color:#c8f2ba}
.sb-bd-cost{width:100%;text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:21px;letter-spacing:2px;color:#c8f2ba;border:2px solid #1a2410;border-top:none;padding:7px 0;box-sizing:border-box}
.sb-bd-desc{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.5;color:#8fbf83;padding:8px 30px 2px}
.sb-bd-compare{text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12px;letter-spacing:1px;color:#e8b33a;padding-top:4px}

.sb-bd-group{position:absolute;left:1150px;top:86px;width:500px;height:576px;background:#2e3021;border:3px solid #1d1f15;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.5);padding:12px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.sb-bd-g-hd{text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:21px;letter-spacing:2px;color:#e7dcb5;border-bottom:2px solid #4a4c36;padding-bottom:6px}
.sb-bd-g-cp{color:#fff}
.sb-bd-gauge-wrap{display:flex;flex-direction:column;align-items:center}
.sb-bd-gauge{width:330px;border-radius:8px}
.sb-bd-gauge-label{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:2px;color:#cfc9a8;margin-top:4px}
.sb-bd-invalid{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:#ff8a7a;margin-top:3px}
.sb-bd-rlist{flex:1;background:#0c1207;border:2px solid #1a2410;border-radius:4px;overflow-y:auto;padding:6px;min-height:0}
.sb-bd-rhead{display:flex;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:#7fb573;padding:3px 10px;border-bottom:1px solid #1a2410}
.sb-bd-rh-n{width:26px}
.sb-bd-rh-u{flex:1}
.sb-bd-rrow{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid #14200d}
.sb-bd-rrow.empty{opacity:.45}
.sb-bd-rn{width:20px;font-family:'IBM Plex Mono',monospace;font-size:14px;color:#7fb573;flex:0 0 auto}
.sb-bd-ricon{width:44px;height:28px;object-fit:contain;filter:sepia(1) saturate(2.4) hue-rotate(62deg) brightness(1.25);flex:0 0 auto}
.sb-bd-rinfo{flex:1;line-height:1.2;min-width:0}
.roster-name-input{display:block;width:100%;background:transparent;border:none;border-bottom:1px solid #2a3a1c;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;color:#b7e8a8;padding:1px 3px;box-sizing:border-box;text-transform:uppercase}
.roster-name-input:focus{outline:none;border-bottom-color:#e8b33a;color:#f4cf6d}
.sb-bd-rform{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#7fb573;text-transform:uppercase}
.sb-bd-rempty{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;color:#b7e8a8;padding:1px 3px}
.sb-bd-rcp{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:16px;color:#b7e8a8}
.sb-bd-rx{padding:2px 6px;font-size:10px;background:#1a0c0c;border:1px solid #4a1a1a;border-radius:4px;color:#ff8a7a;flex:0 0 auto}
.sb-bd-rx:hover{border-color:#a72a24}

.sb-bd-console{position:absolute;left:0;top:674px;width:1672px;height:267px;border-top:4px solid #24261a;background:linear-gradient(#3c3e2b,#2d2f20)}
.sb-bd-knob-wrap{position:absolute;left:30px;top:14px;width:120px;text-align:center}
.sb-bd-knob-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:#cfc9a8}
.sb-bd-knob{width:56px;height:56px;margin:8px auto 4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3f4148,#101215);border:2px solid #000;box-shadow:0 3px 6px rgba(0,0,0,.7);position:relative}
.sb-bd-knob-tick{position:absolute;left:50%;top:5px;width:4px;height:16px;background:#cfc9a8;transform:translateX(-50%)}
.sb-bd-knob-minmax{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10px;color:#9a967c}
.sb-bd-keys{position:absolute;left:230px;top:10px;display:flex;gap:34px}
.sb-bd-key{display:flex;flex-direction:column;align-items:center;gap:8px}
.sb-bd-key-label{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;letter-spacing:1px;color:#ddd3ae;text-shadow:0 2px 2px rgba(0,0,0,.5);white-space:nowrap}
.sb-bd-key-btn{display:block;width:108px;height:64px;border:3px solid #191b11;border-radius:6px;cursor:pointer;padding:0}
.sb-bd-key-btn.dark{background:linear-gradient(#2a2c31,#131519);box-shadow:0 4px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.sb-bd-key-btn.amber{background:radial-gradient(circle at 50% 40%,#f6ce62,#c58f1e 70%,#8a5f10);box-shadow:0 0 24px rgba(240,190,70,.6),0 4px 8px rgba(0,0,0,.6)}
.sb-bd-key-btn.red{background:linear-gradient(#a72a24,#6d1713);box-shadow:0 4px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15)}
.sb-bd-key-btn.ivory{width:92px;background:linear-gradient(#efe6d0,#d3c5a4);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 8px rgba(0,0,0,.6)}
.sb-bd-key-btn:hover:not(:disabled){filter:brightness(1.15)}
.sb-bd-key-btn:active:not(:disabled){transform:translateY(2px)}
.sb-bd-key-btn:disabled{opacity:.35;cursor:default;box-shadow:0 4px 8px rgba(0,0,0,.6)}
.sb-bd-tape-wrap{position:absolute;left:170px;top:118px;width:950px;height:128px;display:flex;align-items:center}
.sb-bd-tape-label{width:130px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:1px;color:#cfc9a8;line-height:1.6;flex:0 0 auto}
.sb-bd-tape-label span{font-size:10px;color:#9a967c}
.sb-bd-tape{flex:1;height:112px;background:#e8dcb8;border:2px solid #1d1f15;box-shadow:inset 0 0 24px rgba(120,100,50,.35),0 4px 10px rgba(0,0,0,.5);padding:8px 26px;box-sizing:border-box;position:relative;overflow:hidden}
.sb-bd-tape-perf{position:absolute;top:0;bottom:0;width:10px;background:radial-gradient(circle 4px at 5px 14px,#3c3e2b 4px,transparent 5px) 0 0/10px 28px repeat-y}
.sb-bd-tape-perf.left{left:8px}
.sb-bd-tape-perf.right{right:8px}
.sb-bd-tape-hd{display:flex;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;color:#4a4030;border-bottom:1px solid #b3a67e;padding-bottom:2px;margin-bottom:3px}
.sb-bd-tape-row{display:flex;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#4a4030;line-height:1.45;text-transform:uppercase}
.sb-bd-tape-line{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-bd-tape-cp{width:60px;flex:0 0 auto}
.sb-bd-tape-total{width:60px;flex:0 0 auto}
.sb-bd-deploy{position:absolute;left:1268px;top:64px;width:250px;height:160px;background:#2e3021;border:3px solid #1d1f15;border-radius:6px;box-shadow:0 5px 14px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;padding:12px 0 0;box-sizing:border-box;cursor:pointer}
.sb-bd-deploy:hover:not(:disabled){border-color:#e8b33a}
.sb-bd-deploy:disabled{opacity:.45;cursor:default}
.sb-bd-deploy-label{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;letter-spacing:1px;color:#ddd3ae}
.sb-bd-deploy-hazard{width:150px;height:8px;margin-top:10px;background:repeating-linear-gradient(45deg,#c8a83c 0 12px,#191b11 12px 24px)}
.sb-bd-deploy-lamp{width:120px;height:74px;margin-top:10px;background:radial-gradient(circle at 50% 45%,#4bd06a,#1a5d2b 65%,#0c2e14);border:3px solid #101208;border-radius:6px;box-shadow:0 0 26px rgba(80,220,110,.5),inset 0 0 18px rgba(0,0,0,.6);animation:cw-glow 2.4s ease-in-out infinite}
.sb-bd-deploy:disabled .sb-bd-deploy-lamp{animation:none;box-shadow:inset 0 0 18px rgba(0,0,0,.6)}
.sb-bd-back{position:absolute;left:1548px;top:64px;width:104px;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer}
.sb-bd-back:hover .sb-bd-key-btn{filter:brightness(1.1)}

/* ======== mission briefing (spec: new-stuff/Mission Briefing.dc.html) ========
   Renders into the #cut cutscene layer (full viewport, above the stage) — markup from
   ui/sb/briefing.js. .cut-img/.cut-title are legacy test hooks; these rules win over the
   old inline cutscene styles because this sheet loads after them. */
.sb-br-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.8)}
.sb-br-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,10,16,.55),transparent 30%,transparent 55%,rgba(4,8,13,.94) 82%)}
.sb-br-topband{position:absolute;left:0;top:0;right:0;height:64px;display:flex;align-items:center;padding:0 26px;box-sizing:border-box;gap:18px;background:linear-gradient(rgba(10,24,36,.92),rgba(10,24,36,.6))}
.sb-br-act{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;letter-spacing:2px;color:var(--sb-cyan)}
.sb-br-date{font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:2px;color:#9fb2c4}
.sb-br-live{margin-left:auto;display:flex;align-items:center;gap:10px}
.sb-br-live-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:23px;letter-spacing:2.5px;color:var(--sb-ivory)}
.sb-br-lower{position:absolute;left:0;right:0;bottom:0;padding:0 0 34px;display:flex;flex-direction:column;gap:14px}
.sb-br-lt{margin:0 60px;display:flex;align-items:stretch}
.sb-br-lt-red{background:var(--sb-red);display:flex;align-items:center;padding:6px 26px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;letter-spacing:3px;color:var(--sb-ivory2);text-transform:uppercase;line-height:1.1}
.sb-br-lt-ivory{background:var(--sb-ivory);flex:1;display:flex;align-items:center;padding:6px 24px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:2px;color:#141c26;text-transform:uppercase;line-height:1.1}
.sb-br-panel{margin:0 60px;background:rgba(6,13,20,.88);border:1px solid var(--sb-border);padding:20px 28px;box-sizing:border-box}
.sb-br-panel-hd{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:2px;color:var(--sb-cyan);margin-bottom:10px}
.sb-br-cond{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;color:var(--sb-amber);margin-bottom:8px}
.sb-br-lines{font-family:'IBM Plex Mono',monospace;font-size:17px;line-height:1.6;color:#dfe6ee;max-width:1180px;min-height:5.4em;white-space:pre-wrap}
.sb-br-tele{display:flex;gap:34px;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:15px;color:#9fb2c4;flex-wrap:wrap}
.sb-br-tele b{color:var(--sb-ivory);font-weight:600}
.sb-br-actions{margin:0 60px;display:flex;gap:18px}
.sb-br-go{background:linear-gradient(#c6362f,#8f1f1b);border:2px solid #05070a;padding:12px 60px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:31px;letter-spacing:3px;color:var(--sb-ivory2);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 4px 12px rgba(0,0,0,.6);cursor:pointer}
.sb-br-go:hover{filter:brightness(1.12);box-shadow:0 0 20px rgba(227,68,57,.5)}
.sb-br-skip{background:var(--sb-navy);border:2px solid var(--sb-border);padding:12px 44px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:31px;letter-spacing:3px;color:#9fb2c4;cursor:pointer}
.sb-br-skip:hover{border-color:var(--sb-cyan);color:var(--sb-ivory)}

/* ======== campaign planning (spec: new-stuff/Campaign Planning.dc.html) ========
   Stage screen (ui/sb/planning.js). The route strip markup itself is still built by
   routeStrip() in index.html (cmp-* test hooks) — the rules below are scoped restyles
   that beat the old inline shell styles by specificity. */
.sb-pl-route{position:absolute;left:24px;top:92px;width:1624px;height:96px;background:var(--sb-panel);border:1px solid var(--sb-border);display:flex;align-items:center;padding:0 26px;box-sizing:border-box;gap:24px}
.sb-pl-route-label{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;color:var(--sb-cyan);flex:0 0 auto}
.sb-pl-route .cmp-route{display:flex;flex-wrap:nowrap;gap:6px;margin:0}
.sb-pl-route .cmp-node{width:40px;height:40px;border-radius:50%;background:var(--sb-navy);border:3px solid #2c4a66;color:var(--sb-muted);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.sb-pl-route .cmp-node.done{background:#10281a;border-color:#3c6b30;color:var(--sb-green)}
.sb-pl-route .cmp-node.now{background:var(--sb-red);border-color:var(--sb-alert);color:var(--sb-ivory2);font-weight:800;box-shadow:0 0 14px rgba(227,68,57,.6)}
.sb-pl-route .cmp-node.fork{border-style:solid;border-color:var(--sb-cyan);color:var(--sb-cyan)}
.sb-pl-route-sum{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:14px;color:#9fb2c4;white-space:nowrap;padding-left:14px;flex:0 0 auto}

.sb-pl-main{position:absolute;left:24px;top:206px;width:1010px;height:710px;background:var(--sb-panel);border:1px solid var(--sb-border);display:flex;flex-direction:column;box-sizing:border-box}
.sb-pl-hero{height:290px;position:relative;overflow:hidden;border-bottom:1px solid var(--sb-border);flex:0 0 auto}
.sb-pl-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.85)}
.sb-pl-hero-lt{position:absolute;left:0;bottom:0;right:0;display:flex;align-items:stretch}
.sb-pl-hero-red{background:var(--sb-red);color:var(--sb-ivory2);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;letter-spacing:3px;padding:8px 24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-pl-hero-ivory{background:var(--sb-ivory);color:#141c26;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:2px;padding:8px 22px;display:flex;align-items:center;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-pl-cols{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.sb-pl-col-l{padding:16px 22px;border-right:1px solid #142838;overflow-y:auto;min-height:0}
.sb-pl-col-r{padding:16px 22px;overflow-y:auto;min-height:0}
.sb-pl-sec{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;color:var(--sb-cyan);margin:0 0 10px;text-transform:uppercase}
.sb-pl-obj-role{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--sb-dim);margin-left:8px}
.sb-pl-note{border:1px solid var(--sb-border2);border-left:3px solid var(--sb-cyan);background:var(--sb-navy);padding:8px 12px;margin-bottom:8px}
.sb-pl-note.red{border-left-color:var(--sb-alert)}
.sb-pl-note-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;letter-spacing:1.5px;color:var(--sb-ivory)}
.sb-pl-note-sub{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9fb2c4;margin-top:2px;line-height:1.5}
.sb-pl-forks .cmp-forks{display:grid;gap:6px;margin:10px 0 0}
.sb-pl-forks .cmp-fork{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:6px 10px;border-left:2px solid var(--sb-cyan);background:var(--sb-navy);color:#9fb2c4;font:12px 'IBM Plex Mono',monospace}
.sb-pl-forks .cmp-fork strong{color:var(--sb-cyan);font-weight:600}
.sb-pl-forks .cmp-fork.resolved{border-left-color:var(--sb-green)}
.sb-pl-forks .cmp-fork.resolved strong{color:var(--sb-green)}
.sb-pl-stats{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;align-content:start;font-family:'IBM Plex Mono',monospace;font-size:15px;margin-bottom:12px}
.sb-pl-stats .k{color:var(--sb-muted)}
.sb-pl-stats .v{color:var(--sb-ivory)}
.sb-pl-stats .v.cy{color:var(--sb-cyan)}
.sb-pl-stats .v.rd{color:var(--sb-alert)}
.sb-pl-actions{display:flex;flex-wrap:wrap;gap:14px;padding:16px 24px;border-top:1px solid var(--sb-border);flex:0 0 auto}
.sb-pl-actions-note{flex:0 0 100%;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1.5px;color:var(--sb-muted)}
.sb-pl-begin{background:linear-gradient(#c6362f,#8f1f1b);border:2px solid #05070a;padding:10px 44px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;letter-spacing:3px;color:var(--sb-ivory2);box-shadow:inset 0 2px 0 rgba(255,255,255,.2);cursor:pointer}
.sb-pl-begin:hover{filter:brightness(1.12)}
.sb-pl-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;letter-spacing:2px;color:#cfe2f7;background:var(--sb-control);border:2px solid #2c4a66;padding:10px 32px;cursor:pointer}
.sb-pl-btn:hover{border-color:var(--sb-cyan)}
.sb-pl-btn.rev{margin-left:auto;color:#9fb2c4;background:var(--sb-panel);border-color:var(--sb-border)}
.sb-pl-btn.rev:hover{border-color:var(--sb-cyan);color:var(--sb-ivory)}

.sb-pl-rail{position:absolute;left:1052px;top:206px;width:596px;height:710px;display:flex;flex-direction:column;gap:16px}
.sb-pl-research-body{display:flex;gap:14px;padding:14px 16px;align-items:center}
.sb-pl-research-body img{width:84px;height:60px;object-fit:cover;border:1px solid #2a4258;flex:0 0 auto}
.sb-pl-res-name{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;color:var(--sb-ivory)}
.sb-pl-res-sub{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:15px;color:#9fb2c4}
.sb-pl-rep-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;color:var(--sb-cyan);line-height:1}
.sb-pl-rep-lab{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--sb-muted)}
.sb-pl-bg{flex:1;display:flex;flex-direction:column;min-height:0}
.sb-pl-bg-list{flex:1;overflow-y:auto;min-height:0}
.sb-pl-bg-list .sb-frow{border:0;border-bottom:1px solid #142838}
.sb-pl-icon{width:44px;height:30px;object-fit:contain;filter:brightness(1.5);flex:0 0 auto}
.sb-pl-xp{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--sb-cyan);white-space:nowrap}
.sb-pl-cp{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;color:var(--sb-ivory);width:56px;text-align:right;flex:0 0 auto}

/* battlegroup CP-fill gauge: cyan fill of the used share, ivory tick at the recommended fill */
.sb-cp-gauge{position:relative;height:12px;margin:10px 18px 0;background:#08131d;border:1px solid var(--sb-border);flex:0 0 auto}
.sb-cp-gauge-fill{height:100%;background:linear-gradient(90deg,#1d4e7f,var(--sb-cyan))}
.sb-cp-gauge-fill.low{background:linear-gradient(90deg,#7f2d1d,var(--sb-alert))}
.sb-cp-gauge-rec{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--sb-ivory);opacity:.75}
.sb-cp-gauge-lab{display:flex;justify-content:space-between;margin:4px 18px 8px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1px;color:var(--sb-muted);flex:0 0 auto}
.sb-cp-hint{margin:0 18px 10px;padding:6px 10px;border:1px solid var(--sb-red);border-left:3px solid var(--sb-alert);background:#160b0a;color:#f0b4a8;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;flex:0 0 auto}
button.sb-frow{width:100%;color:inherit;cursor:pointer}
button.sb-frow:hover{background:var(--sb-control)}

/* ======== refit (ui/sb/refit.js) — navy broadcast chrome like planning; three scrollable
   panels (NEEDS ATTENTION / EQUIPMENT REFIT + REPLACEMENTS / BATTLEGROUP) over a footer with
   the red guarded BEGIN MISSION. Rows reuse the planning insignia treatment. */
.sb-rf-main{position:absolute;left:24px;top:92px;width:1624px;height:756px;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px}
.sb-rf-col{display:flex;flex-direction:column;gap:16px;min-height:0}
.sb-rf-panel{display:flex;flex-direction:column;min-height:0;flex:1}
.sb-rf-list{flex:1;overflow-y:auto;min-height:0;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.sb-rf-sec-detail{color:var(--sb-dim);letter-spacing:1px}
.sb-panel-hd .sb-rf-sec-detail{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:2px}
.sb-rf-sicon{width:20px;height:20px;object-fit:contain;filter:brightness(1.4);vertical-align:-4px;margin-right:8px}
.sb-rf-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;background:var(--sb-navy);border:1px solid var(--sb-border2);box-sizing:border-box;text-align:left;color:inherit}
button.sb-rf-row:hover{border-color:var(--sb-cyan)}
.sb-rf-row.static{border-left:3px solid var(--sb-border2)}
.sb-rf-row.static.red{border-left-color:var(--sb-alert)}
.sb-rf-row-g{flex:1;min-width:0}
.sb-rf-row-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:1.5px;color:var(--sb-ivory)}
.sb-rf-row-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--sb-muted);margin-top:2px}
.sb-rf-icon{width:44px;height:30px;object-fit:contain;filter:brightness(1.5);flex:0 0 auto}
.sb-rf-icon.dead{filter:grayscale(1) brightness(.8);opacity:.45}
.sb-rf-pill{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:1.5px;color:var(--sb-cyan);border:1px solid var(--sb-border);padding:4px 12px;flex:0 0 auto;white-space:nowrap}
.sb-rf-pill.red{color:#f6d7cf;border-color:var(--sb-red)}
.sb-rf-info{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--sb-cyan);border:1px solid var(--sb-border);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer}
.sb-rf-info:hover{border-color:var(--sb-cyan);background:var(--sb-control)}
.sb-rf-buygrp{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--sb-dim);padding:6px 4px 0;border-top:1px solid var(--sb-border2)}
.sb-rf-empty{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--sb-muted);padding:8px 12px;border:1px dashed var(--sb-border2)}
.sb-rf-notice{padding:10px 12px;border:1px solid var(--sb-border2);border-left:3px solid var(--sb-green);background:var(--sb-navy)}
.sb-rf-notice.bad{border-left-color:var(--sb-alert)}
.sb-rf-quit{margin-left:6px}
.sb-rf-foot{position:absolute;left:24px;top:864px;width:1624px;display:flex;align-items:center;gap:18px}
.sb-rf-foot-note{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:1px;color:#9fb2c4;flex:1;min-width:0}
.sb-rf-foot-note b{color:var(--sb-ivory);font-weight:600}

/* arsenal screen (spec: new-stuff/Arsenal.dc.html) — markup in ui/sb/arsenal.js */
.sb-ar{position:absolute;inset:0;background:var(--sb-navy)}
.sb-ar-search{display:flex;align-items:center;border:1px solid var(--sb-border)}
.sb-ar-search-label{font-family:'IBM Plex Mono',monospace;font-size:15px;color:#9fb2c4;background:#08141d;padding:8px 14px;border-right:1px solid var(--sb-border)}
.sb-ar-search-input{width:260px;background:transparent;border:0;outline:none;color:var(--sb-ivory);font-family:'IBM Plex Mono',monospace;font-size:15px;padding:8px 18px}
.sb-ar-search-input::placeholder{color:var(--sb-dim)}
.sb-ar-rail{position:absolute;left:24px;top:92px;width:1624px;display:flex;gap:10px;align-items:center}
.sb-ar-chip{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;letter-spacing:2px;color:#8fa0b0;background:var(--sb-panel);border:2px solid var(--sb-border);padding:5px 18px;text-transform:uppercase}
.sb-ar-chip:hover{border-color:var(--sb-cyan)}
.sb-ar-chip.on{color:var(--sb-ivory);background:var(--sb-control);border-color:var(--sb-cyan)}
.sb-ar-sides{margin-left:auto;display:flex;gap:10px}
.sb-ar-shown{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:1px;color:var(--sb-dim)}
.sb-ar-list{position:absolute;left:24px;top:146px;width:770px;height:770px;background:var(--sb-panel);border:1px solid var(--sb-border);overflow-y:auto}
.sb-ar-row{display:flex;align-items:center;gap:14px;width:100%;padding:10px 16px;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid #142838;border-left:4px solid transparent;text-align:left}
.sb-ar-row:hover{background:var(--sb-control)}
.sb-ar-row.sel{background:var(--sb-control);border-left-color:var(--sb-red)}
.sb-ar-rowicon{flex:0 0 auto;background:radial-gradient(circle at 50% 40%,#16222f,#080f16);border:1px solid #142838}
.sb-ar-rowinfo{flex:1;min-width:0;line-height:1.2;display:flex;flex-direction:column}
.sb-ar-rowname{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:23px;letter-spacing:1.5px;color:var(--sb-ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-ar-rowrole{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:1px;color:var(--sb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-ar-rowperiod{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--sb-cyan);flex:0 0 auto}
.sb-ar-rowcp{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;color:var(--sb-ivory);width:70px;text-align:right;flex:0 0 auto}
.sb-ar-empty{padding:40px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:2px;color:var(--sb-dim)}
.sb-ar-dossier{position:absolute;left:812px;top:146px;width:836px;height:770px;background:var(--sb-panel);border:1px solid var(--sb-border);display:flex;flex-direction:column;overflow:hidden}
.sb-ar-namestrip{display:flex;align-items:stretch;border-bottom:1px solid var(--sb-border);flex:0 0 auto}
.sb-ar-name{flex:0 0 auto;background:var(--sb-red);color:#F5E9CB;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:29px;letter-spacing:2.5px;padding:10px 24px;white-space:nowrap}
.sb-ar-role{flex:1;min-width:0;background:var(--sb-ivory);color:#141c26;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;letter-spacing:2px;padding:10px 24px;display:flex;align-items:center}
.sb-ar-file{margin-left:auto;display:flex;align-items:center;padding:0 20px;font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--sb-cyan);white-space:nowrap}
.sb-ar-mid{display:flex;gap:20px;padding:20px 24px;border-bottom:1px solid #142838;flex:0 0 auto}
.sb-ar-frame{width:340px;flex:0 0 auto;background:#081019;border:2px solid #1c3245;box-sizing:border-box}
.sb-ar-frame canvas{width:100%;height:auto;display:block}
.sb-ar-artcap{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--sb-dim);padding:6px 8px;border-top:1px solid #142838}
.sb-ar-meta{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-content:start;font-family:'IBM Plex Mono',monospace;font-size:15px}
.sb-ar-meta-l{color:var(--sb-muted)}
.sb-ar-meta-v{color:var(--sb-ivory);min-width:0}
.sb-ar-meta-v.ok{color:var(--sb-green)}
.sb-ar-meta-v.tech{color:var(--sb-cyan)}
.sb-ar-stats{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid #142838;flex:0 0 auto}
.sb-ar-stat{text-align:center;padding:12px 0;border-right:1px solid #142838}
.sb-ar-stat:last-child{border-right:0}
.sb-ar-stat-v{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:34px;color:var(--sb-ivory);line-height:1}
.sb-ar-stat-k{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1.5px;color:var(--sb-muted);margin-top:4px}
.sb-ar-dossier .ars-detail-pane.sb-ar-scroll{flex:1;min-height:0;max-height:none;overflow-y:auto;padding:18px 24px}
.sb-ar-sec{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;color:var(--sb-cyan);margin-bottom:8px}
.sb-ar-prose{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:17px;line-height:1.6;color:#c9d5e0}
.sb-ar-sources{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sb-muted)}
.sb-ar-src{color:var(--sb-cyan);text-decoration:none}
.sb-ar-src:hover{color:var(--sb-ivory)}
.sb-ar-dtable{margin-top:14px;border:1px solid #142838}
.sb-ar-dtable-hd{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;letter-spacing:1.5px;color:var(--sb-amber);padding:6px 10px;border-bottom:1px solid #142838;background:#081019}
.sb-ar-dtrow{display:grid;grid-template-columns:1.3fr 1fr;gap:1px;padding:3px 10px;border-bottom:1px solid #142838;font-family:'IBM Plex Mono',monospace;font-size:13px}
.sb-ar-dtrow:last-child{border-bottom:0}
.sb-ar-dtrow.cmp{grid-template-columns:1.3fr .8fr .8fr .7fr}
.sb-ar-dt-l{color:var(--sb-muted)}
.sb-ar-dt-v{color:var(--sb-ivory);text-align:right;font-weight:600}
.sb-ar-dt-b{color:var(--sb-muted);text-align:right}
.sb-ar-dt-d{text-align:right;font-weight:600;color:var(--sb-dim)}
.sb-ar-dt-d.up{color:var(--sb-green)}
.sb-ar-dt-d.down{color:var(--sb-alert)}
.sb-ar-svc{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;border:1px solid #142838;background:#0a1420;margin-bottom:6px}
.sb-ar-svc.kia{opacity:.55}
.sb-ar-svc-pill{flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--sb-cyan);border:1px solid #1e4652;padding:2px 8px;background:#08141d}
.sb-ar-svc.kia .sb-ar-svc-pill{color:#f6d7cf;border-color:var(--sb-red)}
.sb-ar-svc-info{flex:1;min-width:0}
.sb-ar-svc-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;letter-spacing:1px;color:var(--sb-ivory)}
.sb-ar-svc-sub{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sb-muted);line-height:1.5}
.sb-ar-svc-honors{color:var(--sb-amber)}
.sb-ar-actions{display:flex;gap:14px;padding:16px 24px;border-top:1px solid var(--sb-border);flex:0 0 auto}
.sb-ar-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:2px;padding:8px 26px;border:2px solid #2c4a66;color:#cfe2f7;background:var(--sb-control)}
.sb-ar-btn:hover{border-color:var(--sb-cyan)}
.sb-ar-btn.ghost{color:#9fb2c4;background:var(--sb-panel);border-color:var(--sb-border)}
.sb-ar-btn.ghost:hover{border-color:var(--sb-cyan);color:var(--sb-ivory)}


/* ======== SB BATTLE SHELL — tactical battle chrome (spec: coldwar-new/specs/mockup-maingame-blue) ========
   The battle shell is the live app (index.html persistent DOM), not a 1672×941 stage screen: these
   rules restyle the existing shell regions in place. Scoped under body.sb-battle-on; this sheet
   loads after the legacy inline styles, so equal-specificity rules here win.
   Build contract: mockup-maingame-blue.png @1672×941 — top command band (~6.5%), right rail (~23%),
   bottom command deck (~22%), floating unit card (~43% wide, bottom-left), combat forecast
   (right-of-center over map). Materials: beveled navy/brass metal, ivory keycaps, CRT minimap,
   red reserved for END TURN + live lamps. Texture: fine scanlines + noise at low opacity,
   vignette on panels. No flat fills, no 1px hairlines, no pill buttons, no pure-white text. */

.sb-battle-on{
  background:#05070a;
  --bk-line:#030609;            /* deep outer stroke */
  --bk-edge:#3a444c;            /* inner bevel stroke */
  --bk-edge2:#41608482;         /* soft bevel highlight */
  --bk-gold:#d4af37;            /* accent gold (operation name, END TURN trim) */
  --bk-brass:#A68B5B;           /* aged brass trim */
  /* fine film grain — tiled at very low opacity over chrome */
  --bk-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- global VHS glass (review2 §2): ONE fixed layer, near-invisible. Effective scanline
   ~3% (.35 container × .10 line), vignette caps at .30 corners, noise <= .04. No flicker,
   no chromatic aberration. Acceptance: toggling it must shift map brightness/sat < 5%. ---- */
.sb-battle-on #vhs{
  position:fixed; inset:0; pointer-events:none; z-index:15; display:block;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,.20) 100%);
  opacity:.3;
}
.sb-battle-on #vhs::after{
  content:''; position:absolute; inset:0;
  background:var(--bk-noise); background-size:140px 140px;
  opacity:.06;   /* .3 × .06 ≈ .02 effective noise */
}

/* ==================== TOP COMMAND BAND (region-2, comp-1..6) ==================== */
/* UI-REVIEW-aug15 §7/teardown: chrome is neutral dark steel (#15191c–#2d353a), not navy */
.sb-battle-on header.cmdbar{
  height:clamp(54px,6.6vh,66px);
  background:
    /* scanlines moved to #vhs */
    linear-gradient(#242b30,#181d21 45%,#101418);
  border-bottom:3px solid var(--bk-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 5px 16px rgba(0,0,0,.6);
  position:relative; z-index:8;
}
/* compartment separators: inset dark cut + faint top-lit edge */
.sb-battle-on .cb-brand,
.sb-battle-on .cb-clock,
.sb-battle-on .cb-live,
.sb-battle-on .cb-actions{
  border-right:0; border-left:0;
  box-shadow:inset -2px 0 0 var(--bk-line), inset -3px 0 0 rgba(150,180,210,.07);
}
.sb-battle-on .cb-brand{ gap:12px; padding:0 16px; }
.sb-battle-on .cb-menubtn,
.sb-battle-on .cb-layers{
  width:36px; height:36px; border-radius:4px; font-size:15px;
  background:linear-gradient(#272c34,#12161c);
  border:2px solid #050608;
  box-shadow:
    inset 0 1px 0 rgba(210,220,230,.14),
    inset 0 -3px 5px rgba(0,0,0,.55),
    0 2px 5px rgba(0,0,0,.55);
  color:#aebccb;
}
.sb-battle-on .cb-menubtn:hover,
.sb-battle-on .cb-layers:hover{ border-color:var(--sb-cyan); color:var(--sb-ivory); }
.sb-battle-on .cb-layers:active{ transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(0,0,0,.6); }
/* NATO compass-star roundel with brass ring */
.sb-battle-on .cb-roundel{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#20445f,#0b1d2e 72%);
  border:2px solid var(--bk-brass);
  box-shadow:
    0 0 0 2px #05090f,
    inset 0 2px 4px rgba(200,225,250,.22),
    inset 0 -4px 7px rgba(0,0,0,.55),
    0 2px 7px rgba(0,0,0,.65);
  display:grid; place-items:center; color:var(--sb-ivory2); font-size:20px;
  text-shadow:0 0 8px rgba(86,199,217,.55);
}
.sb-battle-on .cb-roundel.pact{
  background:radial-gradient(circle at 35% 28%,#63261f,#2a0f0d 72%); border-color:#8a3a32;
  color:#ffd6d6; text-shadow:0 0 8px rgba(227,68,57,.6);
}
.sb-battle-on .side-badge{
  border:0; background:none; padding:0; margin-left:0;
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(21px,3vh,30px); letter-spacing:4px; color:var(--sb-ivory);
  text-shadow:0 2px 3px rgba(0,0,0,.6);
}
.sb-battle-on .side-badge .side-dot{ border-radius:50%; width:8px; height:8px; box-shadow:0 0 6px currentColor; }
/* operation name (comp-3) — gold broadcast title */
.sb-battle-on .cb-clock{ gap:18px; padding:0 22px; }
.sb-battle-on .cb-clk-lbl{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2.5px; color:var(--sb-dim);
}
.sb-battle-on .cb-clk-val{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--sb-ivory); letter-spacing:2px;
}
.sb-battle-on .cb-clk-val.sm{
  font-size:clamp(17px,2.4vh,24px); letter-spacing:3px; color:var(--bk-gold);
  text-transform:uppercase; text-shadow:0 2px 3px rgba(0,0,0,.55);
}
.sb-battle-on .cb-clk-val .sub{ color:var(--sb-muted); }
/* boxed turn counter (comp-4) — inset dark counter housing */
.sb-battle-on .cb-turnbox{
  background:linear-gradient(#040a11,#020507);
  border:2px solid #05090f;
  box-shadow:
    inset 0 2px 9px rgba(0,0,0,.85),
    inset 0 0 0 1px #333c43,
    0 1px 0 rgba(150,180,210,.09);
  padding:4px 18px 6px; text-align:center; border-radius:3px;
}
.sb-battle-on .cb-turnbox .cb-clk-val{ font-weight:800; letter-spacing:2.5px; }
/* resource counters (comp-5): RP / ReP / CITY INCOME / CP */
.sb-battle-on .cb-gauges{ gap:0; padding:0 10px; }
.sb-battle-on .cb-gauge{ gap:9px; }
.sb-battle-on .cb-gi{
  width:32px; height:32px; border-radius:4px; font-size:15px;
  border:2px solid #05090f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -3px 5px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.5);
}
.sb-battle-on .cb-gi.rp{ background:linear-gradient(#3a2f14,#241f10); color:var(--sb-amber); }
.sb-battle-on .cb-gi.rep{ background:linear-gradient(#14304a,#0f2030); color:#7cc7e8; }
.sb-battle-on .cb-gi.inc{ background:linear-gradient(#173424,#13241a); color:#6fcf8a; }
.sb-battle-on .cb-gi.cp{ background:linear-gradient(#2e3117,#1a1d11); color:var(--sb-ivory); }
.sb-battle-on .cb-gl{ font-family:'IBM Plex Mono',monospace; color:var(--sb-dim); }
.sb-battle-on .cb-gv{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; letter-spacing:1px;
  font-size:clamp(16px,2.2vh,22px);
}
.sb-battle-on .cb-gv.rp{ color:var(--sb-ivory2); } .sb-battle-on .cb-gv.rep{ color:var(--sb-cyan); }
.sb-battle-on .cb-gv.inc{ color:var(--sb-green); } .sb-battle-on .cb-gv.cp{ color:var(--sb-ivory2); }
.sb-battle-on .cb-gs.cp{ color:var(--sb-muted); }
.sb-battle-on .cb-vsep{ width:2px; height:32px; background:var(--bk-line); box-shadow:1px 0 0 rgba(150,180,210,.06); }
/* narrow windows: the mockup telemetry is RP/ReP/CP — CITY INCOME is the first to yield.
   The command bar now spans #left (viewport minus the rail), so the cut is measured on the
   BAR's own inline size (container query), not the viewport. */
header.cmdbar{ container-type: inline-size; }
@container (max-width: 1680px){
  .sb-battle-on .cb-g-inc{ display:none; }
  .sb-battle-on .cb-vsep:has(+ .cb-g-inc){ display:none; }
}
/* LIVE TACTICAL FEED (comp-6) */
.sb-battle-on .cb-live{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:0 6px 0 18px; align-self:stretch;
}
.sb-battle-on .cb-live-lbl{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:clamp(13px,1.9vh,19px); letter-spacing:3px; color:var(--sb-ivory); white-space:nowrap;
  text-shadow:0 2px 3px rgba(0,0,0,.6);
}
.sb-battle-on .cb-live .sb-lamp-dot{ width:13px; height:13px; }
.sb-battle-on .cb-actions{ gap:9px; }
/* (top-bar END TURN removed — UI-REVIEW §8: bottom deck only) */

/* ==================== MAP COLUMN ==================== */
.sb-battle-on .mapcol{ background:#05070a; }
.sb-battle-on #boardwrap{ background:#060b11; }
/* zoom cluster: black channel keys */
.sb-battle-on #zoom{ left:12px; bottom:12px; gap:6px; }
.sb-battle-on #zoom button{
  width:44px; height:44px; border-radius:4px; font-size:18px;
  background:linear-gradient(#232830,#10141a);
  border:2px solid #050608;
  box-shadow:
    inset 0 1px 0 rgba(210,220,230,.12),
    inset 0 -3px 5px rgba(0,0,0,.5),
    0 3px 8px rgba(0,0,0,.6);
  color:#c9d3dc;
}
.sb-battle-on #zoom button:hover{ border-color:var(--sb-cyan); color:var(--sb-ivory); }
.sb-battle-on #zoom button:active{ transform:translateY(1px); }
.sb-battle-on #tip{
  background:rgba(6,14,22,.95); border:2px solid #05090f; border-radius:4px; color:#e2d9c4;
  box-shadow:inset 0 0 0 1px var(--bk-edge), 0 8px 22px rgba(0,0,0,.6);
  font-family:'IBM Plex Mono',monospace;
}
.sb-battle-on #map-chips{ font-family:'IBM Plex Mono',monospace; }
.sb-battle-on #map-chips span{
  background:rgba(6,14,22,.88); border:2px solid #05090f; border-radius:3px; color:#9fb2c4;
  box-shadow:inset 0 0 0 1px #333c43, 0 3px 8px rgba(0,0,0,.5);
}
.sb-battle-on #map-legend .leg-inner{
  background:rgba(6,14,22,.9); border:2px solid #05090f; border-radius:3px;
  box-shadow:inset 0 0 0 1px #333c43, 0 3px 8px rgba(0,0,0,.5);
  font-family:'IBM Plex Mono',monospace;
}

/* ==================== RIGHT COMMAND RAIL (region-3, comp-7..9) ==================== */
.sb-battle-on #panel{
  background:
    /* scanlines moved to #vhs */
    linear-gradient(180deg,#1a1f23,#12161a 55%,#0c0f11);
  border-left:3px solid var(--bk-line);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.05);
  padding-top:10px;
}
/* every rail section is a framed card (§2 recipe): steel gradient fill, 2px #2d353a border,
   inner top highlight + bottom shadow, 3px radius */
.sb-battle-on #rail-obj,
.sb-battle-on #rail-research,
.sb-battle-on #rail-btns,
.sb-battle-on #rail-deploy,
.sb-battle-on #rail-todo,
.sb-battle-on #rail-outliner{
  margin:0 10px 8px;
  background:linear-gradient(180deg,#1e2326 0%,#15191c 100%);
  border:2px solid #2d353a;
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 4px rgba(0,0,0,.5),
    0 4px 12px rgba(0,0,0,.6);
  /* Horizontal clip only. A plain overflow:hidden here (for the rounded corners) also killed the
     vertical scroll the flex budget below assumes — the formation list is a "sponge" that scrolls
     internally. On a short rail that silently clipped the roster: at 375px the list rendered 15
     rows inside a 40px box with no way to reach any of them. */
  overflow-x:hidden; overflow-y:auto;
}
/* flex budget: the cards + CRT minimap are natural-size; deploy tray and outliner are the
   sponges (they scroll internally). */
.sb-battle-on #rail-obj,
.sb-battle-on #rail-research{ flex:0 0 auto; }
.sb-battle-on .pfoot{ flex:0 0 auto; }
.sb-battle-on #rail-outliner{ display:flex; flex-direction:column; min-height:72px; }
/* card header bands: raised steel control strip */
.sb-battle-on .rail-obj-hd,
.sb-battle-on .rail-res-hd,
.sb-battle-on .out-hd{
  background:linear-gradient(#2a3237,#1e2429);
  border-bottom:2px solid #04080d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  padding:7px 12px;
}
.sb-battle-on .rail-sec-hd-btn{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16px;
  letter-spacing:2.5px; color:var(--sb-ivory); text-shadow:0 2px 2px rgba(0,0,0,.5);
}
.sb-battle-on .rail-sec-hd-btn.blue{ color:var(--sb-cyan); }
/* small rail action buttons (THEATRE / TECH TREE / COMMANDERS / ARSENAL): channel keys */
.sb-battle-on .rail-act-btn{
  background:linear-gradient(#262d33,#151a1f);
  border:2px solid #05080c; border-radius:3px; color:#9fb2c4;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px; letter-spacing:1.5px;
  box-shadow:inset 0 1px 0 rgba(190,205,220,.1), 0 2px 4px rgba(0,0,0,.5);
}
.sb-battle-on .rail-act-btn:hover{ border-color:var(--sb-cyan); color:var(--sb-ivory); }
.sb-battle-on .rail-act-btn.blue{ color:var(--sb-cyan); }
.sb-battle-on .rail-act-btn.blue:hover{ border-color:var(--sb-cyan); color:var(--sb-ivory); }
/* OBJECTIVES card (comp-7): tall UPPERCASE rows, faction medallion left, square checkbox right */
.sb-battle-on .obj-rows{ gap:6px; padding:8px 10px 9px; max-height:150px; overflow-y:auto; }
.sb-battle-on .obj-row{
  background:rgba(4,8,12,.6);
  border:1px solid #2d353a; border-radius:2px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.55);
  padding:9px 10px; gap:10px; min-height:40px;
}
.sb-battle-on .obj-row.primary{ border-left:3px solid var(--sb-red); }
.sb-battle-on .obj-row.secondary{ border-left:3px solid #3a444c; }
.sb-battle-on .obj-medal{
  width:24px; height:24px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; font-size:12px; box-sizing:border-box;
  border:2px solid var(--bk-brass);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06);
}
.sb-battle-on .obj-medal.nato{ background:radial-gradient(circle at 35% 28%,#20445f,#0b1d2e 72%); color:#bcd8ff; }
.sb-battle-on .obj-medal.pact{ background:radial-gradient(circle at 35% 28%,#63261f,#2a0f0d 72%); color:#ffd6d6; }
.sb-battle-on .obj-row .obj-label{
  flex:1; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px;
  letter-spacing:1.5px; color:var(--sb-ivory); text-transform:uppercase; line-height:1.15;
}
.sb-battle-on .obj-row .obj-box{
  width:17px; height:17px; flex:0 0 auto; border:2px solid #68737B; background:#030609;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.8), 0 1px 0 rgba(150,180,210,.08);
  display:grid; place-items:center; color:var(--sb-green); font-size:11px; box-sizing:border-box;
}
.sb-battle-on .obj-row.done .obj-label{ color:var(--sb-muted); text-decoration:line-through; }
.sb-battle-on .obj-row.done .obj-box{ border-color:var(--sb-green); }
/* ACTIVE RESEARCH card (comp-8): icon tile + name + big turns number */
.sb-battle-on .rail-research{ padding:0; }
.sb-battle-on .rail-res-hd{ margin-bottom:0; display:flex; justify-content:space-between; align-items:center; }
.sb-battle-on .sb-b-res{ display:flex; align-items:stretch; gap:10px; padding:7px 12px 8px; }
.sb-battle-on .sb-b-res-ico{
  width:44px; height:44px; flex:0 0 auto;
  background:radial-gradient(circle at 50% 35%,#20282e,#0b0e11);
  border:2px solid #05090f; border-radius:3px;
  box-shadow:inset 0 0 0 1px #3a444c, inset 0 2px 6px rgba(0,0,0,.6);
  display:grid; place-items:center; padding:6px; box-sizing:border-box;
}
.sb-battle-on .sb-b-res-info{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.sb-battle-on .sb-b-res-name{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12.5px; color:var(--sb-ivory);
  text-transform:uppercase; letter-spacing:.5px;
}
.sb-battle-on .sb-b-res-sub{
  font-family:'IBM Plex Sans Condensed',sans-serif; font-size:12px; color:#9fb2c4;
  text-transform:uppercase; letter-spacing:.5px; margin-top:2px;
}
.sb-battle-on .res-bar-track{
  background:#030609; border:2px solid #05090f; border-radius:2px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.8);
}
.sb-battle-on .res-bar-fill{
  background:repeating-linear-gradient(90deg,#2a6a80 0 6px,#0a2a33 6px 8px);
  box-shadow:0 0 6px rgba(86,199,217,.35);
}
.sb-battle-on .sb-b-res-num{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-left:1px solid #333c43; padding-left:11px;
}
.sb-battle-on .sb-b-res-big{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:26px; color:var(--sb-ivory); line-height:1;
  text-shadow:0 0 8px rgba(86,199,217,.3);
}
.sb-battle-on .sb-b-res-cost{ font-size:14px; color:var(--sb-muted); font-weight:600; }
.sb-battle-on .sb-b-res-lab{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--sb-dim); margin-top:3px;
}
/* rail command buttons were removed (right-bar teardown) — COMMAND/ARSENAL/RECRUIT/LOG now live
   in the top command band; these rules stay only for the short-viewport media block safety */
/* deploy pool cards */
.sb-battle-on #rail-deploy{
  animation:none; flex:0 1 auto; min-height:0; overflow-y:auto;
  border-color:#3a2c10;
  box-shadow:
    inset 0 0 0 1px #54461d,
    inset 0 1px 0 rgba(220,190,120,.12),
    0 7px 18px rgba(0,0,0,.55);
}
.sb-battle-on .rail-deploy-hd{ border-bottom:1px solid #3a2c10; padding:7px 12px; }
.sb-battle-on .rail-deploy-hd span:first-child{
  font-family:'Barlow Condensed',sans-serif !important; letter-spacing:2.5px !important; color:var(--sb-amber) !important;
}
.sb-battle-on .dp-card{
  background:rgba(6,9,12,.6); border:1px solid #2d353a; border-radius:3px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5);
}
.sb-battle-on .dp-card:hover{ border-color:var(--sb-cyan); background:rgba(16,40,58,.7); }
.sb-battle-on .dp-card.sel{
  background:rgba(16,40,58,.85); border-color:var(--sb-amber); box-shadow:inset 0 0 0 1px var(--sb-amber);
}
.sb-battle-on .dp-card.disabled{ opacity:.4; }
.sb-battle-on .dp-card-name{ font-family:'Barlow Condensed',sans-serif; color:var(--sb-ivory); }
.sb-battle-on .dp-card-meta{ color:var(--sb-dim); }
.sb-battle-on .dp-card-cost{ color:var(--sb-amber); }
.sb-battle-on .dt-hint{ border-top-color:#333c43; color:var(--sb-muted); }
.sb-battle-on .dt-hint b{ color:var(--sb-amber); }
/* todo checklist */
.sb-battle-on #rail-todo{
  flex:0 1 auto; min-height:0; overflow-y:auto; max-height:150px;
}
/* READY FORMATIONS outliner (comp-9): rows with green segmented readiness bars */
.sb-battle-on .pbody{ background:transparent; flex:1 1 0; min-height:0; }
.sb-battle-on .out-hd-lbl{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:2.5px; color:var(--sb-ivory);
}
.sb-battle-on .out-hd-sort{
  background:linear-gradient(#262d33,#151a1f); border:2px solid #05080c; border-radius:3px; color:#9fb2c4;
  box-shadow:inset 0 1px 0 rgba(190,205,220,.1);
}
.sb-battle-on .out-hd-sort:hover{ border-color:var(--sb-cyan); color:var(--sb-ivory); }
.sb-battle-on .out-hd-sort.on{ border-color:var(--sb-amber); color:var(--sb-amber); background:#2a2010; }
.sb-battle-on .out .o{
  background:rgba(6,9,12,.55); border:1px solid #2d353a; border-radius:2px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5);
  padding:6px 9px; gap:8px;
}
.sb-battle-on .out .o:hover{ background:rgba(16,40,58,.7); }
.sb-battle-on .out .o.spent{ opacity:.42; }
.sb-battle-on .out .o .onm{
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15.5px; letter-spacing:1px;
  color:var(--sb-ivory); text-transform:uppercase;
}
/* comp-9: right-aligned fixed-width 8-block readiness pip bar */
.sb-battle-on .out .o .sb-b-segs{ flex:0 0 auto; width:96px; }
.sb-battle-on .out .o .hp{ color:var(--sb-muted); }
.sb-battle-on .out .o .ico{ background-color:#0a1622; border-radius:2px; }
.sb-battle-on .out .o .ost.rdy{ color:var(--sb-green); text-shadow:0 0 6px rgba(112,186,121,.6); }
.sb-battle-on .out .o .ost.act{ color:var(--sb-amber); }
.sb-battle-on .out .sb-pips{ gap:2px; flex:0 0 auto; }
.sb-battle-on .out .sb-pip{ width:6px; height:10px; background:#132433; border-color:#04090f; }
.sb-battle-on .out .sb-pip.lit{ box-shadow:0 0 4px rgba(112,186,121,.5); }
.sb-battle-on h3{
  font-family:'IBM Plex Mono',monospace; color:var(--sb-cyan); letter-spacing:2px;
}
.sb-battle-on #rail-outliner button{
  background:linear-gradient(#262d33,#151a1f); border:2px solid #05080c; border-radius:3px; color:#dfe8f2;
  font-family:'IBM Plex Sans Condensed',sans-serif; font-size:12.5px;
  box-shadow:inset 0 1px 0 rgba(190,205,220,.08);
}
.sb-battle-on #rail-outliner button:hover:not(:disabled){ border-color:var(--sb-cyan); background:#2d353b; }
.sb-battle-on .row{ border-bottom-color:#2d353a; }
.sb-battle-on .pill.nato{ background:#12283c; border-color:#2c4a66; color:#bcd8ff; }
.sb-battle-on .pill.pact{ background:#3a1512; border-color:var(--sb-red); color:#ffd6d6; }
.sb-battle-on .rail-doctrine{ background:rgba(6,9,12,.6); border-top:1px solid #333c43; }
.sb-battle-on .rail-doc-hd{
  font-family:'Barlow Condensed',sans-serif; letter-spacing:2.5px; color:var(--sb-dim);
}
.sb-battle-on #log{ border-top-color:#333c43; }
.sb-battle-on #chk{ background:#0a1824cc; border-color:var(--sb-border); }
.sb-battle-on #chk .h{ color:var(--sb-amber); }
/* rail footer grid: channel keys + red END TURN (test hooks live here — keep ids/order) */
.sb-battle-on .pfoot{
  background:linear-gradient(#0a141f,#060d15);
  border-top:3px solid var(--bk-line);
  box-shadow:inset 0 1px 0 rgba(150,180,210,.09);
  gap:5px; padding:8px;
}
.sb-battle-on .pfoot > button{
  background:linear-gradient(#262d33,#151a1f);
  border:2px solid #05080c; border-radius:3px; color:#cfe2f7;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1px; min-height:30px;
  padding:4px;
  box-shadow:inset 0 1px 0 rgba(190,205,220,.1), 0 2px 5px rgba(0,0,0,.5);
}
.sb-battle-on .pfoot > button:hover:not(:disabled){ border-color:var(--sb-cyan); color:var(--sb-ivory); }
.sb-battle-on .pfoot-end{
  background:linear-gradient(#c63a32,#8f1f1b) !important; border:2px solid #050608 !important; color:var(--sb-ivory2) !important;
  font-weight:800; letter-spacing:2px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -4px 8px rgba(0,0,0,.4), 0 0 10px rgba(227,68,57,.3) !important;
}
.sb-battle-on .pfoot-end:hover{ filter:brightness(1.14); }
.sb-battle-on .pfoot-threat.on{ border-color:var(--sb-amber) !important; color:var(--sb-amber) !important; }
.sb-battle-on .pfoot-threat:hover{ border-color:var(--sb-amber); color:var(--sb-amber); }
/* MINIMAP IN CRT BEZEL (region-7, comp-23): thick metal console — brushed bezel with corner
   screws, inset radar screen at the map's own aspect (min-height keeps wide maps console-tall),
   curved-glass sheen, side knob column + lamp. */
.sb-battle-on #minimap-wrap{
  position:relative; width:auto; flex:0 0 auto; overflow:hidden;
  margin:0 10px 8px; padding:10px;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px),
    linear-gradient(#1e2126,#0e1013);
  border:3px solid #050608; border-radius:7px;
  box-shadow:
    inset 0 1px 0 rgba(210,220,230,.1),
    inset 0 0 0 1px #2b3036,
    0 7px 18px rgba(0,0,0,.6);
  position:relative;
}
/* bezel corner screws (comp-23) */
.sb-battle-on #minimap-wrap::before{
  content:''; position:absolute; inset:0; border-radius:5px; pointer-events:none;
  background:
    radial-gradient(circle 2.5px at 8px 8px,#5a636b 55%,#0b0d10 60%,transparent 72%),
    radial-gradient(circle 2.5px at calc(100% - 8px) 8px,#5a636b 55%,#0b0d10 60%,transparent 72%),
    radial-gradient(circle 2.5px at 8px calc(100% - 8px),#5a636b 55%,#0b0d10 60%,transparent 72%),
    radial-gradient(circle 2.5px at calc(100% - 8px) calc(100% - 8px),#5a636b 55%,#0b0d10 60%,transparent 72%);
}
.sb-battle-on #minimap-header{
  background:none; border:0; padding:0 2px 7px; color:var(--sb-dim);
  font-family:'IBM Plex Mono',monospace; letter-spacing:2px;
}
.sb-battle-on .mm-bezel{ display:flex; gap:9px; align-items:stretch; }
.sb-battle-on .mm-screen{
  position:relative; flex:1 1 auto; min-width:0; height:auto; min-height:132px;
  border:3px solid #04060a; border-radius:8px;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.85),
    inset 0 0 0 1px #1d3a26,
    0 0 0 1px #2b3036,
    0 1px 0 rgba(210,220,230,.08);
  background:#040d07; overflow:hidden;
}
.sb-battle-on #minimap{
  display:block; width:100%; height:100%; border:0; border-radius:5px;
  box-sizing:border-box; cursor:pointer; image-rendering:pixelated;
}
/* curved CRT glass: scanlines + cyan sheen + edge falloff */
.sb-battle-on .mm-glass{
  position:absolute; inset:0; pointer-events:none; border-radius:5px;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px),
    linear-gradient(115deg,rgba(86,199,217,.07),transparent 42%),
    radial-gradient(125% 95% at 50% 38%,transparent 52%,rgba(0,0,0,.55) 100%);
}
.sb-battle-on .mm-side{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:0 1px;
}
.sb-battle-on .mm-knob{
  width:17px; height:17px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 35% 28%,#4d545c,#16191d 72%);
  border:1px solid #000;
  box-shadow:0 2px 4px rgba(0,0,0,.75), inset 0 1px 1px rgba(255,255,255,.18);
}
.sb-battle-on .mm-knob::after{
  content:''; position:absolute; left:50%; top:1.5px; width:2px; height:6px;
  background:#0a0c0e; transform:translateX(-50%); border-radius:1px;
  box-shadow:0 0 1px rgba(255,255,255,.25);
}
.sb-battle-on .mm-lamp{
  width:9px; height:9px; border-radius:50%;
  background:var(--sb-green); box-shadow:0 0 7px rgba(112,186,121,.8), inset 0 -2px 3px rgba(0,0,0,.4);
  border:1px solid #04140a;
}

/* deploy phase: the DEPLOY tray is the dominant next action, so it takes the rail space —
   the minimap (a nav aid with no units on it yet) and the outliner floor yield to it.
   Detected structurally: renderDeployPanel sets #rail-deploy's inline display. */
.sb-battle-on #panel:has(#rail-deploy:not([style*="none"])) #minimap-wrap{ display:none; }
.sb-battle-on #panel:has(#rail-deploy:not([style*="none"])) #rail-outliner{ min-height:0; }

/* ==================== DEPLOY BANNER ==================== */
.sb-battle-on #deploy-banner{
  background:
    /* scanlines moved to #vhs */
    linear-gradient(#242b30,#171c20 55%,#101418);
  border-bottom:3px solid var(--sb-red);
  box-shadow:inset 0 1px 0 rgba(170,200,230,.14), 0 4px 14px rgba(0,0,0,.5);
  font-family:'Barlow Condensed',sans-serif; color:var(--sb-ivory);
}
.sb-battle-on .db-icon{ color:var(--sb-alert); }
.sb-battle-on .db-title{ color:var(--sb-ivory); font-size:18px; letter-spacing:3px; font-weight:800; }
.sb-battle-on .db-sub{
  font-family:'IBM Plex Mono',monospace; font-weight:400; letter-spacing:1px; font-size:10.5px; color:#9fb2c4;
}
.sb-battle-on .db-cp{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.5px; font-size:15px; color:var(--sb-amber);
}
.sb-battle-on .db-begin{
  background:linear-gradient(#c63a32,#8f1f1b); border:2px solid #050608; border-radius:5px;
  color:var(--sb-ivory2); font-family:'Barlow Condensed',sans-serif; font-weight:800; letter-spacing:2px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -4px 8px rgba(0,0,0,.4), 0 0 12px rgba(227,68,57,.3), 0 3px 8px rgba(0,0,0,.6);
}
.sb-battle-on .db-begin:hover:not(:disabled){ filter:brightness(1.14); }
.sb-battle-on .db-begin:active:not(:disabled){ transform:translateY(1px); }

/* ==================== BOTTOM COMMAND DECK (region-4, comp-12..19) ====================
   Spans the MAP column only (rail is full-height now) — keycaps compacted: tighter padding,
   smaller icon/label clamps, gap 10. */
.sb-battle-on #actiondeck{
  flex:0 0 auto; align-items:stretch; gap:10px;
  height:clamp(104px,16.5vh,176px);
  padding:10px 12px;
  background:
    /* scanlines moved to #vhs */
    linear-gradient(#20262b,#14181c 48%,#0b0e11);
  border-top:3px solid var(--bk-line);
  box-shadow:
    inset 0 2px 0 rgba(160,190,220,.13),
    inset 0 14px 30px rgba(0,0,0,.35);
  box-sizing:border-box;
  overflow-x:auto; overflow-y:hidden;
  position:relative; z-index:8;
}
/* big ivory keycap (comp-12..15, comp-18) — faithful replica of key_square_ivory.png:
   black outer bezel with corner screws, brushed-ivory cap with dark inset edge,
   printed dark icon + condensed label, press = translateY.
   Review2 §1: ALL deck buttons share one baseline, one height, equal flex columns —
   dark buttons differ by FILL ONLY; END TURN is the single 1.6× exception. */
.sb-b-key{
  flex:1 1 0; min-width:0; width:0; box-sizing:border-box;
  margin:0; padding:8px 3px 7px; cursor:pointer; position:relative;
  background:
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 16%),
    repeating-linear-gradient(0deg,rgba(120,100,60,.06) 0 2px,transparent 2px 4px),
    linear-gradient(#f4ecd6,#e0d3b1 52%,#c8b992);
  border:5px solid #07080b;
  border-radius:8px;
  box-shadow:
    inset 0 0 0 2px #202329,
    inset 0 3px 0 rgba(255,255,255,.55),
    inset 0 -8px 12px rgba(62,48,22,.38),
    0 5px 12px rgba(0,0,0,.65);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
/* bezel screws */
.sb-b-key::before{
  content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:
    radial-gradient(circle 2.5px at 8px 8px,#4a5058 55%,#0b0d10 60%,transparent 72%),
    radial-gradient(circle 2.5px at calc(100% - 8px) 8px,#4a5058 55%,#0b0d10 60%,transparent 72%),
    radial-gradient(circle 2.5px at 8px calc(100% - 8px),#4a5058 55%,#0b0d10 60%,transparent 72%),
    radial-gradient(circle 2.5px at calc(100% - 8px) calc(100% - 8px),#4a5058 55%,#0b0d10 60%,transparent 72%);
}
.sb-b-key:hover:not(:disabled){ filter:brightness(1.06); }
.sb-b-key:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:
    inset 0 0 0 2px #202329,
    inset 0 4px 10px rgba(62,48,22,.45),
    0 2px 5px rgba(0,0,0,.6);
}
.sb-b-key:disabled{ opacity:.45; cursor:default; filter:saturate(.4); }
.sb-b-key-lamp{
  position:absolute; left:9px; top:7px; width:17px; height:6px;
  border:1px solid rgba(0,0,0,.55); box-sizing:border-box;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5), 0 0 5px rgba(255,255,255,.12);
}
.sb-b-key-ic{
  width:clamp(24px,3.1vh,36px); height:clamp(24px,3.1vh,36px); object-fit:contain;
  filter:brightness(.2) contrast(1.12) sepia(.18);
}
.sb-b-key-glyph{ font-size:clamp(16px,2.2vh,22px); line-height:1; color:#15181d; }
.sb-b-key-lbl{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(12px,1.8vh,17px); letter-spacing:1px;
  color:#15181d; white-space:nowrap; max-width:100%; overflow:hidden;
}
/* dark deck cards (comp-16 THREAT / comp-17 SUPPLY): same geometry as the ivory keys —
   they differ by FILL ONLY (review2 §1). Knob: 18px, right edge, vertically centered. */
.sb-b-dial{
  flex:1 1 0; min-width:0; width:0; box-sizing:border-box;
  margin:0; padding:8px 3px 7px; cursor:pointer; position:relative;
  background:linear-gradient(180deg,#232a2e,#181d20);
  border:5px solid #07080b;
  border-radius:8px;
  box-shadow:
    inset 0 0 0 2px #202329,
    inset 0 3px 0 rgba(255,255,255,.1),
    inset 0 -8px 12px rgba(0,0,0,.5),
    0 5px 12px rgba(0,0,0,.65);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.sb-b-dial:hover{ filter:brightness(1.12); }
.sb-b-dial:active{ transform:translateY(3px); }
.sb-b-dial.on{
  box-shadow:
    inset 0 0 0 2px #6b5a1e,
    inset 0 3px 0 rgba(255,255,255,.1),
    inset 0 -8px 12px rgba(0,0,0,.5),
    0 0 10px rgba(232,179,58,.3),
    0 5px 12px rgba(0,0,0,.65);
}
.sb-b-dial-ic{
  width:clamp(22px,2.8vh,32px); height:clamp(22px,2.8vh,32px); object-fit:contain;
  filter:grayscale(.35) brightness(1.5);
}
.sb-b-dial.on .sb-b-dial-ic{ filter:brightness(1.8) drop-shadow(0 0 5px rgba(232,179,58,.5)); }
.sb-b-dial-lbl{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(12px,1.8vh,17px); letter-spacing:1px; color:#e2d9c4;
}
.sb-b-dial-knob{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#4d545c,#14171b 72%);
  border:1px solid #000;
  box-shadow:0 2px 4px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.18);
}
.sb-b-dial-knob::after{
  content:''; position:absolute; left:50%; top:2px; width:2px; height:38%;
  background:#0a0c0e; transform:translateX(-50%); border-radius:1px;
  box-shadow:0 0 1px rgba(255,255,255,.25);
}
.sb-b-dial.on .sb-b-dial-knob{ transform:translateY(-50%) rotate(38deg); }
.sb-b-deck-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;
  pointer-events:none; white-space:nowrap;
  font-family:'IBM Plex Mono',monospace; font-size:clamp(11px,1.5vh,14px); letter-spacing:2px; color:var(--sb-muted);
  padding:0 10px;
}
/* guarded END TURN (comp-19): same row, same baseline — the only wider column (1.6×).
   Red gradient face, dark steel frame with side rivets, blinking lamp. No recessed well. */
.sb-b-end{
  flex:1.6 1 0; min-width:0; width:0; box-sizing:border-box;
  margin:0; cursor:pointer; position:relative;
  background:linear-gradient(#c94037,#9c231e 52%,#741a15);
  border:3px solid #2d353a; border-radius:6px;
  box-shadow:
    0 0 0 2px #050608,
    0 5px 12px rgba(0,0,0,.65),
    inset 0 3px 0 rgba(255,255,255,.24),
    inset 0 -10px 16px rgba(0,0,0,.45);
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(20px,2.8vh,28px); letter-spacing:3px;
  color:var(--sb-ivory2); text-shadow:0 2px 4px rgba(0,0,0,.6);
}
/* corner rivets on the steel frame (comp-19) */
.sb-b-end::before{
  content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:
    radial-gradient(circle 2.5px at 9px 50%,#8b949c 55%,#1a1e22 60%,transparent 72%),
    radial-gradient(circle 2.5px at calc(100% - 9px) 50%,#8b949c 55%,#1a1e22 60%,transparent 72%);
}
.sb-b-end:hover{
  filter:brightness(1.12);
  box-shadow:
    0 0 0 2px #050608,
    0 0 34px rgba(227,68,57,.6),
    inset 0 3px 0 rgba(255,255,255,.28),
    inset 0 -10px 16px rgba(0,0,0,.45);
}
.sb-b-end:active{ transform:translateY(2px); }
.sb-b-end-lamp{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:26px; height:6px; border-radius:2px;
  background:var(--sb-alert); box-shadow:0 0 10px rgba(227,68,57,.95);
  animation:cw-blink 1.6s steps(1) infinite;
}
/* Narrow viewports: the deck is the ONLY home of END TURN, UNDO and the unit actions
   (UI-REVIEW §8), so hiding it here left the battle screen with no way to act or end a turn at
   tablet/phone width. The keys are flex:1 1 0 / width:0, which is what collapsed them into
   unreadable slivers and prompted the display:none — give them a width floor instead and let the
   deck scroll horizontally, which it is already set up to do (overflow-x:auto above). */
@media (max-width:900px){
  .sb-battle-on #actiondeck{ height:clamp(72px,11vh,96px); padding:7px 8px; gap:7px; }
  .sb-battle-on .sb-b-key, .sb-battle-on .sb-b-dial{
    flex:0 0 auto; width:auto; min-width:72px; padding:6px 8px 5px;
  }
  .sb-battle-on .sb-b-key-ic{ width:22px; height:22px; }
  .sb-battle-on .sb-b-key-lbl{ font-size:12px; letter-spacing:.6px; }
  /* END TURN is the one control a player reaches every single turn, so it must never be the
     thing hidden behind the deck's horizontal scroll: pin it to the right edge of the viewport. */
  .sb-battle-on .sb-b-end{
    flex:0 0 auto; width:auto; min-width:116px;
    position:sticky; right:0; z-index:3;
  }
}
/* tall viewports (1440p/4K): the hex map must not be sacrificed to oversized chrome —
   the deck compacts to a short console strip so the board keeps its dominance. */
@media (min-height:1100px){
  .sb-battle-on #actiondeck{ height:92px; padding:8px 14px; gap:10px; }
  .sb-battle-on .sb-b-key, .sb-battle-on .sb-b-dial{ padding:6px 4px 5px; gap:2px; }

}

/* ==================== UNIT INFO CARD (region-5, comp-11) ==================== */
.sb-battle-on #inspector{
  left:12px; bottom:14px; margin-left:0;
  width:clamp(460px,40vw,660px);
}
.sb-battle-on .ins-wrap{
  background:
    /* scanlines moved to #vhs */
    repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 6px),
    linear-gradient(165deg,#232a2e,#171c20 42%,#0e1114);
  border:2px solid #04080d; border-radius:5px;
  box-shadow:
    inset 0 0 0 1px #3a444c,
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 46px rgba(2,6,10,.5),
    0 20px 50px rgba(0,0,0,.75);
  overflow:hidden;
}
.sb-battle-on .ins-drag-hd{
  background:linear-gradient(#2a3237,#1e2429);
  border-bottom:2px solid #04080d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  padding:5px 10px;
}
.sb-battle-on .ins-drag-grip{ font-family:'IBM Plex Mono',monospace; color:var(--sb-dim); }
.sb-battle-on .ins-collapse-btn{
  background:linear-gradient(#262d33,#151a1f); border:2px solid #05080c; border-radius:3px; color:#9fb2c4;
}
.sb-battle-on .ins-collapse-btn:hover{ border-color:var(--sb-cyan); color:var(--sb-ivory); }
.sb-battle-on .ins-hd{
  background:linear-gradient(90deg,rgba(42,50,55,.55),rgba(18,22,26,.2));
  border-bottom:2px solid #04080d;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05);
}
/* unit photo: framed equipment plate */
.sb-battle-on .ins-spr{
  width:clamp(104px,9vw,132px); flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 38%,#232b31,#0a0d10 78%);
  border-right:2px solid #04080d;
  box-shadow:inset 0 0 0 1px #3a444c, inset 0 0 26px rgba(0,0,0,.65);
}
.sb-battle-on .ins-spr canvas{
  width:clamp(72px,6.6vw,96px) !important; height:auto !important;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.sb-battle-on .ins-chev{ text-shadow:0 0 6px rgba(232,179,58,.6), 0 1px 2px #000; }
.sb-battle-on .ins-hd-info{ padding:10px 13px; }
.sb-battle-on .ins-name{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; letter-spacing:2px;
  font-size:clamp(20px,2.7vh,26px); color:var(--sb-ivory);
  text-shadow:0 2px 3px rgba(0,0,0,.55);
}
.sb-battle-on .ins-equip{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:11.5px;
  letter-spacing:1.5px; color:var(--sb-cyan); text-transform:uppercase; margin-top:1px;
}
.sb-battle-on .ins-coord{ color:var(--sb-dim); }
.sb-battle-on .ins-vet{ color:var(--sb-amber); }
.sb-battle-on .ins-cls{ color:var(--sb-muted); }
.sb-battle-on .ins-dug{ background:#0f2030; border-color:#2c4a6b; border-radius:3px; }
/* big-numeral meters: HP / SUPPRESSION / AMMO cells with segmented bars */
.sb-battle-on .sb-b-meters{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-top:9px;
}
.sb-battle-on .sb-b-meter{
  display:flex; flex-direction:column; gap:4px;
  background:rgba(3,7,12,.6);
  border:1px solid #2d353a; border-radius:3px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
  padding:6px 9px 8px;
}
.sb-battle-on .sb-b-meter-top{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.sb-battle-on .sb-b-meter-lbl{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px; color:var(--sb-dim);
  flex:0 0 auto;
}
.sb-battle-on .sb-b-meter-val{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(19px,2.6vh,25px); color:var(--sb-ivory); line-height:1; white-space:nowrap;
  text-shadow:0 0 8px rgba(231,216,183,.18);
}
.sb-battle-on .sb-b-meter-max{ font-size:.6em; color:var(--sb-muted); font-weight:600; }
.sb-battle-on .sb-b-segs{ display:flex; gap:2px; }
.sb-battle-on .sb-b-seg{
  height:10px; flex:1 1 0; background:#15191c; border:1px solid #04090f; box-sizing:border-box;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.sb-battle-on .sb-b-segs.hp .sb-b-seg.lit{ background:linear-gradient(#8fd49a,#4e8f58); box-shadow:0 0 5px rgba(112,186,121,.45); }
.sb-battle-on .sb-b-segs.sup .sb-b-seg.lit{ background:linear-gradient(#f4c84a,#c58f1d); box-shadow:0 0 5px rgba(232,179,58,.5); }
.sb-battle-on .sb-b-segs.am .sb-b-seg.lit{ background:linear-gradient(#f2e6c8,#cbb98d); box-shadow:0 0 4px rgba(231,216,183,.35); }
.sb-battle-on .sb-b-segs.you .sb-b-seg.lit{ background:linear-gradient(#7cd3e2,#3a8ba0); box-shadow:0 0 5px rgba(86,199,217,.45); }
.sb-battle-on .sb-b-segs.enemy .sb-b-seg.lit{ background:linear-gradient(#f06a5a,#b03024); box-shadow:0 0 5px rgba(227,68,57,.5); }
.sb-battle-on .ins-stat-grid{ background:#04080d; border-bottom:2px solid #04080d; }
.sb-battle-on .ins-stat-cell{
  background:rgba(16,20,24,.85);
  box-shadow:inset 0 1px 0 rgba(150,180,210,.05);
}
.sb-battle-on .ins-stat-lbl{ color:var(--sb-dim); }
.sb-battle-on .ins-stat-val{ color:#e2d9c4; }
.sb-battle-on .ins-moves-row{ background:rgba(6,9,12,.6); border-color:#2d353a; border-radius:3px; }
.sb-battle-on .ins-cmdr-avatar{
  background:linear-gradient(#20262b,#101418); border:2px solid #05090f; border-radius:4px;
  box-shadow:inset 0 0 0 1px #3a444c;
}
.sb-battle-on .ins-promote{
  background:linear-gradient(#332813,#241c0d); border-color:var(--sb-amber); border-radius:3px;
}
.sb-battle-on .ins-actions{ background:#04080d; border-top:2px solid #04080d; }
.sb-battle-on .ins-act-btn{ background:rgba(16,20,24,.9); color:#dfe8f2; }
.sb-battle-on .ins-act-btn:hover{ background:#2d353b; color:var(--sb-ivory); }
.sb-battle-on .ins-eng-btn{
  background:linear-gradient(#262d33,#151a1f); border-color:#05080c; border-radius:3px; color:#dfe8f2;
}
.sb-battle-on .ins-eng-btn:hover{ background:#2d353b; border-color:var(--sb-cyan); color:var(--sb-ivory); }
.sb-battle-on .ins-xp-track{ background:#030609; border-color:#2d353a; }

/* ==================== COMBAT FORECAST (region-6, comp-10) ==================== */
.sb-battle-on #forecast{
  position:absolute; right:clamp(20px,3.2vw,54px); bottom:16px; z-index:6;
  width:clamp(290px,25vw,360px); display:none;
  background:
    /* scanlines moved to #vhs */
    linear-gradient(165deg,#232a2e,#171c20 45%,#0e1114);
  border:2px solid #04080d; border-radius:5px;
  box-shadow:
    inset 0 0 0 1px #3a444c,
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 42px rgba(0,0,0,.72);
  overflow:hidden;
}
.sb-b-fc-hd{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:16px; letter-spacing:3px;
  color:var(--sb-ivory); padding:7px 12px; border-bottom:2px solid #04080d;
  background:linear-gradient(#2a3237,#1e2429);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  text-align:center; text-shadow:0 2px 2px rgba(0,0,0,.5);
}
.sb-b-fc-cols{ display:flex; align-items:stretch; }
.sb-b-fc-col{ flex:1; padding:9px 10px 10px; text-align:center; position:relative; }
.sb-b-fc-col.you{
  background:rgba(58,110,160,.16); border-right:1px solid #333c43;
  box-shadow:inset 0 0 26px rgba(86,199,217,.14);
}
.sb-b-fc-col.enemy{
  background:rgba(160,40,32,.15);
  box-shadow:inset 0 0 26px rgba(227,68,57,.15);
}
.sb-b-fc-side{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2.5px; color:#9fb2c4; }
.sb-b-fc-dmg{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:34px; line-height:1.05;
}
.sb-b-fc-col.you .sb-b-fc-dmg{ color:#9fdcff; text-shadow:0 0 14px rgba(86,199,217,.55); }
.sb-b-fc-col.enemy .sb-b-fc-dmg{ color:#ff9384; text-shadow:0 0 14px rgba(227,68,57,.55); }
.sb-b-fc-ico{ display:inline-block; margin-top:3px; opacity:.9; }
.sb-b-fc-unit{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--sb-muted); margin-top:2px; }
.sb-b-fc-vs{
  align-self:center; position:relative; z-index:1;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:14px; letter-spacing:1px;
  color:var(--sb-ivory);
  width:36px; height:36px; border-radius:50%; margin:0 -18px; flex:0 0 auto;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 28%,#2a3542,#10151c 75%);
  border:2px solid #050608;
  box-shadow:0 0 0 1px #3a444c, 0 3px 9px rgba(0,0,0,.7);
}
.sb-b-fc-bars{
  padding:8px 11px 10px; border-top:1px solid #333c43;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(3,7,12,.45);
}
.sb-b-fc-bar{ display:flex; align-items:center; gap:6px; }
.sb-b-fc-bar .sb-b-segs.enemy{ margin-left:8px; }
.sb-b-fc-bar-lbl{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--sb-dim);
  width:46px; flex:0 0 auto;
}
.sb-b-fc-note{
  padding:5px 11px 7px; border-top:1px solid #333c43;
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--sb-amber);
}

/* ==================== MODAL SHELL (all modals inherit the Style B frame) ==================== */
.sb-battle-on .mcard{
  background:
    /* scanlines moved to #vhs */
    linear-gradient(170deg,#232a2e,#161b1f 50%,#0e1114);
  border:2px solid #04080d;
  border-radius:6px;
  box-shadow:
    inset 0 0 0 1px #3a444c,
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 90px #000c;
}
.sb-battle-on .mhd{
  background:linear-gradient(#2a3237,#1e2429);
  border-bottom:2px solid #04080d;
  border-left:6px solid var(--sb-red); padding:12px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.sb-battle-on .mhd-ico{ border-radius:4px; }
.sb-battle-on .mhd-title{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:22px;
  letter-spacing:2px; text-transform:uppercase; color:var(--sb-ivory);
}
.sb-battle-on .mhd-sub{ font-family:'IBM Plex Sans Condensed',sans-serif; color:#9fb2c4; }
.sb-battle-on .mhd-close{
  background:linear-gradient(#262d33,#151a1f); border:2px solid #05080c; border-radius:3px; color:#9fb2c4;
}
.sb-battle-on .mhd-close:hover{ border-color:var(--sb-alert); color:var(--sb-alert); }
.sb-battle-on .mfoot{ background:#12161a; border-top:2px solid #04080d; }
.sb-battle-on .mprim{
  background:linear-gradient(#c63a32,#8f1f1b); border:2px solid #050608; border-radius:5px;
  color:var(--sb-ivory2); font-family:'Barlow Condensed',sans-serif; font-weight:800; letter-spacing:2px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -4px 8px rgba(0,0,0,.4);
}
.sb-battle-on .mprim:hover{ filter:brightness(1.14); }
.sb-battle-on .msec{
  background:linear-gradient(#262d33,#151a1f); border:2px solid #05080c; border-radius:3px; color:#cfe2f7;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.5px;
}
.sb-battle-on .msec:hover{ border-color:var(--sb-cyan); color:var(--sb-ivory); }
.sb-battle-on #modal button:not(.mprim):not(.msec):not(.mhd-close){
  background:linear-gradient(#262d33,#151a1f); border-color:#05080c; border-radius:3px; color:#dfe8f2;
}
.sb-battle-on #modal button:not(.mprim):not(.msec):not(.mhd-close):hover{
  border-color:var(--sb-cyan); background:#2d353b;
}

/* ==================== CUTSCENE + HOME BUTTON ==================== */
.sb-battle-on #cut{ background:#05070a; }
.sb-battle-on .cut-go{
  background:linear-gradient(#c63a32,#8f1f1b); color:var(--sb-ivory2); border:2px solid #050608;
  border-radius:5px; font-family:'Barlow Condensed',sans-serif;
}
.sb-battle-on .cut-go:hover{ filter:brightness(1.14); }
.sb-battle-on .cut-skip{ color:var(--sb-muted); }
.sb-battle-on .cut-beat{ background:#05070a; }
.sb-battle-on .cut-beatfoot{ background:#12161a; border-top:2px solid #04080d; }
.sb-battle-on #homebtn{
  background:rgba(18,22,26,.94); border:2px solid #05090f; border-radius:3px;
  box-shadow:inset 0 0 0 1px #3a444c;
  color:var(--sb-ivory); font-family:'Barlow Condensed',sans-serif; letter-spacing:2px;
}

/* ==================== SHORT-VIEWPORT COMPACTION (≤900px tall — e.g. 1280×800) ====================
   Lives at the END of the sheet so nothing below can override it. The rail must keep its three
   command cards, the CRT minimap, the scrollable outliner AND the pinned footer inside
   ~560-630px; the deck yields height to the map. */
@media (max-height:900px){
  .sb-battle-on #rail-obj,
  .sb-battle-on #rail-research,
  .sb-battle-on #rail-btns,
  .sb-battle-on #rail-deploy,
  .sb-battle-on #rail-todo,
  .sb-battle-on #rail-outliner{ margin:0 8px 7px; }
  .sb-battle-on #panel{ padding-top:7px; }
  .sb-battle-on .rail-obj-hd,
  .sb-battle-on .rail-res-hd,
  .sb-battle-on .out-hd{ padding:3px 10px; }
  .sb-battle-on .rail-sec-hd-btn{ font-size:13px; }
  .sb-battle-on .rail-act-btn{ padding:1px 8px; font-size:10.5px; }
  .sb-battle-on .obj-row{ padding:2px 8px; }
  .sb-battle-on .rbtn-cmdr{ line-height:1.1; }
  .sb-battle-on .sb-b-res{ padding:4px 10px 5px; }
  .sb-battle-on .obj-rows{ padding:5px 8px 7px; gap:4px; }
  .sb-battle-on .obj-row{ padding:3px 8px; }
  .sb-battle-on .obj-row .obj-label{
    font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sb-battle-on .sb-b-res{ padding:5px 10px 6px; }
  .sb-battle-on .sb-b-res-ico{ width:34px; height:34px; }
  .sb-battle-on .sb-b-res-big{ font-size:20px; }
  .sb-battle-on .sb-b-res-sub{ display:none; }
  .sb-battle-on .rail-btns, .sb-battle-on #rail-btns{ padding:6px; gap:5px; grid-template-columns:1fr 1fr; }
  .sb-battle-on .rbtn-cmdr{ padding:3px 3px; font-size:11.5px; min-height:27px; }
  .sb-battle-on #minimap-wrap{ margin:0 8px 7px; padding:6px; }
  .sb-battle-on #minimap-header{ padding:0 2px 5px; }
  .sb-battle-on .mm-screen{ min-height:96px; }
  .sb-battle-on #minimap{ height:100%; }
  .sb-battle-on #rail-outliner{ min-height:88px; }   /* ~2 rows + scroll, not a 1-row slit */
  .sb-battle-on .pfoot{ padding:6px; gap:5px; }
  .sb-battle-on .pfoot > button{ min-height:0; height:27px; padding:0 4px; font-size:11px; }
  .sb-battle-on #actiondeck{ height:100px; padding:9px 12px; gap:10px; }
  .sb-battle-on .sb-b-key{ min-height:0; padding:7px 6px 6px; gap:2px; }
  .sb-battle-on .sb-b-dial-well{ padding:6px; }
  .sb-battle-on .sb-b-end-well{ padding:6px; }
}