:root{--bg:#0b0f14;--panel:#141a22;--panel-2:#1b2330;--border:#2a3545;--text:#e6ebf2;--muted:#8b98ab;--accent:#58a6ff;--danger:#ef4444;--ok:#22c55e;--warn:#f59e0b;color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}#app{width:100vw;height:100vh;position:relative}.screen{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.hidden{display:none!important}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;width:min(440px,92vw);padding:28px 32px;box-shadow:0 20px 60px #00000080}.logo{letter-spacing:.18em;color:#cfe3ff;margin:0 0 4px;font-size:40px;font-weight:800}.tagline{color:var(--muted);margin:0 0 24px;font-size:14px}h2{margin:0 0 8px;font-size:22px}.hint{color:var(--muted);margin:0 0 16px;font-size:13px}.field{margin-bottom:16px;display:block}.field span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-size:12px;display:block}input[type=text]{background:var(--panel-2);border:1px solid var(--border);width:100%;color:var(--text);border-radius:6px;outline:none;padding:10px 12px;font-size:15px}input[type=text]:focus{border-color:var(--accent)}.code-input{text-transform:uppercase;letter-spacing:.3em;font-weight:700;width:120px!important}.row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:6px;flex:1;padding:10px 16px;font-size:14px;font-weight:600}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:#1f4f8a;border-color:#2d6ab8}.btn.ghost{background:0 0}.btn.active{background:#2d6ab8}.status{min-height:20px;color:var(--warn);margin:6px 0 0;font-size:13px}.code{letter-spacing:.2em;color:var(--accent);font-family:Consolas,monospace}.players{margin:0 0 16px;padding:0;list-style:none}.players li{border:1px solid var(--border);background:var(--panel-2);border-radius:6px;align-items:center;gap:10px;margin-bottom:6px;padding:8px 10px;display:flex}.players li.empty{color:var(--muted);background:0 0;border-style:dashed}.swatch{border-radius:3px;flex:none;width:14px;height:14px}.badge{background:var(--border);color:var(--muted);border-radius:4px;padding:2px 6px;font-size:11px}.badge.ok{color:#bbf7d0;background:#14532d}.badge.off{color:#fecaca;background:#5b1a1a}#game{display:block}#canvas-host{position:absolute;inset:0}#canvas-host canvas{display:block}#hud{pointer-events:none;position:absolute;inset:0}#hud>*{pointer-events:auto}#topbar{border-bottom:1px solid var(--border);background:#0a0e14d9;align-items:center;gap:24px;height:40px;padding:0 16px;font-size:14px;display:flex;position:absolute;top:0;left:0;right:0}.stat .label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:8px;font-size:11px}.stat .value{font-variant-numeric:tabular-nums;font-weight:700}.stat.right{margin-left:auto}.stat.right+.stat.right{margin-left:0}#power-stat.deficit .value{color:var(--danger)}#players-bar{gap:12px;display:flex}#players-bar .pl{align-items:center;gap:6px;font-size:13px;display:flex}#players-bar .pl.out{color:var(--muted);text-decoration:line-through}#players-bar .pl.off{opacity:.5}#sidepanel{border-left:1px solid var(--border);background:#0a0e14d9;width:260px;padding:12px;font-size:13px;position:absolute;top:40px;bottom:0;right:0;overflow-y:auto}.sel-title{margin-bottom:6px;font-size:15px;font-weight:700}#sel-body{color:var(--muted);margin-bottom:12px}#sel-body .hpbar{background:#222;border-radius:3px;height:6px;margin:4px 0 8px;overflow:hidden}#sel-body .hpbar i{background:var(--ok);height:100%;display:block}#sel-body .types{flex-wrap:wrap;gap:6px;display:flex}#sel-body .types span{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:2px 6px}#actions{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;display:grid}.action{background:var(--panel-2);border:1px solid var(--border);color:var(--text);text-align:left;cursor:pointer;border-radius:6px;padding:8px;font-size:12px;line-height:1.3}.action:hover:not(:disabled){border-color:var(--accent)}.action:disabled{opacity:.4;cursor:not-allowed}.action.danger{border-color:#5b1a1a}.action .k{float:right;color:var(--muted);border:1px solid var(--border);border-radius:3px;padding:0 4px;font-size:10px}.action .cost{color:var(--warn);font-variant-numeric:tabular-nums}#queue .q{align-items:center;gap:8px;margin-bottom:6px;display:flex}#queue .q .bar{background:#222;border-radius:4px;flex:1;height:8px;overflow:hidden}#queue .q .bar i{background:var(--accent);height:100%;display:block}#queue .q button{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:4px;padding:1px 6px;font-size:11px}#minimap-host{border:1px solid var(--border);background:#000;border-radius:4px;padding:3px;position:absolute;bottom:12px;left:12px}#minimap-host canvas{image-rendering:pixelated;cursor:crosshair;display:block}#toasts{pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:56px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--border);background:#141a22f2;border-radius:6px;padding:6px 14px;font-size:13px;animation:.15s ease-out toast-in}.toast.error{border-color:var(--danger);color:#fecaca}.toast.ok{border-color:var(--ok)}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}#help{color:var(--muted);white-space:nowrap;pointer-events:none;font-size:11px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}#help b{color:var(--text)}.overlay{z-index:10;background:#0009;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay .panel{text-align:center}#end-title.win{color:var(--ok)}#end-title.lose{color:var(--danger)}