/* Manrope is loaded via <link rel="stylesheet"> in index.html (not
   @import here) so it parallelizes with the rest of the page load
   instead of blocking the CSS parser. Soopafresh + Newyear Coffee
   are self-hosted via @font-face below. */

@font-face {
  font-family: "Newyear Coffee";
  src: url("fonts/newyear-coffee.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

/* Used for in-world player name labels — wobbles via the canvas "boil" so
   the names feel hand-drawn rather than UI-stamped. Drop the .ttf into
   client/fonts/soopafresh.ttf; without it browsers fall back to the
   default UI font. */
@font-face {
  font-family: "Soopafresh";
  src: url("fonts/soopafresh.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

:root {
  /* Backgrounds */
  --bg: #15171c;
  --bg-elev: #1a1d24;
  --panel: rgba(22, 25, 32, 0.86);
  --panel-strong: rgba(22, 25, 32, 0.96);
  --panel-warm: rgba(28, 24, 30, 0.86);   /* slight warm cast for splashy panels */

  /* Foreground */
  --fg: #f0f2f7;
  --fg-dim: #aab0bd;
  --fg-muted: #6e7480;

  /* Accents — gold for warm (player highlight, mode, accent) + cyan for
     cool (match-flow info, blue team, secondary highlights). */
  --accent: #ffcc33;
  --accent-hot: #ffa820;
  --accent-soft: rgba(255, 204, 51, 0.18);
  --cool: #5ad1ff;
  --cool-soft: rgba(90, 209, 255, 0.18);
  --danger: #ff6b6b;
  --good: #7cffa0;

  /* "Ink" borders — subtle by default, stronger for emphasized chips. */
  --ink: rgba(255, 255, 255, 0.08);
  --ink-strong: rgba(255, 255, 255, 0.16);
  --border: #2a2e38;             /* legacy alias used by older rules */
  --border-soft: var(--ink);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-1: 0 6px 16px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.42);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Fonts (two-font system, deliberate):
     - Soopafresh for ALL titles + names — hand-drawn brand voice.
       Includes: the join-overlay h1, mode header, countdown,
       announcements, big buttons, player names, score chips.
     - Manrope for ALL subtext — body, inputs, kill feed, status
       pills, anything data-dense or paragraph-like.
     Variables stay split so the semantic intent is still clear at
     each call site, but --font-name/-display/-title all resolve to
     Soopafresh now. */
  --font-name:    "Soopafresh", "Newyear Coffee", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Soopafresh", "Newyear Coffee", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title:   "Soopafresh", "Newyear Coffee", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-flair:   "Newyear Coffee", "Soopafresh", ui-sans-serif, system-ui, sans-serif;
  --font-ui:      "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Inter, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  overflow: hidden;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #1b1f28;
  cursor: crosshair;
  transform-origin: center center;
  transition: filter 0.65s ease, transform 0.65s ease;
}

/* During the lobby countdown, keep the outgoing arena visible but soft.
   The class drops on the first round frame after the new map arrives, so
   the new round resolves from blur to crisp instead of popping in cold. */
#game.round-intro-blur {
  filter: blur(12px) saturate(0.78);
  transform: scale(1.025);
}

#overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#overlay.hidden { display: none; }

.panel {
  background: var(--panel-strong);
  border: 1px solid var(--ink-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  min-width: 360px;
  max-width: 460px;
  box-shadow: var(--shadow-3);
  /* Subtle inner glow at the top so the panel feels lit, not flat. */
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  background: radial-gradient(
    ellipse at top,
    rgba(255, 204, 51, 0.07),
    transparent 70%
  );
  pointer-events: none;
}

.panel h1 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-title);
  /* Soopafresh is a wider hand-drawn face than the previous title
     font, so the same 36px overflowed and "Stick Fight" wrapped to
     a second line. clamp() keeps it one line on small screens
     without going too small on bigger ones, and nowrap is a
     safety net against any remaining wrap edge case. */
  font-size: clamp(22px, 4.4vw, 30px);
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--accent);
  text-align: center;
  position: relative;
  /* Slightly taller line height + a soft glow so the title carries
     the join overlay visually. */
  line-height: 1.1;
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Title is rendered as plain text — per-letter .boil-char spans are
   still emitted by the JS wrapper for layout consistency, but no
   animation is applied. Earlier versions had a hand-drawn wobble
   here; the user preferred a static title. */

.panel label {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-muted);
  position: relative;
}

