:root{
  --amber:#ffb347; --amber-dim:#c8862f;
  --t:#e0913f; --ct:#5fa0e8;
  --bg:#0a0b0d; --panel:rgba(12,14,17,.86); --line:rgba(255,255,255,.12);
  --ok:#7cff9b; --bad:#ff5a4a; --ink:#e9e6df; --mute:#8e8b84;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Barlow Condensed',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--disp);-webkit-font-smoothing:antialiased;user-select:none}
button,input,select{font:inherit;color:inherit}
kbd{font-family:var(--mono);font-size:11px;background:#1b1e23;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:#cfcbc2}

#game{position:fixed;inset:0}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:none}

/* ---------- crosshair ---------- */
#cross{position:absolute;left:50%;top:50%;width:200px;height:200px;
  transform:translate(-50%,-50%);pointer-events:none}
#cross .ch{transition:transform .06s linear}
#hitmark{transition:opacity .12s}

#scope{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0 30%,#000 31.5%)}
#scope .scope-ring{position:absolute;left:50%;top:50%;width:60vh;height:60vh;transform:translate(-50%,-50%);
  border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),inset 0 0 90px rgba(0,0,0,.9)}
#scope i{position:absolute;background:rgba(20,20,20,.9)}
#scope .sv{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
#scope .sh{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}

#flashfx{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#dmgfx{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(190,20,15,.75) 100%)}
#lowhp{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(160,10,10,.55) 100%);
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.3)}}

/* ---------- top bar ---------- */
#topbar{position:absolute;top:0;left:50%;transform:translateX(-50%);
  display:flex;align-items:stretch;gap:2px;font-size:15px;letter-spacing:.06em}
#topbar .team{display:flex;align-items:center;gap:8px;padding:7px 16px;background:var(--panel);
  border:1px solid var(--line);border-top:none;min-width:126px}
#topbar .team.t{border-bottom-color:var(--t);justify-content:flex-start}
#topbar .team.ct{border-bottom-color:var(--ct);justify-content:flex-end}
#topbar .tag{font-weight:700;font-size:12px;padding:2px 7px;border-radius:3px}
#topbar .t .tag{background:rgba(224,145,63,.2);color:var(--t)}
#topbar .ct .tag{background:rgba(95,160,232,.2);color:var(--ct)}
#topbar .team b{font-size:26px;line-height:1;font-weight:700}
#topbar .team em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--mute)}
#topbar .clock{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5px 22px;background:var(--panel);border:1px solid var(--line);border-top:none}
#timer{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.05}
#phase{font-style:normal;font-size:10px;letter-spacing:.22em;color:var(--amber);text-transform:uppercase}
#timer.urgent{color:var(--bad)}

/* ---------- kill feed ---------- */
#killfeed{position:absolute;top:64px;right:14px;list-style:none;text-align:right;font-size:15px}
#killfeed li{background:var(--panel);border-left:2px solid var(--line);padding:3px 10px;margin-bottom:3px;
  animation:slideIn .18s ease-out;display:flex;gap:7px;align-items:center;justify-content:flex-end}
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
#killfeed .n-t{color:var(--t)}#killfeed .n-ct{color:var(--ct)}
#killfeed .w{color:var(--mute);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
#killfeed .hs{color:var(--bad);font-weight:700}
#killfeed li.me{border-left-color:var(--amber);background:rgba(255,179,71,.14)}

/* ---------- bomb ---------- */
#bombbar{position:absolute;top:58px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  background:rgba(60,10,8,.86);border:1px solid rgba(255,70,50,.5);padding:5px 16px;
  font-size:15px;letter-spacing:.14em;color:#ffd0c8}
#bombbar b{font-family:var(--mono);font-size:18px;color:#ff6a52}
#bombbar .dot{width:9px;height:9px;border-radius:50%;background:#ff4a34;animation:blink .5s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}

#progress{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);width:280px;text-align:center}
#progress i{display:block;height:8px;background:rgba(255,255,255,.14);border:1px solid var(--line);overflow:hidden}
#progress i::after{content:'';display:block;height:100%;width:var(--p,0%);background:var(--amber);transition:width .06s linear}
#progress span{font-size:13px;letter-spacing:.24em;color:var(--amber)}

/* ---------- bottom HUD ---------- */
#hud-left,#hud-right{position:absolute;bottom:18px;display:flex;align-items:flex-end;gap:20px;
  background:linear-gradient(0deg,rgba(8,9,11,.72),transparent);padding:10px 16px}
