:root{
  /* Layout: full-bleed battlefield canvas + steel command rail (right on desktop, bottom on phones) */
  --ground:#0b0d0c; --rail:#161a18; --rail-2:#1c211e; --edge:#2e3833; --ink:#dfe3d6; --mute:#8b968d;
  --soviet:#d0392c; --soviet-deep:#7e1d16; --brass:#e2b23c; --ok:#6fd37a; --bad:#e2493b; --ally:#3b78dc;
  --f-title:'ZCOOL QingKe HuangYou','PingFang SC','Microsoft YaHei',sans-serif;
  --f-label:'Saira Condensed','Arial Narrow','PingFang SC',sans-serif;
  --f-data:'Share Tech Mono',ui-monospace,Menlo,monospace;
  --f-ui:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--f-ui);font-size:13px;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 236px;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--ground)}
#view{position:relative;overflow:hidden;min-width:0;min-height:0;touch-action:none}
#cv,#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud{position:absolute;left:10px;top:8px;display:flex;gap:10px;align-items:center;font-family:var(--f-data);font-size:13px;color:var(--mute);pointer-events:none;text-shadow:0 1px 2px #000}
#hud b{color:var(--ink);font-weight:400}
#log{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;max-width:90%}
#log div{font-family:var(--f-label);font-weight:600;letter-spacing:.08em;font-size:15px;color:#ffe6a6;background:rgba(10,12,11,.72);border:1px solid rgba(226,178,60,.35);padding:3px 12px;border-radius:2px;transition:opacity .6s}
#zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:4px}
#zoom button{width:34px;height:34px}
/* RA2-style command bar: faction-tinted steel frame, radar, four build tabs, power meter beside the cameo grid */
body{--frame:#6b2219;--frame-hi:#c9483a;--frame-lo:#260b08}
body[data-fac="all"]{--frame:#1f3a66;--frame-hi:#5b8fd8;--frame-lo:#0a1426}
#side{background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(90deg,var(--frame-lo),#151918 14%,#1b201d 86%,var(--frame-lo));border-left:4px solid var(--frame);box-shadow:inset 1px 0 0 var(--frame-hi),inset 0 0 0 1px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:7px;padding:9px;overflow-y:auto;min-height:0;min-width:0}
.credits{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-data);font-size:22px;color:var(--brass);background:linear-gradient(#070908,#111513);border:2px solid var(--frame);border-top-color:var(--frame-lo);border-left-color:var(--frame-lo);padding:3px 8px;border-radius:2px;text-shadow:0 0 8px rgba(226,178,60,.35)}
.credits small{font-family:var(--f-label);font-size:12px;letter-spacing:.12em;color:var(--mute);text-shadow:none}
#mini{width:100%;aspect-ratio:1;display:block;background:#000;border:3px solid var(--frame);border-top-color:var(--frame-lo);border-left-color:var(--frame-lo);outline:1px solid var(--frame-hi);outline-offset:-1px;box-sizing:border-box;touch-action:none;cursor:crosshair}
.tools{display:grid;grid-template-columns:1fr 1fr auto;gap:5px;align-items:center}
.tools .pw{font-family:var(--f-data);font-size:12px;color:var(--ink);padding:0 2px;white-space:nowrap}
.sws{display:flex;flex-direction:column;gap:3px}.sws:empty{display:none}
.swb{font-family:var(--f-data);font-size:12px;text-align:left;padding:4px 8px;color:var(--mute);background:linear-gradient(#262c29,#151917);border:1px solid #3c4842;border-radius:2px;cursor:pointer;white-space:pre}
.swb.ready{color:#fff;border-color:var(--bad);background:linear-gradient(#5a1d16,#2a0d0a);animation:tabflash2 1s steps(2) infinite}
.swb.armed{outline:2px solid var(--brass)}
@keyframes tabflash2{50%{background:linear-gradient(#8a2a1e,#3a120d)}}
#swt b{font-weight:400;margin-left:6px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 0 3px;min-width:0;font-family:var(--f-ui);font-size:10px;color:var(--mute);background:linear-gradient(#2e3632,#1a1f1c);border:1px solid #3c4842;border-bottom-color:#0b0d0c;border-right-color:#0b0d0c;border-radius:2px;cursor:pointer}
.tab svg{width:20px;height:20px;fill:currentColor}
.tab svg .cut{fill:#141816}
.tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab::before{content:attr(data-key);position:absolute;left:3px;top:1px;font-family:var(--f-data);font-size:9px;opacity:.6}
@media (pointer:coarse){.tab::before{display:none}}
.tab[aria-selected="true"]{color:#fff;background:linear-gradient(var(--frame-hi),var(--frame));border-color:var(--frame-hi);box-shadow:0 0 8px color-mix(in srgb,var(--frame-hi) 55%,transparent)}
.tab[aria-selected="true"] svg .cut{fill:var(--frame)}
.tab.dim{opacity:.45}
.tab.busy::after{content:'';position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:var(--brass);box-shadow:0 0 4px var(--brass)}
.tab.ready{color:#fff;animation:tabflash .8s steps(2) infinite}
@keyframes tabflash{50%{background:linear-gradient(#3c7a45,#1d4424);border-color:var(--ok)}}
.bay{display:grid;grid-template-columns:12px minmax(0,1fr);gap:6px;flex:1 0 auto;min-height:150px}
.pwbar{position:relative;background:#070908;border:1px solid var(--frame);border-top-color:var(--frame-lo);border-left-color:var(--frame-lo);overflow:hidden}
.pwbar i{position:absolute;left:1px;right:1px;bottom:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.55) 2px 4px),linear-gradient(0deg,#2f9a3e,var(--ok));transition:height .3s}
.pwbar.warn i{background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.55) 2px 4px),linear-gradient(0deg,#a8801c,var(--brass))}
.pwbar.low i{background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.55) 2px 4px),linear-gradient(0deg,#8e2219,var(--bad))}
.pwbar b{position:absolute;left:0;right:0;height:2px;margin-bottom:-1px;background:#fff;box-shadow:0 0 4px #fff;transition:bottom .3s}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start;min-width:0}
.grid[data-tab="B"] .item:not([data-tab="B"]),.grid[data-tab="D"] .item:not([data-tab="D"]),.grid[data-tab="I"] .item:not([data-tab="I"]),.grid[data-tab="V"] .item:not([data-tab="V"]){display:none}
.item{position:relative;display:block;width:100%;padding:0;border:2px solid #3a4540;border-right-color:#0b0d0c;border-bottom-color:#0b0d0c;background:#0e1110;border-radius:2px;cursor:pointer;overflow:hidden;color:var(--ink);font:inherit;text-align:left}
.item canvas{display:block;width:100%;height:auto;aspect-ratio:7/4}
.item .nm{position:absolute;left:4px;bottom:2px;font-size:11px;text-shadow:0 1px 2px #000,0 0 4px #000}
.item .cost{position:absolute;right:4px;top:2px;font-family:var(--f-data);font-size:11px;color:var(--brass);text-shadow:0 1px 2px #000}
.item .ov{position:absolute;inset:0;background:conic-gradient(transparent calc(var(--p,0) * 1turn),rgba(0,0,0,.66) 0);pointer-events:none}
.item .bd{position:absolute;right:4px;bottom:2px;font-family:var(--f-data);font-size:12px;color:#fff;text-shadow:0 1px 2px #000}
.item.locked{filter:grayscale(1) brightness(.42);cursor:not-allowed}
.item.ready{border-color:var(--ok)}
.item.ready .bd{color:var(--ok);animation:blink .9s steps(2) infinite}
.item.poor .cost{color:var(--bad)}
.item:hover:not(.locked){border-color:#5a6a60}
.item:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
@keyframes blink{50%{opacity:.35}}
.cmds{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.cmds.txt{grid-template-columns:repeat(2,1fr)}
/* icon command buttons: hotkey in the corner, name in the tooltip */
button.c.ic{position:relative;display:flex;align-items:center;justify-content:center;height:34px;padding:0;background:linear-gradient(#2c3430,#1b201d);border-color:#3c4842 #0b0d0c #0b0d0c #3c4842}
button.c.ic:hover{background:linear-gradient(#36403b,#222825)}
button.c.ic svg{width:20px;height:20px;fill:currentColor;fill-rule:evenodd}
button.c.ic[aria-pressed="true"] .off,button.c.ic[aria-pressed="false"] .on{display:none}
button.c.ic::before{content:attr(data-key);position:absolute;left:3px;top:1px;font-family:var(--f-data);font-size:9px;opacity:.55}
button.c.ic[aria-pressed="true"]{background:linear-gradient(var(--frame-hi),var(--frame));border-color:var(--frame-hi);color:#fff}
#bSound[aria-pressed="true"]{background:linear-gradient(#2c3430,#1b201d);border-color:#3c4842 #0b0d0c #0b0d0c #3c4842;color:var(--ink)}
button.c:disabled{opacity:.35;cursor:default}
@media (pointer:coarse){button.c.ic.touch-only{display:flex}button.c.ic::before{display:none}}
button.c,#zoom button{font-family:var(--f-ui);font-size:12px;white-space:nowrap;overflow:hidden;color:var(--ink);background:#232a26;border:1px solid var(--edge);border-radius:2px;padding:6px 2px;cursor:pointer}
button.c:hover,#zoom button:hover{background:#2c3530}
button.c[aria-pressed="true"]{background:var(--frame);border-color:var(--frame-hi);color:#fff}
button.c kbd{display:none;font-family:var(--f-data);font-size:10px;color:var(--mute);margin-left:2px}
#info{min-height:40px;font-size:12px;color:var(--mute);border-top:1px solid var(--edge);padding-top:6px;line-height:1.5}
#info b{color:var(--ink);font-weight:600}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,rgba(40,10,8,.55),rgba(5,6,6,.9));z-index:5;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow-y:auto}
.card{width:min(560px,100%);background:rgba(18,21,19,.94);border:1px solid var(--edge);border-top:3px solid var(--soviet);padding:22px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);margin:auto}
.eyebrow{font-family:var(--f-label);letter-spacing:.3em;font-size:12px;color:var(--brass)}
.card h1,.card h2{margin:0;font-family:var(--f-title);font-weight:400;font-size:clamp(44px,9vw,68px);line-height:1;color:var(--soviet);text-shadow:0 2px 0 #3a0c08,0 0 30px rgba(208,57,44,.35);text-wrap:balance}
.lede{margin:0;line-height:1.6;color:var(--ink);max-width:46ch}
.diff{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.diff button{display:flex;flex-direction:column;gap:2px;align-items:flex-start;background:#1e2421;border:1px solid var(--edge);color:var(--ink);padding:8px 10px;border-radius:2px;cursor:pointer;font:inherit;text-align:left}
.diff button b{font-weight:600}
.toprow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.langbtn{font-family:var(--f-data);font-size:12px;color:var(--ink);background:#232a26;border:1px solid var(--edge);border-radius:2px;padding:4px 10px;cursor:pointer}
.langbtn:hover{background:#2c3530}
:root[lang="en"] .card h1,:root[lang="en"] .card h2{font-family:var(--f-label);font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.diff button span{font-size:11px;color:var(--mute)}
.diff button[aria-checked="true"]{border-color:var(--soviet);background:#2a1513}
.go{font-family:var(--f-ui);font-size:17px;letter-spacing:.3em;font-weight:700;color:#fff;background:var(--soviet);border:0;padding:12px;border-radius:2px;cursor:pointer;box-shadow:inset 0 -3px 0 var(--soviet-deep)}
.go:hover{filter:brightness(1.1)}
.resume{font-family:var(--f-ui);font-size:14px;letter-spacing:.1em;color:var(--ink);background:#1e2421;border:1px solid var(--soviet);padding:10px;border-radius:2px;cursor:pointer}
.resume:hover{background:#2a1513}
.help{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12px;color:var(--mute);border-top:1px solid var(--edge);padding-top:12px}
.help kbd{font-family:var(--f-data);color:var(--ink);font-size:12px}
.mp{display:flex;flex-direction:column;gap:8px;border:1px solid var(--edge);background:#141816;padding:12px}
.mphead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;font-family:var(--f-label);font-weight:600;letter-spacing:.12em;color:var(--brass)}
.mphead small{font-family:var(--f-ui);font-weight:400;letter-spacing:0;font-size:11px;color:var(--mute)}
.mprow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px}
.mpbtn{font-family:var(--f-ui);font-size:13px;color:var(--ink);background:#232a26;border:1px solid var(--edge);border-radius:2px;padding:7px 12px;cursor:pointer}
.mpbtn:hover:not(:disabled){background:#2c3530}.mpbtn:disabled{opacity:.45;cursor:default}
#mpCode{min-width:0;font-family:var(--f-data);font-size:16px;letter-spacing:.3em;text-transform:uppercase;text-align:center;color:var(--ink);background:#0c0e0d;border:1px solid var(--edge);border-radius:2px;padding:6px}
#mpCode:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.mpstatus{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:20px;font-family:var(--f-data);font-size:13px;color:var(--ink)}
.mpstatus .bad,#mpStatus.bad{color:var(--bad)}
.mpshare{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.codechip{font-family:var(--f-data);font-size:30px;letter-spacing:.3em;padding:4px 6px 4px 14px;color:var(--brass);background:#0c0e0d;border:1px dashed var(--brass);border-radius:2px;cursor:copy;-webkit-user-select:all;user-select:all}
.codechip:hover{background:#17140b}.codechip.copied{border-style:solid;color:var(--ok);border-color:var(--ok)}
.sharebtns{display:flex;flex-wrap:wrap;gap:6px}
.mpoff{margin:0;font-size:12px;color:var(--mute)}.mpoff a{color:var(--brass)}
.camplist{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.campbtn{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 10px;align-items:baseline;text-align:left;font:inherit;color:var(--ink);background:#1e2421;border:1px solid var(--edge);border-radius:2px;padding:8px 10px;cursor:pointer}
.campbtn:hover:not(:disabled){border-color:var(--soviet);background:#2a1513}.campbtn:disabled{opacity:.45;cursor:default}
.campbtn .cn{grid-row:span 2;font-family:var(--f-data);font-size:20px;color:var(--brass)}.campbtn .ct{font-weight:600}.campbtn .cs{font-size:11px;color:var(--mute)}
.objs{border-top:1px solid var(--edge);padding-top:10px}.objhead{font-family:var(--f-label);font-weight:600;letter-spacing:.14em;color:var(--brass);font-size:13px}
.objs ul{margin:6px 0 0;padding-left:20px;line-height:1.7}
.bfrow{display:grid;grid-template-columns:1fr auto;gap:8px}
#obj{position:absolute;left:10px;top:34px;max-width:min(340px,70%);display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink);background:rgba(10,12,11,.72);border:1px solid var(--edge);padding:6px 10px;pointer-events:none;line-height:1.5}
#obj b{font-family:var(--f-label);letter-spacing:.14em;color:var(--brass);font-weight:600}#obj .done{color:var(--ok)}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-family:var(--f-data);font-size:20px}
.statgrid div{display:flex;flex-direction:column;gap:2px;background:#0d100f;border:1px solid var(--edge);padding:8px}
.statgrid small{font-family:var(--f-ui);font-size:11px;color:var(--mute)}
#pausetag{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-family:var(--f-title);font-size:42px;color:var(--brass);text-shadow:0 2px 8px #000;pointer-events:none}
.touch-only{display:none}
@media (pointer:coarse){.touch-only{display:block}}
@media (max-width:760px){
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 44%}
  #side{border-left:0;border-top:2px solid var(--edge);padding:8px max(12px,env(safe-area-inset-left,0px)) 8px max(12px,env(safe-area-inset-right,0px))}
  #side{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"mini credits" "mini tools" "mini tabs" "bay bay" "cmds cmds" "cmd2 cmd2" "info info";align-content:start;gap:6px 8px}
  #mini{grid-area:mini;width:112px}
  .credits{grid-area:credits;font-size:18px}
  .tools{grid-area:tools}.tabs{grid-area:tabs}.bay{grid-area:bay;min-height:auto}.cmds{grid-area:cmds}.cmds.txt{grid-area:cmd2}#info{grid-area:info}
  .grid{grid-template-columns:repeat(3,1fr)}
  .help{display:none}
}
@media (prefers-reduced-motion:reduce){.item.ready .bd,.tab.ready{animation:none}}
#mpJoin.pulse{border-color:var(--brass);color:var(--brass)}
.facpick,.mappick{grid-template-columns:repeat(2,1fr)}
.facpick button[data-f="all"][aria-checked="true"]{border-color:var(--ally);background:#121c2c}
.todpick{grid-template-columns:repeat(4,1fr)}
.todpick button{align-items:center}