:root{--canvas: #07080f;--surface: #0d0f18;--surface-2: #12141f;--border: rgba(255,255,255,.08);--border-soft: rgba(255,255,255,.04);--block-navy: #07091c;--block-lime: #08100a;--block-coral: #150c0a;--ink: #e2e6f0;--ink-soft: #7a8699;--primary: #ffffff;--on-primary: #07080f;--accent: #4fd1ff;--accent-2: #ff5c7c;--r-sm: 6px;--r-md: 8px;--r-lg: 24px;--r-pill: 9999px;--sp-xs: 8px;--sp-sm: 12px;--sp-md: 16px;--sp-lg: 24px;--sp-xl: 32px;--sp-xxl: 48px;--sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--mono: "IBM Plex Mono", "SF Mono", menlo, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-weight:320;overflow:hidden;user-select:none;-webkit-font-smoothing:antialiased}#app{position:relative;width:100vw;height:100vh;display:grid;place-items:center;background:var(--canvas)}#game-frame{display:flex;flex-direction:row;align-items:flex-start}#game-wrap{position:relative}#game{display:block;background:#0a0c12;width:min(calc(100vw - 160px),calc(100vh * 1024 / 768));height:min(100vh,calc((100vw - 160px)*.75));aspect-ratio:1024 / 768;image-rendering:pixelated;border-radius:var(--r-md);border:1px solid var(--border)}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#07080fd1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:5;padding:var(--sp-lg);overflow:auto}.overlay.clear{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}.overlay.clear .countdown{pointer-events:none}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-xxl) var(--sp-xl);max-width:min(960px,92vw)}.panel h1,.panel h2{margin:0 0 8px;font-weight:340;line-height:1.1}.panel h1{font-size:38px;letter-spacing:-.8px}.panel h2{font-size:26px;letter-spacing:-.4px}.panel .tagline{color:var(--ink-soft);font-weight:320;font-size:16px;letter-spacing:-.1px;margin:0 0 var(--sp-lg)}.panel .hint{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin:0 0 var(--sp-md)}.panel.menu{background:transparent;border:none;text-align:center;padding:var(--sp-xxl) calc(var(--sp-xxl) + var(--sp-xl))}.panel.menu .logo{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--sp-md);margin-bottom:var(--sp-sm)}.panel.menu .logo-mark{height:36px;width:auto;opacity:.9}.panel.menu .logo-text{font-family:var(--sans);font-size:60px;font-weight:340;letter-spacing:-1.5px;line-height:1;color:var(--ink)}.panel.menu .tagline{font-family:var(--mono);margin-bottom:var(--sp-xs)}.menu-actions{display:flex;flex-direction:column;gap:var(--sp-lg);margin-top:var(--sp-md)}.menu-actions .btn{margin-top:0}.panel.menu .hint{margin-top:var(--sp-xl)}.btn{background:transparent;color:var(--ink);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px var(--sp-lg);font-size:15px;font-weight:480;font-family:var(--sans);letter-spacing:-.1px;cursor:pointer;transition:background .12s,border-color .12s}.btn:hover{background:#ffffff0d;border-color:#ffffff29}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--primary);color:var(--on-primary);border:none;font-weight:480;padding:10px var(--sp-lg);margin-top:var(--sp-md)}.btn.primary:hover{background:#d4d8e2}.btn.online{background:transparent;border-color:var(--accent);color:var(--accent);margin-top:var(--sp-md);padding:10px var(--sp-lg)}.btn.online:hover{background:#4fd1ff14}.count-row{display:flex;gap:var(--sp-xs);margin:6px 0 var(--sp-lg);flex-wrap:wrap}.count-btn{width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--border);background:transparent;color:var(--ink);font-weight:480;font-family:var(--sans);cursor:pointer}.count-btn.sel{background:var(--primary);color:var(--on-primary);border-color:transparent}.player-list{display:grid;gap:var(--sp-xs);margin-bottom:var(--sp-lg)}.player-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:var(--sp-sm);padding:var(--sp-xs) var(--sp-sm);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}.player-row .dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}.name-input{background:transparent;border:none;outline:none;color:var(--c);font-size:15px;font-weight:540;font-family:var(--sans);letter-spacing:-.1px}.keys{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);background:#0000004d;padding:3px 8px;border-radius:var(--r-sm);border:1px solid var(--border)}.cap-row{display:flex;align-items:center;gap:var(--sp-sm);margin-bottom:4px}.cap-row label{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft)}.cap-input{width:80px;background:var(--surface-2);border:1px solid var(--border);color:var(--ink);padding:var(--sp-xs) 10px;border-radius:var(--r-md);font-family:var(--sans);font-size:15px;font-weight:320}.cap-input:focus{outline:none;border-color:#fff3}.wsel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-sm);max-height:60vh;overflow-y:auto;padding:4px;margin-bottom:var(--sp-sm)}.wsel-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-sm);border-left:2px solid var(--c)}.wsel-name{color:var(--c);font-weight:540;font-size:13px;letter-spacing:-.1px;margin-bottom:var(--sp-xs)}.wsel-weapons{display:grid;grid-template-columns:1fr 1fr;gap:4px}.wsel-btn{background:transparent;border:1px solid var(--border);color:var(--ink);border-radius:var(--r-pill);padding:5px var(--sp-xs);cursor:pointer;font-size:12px;font-family:var(--sans);font-weight:480;text-align:center;transition:background .1s,border-color .1s}.wsel-btn:hover{background:#ffffff0a}.wsel-btn.sel{background:var(--c);color:#07090d;border-color:var(--c);font-weight:540}.countdown{font-size:160px;font-weight:340;color:var(--ink);letter-spacing:-6px;line-height:1}.panel.result{min-width:360px;text-align:center}.panel.result .winner{font-size:38px;font-weight:340;letter-spacing:-.8px;background:linear-gradient(90deg,#4fd1ff,#c08cff,#ff5c7c);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:var(--sp-md)}.scores{display:flex;flex-direction:column;gap:6px;margin:var(--sp-md) 0 4px;text-align:left}.score-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:var(--sp-sm);padding:var(--sp-xs) var(--sp-sm);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}.score-row .dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}.score-row .sname{color:var(--c);font-weight:540;font-size:14px}.score-row .sval{font-family:var(--mono);color:var(--ink);font-size:14px}.hud{display:flex;flex-direction:column;gap:var(--sp-xs);padding:12px 8px;width:152px;flex-shrink:0;align-self:flex-start;z-index:4;pointer-events:none}.hud.hidden{display:none}.hud-card{background:#0d0f18d1;border:1px solid var(--border);border-left:2px solid var(--c);border-radius:var(--r-md);padding:6px var(--sp-sm);min-width:100px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.hud-card.dead{opacity:.4;filter:saturate(.4)}.hud-score{font-size:22px;font-weight:540;color:var(--c);font-family:var(--mono);line-height:1.1}.hud-cap{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-soft)}.hud-name{color:var(--ink);font-weight:480;font-size:12px}.hud-wep{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft)}.hud-wep.active{color:var(--accent)}.hud-ch{color:var(--ink)}.broadcasts{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:4px;z-index:4;pointer-events:none;max-width:50vw}.bc{background:#07080fcc;border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 10px;font-size:12px;font-family:var(--mono);transition:opacity .15s linear}.mute{position:absolute;top:12px;right:12px;z-index:6;background:#0d0f18d1;border:1px solid var(--border);color:var(--ink-soft);border-radius:var(--r-pill);padding:6px var(--sp-sm);font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}.mute:hover{color:var(--ink);border-color:#ffffff29}.auth-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid var(--border)}.auth-user{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft)}.auth-btn{margin-top:0}.lobby-field{display:flex;align-items:center;gap:10px;margin:10px 0;justify-content:center}.lobby-field label{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);width:90px;text-align:right}.lobby-field .cap-input{text-align:left}.lobby-head{display:flex;align-items:center;gap:var(--sp-sm);margin-bottom:4px}.lobby-head>span:first-child{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft)}.lobby-code{font-family:var(--mono);font-size:20px;letter-spacing:4px;color:var(--accent);background:var(--surface-2);padding:4px var(--sp-sm);border-radius:var(--r-md);border:1px solid var(--border)}.lobby-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:var(--sp-sm);padding:var(--sp-xs) var(--sp-sm);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}.lobby-row.me{border-color:var(--c)}.lobby-row .dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}.lobby-name{font-weight:540;font-size:14px}.lobby-right{display:flex;gap:var(--sp-xs);align-items:center}.lobby-score{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--ink);background:#0003;padding:2px var(--sp-xs);border-radius:var(--r-sm)}.lobby-tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);padding:2px var(--sp-xs);border-radius:var(--r-sm);border:1px solid var(--border)}.lobby-tag.warn{color:var(--accent-2);border-color:#ff5c7c4d}.lobby-pick{display:flex;align-items:center;gap:10px;margin:var(--sp-sm) 0 0}.lobby-pick.weapons{align-items:flex-start}.lobby-pick-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);width:80px;text-align:right}.swatch-btn{width:24px;height:24px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--c);cursor:pointer;position:relative;padding:0}.swatch-btn.sel{box-shadow:0 0 0 2px var(--canvas),0 0 0 3px var(--c)}.swatch-btn.taken{opacity:.2;cursor:not-allowed}.net-debug{position:absolute;bottom:12px;right:12px;z-index:7;background:#0d0f18d1;border:1px solid var(--border);border-radius:var(--r-md);padding:4px 10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);pointer-events:none}.net-status{position:absolute;top:12px;left:12px;z-index:7;background:#0d0f18d1;border:1px solid var(--border);border-radius:var(--r-pill);padding:4px var(--sp-sm);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft)}.net-status.ok{color:var(--accent)}.net-status.warn{color:var(--accent-2);border-color:#ff5c7c4d}.lp{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--canvas);z-index:10}.lp-header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-xl);height:52px;border-bottom:1px solid var(--border);flex-shrink:0}.lp-logo{display:flex;align-items:center;gap:var(--sp-sm)}.lp-logo-mark{height:22px;width:auto;opacity:.9}.lp-logo-text{font-family:var(--sans);font-size:18px;font-weight:340;letter-spacing:-.3px;color:var(--ink)}.lp-login{padding:7px var(--sp-md);font-size:14px}.lp-body{flex:1;display:flex;overflow:hidden}.lp-hero{display:flex;flex-direction:column;justify-content:center;padding:0 var(--sp-xxl) 0 var(--sp-xxl);width:42%;flex-shrink:0}.lp-eyebrow{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin:0 0 var(--sp-sm)}.lp-title{font-family:var(--sans);font-size:46px;font-weight:320;letter-spacing:-1.4px;line-height:1.08;color:var(--ink);margin:0 0 var(--sp-md)}.lp-sub{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.1px;color:var(--ink-soft);margin:0 0 var(--sp-xl)}.lp-cta{align-self:flex-start}.lp-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-xl)}.lp-preview canvas{display:block;width:100%;height:100%;max-width:560px;max-height:420px;border:1px solid var(--border);border-radius:var(--r-md);background:#07080f;image-rendering:pixelated;object-fit:contain}.lp-footer{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:40px;border-top:1px solid var(--border)}.lp-footer span{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft)}@media (max-width: 768px){.lp-hero{width:100%;padding:var(--sp-xl);align-items:center;text-align:center}.lp-cta{align-self:center}.lp-preview{display:none}}.overlay::-webkit-scrollbar,.wsel-grid::-webkit-scrollbar{width:6px}.overlay::-webkit-scrollbar-thumb,.wsel-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}