.panel input,
.panel select {
  margin-top: var(--space-1);
  background: rgba(10, 12, 16, 0.7);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-3);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.panel input:focus,
.panel select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.panel .note {
  margin: calc(-1 * var(--space-1)) 0 var(--space-3);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--fg-muted);
  text-transform: none;
}

/* Color picker — bigger, more responsive swatches. */
.color-row {
  display: flex;
  gap: var(--space-2);
  margin-top: 6px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.12s ease, border-color 0.12s ease,
              box-shadow 0.18s ease;
  position: relative;
}
.color-swatch:hover {
  transform: scale(1.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.color-swatch.selected {
  border-color: var(--accent);
  transform: scale(1.18);
  box-shadow: 0 0 0 3px var(--accent-soft),
              0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.color-swatch.taken {
  opacity: 0.18;
  cursor: not-allowed;
  filter: grayscale(0.85);
  transform: none;
  pointer-events: none;
}
.color-swatch.taken:hover { transform: none; }

/* Live room roster preview shown under the room input while typing. Mirrors
   the existing .note styling but with a chip row for the players already in. */
.room-preview {
  margin: -4px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.room-preview[hidden] { display: none; }
.room-preview-meta {
  font-size: 11px;
  color: #9aa0b0;
}
.room-preview-meta .full {
  color: #ff8a8a;
  font-weight: 600;
}
.room-preview-meta .reconnecting {
  color: #c8a05a;
}
.room-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.room-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-name);
  font-size: 12px;
  color: var(--fg-dim);
  max-width: 130px;
}
.room-chip .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.room-chip .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-chip.offline {
  opacity: 0.5;
}
.room-chip.offline .name {
  text-decoration: line-through;
}

.panel button {
  margin-top: var(--space-3);
  width: 100%;
  padding: 14px var(--space-4);
  background: linear-gradient(180deg, var(--accent), var(--accent-hot));
  color: #1a1a1a;
  border: none;
  border-radius: var(--radius-md);
  /* Manrope (subtext font) for the join + ghost buttons rather than
     Soopafresh — keeps the "controls" layer visually distinct from
     the "brand" layer (title + names). Ghost button inherits this. */
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, box-shadow 0.18s ease, filter 0.1s ease;
  box-shadow: 0 6px 16px rgba(255, 168, 32, 0.28);
}

.panel button:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 22px rgba(255, 168, 32, 0.40);
  transform: translateY(-1px);
}
.panel button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(255, 168, 32, 0.30);
}

/* Boot-time "Loading…" state on the Join button. The HTML ships
   the button disabled with data-loading="1" until main.js parses
   and wires up handlers; this style tells the user "wait, don't
   click yet" without making the button look broken. Pulse keeps
   it alive-looking even though it's inactive. */
.panel button[data-loading] {
  cursor: progress;
  background: linear-gradient(180deg, #4a4d56, #383b43);
  color: var(--fg-dim);
  box-shadow: none;
  animation: btn-loading-pulse 1.4s ease-in-out infinite;
}
.panel button[data-loading]:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}
@keyframes btn-loading-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 0.95; }
}

.panel .hint {
  margin: var(--space-4) 0 0;
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0.2px;
  text-align: center;
}

/* ---- HUD: top-left leaderboard ----------------------------------- */
#hud {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--fg);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#status {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(20, 22, 28, 0.7);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  width: fit-content;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
#status.connected { opacity: 0; pointer-events: none; }

/* Score panel: horizontal strip of player chips centered at the top.
   Mode header sits above the chip row (mode badge + win progress for
   TDM/DM, just the badge for Smash). */
#scores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: min(96vw, 1100px);
}

.score-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.score-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px 7px 10px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  --chip-color: var(--fg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
              transform 0.18s ease;
}

.score-chip .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--chip-color);
  flex-shrink: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--chip-color) 70%, transparent),
              inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.score-chip .name {
  font-family: var(--font-name);
  font-size: 16px;
  letter-spacing: 0.3px;
  color: var(--fg);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score-chip .kd {
  font-family: var(--font-name);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-dim);
  padding-left: var(--space-2);
  border-left: 1px solid var(--ink-strong);
}

/* Smash damage % color grades inside the score-chip K/D area. Mirrors
   the real game's white → yellow → orange → red progression so a
   glance at the scoreboard tells you who's about to die. */
