* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#0a0e14; font-family:'Segoe UI',Roboto,Arial,sans-serif; color:#e8eef5; user-select:none; }
#game-container, #game-container canvas { position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }
#vignette { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); z-index:5; }
/* cinematic screen feel: grain + sun glare + low-hp + explosion flash (all pointer-transparent) */
#grain { position:fixed; inset:-40px; pointer-events:none; z-index:6; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); animation:grainShift 0.9s steps(3) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0);} 33%{transform:translate(-14px,9px);} 66%{transform:translate(11px,-13px);} 100%{transform:translate(0,0);} }
#glare { position:fixed; inset:0; pointer-events:none; z-index:6; opacity:0; background:radial-gradient(circle at 50% 34%, rgba(255,236,200,.55), rgba(255,210,140,.18) 22%, transparent 55%); transition:opacity .25s; mix-blend-mode:screen; }
#lowhp { position:fixed; inset:0; pointer-events:none; z-index:6; opacity:0; background:radial-gradient(ellipse at center, transparent 42%, rgba(160,0,0,.5) 100%); transition:opacity .3s; }
#boomflash { position:fixed; inset:0; pointer-events:none; z-index:7; opacity:0; background:radial-gradient(circle at 50% 55%, rgba(255,240,220,.95), rgba(255,180,100,.45) 40%, transparent 75%); }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
/* ---- HUD v3: minimal layout, maximal type ----
   Four corners + top center, nothing overlaps. No boxes: bold numerals on soft
   screen-edge scrims, one accent stripe per zone, team colors only where they mean something. */
#hud {
  --ink:#f3f6f9; --dim:rgba(243,246,249,.52); --faint:rgba(243,246,249,.16);
  --ct:#5aaeff; --t:#ffb020; --cash:#9dff6a; --hot:#ff4d4d; --gold:#ffd76d;
  --shadow:0 2px 0 rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45);
  --hud-font:'Barlow Condensed','Oswald','Bahnschrift','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  font-family:var(--hud-font); color:var(--ink); text-shadow:var(--shadow);
}
#hud::before, #hud::after { content:''; position:absolute; left:0; right:0; pointer-events:none; z-index:-1; }
#hud::before { top:0; height:120px; background:linear-gradient(rgba(0,0,0,.42), transparent); }
#hud::after { bottom:0; height:150px; background:linear-gradient(transparent, rgba(0,0,0,.5)); }

/* top-left: minimap + system line (network / fps / ping) */
#top-bar { position:absolute; top:14px; left:0; right:0; display:flex; justify-content:center; }
#tl-stack { position:absolute; left:16px; top:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
#minimap { display:block; border-radius:4px; background:rgba(4,8,12,.62); box-shadow:0 0 0 1px var(--faint), 0 8px 24px rgba(0,0,0,.35); }
#sys { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; white-space:nowrap; }
#mp-status { display:flex; align-items:center; gap:6px; color:var(--dim); }
#mp-status::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
#mp-status.offline { color:rgba(243,246,249,.45); }
#mp-status.offline::before { background:transparent; box-shadow:inset 0 0 0 1.5px currentColor; }
#mp-status.online.solo { color:var(--gold); }
#mp-status.online.pvp { color:var(--cash); }
#mp-status.online.pvp::before { animation:netPulse 1.6s ease-in-out infinite; }
@keyframes netPulse { 50% { transform:scale(.55); opacity:.5; } }
#fps-counter { color:var(--dim); font-variant-numeric:tabular-nums; }
#fps-counter::before { content:'/'; margin-right:8px; opacity:.4; }

