:root{--glass: #0d131b;--glass-2: #131b25;--line: rgba(255, 255, 255, .09);--line-2: rgba(255, 255, 255, .16);--text: #e9eff5;--dim: #8fa1b3;--blue: #5ab2ff;--amber: #ffc25e;--green: #62e293;--red: #ff6457}html,body{margin:0;padding:0;overflow:hidden;background:#07101c;height:100%}#app{width:100vw;height:100vh}canvas{display:block}#selection-box{position:absolute;border:1px solid rgba(120,220,130,.9);background:#78dc821f;pointer-events:none;display:none;z-index:5}#hud-root{font-family:Rajdhani,sans-serif;color:var(--text);-webkit-user-select:none;user-select:none;cursor:default}#hud-root .num{font-family:Share Tech Mono,monospace}.glass{background:var(--glass);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px #00000059,inset 0 1px #ffffff12}.panel-label{position:absolute;top:9px;right:12px;font-size:9px;font-weight:700;letter-spacing:.3em;color:#8fa1b38c;pointer-events:none}.lbl{font-size:10px;font-weight:700;letter-spacing:.26em;color:var(--dim)}#topbar{position:fixed;top:0;left:0;right:0;height:42px;z-index:25;display:flex;align-items:center;padding:0 16px;border-radius:0;border:none;border-bottom:1px solid var(--line-2)}.tb-seg{display:flex;align-items:center;gap:10px;padding:0 16px;height:26px}.tb-seg+.tb-seg{border-left:1px solid var(--line)}#logo{display:flex;align-items:center;gap:10px}#logo .name{font-size:16px;font-weight:700;letter-spacing:.22em}#logo .name b{color:var(--blue);font-weight:700}.tb-val{font-size:17px;font-weight:600}#credits-val{color:var(--amber);text-shadow:0 0 16px rgba(255,194,94,.35);font-size:18px}#credits .rate{font-size:11px;color:var(--green);opacity:.9}#supply-val,#buildings-val{font-size:18px;font-weight:600}#supply-val.full,#buildings-val.full{color:var(--red, #e0533d);text-shadow:0 0 16px rgba(224,83,61,.4)}.pips{display:flex;gap:5px}.pip{width:10px;height:10px;transform:rotate(45deg);border-radius:2px;background:#ffffff1a;border:1px solid var(--line-2)}.pip.on{background:linear-gradient(135deg,#8fd0ff,#2e7cc2);border-color:transparent;box-shadow:0 0 8px #5ab2ff80}.pip.next{animation:pipblink 1.6s ease-in-out infinite}@keyframes pipblink{50%{background:#5ab2ff59}}#menu-btn{margin-left:auto;font-family:Rajdhani,sans-serif;font-size:12px;font-weight:700;letter-spacing:.26em;color:var(--text);padding:7px 20px 6px;cursor:pointer;border-radius:6px;background:#ffffff0f;border:1px solid var(--line-2);transition:all .15s}#menu-btn:hover{background:#5ab2ff26;border-color:var(--blue)}#events{position:fixed;left:14px;top:70px;z-index:15;display:flex;flex-direction:column;gap:5px;pointer-events:none}.evt{font-size:13px;font-weight:600;letter-spacing:.03em;color:#dce6ef;padding:4px 12px;background:#080c118c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:5px;border-left:2px solid var(--green);animation:evtin .35s ease both}.evt.warn{border-left-color:var(--red)}@keyframes evtin{0%{opacity:0;transform:translate(-12px)}to{opacity:1}}#minimap-wrap{position:fixed;top:52px;right:12px;width:190px;height:190px;padding:8px;z-index:20}#bottombar{position:fixed;left:12px;right:12px;bottom:12px;z-index:20;display:none;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}#bottombar.shown{display:flex}#selection,#commandcard{pointer-events:auto}#minimap-wrap .frame{position:relative;border-radius:5px;overflow:hidden;height:100%}#minimap-wrap canvas{display:block;width:100%;height:100%;image-rendering:pixelated}#minimap-wrap .tag{position:absolute;left:0;bottom:0;right:0;padding:2px 8px;font-size:8px;font-weight:700;letter-spacing:.26em;color:#b9e9ff;background:linear-gradient(to top,rgba(6,12,18,.85),transparent);pointer-events:none}#selection{flex:none;width:max-content;max-width:46vw;height:126px;padding:14px 18px 12px;display:flex;align-items:center;min-width:0;position:relative}.sel-state{display:none;gap:16px;align-items:center;min-width:0}.sel-state.sel-on{display:flex}.sel-empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.2em;color:#8fa1b373}.portrait{width:86px;height:86px;flex:none;position:relative;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 36%,#5ab2ff33,#0a1018d9 78%);border:1px solid var(--line-2)}.portrait:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}.portrait svg{width:46px;height:46px;stroke:var(--blue);filter:drop-shadow(0 0 10px rgba(90,178,255,.55))}.sel-name{font-size:20px;font-weight:700;letter-spacing:.14em;line-height:1.1}.sel-sub{font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--dim);white-space:nowrap;margin-top:1px}.hpbar{width:190px;height:7px;margin-top:9px;border-radius:4px;background:#0000008c;overflow:hidden}.hpbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(to right,#43c374,var(--green));box-shadow:0 0 10px #62e29380}.hp-num{font-size:11px;color:var(--dim);margin-top:4px}.hp-num b{color:var(--text);font-weight:400}.sel-divider{width:1px;align-self:stretch;margin:4px 2px;background:linear-gradient(to bottom,transparent,var(--line) 25%,var(--line) 75%,transparent);flex:none}.sel-aux{margin-left:28px;display:flex;flex-direction:column;gap:9px;align-items:flex-end;flex:none;padding-right:4px}.aux-line{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:7px}.aux-line b{color:var(--amber);font-family:Share Tech Mono,monospace;font-size:14px;font-weight:400}.aux-line.green b{color:var(--green)}.aux-line.warnline b{color:var(--red)}.keycap{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:4px;background:#5ab2ff24;border:1px solid rgba(90,178,255,.4);color:var(--blue);font-size:11px}.upg{min-width:180px}.upg .t{font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--amber)}.progress{height:7px;margin-top:7px;border-radius:4px;background:#0000008c;overflow:hidden}.progress i{display:block;height:100%;border-radius:4px;width:0%;background:linear-gradient(to right,#d99b3a,var(--amber));box-shadow:0 0 10px #ffc25e73}.upg .eta{font-size:11px;color:var(--dim);margin-top:4px}.upg .eta b{color:var(--text);font-weight:400}.group-grid{display:flex;gap:10px;align-items:center}.ugroup{width:74px;height:86px;position:relative;cursor:pointer;flex:none;border-radius:7px;background:var(--glass-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:all .15s}.ugroup:hover{border-color:var(--blue);background:#5ab2ff1a}.ugroup svg{width:30px;height:30px;stroke:var(--text)}.ugroup .cnt{position:absolute;top:4px;right:7px;font-size:12px;color:var(--blue)}.ugroup .ghp{width:50px;height:4px;border-radius:3px;background:#0000008c;overflow:hidden}.ugroup .ghp i{display:block;height:100%;background:var(--green)}.ugroup .ghp.low i{background:var(--amber)}.ugroup .tname{font-size:9px;font-weight:700;letter-spacing:.18em;color:var(--dim)}#ctrlgroups{position:fixed;left:12px;bottom:150px;z-index:21;display:flex;gap:8px;pointer-events:none}.cg-chip{pointer-events:auto;display:flex;align-items:center;gap:7px;height:30px;padding:0 10px 0 6px;border-radius:7px;cursor:pointer;background:var(--glass-2);border:1px solid var(--line);transition:all .12s}.cg-chip:hover{border-color:var(--blue);background:#5ab2ff1f}.cg-chip .cg-num{display:grid;place-items:center;min-width:20px;height:20px;border-radius:4px;background:#5ab2ff2e;border:1px solid rgba(90,178,255,.45);color:var(--blue);font-family:Share Tech Mono,monospace;font-size:13px}.cg-chip .cg-cnt{font-family:Share Tech Mono,monospace;font-size:13px;color:var(--text)}#commandcard{width:332px;flex:none;padding:14px;position:relative}.sec-lbl{font-size:9px;font-weight:700;letter-spacing:.28em;color:var(--dim);margin:0 2px 7px}.sec-lbl.mt{margin-top:11px}.btn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.cbtn{aspect-ratio:1;position:relative;cursor:pointer;border-radius:7px;overflow:hidden;background:var(--glass-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:all .14s}.cbtn svg{width:25px;height:25px;stroke:var(--text);transition:all .14s}.cbtn .bname{font-size:8px;font-weight:700;letter-spacing:.12em;color:var(--dim)}.cbtn .key{position:absolute;top:3px;left:6px;font-size:10px;color:var(--blue);opacity:.95;font-family:Share Tech Mono,monospace}.cbtn .cost{position:absolute;bottom:3px;right:6px;font-size:9px;color:var(--amber)}.cbtn:hover:not(.locked):not(.poor):not(.empty){border-color:var(--blue);background:#5ab2ff1f;box-shadow:0 0 16px #5ab2ff33}.cbtn:hover:not(.locked):not(.poor):not(.empty) svg{stroke:var(--blue)}.cbtn:active:not(.locked):not(.poor):not(.empty){transform:translateY(1px)}.cbtn.poor{opacity:.5;cursor:not-allowed}.cbtn.poor .cost{color:var(--red)}.cbtn.locked{cursor:not-allowed}.cbtn.locked svg,.cbtn.locked .bname,.cbtn.locked .cost,.cbtn.locked .key{opacity:.25}.cbtn.locked:after{content:"HQ L" attr(data-req);position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--amber);background:#080c118c}.cbtn.capped{cursor:not-allowed}.cbtn.capped svg,.cbtn.capped .bname,.cbtn.capped .cost,.cbtn.capped .key{opacity:.25}.cbtn.capped:after{content:"MAX";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--red, #e0533d);background:#080c118c}.cbtn.empty{background:#ffffff05;border-style:dashed;border-color:#ffffff0f;cursor:default}.cbtn.accent{border-color:#ffc25e73;background:#ffc25e14}.cbtn.accent svg{stroke:var(--amber)}.cbtn.accent:hover{border-color:var(--amber);background:#ffc25e29;box-shadow:0 0 16px #ffc25e38}.cbtn.accent:hover svg{stroke:var(--amber)}.cbtn.wide{grid-column:span 2;aspect-ratio:auto}.cbtn.placing{border-color:var(--green);background:#62e2931f;box-shadow:0 0 16px #62e29340}.cbtn.building .key,.cbtn.building .bname,.cbtn.building .cost{display:none}.cbtn.building svg{opacity:.45}.cbtn.building .clock{position:absolute;top:0;right:0;bottom:0;left:0;background:conic-gradient(transparent 0 var(--p),rgba(5,8,12,.72) var(--p) 100%)}.cbtn.building .pct{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);text-align:center;font-family:Share Tech Mono,monospace;font-size:15px;color:#fff;text-shadow:0 1px 3px #000}.cbtn.building .stat{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:8px;font-weight:700;letter-spacing:.24em;color:var(--green);animation:blink 1.1s steps(2) infinite}@keyframes blink{50%{opacity:.25}}.queue{display:flex;gap:6px;align-items:center}.qslot{width:30px;height:30px;position:relative;border-radius:5px;overflow:hidden;background:#0006;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}.qslot svg{width:17px;height:17px;stroke:var(--text);position:relative;z-index:1}.qslot .fill{position:absolute;left:0;right:0;bottom:0;background:#5ab2ff4d;height:0%}.qslot:hover:not(.qempty):after{content:"✕";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#a0281eb3;color:#ffd9d2;font-size:13px;z-index:2}.qslot.qempty{opacity:.3;cursor:default}.note{margin-top:11px;padding:8px 11px;border-radius:6px;background:#62e29312;border:1px solid rgba(98,226,147,.22);font-size:11px;font-weight:600;line-height:1.5;color:#b9dcc6}.note b{color:var(--green)}.note.plain{background:#ffffff0a;border-color:var(--line);color:var(--dim)}.note.plain b{color:var(--blue)}#mp-lobby{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:25;background:#07101cc7;color:#cfe3d0;font:13px/1.7 SF Mono,Menlo,monospace}.mp-panel{border:1px solid rgba(159,195,168,.35);padding:26px 30px;background:#0a1624f0;min-width:360px;box-shadow:0 8px 40px #0009}.mp-title{font-weight:700;font-size:15px;letter-spacing:1px;color:#9fc3a8;margin-bottom:10px}#mp-conn{opacity:.85;margin-bottom:14px}.mp-row{display:flex;gap:8px;margin:8px 0}.mp-panel input{flex:1;background:#0a1624;border:1px solid rgba(159,195,168,.4);color:#cfe3d0;font:13px SF Mono,Menlo,monospace;padding:7px 9px;outline:none;text-transform:none}.mp-panel input:focus{border-color:#9fc3a8}#mp-code{text-transform:uppercase;letter-spacing:3px;max-width:110px}.mp-panel button{background:#16301f;border:1px solid #5fa86f;color:#b9f0c4;cursor:pointer;font:700 12px SF Mono,Menlo,monospace;padding:7px 14px;letter-spacing:1px}.mp-panel button:hover:not(:disabled){background:#1e4029}.mp-panel button:disabled{opacity:.35;cursor:default}#mp-status{margin-top:12px;min-height:18px;color:#e8d28a}#mp-roster{margin-top:6px;min-height:22px;white-space:pre-line}#mp-start{display:none;width:100%;margin-top:12px;padding:10px;font-size:13px}#mp-retry{display:none;width:100%;margin-top:12px}.mp-err{color:#f28a8a}#main-menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;font-family:Rajdhani,sans-serif;color:var(--text);-webkit-user-select:none;user-select:none}.mm-vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(120% 90% at 26% 50%,#07101ceb,#07101c8c 42%,#07101c14 80%),linear-gradient(to top,rgba(7,16,28,.7),transparent 40%)}.mm-inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:34px;padding:0 8vw;max-width:560px}.mm-brand{display:flex;flex-direction:column;gap:6px}.mm-word{font-size:76px;font-weight:700;letter-spacing:.12em;line-height:.9;text-shadow:0 4px 30px rgba(0,0,0,.6)}.mm-word b{color:var(--blue)}.mm-stack{display:flex;flex-direction:column;gap:11px;max-width:360px}.mm-sub{font-size:11px;font-weight:700;letter-spacing:.3em;color:var(--dim);margin-bottom:2px}.mm-btn{text-align:left;font-family:Rajdhani,sans-serif;font-size:17px;font-weight:700;letter-spacing:.18em;color:var(--text);cursor:pointer;padding:14px 20px;border-radius:9px;background:#0d131bd1;border:1px solid var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .15s;display:flex;flex-direction:column}.mm-btn:hover{background:#5ab2ff29;border-color:var(--blue);transform:translate(4px)}.mm-btn.mm-primary{background:linear-gradient(135deg,#5ab2ff47,#1d5b9638);border-color:#5ab2ff99}.mm-btn.mm-primary:hover{background:linear-gradient(135deg,#5ab2ff66,#1d5b964d)}.mm-btn.mm-back{font-size:13px;letter-spacing:.26em;color:var(--dim);padding:10px 20px}.mm-diff{gap:2px}.mm-diff-n{font-size:17px;letter-spacing:.18em}.mm-diff-d{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--dim)}.mm-mapsel{display:flex;align-items:center;justify-content:space-between;max-width:360px;background:#0d131bd1;border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;margin-bottom:4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mm-mapname{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--text)}.mm-maponly{padding:10px 14px;margin-bottom:4px;background:#0d131bd1;border:1px solid var(--line-2);border-radius:9px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mm-mapnav{font-family:Rajdhani,sans-serif;font-size:20px;font-weight:700;color:var(--blue);cursor:pointer;background:#5ab2ff1a;border:1px solid var(--line-2);border-radius:6px;width:36px;height:32px;line-height:1;transition:all .15s}.mm-mapnav:hover{background:#5ab2ff38;border-color:var(--blue)}.mm-foot{position:absolute;left:8vw;bottom:26px;display:flex;gap:16px;align-items:baseline;font-family:Share Tech Mono,monospace;font-size:12px;color:var(--dim)}.mm-howto{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#07101ccc;z-index:2}.mm-howto.shown{display:flex}.mm-howto-panel{width:min(680px,90vw);max-height:84vh;overflow:auto;padding:26px 30px}.mm-howto-title{font-size:20px;font-weight:700;letter-spacing:.26em;color:var(--blue)}.mm-howto-aim{font-size:14px;font-weight:600;color:var(--text);margin:10px 0 20px;line-height:1.5}.mm-howto-grid{display:grid;grid-template-columns:130px 1fr;gap:11px 18px;align-items:baseline}.mm-ctl-k{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--amber);text-align:right}.mm-ctl-v{font-size:13px;font-weight:600;color:var(--dim);line-height:1.4}.mm-howto .mm-back{margin-top:22px;width:140px;text-align:center;align-items:center}#game-over{position:absolute;top:0;right:0;bottom:0;left:0;z-index:45;display:flex;align-items:center;justify-content:center;background:#07101c9e;font-family:Rajdhani,sans-serif;animation:goFade .5s ease both}@keyframes goFade{0%{opacity:0}}.go-panel{padding:40px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.go-result{font-size:64px;font-weight:700;letter-spacing:.14em;text-shadow:0 3px 24px rgba(0,0,0,.7)}.go-sub{font-size:14px;font-weight:700;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}.go-actions{display:flex;gap:12px;margin-top:24px}.go-btn{font-family:Rajdhani,sans-serif;font-size:15px;font-weight:700;letter-spacing:.2em;color:var(--text);cursor:pointer;padding:12px 28px;border-radius:8px;background:#ffffff0f;border:1px solid var(--line-2);transition:all .15s}.go-btn:hover{background:#5ab2ff29;border-color:var(--blue)}.go-btn.go-primary{background:linear-gradient(135deg,#5ab2ff4d,#1d5b963d);border-color:#5ab2ff99}.go-btn.go-primary:hover{background:linear-gradient(135deg,#5ab2ff6b,#1d5b9652)}#tut-overlay{position:fixed;left:0;right:0;bottom:152px;z-index:24;display:flex;justify-content:center;pointer-events:none;font-family:Rajdhani,sans-serif}.tut-box{pointer-events:auto;max-width:560px;background:#080c11e6;border:1px solid rgba(90,178,255,.5);border-radius:10px;padding:16px 22px;box-shadow:0 12px 40px #00000080;text-align:center;animation:evtin .35s ease both}.tut-step{font-size:10px;font-weight:700;letter-spacing:.3em;color:var(--blue);margin-bottom:6px}.tut-text{font-size:15px;font-weight:600;color:var(--text);line-height:1.5}.tut-skip{margin-top:12px;font-family:Rajdhani,sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--dim);background:#ffffff0f;border:1px solid var(--line-2);border-radius:6px;padding:6px 14px;cursor:pointer}.tut-skip:hover{color:var(--text);border-color:var(--blue)}.objective-toast{position:fixed;top:64px;left:50%;transform:translate(-50%);z-index:22;font-family:Rajdhani,sans-serif;font-weight:700;letter-spacing:.24em;font-size:15px;color:var(--amber);background:#080c11b8;border:1px solid rgba(255,194,94,.4);border-radius:6px;padding:9px 22px;pointer-events:none;transition:opacity 1s ease;text-shadow:0 2px 8px #000;animation:evtin .4s ease both}#mp-menu,#kb-menu{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;z-index:60;background:#07101c99;color:#cfe3d0;font:13px/1.7 SF Mono,Menlo,monospace}#kb-menu{z-index:61}.kb-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:7px 0}.kb-row span{font-size:12px;letter-spacing:1px;color:#9fc3a8}.kb-key{min-width:96px;background:#16301f;border:1px solid #5fa86f;color:#b9f0c4;cursor:pointer;font:700 12px SF Mono,Menlo,monospace;padding:6px 10px}.kb-key:hover{background:#1e4029}.mp-vol{display:flex;align-items:center;gap:10px;margin:10px 0}.mp-vol label{width:110px;font-size:11px;letter-spacing:1px;color:#9fc3a8}.mp-vol input{flex:1;accent-color:#5fa86f}.mp-vol .mp-pct{width:42px;text-align:right}.mp-vol select{flex:1;background:#0a1624;border:1px solid rgba(159,195,168,.4);color:#cfe3d0;font:13px SF Mono,Menlo,monospace;padding:6px 8px;outline:none;cursor:pointer}.mp-vol select:focus{border-color:#9fc3a8}.mp-vol input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;accent-color:#5fa86f;margin-left:auto;cursor:pointer}