.score-chip .kd .dmg-cool    { color: var(--fg); }
.score-chip .kd .dmg-caution { color: #ffe066; }
.score-chip .kd .dmg-danger  { color: #ff9a3d;
                               text-shadow: 0 0 8px rgba(255, 154, 61, 0.5); }
.score-chip .kd .dmg-lethal  { color: #ff4d4d;
                               text-shadow: 0 0 10px rgba(255, 77, 77, 0.7);
                               animation: dmg-pulse 0.8s ease-in-out infinite; }
@keyframes dmg-pulse {
  0%, 100% { opacity: 1.0;   filter: brightness(1.0); }
  50%      { opacity: 0.85;  filter: brightness(1.2); }
}

.score-chip.me {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(180deg,
                              rgba(255, 204, 51, 0.16),
                              rgba(255, 204, 51, 0.06));
}
.score-chip.me .name { color: var(--accent); font-weight: 600; }

.score-chip.dead { opacity: 0.45; }
.score-chip.dead .name { text-decoration: line-through; }
.score-chip.offline { opacity: 0.4; }
.score-chip.offline .offline-tag {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--fg-muted);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.score-chip.champ {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30),
              0 0 14px color-mix(in srgb, var(--accent) 50%, transparent);
}
.score-chip.champ .name::before {
  content: "♛";
  color: #ffd24a;
  margin-right: 6px;
  font-size: 14px;
  text-shadow: 0 0 6px rgba(255, 210, 74, 0.7);
}

/* Header row: mode + (for TDM) team scores. Sits above the chip strip. */
.mode-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 14px;
  background: var(--panel);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1px;
  box-shadow: var(--shadow-1);
}
.badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  letter-spacing: 1.4px;
  font-size: 10px;
}
.badge.dm    { background: rgba(255, 255, 255, 0.10); }
.badge.tdm   { background: rgba(255, 107, 107, 0.20); color: #ffd0d0; }
.badge.smash { background: var(--accent-soft); color: var(--accent); }
.team-score {
  font-family: var(--font-name);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
}
.team-score.red  { color: var(--danger); text-shadow: 0 0 12px color-mix(in srgb, var(--danger) 40%, transparent); }
.team-score.blue { color: var(--cool);   text-shadow: 0 0 12px color-mix(in srgb, var(--cool) 40%, transparent); }
.team-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.team-dot.red  { background: var(--danger); }
.team-dot.blue { background: var(--cool); }

/* Self-card (bottom-center HP/ammo/buffs strip) and its supporting
   classes (.self-*, .weapon-*, .buff-chip) were removed — overhead
   labels on each character already show that info. */

/* ---- Settings panel + gear button ------------------------------------- */
/* Gear icon stays pinned top-left so it's reachable in both the join
   overlay (which sits center-screen) and in-game (where the canvas
   is full-screen). Click toggles #settings-panel; F4 also toggles. */
#settings-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 13;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ink-strong);
  background: var(--panel);
  color: var(--fg-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.12s, border-color 0.12s, transform 0.18s;
}
#settings-btn:hover {
  color: var(--accent);
  border-color: var(--accent-soft);
  transform: rotate(30deg);
}
#settings-panel {
  position: fixed;
  top: 60px;
  left: 14px;
  z-index: 13;
  width: 240px;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--panel-strong);
  border: 1px solid var(--ink-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-2);
  font-family: var(--font-ui);
  color: var(--fg);
}
#settings-panel.hidden { display: none; }
#settings-panel h3 {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-muted);
}
#settings-panel label {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--fg-dim);
  position: relative;
}
#settings-panel .vol-val {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 11px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
#settings-panel input[type="range"] {
  margin-top: 4px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
#settings-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ink-strong);
}
#settings-panel input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ink-strong);
}
#settings-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
#settings-panel input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
#settings-panel #vol-mute {
  width: 100%;
  margin: var(--space-2) 0 var(--space-1);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-strong);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
#settings-panel #vol-mute:hover {
  background: var(--panel);
}
#settings-panel #vol-mute.active {
  background: var(--danger);
  color: #1a1a1a;
  border-color: var(--danger);
}
#settings-panel .hint {
  margin: var(--space-2) 0 0;
  font-size: 10px;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Ghost button — used for secondary actions like "Copy invite link"
   on the join panel. Sits flat, lifts on hover. */
