:root{--bg: #0d1014;--panel: #171d24;--panel-2: #1f2731;--line: #2c3743;--ink: #e8eef5;--muted: #8b9bab;--accent: #4aa3ff;--danger: #ff5c5c;--ok: #5cd97a;--gold: #ffc94a;--pixel: "Press Start 2P", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}#stage{position:fixed;inset:0}#stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated}#hud{position:fixed;inset:0;pointer-events:none;font-family:var(--pixel)}#hud[hidden]{display:none}.hud-corner{position:absolute}.hud-tl{top:14px;left:14px;background:#0d1014b8;border:2px solid var(--line);border-radius:4px;padding:8px 10px;display:grid;gap:6px}.stat{display:flex;gap:10px;align-items:baseline;font-size:12px;color:var(--ok)}.stat-kills{color:var(--danger)}.stat-key{letter-spacing:1px}.stat span:last-child{color:var(--ink);min-width:2ch;text-align:right}.hud-banner{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:12px;background:#0d1014d1;border:2px solid var(--gold);border-radius:4px;white-space:nowrap}.hud-banner[hidden]{display:none}.hud-banner .warn{color:var(--gold)}.hud-banner.danger{border-color:var(--danger);animation:pulse 1s steps(2) infinite}@keyframes pulse{50%{opacity:.55}}#zoneTime{color:var(--gold)}.hud-tr{top:14px;right:14px;width:200px;height:200px;border:2px solid var(--line);border-radius:4px;background:#0d1014b8;image-rendering:pixelated}.hud-feed{top:226px;right:14px;display:grid;gap:4px;justify-items:end}.kill-line{display:flex;align-items:center;gap:8px;font-size:10px;padding:5px 9px;background:#0d1014c7;border:2px solid var(--line);border-radius:3px;white-space:nowrap;animation:fade 6.5s forwards}.kill-line.mine{border-color:var(--gold);background:#281f0ad9}.kill-line .who{font-size:10px}.kill-line .cause{width:20px;height:20px;image-rendering:pixelated;flex:none}@keyframes fade{0%,75%{opacity:1}to{opacity:0}}.hud-bottom{bottom:14px;left:50%;transform:translate(-50%);display:grid;justify-items:center;gap:8px}.hp-bar{position:relative;width:260px;height:22px;border:2px solid var(--line);border-radius:3px;background:#0d1014d1;overflow:hidden}#hpFill{position:absolute;inset:0;width:100%;transform-origin:left;background:linear-gradient(180deg,#7ceb95,#33b055);transition:width .12s linear}#hpText{position:relative;display:block;text-align:center;line-height:18px;font-size:10px;text-shadow:0 1px 0 #0008}.ammo{font-size:12px;color:var(--gold);text-shadow:0 2px 0 #0008}.hud-spectating{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;text-align:center;text-shadow:0 2px 0 #000a}.hud-spectating[hidden]{display:none}#overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1b2530,#0b0e12 70%);padding:24px;overflow:auto}#overlay[hidden]{display:none}.screen{width:min(560px,100%);background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:28px;display:grid;gap:16px;box-shadow:0 24px 60px #0009}.screen[hidden]{display:none}.logo{font-family:var(--pixel);font-size:34px;margin:0;text-align:center;letter-spacing:2px;text-shadow:0 4px 0 #0b0e12}.logo span{color:var(--accent)}h2{font-family:var(--pixel);font-size:16px;margin:0;text-align:center}h3{font-family:var(--pixel);font-size:12px;margin:0 0 10px}.tagline{margin:0;text-align:center;color:var(--muted);font-size:14px}.hint{margin:0;text-align:center;color:var(--muted);font-size:12px}.field{display:grid;gap:6px;font-size:12px;color:var(--muted)}input{font:inherit;padding:12px 14px;border-radius:6px;border:2px solid var(--line);background:var(--panel-2);color:var(--ink)}input:focus{outline:2px solid var(--accent);outline-offset:1px}.code-input{font-family:var(--pixel);font-size:14px;letter-spacing:4px;text-transform:uppercase;text-align:center;flex:1;min-width:0}.menu-actions{display:grid;gap:10px}.join-row{display:flex;gap:10px}.btn{font:inherit;font-weight:600;padding:12px 18px;border-radius:6px;border:2px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer;transition:transform .06s ease,background .12s ease}.btn:hover{background:#27313d}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:#2b7ed4;color:#06121f}.btn-primary:hover{background:#63b1ff}.btn-primary.is-ready{background:var(--ok);border-color:#35a557}.btn-ghost{background:transparent}.room-code{font-family:var(--pixel);font-size:26px;letter-spacing:6px;text-align:center;padding:14px;border:2px dashed var(--accent);border-radius:8px;background:var(--panel-2);color:var(--ink);cursor:pointer}.room-code.copied{border-style:solid;border-color:var(--ok)}.player-list,.standings,.scoreboard ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}.player-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--panel-2);border:2px solid var(--line);border-radius:6px;font-size:14px}.swatch{width:14px;height:14px;border-radius:3px;border:2px solid #0006;flex:none}.player-row .who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag{font-size:10px;padding:3px 6px;border-radius:4px;background:#0006;color:var(--muted)}.tag.ready{color:var(--ok)}.tag.host{color:var(--gold)}.kick{flex:none;width:22px;height:22px;padding:0;border:2px solid transparent;border-radius:4px;background:transparent;color:var(--muted);font:inherit;font-size:12px;line-height:1;cursor:pointer}.kick:hover,.kick:focus-visible{border-color:var(--danger);color:var(--danger);background:#ff5c5c1a}.lobby-actions{display:flex;gap:10px;flex-wrap:wrap}.lobby-actions .btn{flex:1}.error{margin:0;color:var(--danger);font-size:13px;text-align:center}.error[hidden]{display:none}.help{color:var(--muted);font-size:13px}.help ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}.help b{color:var(--ink)}.scoreboard{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);min-width:320px;padding:18px;background:#0d1014f0;border:2px solid var(--line);border-radius:8px;font-family:var(--pixel);font-size:11px;pointer-events:none}.scoreboard[hidden]{display:none}.score-row{display:flex;gap:10px;align-items:center;padding:6px 4px;border-bottom:1px solid #ffffff12}.score-row .who{flex:1}.score-row.dead{opacity:.45}.score-row.me{color:var(--gold)}body.playing{cursor:none}.pickup{font-size:10px;padding:7px 12px;background:#0d1014d9;border:2px solid var(--accent);border-radius:4px;white-space:nowrap}.pickup[hidden]{display:none}.pickup b{color:var(--accent)}.channel{position:relative;width:220px;height:16px;border:2px solid var(--line);border-radius:3px;background:#0d1014d9;overflow:hidden}.channel[hidden]{display:none}#channelFill{position:absolute;inset:0;width:0;background:linear-gradient(180deg,#8fe0ff,#3aa6dd)}#channelText{position:relative;display:block;text-align:center;line-height:12px;font-size:8px;text-shadow:0 1px 0 #0008}.shield-bar{width:260px;height:10px;border:2px solid var(--line);border-bottom:0;border-radius:3px 3px 0 0;background:#0d1014d1;overflow:hidden}.shield-bar[hidden]{display:none}#shieldFill{height:100%;width:100%;background:linear-gradient(180deg,#9fd8ff,#3f8fd0)}.weapon-row{display:flex;align-items:baseline;gap:12px}.weapon-name{font-size:11px;color:var(--ink);text-shadow:0 2px 0 #0008}.slots{display:flex;gap:6px}.slot{display:flex;align-items:center;gap:6px;font-size:8px;padding:5px 8px;border:2px solid var(--line);border-radius:3px;background:#0d1014b8;color:var(--muted)}.slot.active{color:var(--ink);background:#ffc94a24;box-shadow:inset 0 0 0 1px var(--gold)}.slot .key{color:var(--gold)}.hud-br{bottom:14px;right:14px;display:grid;gap:6px;justify-items:end;font-family:var(--pixel)}.consumable{display:flex;align-items:center;gap:8px;font-size:9px;padding:6px 9px;border:2px solid var(--line);border-radius:3px;background:#0d1014b8}.consumable .key{color:var(--gold)}.consumable .count{color:var(--ok);min-width:2ch;text-align:right}.consumable.empty{opacity:.4}.stamina-bar{width:260px;height:8px;border:2px solid var(--line);border-top:0;border-radius:0 0 3px 3px;background:#0d1014d1;overflow:hidden}#staminaFill{height:100%;width:100%;background:linear-gradient(180deg,#ffe08a,#e0a72f);transition:width .08s linear}#staminaFill.spent{background:linear-gradient(180deg,#8a7a55,#5f5436)}