:root{color-scheme:dark;--bg: #1a1408;--panel: rgba(22, 18, 10, .94);--panel-strong: rgba(16, 12, 6, .96);--hud-bg: rgba(28, 22, 12, .97);--hud-border: rgba(160, 130, 70, .4);--line: rgba(160, 130, 70, .25);--line-strong: rgba(218, 180, 90, .7);--text: #f0e8d8;--muted: #a89878;--alloy: #d4a843;--power: #5aad4a;--player: #4a9edc;--enemy: #cc5544;--accent: #dab45a;--danger: #cc4433;--success: #6ab85a;--shadow: 0 12px 32px rgba(0, 0, 0, .5);--hud-height: 260px;--topbar-height: 48px;font-family:IBM Plex Sans,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;background:#12100a;color:var(--text);overflow:hidden}body{font-family:IBM Plex Sans,system-ui,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.swarmfront-shell{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}.top-bar{flex:0 0 var(--topbar-height);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;background:var(--hud-bg);border-bottom:1px solid var(--hud-border);z-index:3}.resource-strip{display:flex;gap:16px;align-items:center}.resource-strip span{display:flex;align-items:center;gap:4px;font-size:1rem;padding:0;border:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.resource-strip span strong{color:var(--muted);font-weight:600;font-size:.88rem;text-transform:uppercase;letter-spacing:.06em}.resource-value{font-variant-numeric:tabular-nums}.top-bar-right{display:flex;align-items:center;gap:8px}.top-bar-right button{padding:6px 14px;font-size:.85rem;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted)}.top-bar-right button:hover{border-color:var(--line-strong);color:var(--text)}.viewport{flex:1 1 0;position:relative;overflow:hidden}.battlefield{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.scanline{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 3px);mix-blend-mode:soft-light;opacity:.18}.bottom-hud{flex:0 0 var(--hud-height);display:grid;grid-template-columns:250px 1fr 300px;background:linear-gradient(180deg,#241c0efa,#120e06fc);border-top:3px solid rgba(180,150,80,.5);box-shadow:inset 0 1px #ffdc781f,inset 0 -1px #0006,0 -4px 16px #00000080;z-index:3}.hud-left{display:flex;flex-direction:column;border-right:1px solid rgba(120,100,55,.35);padding:8px 10px;gap:8px}.minimap-frame{position:relative;border:2px solid rgba(160,130,70,.55);border-radius:3px;box-shadow:inset 0 0 6px #0009,0 1px #ffdc781a;background:#0a0e06}.minimap{width:100%;aspect-ratio:16 / 10;display:block;cursor:pointer;border-radius:2px}.quick-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.group-btn{padding:4px;font-size:.8rem;text-align:center;border-radius:3px;border:1px solid rgba(120,100,55,.4);background:linear-gradient(180deg,#282012e6,#161008e6);color:var(--muted);cursor:pointer;min-height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:inset 0 1px #ffdc780f}.group-btn strong{font-size:.8rem;color:var(--text)}.group-btn .hotkey{font-size:.7rem;color:var(--accent);letter-spacing:.08em}.group-btn:hover{border-color:var(--line-strong);background:linear-gradient(180deg,#372d19f2,#231c0cf2)}.hud-center{display:flex;flex-direction:row;padding:6px 10px;gap:10px;overflow:hidden}.portrait-frame{flex:0 0 auto;width:120px;display:flex;flex-direction:column;align-items:center;gap:4px}.portrait-box{width:110px;height:110px;border:2px solid rgba(160,130,70,.55);border-radius:4px;background:linear-gradient(135deg,#141008f2,#1e180cf2);box-shadow:inset 0 0 8px #0009,0 1px #ffdc7814;display:flex;align-items:center;justify-content:center;overflow:hidden;image-rendering:pixelated}.portrait-box img{width:88px;height:88px;object-fit:contain;image-rendering:pixelated}.portrait-box .portrait-icon{font-size:1.6rem;color:var(--muted);line-height:1}.portrait-name{font-size:.95rem;font-weight:600;color:var(--text);text-align:center;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.portrait-hp-bar{width:100%;height:8px;border-radius:2px;background:#141008d9;border:1px solid rgba(100,80,40,.3);overflow:hidden}.portrait-hp-fill{height:100%;transition:width .15s linear;border-radius:1px}.portrait-hp-fill.hp-green{background:linear-gradient(90deg,#4a9a4a,#6ab85a)}.portrait-hp-fill.hp-yellow{background:linear-gradient(90deg,#b8a030,#d4a843)}.portrait-hp-fill.hp-red{background:linear-gradient(90deg,#a83030,#c43)}.info-column{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-width:0}.hud-center-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.hud-center-header h3{margin:0;font-size:1.1rem;font-weight:600}.hud-center-header .score-line{color:var(--muted);font-size:.85rem}.overview-row{display:flex;gap:12px}.overview-stat{display:flex;align-items:center;gap:4px;font-size:.92rem}.overview-stat .label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}.overview-stat .value{color:var(--text);font-weight:600}.selection-list{display:flex;flex-wrap:wrap;gap:4px;overflow-y:auto}.selection-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:4px;border:1px solid var(--line);background:#18120abf;font-size:.88rem;white-space:nowrap;transition:border-color .15s,background .15s}.selection-chip:hover{border-color:var(--line-strong);background:#241c0ed9}.selection-chip .hp{color:var(--muted);font-size:.82rem}.empty-hint{color:var(--muted);font-size:.88rem;font-style:italic}.alerts-row{display:flex;gap:6px;flex-wrap:wrap}.alert-chip{padding:5px 10px;border-radius:4px;border:1px solid rgba(255,95,95,.3);background:#280a0a99;font-size:.88rem;color:var(--danger);transition:border-color .15s,background .15s}.alert-chip:hover{border-color:#ff5f5f80;background:#320e0eb3}.alert-chip.quiet{border-color:var(--line);background:#18120a8c;color:var(--muted)}.alert-chip.quiet:hover{border-color:var(--line-strong);background:#241c0eb3}.hud-right{display:flex;flex-direction:column;border-left:1px solid rgba(120,100,55,.35);padding:6px 8px;gap:4px}.command-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.15em;margin:0 0 2px 2px}.command-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1}.cmd-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;border-radius:6px;border:2px solid rgba(120,100,55,.4);background:linear-gradient(180deg,#2c2414f2,#161008f2);color:var(--text);text-align:center;cursor:pointer;min-height:72px;position:relative;box-shadow:inset 0 1px #ffdc7814,0 2px 4px #0000004d}.cmd-btn .cmd-icon{width:36px;height:36px;image-rendering:pixelated;opacity:.9}.cmd-btn strong{font-size:.88rem;line-height:1.15}.cmd-btn .cost{font-size:.75rem;color:var(--alloy);font-style:normal}.cmd-btn .hotkey-badge{position:absolute;top:2px;right:3px;font-size:.7rem;color:var(--accent);font-weight:700;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.8)}.cmd-btn:hover:not(:disabled){border-color:#dab45a99;background:linear-gradient(180deg,#3c301cf2,#241c0ef2);box-shadow:inset 0 1px #ffdc7826,0 2px 8px #dab45a26}.cmd-btn:active:not(:disabled){transform:scale(.96);box-shadow:inset 0 2px 4px #0006}.cmd-btn:disabled{opacity:.35;cursor:not-allowed}.cmd-empty{display:flex;align-items:center;justify-content:center;grid-column:1 / -1;grid-row:1 / -1;color:var(--muted);font-size:.88rem;text-align:center;padding:8px;font-style:italic}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:24px;background:#0a0804bf}.gate-card,.state-card,.rotate-card{width:min(580px,100%);padding:28px;border-radius:16px;display:flex;flex-direction:column;gap:16px;background:var(--panel-strong);border:1px solid var(--hud-border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow)}.gate-card h2,.state-card h2,.rotate-card h2{margin:0;font-family:JetBrains Mono,Courier New,monospace;letter-spacing:.08em;text-transform:uppercase}.eyebrow{margin:0 0 6px;color:var(--muted);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}.gate-grid,.stats-grid{display:flex;gap:12px;flex-wrap:wrap}.gate-grid>div,.stats-grid>span{flex:1 1 180px;padding:12px;border-radius:10px;border:1px solid var(--line);background:#18120ac7}.stats-grid.detailed{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat-row{display:flex;justify-content:space-between;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:#18120a99}.stat-label{color:var(--muted);font-size:.82rem}.stat-value{font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums}.footer-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center}.gate-biome{display:flex;align-items:center;gap:10px;padding:8px 0}.gate-biome select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding:8px 32px 8px 12px;border-radius:6px;border:1px solid var(--line);background:#18120ad9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a89878'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--text);font-size:.85rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}.gate-biome select:hover{border-color:var(--line-strong)}.gate-biome select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #dab45a33}.gate-biome select option{background:#1a1408;color:var(--text);padding:6px 10px}.ghost-button,.launch-button{padding:10px 16px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(180deg,#241c0eeb,#141008f0);color:var(--text);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow)}.ghost-button:hover{border-color:var(--line-strong);background:linear-gradient(180deg,#372d19f5,#231c0cf5)}.ghost-button:active{transform:scale(.97)}.personal-best{color:var(--accent);font-size:.82rem}.launch-button{background:linear-gradient(135deg,#dab45ae6,#8c6e28eb);color:#1a1408;font-weight:700;border-color:#dab45a99}.launch-button:hover{filter:brightness(1.1)}.launch-button:active{transform:scale(.97);filter:brightness(.95)}.muted{color:var(--muted)}.quiet{opacity:.66}.build-queue{display:flex;flex-direction:column;gap:4px;margin-top:4px}.queue-progress{position:relative;height:16px;border-radius:4px;border:1px solid var(--line);background:#18120acc;overflow:hidden}.queue-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,var(--power),rgba(90,173,74,.6));transition:width .1s linear}.queue-label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:.82rem;color:var(--text)}.queue-pending{display:flex;gap:4px;flex-wrap:wrap}.queue-chip{padding:4px 8px;border-radius:3px;border:1px solid var(--line);background:#18120a99;font-size:.8rem;color:var(--muted);transition:border-color .15s}.queue-chip:hover{border-color:var(--line-strong);background:#241c0eb3}.hp-green{color:var(--success)}.hp-yellow{color:var(--alloy)}.hp-red{color:var(--danger)}.unit-stats-row{display:flex;gap:8px;margin-top:2px}.stat-chip{display:flex;align-items:center;gap:3px;font-size:.92rem;color:var(--text)}.stat-chip .stat-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}.speed-controls{display:flex;gap:2px}.speed-controls button{padding:3px 6px;font-size:.65rem;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--muted);min-width:24px}.speed-controls button:hover{border-color:var(--line-strong);color:var(--text)}.speed-active{background:#dab45a26!important;border-color:var(--accent)!important;color:var(--accent)!important}.idle-alert{border-color:#dab45a66}@keyframes supply-pulse{0%,to{color:var(--text)}50%{color:var(--danger)}}.supply-full{animation:supply-pulse 1.5s ease-in-out infinite}.supply-warning{animation:supply-warn-pulse 1s ease-in-out infinite;color:#d4a843}@keyframes supply-warn-pulse{0%,to{opacity:1}50%{opacity:.5;color:#e8a020}}.income-rate{font-size:.72rem;color:var(--success);margin-left:4px}.income-rate.negative{color:var(--danger)}.gatherer-count{font-size:.72rem;color:var(--muted);margin-left:2px}.idle-badge{background:var(--danger);color:#fff;border-radius:50%;font-size:.65rem;padding:1px 5px;margin-left:4px;font-weight:700}.group-btn[data-testid=quick-idle]{grid-column:1 / -1;flex-direction:row;gap:4px;min-height:28px;padding:3px 8px}.group-btn.has-idle{border-color:var(--alloy);box-shadow:0 0 6px #d4a8434d}.hud-tabs-shell{display:flex;justify-content:space-between;gap:12px;padding:6px 10px 0}.hud-tabs{display:flex;gap:6px}.hud-tab{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#18120ad1;color:var(--muted);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}.battlefield.attack-move-mode{cursor:crosshair}@media(max-width:900px){:root{--hud-height: 220px}.bottom-hud{grid-template-columns:200px 1fr 260px}.portrait-box{width:90px;height:90px}.portrait-frame{width:100px}.command-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){:root{--hud-height: 180px}.bottom-hud{grid-template-columns:160px 1fr 200px}.quick-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.portrait-frame{display:none}.hud-tabs-shell{padding:4px 10px 0}.hud-center-header h3{font-size:.75rem}.command-grid{grid-template-columns:repeat(2,1fr)}.cmd-btn{padding:3px 4px;min-height:38px}.stats-grid.detailed{grid-template-columns:1fr;gap:6px}.tutorial-banner{max-width:95%;padding:8px 14px;gap:8px}}@media(max-height:480px){:root{--hud-height: 160px;--topbar-height: 28px}.resource-strip span{font-size:.7rem}.quick-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.portrait-frame{display:none}.hud-tabs-shell{padding:4px 10px 0}}@media(max-width:480px){:root{--hud-height: 150px}.bottom-hud{grid-template-columns:130px 1fr 160px}.quick-groups,.portrait-frame{display:none}.cmd-btn strong{font-size:.55rem}.cmd-btn .cost{display:none}.stats-grid.detailed{grid-template-columns:1fr}.gate-card,.state-card{padding:18px;gap:12px}.gate-grid{flex-direction:column}}.tooltip-wrapper{position:relative}.game-tooltip{position:fixed;z-index:100;max-width:260px;padding:10px 14px;border-radius:8px;border:1px solid rgba(160,130,70,.5);background:#100c06f5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 24px #0009;color:var(--text);font-size:.82rem;pointer-events:none;opacity:0;transition:opacity .15s}.game-tooltip.visible{opacity:1}.game-tooltip .tt-title{font-weight:700;margin-bottom:4px;color:var(--accent, #dab45a)}.game-tooltip .tt-desc{color:var(--muted);font-size:.75rem;line-height:1.4;margin-bottom:4px}.game-tooltip .tt-cost{color:var(--alloy);font-size:.72rem}.game-tooltip .tt-hotkey{color:var(--accent);font-size:.68rem;font-weight:600}.tutorial-banner{position:absolute;top:var(--topbar-height);left:50%;transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:12px;padding:10px 20px;border-radius:0 0 12px 12px;border:1px solid rgba(160,130,70,.5);border-top:none;background:#100c06f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 16px #00000080;max-width:700px}.tutorial-step{flex-shrink:0;font-size:.78rem;font-weight:700;color:var(--accent, #dab45a);padding:3px 8px;border-radius:4px;background:#dab45a26}.tutorial-text{font-size:.88rem;color:var(--text);line-height:1.3}.tutorial-skip{flex-shrink:0;padding:4px 12px;font-size:.72rem;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}.tutorial-skip:hover{border-color:var(--line-strong);color:var(--text)}.tutorial-complete{color:var(--success);font-weight:700}.defeat-desaturate{animation:defeatDesaturate 2s ease-out forwards}@keyframes defeatDesaturate{0%{filter:saturate(1)}to{filter:saturate(.15)}}