.panel .ghost-btn {
  margin-top: var(--space-2);
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--ink-strong);
  box-shadow: none;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 12px;
  padding: 8px var(--space-4);
}
.panel .ghost-btn:hover {
  filter: none;
  background: var(--bg-elev);
  color: var(--fg);
  transform: none;
  box-shadow: none;
}
.panel .ghost-btn.copied {
  color: var(--good);
  border-color: var(--good);
}

/* ---- Perf overlay (F2) ------------------------------------------------ */
#perf {
  position: fixed;
  top: 14px;
  right: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg);
  pointer-events: none;
  min-width: 130px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#perf.hidden { display: none; }
#perf .k {
  display: inline-block;
  width: 38px;
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
}
#perf .u {
  color: var(--fg-muted);
  font-size: 10px;
  margin-left: 2px;
}
#perf-fps, #perf-rtt, #perf-snap {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#perf .hint {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
  font-size: 10px;
  color: var(--fg-muted);
  letter-spacing: 0.5px;
}

/* ---- Phase 2 lobby + match-flow overlays --------------------------------- */
/* The canvas stays fully visible behind these so players can see the map
   they're about to fight on. Pointer events only on the interactive bits. */
#lobby, #countdown, #results, #spectator-banner { pointer-events: none; }
#lobby.hidden, #countdown.hidden, #results.hidden,
#spectator-banner.hidden { display: none; }

#lobby {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lobby-panel {
  pointer-events: auto;
  background: var(--panel-strong);
  border: 1px solid var(--ink-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-width: 380px;
  max-width: 520px;
  text-align: center;
  box-shadow: var(--shadow-3);
  position: relative;
  overflow: hidden;
}
.lobby-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: radial-gradient(
    ellipse at top,
    rgba(255, 204, 51, 0.08),
    transparent 70%
  );
  pointer-events: none;
}
.lobby-panel h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 36px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
}
.lobby-panel .lobby-sub {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-4);
  position: relative;
}
.lobby-roster {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-5);
  max-height: 320px;
  overflow-y: auto;
  position: relative;
}
.lobby-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.lobby-row .swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.lobby-row .name {
  flex: 1 1 auto;
  text-align: left;
  font-family: var(--font-name);
  font-size: 16px;
  letter-spacing: 0.3px;
  color: var(--fg);
}
.lobby-row .status {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
}
.lobby-row.ready {
  border-color: color-mix(in srgb, var(--good) 35%, transparent);
  background: color-mix(in srgb, var(--good) 8%, rgba(255, 255, 255, 0.03));
}
.lobby-row.ready .status {
  color: var(--good);
  background: color-mix(in srgb, var(--good) 18%, transparent);
}
.lobby-row.spectating { opacity: 0.6; }
.lobby-row.spectating .status { color: #c8a05a; }
.lobby-row.self {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.04));
}
#ready-btn {
  pointer-events: auto;
  width: 100%;
  padding: 14px var(--space-4);
  background: linear-gradient(180deg, var(--accent), var(--accent-hot));
  color: #1a1a1a;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 16px;
  transition: filter 0.1s, transform 0.08s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 18px rgba(255, 168, 32, 0.28);
  position: relative;
}
#ready-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 168, 32, 0.40);
}
#ready-btn:active { transform: translateY(0); }
#ready-btn.is-ready {
  background: linear-gradient(180deg, var(--good), #4cd87a);
  color: #102015;
  box-shadow: 0 6px 18px rgba(124, 255, 160, 0.32);
}
#ready-btn.is-disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.lobby-hint {
  margin: var(--space-3) 0 0;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--fg-muted);
  position: relative;
}

#countdown {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 35;
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 240px;
  font-weight: 700;
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.85),
                0 0 80px rgba(255, 204, 51, 0.50);
  letter-spacing: 2px;
  user-select: none;
  background: rgba(8, 10, 14, 0.22);
}
#countdown span { animation: countdown-pop 0.9s ease-out; }
@keyframes countdown-pop {
  0%   { transform: scale(1.5); opacity: 0; }
  35%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(0.88); opacity: 0.85; }
}

