/* Command clarity: keep the battlefield, elevate decisions. */
:root{--dim:#9bafc0;--faint:#73899b;--rule:#344e62;--ui-text:system-ui,-apple-system,"Segoe UI",sans-serif}
button,select{touch-action:manipulation}
button:disabled,select:disabled{cursor:not-allowed}
select{color-scheme:dark;font:14px var(--ui-text);color:var(--ink);background:#101e2a;border:1px solid var(--rule);border-radius:5px;padding:9px 10px;min-width:0;max-width:100%}
.dock-select{display:none}
button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.card{box-shadow:none;animation:none}
#panel .card,#bottom .card{animation:none;opacity:1;transform:none}
.sub{font-size:12px;letter-spacing:.09em}
.row{font-size:13px}.row b{font-size:12px}
.seg button,.act button{font-family:var(--ui-text);font-size:13px;letter-spacing:.02em}
.seg button.on{box-shadow:none}
.act .resolve{animation:none;box-shadow:none;font:700 15px var(--ui-text);letter-spacing:0;min-height:44px}
.scanlines{opacity:.12}
body::after{opacity:.12}
.phasetag{font:600 12px var(--ui-text);letter-spacing:.03em;padding-top:6px;padding-bottom:6px}
.hdr{flex:none;overflow:visible}.hdr h1{font-size:20px;letter-spacing:.12em;padding-right:64px}
.hdr .tagline{display:none}.stat .sl{font-size:11px;letter-spacing:.04em}
.vpstrip{gap:8px;flex-wrap:wrap}.vpstrip span{font-size:12px;letter-spacing:0}.vpstrip b{font-size:13px}
#classname{font:600 14px/1.5 var(--ui-text)}
#orders .hint{display:none}
#orders .seg button{min-height:36px}
#orders .tankpick button{font-size:14px;min-height:38px}
#log{font-size:12px;line-height:1.65}
#log .ln{white-space:normal;overflow-wrap:anywhere}
.legend-quick{margin:0 0 8px;font:13px/1.5 var(--ui-text);color:var(--dim)}
#readoutcard>.sub{display:none}
.map-legend summary{cursor:pointer;font:600 13px var(--ui-text);color:var(--signal);min-height:28px}
.legend{font-size:12px}.map-legend[open]{max-height:110px;overflow:auto}
.command-footer{flex:none;margin:0!important;padding:10px 12px;border:1px solid var(--rule);border-radius:6px;background:#0e1721}
.command-footer .audiobtn{display:none}
.order-short{font:13px/1.45 var(--ui-text);color:var(--ink);margin-bottom:5px}
.order-review{font:13px/1.5 var(--ui-text);color:var(--dim)}
.order-review summary{cursor:pointer;min-height:28px;color:var(--signal);font-weight:600}
.order-review-body{max-height:150px;overflow:auto}.order-review p{margin:5px 0 10px}
.guide-button{min-height:32px;border:0;background:none;color:var(--dim);font:13px var(--ui-text);cursor:pointer;padding:2px 0;margin-bottom:4px}
.plot-guide-hint{position:absolute;right:12px;top:10px;z-index:5;border:1px solid var(--rule);border-radius:5px;background:#0e1721;color:var(--ink);min-height:34px;padding:6px 12px;font:13px var(--ui-text);cursor:pointer}
.plot-guide-hint[hidden],.resolve-progress[hidden]{display:none}
.resolve-progress{position:absolute;bottom:10px;left:20%;width:60%;height:7px;accent-color:var(--signal);z-index:5}
#order-guide{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;background:#03070bcf;padding:20px}
#order-guide[hidden]{display:none}
.guide-card{max-width:480px;padding:28px;border:1px solid var(--rule);background:#0e1721;border-radius:12px;font-family:var(--ui-text)}
.guide-card h2{font-size:24px;line-height:1.2;margin:12px 0}.guide-card p{font-size:16px;line-height:1.65;color:var(--dim)}
.guide-close{float:right;background:none;border:0;color:var(--dim);font:14px var(--ui-text);min-height:40px;cursor:pointer}
.guide-next{background:var(--signal);color:#06121a;border:0;border-radius:5px;font:600 15px var(--ui-text);min-height:44px;padding:8px 24px;cursor:pointer}
.helpclose{min-height:40px;min-width:40px}.hsec p{font:14px/1.65 var(--ui-text)}
#mmatchctl .netbtn{min-height:44px}

/* A front end, not a battle hidden underneath a dialog. */
body.command-menu #panel,body.command-menu #bottom,body.command-menu #mtop,
body.command-menu #moverlay,body.command-menu #mlog,body.command-menu #msol{display:none!important}
body.command-menu #stage{border:0;box-shadow:none}
body.command-menu #cv,body.command-menu .phasetag{visibility:hidden}
body.command-menu #overlay{position:fixed;inset:0;width:100%;height:100%;max-height:none;border:0;border-radius:0;z-index:100;padding:40px 24px 28px;overflow:auto;
 background:linear-gradient(180deg,#060b12a6,#05080ced 70%),url('menu_bg_r26.png') center/cover fixed}
#overlay h2{font-size:42px;letter-spacing:.12em;line-height:1.15;margin-bottom:12px}
#overlay>*{animation:none;transform:none;opacity:1;flex-shrink:0}
#overlay p{font:15px/1.6 var(--ui-text);max-width:620px}
#overlay .audiobtn,#overlay .netbtn{min-height:44px;font:600 15px var(--ui-text);letter-spacing:0;padding:10px 20px}
#overlay .audiobtn{margin-top:0}
#overlay .ovsection{width:min(1100px,100%);max-width:none;margin-top:18px;padding-top:18px}
#overlay .ovbuild{font-size:11px;color:var(--dim);margin-top:24px}
#overlay .netcode{font:15px var(--ui-text);min-height:44px;width:160px!important}
#overlay .netstatus{font:14px/1.5 var(--ui-text);max-width:680px;margin:12px auto}
#overlay .csw{width:28px;height:28px}
#overlay #startbtn{min-height:48px;font:700 16px var(--ui-text);letter-spacing:0;margin:0;width:auto;min-width:200px;max-width:420px!important;flex:1;box-shadow:none;animation:none}
#overlay:is(:has(#startbtn),:has(#campdeploy)) > div:last-child{position:sticky;bottom:-28px;padding:12px 16px;background:#08121a;border-top:1px solid var(--rule);z-index:2;align-self:stretch;flex-shrink:0}
#overlay #sk-back{width:auto;flex:0 0 110px}
#campdeploy,#campquit,#campnext,#campretry,#camphome,#camprestart,#rematchbtn{min-height:48px;padding:10px 22px;border:1px solid var(--rule);border-radius:5px;font-family:var(--ui-text)!important;font-size:15px!important;letter-spacing:0!important;cursor:pointer}
#campquit{color:#06121a}
#overlay:has(#m-sp){justify-content:center;padding-bottom:100px}
#overlay:has(#m-sp) h2{font-size:56px}
#loadout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin:18px 0}
#loadout>.lcard{width:100%;min-width:0;margin:0;transform:none;animation:none}
#loadout>.lcard:first-child{grid-column:1/-1}
.lportrait{height:168px;background:#0d1720}.lportrait img{filter:brightness(1.9) contrast(1.03) saturate(.85)}
.lhdr{font-size:13px;letter-spacing:.09em}
#loadout .lsel{display:grid;gap:5px;margin:13px 0;min-width:0}
.component-label{font:600 13px var(--ui-text);color:var(--dim)}
.component-select{width:100%;min-height:44px;font-size:15px}
.component-hint{font:12px/1.5 var(--ui-text);color:var(--dim)}
#overlay .loadout-change{font:12px/1.5 var(--ui-text);color:var(--signal);margin-top:10px}
.loadout-change:empty{display:none}
.technical-stats{font:13px var(--ui-text);margin-top:12px}.technical-stats summary{cursor:pointer;min-height:36px;color:var(--signal)}
.srow,.srow b{font-size:12px}.srow{gap:8px}
#mapsel{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.map-preview{width:180px;height:124px;border:1px solid var(--rule);border-radius:5px}
.map-preview-caption{font:12px var(--ui-text);color:var(--dim);flex-basis:100%}
#mapsel .lk{font-size:12px}#mapsel .lv{font:600 15px var(--ui-text)}
.lcyc{min-width:36px;min-height:36px;font-size:20px}
#loadout .szbtn{min-width:36px;font-size:15px}
@media(min-width:921px){
 #app{padding:12px;gap:12px}#top{gap:12px}
 #panel{flex-basis:370px;gap:8px;overflow:hidden}
 #orders{min-height:0;overflow-y:auto;flex:1 1 0;padding:10px 12px}
 #solcard{flex:none;max-height:130px;overflow:auto}
 #bottom{height:112px;gap:12px}#bottom>.card{min-height:0;padding:12px;overflow:auto}
 #bottom #log{max-height:68px}
 .command-footer .guide-button{display:none}
}
/* Same two-row dock; selection no longer disappears in a scroller. */
@media(max-width:920px) and (orientation:landscape){
 body.touch #app{padding-top:42px;padding-bottom:110px;padding-bottom:calc(110px + env(safe-area-inset-bottom))}
 body.touch #mtop{height:42px;gap:5px}
 body.touch #mtstats .stat .sl{font-size:9px;letter-spacing:0}
 body.touch #mtstats .vpstrip span{display:none}
 body.touch #mtstats .vpstrip{padding:6px}.vpstrip b{white-space:nowrap}
 body.touch #mtop .mbtn,body.touch #mtactions #mactslot .resolve{min-height:36px;font-size:12px;letter-spacing:0;padding:0 10px}
 body.touch #mtactions{gap:4px}
 body.touch #mobody{gap:5px;padding:5px 8px 7px;padding-bottom:max(7px,env(safe-area-inset-bottom))}
 .dock-primary{display:flex;align-items:stretch;gap:8px;min-height:44px}
 body.touch .dock-primary #tankpick{display:flex;margin:0;flex:none;gap:3px}
 body.touch .dock-primary #tankpick button{min-height:44px;min-width:35px;padding:0 6px;font-size:13px;letter-spacing:0}
 .tank-status{flex:0 1 138px;min-width:78px;padding:2px 5px;border:0;background:none;color:var(--ink);white-space:pre-line;font:12px/1.4 var(--ui-text);text-align:left;cursor:pointer}
 .tank-status.damaged{color:var(--amber)}
 body.touch .dock-primary #touchbar{flex:1;min-width:0;margin:0}
 body.touch #moverlay #plotmode{gap:4px;height:100%}
 body.touch #moverlay #plotmode button.pm{min-height:44px;font-size:12px;letter-spacing:0;padding:0 4px}
 body.touch #moverlay #plotmode button.pm.help{flex-basis:28px}
 body.touch #moverlay #orders{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.65fr;gap:7px;overflow:visible;min-height:44px;width:100%}
 body.touch #moverlay #orders>#stance,body.touch #moverlay #orders>#fire{display:none}
 body.touch #moverlay #orders>.dock-select{display:flex;align-items:center;gap:6px;min-width:0}
 .dock-select>span{font:11px var(--ui-text);color:var(--dim)}
 .dock-select select{min-height:44px;padding:5px 4px;font-size:13px;width:100%}
 body.touch #moverlay #orders .seg{border:0;padding:0;gap:5px;min-width:0;display:flex}
 body.touch #moverlay #orders .seg button{min-height:44px;padding:0 7px;font-size:12px;letter-spacing:0;flex:1;min-width:0}
 body.touch #moverlay #orders .sub,body.touch #moverlay #orders .row,body.touch #moverlay #orders .hint{display:none}
 body.touch .plot-guide-hint{font-size:12px;min-height:32px;right:8px;padding:3px 7px}
 #overlay h2{font-size:30px}
 body.command-menu #overlay{padding:22px 16px}
 #overlay:has(#m-sp){padding-bottom:22px}#overlay:has(#m-sp) h2{font-size:34px}
 #overlay .ovsection{padding-top:12px;margin-top:12px}
 .map-preview{width:105px;height:72px}.map-preview-caption{display:none}
 .lportrait{height:130px}
 .guide-card{max-width:620px;padding:18px}.guide-card p{font-size:14px;margin:8px 0}.guide-card h2{font-size:22px}
 .guide-button{min-height:40px}
}
@media(max-width:760px){#loadout{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.dock-select>span{display:none}.tank-status{font-size:11px;flex-basis:100px}}
@media(max-width:920px) and (orientation:portrait){body.touch #rotate .rsub{max-width:100%;overflow-wrap:anywhere}#overlay h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}