:root{--bg: #dfe7f3;--panel: #f7f9fc;--panel-2: #e8eef7;--stage: #cfd9e8;--line: #8093b2;--line-hot: #bd8408;--fg: #101827;--muted: #53647e;--gold: #8b6508;--accent: #0647b8;--accent-line: #1b62d4;--ok: #16803d;--control: #f8fafc;--control-raised: #dfe8f5;--status-bg: rgba(248, 250, 252, .9);--deck-shadow: 0 -10px 32px rgba(26, 42, 68, .16);--scanline: rgba(26, 58, 101, .05);color-scheme:light}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{--bg: #050912;--panel: #0c1422;--panel-2: #111e32;--stage: #03060b;--line: #2e4264;--line-hot: #e2b94d;--fg: #ecf3ff;--muted: #91a4c5;--gold: #f0d27a;--accent: #1856c9;--accent-line: #3676e4;--ok: #4ade80;--control: #0a1220;--control-raised: #13223a;--status-bg: rgba(5, 9, 18, .88);--deck-shadow: 0 -12px 38px rgba(0, 0, 0, .5);--scanline: rgba(110, 166, 238, .035);color-scheme:dark}*{box-sizing:border-box}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html,body{min-width:0;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--fg);font:12px/1.35 Trebuchet MS,system-ui,sans-serif}button,select,input{min-height:30px;border:1px solid var(--accent-line);border-radius:3px;background:var(--accent);color:#fff;font:inherit}button{padding:5px 9px;cursor:pointer;letter-spacing:.025em}button:hover:not(:disabled){border-color:var(--gold);filter:brightness(1.08)}button:disabled{cursor:default;opacity:.42}button.ghost{border-color:var(--line);background:var(--control);color:var(--fg)}button.active{border-color:var(--ok);background:var(--ok);color:#041b0c;font-weight:700}select,input{width:100%;padding:4px 7px;border-color:var(--line);background:var(--control);color:var(--fg)}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex="-1"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}kbd{color:var(--gold);font:9px/1 ui-monospace,monospace;opacity:.9}#app{display:grid;grid-template-rows:42px minmax(0,1fr) 258px;width:100%;height:100%;height:100dvh;min-height:0;overflow:hidden}#top-hud{z-index:4;display:grid;grid-template-columns:minmax(240px,auto) minmax(0,1fr) auto;align-items:center;min-width:0;padding:5px 8px 5px 12px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 96%,var(--gold) 4%),var(--panel-2));box-shadow:0 5px 18px #00000029}#brand-lockup{display:flex;align-items:baseline;min-width:0;gap:8px;text-transform:uppercase;white-space:nowrap}.brand-mark{color:var(--gold);font-size:14px;font-weight:900;letter-spacing:.15em}.brand-title{font-size:12px;font-weight:800;letter-spacing:.12em}.brand-mode{color:var(--muted);font:9px/1 ui-monospace,monospace;letter-spacing:.1em}#status{min-width:0;padding:0 14px;overflow:hidden;color:var(--gold);font:10px/1.2 ui-monospace,monospace;text-align:center;text-overflow:ellipsis;white-space:nowrap}#hud-actions{display:flex;gap:5px}button.hud-button{min-height:28px;padding:3px 9px;font-size:10px;text-transform:uppercase}button.hud-button kbd{margin-left:3px}#stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--stage)}#battlefield-frame{width:100%;height:100%}canvas#view{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;user-select:none}#phone-controls{display:none}#stage:after{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,var(--scanline) 4px);content:"";pointer-events:none}.corner{position:absolute;z-index:2;width:22px;height:22px;border-color:var(--gold);pointer-events:none;opacity:.72}.corner-nw{top:9px;left:9px;border-top:2px solid;border-left:2px solid}.corner-ne{top:9px;right:9px;border-top:2px solid;border-right:2px solid}.corner-sw{bottom:9px;left:9px;border-bottom:2px solid;border-left:2px solid}.corner-se{right:9px;bottom:9px;border-right:2px solid;border-bottom:2px solid}#sidebar{z-index:3;display:grid;grid-template-columns:150px 130px 230px minmax(280px,1fr) 150px 240px;grid-template-rows:102px minmax(0,1fr) 20px;gap:6px;min-width:0;min-height:0;padding:7px 8px max(5px,env(safe-area-inset-bottom));overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel-2));box-shadow:var(--deck-shadow);scrollbar-color:var(--line) transparent;scrollbar-width:thin}.deck-panel{grid-row:2;position:relative;min-width:0;min-height:0;padding:26px 7px 7px;overflow:auto;border:1px solid var(--line);border-radius:3px;background:linear-gradient(135deg,color-mix(in srgb,var(--control) 94%,transparent),var(--panel-2))}.deck-panel:after{position:absolute;top:20px;right:7px;width:22px;border-top:1px solid var(--gold);content:"";opacity:.5}.deck-panel h2{position:absolute;top:0;left:0;margin:0;padding:5px 28px 4px 8px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 100%,0 100%);background:var(--control-raised);color:var(--fg);font-size:9px;letter-spacing:.17em;text-transform:uppercase}.deck-panel h2 span{margin-right:5px;color:var(--gold);font:8px/1 ui-monospace,monospace}.minimap-panel{display:grid;grid-template-rows:minmax(0,1fr) 18px;gap:4px}#minimap{display:block;width:100%;height:100%;min-height:0;border:1px solid var(--line);border-radius:2px;background:#07110d;object-fit:fill}.readout{margin:0;overflow:hidden;color:var(--gold);font:9px/18px ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap}.button-strip{display:flex;flex-wrap:wrap;gap:5px}.button-strip>button{flex:1 1 100%}.blurb{margin:6px 0 0;color:var(--muted);font-size:9px;line-height:1.35}.selection-layout{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px;height:100%;min-height:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-height:0}button.mini{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:0;padding:4px 6px;overflow:hidden;border-color:var(--line);background:var(--control-raised);color:var(--fg);font-size:9px;text-align:left}.chips{display:flex;flex-direction:column;gap:3px;overflow-y:auto}.chip{padding:2px;border-radius:2px;background:var(--ok);color:#041b0c;font:9px/1.2 ui-monospace,monospace;text-align:center}.build-panel{overflow-y:auto}.production-layout{display:grid;grid-template-columns:minmax(250px,1.1fr) minmax(220px,1fr) minmax(250px,1fr);gap:8px;min-width:760px}.production-group{display:grid;align-content:start;gap:4px}.production-group>strong{color:var(--muted);font:8px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}.build-grid{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:5px}.production-group .build-grid{grid-template-columns:repeat(3,minmax(72px,1fr))}.build-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:47px;padding:5px 7px;overflow:hidden;border-color:var(--line);background:var(--control-raised);color:var(--fg);font-size:9px;text-align:left;text-overflow:ellipsis}.build-btn small{color:var(--gold);font:9px/1.2 ui-monospace,monospace}.tech-tree{display:grid;grid-template-columns:repeat(2,minmax(100px,1fr));gap:4px;align-content:start}.tech-node{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 5px;min-width:0;padding:5px;border:1px solid var(--line);border-left:3px solid var(--muted);background:var(--control)}.tech-node>span{grid-row:1 / 3;color:var(--muted);font:800 8px/1 ui-monospace,monospace}.tech-node strong,.tech-node small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tech-node strong{font-size:9px}.tech-node small{color:var(--muted);font:8px/1.1 ui-monospace,monospace}.tech-node.ready{border-left-color:var(--gold)}.tech-node.built{border-left-color:var(--ok)}.tech-node.locked{opacity:.5}.commander-panel .button-strip{height:100%}.commander-panel button{min-height:48px}.match-panel{display:grid;grid-template-rows:1fr auto;gap:5px}.match-fields{display:grid;grid-template-columns:1fr 1fr 70px;gap:5px;min-width:0}.match-fields label{min-width:0;color:var(--muted);font-size:8px;letter-spacing:.09em;text-transform:uppercase}.match-fields select,.match-fields input{display:block;margin-top:2px;min-width:0;min-height:29px;padding:3px 5px;font-size:10px}#command-hints{grid-column:1 / -1;grid-row:3;display:flex;align-items:center;justify-content:center;gap:18px;min-width:max-content;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);color:var(--muted);font:8px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}#command-hints span:before{margin-right:5px;color:var(--gold);content:"◆";font-size:6px}#arsenal{grid-row:1;grid-column:1 / -1;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--control) 96%,var(--arsenal-primary, var(--accent)) 4%),var(--panel-2))}.arsenal-panel{display:grid;grid-template-columns:142px auto minmax(0,1fr);grid-template-rows:34px 1fr;height:100%;min-height:0;color:var(--fg)}.arsenal-header{grid-row:1;display:flex;align-items:center;gap:7px;min-width:0;padding:5px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.arsenal-faction-mark{width:7px;height:20px;flex:0 0 auto;box-shadow:0 0 14px color-mix(in srgb,var(--arsenal-primary) 72%,transparent)}.arsenal-faction-label{overflow:hidden;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.arsenal-level{margin-left:auto;color:var(--gold);font:8px/1 ui-monospace,monospace;white-space:nowrap}.arsenal-tabs,.arsenal-filters{display:flex;align-items:center;gap:4px;min-width:0;padding:4px;border-bottom:1px solid var(--line)}.arsenal-tabs{grid-row:1}.arsenal-filters{grid-row:1;overflow-x:auto}.arsenal-tab,.arsenal-filter{min-height:25px;padding:3px 8px;border-color:transparent;background:transparent;color:var(--muted);font:10px/1 ui-monospace,monospace;white-space:nowrap}.arsenal-tab[aria-selected=true],.arsenal-filter[aria-pressed=true]{border-color:var(--arsenal-primary);background:color-mix(in srgb,var(--arsenal-primary) 20%,var(--control));color:var(--fg)}.arsenal-viewport{grid-row:2;grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) 260px;min-height:0}.arsenal-strip{display:flex;gap:5px;min-width:0;padding:5px;overflow-x:auto;overflow-y:hidden;scrollbar-color:var(--arsenal-primary) transparent;scrollbar-width:thin}.arsenal-item{position:relative;display:grid;grid-template-columns:22px minmax(74px,1fr);grid-template-rows:1fr auto;width:122px;min-width:122px;min-height:48px;padding:4px 6px;overflow:hidden;border-color:var(--line);background:var(--control-raised);color:var(--fg);text-align:left}.arsenal-item[data-state=locked],.arsenal-item[data-state=cooldown]{opacity:.52}.arsenal-item[data-state=ready]{border-color:var(--arsenal-primary);box-shadow:inset 0 -2px var(--arsenal-primary)}.arsenal-item-icon{grid-row:1 / -1;display:grid;place-items:center;width:18px;height:18px;align-self:center;border:1px solid var(--arsenal-primary);clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);background:color-mix(in srgb,var(--arsenal-primary) 24%,var(--control));color:var(--arsenal-secondary);font:800 9px/1 ui-monospace,monospace}.arsenal-item-label{overflow:hidden;font-size:10px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.arsenal-item-badge{color:var(--gold);font:8px/1 ui-monospace,monospace}.arsenal-detail{display:flex;align-items:center;min-width:0;padding:7px 10px;overflow:hidden;border-left:1px solid var(--line);color:var(--muted);font:10px/1.35 ui-monospace,monospace;text-overflow:ellipsis}.arsenal-empty{margin:0;padding:12px;color:var(--muted);font:9px/1 ui-monospace,monospace}@media (max-width: 900px){#app{grid-template-rows:40px minmax(220px,1fr) 246px}#top-hud{grid-template-columns:auto minmax(0,1fr) auto}.brand-mode,button.hud-button kbd{display:none}#sidebar{grid-template-columns:164px 160px 270px 330px 178px 286px;grid-template-rows:96px minmax(0,1fr) 18px}.arsenal-panel{grid-template-columns:128px auto minmax(420px,1fr);min-width:850px}.arsenal-viewport{grid-template-columns:minmax(0,1fr) 210px}}@media (max-width: 720px){#app{grid-template-rows:38px minmax(180px,1fr) 236px}#top-hud{padding-right:max(5px,env(safe-area-inset-right));padding-left:max(7px,env(safe-area-inset-left))}.brand-title,#hud-actions #btn-restart{display:none}#status{padding:0 6px;text-align:left}button.hud-button{min-height:26px;padding:2px 7px}#sidebar{grid-template-columns:150px 150px 250px 300px 170px 270px;grid-template-rows:92px minmax(0,1fr) 16px;padding-right:max(7px,env(safe-area-inset-right));padding-left:max(7px,env(safe-area-inset-left));scroll-snap-type:x proximity}.deck-panel{scroll-snap-align:start}#command-hints{justify-content:flex-start;padding-left:7px}}@media (max-height: 560px) and (orientation: landscape){#app{grid-template-rows:36px minmax(150px,1fr) 220px}#sidebar{grid-template-rows:82px minmax(0,1fr)}#command-hints{display:none}.deck-panel{padding-top:24px}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}}@media (pointer: coarse){#command-hints{display:none}#phone-controls{position:absolute;z-index:5;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:5px;border:1px solid var(--line);border-radius:5px;background:color-mix(in srgb,var(--panel) 91%,transparent);box-shadow:0 8px 25px #00000059;backdrop-filter:blur(12px)}#phone-controls button{min-width:0;min-height:46px;padding:4px 2px;overflow:hidden;font-size:9px;text-overflow:ellipsis;text-transform:uppercase}.arsenal-tab,.arsenal-filter,button.hud-button{min-height:40px}.arsenal-item{min-height:52px}}@media (pointer: coarse) and (max-width: 560px){#phone-controls{grid-template-columns:repeat(3,1fr)}}