#results {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 28;
  background: rgba(8, 10, 14, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.results-panel {
  pointer-events: auto;
  background: var(--panel-strong);
  border: 1px solid var(--ink-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  min-width: 400px;
  max-width: 560px;
  text-align: center;
  box-shadow: var(--shadow-3);
  position: relative;
  overflow: hidden;
}
.results-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  background: radial-gradient(
    ellipse at top,
    rgba(255, 204, 51, 0.12),
    transparent 70%
  );
  pointer-events: none;
}
.results-title {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--accent);
  margin-bottom: var(--space-4);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 204, 51, 0.35);
  position: relative;
}
.results-table {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px var(--space-5);
  font-family: var(--font-ui);
  font-size: 14px;
  margin: var(--space-3) 0 var(--space-3);
  position: relative;
}
.results-table .head {
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-strong);
  padding-bottom: 6px;
}
.results-table .name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
  font-family: var(--font-name);
  font-size: 16px;
}
.results-table .swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.results-table .winner-row {
  color: var(--accent);
  font-weight: 600;
}
.results-table .winner-row .name-cell::before {
  content: "♛";
  color: var(--accent);
  margin-right: var(--space-1);
  text-shadow: 0 0 8px rgba(255, 210, 74, 0.7);
}
.results-sub {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
  margin-top: var(--space-2);
  text-transform: uppercase;
  position: relative;
}

#spectator-banner {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  padding: 10px var(--space-4);
  background: var(--panel-strong);
  border: 1px solid color-mix(in srgb, var(--cool) 45%, transparent);
  border-radius: var(--radius-pill);
  color: var(--cool);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
              0 0 18px color-mix(in srgb, var(--cool) 22%, transparent);
}

/* ---- Kill feed (top-right) ---------------------------------------------- */
#kill-feed {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 22;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  align-items: flex-end;
  max-width: 360px;
}
.kf-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: var(--panel-strong);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  animation: kf-in 0.22s ease-out;
  box-shadow: var(--shadow-1);
}
.kf-row .kf-name {
  font-family: var(--font-name);
  font-weight: 600;
  font-size: 14px;
}
.kf-row .kf-arrow {
  opacity: 0.45;
  font-size: 11px;
}
.kf-row .kf-weapon {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  padding: 2px 8px;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
}
.kf-row.fade { animation: kf-out 0.4s ease-out forwards; }
.kf-row.self-killer {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: var(--shadow-1),
              0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
}
.kf-row.self-victim {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  box-shadow: var(--shadow-1),
              0 0 12px color-mix(in srgb, var(--danger) 28%, transparent);
}
@keyframes kf-in {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes kf-out {
  to { opacity: 0; transform: translateX(28px); }
}

/* ---- Center announcements (multikill / killstreak / first blood) -------- */
#announce {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 22vh;
  gap: var(--space-2);
  z-index: 27;
  pointer-events: none;
}
.ann {
  font-family: var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.85),
                0 0 36px rgba(255, 204, 51, 0.32);
  animation: ann-pop 0.42s cubic-bezier(0.20, 1.20, 0.30, 1) both,
             ann-fade 1.6s 0.6s ease-out forwards;
}
.ann.first-blood { font-size: 58px; color: var(--danger); }
.ann.multikill   { font-size: 70px; color: var(--accent); }
.ann.streak      { font-size: 42px; color: var(--cool); }
.ann.ring-out    { font-size: 70px; color: #ff7a3d;
                   text-shadow: 0 6px 22px rgba(0,0,0,0.85),
                                 0 0 46px rgba(255, 122, 61, 0.62); }
.ann.last-stock  { font-size: 50px; color: var(--accent);
                   text-shadow: 0 6px 22px rgba(0,0,0,0.85),
                                 0 0 36px rgba(255, 210, 74, 0.55); }
.ann.comeback    { font-size: 60px; color: var(--good);
                   text-shadow: 0 6px 22px rgba(0,0,0,0.85),
                                 0 0 46px rgba(124, 255, 160, 0.6); }
.ann.match-point { font-size: 80px; color: #ff4477;
                   text-shadow: 0 6px 26px rgba(0,0,0,0.9),
                                 0 0 52px rgba(255, 68, 119, 0.7);
                   letter-spacing: 3.5px; }
@keyframes ann-pop {
  0%   { transform: scale(1.5); opacity: 0; }
  60%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}
@keyframes ann-fade {
  to { opacity: 0; transform: scale(0.96) translateY(-8px); }
}

/* ---- Win-progress bar in the score panel -------------------------------- */
.win-progress {
  display: block;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.win-progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.25s ease;
}
.win-progress.red > span { background: #ff5e5e; }
.win-progress.blue > span { background: #5aa8ff; }
.team-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}
.team-progress-row .win-progress { flex: 1; height: 4px; }