/* top center: score · clock · score */
#scoreboard-top { display:flex; align-items:center; gap:0; }
.team-score { display:flex; align-items:baseline; gap:8px; padding:0 18px; font-weight:800; font-size:38px; line-height:1; font-variant-numeric:tabular-nums; position:relative; }
.team-score::after { content:''; position:absolute; bottom:-6px; height:3px; width:34px; transform:skewX(-20deg); }
.team-score.ct { color:var(--ct); } .team-score.ct::after { right:18px; background:var(--ct); }
.team-score.t { color:var(--t); } .team-score.t::after { left:18px; background:var(--t); }
#ct-name, #t-name { font-size:12px; font-weight:800; letter-spacing:3px; opacity:.75; }
#match-info { text-align:center; padding:0 16px; min-width:150px; border-left:1px solid var(--faint); border-right:1px solid var(--faint); }
#timer { font-size:32px; font-weight:800; line-height:1; letter-spacing:1px; font-variant-numeric:tabular-nums; }
#timer.low { color:var(--hot); animation:blink 1s infinite; }
#round-label { margin-top:4px; font-size:10.5px; font-weight:700; letter-spacing:1.8px; color:var(--dim); white-space:nowrap; }

/* top center, under the clock and bomb status: CS2-style damage given last round (online, buy time) */
#dmg-report { position:absolute; top:128px; left:50%; transform:translateX(-50%); min-width:280px; max-width:92vw; display:flex; flex-direction:column; gap:2px; pointer-events:none; font-variant-numeric:tabular-nums; animation:drIn .18s ease-out; }
@keyframes drIn { from { opacity:0; transform:translate(-50%,-6px); } }
#dmg-report .dr-head { display:flex; justify-content:space-between; align-items:baseline; padding:4px 10px; font-size:10.5px; font-weight:800; letter-spacing:2px; color:var(--dim); background:linear-gradient(90deg, rgba(4,8,12,.72), rgba(4,8,12,.45)); border-bottom:1px solid var(--faint); }
#dmg-report .dr-head b { font-size:13px; color:var(--ink); letter-spacing:.5px; }
#dmg-report .dr-row { display:grid; grid-template-columns:1fr auto 44px 16px; gap:12px; align-items:center; padding:4px 10px; font-size:14px; font-weight:700; background:rgba(4,8,12,.58); border-left:3px solid var(--t); }
#dmg-report .dr-row.ct { border-left-color:var(--ct); }
#dmg-report .dr-row.t .dr-name { color:var(--t); } #dmg-report .dr-row.ct .dr-name { color:var(--ct); }
#dmg-report .dr-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#dmg-report .dr-hits { font-size:12px; color:var(--dim); letter-spacing:.5px; }
#dmg-report .dr-dmg { text-align:right; font-size:16px; font-weight:800; color:var(--ink); }
#dmg-report .dr-kill { color:var(--hot); font-size:12px; text-align:center; }
#dmg-report .dr-row.killed .dr-dmg { color:var(--hot); }
@media (max-width:900px) { #dmg-report { top:96px; min-width:230px; } #dmg-report .dr-row { font-size:12px; } }

/* top-right: killfeed */
#killfeed { position:absolute; right:16px; top:0; display:flex; flex-direction:column; gap:3px; align-items:flex-end; max-width:340px; }
.feed-item { font-size:14px; font-weight:700; letter-spacing:.4px; padding:3px 10px; background:linear-gradient(90deg, transparent, rgba(4,8,12,.6) 22%); border-right:2px solid var(--faint); }
.feed-item.headshot { border-right-color:var(--hot); }
.feed-item .killer.ct, .feed-item .victim.ct { color:var(--ct); } .feed-item .killer.t, .feed-item .victim.t { color:var(--t); }
.feed-item .wpn { color:var(--dim); font-size:11px; letter-spacing:1.5px; margin:0 8px; text-transform:uppercase; }

/* bottom corners */
#bottom-bar { position:absolute; bottom:18px; left:22px; right:22px; display:flex; justify-content:space-between; align-items:flex-end; }
#health-panel { display:flex; flex-direction:column; gap:2px; }
#money { font-size:20px; font-weight:800; letter-spacing:1px; color:var(--cash); font-variant-numeric:tabular-nums; margin-bottom:2px; transform-origin:left center; }
#money.bump { animation:cashBump .45s ease-out; }
@keyframes cashBump { 0% { transform:scale(1.25); color:#fff; } 100% { transform:scale(1); } }
.bar-row { display:flex; align-items:center; gap:10px; }
.bar-row .ico { width:18px; font-size:10px; font-weight:800; letter-spacing:1.5px; color:var(--dim); }
#hp-num { font-size:54px; font-weight:800; line-height:.95; min-width:88px; font-variant-numeric:tabular-nums; }
#armor-num { font-size:22px; font-weight:800; line-height:1; min-width:88px; color:var(--dim); font-variant-numeric:tabular-nums; }
.bar { width:150px; height:4px; background:var(--faint); overflow:hidden; transform:skewX(-20deg); }
.bar-row.ar .bar { height:3px; }
#hp-fill { height:100%; background:var(--ink); box-shadow:0 0 10px rgba(255,255,255,.6); transition:width .2s; }
.bar.armor #armor-fill { height:100%; background:var(--ct); transition:width .2s; }
#health-panel.low #hp-num { color:var(--hot); animation:blink .8s infinite; }
#health-panel.low #hp-fill { background:var(--hot); box-shadow:0 0 12px var(--hot); }

#weapon-panel { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
#weapon-slots, #nade-slots { display:flex; gap:12px; justify-content:flex-end; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
#nade-slots { margin-bottom:4px; }
.wslot, .nslot { color:var(--dim); display:flex; align-items:center; gap:5px; transition:color .15s; }
.wslot b, .nslot b { font-size:10px; min-width:15px; height:15px; line-height:15px; text-align:center; box-shadow:inset 0 0 0 1px var(--faint); border-radius:2px; text-shadow:none; }
.nslot i { font-style:normal; opacity:.8; }
.wslot.active, .nslot.active { color:var(--ink); }
.wslot.active b, .nslot.active b { background:var(--gold); color:#111; box-shadow:none; }
.wslot.locked { opacity:.28; }
.nslot.locked:not(.active) { display:none; }  /* only grenades you actually carry */
#weapon-name { font-size:13px; font-weight:800; letter-spacing:4px; color:var(--gold); margin-top:4px; padding-right:2px; }
#ammo { font-weight:800; line-height:.95; font-variant-numeric:tabular-nums; }
#ammo-mag { font-size:58px; }
#ammo-sep { font-size:26px; opacity:.3; margin:0 6px; }
#ammo-reserve { font-size:24px; color:var(--dim); }
#reload-tip { font-size:12px; font-weight:800; letter-spacing:3px; color:var(--gold); animation:blink .6s infinite; }

/* bottom center: controls hint fades after the first seconds on screen */
#hint-bar { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:min(46vw, 640px); text-align:center; font-size:10.5px; letter-spacing:.4px; line-height:1.5; color:var(--dim); animation:hintFade 14s ease-in forwards; }
@keyframes hintFade { 0%,75% { opacity:1; } 100% { opacity:0; } }

@media (max-width:900px) {
  #hint-bar { display:none; }
  #hp-num { font-size:40px; min-width:66px; } #ammo-mag { font-size:42px; }
  .bar { width:100px; }
  .team-score { font-size:28px; padding:0 12px; } #timer { font-size:24px; } #match-info { min-width:110px; }
}
@media (max-width:700px) {
  #minimap { width:110px; height:110px; }
  #killfeed { display:none; }
  #round-label { display:none; }
  #nade-slots { display:none; }
  #bomb-status { top:64px; font-size:11px; letter-spacing:1px; padding:3px 16px; }
}
@keyframes blink { 50% { opacity:.4; } }

/* crosshair */
#crosshair { position:absolute; left:50%; top:50%; width:0; height:0; }
/* crosshair shape is user-configurable — see SETTINGS > CROSSHAIR & HUD */
#crosshair, #ch-preview .ch-wrap { --ch-len:7px; --ch-thick:2px; --ch-color:#3dff7a; }
.ch-dot { position:absolute; left:calc(var(--ch-thick) / -2 - 0.5px); top:calc(var(--ch-thick) / -2 - 0.5px);
  width:calc(var(--ch-thick) + 1px); height:calc(var(--ch-thick) + 1px);
  background:var(--ch-color); border-radius:50%; box-shadow:0 0 4px #000; }
.ch-nodot .ch-dot { display:none; }
.ch-line { position:absolute; background:var(--ch-color); box-shadow:0 0 3px #000; }
.ch-t { left:calc(var(--ch-thick) / -2); top:calc(-1 * (var(--ch-len) + var(--gap,6px))); width:var(--ch-thick); height:var(--ch-len); }
.ch-b { left:calc(var(--ch-thick) / -2); top:var(--gap,6px); width:var(--ch-thick); height:var(--ch-len); }
.ch-l { top:calc(var(--ch-thick) / -2); left:calc(-1 * (var(--ch-len) + var(--gap,6px))); height:var(--ch-thick); width:var(--ch-len); }
.ch-r { top:calc(var(--ch-thick) / -2); left:var(--gap,6px); height:var(--ch-thick); width:var(--ch-len); }
#hitmarker { position:absolute; left:50%; top:50%; opacity:0; }
#hitmarker span { position:absolute; width:10px; height:2px; background:#fff; }
#hitmarker span:nth-child(1){ transform:translate(-14px,-10px) rotate(45deg);} #hitmarker span:nth-child(2){ transform:translate(4px,-10px) rotate(-45deg);}
#hitmarker span:nth-child(3){ transform:translate(-14px,8px) rotate(-45deg);} #hitmarker span:nth-child(4){ transform:translate(4px,8px) rotate(45deg);}
#hitmarker.show { animation:hitpop .25s ease-out; } #hitmarker.kill span { background:#ff3b3b; }
@keyframes hitpop { 0%{opacity:1; transform:scale(1.35);} 100%{opacity:0; transform:scale(.9);} }
#scope-overlay { position:absolute; inset:0; background:radial-gradient(circle at center, transparent 26%, #000 27%); }
#scope-circle::after { content:'+'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(0,0,0,.8); font-size:28px; }
#scope-overlay::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:#000; }
#scope-overlay::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#000; }
#damage-vignette { position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at center, transparent 40%, rgba(255,0,0,.55) 100%); transition:opacity .1s; }
#heal-flash { position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,255,140,.35) 100%); }
/* tactical overlays: full-white flash blindness + burning edge glow */
#flash-overlay { position:absolute; inset:0; opacity:0; background:#fff; pointer-events:none; }
#flash-after { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; filter:grayscale(.6) brightness(1.8) blur(1px); mix-blend-mode:screen; }
#burn-overlay { position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at center, transparent 35%, rgba(255,90,0,.65) 100%); pointer-events:none; }
/* piss blindness: yellow wash with drips that melt down the lens, opacity driven by js/pee.js */
#pee-overlay { position:absolute; inset:-6%; opacity:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(216,197,49,.0) 0 26px, rgba(216,197,49,.55) 26px 34px, rgba(160,140,10,.65) 34px 38px, rgba(216,197,49,0) 38px 64px),
    radial-gradient(ellipse at center, rgba(216,197,49,.28) 30%, rgba(190,165,20,.6) 100%);
  filter:url(#pee-melt) saturate(1.3); animation:peeDrip 1.1s linear infinite; }
@keyframes peeDrip { 0%{ transform:translateY(-2%) skewX(.6deg); } 50%{ transform:translateY(2%) skewX(-.6deg); } 100%{ transform:translateY(-2%) skewX(.6deg); } }
/* weed trip: breathing rainbow wash, opacity driven by js/weed.js */
#trip-overlay { position:absolute; inset:-10%; opacity:0; pointer-events:none; mix-blend-mode:overlay;
  background:conic-gradient(from 0deg, rgba(255,0,128,.35), rgba(0,255,128,.35), rgba(0,128,255,.35), rgba(255,255,0,.35), rgba(255,0,128,.35));
  filter:blur(30px) saturate(1.6); animation:tripSpin 7s linear infinite; }
@keyframes tripSpin { to { transform:rotate(360deg) scale(1.15); } }
#direction-indicator { position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px; opacity:0; }
#direction-indicator .dmg-arrow { position:absolute; left:50%; top:-14px; margin-left:-12px; border:12px solid transparent; border-bottom:18px solid rgba(255,40,40,.9); }

#respawn-overlay { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); text-align:center; background:rgba(120,0,0,.72); padding:18px 34px; border-radius:10px; border:1px solid #ff5252; }
#respawn-text { font-size:18px; font-weight:700; } #respawn-timer { font-size:15px; margin-top:6px; }
#spectate-text { font-size:15px; font-weight:800; color:#7dff9a; margin-top:8px; letter-spacing:1px; }
#spectate-hint { font-size:12px; opacity:.75; margin-top:4px; }
#bomb-status { position:absolute; left:50%; top:90px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:linear-gradient(90deg, transparent, rgba(4,8,12,.62) 18%, rgba(4,8,12,.62) 82%, transparent); border:0; border-bottom:2px solid rgba(255,176,32,.7); padding:4px 26px; font-weight:800; font-size:14px; letter-spacing:2px; white-space:nowrap; }
#bomb-status.planted { border-bottom-color:#ff5252; animation:blink 1s infinite; }
#bomb-status.ct { border-bottom-color:#2e9bff; }
#bomb-status .t { color:#ffb020; } #bomb-status .ct { color:#6db3ff; }
#bomb-timer { font-variant-numeric:tabular-nums; color:#ffd76d; }
#bomb-status.planted #bomb-timer { color:#ff6b6b; }
#interact-bar { position:absolute; left:50%; top:58%; transform:translateX(-50%); text-align:center; background:rgba(5,10,16,.8); border:1px solid #ffd76d; border-radius:8px; padding:10px 18px; min-width:260px; }
#interact-label { font-weight:900; letter-spacing:2px; font-size:15px; margin-bottom:6px; }
.interact-track { height:10px; background:#222; border-radius:5px; overflow:hidden; }
#interact-fill { height:100%; width:0%; background:linear-gradient(90deg,#ffb020,#ff5252); transition:width .05s linear; }
#interact-fill.defuse { background:linear-gradient(90deg,#2e9bff,#7ad7ff); }
#interact-hint { font-size:11px; opacity:.7; margin-top:5px; }
#announce { position:absolute; left:50%; top:24%; transform:translateX(-50%); font-size:34px; font-weight:900; letter-spacing:2px; text-shadow:0 3px 12px #000; text-align:center; pointer-events:none; z-index:25; display:flex; flex-direction:column; align-items:center; gap:8px; width:max-content; max-width:90vw; }
#announce .announce-title { font-size:32px; font-weight:900; letter-spacing:2px; text-shadow:0 3px 14px #000; }
#announce .announce-music { font-size:13px; font-weight:800; letter-spacing:1.5px; color:#ffd76d; text-shadow:0 2px 8px rgba(0,0,0,0.9); opacity:0.95; display:inline-flex; align-items:center; gap:8px; background:rgba(6,10,18,0.85); padding:6px 18px; border-radius:24px; border:1px solid rgba(255,215,109,0.45); box-shadow:0 4px 18px rgba(0,0,0,0.6); text-transform:uppercase; animation:musicBadgeGlow 1.8s ease-in-out infinite alternate; }
@keyframes musicBadgeGlow {
  0% { transform:scale(0.98); box-shadow:0 0 10px rgba(255,215,109,0.2), 0 4px 18px rgba(0,0,0,0.6); }
  100% { transform:scale(1.02); box-shadow:0 0 20px rgba(255,215,109,0.5), 0 4px 22px rgba(0,0,0,0.8); }
}

/* buy menu */
#buy-menu { position:fixed; left:50%; top:50%; z-index:30; width:min(860px,94vw); padding:18px 20px 14px;
  background:linear-gradient(180deg,rgba(14,19,30,.92),rgba(6,9,15,.94)); border:1px solid rgba(255,255,255,.08); border-radius:10px;
  box-shadow:0 30px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-47%) scale(.98);
  transition:opacity .12s ease, transform .16s cubic-bezier(.2,.8,.2,1), visibility 0s linear .16s; }
#buy-menu.open { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-50%) scale(1); transition:opacity .1s ease, transform .14s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.bm-head { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.bm-title { font-weight:900; letter-spacing:4px; font-size:18px; color:#fff; }
.bm-money { font-weight:900; font-size:22px; color:#8dffa8; font-variant-numeric:tabular-nums; transition:transform .12s; }
.bm-money.pulse { transform:scale(1.12); }
.bm-timer { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:#aab4c3; font-variant-numeric:tabular-nums; }
.bm-timer-track { width:120px; height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
#buy-timer-fill { height:100%; width:100%; background:#ffd76d; transform-origin:left; will-change:transform; }
.bm-timer.low #buy-timer-fill { background:#ff6b6b; } .bm-timer.low { color:#ff8b8b; }
.bm-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bm-col h4 { font-size:11px; letter-spacing:2px; color:#7f8a9c; margin:0 0 6px 2px; font-weight:800; }
.buy-item { position:relative; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; width:100%; margin-bottom:6px;
  background:rgba(255,255,255,.035); color:#e8eef5; border:1px solid rgba(255,255,255,.07); border-radius:6px; padding:9px 10px; cursor:pointer; text-align:left; pointer-events:auto; font:inherit;
  transition:background .08s, border-color .08s, transform .08s; }
.buy-item kbd { grid-row:1 / span 2; }
.buy-item b { font-size:14px; font-weight:800; }
.bi-price { font-style:normal; font-weight:800; font-size:13px; color:#8dffa8; font-variant-numeric:tabular-nums; }
.bi-sub { grid-column:2; font-size:11px; opacity:.55; }
.bi-state { grid-column:3; grid-row:2; font-style:normal; font-size:10px; font-weight:800; letter-spacing:1px; text-align:right; opacity:.8; }
.buy-item:hover, .buy-item.hover { background:rgba(255,215,109,.12); border-color:rgba(255,215,109,.55); }
.buy-item:active, .buy-item.press { transform:scale(.98); }
.buy-item.poor .bi-price { color:#ff7a7a; } .buy-item.poor { opacity:.55; }
.buy-item.owned { border-color:rgba(141,255,168,.35); } .buy-item.owned .bi-state { color:#8dffa8; }
.buy-item.maxed { opacity:.45; }
.buy-item.bought { animation:biBought .35s ease-out; }
.buy-item.denied { animation:biDenied .28s ease-out; }
@keyframes biBought { 0% { background:rgba(141,255,168,.35); border-color:#8dffa8; } 100% { } }
@keyframes biDenied { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-4px); border-color:#ff6b6b; } 75% { transform:translateX(4px); border-color:#ff6b6b; } }
#buy-menu kbd, #hud kbd { display:inline-block; min-width:20px; text-align:center; font:800 11px/18px inherit; font-family:inherit; padding:0 5px; border-radius:4px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#cfd7e3; }
.bm-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; font-size:12px; min-height:20px; }
.bm-keys { opacity:.5; }
#buy-toast { font-weight:800; letter-spacing:.5px; opacity:0; transition:opacity .15s; }
#buy-toast.show { opacity:1; } #buy-toast.ok { color:#8dffa8; } #buy-toast.no { color:#ff7a7a; }
#buy-cursor { position:fixed; left:0; top:0; z-index:31; width:18px; height:18px; pointer-events:none; display:none; will-change:transform;
  background:no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 1 L1 15 L5 11 L8 17 L10.5 16 L7.5 10 L13 10 Z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#buy-cursor.on { display:block; }
@media (max-width:700px) { .bm-cols { grid-template-columns:1fr; } }

/* menus */
#main-menu,#pause-menu,#end-screen { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%, rgba(40,70,120,.55), rgba(4,6,10,.92)), url('') ; }
#pause-menu,#end-screen { background:rgba(3,5,9,.78); }
.menu-card { background:rgba(10,15,24,.94); border:1px solid rgba(255,215,109,.35); border-radius:14px; padding:30px 34px; width:min(720px,94vw); max-height:92vh; overflow:auto; text-align:center; box-shadow:0 20px 80px rgba(0,0,0,.6); }
.menu-card.small { width:min(440px,92vw); }
.menu-badge { display:inline-block; font-size:11px; letter-spacing:2px; background:#1c2a44; padding:4px 12px; border-radius:20px; color:#9fc2ff; margin-bottom:10px; }
.menu-card h1 { font-size:44px; letter-spacing:1px; } .menu-card h1 span { color:#ffb020; }
.tagline { opacity:.75; margin:6px 0 16px; }
.menu-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; margin-bottom:16px; }
.menu-columns h3 { font-size:13px; letter-spacing:1px; color:#ffd76d; margin-bottom:6px; }
.menu-columns ul { list-style:none; font-size:13.5px; line-height:1.65; opacity:.9; }
#play-btn,#resume-btn,#again-btn { pointer-events:auto; cursor:pointer; background:linear-gradient(180deg,#ffb020,#e07f00); border:none; color:#111; font-weight:900; font-size:18px; letter-spacing:1px; padding:14px 30px; border-radius:10px; width:100%; margin-top:6px; }
#play-btn:hover,#resume-btn:hover,#again-btn:hover { filter:brightness(1.1); }
/* multiplayer */
#mp-panel { margin-top:14px; background:#0e1626; border:1px solid rgba(46,155,255,.35); border-radius:10px; padding:12px 14px; text-align:left; }
.mp-row { display:flex; gap:10px; margin:6px 0; flex-wrap:wrap; align-items:center; }
.mp-row label { font-size:12px; letter-spacing:1px; opacity:.9; display:flex; gap:6px; align-items:center; }
.mp-row input, .mp-row select { pointer-events:auto; background:#141c2a; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:6px 8px; font-size:13px; }
#mp-name { width:130px; } #mp-url { flex:1; min-width:220px; font-family:monospace; font-size:12px; }
.mp-url-label { flex:1; }
.mp-btns { gap:8px; }
.mp-btn { pointer-events:auto; cursor:pointer; flex:1; border:none; border-radius:8px; padding:12px; font-weight:900; letter-spacing:1px; font-size:14px; }
.mp-btn.solo { background:linear-gradient(180deg,#3a4b66,#232f47); color:#fff; border:1px solid rgba(255,255,255,.2); }
.mp-btn.online { background:linear-gradient(180deg,#2e9bff,#1663c7); color:#fff; }
.mp-btn:hover { filter:brightness(1.12); } .mp-btn:disabled { opacity:.55; cursor:wait; }
#mp-note { font-size:12px; opacity:.7; }
.ghost { pointer-events:auto; cursor:pointer; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; padding:10px; border-radius:8px; width:100%; margin-top:8px; }
.menu-row { display:flex; gap:14px; align-items:center; justify-content:center; margin-top:12px; font-size:13px; opacity:.85; flex-wrap:wrap; }
.menu-row select { pointer-events:auto; background:#141c2a; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:5px 8px; }
#loading-note { margin-top:10px; font-size:12px; opacity:.6; }
#end-stats { margin:12px 0; font-size:14px; line-height:1.7; background:#141c2a; border-radius:8px; padding:10px; }
@media (max-width:700px){ .menu-columns{grid-template-columns:1fr;}  }


/* ---------------- Settings panel ---------------- */
#settings-menu { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(3,5,9,.86); backdrop-filter:blur(2px); }
#settings-menu.hidden { display:none; }
.settings-card { width:min(620px,94vw); text-align:left; padding:24px 26px; }
.settings-card h2 { text-align:center; letter-spacing:3px; margin-bottom:16px; }
.set-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.set-tab { pointer-events:auto; cursor:pointer; flex:1 1 96px; background:#141c2a; color:#cfd8e6;
  border:1px solid rgba(255,255,255,.15); border-radius:7px; padding:9px 6px;
  font:inherit; font-size:11px; font-weight:800; letter-spacing:1px; }
.set-tab.active { background:linear-gradient(180deg,#3a4b66,#232f47); color:#fff; border-color:rgba(255,215,109,.55); }
.set-tab:hover { filter:brightness(1.18); }
#set-body { display:flex; flex-direction:column; max-height:44vh; overflow-y:auto; padding-right:6px; }
.set-row { display:flex; align-items:center; gap:12px; padding:9px 2px; font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.07); }
.set-row:last-child { border-bottom:none; }
.set-name { flex:1 1 auto; opacity:.9; }
.set-row input[type=range] { pointer-events:auto; flex:0 0 190px; accent-color:#ffb020; }
.set-row input[type=checkbox] { pointer-events:auto; width:17px; height:17px; accent-color:#ffb020; margin:0; }
.set-row input[type=color] { pointer-events:auto; width:48px; height:26px; background:none; padding:0;
  border:1px solid rgba(255,255,255,.25); border-radius:5px; }
.set-row select { pointer-events:auto; background:#141c2a; color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:6px; padding:5px 8px; font:inherit; font-size:12px; }
.set-val { flex:0 0 56px; text-align:right; color:#ffd76d; font-weight:800; font-size:12px;
  font-variant-numeric:tabular-nums; }
.set-hint { font-size:11px; opacity:.6; margin-top:12px; text-align:center; }
.set-actions { display:flex; gap:8px; margin-top:12px; }
.set-actions .ghost { margin-top:0; }
#ch-preview { position:relative; height:110px; margin-bottom:12px; border-radius:8px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(ellipse at 50% 45%, #5d7355, #26313f 72%); }
#ch-preview.hidden { display:none; }
#ch-preview .ch-wrap { position:absolute; left:50%; top:50%; width:0; height:0; }


/* blood on the lens — splattered on damage and on kills made in your face */
#gore-overlay { position:absolute; inset:-6%; opacity:0; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  mix-blend-mode:multiply; transition:opacity .08s linear; will-change:opacity; z-index:3; }

#smoke-screen { position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none; background:radial-gradient(ellipse at center, #b9b5ad 0%, #a9a59d 60%, #97938b 100%); }

#pickup-hint { position:absolute; left:50%; top:64%; transform:translateX(-50%); background:rgba(5,10,16,.78); border:1px solid #9fd3ff; color:#dff1ff; border-radius:6px; padding:6px 14px; font-weight:700; letter-spacing:1px; font-size:13px; pointer-events:none; white-space:nowrap; }

/* scoreboard (hold TAB) */
#scoreboard { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:20; background:rgba(3,5,9,.55); }
.sb-card { width:min(640px,92vw); max-height:80vh; overflow:auto; background:rgba(10,15,24,.95); border:1px solid rgba(255,215,109,.4); border-radius:10px; padding:14px 16px; font-family:var(--hud-font); }
.sb-title { display:flex; justify-content:space-between; align-items:center; font-weight:900; letter-spacing:2px; font-size:16px; margin-bottom:10px; }
.sb-title .sb-mid { font-size:11px; letter-spacing:2px; opacity:.6; }
#sb-ct { color:var(--ct); } #sb-t { color:var(--t); }
.sb-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sb-team h4 { font-size:11px; letter-spacing:2px; margin-bottom:6px; }
.sb-team h4.ct { color:var(--ct); } .sb-team h4.t { color:var(--t); }
.sb-team table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.sb-team th { font-size:10px; letter-spacing:1.5px; opacity:.55; text-align:right; padding:2px 6px; }
.sb-team th:first-child { text-align:left; }
.sb-team td { padding:3px 6px; text-align:right; border-top:1px solid rgba(255,255,255,.07); }
.sb-team td:first-child { text-align:left; font-weight:700; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-team tr.me td:first-child { color:#ffd76d; }
.sb-team tr.dead td:first-child { opacity:.45; text-decoration:line-through; }
.sb-foot { margin-top:10px; font-size:11px; letter-spacing:1px; opacity:.6; text-align:center; }
@media (max-width:700px){ .sb-cols{grid-template-columns:1fr;} }