:root{--bg:#080b10;--panel:#10151deb;--panel-solid:#10151d;--field:#0b0f15;--line:#ffffff14;--line-strong:#ffffff29;--text:#e8eef6;--dim:#94a1b3;--faint:#5d6a7c;--accent:#ff6a3a;--accent-hi:#ff8a62;--accent-ink:#1a0c06;--cyan:#38c8ff;--green:#4ade80;--yellow:#ffc533;--red:#ff4d4d;--ui:"Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, Roboto, sans-serif;--display:Bahnschrift, "DIN Alternate", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;--mono:"Cascadia Mono", ui-monospace, Consolas, "SF Mono", monospace}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--ui);margin:0;overflow:hidden}canvas{display:block}button,input,select{font-family:inherit}kbd{text-align:center;border:1px solid var(--line-strong);min-width:18px;font:600 11px/1.5 var(--mono);color:var(--text);background:#1a212b;border-bottom-width:2px;border-radius:5px;padding:1px 6px;display:inline-block}button{color:var(--text);border:1px solid var(--line);font:600 14px var(--ui);cursor:pointer;background:#232c38;border-radius:8px;padding:9px 16px;transition:background .12s,transform 50ms,border-color .12s}button:hover{border-color:var(--line-strong);background:#2c3745}button:active{transform:translateY(1px)}button:disabled{color:var(--faint);cursor:default;background:#161c25;border-color:#0000;transform:none}button.primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}button.primary:hover{background:var(--accent-hi)}button.primary:disabled{color:#7d6258;background:#3a2a24}button.ghost{border-color:var(--line-strong);background:0 0}button.ghost:hover{background:#ffffff0f}button.danger:hover{border-color:var(--red);color:var(--red)}button.big{letter-spacing:.04em;padding:14px 22px;font-size:16px}button.link{color:var(--accent-hi);background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline}button.link:hover{color:#fff;background:0 0}#lobby{z-index:20;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:radial-gradient(at 20% 0,#ff6a3a21,#0000 55%),radial-gradient(at 90% 100%,#38c8ff1a,#0000 50%),#06090ddb;justify-content:center;align-items:center;display:none;position:fixed;inset:0;overflow:auto}#lobby:before{content:"";pointer-events:none;opacity:.5;background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-size:56px 56px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 20%,#0000 75%);mask-image:radial-gradient(#000 20%,#0000 75%)}.shell{flex-direction:column;gap:14px;width:min(1040px,95vw);max-height:96vh;padding:8px 0;display:flex;position:relative}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{color:var(--accent);align-items:center;gap:12px;display:flex}.brand .mark{width:34px;height:34px}.brand .word{font:700 30px/1 var(--display);letter-spacing:.26em;color:var(--text);text-transform:uppercase}.status{border:1px solid var(--line);max-width:60%;color:var(--dim);background:#ffffff0d;border-radius:999px;align-items:center;gap:9px;padding:7px 14px;font-size:13px;display:flex}.status .dot{background:var(--yellow);width:8px;height:8px;box-shadow:0 0 8px var(--yellow);border-radius:50%;flex:none;animation:1.6s infinite pulse}.status.ok .dot{background:var(--green);box-shadow:0 0 8px var(--green);animation:none}.status.bad .dot{background:var(--red);box-shadow:0 0 8px var(--red);animation:none}#lobby-status{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#lobby-status.error{color:#ff9a92}@keyframes pulse{50%{opacity:.35}}.layout{grid-template-columns:270px 1fr;gap:14px;min-height:0;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-height:0;padding:18px 20px;box-shadow:0 18px 50px #00000073}.panel h3,.stage h3{font:600 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:18px 0 8px}.panel h3:first-child{margin-top:0}.profile .field{color:var(--dim);gap:6px;margin:0 0 14px;font-size:12px;display:grid}#lobby input[type=text],#lobby select{background:var(--field);color:var(--text);border:1px solid var(--line-strong);border-radius:8px;outline:none;min-width:0;padding:9px 11px;font-size:14px;transition:border-color .12s,box-shadow .12s}#lobby input[type=text]:focus,#lobby select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ff6a3a2e}input[type=range]{accent-color:var(--accent);width:100%}.classes{grid-template-columns:1fr 1fr;gap:8px;display:grid}.classes button.cls{text-align:left;background:var(--field);border:1px solid var(--line-strong);border-radius:10px;gap:3px;padding:10px 11px;display:grid}.cls b{font:700 14px var(--display);letter-spacing:.1em;text-transform:uppercase}.cls small{color:var(--dim);font:500 11px/1.3 var(--ui)}.cls .kit{font:600 10px var(--mono);color:var(--faint);letter-spacing:.04em;margin-top:3px}.classes button.cls.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#ff6a3a1f}.classes button.cls.on b{color:var(--accent-hi)}.keys{color:var(--dim);gap:7px;margin:0;padding:0;font-size:12.5px;list-style:none;display:grid}.keys li{justify-content:space-between;align-items:center;gap:8px;display:flex}.keys span{flex-wrap:wrap;justify-content:flex-end;gap:3px;display:flex}.stage{flex-direction:column;max-height:calc(96vh - 90px);display:flex;overflow:auto}.tabs{background:var(--field);border:1px solid var(--line);border-radius:11px;gap:6px;width:-moz-fit-content;width:fit-content;margin:-4px 0 16px;padding:4px;display:flex}.tab{color:var(--dim);font:600 13px var(--ui);letter-spacing:.04em;background:0 0;border:0;border-radius:8px;padding:8px 18px}.tab:hover{color:var(--text);background:#ffffff0d}.tab.on{background:var(--accent);color:var(--accent-ink)}.tabpane[hidden]{display:none}.note{color:#f1d98f;background:#ffc53314;border:1px solid #ffc53340;border-radius:10px;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:14px;padding:11px 14px;font-size:13px;display:flex}.note[hidden]{display:none}.hero{align-items:stretch;gap:12px;margin-bottom:4px;display:flex}.hero button.big{text-align:left;flex:1;gap:2px;display:grid}.hero button.big small{font:500 12px var(--ui);letter-spacing:0;opacity:.75}#matchlist{gap:8px;display:grid}.match{background:var(--field);border:1px solid var(--line);border-radius:10px;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:11px 14px;display:grid}.match b{font-weight:600}.match small{color:var(--dim);margin-top:2px;font-size:12px;display:block}.match .count{font:600 13px var(--mono);color:var(--dim)}.empty{color:var(--faint);padding:10px 2px;font-size:13.5px}.create{margin-top:4px}.row{flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0;display:flex}.row label,.grid label{color:var(--dim);align-items:center;gap:8px;font-size:12px;display:flex}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:4px 0 18px;display:grid}.grid label{flex-direction:column;align-items:stretch;gap:6px}#mname{width:190px}.seg{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.seg button{text-align:left;background:var(--field);border:1px solid var(--line-strong);border-radius:11px;gap:3px;padding:12px 14px;display:grid}.seg button b{font:700 15px var(--display);letter-spacing:.1em;text-transform:uppercase}.seg button small{color:var(--dim);font:500 12px/1.35 var(--ui)}.seg button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#ff6a3a1f}.seg button.on b{color:var(--accent-hi)}.actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.actions .primary{min-width:220px}.fine{color:var(--faint);margin:14px 0 0;font-size:12px;line-height:1.5}@media (max-width:860px){.layout{grid-template-columns:1fr}.profile{display:none}.brand .word{font-size:22px}.seg{grid-template-columns:1fr}}#hud{border-left:2px solid var(--accent);color:#d5deea;font:12px/1.55 var(--mono);pointer-events:none;white-space:pre;background:#070a0e80;border-radius:8px;padding:7px 10px;position:fixed;top:12px;left:12px}#minimap{border:1px solid var(--line-strong);pointer-events:none;border-radius:10px;display:none;position:fixed;top:12px;right:12px;box-shadow:0 6px 24px #00000080}#matchbar{border:1px solid var(--line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text);pointer-events:none;white-space:nowrap;text-align:center;background:#070a0e9e;border-radius:999px;padding:6px 18px;display:none;position:fixed;top:12px;left:50%;transform:translate(-50%)}#matchbar .t{font:700 20px/1.2 var(--mono);letter-spacing:.04em}#matchbar .g{border-left:1px solid var(--line-strong);font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-left:12px;padding-left:12px}#matchbar .tag{background:var(--accent);color:var(--accent-ink);font:700 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;vertical-align:3px;border-radius:5px;margin-right:12px;padding:2px 8px}#killfeed{pointer-events:none;justify-items:end;gap:4px;display:grid;position:fixed;top:192px;right:12px}.kf{border-right:3px solid var(--line-strong);font:600 13px var(--ui);color:#dbe3ee;background:#070a0e9e;border-radius:6px;align-items:center;gap:8px;padding:4px 11px;animation:.18s ease-out kf-in;display:flex}.kf .w{color:var(--faint);font:500 11px var(--mono);text-transform:uppercase}.kf .arrow{color:var(--faint)}.kf .me{color:var(--accent-hi)}.kf .head{color:var(--yellow);font-size:11px}.kf.mine{border-right-color:var(--accent)}.kf.died{border-right-color:var(--red)}@keyframes kf-in{0%{opacity:0;transform:translate(14px)}}#crosshair{pointer-events:none;background:#ffffffe6;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:fixed;top:50%;left:50%;box-shadow:0 0 0 1px #000000a6}#hitmarker{opacity:0;pointer-events:none;--c:#fff;width:28px;height:28px;margin:-14px 0 0 -14px;position:fixed;top:50%;left:50%}#hitmarker:before,#hitmarker:after{content:"";background:var(--c);width:3px;height:28px;margin:-14px 0 0 -1.5px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #00000080}#hitmarker:before{transform:rotate(45deg)}#hitmarker:after{transform:rotate(-45deg)}#damage{opacity:0;pointer-events:none;background:radial-gradient(#b4000000 45%,#c80000bf 100%);position:fixed;inset:0}#vignette{pointer-events:none;opacity:0;background:radial-gradient(#0000 45%,#0000008c 100%);position:fixed;inset:0}#scope{pointer-events:none;background:radial-gradient(circle,#0000 0 36vh,#000 36.4vh);display:none;position:fixed;inset:0}#scope:before,#scope:after{content:"";background:#000000d9;position:absolute}#scope:before{width:2px;height:72vh;margin-left:-1px;top:calc(50% - 36vh);left:50%}#scope:after{width:72vh;height:2px;margin-top:-1px;top:50%;left:calc(50% - 36vh)}#vitals{border:1px solid var(--line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;background:#070a0e94;border-radius:12px;min-width:230px;padding:10px 14px 12px;position:fixed;bottom:16px;left:16px}#vitals .hp-row{align-items:baseline;gap:8px;min-height:38px;display:flex}#hp{font:700 38px/1 var(--mono);color:#fff;letter-spacing:-.02em}#vitals .hp-unit{font:700 11px var(--ui);letter-spacing:.16em;color:var(--faint)}#healthbar{background:#ffffff1a;border-radius:4px;height:7px;margin-top:6px;overflow:hidden}#healthfill{background:var(--green);border-radius:4px;width:100%;height:100%;transition:width .12s,background .2s}#kd{font:600 12px var(--mono);color:var(--dim);letter-spacing:.06em;margin-top:8px}#kd b{color:var(--text)}#ammo{text-align:right;pointer-events:none;text-shadow:0 2px 10px #000;position:fixed;bottom:86px;right:16px}#ammoNow{font:700 40px/1 var(--mono);color:#fff;letter-spacing:-.02em}#ammoMax{font:600 16px var(--mono);color:var(--faint);margin-left:4px}#ammo.low #ammoNow{color:var(--red)}#ammo.reloading #ammoNow{color:var(--dim)}#reloadbar{opacity:0;background:#ffffff1f;border-radius:3px;height:4px;margin-top:6px;transition:opacity .1s;overflow:hidden}#ammo.reloading #reloadbar{opacity:1}#reloadbar i{background:var(--accent);width:0;height:100%;display:block}#weapons{pointer-events:none;gap:6px;display:flex;position:fixed;bottom:16px;right:16px}.slot{min-width:62px;color:var(--dim);font:600 11px/1.3 var(--ui);text-align:center;letter-spacing:.04em;border:1px solid var(--line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#070a0e94;border-radius:9px;padding:7px 8px 8px}.slot b{font:700 14px var(--mono);color:var(--faint);margin-bottom:2px;display:block}.slot.on{border-color:var(--accent);color:#fff;background:#ff6a3a2e;box-shadow:0 0 16px #ff6a3a40}.slot.on b{color:var(--accent-hi)}#dead{text-align:center;pointer-events:none;text-shadow:0 2px 12px #000;display:none;position:fixed;top:36%;left:50%;transform:translate(-50%)}#dead .big{font:700 44px/1.1 var(--display);letter-spacing:.24em;color:var(--red);text-transform:uppercase}#dead .sub{font:500 15px var(--ui);color:#fff;opacity:.85;margin-top:6px}#scores,#endscreen{pointer-events:none;border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0e13e0;border-radius:14px;padding:16px 20px;display:none;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 20px 60px #0000008c}#scores{min-width:360px;top:16%}#endscreen{text-align:center;min-width:440px;top:14%}.sb-title{font:700 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);text-align:left;margin-bottom:8px}table.sb{border-collapse:collapse;width:100%;font:14px var(--ui)}table.sb th{text-align:right;font:600 10.5px var(--ui);letter-spacing:.14em;color:var(--faint);text-transform:uppercase;padding:4px 10px}table.sb td{text-align:right;font-family:var(--mono);border-top:1px solid var(--line);padding:7px 10px}table.sb th:first-child,table.sb td:first-child{text-align:left}table.sb td:first-child{font-family:var(--ui);font-weight:600}table.sb tr.me td{background:#ff6a3a21}table.sb tr.me td:first-child{color:var(--accent-hi);border-radius:6px 0 0 6px}table.sb tr.me td:last-child{border-radius:0 6px 6px 0}.rank{width:22px;color:var(--faint);font:600 12px var(--mono);display:inline-block}.end-banner{font:700 32px/1.1 var(--display);letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}.end-banner.win{color:var(--green)}.end-banner.lose{color:var(--accent-hi)}.end-sub{color:var(--dim);margin-bottom:14px;font-size:13px}.end-next{color:var(--dim);margin-top:12px;font-size:13px}.end-next b{color:#fff;font-family:var(--mono)}#overlay{text-align:center;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#06090d9e;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#overlay .card{cursor:default;text-align:center;background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:16px;width:min(420px,92vw);padding:24px 26px;box-shadow:0 24px 70px #0009}#overlay .eyebrow{font:700 11px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}#overlay h2{font:700 28px/1.1 var(--display);letter-spacing:.12em;text-transform:uppercase;margin:6px 0}#overlay .hint{color:var(--dim);margin:0 0 18px;font-size:13px;line-height:1.5}#pause-actions{gap:9px;display:grid}#settings-panel h2{margin-bottom:12px}#controls-list{background:var(--field);border:1px solid var(--line);color:var(--dim);text-align:left;border-radius:10px;margin:0 0 14px;padding:12px 14px;font-size:12.5px;line-height:2.05}#settings{text-align:left;color:#cfd8e3;gap:4px;margin-bottom:16px;font-size:13.5px;display:grid}#settings .row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:14px;margin:0;padding:7px 2px;display:flex}#settings .row:last-child{border-bottom:0}#settings .row .ctl{align-items:center;gap:10px;display:flex}#settings input[type=range]{width:150px}#settings .val{text-align:right;min-width:42px;font:600 12px var(--mono);color:var(--dim)}#settings input[type=checkbox]{appearance:none;cursor:pointer;background:#2a3441;border-radius:999px;width:38px;height:22px;margin:0;transition:background .15s;position:relative}#settings input[type=checkbox]:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px}#settings input[type=checkbox]:checked{background:var(--accent)}#settings input[type=checkbox]:checked:after{transform:translate(16px)}