:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#16181a;--panel:#141814e0;--panel-border:#4a5a3a;--text:#e6e2d6;--muted:#9a9a8c;--accent:#9ccc65;--danger:#e57373;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0}button{font:inherit;border:1px solid var(--panel-border);color:var(--text);cursor:pointer;background:#2b3527;border-radius:4px;padding:6px 14px}button:disabled{opacity:.45;cursor:default}input,select{font:inherit;border:1px solid var(--panel-border);color:var(--text);background:#101410;border-radius:4px;padding:6px 8px}.screen{background-position:50%;background-size:cover;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;flex-direction:column;gap:10px;min-width:280px;padding:16px 20px;display:flex}.panel h1,.panel h2{margin:0 0 6px}.game-root{position:absolute;inset:0}.hud{pointer-events:none;--hud-scale:clamp(.75, min(calc(100vh / 720px), calc(100vw / 1280px)), 1);--hud-yellow:#e0c860;--hud-red:#e05040;--frame-slice:0;position:absolute;inset:0}.hud>*{pointer-events:auto}.hud-top-left,.hud-top-right,.hud-actions,.hud-log{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:8px 12px;position:absolute}.hud-top-left{max-width:220px;top:12px;left:12px}.hud-map-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.zoom-control{align-items:center;gap:6px;margin-top:6px;display:flex}.zoom-control input[type=range]{width:calc(120px * var(--hud-scale))}.zoom-control button{flex:none}.zoom-control .muted{text-align:right;min-width:3em}.hud-top-right{text-align:right;top:12px;right:12px}.audio-controls{justify-content:flex-end;align-items:center;gap:6px;margin-top:6px;display:flex}.audio-controls input[type=range]{width:80px}.screen>.audio-controls{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;margin-top:0;padding:8px 12px;position:absolute;top:12px;right:12px}.hud-actions{flex-direction:column;gap:6px;display:flex;bottom:12px;right:12px}.action-menu-wrap{position:relative}.action-button{align-items:center;gap:6px;width:100%;display:flex}.action-button .label{text-align:left;flex:1}.chevron{border-left:5px solid #0000;border-right:5px solid #0000;border-bottom:6px solid var(--text);width:0;height:0;transition:transform .12s}.chevron.open{transform:rotate(180deg)}.action-menu{background:var(--panel);border:1px solid var(--panel-border);border-radius:4px;flex-direction:column;min-width:200px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 4px);right:0}.action-menu .menu-item{text-align:left;background:0 0;border:none;width:100%}.action-menu .menu-item:not(:disabled):hover{background:#2b3527}.action-menu .menu-item.soon{color:var(--muted)}.action-menu hr{border:none;border-top:1px solid var(--panel-border);margin:4px 0}@media (width<=700px){.hud-actions{top:calc(152px + 40vh);bottom:auto}}.hud-log{flex-direction:column;width:300px;max-height:40vh;font-size:13px;display:flex;top:140px;right:12px}.hud-log .lines{flex:1;margin-bottom:6px;overflow-y:auto}.hud-log .chat{color:var(--accent)}.turn-banner{color:#e6e2d6;text-shadow:0 0 6px #000,0 0 2px #000;pointer-events:none;font-size:28px;font-weight:600;animation:1s ease-out forwards turn-banner;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}@keyframes turn-banner{0%{opacity:0;transform:translate(-50%,-40%)}20%{opacity:1;transform:translate(-50%,-50%)}80%{opacity:1}to{opacity:0}}.unit-panel-wrap{font-size:calc(13px * var(--hud-scale));pointer-events:none;grid-template-columns:auto auto;display:grid;position:absolute;bottom:12px;left:12px}.unit-panel-wrap>*{pointer-events:auto}.unit-selector{gap:calc(4px * var(--hud-scale));height:calc(40px * var(--hud-scale));padding:0 calc(8px * var(--hud-scale));grid-column:1/3;align-items:flex-end;display:flex}.selector-portrait{border:1px solid var(--panel-border);background:#141814d9;padding:2px}.selector-portrait.dead{opacity:.4;cursor:default}.unit-panel{box-sizing:border-box;width:calc(340px * var(--hud-scale));min-height:calc(190px * var(--hud-scale));grid-template-columns:calc(64px * var(--hud-scale)) 1fr;column-gap:calc(10px * var(--hud-scale));height:auto;padding:calc(6px * var(--hud-scale)) calc(10px * var(--hud-scale));color:var(--hud-yellow);border-width:calc(var(--frame-border,1px) * var(--hud-scale));border-style:solid;border-color:var(--panel-border);border-image:var(--frame-image,none) var(--frame-slice) fill / calc(var(--frame-border,1px) * var(--hud-scale)) stretch;background:#10140eeb;border-radius:6px;grid-template-rows:auto auto 1fr;display:grid}.unit-panel .portrait{grid-row:1/3}.portrait{color:#9a9d95;background:#2a2d2b;justify-content:center;align-items:center;font-weight:600;display:flex;overflow:hidden}.portrait-64{width:calc(64px * var(--hud-scale));height:calc(64px * var(--hud-scale))}.portrait-32{width:calc(32px * var(--hud-scale));height:calc(32px * var(--hud-scale))}.portrait img{object-fit:cover;width:100%;height:100%;display:block}.unit-panel .stats{padding:calc(4px * var(--hud-scale)) calc(8px * var(--hud-scale));gap:0 calc(8px * var(--hud-scale));background:#1a2416;border:1px solid #3a4a30;grid-template-columns:1fr 1fr;align-content:center;display:grid}.unit-panel .name{white-space:nowrap;text-overflow:ellipsis;grid-column:1/3;font-weight:600;overflow:hidden}.unit-panel .hp,.unit-panel .ap,.unit-panel .armor,.unit-panel .vision{align-items:center;gap:calc(4px * var(--hud-scale));white-space:nowrap;display:flex}.unit-panel .hp.low{color:var(--hud-red)}.unit-panel .weapons{gap:calc(6px * var(--hud-scale));margin-top:calc(6px * var(--hud-scale));grid-column:1/3;grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.unit-panel .slot{justify-content:space-between;align-items:center;gap:calc(6px * var(--hud-scale));padding:calc(4px * var(--hud-scale)) calc(6px * var(--hud-scale));background:#141a12;border:1px solid #3a4a30;display:flex}.unit-panel .slot.active{border-color:var(--hud-yellow);box-shadow:0 0 0 1px var(--hud-yellow)}.unit-panel .swap{padding:calc(4px * var(--hud-scale))}.unit-panel .extras{margin-top:calc(6px * var(--hud-scale));grid-column:1/3;justify-content:space-between;display:flex}.slot-actions{justify-content:center;align-self:stretch;gap:calc(4px * var(--hud-scale));padding:calc(6px * var(--hud-scale)) calc(4px * var(--hud-scale));border:1px solid var(--panel-border);background:#10140eeb;border-left:none;border-top-right-radius:6px;border-bottom-right-radius:6px;flex-direction:column;margin-left:0;display:flex}.slot-action{width:calc(36px * var(--hud-scale));height:calc(36px * var(--hud-scale));background:#10140eeb;border:1px solid #6b7a55;justify-content:center;align-items:center;padding:0;display:flex}.slot-action:disabled{opacity:1}.slot-action:disabled .icon{opacity:.6}.slot-action:not(:disabled):hover,.slot-action:not(:disabled):focus-visible{border-color:var(--hud-yellow);box-shadow:0 0 0 1px var(--hud-yellow)}.icon{vertical-align:middle;display:inline-block}.icon-32{width:calc(24px * var(--hud-scale));height:calc(24px * var(--hud-scale))}.icon-64{width:calc(48px * var(--hud-scale));height:calc(48px * var(--hud-scale))}.icon-text{width:auto;height:auto;color:var(--muted);font-size:.85em}@media (width<=480px){.unit-selector,.unit-panel>.portrait{display:none}.unit-panel{width:calc(100vw - 24px - calc(48px * var(--hud-scale)));grid-template-columns:1fr}}.bar{background:#333;border-radius:3px;height:6px;margin:2px 0;overflow:hidden}.bar>div{background:var(--accent);height:100%}.bar.hp>div{background:var(--danger)}.tooltip{background:var(--panel);border:1px solid var(--panel-border);pointer-events:none;white-space:nowrap;border-radius:4px;padding:6px 8px;font-size:13px;position:absolute}.toast{border:1px solid var(--danger);background:#4a2a2a;border-radius:4px;padding:6px 12px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.banner{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:12px 20px;font-size:18px;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.muted{color:var(--muted)}