* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: var(--font-body); color: var(--text); }
canvas#game { display: block; width: 100vw; height: 100vh; }
html, body { overscroll-behavior: none; }
body.mobile { touch-action: none; -webkit-touch-callout: none; }
.hidden { display: none !important; }

/* stop click-drag from selecting HUD/menu text mid-game (bad on Windows),
   but keep real text fields selectable + editable */
body { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; -ms-user-select: text; user-select: text; }

/* ---------- Brand system (single source of truth) ----------
   Font + palette taken from the blitzhop.io logo. Change here, changes everywhere. */
:root {
  --font-display: 'Kanit', system-ui, sans-serif;  /* sporty heavy italic — headings, HUD, buttons */
  --font-body: 'Inter', system-ui, sans-serif;     /* clean readable — everything else */
  --bg: #0a0d14;          /* deep navy from the logo backdrop */
  --text: #eaf2ff;
  --accent: #3d8bff;      /* brand blue (the "hop") */
  --accent2: #34d17a;     /* brand green (the ".io") */
  --danger: #ff5d6c;
  --panel: rgba(16, 20, 30, 0.92);
  --line: rgba(255, 255, 255, 0.09);
}

/* thin, subtle scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* ---------- Crosshair (customizable: 4 arms + optional dot) ---------- */
#crosshair {
  position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 10; pointer-events: none;
  --ch-color: #00e676; --ch-len: 7px; --ch-thick: 2px; --ch-gap: 4px; --ch-outline: 1px;
}
#crosshair .ch-arm, #crosshair .ch-dot {
  position: absolute; background: var(--ch-color);
  box-shadow: 0 0 0 var(--ch-outline) rgba(0,0,0,0.85);
}
#crosshair .ch-t { left: calc(var(--ch-thick) / -2); bottom: var(--ch-gap); width: var(--ch-thick); height: var(--ch-len); }
#crosshair .ch-b { left: calc(var(--ch-thick) / -2); top: var(--ch-gap); width: var(--ch-thick); height: var(--ch-len); }
#crosshair .ch-l { top: calc(var(--ch-thick) / -2); right: var(--ch-gap); height: var(--ch-thick); width: var(--ch-len); }
#crosshair .ch-r { top: calc(var(--ch-thick) / -2); left: var(--ch-gap); height: var(--ch-thick); width: var(--ch-len); }
#crosshair .ch-dot { left: calc(var(--ch-thick) / -2); top: calc(var(--ch-thick) / -2); width: var(--ch-thick); height: var(--ch-thick); }

/* ---------- Sniper scope (AWP) ---------- */
#scope { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
/* central clear circle; a huge box-shadow blacks out everything around it */
#scope-circle {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 82vh; height: 82vh; border-radius: 50%;
  box-shadow: 0 0 0 100vmax #000, inset 0 0 0 3px rgba(0,0,0,0.9), inset 0 0 40px 8px rgba(0,0,0,0.6);
}
/* crosshair reticle: crisp thin full-length lines through the centre */
#scope::before, #scope::after { content: ""; position: fixed; background: rgba(0,0,0,0.92); }
#scope::before { left: 0; top: 50%; width: 100%; height: 1px; margin-top: -0.5px; }
#scope::after { top: 0; left: 50%; width: 1px; height: 100%; margin-left: -0.5px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud-bl { position: absolute; left: 22px; bottom: 18px; }
.hud-br { position: absolute; right: 26px; bottom: 18px; text-align: right; }
#speed { font-family: var(--font-display); font-style: italic; font-size: 24px; font-weight: 700; color: #eaf3ff; text-shadow: 0 1px 4px rgba(0,0,0,0.8); font-variant-numeric: tabular-nums; }

/* health */
#match-timer {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-style: italic; font-size: 24px; font-weight: 800;
  color: #fff; background: rgba(10,13,20,0.62); border: 1px solid var(--line);
  padding: 4px 16px; border-radius: 12px; backdrop-filter: blur(3px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8); font-variant-numeric: tabular-nums;
}
/* team deathmatch score (below the match timer) */
#teamscore {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(10,13,20,0.62); backdrop-filter: blur(3px);
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8); font-variant-numeric: tabular-nums;
}
#teamscore .ts-a, #teamscore .ts-b { padding: 3px 16px; font-size: 22px; color: #fff; min-width: 30px; text-align: center; }
#teamscore .ts-a { background: rgba(200,50,50,0.55); }
#teamscore .ts-b { background: rgba(50,90,200,0.55); }
#teamscore .ts-sep { padding: 3px 12px; font-size: 12px; letter-spacing: 1px; color: #cdd7e6; display: flex; align-items: center; }
#teamscore.mine-a .ts-a { box-shadow: inset 0 -3px 0 #ffd94e; }
#teamscore.mine-b .ts-b { box-shadow: inset 0 -3px 0 #ffd94e; }

#health { position: relative; width: 220px; height: 26px; margin-bottom: 10px; }
#healthbar { position: absolute; inset: 0; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, #ff5d6c, #ffb14e); border-radius: 5px; transition: transform .12s ease, background .2s; }
#healthnum { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-style: italic; font-size: 18px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85); font-variant-numeric: tabular-nums; }

/* kills / deaths / assists / score — top-left */
#kda { position: absolute; left: 22px; top: 18px; display: flex; gap: 8px; }
#kda .kda-item { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9px;
  background: rgba(10,13,20,0.62); border: 1px solid var(--line); backdrop-filter: blur(3px); }
#kda .kda-lbl { font-size: 10px; font-weight: 800; letter-spacing: 1px; opacity: 0.7; }
#kda .kda-item span:last-child { font-family: var(--font-display); font-style: italic; font-size: 19px; font-weight: 800;
  color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
#kda .k .kda-lbl { color: var(--accent2); }
#kda .d .kda-lbl { color: var(--danger); }
#kda .a .kda-lbl { color: var(--accent); }
#kda .s .kda-lbl { color: #ffd54a; }
#kda .s span:last-child { color: #ffd54a; }

/* weapon hotbar */
#hotbar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
#hotbar .slot { position: relative; width: 66px; height: 40px; border-radius: 10px;
  background: rgba(10,12,18,0.5); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
#hotbar .slot.active { border-color: var(--accent); background: rgba(78,161,255,0.16); }
#hotbar .slot img { max-width: 56px; max-height: 34px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
#hotbar .slot .num { position: absolute; top: 2px; left: 5px; font-size: 10px; font-weight: 700; color: #8592a6; }
#hotbar .slot.active .num { color: var(--accent); }

/* ammo / weapon */
#weaponname { font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #cfe0f5; text-shadow: 0 1px 4px rgba(0,0,0,0.85); }
#ammo { font-family: var(--font-display); font-style: italic; font-size: 34px; font-weight: 800; color: #eaf3ff; text-shadow: 0 2px 6px rgba(0,0,0,0.9); font-variant-numeric: tabular-nums; }
#weaponname { font-family: var(--font-display); }

/* killfeed */
/* Killfeed scales with the viewport (was fixed px, which looked huge on small
   screens / tiny on ultrawide). clamp() keeps it proportional between phones and
   big monitors. */
#killfeed { position: absolute; right: clamp(8px, 1.4vw, 18px); top: clamp(10px, 1.4vw, 16px);
  display: flex; flex-direction: column; gap: clamp(4px, 0.7vw, 8px); align-items: flex-end; max-width: 60vw; }
#killfeed .kf { display: flex; align-items: center; gap: clamp(5px, 0.8vw, 10px); font-size: clamp(11px, 1.35vw, 17px); font-weight: 600;
  padding: clamp(4px, 0.6vw, 8px) clamp(8px, 1.1vw, 15px); border-radius: 13px; background: rgba(10,12,18,0.55); text-shadow: 0 1px 3px rgba(0,0,0,0.9); animation: fadein .1s; }
#killfeed .kf-name { color: #cfd8e6; }
#killfeed .kf-name.me { color: #6bb6ff; }
#killfeed .kf-v { color: #ff8a8a; }
#killfeed .kf-wpn { display: flex; align-items: center; }
#killfeed .kf-img { height: clamp(20px, 2.5vw, 32px); width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
#killfeed .kf-hs { display: flex; align-items: center; }
#killfeed .kf-hs-img { height: clamp(14px, 1.75vw, 22px); width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
#killfeed .kf-name .badge { height: clamp(13px, 1.5vw, 19px); width: auto; vertical-align: middle; margin-right: 4px; }

/* hitmarker */
#hitmarker { position: fixed; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); z-index: 11; pointer-events: none; }
#hitmarker::before, #hitmarker::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: #fff; }
#hitmarker::before { transform: translate(-50%,-50%) rotate(45deg); }
#hitmarker::after { transform: translate(-50%,-50%) rotate(-45deg); }
#hitmarker.hs::before, #hitmarker.hs::after { background: #ffcf4e; }

