:root{color-scheme:dark;--fg: #f7efd9;--muted: #b9aa8d;--panel: rgba(30, 24, 18, .94);--panel-deep: #18130f;--panel-raised: #35291d;--panel-border: rgba(211, 174, 104, .32);--accent: #6ca3dd;--good: #78b65f;--bad: #d75942;--gold: #e6bd62;--brass: #a9782e;--wood-line: #59442f}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b0b14;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--fg)}#app{position:fixed;top:0;right:0;bottom:0;left:0;cursor:crosshair}#app canvas{display:block}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-user-select:none;user-select:none}#hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:0;min-height:48px;padding:0 12px;background:linear-gradient(180deg,#2a2117f7,#17120ef2);border-bottom:1px solid var(--brass);box-shadow:0 5px 18px #0a07046b;pointer-events:none}.hud-title{padding:0 18px 0 5px;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:16px;font-weight:800;letter-spacing:.1em;color:#f3d887;text-shadow:0 2px 2px #080604}.hud-spacer{flex:1}.hud-res{display:flex;gap:0;align-self:stretch}.hud-pill{display:flex;align-items:center;gap:7px;min-width:74px;padding:7px 13px;border:0;border-left:1px solid rgba(211,174,104,.22);border-radius:0;background:#fff5dc06;font-size:13px;font-variant-numeric:tabular-nums;box-shadow:none}.hud-icon{font-size:14px;filter:saturate(.82)}.hud-value{font-size:14px;font-weight:800}.hud-cap{color:var(--muted);font-size:12px}.hud-clock{color:var(--muted);justify-content:center}.hud-speed{color:var(--gold);font-weight:700;min-width:68px;justify-content:center}.hud-sound{pointer-events:auto;cursor:pointer;border-left:1px solid rgba(211,174,104,.22);font-size:13px}.hud-sound:hover{background:#e6bd621f}#hud-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;padding:0 14px 14px;pointer-events:none}.panel{pointer-events:auto;min-width:320px;max-width:560px;padding:15px 17px 16px;border-radius:8px;background:linear-gradient(180deg,rgba(255,243,214,.035),transparent 42%),var(--panel);border:1px solid var(--brass);box-shadow:0 12px 30px #08050380,inset 0 0 0 2px #ffe1a609}.panel-accent{border-color:#7395ba}.panel-head{font-size:12px;font-weight:700;letter-spacing:.14em;color:#d9c8a7;margin-bottom:11px;padding-bottom:8px;border-bottom:1px solid rgba(211,174,104,.18);display:flex;align-items:center;justify-content:space-between}.panel-x{pointer-events:auto;border:1px solid var(--panel-border);background:#ffffff0f;color:var(--muted);border-radius:8px;width:24px;height:24px;font-size:15px;line-height:1;cursor:pointer}.panel-x:hover{color:var(--fg);background:#ffffff1f}.panel-collapsed{min-width:0;padding:5px;border-radius:8px}.build-fab{display:flex;align-items:center;gap:8px;min-width:144px;justify-content:center;padding:11px 18px;border-radius:5px;border:1px solid #8eaecf;background:linear-gradient(180deg,#315f91,#24486f);color:var(--fg);font-size:13px;font-weight:700;cursor:pointer;box-shadow:inset 0 1px #ffffff2e,0 4px 12px #00000061}.build-fab:hover{filter:brightness(1.12)}.fab-icon{font-size:18px}.panel-head b{color:var(--fg);letter-spacing:.02em}.panel-desc{font-size:13px;color:#d7ccb9;margin-bottom:10px}.panel-hint{font-size:12px;color:#b9aa8d;margin-top:10px}.panel-sub{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted);margin:10px 0 8px}.hero-ability{display:flex;align-items:center;gap:10px;width:100%;margin:8px 0 4px;padding:10px 14px;border-radius:12px;border:1px solid rgba(242,193,78,.55);background:linear-gradient(180deg,#f2c14e47,#f2c14e1f);color:var(--fg);font-size:13px;font-weight:700;cursor:pointer;transition:filter .12s ease,transform .08s ease}.hero-ability:hover:not(:disabled){filter:brightness(1.18)}.hero-ability:active:not(:disabled){transform:translateY(1px)}.hero-ability.is-cooling{opacity:.5;cursor:not-allowed;border-color:var(--panel-border);background:#ffffff0d}.ha-icon{font-size:18px}.ha-label{flex:1;text-align:left}.ha-cd{font-size:12px;color:var(--gold)}.queue{margin-top:14px}.queue-label{font-size:12px;color:#cbd2e0;margin-bottom:8px}.panel-stats{font-size:13px;color:var(--fg);margin-top:6px}.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.build-btn{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:100px;min-height:68px;padding:9px 11px;border-radius:5px;border:1px solid #5e4931;background:linear-gradient(180deg,#3b3024,#292118);color:var(--fg);cursor:pointer;transition:background .12s ease,transform .08s ease,border-color .12s ease}.build-btn:hover:not(:disabled){background:linear-gradient(180deg,#4a3b2b,#33271c);border-color:#c09243}.build-btn:active:not(:disabled){transform:translateY(1px)}.build-btn:disabled,.build-btn.is-disabled{opacity:.42;cursor:not-allowed}.bb-icon{font-size:20px}.bb-name{font-size:12px;font-weight:700}.bb-cost{font-size:11px;color:var(--gold);font-variant-numeric:tabular-nums}.hpbar{height:10px;border-radius:2px;margin:12px 0 10px;background:#00000080;border:1px solid #0d0a07;overflow:hidden}.queue .hpbar{height:8px;margin:6px 0 0}.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#b44134,#75ad57)}.btn{margin-top:10px;padding:8px 14px;min-height:36px;border-radius:5px;border:1px solid #645039;background:#352a1f;color:var(--fg);font-size:12px;font-weight:600;cursor:pointer}.btn:hover{background:#463726;border-color:#9e7a42}button:focus-visible{outline:2px solid #f2cf72;outline-offset:2px}.btn-row{display:flex;gap:10px}.btn-repair{border-color:#60a5fa80;background:linear-gradient(180deg,#3b82f647,#2563eb2e)}.btn-danger{border-color:#ef444499;background:linear-gradient(180deg,#ef444452,#b91c1c3d);color:#fecaca}.btn-danger:hover{background:linear-gradient(180deg,#ef444473,#b91c1c57)}.menu{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:40;background:radial-gradient(circle at 50% 30%,rgba(59,130,246,.18),transparent 55%),#060810e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto}.menu.hidden{display:none}.menu-card{width:min(560px,90vw);padding:40px 44px;text-align:center;border-radius:10px;background:linear-gradient(180deg,#3b2e20fa,#19140ffa);border:1px solid var(--brass);box-shadow:0 36px 80px #050302ad,inset 0 0 0 3px #ffe4b009}.menu-kicker{font-size:11px;letter-spacing:.34em;color:var(--accent);margin-bottom:14px}.menu-title{margin:0;font-size:52px;font-weight:800;letter-spacing:.14em;font-family:Palatino Linotype,Palatino,Georgia,serif;color:#f1d37d;text-shadow:0 3px 2px rgba(8,5,2,.72)}.menu-tagline{margin:12px auto 26px;max-width:42ch;font-size:14px;line-height:1.6;color:var(--muted)}.menu-actions{display:flex;gap:12px;justify-content:center}.menu-btn{padding:12px 26px;border-radius:12px;border:1px solid var(--panel-border);background:#ffffff0f;color:var(--fg);font-size:14px;font-weight:700;cursor:pointer}.menu-btn:hover{background:#ffffff1f}.menu-btn-primary{border-color:#93c5fd80;background:linear-gradient(180deg,#3b82f6,#2563eb)}.menu-btn-primary:hover{background:linear-gradient(180deg,#4f8ef7,#2f6fe0)}.menu-controls{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);text-align:left}.menu-controls.hidden{display:none}.menu-controls-head{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--muted);margin-bottom:12px}.menu-control-row{display:flex;align-items:baseline;gap:14px;padding:5px 0;font-size:13px;color:#cbd2e0}.menu-key{flex:0 0 96px;padding:3px 8px;border-radius:7px;border:1px solid var(--panel-border);background:#ffffff0d;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;text-align:center;color:var(--fg)}.menu-footer{display:flex;align-items:center;justify-content:space-between;margin-top:26px}.menu-sound{padding:7px 14px;border-radius:999px;border:1px solid var(--panel-border);background:#ffffff0f;color:var(--fg);font-size:12px;cursor:pointer}.menu-sound:hover{background:#ffffff1f}.menu-version{font-size:11px;letter-spacing:.12em;color:var(--muted)}body.menu-open #ui{opacity:0;visibility:hidden;pointer-events:none}.outcome{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#060810b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;z-index:20}.outcome.hidden{display:none}.outcome-box{width:min(420px,88vw);padding:28px 30px;border-radius:20px;text-align:center;background:#10121cf5;border:1px solid var(--panel-border);box-shadow:0 30px 80px #0009}.outcome.is-victory .outcome-box,.outcome.is-victory{border-color:#7ee08180}.outcome-title{font-size:40px;font-weight:800;letter-spacing:.16em;color:#f87171;text-shadow:0 4px 20px rgba(0,0,0,.6)}.outcome.is-victory .outcome-title{color:#7ee081}.outcome-subtitle{margin-top:6px;font-size:14px;color:var(--muted)}.outcome-stats{margin:20px 0 6px;text-align:left}.outcome-row{display:flex;justify-content:space-between;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;color:#cbd2e0}.outcome-row b{color:var(--fg)}.outcome-btn{margin-top:18px;padding:12px 26px;font-size:14px;border-radius:12px;background:linear-gradient(180deg,#3b82f6,#2563eb);border:1px solid rgba(147,197,253,.5)}.outcome-btn:hover{background:linear-gradient(180deg,#4f8ef7,#2f6fe0)}.minimap{position:fixed;left:14px;bottom:14px;z-index:10;padding:7px;border-radius:7px;background:#1e1812;border:1px solid var(--brass);box-shadow:0 9px 24px #08050380,inset 0 0 0 2px #ffe1a60a;pointer-events:auto;line-height:0}.minimap canvas{display:block;border:1px solid #0c0906;border-radius:2px;cursor:pointer;image-rendering:pixelated}.hud-test{color:var(--gold);font-weight:700;letter-spacing:.08em}.hud-test.hidden,body.menu-open .minimap{display:none}@media(max-width:760px){#hud-top{min-height:42px;padding:0 6px}.hud-title,.hud-clock,.hud-spacer{display:none}.hud-res{flex:1}.hud-pill{min-width:0;flex:1;justify-content:center;padding:6px 7px;font-size:12px}.hud-speed,.hud-sound{flex:0 0 48px}#hud-bottom{justify-content:flex-end;padding:0 8px 8px}.panel{width:min(100%,520px);min-width:0;max-height:44vh;overflow-y:auto}.panel-collapsed{width:auto;max-height:none;overflow:visible}.build-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.minimap{left:8px;bottom:8px;transform:scale(.72);transform-origin:bottom left}}.pause-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:18;display:grid;place-items:center;background:#05080e94;-webkit-backdrop-filter:blur(4px) saturate(.65);backdrop-filter:blur(4px) saturate(.65);pointer-events:auto}.pause-overlay.hidden{display:none}.pause-box{width:min(390px,calc(100vw - 40px));padding:30px 32px 28px;text-align:center;border:1px solid rgba(147,197,253,.34);border-radius:18px;background:#0d111bf0;box-shadow:0 28px 80px #0000009e,inset 0 1px #ffffff0f}.pause-kicker{margin-bottom:8px;color:#93c5fd;font-size:10px;font-weight:800;letter-spacing:.22em}.pause-title{color:#f8fafc;font-size:clamp(38px,7vw,56px);font-weight:900;letter-spacing:.14em;line-height:1}.pause-copy{margin:16px auto 20px;max-width:300px;color:#aeb7ca;font-size:13px;line-height:1.55}.pause-resume{width:100%;padding:12px 20px;border:1px solid rgba(147,197,253,.5);border-radius:11px;background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer}.pause-resume:hover{filter:brightness(1.12)}.pause-hint{margin-top:13px;color:#747f94;font-size:11px}