#hud-left{left:16px}
#hud-right{right:16px;flex-direction:column;align-items:flex-end;gap:2px}
.ico{width:22px;height:22px;fill:currentColor;opacity:.85}
#hud-left .hp,#hud-left .ar{display:flex;align-items:center;gap:8px}
#hud-left .hp{color:#ff8d7a}#hud-left .ar{color:#8fb8e8}
#hud-left b{font-family:var(--mono);font-size:34px;font-weight:700;line-height:1;color:var(--ink)}
#helm{font-style:normal;font-size:11px;background:#8fb8e8;color:#0a0b0d;border-radius:3px;padding:1px 4px}
#ammo{font-family:var(--mono);line-height:1}
#mag{font-size:38px;font-weight:700}
#reserve{font-size:18px;color:var(--mute)}
#ammo.low #mag{color:var(--bad)}
#wname{font-size:15px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
#nadebar{display:flex;gap:5px;margin-top:5px}
#nadebar span{font-size:11px;font-family:var(--mono);border:1px solid var(--line);
  padding:2px 6px;background:rgba(0,0,0,.4)}
#nadebar span.he{color:#8fd47a}#nadebar span.flash{color:#e6e6ea}#nadebar span.smoke{color:#b9c39a}
#nadebar span.kit{color:var(--ct)}#nadebar span.bomb{color:#ff6a52}
#money{position:absolute;left:20px;bottom:86px;font-family:var(--mono);font-size:20px;color:var(--ok)}
#money b{font-weight:700}
#money.flash-bad{color:var(--bad)}

#minimap{position:absolute;top:12px;left:12px;width:190px;height:190px;
  background:rgba(8,10,13,.62);border:1px solid var(--line);border-radius:2px}

/* ---------- buy menu ---------- */
#buy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(940px,94vw);
  background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(9px);padding:18px 20px 20px}
.buy-head{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.buy-head h2{font-size:26px;letter-spacing:.2em;color:var(--amber)}
.buy-meta{display:flex;gap:14px;font-family:var(--mono);font-size:15px}
#buy-cash{color:var(--ok)}#buy-timer{color:var(--mute)}
.buy-head .hint{margin-left:auto;font-size:13px;color:var(--mute);letter-spacing:.06em}
#buy-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 22px}
.bcol h3{font-size:13px;letter-spacing:.2em;color:var(--mute);margin-bottom:6px;text-transform:uppercase}
.bitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(255,255,255,.03);
  border:1px solid transparent;border-left:2px solid rgba(255,255,255,.14);padding:6px 10px;margin-bottom:4px;
  cursor:pointer;transition:.11s}
.bitem:hover{background:rgba(255,179,71,.14);border-left-color:var(--amber)}
.bitem .k{font-family:var(--mono);font-size:11px;color:var(--amber);width:14px}
.bitem .nm{flex:1;font-size:16px}
.bitem .pr{font-family:var(--mono);font-size:13px;color:var(--ok)}
.bitem.no{opacity:.38;cursor:not-allowed}
.bitem.no .pr{color:var(--bad)}
.bitem.owned .pr::after{content:' ✓';color:var(--amber)}

/* ---------- scoreboard ---------- */
#board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(820px,94vw);
  background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(9px)}
#board header{display:flex;align-items:baseline;gap:18px;padding:14px 18px;border-bottom:1px solid var(--line)}
#board h2{font-size:22px;letter-spacing:.22em;color:var(--amber)}
#board-score{font-family:var(--mono);font-size:20px}
#board-round{margin-left:auto;font-size:14px;color:var(--mute);letter-spacing:.1em}
.board-wrap{padding:12px 18px 18px;display:grid;gap:14px}
#board table{width:100%;border-collapse:collapse;font-size:15px}
#board th{text-align:right;font-size:12px;letter-spacing:.16em;color:var(--mute);padding:4px 8px;font-weight:600}
#board th:first-child{text-align:left;font-size:15px;letter-spacing:.14em}
.tblT th:first-child{color:var(--t)}.tblCT th:first-child{color:var(--ct)}
#board td{padding:3px 8px;text-align:right;font-family:var(--mono);font-size:14px;
  border-top:1px solid rgba(255,255,255,.05)}
#board td:first-child{text-align:left;font-family:var(--disp);font-size:16px}
#board tr.dead td{opacity:.42}
#board tr.me td{background:rgba(255,179,71,.12)}
#board .bot{color:var(--mute);font-size:11px;margin-left:6px}