/* floating damage numbers */
#dmgnums { position: fixed; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; }
#dmgnums .dmgnum { position: absolute; transform: translate(-50%,-50%); font-size: 22px; font-weight: 900;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
  letter-spacing: -0.5px; will-change: transform, opacity; animation: dmgfloat 0.85s ease-out forwards; }
#dmgnums .dmgnum.hs { color: #ffd54a; font-size: 26px; }
@keyframes dmgfloat {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%,-70%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-150%) scale(1); }
}

/* kill banner (+points + trick bonuses / multikill) */
#killbanner { position: fixed; left: 50%; top: 24%; transform: translate(-50%, 0) scale(0.9);
  z-index: 13; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 5px;
  opacity: 0; transition: opacity .12s, transform .12s; }
#killbanner.show { opacity: 1; animation: kbpop .28s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes kbpop { 0% { transform: translate(-50%,0) scale(0.6); } 60% { transform: translate(-50%,0) scale(1.12); } 100% { transform: translate(-50%,0) scale(1); } }
/* prominent "ELIMINATED <name>" line so you don't have to read the killfeed */
#killbanner .kb-elim { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 22px;
  letter-spacing: 1px; color: #ff6b5d; text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  background: rgba(10,13,20,0.5); padding: 3px 16px; border-radius: 10px; }
#killbanner .kb-elim b { color: #fff; }
#killbanner .kb-row { display: flex; align-items: center; gap: 8px; }
#killbanner .kb-hs { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #ff6b5d;
  background: rgba(255,93,108,0.16); border: 1px solid rgba(255,93,108,0.45); border-radius: 6px; padding: 2px 8px; }
#killbanner .kb-pts { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 34px;
  color: #ffd54a; text-shadow: 0 2px 8px rgba(0,0,0,0.85); }
#killbanner .kb-multi { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 20px;
  color: #fff; letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0,0,0,0.9); }
#killbanner .kb-bonus { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--accent);
  background: rgba(61,139,255,0.16); border: 1px solid rgba(61,139,255,0.4); border-radius: 6px; padding: 2px 8px;
  display: inline-flex; align-items: center; gap: 5px; }
#killbanner .kb-icon { height: 15px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

/* death overlay */
#death { position: fixed; inset: 0; z-index: 16; display: flex; align-items: center; justify-content: center;
  background: rgba(80,0,0,0.28); backdrop-filter: grayscale(0.6) blur(1px); pointer-events: none; }
#death-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 40px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
#death-by { font-size: 18px; font-weight: 700; color: #ff9aa2; }
#death-by .hs { color: #ffcf4e; }
#death-by:empty { display: none; }
#death-sub { font-size: 15px; font-weight: 600; letter-spacing: 2px; color: #ffd0d0; }
#match-end { position: fixed; inset: 0; z-index: 17; display: flex; align-items: center; justify-content: center;
  background: rgba(10,20,40,0.6); backdrop-filter: blur(4px); pointer-events: auto; }
#match-end-text { font-size: 16px; font-weight: 600; color: #b9c6db; text-align: center; margin-top: 10px; }
#match-end-gold { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
  padding: 10px 20px; border-radius: 14px; background: rgba(255,193,7,0.10); border: 1px solid rgba(255,193,7,0.28);
  animation: megPop .35s cubic-bezier(.2,1.3,.3,1) both; }
.meg-coin { font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 4px rgba(255,193,7,0.4)); }
.meg-val { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 28px; color: #ffc107;
  text-shadow: 0 2px 8px rgba(255,193,7,0.3); }
.meg-lbl { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #c9a84e; }
@keyframes megPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
#dash { margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--accent2); text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
#dash span { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(107,208,138,0.2); border: 1px solid rgba(107,208,138,0.5); font-size: 11px; }
#dash.cooling { color: #7c8798; }
#dash.cooling span { background: rgba(124,135,152,0.15); border-color: rgba(124,135,152,0.4); }

/* ---------- Debug HUD ---------- */
#debug {
  position: fixed; left: 12px; top: 12px; z-index: 11; pointer-events: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; color: #b6f0c8; white-space: pre;
  background: rgba(6, 9, 13, 0.6); padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(107,208,138,0.25); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

/* ---------- Chat ---------- */
/* sits above the bottom-left health/speed/dash HUD (which rises to ~110px) so
   the chat box never overlaps it */
#chat { position: fixed; left: 22px; bottom: 132px; width: 420px; max-width: 46vw; z-index: 40; }
/* closed: transient feed, never intercepts the mouse. justify-content:flex-end
   anchors it to the bottom so the NEWEST lines show and older ones clip off the
   top — without it, overflow:hidden clipped the newest lines below the fold. */
#chatlog { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; margin-bottom: 6px; max-height: 34vh; overflow: hidden; pointer-events: none; }
#chatlog .line { font-size: 14px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,0.9); opacity: 0; animation: fadein .12s forwards; }
#chatlog .line.fade { transition: opacity 1s; opacity: 0.0; }
#chatlog .line { background: rgba(10,13,20,0.5); border-radius: 7px; padding: 3px 9px; width: fit-content; max-width: 100%; }
#chatlog .line b { color: var(--accent); }
#chatlog .line .sys { color: var(--accent2); font-style: italic; }
/* open: a real scrollable box with the full backlog; every line stays visible */
#chat.open #chatlog, body.paused #chatlog {
  /* flex-start so the scrollable box grows top-down and the top stays reachable
     (flex-end + scroll makes the top unscrollable) */
  justify-content: flex-start;
  overflow-y: auto; max-height: 40vh; pointer-events: auto;
  background: rgba(6, 9, 13, 0.72); border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent;
}
#chat.open #chatlog .line, body.paused #chatlog .line { opacity: 1 !important; transition: none; }
#chat.open #chatlog::-webkit-scrollbar, body.paused #chatlog::-webkit-scrollbar { width: 8px; }
#chat.open #chatlog::-webkit-scrollbar-thumb, body.paused #chatlog::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 8px; }

/* persistent chat box (shows the hint until you press Enter to type) */
#chatbox { width: 100%; }
#chathint { display: inline-block; padding: 8px 13px; border-radius: 11px; font-size: 13px; color: #b9c6db;
  background: rgba(10,13,20,0.72); border: 1px solid var(--line); box-shadow: 0 3px 14px rgba(0,0,0,0.4); }
#chathint b { color: var(--accent); font-weight: 800; }
@keyframes fadein { to { opacity: 1; } }
#chatinput {
  width: 100%; padding: 10px 14px; font-size: 14px; border-radius: 12px; box-sizing: border-box;
  border: 2px solid var(--accent); background: rgba(10,12,18,0.92); color: #fff; outline: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
#chatinput:focus { border-color: var(--accent2); }

