:root{--bg: #0b0e12;--panel: rgba(14, 19, 24, .86);--panel-solid: #11171d;--line: rgba(160, 200, 220, .16);--text: #e8eef2;--muted: #8fa1ad;--accent: #7dff3a;--beam: #8fd0ff;--shield: #ffc640;--health: #5fe08a;--danger: #ff4d5e;--font: "Rajdhani", "Segoe UI", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);user-select:none}canvas#game{display:block;position:fixed;inset:0;width:100vw;height:100vh}#hud{position:fixed;inset:0;pointer-events:none;display:none}#hud.on{display:block}#crosshair,#dmgfx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#dmgfx{width:40vmin;height:40vmin}.hud-top{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;font-weight:700;letter-spacing:.06em}.score{display:flex;align-items:stretch;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:22px}.score .side{padding:4px 14px;display:flex;gap:10px;align-items:baseline}.score .side small{font-size:12px;color:var(--muted);letter-spacing:.12em}.score .you b{color:var(--beam)}.score .bot b{color:var(--accent)}.score .clock{padding:4px 14px;background:#ffffff0f;font-family:var(--mono);font-size:19px;display:flex;align-items:center}.hud-vitals{position:absolute;left:50%;bottom:26px;transform:translate(-50%);width:min(440px,80vw);display:grid;gap:6px}.bar{position:relative;height:14px;background:#00000073;border:1px solid var(--line);border-radius:3px;overflow:hidden}.bar .fill{position:absolute;inset:0;transform-origin:left;transition:transform 60ms linear}.bar.shield .fill{background:linear-gradient(90deg,#ffb020,#ffe28a);box-shadow:0 0 12px #ffc64088}.bar.health .fill{background:linear-gradient(90deg,#2fae62,#8ef2a8)}.bar.health.low .fill{background:linear-gradient(90deg,#c4262f,#ff7680)}.bar .num{position:absolute;right:6px;top:-2px;font:700 14px var(--mono);text-shadow:0 1px 2px #000}.bar .tag{position:absolute;left:6px;top:-1px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#000a}.hud-vitals.healing .bar{border-color:#7dff9a;box-shadow:0 0 14px #5fe08a99}.bar.shield.broken{animation:blink .35s steps(2) infinite;border-color:var(--danger)}@keyframes blink{50%{border-color:transparent}}.hud-br{position:absolute;right:22px;bottom:22px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 12px;text-align:right;font-family:var(--mono);font-size:15px;color:var(--muted);line-height:1.35}.hud-br b{color:var(--text);font-size:26px}.hud-fps{position:absolute;right:12px;top:10px;font:12px var(--mono);color:var(--muted);text-shadow:0 1px 2px #000}.center-msg{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%);text-align:center;font-weight:800;letter-spacing:.08em;text-shadow:0 2px 12px #000c;opacity:0;transition:opacity .15s}.center-msg.on{opacity:1}.center-msg .big{font-size:64px;line-height:1}.center-msg .small{font-size:20px;color:var(--muted);margin-top:6px}.feed{position:absolute;left:18px;top:16px;font-size:16px;font-weight:600;display:grid;gap:4px}.feed div{background:var(--panel);padding:3px 10px;border-radius:4px;animation:fade 4s forwards}@keyframes fade{80%{opacity:1}to{opacity:0}}.vignette{position:absolute;inset:0;box-shadow:inset 0 0 160px 40px #ff3c3c8c;opacity:0}.senstest{position:absolute;left:50%;top:calc(50% + 60px);transform:translate(-50%);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 16px;font:14px var(--mono);line-height:1.5;text-align:center;display:none}.senstest.on{display:block}.senstest b{font-size:30px;color:var(--beam)}.scoreboard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px 22px;display:none;font-family:var(--mono);font-size:14px}.scoreboard.on{display:block}.scoreboard table{border-collapse:collapse}.scoreboard td,.scoreboard th{padding:4px 12px;text-align:right}.scoreboard th:first-child,.scoreboard td:first-child{text-align:left}.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at 50% 30%,#14281e59,#05080ad1);backdrop-filter:blur(3px);overflow-y:auto}.screen.on{display:flex}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px 30px;width:min(760px,100%);max-height:calc(100vh - 32px);overflow-y:auto;box-shadow:0 20px 60px #0009}.logo{font-size:clamp(48px,9vw,88px);font-weight:800;letter-spacing:.12em;line-height:.95;background:linear-gradient(180deg,#ffffff,var(--beam) 60%,#3d8fd1);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px #8fd0ff55)}.tagline{color:var(--muted);font-size:18px;margin:6px 0 22px;letter-spacing:.04em}h2{margin:0 0 14px;font-size:30px;letter-spacing:.08em}h3{margin:20px 0 8px;font-size:14px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;overflow:hidden}.seg button{border:0;border-radius:0;background:transparent;padding:8px 14px}.seg button.on{background:var(--beam);color:#06121b}button{font:700 16px var(--font);letter-spacing:.06em;color:var(--text);background:#ffffff0f;border:1px solid var(--line);border-radius:6px;padding:9px 18px;cursor:pointer}button:hover{background:#ffffff1f}button.primary{background:linear-gradient(180deg,#a8dcff,#4ea6e8);color:#04121c;font-size:22px;padding:12px 40px;border:0;box-shadow:0 0 24px #8fd0ff55}button.primary:hover{filter:brightness(1.1)}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center}.hint{color:var(--muted);font-size:14px}.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 22px}label.field{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;font-size:16px}label.field input[type=number],label.field select{width:96px;font:600 15px var(--mono);background:#0006;color:var(--text);border:1px solid var(--line);border-radius:4px;padding:4px 6px}label.field input[type=range]{width:130px}label.field input[type=color]{width:44px;height:26px;border:0;background:none}.readout{font:600 14px var(--mono);color:var(--beam)}.swatches{display:flex;gap:6px}.swatches button{width:28px;height:28px;padding:0;border-radius:50%}.swatches button.on{outline:2px solid #fff;outline-offset:2px}.keys td{padding:3px 10px 3px 0}.keys button{font:600 13px var(--mono);padding:4px 10px;min-width:90px}.keys button.listening{background:var(--shield);color:#000}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}.stat{background:#ffffff0a;border:1px solid var(--line);border-radius:8px;padding:10px 12px}.stat small{display:block;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}.stat b{font:700 26px var(--mono)}.result-head{font-size:56px;font-weight:800;letter-spacing:.08em;line-height:1}.result-head.win{color:var(--accent)}.result-head.loss{color:var(--danger)}.result-head.draw{color:var(--shield)}.misses{display:grid;gap:6px}.miss{display:grid;grid-template-columns:80px 1fr 52px;gap:10px;align-items:center;font-size:15px}.miss .track{height:10px;background:#ffffff0f;border-radius:5px;overflow:hidden}.miss .track div{height:100%;background:var(--beam)}.tip{margin-top:12px;padding:10px 14px;border-left:3px solid var(--beam);background:#8fd0ff12;font-size:16px;line-height:1.4}table.history{width:100%;border-collapse:collapse;font:13px var(--mono)}table.history td,table.history th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:right}table.history th:first-child,table.history td:first-child{text-align:left}.kbd{font:600 13px var(--mono);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--text)}@media (max-width: 600px){.panel{padding:18px 16px}.score{font-size:17px}}