/* ---------- messages ---------- */
#roundmsg{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);text-align:center;
  font-size:44px;letter-spacing:.16em;text-shadow:0 4px 24px #000;animation:pop .25s ease-out}
#roundmsg span{display:block;font-size:16px;letter-spacing:.2em;color:var(--mute);margin-top:6px}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1}}
#deadmsg{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;
  font-size:30px;letter-spacing:.2em;color:#ff8d7a}
#deadmsg span{display:block;font-size:14px;letter-spacing:.16em;color:var(--mute);margin-top:8px}

#chatlog{position:absolute;left:16px;bottom:150px;list-style:none;font-size:15px;max-width:46ch}
#chatlog li{background:rgba(8,9,11,.6);padding:2px 8px;margin-top:2px;animation:slideIn .15s}
#chatlog .n-t{color:var(--t)}#chatlog .n-ct{color:var(--ct)}#chatlog .sys{color:var(--amber)}
#chatinput{position:absolute;left:16px;bottom:120px;width:min(440px,60vw);background:rgba(8,9,11,.92);
  border:1px solid var(--amber);padding:7px 10px;outline:none;font-size:15px}

/* ---------- pause ---------- */
#paused{position:absolute;inset:0;background:rgba(6,7,9,.82);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center}
.pcard{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);padding:26px 28px;text-align:center}
.pcard h2{font-size:30px;letter-spacing:.3em;color:var(--amber)}
.pcard p{color:var(--mute);margin:6px 0 18px;letter-spacing:.1em}
.keys{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;text-align:left;font-size:15px;color:#c8c4bb}
.keys kbd{margin-right:8px}
.prow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:20px;
  border-top:1px solid var(--line);padding-top:16px;font-size:14px;color:var(--mute)}
.prow label{display:flex;align-items:center;gap:8px}
.prow input[type=range]{accent-color:var(--amber);width:110px}
.prow select{background:#15181d;border:1px solid var(--line);padding:3px 6px}

/* ---------- main menu ---------- */
#menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;
  background:#07080a}
.mbg{position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(1100px 620px at 70% 15%,rgba(255,179,71,.18),transparent 60%),
    radial-gradient(900px 500px at 15% 85%,rgba(95,160,232,.16),transparent 60%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 10px);
}
.mcard{position:relative;width:min(620px,94vw);background:rgba(12,14,17,.9);border:1px solid var(--line);
  padding:34px 34px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.mcard h1{font-size:56px;letter-spacing:.06em;line-height:1;font-weight:700}
.mcard h1 span{color:var(--amber)}
.mcard h1 i{display:inline-block;font-style:normal;font-family:var(--mono);font-size:15px;color:var(--mute);
  vertical-align:super;margin-left:8px;letter-spacing:0}
.tagline{color:var(--mute);letter-spacing:.08em;margin:8px 0 22px;font-size:16px}
.field{display:block;text-align:left;font-size:13px;letter-spacing:.2em;color:var(--mute);margin-bottom:18px}
.field input{display:block;width:100%;margin-top:6px;background:#15181d;border:1px solid var(--line);
  padding:10px 12px;font-size:17px;letter-spacing:.04em;outline:none}
.field input:focus{border-color:var(--amber)}
.teamsel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:18px}
.tbtn{background:#15181d;border:1px solid var(--line);padding:12px 6px;cursor:pointer;transition:.12s;line-height:1.25}
.tbtn b{display:block;font-size:15px;letter-spacing:.08em}
.tbtn span{font-size:12px;color:var(--mute)}
.tbtn:hover{border-color:var(--amber)}
.tbtn.sel{background:rgba(255,179,71,.14);border-color:var(--amber)}
.tbtn.t.sel{background:rgba(224,145,63,.18);border-color:var(--t)}
.tbtn.ct.sel{background:rgba(95,160,232,.18);border-color:var(--ct)}
#play{width:100%;background:var(--amber);color:#10120f;border:none;padding:14px;font-size:22px;
  font-weight:700;letter-spacing:.28em;cursor:pointer;transition:.12s}
#play:hover{background:#ffc76b}
#play:disabled{opacity:.4;cursor:wait}
.legal{font-size:11px;color:#5f5c57;margin-top:14px;letter-spacing:.04em}
#status{margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--mute)}
#status.err{color:var(--bad)}

@media (max-width:720px){
  #minimap{width:120px;height:120px}
  .mcard h1{font-size:38px}
  #buy-cols{grid-template-columns:1fr 1fr}
  #hud-left b{font-size:26px}#mag{font-size:28px}
}