/* ---------- Overlays (pause / settings) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(6, 8, 12, 0.66); backdrop-filter: blur(3px);
  /* scroll the overlay when a tall panel won't fit a short screen, and use
     margin:auto on the panel so it still centres when there IS room. Without
     this, a tall settings panel overflowed off-screen and the Back button was
     unreachable — players got stuck. */
  overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch;
}
.panel {
  display: flex; flex-direction: column; gap: 10px; width: min(340px, 100%); padding: 24px; margin: auto;
  max-height: none;
  background: rgba(20, 24, 32, 0.94); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.panel.wide { width: min(480px, 100%); }
/* keep the action row (Back / Reset) pinned so it's always reachable while the
   rest of a long panel scrolls under it */
.panel-actions { position: sticky; bottom: -24px; margin: 8px -24px -24px; padding: 12px 24px 24px;
  background: linear-gradient(180deg, rgba(20,24,32,0), rgba(20,24,32,0.94) 40%); }
.panel-title { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #8b98ad; text-align: center; margin-bottom: 8px; }
.btn {
  font-family: var(--font-display);
  padding: 13px; font-size: 15px; font-weight: 600; letter-spacing: .4px; cursor: pointer;
  border: 1px solid transparent; border-radius: 14px; color: #e8ecf1;
  background: rgba(255,255,255,0.06); transition: background .12s, box-shadow .12s;
}
.btn:hover { background: rgba(255,255,255,0.11); }
.btn.danger { color: #ff8a92; background: rgba(255,93,108,0.12); }
.btn.danger:hover { background: rgba(255,93,108,0.2); }
.btn.ghost { background: transparent; border-color: var(--line); }
.panel-actions { display: flex; gap: 10px; margin-top: 8px; }
.panel-actions .btn { flex: 1; }

/* settings rows */
.set-row { display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: 12px; }
.set-row label { font-size: 13px; color: #b9c4d4; }
.set-hint { font-size: 10px; color: #6f7c90; margin-left: 6px; }
.set-row input[type=range] { width: 100%; accent-color: var(--accent); }
.set-row.text { grid-template-columns: 130px 1fr; }
.set-row.text input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 13px;
  background: rgba(255,255,255,0.05); color: #eaf3ff; border: 1px solid var(--line);
  border-radius: 8px; outline: none;
}
.set-row.text input:focus { border-color: var(--accent); }
.set-row.select { grid-template-columns: 130px 1fr; }
.set-row.select select {
  width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 13px;
  background: rgba(255,255,255,0.05); color: #eaf3ff; border: 1px solid var(--line);
  border-radius: 8px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.set-row.select select:focus { border-color: var(--accent); }
.set-row.select select option { background: #1a2230; color: #eaf3ff; }
.set-row .val { font-size: 13px; font-variant-numeric: tabular-nums; color: #eaf3ff; text-align: right; }
.set-row.toggle { grid-template-columns: 1fr auto; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #2a3340; transition: background .15s; }
.switch span::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #cfd8e6; transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(18px); }
.set-sub { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #7c8798; }
.keybinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 12px; }
.kb-row span { font-size: 13px; color: #b9c4d4; }
.kb-key { min-width: 64px; padding: 6px 10px; font-size: 12px; font-weight: 700; text-align: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.05); color: #eaf3ff; }
.kb-key.listening { border-color: var(--accent); color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* ---------- Loadout picker ---------- */
.lo-slot { margin-bottom: 4px; }
.lo-head { font-size: 11px; font-weight: 800; letter-spacing: 3px; color: #7c8798; margin-bottom: 7px; }
.lo-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-card { flex: 1 1 100px; min-width: 100px; padding: 13px 12px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); transition: border-color .1s, background .1s; }
.lo-card:hover { background: rgba(255,255,255,0.08); }
.lo-card.sel { border-color: var(--accent); background: rgba(78,161,255,0.14); }
.lo-card .lo-icon { display: block; height: 40px; width: 100%; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7)); }
.lo-card .lo-name { font-size: 14px; font-weight: 700; color: #eaf3ff; }
.lo-card .lo-cat { font-size: 11px; color: #8592a6; text-transform: uppercase; letter-spacing: 1px; }
.lo-card .lo-stat { margin-top: 6px; font-size: 11px; color: #9fabbe; font-variant-numeric: tabular-nums; }
.lo-card.locked { position: relative; cursor: default; }
.lo-card.locked .lo-icon, .lo-card.locked .lo-name, .lo-card.locked .lo-cat, .lo-card.locked .lo-stat { opacity: 0.35; }
.lo-card.locked:hover { background: rgba(255,255,255,0.03); }
.lo-lock { position: absolute; top: 8px; right: 8px; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #ffd54a; background: rgba(0,0,0,0.55); padding: 3px 7px; border-radius: 999px; }

/* ---------- Lobby ---------- */
#menu {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(78,161,255,0.14), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(107,208,138,0.10), transparent 60%),
    linear-gradient(180deg, #0c1017, #070a0e);
}
.lobby { display: flex; gap: 26px; align-items: flex-start; width: min(920px, 92vw); }
.lobby-main {
  flex: 1.3; display: flex; flex-direction: column; gap: 16px; padding: 36px 40px;
  background: rgba(20, 24, 32, 0.9); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.brand { font-family: var(--font-display); font-style: italic; font-size: clamp(38px, 8.5vw, 64px); font-weight: 800; letter-spacing: -1px; line-height: 1; color: #fff;
  text-shadow: 0 0 24px rgba(61,139,255,0.25); }
.brand span { color: var(--accent); }
.brand em { font-style: italic; color: var(--accent2); font-size: 0.53em; vertical-align: super; font-weight: 800; }
.brand-sub { font-size: clamp(10px, 2.4vw, 12px); letter-spacing: clamp(2px, 1vw, 5px); color: #6f7c90; margin-top: -6px; }
/* account panel */
#account { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
#account input { padding: 11px 14px; font-size: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.04); color: #fff; outline: none; }
#account input:focus { border-color: var(--accent); }
#login-form { display: flex; flex-direction: column; gap: 8px; }
#username-form { display: flex; gap: 8px; }
#username-form input { flex: 1; }
.acct-row { display: flex; gap: 8px; }
.acct-row .btn { flex: 1; }
#acct-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#acct-name { font-size: 14px; font-weight: 700; color: #cfe0f5; }
#acct-name b { color: var(--accent2); }
#acct-err { font-size: 12px; color: var(--danger); min-height: 0; }
#acct-err:empty { display: none; }

/* scoreboard (Tab) */
#scoreboard { position: fixed; inset: 0; z-index: 18; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8vh; pointer-events: none; }
.sb-card { width: min(560px, 90vw); padding: 20px 24px; border-radius: 18px;
  background: rgba(14,18,26,0.92); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.sb-title { font-size: 13px; font-weight: 800; letter-spacing: 3px; color: #9fb0c6; text-align: center; margin-bottom: 12px; }
.sb-card table { width: 100%; border-collapse: collapse; }
.sb-card th { font-size: 11px; letter-spacing: 1px; color: #6f7c90; text-align: right; padding: 4px 8px; }
.sb-card th:first-child { text-align: left; }
.sb-card td { font-size: 14px; color: #cfd8e6; padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.sb-card td:first-child { text-align: left; font-weight: 600; }
.sb-card tr.me td { color: var(--accent); }
.sb-card td .dev { color: var(--accent2); font-size: 10px; font-weight: 800; margin-left: 6px; }
.sb-card td .bot { color: #8b97a8; font-size: 10px; font-weight: 800; margin-left: 6px; }
/* role badge image (dev / verified / mod) shown before a player's name */
img.badge { height: 15px; width: auto; vertical-align: -3px; margin-right: 4px; image-rendering: auto; }
img.badge.lb { height: 17px; vertical-align: -4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.lb-badge { height: 26px; width: auto; vertical-align: middle; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }
#chatlog .line img.badge { height: 16px; vertical-align: -3px; }
/* team sections (TDM scoreboard) */
.sb-card { width: min(620px, 92vw); }
.sb-team { margin-bottom: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.sb-team:last-child { margin-bottom: 0; }
.sb-team-h { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; font-family: var(--font-display); font-style: italic; font-weight: 800; }
.sb-team.red .sb-team-h { background: rgba(200,50,50,0.28); }
.sb-team.blue .sb-team-h { background: rgba(50,90,200,0.28); }
.sb-team-name { font-size: 15px; letter-spacing: 1px; color: #fff; }
.sb-team-name b { color: var(--accent2); font-style: normal; font-size: 12px; }
.sb-team-score { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.sb-team table { padding: 4px 8px; }
.sb-team td, .sb-team th { padding-left: 12px; padding-right: 12px; }
.sb-empty { text-align: center !important; color: #6f7c90; font-weight: 400 !important; }
#connmsg-text { font-size: 14px; color: #cfd8e6; text-align: center; line-height: 1.5; }

/* loading screen: LOADING + a % bar shown while assets load and we connect, then
   fades out (also covers the pre-welcome spawn so joining fades in at your spot) */
#loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; background: #0a0d14;
  opacity: 1; transition: opacity .45s ease;
  background-image: radial-gradient(900px 500px at 50% 40%, rgba(78,161,255,0.10), transparent 60%); }
#loading.gone { opacity: 0; pointer-events: none; }
#loading .ld-title { font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 34px; letter-spacing: 4px; color: #eaf3ff; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
#loading .ld-bar { width: min(360px, 70vw); height: 12px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,0.08); border: 1px solid var(--line); }
#loading .ld-fill { height: 100%; width: 0%; border-radius: 8px; transition: width .2s ease;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); }
#loading .ld-pct { font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 16px; color: #9fb3cc; font-variant-numeric: tabular-nums; }

.join { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
#nick { flex: 1; padding: 14px 18px; font-size: 16px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.04); color: #fff; outline: none; }
#nick:focus { border-color: var(--accent); }
#play { padding: 14px 32px; font-size: 15px; font-weight: 700; letter-spacing: 1px; cursor: pointer;
  border: none; border-radius: 14px; color: #06131f; background: var(--accent); transition: filter .12s; }
#play:hover { filter: brightness(1.08); }
/* lobby buttons stack a label over a small live player count */
#play, #play-tdm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; }
/* count line only takes space when it has text, so an empty server doesn't leave
   the label floating with a gap under it */
.btn-count { font-size: 10px; font-weight: 600; letter-spacing: .5px; opacity: .8; }
.btn-count:empty { display: none; }
#play .btn-count { color: #0a2233; }
#play-tdm .btn-count { color: var(--accent); }
.ctrl-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.ctrl-legend li { font-size: 12.5px; color: #8592a6; }
.ctrl-legend b { color: #cfe0f5; font-weight: 700; }

.lobby-side { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 250px; max-width: 320px; }
.side-card {
  padding: 20px 22px; background: rgba(16, 20, 28, 0.7); border: 1px solid var(--line); border-radius: 20px;
}
.side-title { font-size: 11px; font-weight: 600; letter-spacing: 3px; color: #6f7c90; margin-bottom: 14px; }
#changelog { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 220px; }

/* player card: loading + account + stats */
#acct-loading { color: #6f7c90; font-size: 20px; letter-spacing: 3px; }
#acct-stats { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.stat-level { margin-bottom: 14px; }
.lvl-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.lvl-num { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 20px; color: #eaf3ff; letter-spacing: 1px; }
.lvl-num b { color: var(--accent); font-size: 22px; }
.lvl-xp { font-size: 11px; letter-spacing: 1px; color: #8592a6; font-variant-numeric: tabular-nums; }
.lvl-xp b { color: #cdd7e6; }
.lvl-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.lvl-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.stat-gold { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px;
  background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.22); border-radius: 12px; }
.stat-gold > span:first-child { font-size: 22px; line-height: 1; }
.stat-gold > b { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 24px; color: #ffc107; flex: 1; }
.stat-gold > span:last-child { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #c9a84e; text-transform: uppercase; }
#acct-stats .stat-kd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
#acct-stats .stat-kd span { font-size: 11px; letter-spacing: 2px; color: #6f7c90; }
#acct-stats .stat-kd b { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 28px; color: var(--accent2); }
#acct-stats .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
#acct-stats .stat-grid > div { background: rgba(10,13,20,0.5); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; }
#acct-stats .stat-grid b { display: block; font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 19px; color: #eaf3ff; }
#acct-stats .stat-grid span { font-size: 9.5px; letter-spacing: 1px; color: #7f8ba0; text-transform: uppercase; }

/* admin panel (built in JS for verified admins) */
.admin-msg { font-size: 12px; color: var(--accent2); min-height: 16px; margin-bottom: 6px; }
.admin-msg.bad { color: var(--danger); }
.admin-forms { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-form { flex: 1 1 200px; display: flex; flex-direction: column; gap: 7px; padding: 12px; background: rgba(10,13,20,0.4); border: 1px solid var(--line); border-radius: 12px; }
.admin-h { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #8ea3bd; text-transform: uppercase; }
.admin-h span { color: #5c6880; font-weight: 400; letter-spacing: 0; text-transform: none; }
.admin-row2 { display: flex; gap: 7px; }
#admin input { background: #1b222c; color: #dff; border: 1px solid #37414f; border-radius: 7px; padding: 8px 10px; font-size: 13px; width: 100%; box-sizing: border-box; }
.admin-list { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; margin: 6px 0 12px; }
.admin-empty { color: #5c6880; font-size: 12px; }

/* top nav (leaderboard + future store / inventory) */
body.in-game #topnav { display: none; }
#topnav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; gap: 4px; padding: 5px; border-radius: 16px;
  background: rgba(14, 18, 27, 0.72); border: 1px solid var(--line); backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35); }
.topnav-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700; letter-spacing: .3px;
  color: #aeb9cc; background: transparent; border: none; border-radius: 12px;
  transition: background .12s, color .12s; }
/* ---------- 1v1 duel HUD ---------- */
#duelhud { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none;
  font-family: var(--font-body); text-shadow: 0 2px 6px rgba(0,0,0,.7); }
#duelhud .dh-score { display: flex; align-items: center; gap: 16px; font-weight: 800; font-size: 20px; color: #dfe8f5; }
#duelhud .dh-a, #duelhud .dh-b { min-width: 120px; opacity: .82; }
#duelhud .dh-a { text-align: right; } #duelhud .dh-b { text-align: left; }
#duelhud .dh-a.lead, #duelhud .dh-b.lead { color: #ffd54a; opacity: 1; }
#duelhud .dh-mid { font-size: 26px; color: #fff; letter-spacing: 1px; padding: 1px 12px; background: rgba(10,14,22,.55); border-radius: 10px; }
#duelhud .dh-status { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; color: #9fb0c8; text-transform: uppercase; }
#duelhud .dh-spec { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 12.5px; color: #cdd8ea;
  background: rgba(10,14,22,.6); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
#duelhud .dh-spec b { color: #ffd54a; }
#duelbanner { position: fixed; top: 34%; left: 50%; transform: translateX(-50%); z-index: 41; pointer-events: none;
  font-family: var(--font-display, var(--font-body)); font-weight: 900; font-size: 44px; letter-spacing: 2px;
  text-align: center; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.75); animation: dbpop .25s ease; }
#duelbanner.win { color: #7df08a; } #duelbanner.lose { color: #ff6b6b; } #duelbanner.warm { color: #ffd54a; font-size: 34px; }
#duelbanner.matchwin { color: #ffd54a; }
#duelbanner .dh-gold { display: block; font-size: 26px; color: #ffd54a; margin-top: 6px; }
@keyframes dbpop { from { transform: translateX(-50%) scale(.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
/* spectators don't need the shooter HUD */
#hud.spectating { display: none; }

/* red claimable-count badge over the Rewards / Quests tabs */
.nav-badge { position: absolute; top: -5px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  background: #e53935; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  border-radius: 9px; box-shadow: 0 1px 3px rgba(0,0,0,.45); pointer-events: none; }
.nav-badge.hidden { display: none; }
/* inventory rarity filter chips */
.inv-rarity { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.inv-rarity.hidden { display: none; }
.rar-chip { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); color: #8592a6; font-weight: 700; font-size: 11.5px; cursor: pointer;
  transition: background .1s, color .1s, border-color .1s; }
.rar-chip:hover { color: #cfe0f5; }
.rar-chip.sel { color: #fff; border-color: var(--rar, #3d8bff); background: color-mix(in srgb, var(--rar, #3d8bff) 22%, transparent); box-shadow: inset 0 0 0 1px var(--rar, #3d8bff); }
.topnav-btn:not(:disabled):hover { background: rgba(255,255,255,0.06); color: #eaf3ff; }
.topnav-btn.active { color: var(--accent); background: rgba(61,139,255,0.12); box-shadow: inset 0 0 0 1px rgba(61,139,255,0.28); }
.topnav-btn.active:hover { background: rgba(61,139,255,0.2); color: #fff; }
.topnav-btn.locked { opacity: 0.75; }
.topnav-btn.locked::after { content: '🔒'; font-size: 10px; margin-left: 6px; }
.topnav-btn.soon { color: #56617a; cursor: default; }
.topnav-btn.soon span { font-size: 8px; font-weight: 800; letter-spacing: 1.2px; color: #56617a;
  padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,0.05); }

/* leaderboard panel */
.lb-tabs { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lb-tabgroup { display: flex; gap: 3px; background: rgba(10,13,20,0.5); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.lb-tab { padding: 7px 15px; border: none; background: transparent; color: #8592a6; font-weight: 700; font-size: 13px; border-radius: 8px; cursor: pointer; transition: background .1s, color .1s; }
.lb-tab.active { background: var(--accent); color: #06131f; }
.lb-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; background: rgba(10,13,20,0.4); border: 1px solid transparent; }
.lb-row[data-uid]:not([data-uid=""]) { cursor: help; }
.lb-row[data-uid]:not([data-uid=""]):hover { border-color: rgba(61,139,255,0.4); background: rgba(61,139,255,0.08); }
.lb-reset { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: #8592a6; margin: -4px 0 12px; }
.lb-reset b { color: var(--accent); }

/* leaderboard hover profile card */
.lb-card { position: fixed; z-index: 60; width: 230px; padding: 14px 16px; border-radius: 14px;
  background: rgba(16,20,30,0.98); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0,0,0,0.5); pointer-events: none; }
.lbc-load { color: #6f7c90; font-size: 13px; }
.lbc-name { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 19px; color: #eaf3ff; margin-bottom: 10px; }
.lbc-stats { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: baseline; }
.lbc-stats span { font-size: 12px; color: #8592a6; }
.lbc-stats b { font-family: var(--font-display); font-style: italic; font-size: 16px; color: #eaf3ff; text-align: right; }
.lbc-date { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11.5px; color: #6f7c90; }
.lb-row.top { background: rgba(61,139,255,0.12); border-color: rgba(61,139,255,0.25); }
.lb-rank { width: 30px; font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 17px; color: #9fb3cc; text-align: center; }
.lb-row.top .lb-rank { color: #ffd54a; }
.lb-name { flex: 1; font-weight: 600; color: #eaf3ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 19px; color: var(--accent2); font-variant-numeric: tabular-nums; }
.lb-empty { color: #6f7c90; text-align: center; padding: 26px; }

/* ---------- full-page screens (Leaderboard / Inventory) ---------- */
.screen { position: fixed; inset: 0; z-index: 20; overflow-y: auto; padding: 84px 24px 28px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(78,161,255,0.14), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(107,208,138,0.10), transparent 60%),
    linear-gradient(180deg, #0c1017, #070a0e); }
.screen-title { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 30px; letter-spacing: 1px; color: #eaf3ff; }

/* leaderboard page */
.lb-wrap { width: min(620px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.lb-wrap .screen-title { text-align: center; }

/* inventory page — sized to the viewport so the character never scrolls off */
#inventory { overflow: hidden; }
.inv-wrap { width: min(1180px, 100%); margin: 0 auto; display: flex; gap: 24px; align-items: stretch; height: calc(100vh - 112px); min-height: 420px; }
.inv-stage { position: relative; flex: 0 0 clamp(340px, 48%, 620px); align-self: start; aspect-ratio: 1 / 1; min-width: 0; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(61,139,255,0.16), transparent 60%), linear-gradient(180deg, #0c1017, #05080c);
  border: 1px solid var(--line); }
#locker-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#locker-canvas:active { cursor: grabbing; }
#locker-mode { position: absolute; top: 14px; left: 14px; }
.locker-hint { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 1px; color: #566178; pointer-events: none; }

.inv-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.inv-title { font-size: 24px; }
.inv-tabs { display: flex; gap: 4px; background: rgba(10,13,20,0.5); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.inv-tab { flex: 1; padding: 9px 8px; border: none; background: transparent; color: #8592a6; font-weight: 700; font-size: 12.5px; border-radius: 9px; cursor: pointer; transition: background .1s, color .1s; }
.inv-tab:hover { color: #cfe0f5; }
.inv-tab.active { background: var(--accent); color: #06131f; }

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; overflow-y: auto; min-height: 0; flex: 1; align-content: start; padding-right: 2px; }
.li-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; cursor: pointer;
  background: rgba(10,13,20,0.5); border: 1px solid var(--line); border-radius: 12px; text-align: left; transition: border-color .1s, background .1s; }
.li-card:hover:not(:disabled) { border-color: rgba(61,139,255,0.4); background: rgba(61,139,255,0.08); }
.li-card.sel { border-color: var(--accent); background: rgba(61,139,255,0.14); box-shadow: inset 0 0 0 1px rgba(61,139,255,0.3); }
.li-card.locked { cursor: default; opacity: 0.55; }
.li-slot { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #56617a; }
.li-cn { font-weight: 700; font-size: 13.5px; color: #eaf3ff; }
.li-portrait { width: 100%; height: 116px; border-radius: 10px; overflow: hidden; margin-bottom: 6px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(61,139,255,0.14), transparent 70%), linear-gradient(180deg, #10151d, #0a0e14);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.li-portrait img { width: 100%; height: 100%; object-fit: contain; }
.li-portrait.spray { background: linear-gradient(180deg, #1a2130, #10151d); }
.li-portrait.spray img { padding: 18px; }
/* character skins carry their rarity via --rar: bottom accent + label */
.li-card.skin .li-portrait { border-bottom: 3px solid var(--rar, var(--line)); }
.li-rar { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.li-card.locked .li-portrait { opacity: 0.5; }
.li-swatch { width: 100%; height: 34px; border-radius: 8px; margin-bottom: 4px;
  background: linear-gradient(135deg, #2a3140, #3d8bff33); border: 1px solid var(--line); }
.li-card.locked .li-swatch { background: repeating-linear-gradient(45deg, #1a1f28, #1a1f28 6px, #141922 6px, #141922 12px); }
.li-lock { position: absolute; top: 8px; right: 10px; font-size: 12px; }

/* toast (transient notices, e.g. inventory locked) */
#toast { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px); z-index: 60;
  background: rgba(16,20,30,0.96); border: 1px solid var(--line); color: #eaf3ff; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.admin-form select { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(10,13,20,0.6); color: #eaf3ff; font-size: 13px; }

/* badge cards — no card background, just the badge */
.badge-card, .badge-card:hover { cursor: default; align-items: center; text-align: center; gap: 4px; padding: 14px 12px;
  background: none; border: none; box-shadow: none; }
.badge-img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.badge-card .li-slot { color: #6f7c90; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* weapons grid — auto side-view thumbnails */
.gun-card { position: relative; display: flex; flex-direction: column; padding: 8px; cursor: pointer;
  background: rgba(10,13,20,0.5); border: 1px solid var(--line); border-radius: 12px; text-align: left;
  transition: border-color .1s, background .1s; }
.gun-card:hover { border-color: rgba(61,139,255,0.4); background: rgba(61,139,255,0.08); }
.gun-card.sel { border-color: var(--accent); background: rgba(61,139,255,0.14); box-shadow: inset 0 0 0 1px rgba(61,139,255,0.3); }
.li-rar { font-size: 12px; font-weight: 800; letter-spacing: .5px; margin: -6px 0 10px; }
.gun-thumb { width: 100%; height: 74px; border-radius: 9px 9px 4px 4px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, rgba(61,139,255,0.12), transparent 70%), linear-gradient(180deg, #0d1119, #080b10);
  border: 1px solid var(--line); border-bottom: 3px solid var(--rar, var(--line)); }
.gun-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gc-meta { display: flex; flex-direction: column; gap: 1px; margin-top: 7px; padding: 0 2px 2px; }
.gc-qty { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 1px 7px; border-radius: 999px;
  font-family: 'Kanit', sans-serif; font-style: italic; font-weight: 800; font-size: 12px; color: #0a0d14;
  background: var(--rar, #ffd54a); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* skins drawer for the selected gun */
.skins-drawer { background: rgba(10,13,20,0.45); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; flex: none; }
.drawer-h { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #8592a6; margin-bottom: 9px; }
.skin-row { display: flex; gap: 9px; flex-wrap: wrap; }
.skin-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; padding: 0; border: none; background: none; cursor: pointer; }
.chip-sw { width: 52px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: linear-gradient(135deg, #2a3140, #3d8bff44); background-size: cover; background-position: center; }
.skin-chip.sel .chip-sw { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(61,139,255,0.4); }
.skin-chip.locked { cursor: default; }
.skin-chip.locked .chip-sw { background: repeating-linear-gradient(45deg, #1a1f28, #1a1f28 6px, #141922 6px, #141922 12px); }
.chip-n { font-size: 9px; font-weight: 700; color: #8592a6; }
.skin-chip.sel .chip-n { color: #eaf3ff; }

.locker-info { background: rgba(10,13,20,0.45); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; flex: none; }
.li-name { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 24px; color: #eaf3ff; }
.li-cat { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.li-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.li-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #8592a6; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 3px; }
.li-stat b { color: #eaf3ff; font-family: var(--font-display); font-style: italic; font-size: 15px; }
.li-note { font-size: 12.5px; color: #8592a6; line-height: 1.5; }

@media (max-width: 860px) {
  .screen { padding: 78px 14px 22px; }
  #inventory { overflow-y: auto; }
  .inv-wrap { flex-direction: column; height: auto; min-height: 0; }
  .inv-panel { width: auto; order: 2; }
  .inv-stage { height: 46vh; min-height: 320px; flex: none; align-self: stretch; aspect-ratio: auto; }
  .inv-grid { overflow: visible; flex: none; }
}

/* Compact / stacked lobby for phones and short landscape screens. The top nav is
   fixed, so let the menu scroll beneath it instead of centering (which clipped the
   content under the nav and cramped the two cards side-by-side). */
@media (max-width: 860px), (max-height: 680px) {
  #menu { justify-content: flex-start; padding: 72px 12px 28px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  /* Too many tabs to wrap without overlapping the card — keep ONE row and let the
     bar scroll sideways. Predictable height, so the menu padding always clears it. */
  #topnav { top: 8px; flex-wrap: nowrap; max-width: 96vw; justify-content: flex-start; gap: 2px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #topnav::-webkit-scrollbar { display: none; }
  .topnav-btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 11px; font-size: 12.5px; gap: 5px; }
  .lobby { flex-direction: column; align-items: stretch; width: min(560px, 94vw); gap: 14px; }
  .lobby-main { padding: 24px 22px; min-width: 0; }
  .lobby-side { max-width: none; width: 100%; min-width: 0; }
  /* the mode buttons are a horizontal row on desktop — wrap them so 5 buttons
     don't overflow the viewport (which forced a horizontal scroll + clipped logo) */
  .join { flex-wrap: wrap; }
  .join > * { flex: 1 1 auto; }
  .btn-discord { flex-basis: 100%; }
}
/* very small phones: trim the tab padding a touch more so more tabs are visible */
@media (max-width: 480px) {
  .topnav-btn { padding: 7px 9px; font-size: 12px; gap: 4px; }
}
.admin-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(10,13,20,0.5); border: 1px solid var(--line); border-radius: 9px; }
.admin-item .ai-text { flex: 1; min-width: 0; overflow: hidden; }
.admin-item .ai-key { display: block; font-size: 13px; color: #eaf3ff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-item .ai-meta { display: block; font-size: 10.5px; color: #7f8ba0; }
.btn.sm { padding: 5px 10px; font-size: 11px; flex: none; }
.cl-entry { display: flex; gap: 10px; align-items: baseline; }
.cl-entry .cl-date { flex: none; width: 46px; font-size: 11px; color: #5c6880; font-variant-numeric: tabular-nums; }
.cl-entry .cl-items { font-size: 12.5px; color: #9fabbe; }
.lobby-foot { font-size: 11px; letter-spacing: 2px; color: #454f63; }

/* ---------- Map maker ---------- */
.btn-mode {
  padding: 14px 26px; font-size: 15px; font-weight: 700; letter-spacing: 1px; cursor: pointer;
  border: 1.5px solid var(--accent2); border-radius: 14px; color: var(--accent2);
  background: rgba(52, 209, 122, 0.08); transition: filter .12s, background .12s;
  font-family: var(--font-body);
}
.btn-mode:hover { background: rgba(52, 209, 122, 0.18); filter: brightness(1.05); }
.btn-discord {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; font-size: 15px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer; border: 1.5px solid #5865F2; border-radius: 14px;
  color: #7289da; background: rgba(88, 101, 242, 0.1);
  text-decoration: none; transition: filter .12s, background .12s;
  font-family: var(--font-body);
}
.btn-discord:hover { background: rgba(88, 101, 242, 0.22); filter: brightness(1.1); color: #fff; }

.lobby-terms {
  font-size: 11px; color: #6f7c90; margin-top: 12px; line-height: 1.4;
}
.terms-link {
  color: var(--accent); text-decoration: underline; transition: color .12s;
}
.terms-link:hover { color: #fff; }

body.mode-mapmaker #loadoutBtn { display: none; }

#mm-hud { position: fixed; inset: 0; pointer-events: none; z-index: 40; font-family: var(--font-body); }
#mm-mode {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: #cfe0f5; background: rgba(10,13,20,0.62); padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(3px); white-space: nowrap;
}
#mm-mode b { color: #fff; }
.mm-badge {
  font-family: var(--font-display); font-style: italic; font-weight: 800; letter-spacing: 1px;
  padding: 1px 8px; border-radius: 6px; margin-right: 8px; font-size: 12px;
}
.mm-badge.build { background: rgba(61,139,255,0.18); color: var(--accent); }
.mm-badge.phys { background: rgba(255,177,78,0.18); color: #ffb14e; }
#mm-help {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: #8ea0b8; text-shadow: 0 1px 3px rgba(0,0,0,0.8); white-space: nowrap;
}
#mm-help b { color: #cfe0f5; font-weight: 700; }
#mm-palette {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 8px; max-width: 92vw; flex-wrap: wrap; justify-content: center;
  background: rgba(10,13,20,0.55); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(4px);
}
.mm-swatch {
  position: relative; width: 42px; height: 42px; border-radius: 8px; cursor: pointer; pointer-events: auto;
  border: 2px solid rgba(255,255,255,0.12); background-size: cover; background-position: center;
  transition: transform .1s, border-color .1s, box-shadow .1s;
}
.mm-swatch:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.45); }
.mm-swatch.sel {
  border: 3px solid var(--accent2);
  box-shadow: 0 0 0 2px var(--accent2), 0 0 14px 2px rgba(52,209,122,0.75);
  transform: translateY(-5px) scale(1.06); z-index: 1;
}
.mm-swatch.sel .mm-num { color: #06131f; background: var(--accent2); padding: 0 3px; border-radius: 4px; text-shadow: none; }
.mm-swatch .mm-num {
  position: absolute; top: 1px; left: 3px; font-size: 10px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.mm-only { display: none; }
body.mode-mapmaker .mm-only { display: block; }
/* playtest hides the editor palette + build help (LMB shoots, not places) */
body.mm-playtest #mm-help, body.mm-playtest #mm-palette,
body.mm-playtest #mm-swatch-air, body.mm-playtest #mm-rgb-picker { display: none; }

#mm-toast {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%) translateY(-6px);
  font-size: 13px; font-weight: 600; color: #eaf3ff; background: rgba(10,13,20,0.82);
  padding: 7px 14px; border: 1px solid var(--accent2); border-radius: 10px;
  opacity: 0; transition: opacity .18s, transform .18s; white-space: nowrap;
}
#mm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#mm-toast.bad { border-color: var(--danger); }

/* ---------- Map Maker Chat Input ---------- */
#mm-chat {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: min(560px, 90vw);
}
#mm-chat input {
  width: 100%; padding: 10px 16px; font-size: 14px; font-family: var(--font-body);
  color: #eaf3ff; background: rgba(10,13,20,0.92); border: 1px solid var(--accent);
  border-radius: 10px; outline: none; backdrop-filter: blur(6px);
}
#mm-chat input::placeholder { color: rgba(255,255,255,0.35); }
#mm-chat input:focus { border-color: var(--accent2); box-shadow: 0 0 12px rgba(52,209,122,0.25); }

/* ---------- WorldEdit Menu (C key) ---------- */
#we-menu {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
#we-menu .we-panel {
  display: flex; width: min(820px, 92vw); max-height: 82vh;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6); overflow: hidden;
}
/* ---- left block sidebar ---- */
#we-menu .we-blocks {
  width: 180px; min-width: 160px; border-right: 1px solid var(--line);
  overflow-y: auto; padding: 12px 0; flex-shrink: 0;
}
#we-menu .we-blocks-title {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 11px; letter-spacing: 1.5px; color: rgba(255,255,255,0.4);
  text-transform: uppercase; padding: 4px 16px 8px; border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
#we-menu .we-block-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px; cursor: pointer;
  font-size: 13px; color: #b0c4de; transition: background .1s;
}
#we-menu .we-block-item:hover { background: rgba(255,255,255,0.06); }
#we-menu .we-block-item.sel { background: rgba(61,139,255,0.15); color: #eaf3ff; }
#we-menu .we-block-swatch {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}
#we-menu .we-block-item.sel .we-block-swatch {
  border-color: var(--accent2); box-shadow: 0 0 6px rgba(52,209,122,0.5);
}
/* ---- right commands panel ---- */
#we-menu .we-commands {
  flex: 1; overflow-y: auto; padding: 20px 24px;
}
#we-menu .we-section-title {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 13px; letter-spacing: 1.5px; color: var(--accent);
  text-transform: uppercase; margin: 16px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
#we-menu .we-section-title:first-child { margin-top: 0; }
#we-menu .we-cmd-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
#we-menu .we-cmd-row label {
  font-size: 12px; font-weight: 600; color: #8ea0b8; min-width: 55px; text-align: right;
}
#we-menu .we-cmd-row input[type="text"],
#we-menu .we-cmd-row input[type="number"] {
  padding: 5px 10px; font-size: 13px; font-family: var(--font-body);
  background: rgba(255,255,255,0.06); color: #eaf3ff; border: 1px solid var(--line);
  border-radius: 6px; outline: none; width: 100px;
}
#we-menu .we-cmd-row input:focus { border-color: var(--accent); }
#we-menu .we-cmd-btn {
  padding: 6px 14px; font-size: 12px; font-weight: 700; font-family: var(--font-display);
  font-style: italic; letter-spacing: 0.5px; text-transform: uppercase;
  color: #eaf3ff; background: rgba(61,139,255,0.2); border: 1px solid rgba(61,139,255,0.35);
  border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s;
}
#we-menu .we-cmd-btn:hover { background: rgba(61,139,255,0.35); border-color: var(--accent); }
#we-menu .we-cmd-btn.green { background: rgba(52,209,122,0.15); border-color: rgba(52,209,122,0.3); }
#we-menu .we-cmd-btn.green:hover { background: rgba(52,209,122,0.3); border-color: var(--accent2); }
#we-menu .we-cmd-btn.warn { background: rgba(255,93,108,0.15); border-color: rgba(255,93,108,0.3); }
#we-menu .we-cmd-btn.warn:hover { background: rgba(255,93,108,0.3); border-color: var(--danger); }
#we-menu .we-close {
  position: absolute; top: 12px; right: 16px; font-size: 22px; color: #8ea0b8;
  cursor: pointer; background: none; border: none; line-height: 1;
}
#we-menu .we-close:hover { color: #eaf3ff; }
.we-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; background: rgba(255,255,255,0.08); color: #8ea0b8;
  font-family: monospace; margin-left: 4px;
}

/* ============================ Mobile touch controls ============================ */
#touch { position: fixed; inset: 0; z-index: 15; display: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.mobile.in-game #touch { display: block; }
body.mobile.paused #touch { display: none; }
/* lift the hotbar above the look surface so weapon slots stay tappable, while the
   rest of the (pointer-events:none) HUD lets look-drags fall through to #tc-look */
body.mobile #hud { z-index: 16; }
body.mobile #hotbar { pointer-events: auto; }
body.mobile #hotbar .slot { width: 74px; height: 48px; }

#tc-look { position: absolute; inset: 0; touch-action: none; }

/* floating movement joystick (visual only — input is read off #tc-look) */
#tc-stick { position: fixed; width: 144px; height: 144px; margin: 0; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 16;
  background: radial-gradient(circle, rgba(140,170,220,0.10), rgba(140,170,220,0.04));
  border: 2px solid rgba(180,200,235,0.35); }
#tc-stick-thumb { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(200,220,255,0.30); border: 2px solid rgba(220,235,255,0.6); }

/* action buttons */
.tc-btn { pointer-events: auto; -webkit-user-select: none; user-select: none; touch-action: none;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head, sans-serif);
  font-weight: 800; letter-spacing: 0.5px; font-size: 13px; color: #dbe7fb;
  width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(150,175,215,0.4);
  background: rgba(20,26,38,0.5); backdrop-filter: blur(2px); }
.tc-btn.tc-sm { width: 62px; height: 62px; font-size: 11px; }
.tc-btn.on { background: rgba(61,139,255,0.4); border-color: var(--accent, #3d8bff); transform: scale(0.94); }
.tc-fire { width: 104px; height: 104px; font-size: 15px; color: #ffe3e3;
  background: rgba(190,50,55,0.42); border-color: rgba(255,120,120,0.7); }
.tc-fire.on { background: rgba(230,70,75,0.7); border-color: #ff8a8a; }
/* top-right: chat + pause */
/* nudged down clear of the notch / thin browser bar (viewport-fit=cover lets the
   page run under them), but kept as a thin top-right strip so it never drops into
   the bottom-right combat cluster (chat was overlapping JUMP). */
#tc-top { position: fixed; top: max(46px, calc(env(safe-area-inset-top) + 34px)); right: max(14px, env(safe-area-inset-right));
  display: flex; gap: 10px; z-index: 30; }
.tc-corner { width: 50px; height: 50px; font-size: 17px; border-radius: 13px; }
/* combat cluster, bottom-right, spread out so nothing crowds under the thumb */
#tc-right { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
#tc-right .tc-row { display: flex; align-items: center; gap: 20px; }

/* chat: while typing on mobile, hide the controls and pin the box to the TOP so
   the soft keyboard (bottom) never covers the input */
body.mobile.chatting #touch { display: none; }
body.mobile.chatting #chat { top: max(14px, env(safe-area-inset-top)); bottom: auto;
  left: 10px; right: 10px; width: auto; max-width: none; z-index: 45; }
body.mobile.chatting #chatlog { max-height: 34vh; }
body.mobile #chatinput { font-size: 16px; padding: 12px 14px; }  /* 16px stops iOS auto-zoom */

/* Mobile HUD: clear the bottom corners for the joystick + buttons by stacking the
   readouts down the top-left, and drop the pause button clear of the killfeed. */
body.mobile .hud-bl { top: 54px; left: 12px; bottom: auto; }
body.mobile .hud-br { top: 158px; left: 12px; right: auto; bottom: auto; text-align: left; }
body.mobile #hotbar { justify-content: flex-start; }
body.mobile #health { width: 168px; height: 22px; margin-bottom: 8px; }
body.mobile #speed { font-size: 19px; }
body.mobile #ammo { font-size: 26px; }
body.mobile #killfeed { top: 74px; }
body.mobile #chathint { display: none; }
/* compact the KDA so it clears the centered match timer in portrait */
body.mobile #kda { gap: 5px; }
body.mobile #kda .kda-item { padding: 3px 8px; }
body.mobile #kda .kda-item span:last-child { font-size: 15px; }
body.mobile #kda .kda-lbl { font-size: 9px; }
body.mobile #match-timer { font-size: 20px; }

/* ---------------- Cases (skin unboxing) ---------------- */
.case-wrap { width: min(920px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.case-wrap .screen-title { text-align: center; }
.case-hero { display: flex; align-items: center; gap: 18px; }
.case-medallion { width: 128px; height: auto; filter: drop-shadow(0 6px 20px rgba(255,196,0,0.22)); }
.case-name { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 26px; color: #ffd54a; }
.case-desc { font-size: 13px; color: #8592a6; margin-top: 3px; }

/* reel */
.case-reel-viewport { position: relative; width: 100%; height: 210px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(8,10,16,0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.case-reel { display: flex; align-items: center; height: 100%; padding: 0; will-change: transform; }
.case-ticker { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 3px; margin-left: -1.5px;
  background: linear-gradient(#ffd54a, #ff8c1a); border-radius: 2px; box-shadow: 0 0 12px rgba(255,180,40,0.7); z-index: 2; }
.case-card { flex: 0 0 116px; width: 116px; height: 172px; margin: 0 8px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 10px 6px;
  border-radius: 12px; background: rgba(20,24,34,0.9); border: 1px solid var(--line);
  border-bottom: 3px solid var(--rar, #9aa4b2); }
.case-card.is-foil { background: radial-gradient(120% 90% at 50% 30%, rgba(255,196,0,0.14), rgba(20,24,34,0.9) 70%); }
.cc-foilimg { height: 100%; width: auto; image-rendering: auto; filter: drop-shadow(0 0 10px rgba(255,196,0,0.5)); }
.cc-av { height: 108px; display: flex; align-items: center; }
.cc-av img, .cr-av img { image-rendering: pixelated; height: 100%; width: auto; }
.cc-name { font-size: 12px; font-weight: 700; color: #eaf3ff; text-align: center; line-height: 1.1; }
.cc-rar { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

/* result reveal */
.case-result { display: flex; align-items: center; gap: 20px; padding: 16px 26px; border-radius: 16px;
  background: rgba(20,24,34,0.9); border: 1px solid var(--rar, #9aa4b2);
  box-shadow: 0 0 34px -6px var(--rar, transparent); animation: cr-pop .35s ease; }
@keyframes cr-pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cr-av { height: 140px; } .cr-av img { height: 100%; }
.cr-lbl { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.cr-name { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 28px; color: #fff; }
.cr-sub { font-size: 12px; color: #8592a6; margin-top: 2px; }

/* actions + odds */
.case-actions { display: flex; align-items: center; gap: 14px; }
.case-actions .btn { font-size: 16px; padding: 12px 26px; }
.case-gold { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 20px;
  color: #ffd54a; min-width: 80px; text-align: center; }
.case-odds { width: min(340px, 100%); display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border-radius: 12px; background: rgba(12,15,22,0.7); border: 1px solid var(--line); }
.co-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.co-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.co-name { font-weight: 700; flex: 1; }
.co-pct { font-variant-numeric: tabular-nums; color: #cdd7e6; }
@media (max-width: 640px) {
  .case-card { flex-basis: 92px; width: 92px; height: 150px; }
  .cc-av { height: 88px; }
  .case-medallion { width: 92px; }
}

/* gold laurel emblem for the exceedingly tier in the odds list */
/* full gold-foil image revealed behind the skin on an exceedingly-rare win */
.cp-foil { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: 116%; max-width: none;
  z-index: 0; pointer-events: none; opacity: 0.9; filter: drop-shadow(0 0 22px rgba(255,196,0,0.55));
  animation: cp-foil-in .5s ease both; }
@keyframes cp-foil-in { from { opacity: 0; transform: translate(-50%,-50%) scale(0.8); } to { opacity: 0.9; transform: translate(-50%,-50%) scale(1); } }
.cp-av, .cp-rar, .cp-name, .cp-sub { position: relative; z-index: 1; }

/* ---------------- case win popup ---------------- */
.case-popup { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,0.72); backdrop-filter: blur(4px); animation: cp-fade .2s ease; }
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
.cp-card { position: relative; width: min(420px, 88vw); padding: 30px 28px 24px; text-align: center;
  border-radius: 20px; background: linear-gradient(180deg, rgba(24,28,40,0.98), rgba(14,17,26,0.98));
  border: 1px solid var(--rar, #9aa4b2); box-shadow: 0 0 60px -10px var(--rar, transparent), 0 20px 60px rgba(0,0,0,0.6);
  animation: cp-pop .45s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes cp-pop { 0% { transform: scale(0.7) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.cp-glow { position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, var(--rar, transparent) -40%, transparent 55%); opacity: 0.28; }
.cp-rar { position: relative; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }
.cp-av { position: relative; height: 190px; margin: 10px 0 8px; display: flex; align-items: center; justify-content: center; }
.cp-av img { image-rendering: pixelated; height: 100%; width: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5)); }
.cp-name { position: relative; font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 34px; color: #fff; }
.cp-sub { position: relative; font-size: 12px; color: #8592a6; margin-top: 3px; }
.cp-card .btn { position: relative; margin-top: 20px; font-size: 16px; padding: 11px 34px; }
/* exceedingly-rare gold shine sweep */
.cp-card.is-top { border-color: #ffd54a; }
.cp-card.is-top .cp-name { background: linear-gradient(92deg, #fff2b0, #ffd54a 40%, #ffb43a 60%, #fff2b0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% auto; animation: cp-shine 2.6s linear infinite; }
@keyframes cp-shine { to { background-position: 200% center; } }

/* crosshair customizer controls */
.set-color { width: 42px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.set-color::-webkit-color-swatch-wrapper { padding: 2px; }
.set-color::-webkit-color-swatch { border: none; border-radius: 4px; }
.ch-preview { position: relative; width: 26px; height: 26px; justify-self: end; }
.ch-preview::before, .ch-preview::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ch-color, #00e676); box-shadow: 0 0 0 1px rgba(0,0,0,0.7); }
.ch-preview::before { width: 2px; height: 18px; transform: translate(-50%, -50%); }
.ch-preview::after { width: 18px; height: 2px; transform: translate(-50%, -50%); }

/* custom sniper-scope reticle (mil-dot drop + centre dot) */
#scope-reticle { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
#scope-reticle .sr-dot { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,0.95); }
#scope-reticle .sr-tick { position: absolute; left: -1px; width: 2px; height: 2px; background: rgba(0,0,0,0.9); }

/* custom-image crosshair (centred on the aim point) */
#crosshair .ch-img { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: var(--ch-imgsize, 40px); height: auto; image-rendering: auto; }

/* custom-image sniper scope: replaces the built-in reticle + vignette */
#scope.scope-custom::before, #scope.scope-custom::after { display: none; }
#scope.scope-custom #scope-circle, #scope.scope-custom #scope-reticle { display: none; }
#scope-image { position: fixed; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
  width: auto; height: auto; z-index: 10; pointer-events: none; }

/* fall-out killfeed entry */
.kf .kf-fell { color: #9fb0c6; font-style: italic; margin-left: 6px; }

/* ---------------- Trophy Road ---------------- */
.trophy-wrap { width: min(560px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.trophy-wrap .screen-title { text-align: center; }
.trophy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trophy-lvbox { flex: 1; min-width: 0; }
.trophy-lv { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 20px; color: #eaf3ff; letter-spacing: 1px; }
.trophy-lv b { color: var(--accent); font-size: 24px; }
.trophy-xprow { font-size: 12px; color: #8592a6; margin: 3px 0 6px; font-variant-numeric: tabular-nums; }
.trophy-xprow b { color: #cdd7e6; }
.trophy-total { color: #6f7c90; }
.trophy-bar { height: 7px; max-width: 320px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.trophy-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.trophy-track { display: flex; flex-direction: column; gap: 8px; }
.tr-node { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px; background: rgba(20,24,34,0.7); border: 1px solid var(--line); }
.tr-node.claimed { opacity: 0.6; }
.tr-node.ready { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(61,139,255,0.3); }
.tr-node.locked { opacity: 0.55; }
.tr-node.is-mac { border-color: #ffd54a; }
.tr-lv { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 16px; color: #9fb0c6; }
.tr-reward { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #eaf3ff; }
.tr-reward .tr-coin { font-size: 18px; }
.tr-reward.mac { color: #ffd54a; }
.tr-reward.mac img { height: 22px; width: auto; }
.tr-claim { font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 7px 16px; border-radius: 9px;
  cursor: pointer; color: #0a2233; background: var(--accent); border: none; }
.tr-claim:hover { filter: brightness(1.08); }
.tr-check { color: #4ec06b; font-weight: 800; font-size: 18px; }
.tr-lock { opacity: 0.6; }
.tr-empty { text-align: center; color: #6f7c90; padding: 30px; }

/* account level chip (chat / scoreboard / leaderboard) */
.lvl-chip { display: inline-block; min-width: 18px; text-align: center; padding: 1px 6px; margin-right: 5px;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 11px; line-height: 1.4; color: #06263f;
  background: linear-gradient(180deg, #6fb0ff, #2f6fd0); border-radius: 6px; vertical-align: middle; }
#lb-list .lvl-chip { margin: 0 8px 0 2px; }
/* trophy road: more-coming footer */
.tr-soon { text-align: center; color: #8592a6; font-size: 13px; padding: 16px; margin-top: 4px;
  border: 1px dashed var(--line); border-radius: 12px; background: rgba(20,24,34,0.4); }

/* ---------------- Settings tabs ---------------- */
.set-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.set-tab-btn { flex: 1; min-width: 68px; padding: 8px 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .4px; cursor: pointer; color: #8592a6; background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 9px; }
.set-tab-btn:hover { color: #eaf3ff; }
.set-tab-btn.active { color: var(--accent); background: rgba(61,139,255,0.12); border-color: rgba(61,139,255,0.4); }
#settings .set-tab { display: flex; flex-direction: column; gap: 10px; }
#settings .set-tab.hidden { display: none; }

/* ---------------- Quests ---------------- */
.quests-wrap { width: min(620px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.quests-wrap .screen-title { text-align: center; }
.quests-list { display: flex; flex-direction: column; gap: 18px; }
.q-section { display: flex; flex-direction: column; gap: 8px; }
.q-head { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 18px; letter-spacing: 1px; color: #eaf3ff;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.q-timer { font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: .2px;
  color: #8592a6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px;
  background: rgba(20,24,34,0.7); border: 1px solid var(--line); }
.q-item.ready { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(61,139,255,0.3); }
.q-item.claimed { opacity: 0.6; }
.q-info { flex: 1; min-width: 0; }
.q-name { font-weight: 700; color: #eaf3ff; font-size: 14px; margin-bottom: 6px; }
.q-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.q-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.q-prog { font-size: 11px; color: #8592a6; margin-top: 4px; font-variant-numeric: tabular-nums; }
.q-reward { font-size: 12px; font-weight: 700; color: #ffd54a; flex: none; }

/* friends page */
.friends-wrap { width: min(620px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.friends-wrap .screen-title { text-align: center; }
.fr-add { display: flex; gap: 8px; }
.fr-add input { flex: 1; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(10,13,19,0.7); color: #eaf3ff; font-size: 14px; outline: none; }
.fr-add input:focus { border-color: var(--accent); }
.fr-add .btn { flex: none; }
.fr-msg { min-height: 16px; font-size: 13px; font-weight: 600; color: var(--accent2); text-align: center;
  opacity: 0; transition: opacity .2s; }
.fr-msg.show { opacity: 1; }
.fr-msg.bad { color: #ff8a92; }
.fr-section { display: flex; flex-direction: column; gap: 8px; }
.fr-head { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #8592a6; }
.fr-count { display: inline-block; min-width: 16px; text-align: center; margin-left: 4px; padding: 0 5px;
  border-radius: 999px; background: rgba(78,161,255,0.18); color: var(--accent); font-size: 11px; }
.fr-count:empty { display: none; }
.fr-list { display: flex; flex-direction: column; gap: 8px; }
.fr-empty { color: #6c7a90; font-size: 13px; padding: 8px 2px; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(19,26,38,0.72); border: 1px solid var(--line); }
.fr-av { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 18px; color: #06131f;
  background: linear-gradient(135deg, var(--accent), #2b6fd6); }
.fr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-name { font-weight: 700; font-size: 15px; color: #eaf3ff; text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fr-name:hover { color: var(--accent); text-decoration: underline; }
.fr-sub { font-size: 12px; color: #8592a6; }
.fr-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #7d8ba0; }
.fr-status i { width: 8px; height: 8px; border-radius: 50%; background: #5a6b82; }
.fr-status.on { color: var(--accent2); }
.fr-status.on i { background: var(--accent2); box-shadow: 0 0 0 3px rgba(52,209,122,0.18); }
.fr-actions { display: flex; gap: 6px; flex: none; }
.fr-actions .btn.join { background: var(--accent); color: #06131f; border: none; }
.fr-actions .btn.join:hover { filter: brightness(1.08); background: var(--accent); }