:root{--ct:#6fa8ff;--t:#ffb04a;--panel:#0c121a8c;--panel-border:#ffffff14;--text:#eef3f8;--muted:#9fb0c2;--accent:#5dff7a;--danger:#ff4d5a;--ch:#5dff7a}*{box-sizing:border-box}html,body{height:100%;color:var(--text);-webkit-user-select:none;user-select:none;background:#0b1016;margin:0;font-family:Inter,system-ui,sans-serif;overflow:hidden}#game{width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}#hud{pointer-events:none;font-family:Rajdhani,Inter,sans-serif;position:fixed;inset:0}.panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 2px 6px #00000080;border-radius:10px;padding:8px 16px;font-weight:700;position:absolute}#hp{align-items:center;gap:10px;font-size:40px;display:flex;bottom:24px;left:24px}#hp .icon{color:var(--accent);font-size:26px}#hp.low{color:var(--danger);animation:.8s infinite pulse}#hp.low .icon{color:var(--danger)}#ammo{text-align:right;min-width:190px;font-size:40px;bottom:24px;right:24px}#weapon-name{letter-spacing:2px;color:var(--muted);text-transform:uppercase;font-size:14px;display:block}#ammo-res{color:var(--muted);margin-left:6px;font-size:22px}#ammo.empty #ammo-mag{color:var(--danger)}#reload-bar{visibility:hidden;background:#ffffff1a;border-radius:2px;height:3px;margin-top:4px;overflow:hidden}#reload-bar i{background:var(--accent);width:0;height:100%;display:block}#ammo.reloading #reload-bar{visibility:visible}#topbar{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;align-items:center;gap:18px;padding:4px 18px;font-size:20px;font-weight:700;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}#topbar .ct{color:var(--ct)}#topbar .t{color:var(--t)}#topbar b{color:var(--text);margin:0 4px;font-size:26px}#mode{letter-spacing:2px;color:var(--muted);text-transform:uppercase;font-size:12px}#killfeed{flex-direction:column;align-items:flex-end;gap:5px;font-size:17px;font-weight:600;display:flex;position:absolute;top:16px;right:20px}.kf{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;align-items:center;gap:8px;padding:3px 10px;animation:.2s ease-out slidein;display:flex}.kf.local{border-color:#ff4650cc}.kf .ct{color:var(--ct)}.kf .t{color:var(--t)}.kf .w{color:var(--muted);letter-spacing:1px;font-size:13px}.kf .hs{color:#fff;background:var(--danger);border-radius:3px;padding:0 4px;font-size:12px}.kf.fade{opacity:0;transition:opacity .6s}#notes{color:#ffe08a;text-shadow:0 2px 6px #000;flex-direction:column;gap:6px;font-size:17px;font-weight:600;display:flex;position:absolute;top:40%;left:24px}#callout{text-align:center;letter-spacing:6px;pointer-events:none;font-weight:700;position:absolute;top:22%;left:0;right:0}#callout .c{text-shadow:0 0 18px #ff3c28cc,0 4px #0009;animation:1.6s cubic-bezier(.2,.9,.3,1.2) forwards callout;display:inline-block}#callout .p1{color:#ffe5a0;font-size:44px}#callout .p2{color:#ffb347;font-size:58px}#callout .p3{color:#ff5a3c;text-shadow:0 0 30px #ff1e00f2,0 5px #0009;font-size:76px}#crosshair{width:0;height:0;position:absolute;top:50%;left:50%}#crosshair i{background:var(--ch);position:absolute;box-shadow:0 0 0 1px #0000008c}#hitmarker{opacity:0;width:0;height:0;position:absolute;top:50%;left:50%}#hitmarker i{background:#fff;width:2px;height:9px;position:absolute;box-shadow:0 0 2px #000}#hitmarker i:first-child{transform:translate(-9px,-13px)rotate(45deg)}#hitmarker i:nth-child(2){transform:translate(7px,-13px)rotate(-45deg)}#hitmarker i:nth-child(3){transform:translate(-9px,4px)rotate(-45deg)}#hitmarker i:nth-child(4){transform:translate(7px,4px)rotate(45deg)}#hitmarker.hs i{background:#ff4d5a}#hitmarker.show{animation:.25s ease-out hit}#vignette{opacity:0;background:radial-gradient(#0000 45%,#c80000a6 100%);transition:opacity .1s;position:absolute;inset:0}#flash{opacity:0;background:#fff;position:absolute;inset:0}#dmg-dirs{position:absolute;top:50%;left:50%}.dmg-dir{transform-origin:60px 150px;filter:drop-shadow(0 0 6px #f00c);border-top:6px solid #ff3232d9;border-radius:50% 50% 0 0/100% 100% 0 0;width:120px;height:40px;animation:1s forwards fadeout;position:absolute;top:-150px;left:-60px}#speedo{color:var(--muted);font-size:18px;font-weight:600;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}#fps{color:var(--muted);font-size:14px;position:absolute;top:12px;left:16px}#death{text-align:center;text-shadow:0 2px 8px #000;font-weight:700;position:absolute;top:62%;left:0;right:0}#death .by{font-size:30px}#death .timer{color:var(--muted);font-size:18px}#scoreboard{border:1px solid var(--panel-border);background:#0a0e14d9;border-radius:14px;grid-template-columns:1fr 1fr;gap:16px;width:min(900px,92vw);padding:18px;font-family:Inter,sans-serif;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#scoreboard h2{margin:0 0 8px;font-family:Rajdhani,sans-serif;font-size:22px}#scoreboard .ct h2{color:var(--ct)}#scoreboard .t h2{color:var(--t)}#scoreboard table{border-collapse:collapse;width:100%;font-size:14px}#scoreboard td,#scoreboard th{text-align:left;padding:4px 6px}#scoreboard th{color:var(--muted);font-size:12px;font-weight:500}#scoreboard td.n{text-align:right;font-variant-numeric:tabular-nums}#scoreboard tr.me{background:#ffffff14}#scoreboard tr.dead{opacity:.45}#menu{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(at top,#1e5a788c,#050a10eb);justify-content:center;align-items:center;padding:24px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.menu-inner{width:min(760px,100%)}.brand{text-align:center;margin-bottom:18px}.logo{letter-spacing:6px;background:linear-gradient(#fff,#7fd8ff);color:#0000;text-shadow:0 8px 40px #3cc8ff40;-webkit-background-clip:text;background-clip:text;font-family:Rajdhani,sans-serif;font-size:clamp(48px,9vw,92px);font-weight:700;line-height:1}.logo span{color:#3cc3d8;-webkit-text-fill-color:#3cc3d8}.tagline{color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-top:6px;font-size:13px}#loading{text-align:center;color:var(--muted)}#menu-main{flex-direction:column;gap:12px;display:flex}.team-pick{grid-template-columns:1fr 1fr;gap:10px;display:grid}button{letter-spacing:1px;border:1px solid var(--panel-border);cursor:pointer;color:var(--text);background:#ffffff0f;border-radius:10px;padding:12px 18px;font-family:Rajdhani,sans-serif;font-size:20px;font-weight:700;transition:transform 80ms,background .15s,border-color .15s}button:hover{background:#ffffff1f}button:active{transform:scale(.98)}.team-btn.ct.sel{border-color:var(--ct);background:#6fa8ff33}.team-btn.t.sel{border-color:var(--t);background:#ffb04a33}button.primary{background:linear-gradient(#3cc3d8,#1d8aa8);border-color:#fff3;font-size:28px;box-shadow:0 10px 30px #3cc3d84d}button.primary:hover{background:linear-gradient(#55d4e8,#239ab9)}button.secondary{font-size:16px}.settings,.controls{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:14px 18px}.settings{grid-template-columns:1fr 1fr;gap:8px 22px;display:grid}.settings h3,.controls h3{letter-spacing:1px;grid-column:1/-1;margin:0 0 4px;font-family:Rajdhani,sans-serif}.settings label{color:var(--muted);grid-template-columns:1fr auto;align-items:center;gap:2px 8px;font-size:13px;display:grid}.settings label input[type=range],.settings label select{accent-color:#3cc3d8;grid-column:1/-1;width:100%}.settings select{color:var(--text);border:1px solid var(--panel-border);background:#121a24;border-radius:6px;padding:4px}.settings output{color:var(--text);font-variant-numeric:tabular-nums;grid-area:1/2}.settings label.check{color:var(--text);gap:8px;display:flex}.keys{color:var(--muted);grid-template-columns:1fr 1fr;gap:6px 18px;font-size:13px;display:grid}kbd{color:var(--text);background:#ffffff1a;border:1px solid #ffffff26;border-bottom-width:2px;border-radius:4px;padding:1px 6px;font-family:inherit;font-size:12px}@media (max-width:640px){.settings,.keys{grid-template-columns:1fr}}@keyframes pulse{50%{opacity:.55}}@keyframes slidein{0%{opacity:0;transform:translate(30px)}}@keyframes hit{0%{opacity:1;transform:scale(1.4)}to{opacity:0;transform:scale(1)}}@keyframes fadeout{to{opacity:0}}@keyframes callout{0%{opacity:0;filter:blur(6px);transform:scale(2.4)}15%{opacity:1;filter:blur();transform:scale(1)}80%{opacity:1;transform:scale(1.04)}to{opacity:0;transform:scale(1.1)}}
