/*
 * Brain Arena — app styles.
 *
 * Dark theme matching globe-drop-rivals / rising-seasons tokens for visual
 * consistency across apps. Loaded after assets/css/main.css; site chrome
 * keeps its main.css styling, this file owns the in-app surfaces.
 */

/* ============================================================
 * Premium redesign tokens — cinematic dark theme with electric
 * cyan + violet accents. Builds layered depth through subtly
 * blue-tinted near-blacks rather than flat #000.
 * ============================================================ */
:root {
  color-scheme: dark;

  /* Deep-space base. The page background drives a soft radial
     wash of cyan + violet so the canvas never feels flat. */
  --bg: #06070d;
  --bg-grad:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 10%, rgba(168, 85, 247, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(99, 102, 241, 0.05), transparent 60%);

  /* Surface layers — each step lifts toward the viewer with a
     subtle blue-purple undertone instead of true gray. */
  --surface:    #0e1220;
  --surface-2:  #141a2c;
  --surface-3:  #1c2438;
  --surface-translucent:    rgba(14, 18, 32, 0.72);
  --surface-2-translucent:  rgba(20, 26, 44, 0.72);

  /* Text scale. Cool whites so the cyan accent stays distinct. */
  --text:    #eef2ff;
  --muted:   #8b95b3;
  --muted-2: #5b6585;

  /* Brand accents — electric cyan as primary, vivid violet as
     companion. Use cyan for active/focus, violet for secondary
     emphasis (chip backgrounds, host badge, podium top). */
  --cyan:        #22d3ee;
  --cyan-2:      #67e8f9;
  --cyan-soft:   rgba(34, 211, 238, 0.12);
  --cyan-strong: rgba(34, 211, 238, 0.45);
  --violet:        #a855f7;
  --violet-2:      #c084fc;
  --violet-soft:   rgba(168, 85, 247, 0.14);
  --violet-strong: rgba(168, 85, 247, 0.45);

  /* Legacy alias names — existing rules still reference these.
     Map them onto the new palette so we don't have to rewrite
     every single button + chip declaration. */
  --accent:        var(--cyan);
  --accent-2:      var(--violet);
  --accent-soft:   var(--cyan-soft);
  --accent-strong: var(--cyan-strong);

  /* Status colours, lifted slightly so they pop against the
     dark page. */
  --good:      #10b981;
  --good-soft: rgba(16, 185, 129, 0.16);
  --good-ink:  #022c1d;
  --bad:       #ef4444;
  --bad-soft:  rgba(239, 68, 68, 0.15);
  --bad-ink:   #2a0606;
  --warn:      #f59e0b;
  --gold:      #fbbf24;
  --silver:    #cbd5e1;
  --bronze:    #f59e0b;

  /* Borders — hairline, near-invisible until hovered or active. */
  --border:        rgba(148, 163, 184, 0.10);
  --border-strong: rgba(34, 211, 238, 0.40);

  --radius:    16px;
  --radius-sm: 10px;

  --ctrl-h: 40px;
  --ctrl-radius: 10px;
  --ctrl-pad-x: 1rem;
  --ctrl-font: 0.9rem;

  /* Shadows + glows. Layered so cards feel lifted, and accent
     shadows give buttons a quiet halo on hover/active. */
  --shadow-lifted:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 40px rgba(2, 6, 23, 0.55);
  --shadow-soft:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 18px rgba(2, 6, 23, 0.35);
  --glow-cyan:   0 0 0 1px rgba(34, 211, 238, 0.45), 0 0 24px rgba(34, 211, 238, 0.30);
  --glow-violet: 0 0 0 1px rgba(168, 85, 247, 0.45), 0 0 24px rgba(168, 85, 247, 0.30);
  --glow-soft:   0 6px 24px rgba(34, 211, 238, 0.18);

  /* Brand gradients for headlines + active states. */
  --grad-brand:    linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  --grad-brand-2:  linear-gradient(135deg, var(--cyan-2) 0%, var(--violet-2) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(168, 85, 247, 0.16));

  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace,
          "Roboto Mono", "Menlo", monospace;

  /* Body = Outfit (clean modern UI). Display headings get
     Space Grotesk via specific rules below. */
  font-family: "Outfit", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* main.css sets `section { display: block }` (HTML5-reset legacy) which beats
   the user-agent `[hidden] { display: none }` rule for every <section>. Force
   the standard `[hidden]` semantics across this app so toggling .hidden on
   panels works without a flicker. */
[hidden] { display: none !important; }

html {
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  background-color: var(--bg);
  min-height: 100%;
}

body.brain-arena-app {
  background: transparent !important;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  /* main.css adds padding-top to clear the fixed #header — preserve it. */
  padding-top: 3.25rem;
}

body.brain-arena-app a { color: var(--accent-2); text-decoration: none; }
body.brain-arena-app a:hover { text-decoration: underline; }

body.brain-arena-app h1,
body.brain-arena-app h2,
body.brain-arena-app h3,
body.brain-arena-app h4 {
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
  line-height: 1.25;
}

body.brain-arena-app input,
body.brain-arena-app select,
body.brain-arena-app textarea,
body.brain-arena-app button {
  font-family: inherit;
}

/* ---------- Buttons (matches globe-drop-rivals so chrome feels identical) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  border: 1px solid var(--border);
  border-radius: var(--ctrl-radius);
  background: var(--surface);
  color: var(--text) !important;
  font: inherit;
  font-size: var(--ctrl-font);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}
.btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: none !important; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-primary, .btn-primary:hover {
  background: var(--grad-brand);
  color: #051b22 !important;
  border-color: transparent;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.45), 0 8px 24px rgba(34, 211, 238, 0.25) !important;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.6), 0 10px 32px rgba(34, 211, 238, 0.4) !important;
  transform: translateY(-1px);
}

.btn-ghost, .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text) !important;
  border-color: var(--border);
}
.btn-ghost:hover {
  background: rgba(34, 211, 238, 0.07);
  border-color: rgba(34, 211, 238, 0.35);
}

/* ---------- Layout ---------- */

.page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  /* Generous breathing room on both axes — the page should never
     feel cramped against the edges of the viewport. */
  padding: 0.5rem 1.5rem 4rem;
}

.hero {
  position: relative;
  padding: 4.5rem 0 2rem;
  text-align: center;
  background: none !important;
}
/* Subtle indigo + teal bloom centered behind the title — gives the
   dark page depth without competing with content. Sits behind h1 via
   pointer-events:none and z-index. */
.hero::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 720px);
  height: 320px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(34, 211, 238, 0.18), transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(99, 102, 241, 0.14), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: clamp(2.6rem, 6.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  /* Three-stop gradient: bright cyan → near-white → violet so the
     title reads like a premium game splash, with letters catching
     light in the middle. Layered drop-shadows give it presence on
     the dark page. */
  background: linear-gradient(110deg,
    var(--cyan) 0%,
    var(--cyan-2) 22%,
    #f0f9ff 50%,
    var(--violet-2) 78%,
    var(--violet) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0 0 1.5rem;
  filter:
    drop-shadow(0 0 32px rgba(34, 211, 238, 0.22))
    drop-shadow(0 6px 28px rgba(168, 85, 247, 0.18));
}
.hero .tagline {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: 0.015em;
  font-weight: 400;
}

.section-title {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  color: var(--text);
}

.empty-state {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 2rem 0;
}

/* ---------- View tabs (matches globe-drop-rivals) ---------- */

.view-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  margin: 2rem auto 2.2rem;
  padding: 0.4rem;
  /* Frosted glass strip — semi-transparent surface + blur picks
     up the page-gradient wash behind it, so the nav feels like
     it's hovering over the cosmic backdrop. */
  background: rgba(8, 11, 22, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 999px;
  /* Thin glowing accent line underneath the nav + bright top edge. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 8px 32px rgba(2, 6, 23, 0.6);
  position: relative;
  display: flex;
  width: fit-content;
}
.view-tabs::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 50%, transparent);
  opacity: 0.6;
  filter: blur(1px);
  pointer-events: none;
}

.view-tab,
.view-tab:hover {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-2) !important;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease,
              border-color 0.22s ease, transform 0.08s ease;
}
.view-tab:hover {
  background: rgba(34, 211, 238, 0.05);
  border-color: rgba(34, 211, 238, 0.20);
  color: var(--text) !important;
}
.view-tab.is-active,
.view-tab.is-active:hover {
  background: var(--grad-brand);
  border-color: transparent;
  color: #061522 !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 6px 22px rgba(34, 211, 238, 0.40),
    0 0 28px rgba(168, 85, 247, 0.30);
}

.view { display: none; }
.view.is-active { display: block; }

/* ---------- Lobby ---------- */

.auth-gate {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.end-guest-cta {
  /* Same chrome as .auth-gate but sits on the end stage just under the
     summary line — slightly tighter top margin so it nests against the
     header without feeling bolted on. */
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.auth-gate .link-btn {
  background: none;
  border: none;
  color: var(--accent, #6aa7ff);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.auth-gate .link-btn:hover,
.auth-gate .link-btn:focus-visible {
  color: var(--accent-strong, #8bbcff);
}

.lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  /* Let each card size to its own content height. Without this, the
     Join card stretches to match the much taller Create card and
     looks empty. */
  align-items: start;
}

.lobby-card {
  /* Glassmorphism — semi-transparent surface + blur picks up the
     page-gradient backdrop so cards feel layered in space. Lighter
     inner gradient catches "light from above" toward the top edge. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 60%),
    rgba(20, 26, 44, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  /* Layered float: inner top highlight + dark outer drop + cyan halo */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(255, 255, 255, 0.02) inset,
    0 18px 50px rgba(2, 6, 23, 0.55),
    0 4px 16px rgba(2, 6, 23, 0.35);
  overflow: hidden;
}
/* Bright top-edge light line (2px) — like glass catching a highlight. */
.lobby-card::before {
  content: "";
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(34, 211, 238, 0.55) 30%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(168, 85, 247, 0.55) 70%,
    transparent);
  border-radius: 999px;
  filter: blur(0.4px);
  pointer-events: none;
}
.lobby-card:hover {
  border-color: rgba(34, 211, 238, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 22px 60px rgba(2, 6, 23, 0.65),
    0 0 48px rgba(34, 211, 238, 0.14);
  transform: translateY(-3px);
}

.lobby-card header h2 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lobby-card header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.lobby-form { display: flex; flex-direction: column; gap: 0.7rem; }

.lobby-field { display: block; }
.lobby-field > span {
  display: block;
  font-size: 0.7rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.lobby-field input[type="text"],
.lobby-field input[type="password"],
.lobby-field select {
  width: 100%;
  height: 38px;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  /* color-scheme: dark; tells the browser to render native popups
     (the option list, autofill chips, scrollbar) in dark mode so the
     dropdowns match the page chrome instead of flashing white. */
  color-scheme: dark;
}
/* Apply the same dark color-scheme to every select / option in the app
   so the OS-native dropdown popups stay dark site-wide, not just inside
   .lobby-field. <option> can't be fully restyled by CSS (browser-side),
   but color-scheme drives the popup palette. */
select, option { color-scheme: dark; }
select option { background: var(--surface); color: var(--text); }
.lobby-field input:hover, .lobby-field select:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.lobby-field input:focus, .lobby-field select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lobby-field-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.lobby-field-toggle:hover {
  background: rgba(34, 211, 238, 0.04);
  border-color: rgba(34, 211, 238, 0.25);
}
.lobby-field-toggle .toggle-icon {
  color: var(--muted-2);
  flex-shrink: 0;
  transition: color 0.18s ease;
}
.lobby-field-toggle:hover .toggle-icon { color: var(--cyan-2); }
.lobby-field-toggle:has(input[type="checkbox"]:checked) .toggle-icon { color: var(--cyan); }
.lobby-field-toggle > span {
  flex: 1;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text);
  font-size: 0.92rem;
}
/* Track + thumb switch built from the native checkbox. Track is the
   input itself (appearance:none) sized as a pill; thumb is a ::before
   that slides on :checked. Keeps accessibility — still a real
   checkbox under the hood. */
.lobby-field-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)),
    rgba(8, 11, 22, 0.65);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.lobby-field-toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e5e7eb, #94a3b8);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease, box-shadow 0.22s ease;
}
.lobby-field-toggle input[type="checkbox"]:checked {
  background: var(--grad-brand);
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.30),
    0 0 14px rgba(34, 211, 238, 0.45),
    0 0 22px rgba(168, 85, 247, 0.30);
}
.lobby-field-toggle input[type="checkbox"]:checked::before {
  transform: translateX(20px);
  background: linear-gradient(180deg, #ffffff, #e0f2fe);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(34, 211, 238, 0.45);
}
.lobby-field-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.lobby-cta { align-self: stretch; height: 42px; }

#join-code {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.join-error {
  margin: 0;
  color: var(--bad);
  font-size: 0.85rem;
}

/* Inline form-field warning — used under fields when validation fails.
   Amber-tinted with a warning icon, matching the app's glass look. */
.field-warning {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fcd34d;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.03) 60%, transparent);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-left-width: 3px;
  border-radius: 7px;
  animation: field-warning-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.field-warning svg { flex-shrink: 0; color: var(--warn); }
@keyframes field-warning-in {
  from { transform: translateY(-3px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Premium tags */
.premium-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.18), rgba(251, 146, 60, 0.18));
  color: var(--gold);
  border: 1px solid rgba(252, 211, 77, 0.3);
}

.premium-chip {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--gold), var(--bronze));
  color: #1a1500;
}

/* ---------- Room ---------- */

.room-panel { display: flex; flex-direction: column; gap: 1.25rem; }

.room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--surface-translucent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.room-head-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* Default room-head-right: inline cluster of mid-game controls.
   The button order in the DOM is host-actions → end-actions →
   chat → leave; defaults flow LTR with the cluster's natural gap. */
.room-head-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Post-match: three end-stage actions (Rematch, Chat, Back to lobby)
   sit side-by-side in one horizontal row, right-aligned in the
   room bar. All three share the same height + radius + font-size
   so the row reads as a matched set. flex-wrap:nowrap to keep
   them on one line at normal desktop widths. */
.room-head-right.is-finished {
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-self: center;
}
.room-head-right.is-finished > .room-end-actions > .btn,
.room-head-right.is-finished > #room-chat-toggle,
.room-head-right.is-finished > #leave-room-btn {
  height: var(--ctrl-h);
  font-size: 0.9rem;
  padding: 0 1.1rem;
  white-space: nowrap;
}
.room-head-right.is-finished > .room-end-actions > .btn {
  /* Rematch — keep the primary gradient and bump weight slightly so
     it's the obviously promoted action of the trio. */
  font-weight: 700;
  padding: 0 1.3rem;
}

.room-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem 0.4rem 0.95rem;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(168, 85, 247, 0.06)),
    var(--surface-2);
  border: 1px solid rgba(34, 211, 238, 0.30);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10) inset, 0 0 16px rgba(34, 211, 238, 0.10);
}
.room-code-label {
  font-size: 0.66rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.room-code-value {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  /* Terminal-readout glow — cyan with a small text-shadow so the
     room code reads as the most actionable thing in the header. */
  color: var(--cyan-2);
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
}
.room-code-copy {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0;
  background: transparent;
  color: var(--muted) !important;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.05s ease;
}
.room-code-copy:hover {
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan-2) !important;
}
.room-code-copy:active { transform: scale(0.94); }
.room-code-copy svg { width: 14px; height: 14px; }

.room-host-tag,
.room-private-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
/* "You're the host" badge — vibrant cyan→violet gradient + glow. */
.room-host-tag {
  background: var(--grad-brand);
  color: #051b22;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
}
.room-private-tag {
  background: rgba(251, 191, 36, 0.14);
  color: var(--gold);
  border-color: rgba(251, 191, 36, 0.4);
}

/* ---------- Stage: lobby (player list) ---------- */

.stage { animation: stage-fade 0.18s ease both; }
@keyframes stage-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.player-grid {
  list-style: none;
  margin: 0.65rem 0 1.1rem;
  padding: 0;
  display: grid;
  /* Wider floor than before (was 190px) so the name + badges have
     room to breathe. Cards still pack two-up on tablet, three-up
     on desktop. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.6rem;
}
.player-tile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
  animation: player-pop 0.25s ease both;
  /* Let the tile expand vertically when the name wraps or the
     badges row is present — no fixed height. */
  min-height: 44px;
}
@keyframes player-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.player-tile.is-host { border-color: var(--good); background: linear-gradient(180deg, var(--good-soft), transparent 60%), var(--surface); }
.player-tile.is-me { border-color: var(--accent); }
.player-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  align-self: flex-start;
}

/* Content column: name on top, badges row underneath. min-width:0
   is essential — without it the name's intrinsic width keeps the
   flex item from shrinking, forcing the badges to wrap weirdly. */
.player-tile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Gap between the name and the badges row (HOST + H2H). Bumped
     so the two read as separate beats instead of stacked-tight. */
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}
.player-name {
  font-weight: 600;
  color: var(--text);
  /* Allow names to wrap to a second line before truncating —
     truncation is the last resort, not the default. line-clamp
     caps at 2 so a 30-char name still fits in the tile. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
  max-width: 100%;
}

.player-tile-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.player-mini-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
}
.player-tile.is-host .player-mini-tag {
  color: rgb(110, 231, 183);
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.40);
}
.player-h2h-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0.1rem 0.5rem;
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.30);
  border-radius: 999px;
  color: var(--cyan-2);
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.25);
}

.lobby-host-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.lobby-host-hint, .lobby-guest-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}
.lobby-guest-hint { padding-top: 0.6rem; border-top: 1px solid var(--border); }

/* ---------- Game-type toggle (lobby create card) ---------- */

.game-type-toggle {
  display: inline-flex;
  padding: 4px;
  /* Inset track with a visible outer border so the two segments
     read as ONE unified control, not a button next to dark space. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.12)),
    rgba(8, 11, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  gap: 0;
  align-self: stretch;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.40) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset;
  position: relative;
}
.game-type-btn,
.game-type-btn:hover {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  background: transparent;
  /* Inactive label legible — was --muted (#8b95b3) which read as
     dim against the recessed track; bumped up to a soft white so
     the option clearly looks clickable. */
  color: #d1d5db !important;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  /* Smooth active-state transition — color + background + box-shadow
     all fade so the swap feels like a slide, not an abrupt cut. */
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.08s ease;
}
.game-type-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04);
}
.game-type-btn.is-active,
.game-type-btn.is-active:hover {
  /* The "indicator" — gradient pill with cyan + violet halo, sitting
     visibly above the dark recessed track. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 35%),
    var(--grad-brand);
  color: #061522 !important;
  font-weight: 700;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 20px rgba(34, 211, 238, 0.40),
    0 0 28px rgba(168, 85, 247, 0.28);
}

.lobby-hint {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
  padding: 0.7rem 0.85rem 0.7rem 1rem;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.06), rgba(34, 211, 238, 0.02) 40%, transparent),
    rgba(8, 11, 22, 0.45);
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm);
  font-style: italic;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.06);
  position: relative;
}

/* ---------- Stage: globe-drop ---------- */

.globe-drop-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 22px 60px -16px rgba(0,0,0,0.4);
}

.globe-drop-prompt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  padding: 1.3rem 1.5rem;
  /* scrollIntoView({block:'start'}) anchors element top to viewport
     y=0; the global fixed page header would otherwise overlap. Add
     a margin so the prompt lands just under the header. */
  scroll-margin-top: 4rem;
  /* Glassmorphism: semi-transparent surface + blur picks up the
     background gradient. Inner glow + outer shadow gives it lift. */
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(168, 85, 247, 0.06)),
    var(--surface-translucent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(34, 211, 238, 0.20);
  border-radius: var(--radius);
  flex-wrap: wrap;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 32px rgba(2, 6, 23, 0.55),
    0 0 32px rgba(34, 211, 238, 0.10);
  overflow: hidden;
}
.globe-drop-prompt-row::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5) 50%, transparent);
  pointer-events: none;
}
.globe-drop-prompt {
  margin: 0;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.015em;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  line-height: 1.2;
}
.globe-drop-prompt strong,
.globe-drop-prompt-country,
.globe-drop-prompt-hints {
  user-select: text;
  -webkit-user-select: text;
}
.globe-drop-prompt-label {
  color: var(--muted);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.65em;
  letter-spacing: 0.18em;
  margin-right: 0.45rem;
}
/* The city name itself — bright gradient text. */
.globe-drop-prompt strong {
  font-weight: 700;
  letter-spacing: -0.01em;
  background: var(--grad-brand-2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.35));
}
.globe-drop-prompt-country { color: var(--muted); font-weight: 400; font-size: 0.78em; }
.globe-drop-prompt-country:not(:empty)::before { content: ", "; }
.globe-drop-prompt-hints {
  margin: 0;
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.globe-drop-difficulty-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-2-translucent);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.globe-drop-difficulty-chip[data-tier="hard"] {
  /* Hard = aggressive red with a soft pulse so the player feels
     the stakes. */
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fecaca;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.30);
  animation: gd-chip-pulse 1.6s ease-in-out infinite;
}
.globe-drop-difficulty-chip[data-tier="easy"] {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
}
@keyframes gd-chip-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.25); }
  50%      { box-shadow: 0 0 26px rgba(239, 68, 68, 0.55); }
}

.lobby-solo-actions {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
/* Gradient-bordered ghost — transparent fill on a dark surface, with
   the border itself being a cyan→violet gradient via double-bg trick
   (gradient on outer bg, dark gradient on inner bg). On hover the
   inner fades to a faint gradient wash. */
.lobby-solo-btn,
.lobby-solo-btn:hover {
  flex: 1 1 160px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  height: 42px;
  padding: 0 1.1rem;
  position: relative;
  background:
    linear-gradient(rgba(8, 11, 22, 0.85), rgba(8, 11, 22, 0.85)) padding-box,
    linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%) border-box;
  border: 1.5px solid transparent !important;
  border-radius: 12px;
  color: var(--text) !important;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.08s ease;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10), 0 6px 20px rgba(2, 6, 23, 0.4) !important;
}
.lobby-solo-btn:hover {
  background:
    linear-gradient(rgba(8, 11, 22, 0.5), rgba(8, 11, 22, 0.5)) padding-box,
    linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.25),
    0 8px 28px rgba(34, 211, 238, 0.20),
    0 0 32px rgba(168, 85, 247, 0.15) !important;
  transform: translateY(-1px);
}

.leaderboard-head-daily {
  margin-top: 3rem;
  padding-top: 2rem;
  position: relative;
}
/* Gradient separator line — divides the global table from today's
   challenge with a soft cyan→violet scanline. */
.leaderboard-head-daily::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(34, 211, 238, 0.5) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(168, 85, 247, 0.5) 70%,
    transparent);
  filter: blur(0.4px);
}
.leaderboard-head-daily .section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  background: linear-gradient(135deg, #f0f9ff 0%, var(--cyan-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.30));
}
.section-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.35);
  color: var(--cyan-2);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.10),
    0 0 16px rgba(34, 211, 238, 0.25);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.35));
  -webkit-text-fill-color: initial;
}
.section-title-icon svg { display: block; }
.leaderboard-date {
  margin-left: 0.55rem;
  padding: 0.25rem 0.7rem;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(34, 211, 238, 0.45);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan-2);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.35);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.15),
    0 0 18px rgba(34, 211, 238, 0.22);
  font-family: var(--mono);
}
.leaderboard-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

.ba-toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.45rem;
  pointer-events: none;
  max-width: 320px;
}
.ba-toast {
  position: relative;
  pointer-events: auto;
  padding: 0.7rem 0.95rem 0.7rem 1rem;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(168, 85, 247, 0.04)),
    var(--surface-translucent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.88rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 32px rgba(2, 6, 23, 0.55),
    0 0 20px rgba(34, 211, 238, 0.12);
  animation: ba-toast-in 260ms cubic-bezier(0.22, 1, 0.36, 1), ba-toast-out 220ms ease-in 3.5s forwards;
  overflow: hidden;
}
.ba-toast::before {
  content: "";
  position: absolute;
  left: 0; top: 10%; bottom: 10%; width: 2px;
  background: var(--grad-brand);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}
.ba-toast .ba-toast-icon { margin-right: 0.4rem; }
@keyframes ba-toast-in {
  from { transform: translateX(12px); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
@keyframes ba-toast-out {
  to   { transform: translateX(12px); opacity: 0; }
}

.btn-icon-danger {
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: rgb(252, 165, 165);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.btn-icon-danger:hover {
  background: rgba(248, 113, 113, 0.12);
  color: rgb(254, 202, 202);
}
.leaderboard-table .col-admin { width: 40px; text-align: center; }

.room-host-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.55rem;
}
.btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1.1;
}
.btn-danger-ghost {
  color: rgb(252, 165, 165);
  border-color: rgba(248, 113, 113, 0.4);
}
.btn-danger-ghost:hover {
  background: rgba(248, 113, 113, 0.10);
}
.btn-danger {
  background: rgb(220, 38, 38) !important;
  border-color: rgb(220, 38, 38) !important;
  color: white !important;
}
.btn-danger:hover { background: rgb(185, 28, 28) !important; }

/* Restart-proposal waiting modal — shown to the proposer while
   opponents respond. The list of responses re-renders on each
   room-doc snapshot; the timer label updates on a 250ms interval.
   Visuals tuned to match the app's glass aesthetic — a clear cyan
   ring around the panel, an animated bottom depletion bar, gradient
   title, and per-row pill badges. */
.proposal-pending-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(34, 211, 238, 0.30);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 32px 80px rgba(2, 6, 23, 0.75),
    0 0 0 1px rgba(34, 211, 238, 0.15),
    0 0 36px rgba(34, 211, 238, 0.22);
}

.proposal-pending-title {
  margin: 0 0 0.5rem;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.proposal-pending-title > span:first-child {
  background: linear-gradient(110deg, var(--cyan) 0%, var(--cyan-2) 40%, #f0f9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.25));
}
/* Animated three-dot pulse — each dot fades in then out in sequence
   so the row of dots feels alive. */
.proposal-pending-dots {
  display: inline-flex;
  margin-left: 0.15rem;
  color: var(--cyan-2);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.4));
}
.proposal-pending-dots i {
  font-style: normal;
  opacity: 0.25;
  animation: pp-dot 1.4s ease-in-out infinite;
}
.proposal-pending-dots i:nth-child(2) { animation-delay: 0.18s; }
.proposal-pending-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pp-dot {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}

.proposal-pending-sub {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.proposal-response-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.proposal-response-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%),
    rgba(8, 11, 22, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  font-size: 0.9rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  transition: background 0.22s ease, border-color 0.22s ease;
}
/* Initial-letter avatar — same vibe as the lobby player tile. */
.proposal-response-row .avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), transparent 45%),
    linear-gradient(rgba(14, 18, 32, 0.95), rgba(14, 18, 32, 0.95)) padding-box,
    linear-gradient(135deg, var(--cyan) 0%, var(--violet-2) 100%) border-box;
  border: 1.5px solid transparent;
  color: var(--text);
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
}
.proposal-response-row .name {
  color: var(--text);
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Status pill — pulses while waiting, solid when resolved. */
.proposal-response-row .status {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.proposal-response-row.is-pending .status {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.40);
  color: #fde68a;
  animation: pp-status-pulse 1.6s ease-in-out infinite;
}
@keyframes pp-status-pulse {
  0%, 100% { opacity: 0.7;  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
  50%      { opacity: 1;    box-shadow: 0 0 12px 0 rgba(245, 158, 11, 0.35); }
}
.proposal-response-row.is-accepted {
  background:
    linear-gradient(180deg, rgba(16, 185, 129, 0.12), transparent 60%),
    rgba(8, 18, 14, 0.55);
  border-color: rgba(16, 185, 129, 0.35);
}
.proposal-response-row.is-accepted .status {
  background: rgba(16, 185, 129, 0.20);
  border-color: rgba(16, 185, 129, 0.55);
  color: rgb(110, 231, 183);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
}
.proposal-response-row.is-declined {
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.10), transparent 60%),
    rgba(18, 8, 8, 0.55);
  border-color: rgba(239, 68, 68, 0.30);
}
.proposal-response-row.is-declined .status {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: rgb(252, 165, 165);
}

.proposal-pending-timer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  color: var(--cyan-2);
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.35);
}
.proposal-pending-clock {
  color: var(--cyan-2);
  flex-shrink: 0;
  opacity: 0.85;
}
.proposal-pending-timer {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Cancel — small ghost with an amber warning tint. Red would feel
   too punitive for what's still a soft action. */
.proposal-cancel-btn,
.proposal-cancel-btn:hover {
  color: #fde68a !important;
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.45) !important;
  font-size: 0.82rem;
  padding: 0 0.85rem;
  height: 30px;
}
.proposal-cancel-btn:hover {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 0 14px rgba(245, 158, 11, 0.30) !important;
}

/* Depletion bar at the bottom edge — driven by a 10s linear width
   shrink. Cyan during the first half, ambering as it crosses
   midway, red by the time it's near zero (via background gradient
   that's revealed as the inner bar narrows). */
.proposal-pending-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.proposal-pending-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--warn) 70%, var(--bad) 100%);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
  transform-origin: left center;
  /* Start of the animation = no override; transform is reset each
     time the modal opens via JS so the bar fully refills before
     animating down. */
  transform: scaleX(1);
  transition: transform 0.25s linear;
}

/* Ready-for-next strip — sits inside the reveal panel during the
   5-second wait between rounds. Any player can vote ready to skip
   the wait; the host advances once everyone's voted. */
.globe-drop-ready-bar {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.globe-drop-ready-bar button {
  flex: 0 0 auto;
}
.globe-drop-ready-bar button:disabled {
  opacity: 0.55;
  cursor: default;
}
.globe-drop-ready-status {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.globe-drop-ready-status .ready-pip {
  display: inline-block;
  margin: 0 0.35rem 0 0;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 0.72rem;
  color: var(--muted);
}
.globe-drop-ready-status .ready-pip.is-ready {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.45);
  color: rgb(110, 231, 183);
}

.confirm-modal-body {
  margin: 0.5rem 0 1.1rem;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.94rem;
}

.room-paused-banner {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.85rem;
  background: rgba(252, 211, 77, 0.10);
  border: 1px solid rgba(252, 211, 77, 0.35);
  border-radius: 8px;
  color: rgb(252, 211, 77);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}

/* Globe-drop layout — top-mounted live standings */
.globe-drop-status { display: none; }

/* Floating action buttons overlaid on the globe (top-right). Container
   has pointer-events:none so the globe stays draggable behind it; the
   buttons themselves restore pointer-events:auto. Only rendered while
   a pin is placed (toggled via [hidden] on the stack and individual
   buttons). */
/* Timer overlay positioned at the top-left of the globe wrapper. Sized
   smaller than the legacy header timer (it was 72px) so it doesn't
   dominate the globe view. Compound selector `.game-timer.globe-drop-
   timer-overlay` so it beats the bare `.game-timer` rule defined
   later in this file (which would otherwise restore position:relative
   + 72px and drop the element into the document flow). */
.game-timer.globe-drop-timer-overlay {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 4;
  width: 56px;
  height: 56px;
  pointer-events: none;
}
.game-timer.globe-drop-timer-overlay .timer-ring {
  width: 100%;
  height: 100%;
}
.game-timer.globe-drop-timer-overlay .game-timer-num {
  font-size: 0.95rem;
}
@media (max-width: 540px) {
  .game-timer.globe-drop-timer-overlay { width: 46px; height: 46px; top: 0.5rem; left: 0.5rem; }
  .game-timer.globe-drop-timer-overlay .game-timer-num { font-size: 0.82rem; }
}

.globe-drop-fab-stack {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  display: flex;
  gap: 0.5rem;
  pointer-events: none;
  animation: globe-fab-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hide the whole stack until a pin is placed. The Clear button is the
   pin-placed signal (hidden becomes false on pin-drop); when it's
   absent, the entire FAB stack collapses. */
.globe-drop-fab-stack:not(:has(#globe-drop-clear-btn:not([hidden]))) {
  display: none;
}
@keyframes globe-fab-in {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Shared base for both FABs. Identical height + padding + radius +
   font-weight so Submit and Clear read as a matched pair. The two
   variants override only background / border / shadow / colour. */
.globe-drop-fab,
.globe-drop-fab:hover {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.7rem;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.18s ease,
              border-color 0.18s ease, filter 0.18s ease, color 0.18s ease;
}
.globe-drop-fab .globe-drop-fab-icon { flex-shrink: 0; display: block; }
.globe-drop-fab:disabled { opacity: 0.5; cursor: not-allowed; }
.globe-drop-fab[hidden] { display: none; }

/* Primary submit: cyan→violet gradient with a tight halo. The halo is
   a single inset-style shadow + a small spread shadow (not a giant
   blurred drop) so the light reads as emitted from the button edge
   rather than pooled underneath. */
.globe-drop-fab-primary,
.globe-drop-fab-primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 50%),
    var(--grad-brand);
  /* !important wins the cascade against main.css's
     `button { color: #555555 !important; }` global. */
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 0 8px rgba(34, 211, 238, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.globe-drop-fab-primary .globe-drop-fab-icon {
  color: #ffffff;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}
.globe-drop-fab-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 12px rgba(34, 211, 238, 0.55);
}
.globe-drop-fab-primary:active:not(:disabled) { transform: translateY(0); }

/* Ghost clear: glass treatment — semi-transparent dark fill, clearly
   visible light border, white text + icon. Reads as obviously a
   button without competing with the gradient on Submit. */
.globe-drop-fab-ghost,
.globe-drop-fab-ghost:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 60%),
    rgba(8, 11, 22, 0.55);
  /* !important — see note on .globe-drop-fab-primary. */
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 12px rgba(2, 6, 23, 0.45);
}
.globe-drop-fab-ghost .globe-drop-fab-icon { color: #f3f4f6; }

/* Destructive hover — gentle amber tint signals "reset / remove". */
.globe-drop-fab-ghost:hover {
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.14), transparent 60%),
    rgba(20, 11, 4, 0.55);
  color: #fde68a !important;
  border-color: rgba(245, 158, 11, 0.50);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(245, 158, 11, 0.25),
    0 0 10px rgba(245, 158, 11, 0.30);
  transform: translateY(-1px);
}
.globe-drop-fab-ghost:hover .globe-drop-fab-icon { color: #fde68a; }
.globe-drop-fab-ghost:active { transform: translateY(0); }

@media (max-width: 540px) {
  .globe-drop-fab-stack { top: 0.5rem; right: 0.5rem; gap: 0.35rem; }
  .globe-drop-fab { height: 28px; padding: 0 0.6rem; font-size: 0.74rem; }
  .globe-drop-fab span { display: none; }
}

/* Mini-board variant pinned above the globe with submit-state badges.
   Generous bottom margin gives live standings breathing room before
   the next section (globe / previous round scores) begins. */
.mini-board-top { margin: 0 0 1.6rem; }

/* Round-by-round breakdown. Each row = one completed round, with per-
   player score chips. Sits next to / under the cumulative live
   standings — same visual family, muted treatment so it reads as
   reference detail not the headline. */
.rounds-history-board {
  margin: 0 0 1.6rem;
  padding: 0.9rem 1.1rem 0.95rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),
    rgba(8, 11, 22, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 20px rgba(2, 6, 23, 0.35);
}
.rounds-history-board::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.30) 50%, transparent);
  pointer-events: none;
}
.rounds-history-board .mini-board-head {
  margin-bottom: 0.5rem;
}
.rounds-history-board h3 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.rounds-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.rounds-history-row {
  /* Grid (not flex) so the city slot has a FIXED width across all
     rounds — chips always start at the same x position so the eye
     scans vertically without zig-zagging. Narrow viewports collapse
     to a stacked layout via the media query below. */
  display: grid;
  grid-template-columns: auto 14ch 1fr;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(148, 163, 184, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.rounds-history-label {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-size: 0.78rem;
}
.rounds-history-loc {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rounds-history-scores {
  /* Sits in the 1fr column. Chips flow left, tight together — no
     justify-end, no margin-left:auto. The fixed city column above
     means chips always start at the same x position. */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
@media (max-width: 540px) {
  .rounds-history-row {
    /* Stack on narrow: R# + city on row 1, chips span row 2. */
    grid-template-columns: auto 1fr;
  }
  .rounds-history-scores {
    grid-column: 1 / -1;
  }
}
.rounds-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  background: rgba(34, 211, 238, 0.07);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cyan-2);
}
.rounds-history-chip.is-me {
  background: var(--grad-brand-soft);
  border-color: rgba(34, 211, 238, 0.45);
  color: var(--text);
}
/* Multiplier breakdown sits next to the R# label (round-level, not
   per-player). Compact mono in muted-2 so it reads as metadata, not
   the headline number. */
.rounds-history-mult {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: 0.3rem;
}
.rounds-history-chip.is-zero {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(148, 163, 184, 0.10);
}
.mini-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.55rem;
}
.mini-board-head h3 { margin: 0; }
.mini-board-pulse {
  margin: 0;
  padding: 0.18rem 0.55rem;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.45);
  border-radius: 999px;
  color: rgb(199, 210, 254);
  font-size: 0.78rem;
  font-weight: 600;
  animation: gd-pulse-in 320ms ease-out, gd-pulse-out 280ms ease-in 2.5s forwards;
}
@keyframes gd-pulse-in  { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes gd-pulse-out { to   { opacity: 0; } }

/* Legacy submitted-badge — kept invisible to avoid any chance of older
   server-rendered HTML showing two checkmarks. The single ✓ now comes
   from .mini-board-check (see below). */
.mini-board-list .submitted-badge { display: none; }

/* Chat side panel */
.room-chat-panel {
  position: fixed;
  top: 4.25rem;
  right: 1rem;
  bottom: 1rem;
  width: 340px;
  max-width: calc(100vw - 2rem);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.04), transparent 35%),
    var(--surface-translucent);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px rgba(2, 6, 23, 0.6),
    0 0 32px rgba(34, 211, 238, 0.10);
  z-index: 50;
  animation: ba-chat-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.room-chat-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55) 50%, transparent);
  pointer-events: none;
}
@keyframes ba-chat-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.room-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(34, 211, 238, 0.12);
  background: rgba(20, 26, 44, 0.35);
}
.room-chat-head h3 {
  margin: 0;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.room-chat-list {
  list-style: none;
  margin: 0;
  padding: 0.8rem 0.95rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.25) transparent;
}
.room-chat-list::-webkit-scrollbar { width: 6px; }
.room-chat-list::-webkit-scrollbar-thumb {
  background: rgba(34, 211, 238, 0.25);
  border-radius: 999px;
}
.room-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
  transition: border-color 0.18s, background 0.18s;
}
.room-chat-msg:hover { border-color: rgba(148, 163, 184, 0.20); }
.room-chat-msg.is-mine {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(168, 85, 247, 0.08));
  border-color: rgba(34, 211, 238, 0.30);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.10);
}
.room-chat-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.room-chat-time {
  color: var(--muted-2);
  font-size: 0.72rem;
  margin-left: 0.4rem;
  font-family: var(--mono);
}
.room-chat-body { color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; }
.room-chat-empty {
  margin: 0.85rem 0.95rem;
  padding: 0.75rem 0.85rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}
.room-chat-quick {
  display: grid;
  /* Fixed 8-column grid — keeps every emoji button the same width and
     prevents the uneven wrap we get with flex when the panel is narrow.
     Drops to 4 columns on tight panels via the responsive rule below. */
  grid-template-columns: repeat(8, 1fr);
  gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  border-top: 1px solid rgba(34, 211, 238, 0.10);
  background: rgba(20, 26, 44, 0.25);
}
.room-chat-quick-btn {
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.08s, border-color 0.15s, box-shadow 0.15s;
}
.room-chat-quick-btn:hover {
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.18);
  transform: translateY(-1px);
}
.room-chat-quick-btn:active { transform: scale(0.92); }
@media (max-width: 380px) {
  .room-chat-quick { grid-template-columns: repeat(4, 1fr); }
}

.room-chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0.95rem 0.85rem;
  border-top: 1px solid rgba(34, 211, 238, 0.10);
  background: rgba(20, 26, 44, 0.25);
}
.room-chat-form input[type="text"] {
  flex: 1;
  height: 38px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.9rem;
  color-scheme: dark;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.room-chat-form input[type="text"]::placeholder { color: var(--muted-2); }
.room-chat-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(34, 211, 238, 0.04);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15), 0 0 18px rgba(34, 211, 238, 0.15);
}
.room-chat-error {
  margin: 0 0.95rem 0.7rem;
  padding: 0.45rem 0.65rem;
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 8px;
  color: rgb(252, 165, 165);
  font-size: 0.82rem;
}

.room-chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.4rem;
  margin-left: 0.35rem;
  background: var(--grad-brand);
  color: #051b22;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

@media (max-width: 540px) {
  .room-chat-panel { right: 0.5rem; left: 0.5rem; width: auto; bottom: 0.5rem; }
}

/* H2H view */
.h2h-picker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 0.9rem;
  margin: 1rem 0 1.25rem;
}
.h2h-pick { margin: 0; }
.h2h-versus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #061522;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 40%),
    var(--grad-brand);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.10),
    0 0 0 8px rgba(34, 211, 238, 0.05),
    0 8px 28px rgba(34, 211, 238, 0.45),
    0 0 36px rgba(168, 85, 247, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.30) inset;
  align-self: center;
  justify-self: center;
  position: relative;
  animation: h2h-versus-pulse 2.4s ease-in-out infinite;
}
@keyframes h2h-versus-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(34, 211, 238, 0.10),
      0 0 0 8px rgba(34, 211, 238, 0.05),
      0 8px 28px rgba(34, 211, 238, 0.45),
      0 0 36px rgba(168, 85, 247, 0.35),
      0 1px 0 rgba(255, 255, 255, 0.30) inset;
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(34, 211, 238, 0.18),
      0 0 0 10px rgba(34, 211, 238, 0.08),
      0 8px 32px rgba(34, 211, 238, 0.60),
      0 0 48px rgba(168, 85, 247, 0.50),
      0 1px 0 rgba(255, 255, 255, 0.30) inset;
  }
}
.h2h-result {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* card · record pill · card */
  align-items: stretch;
  gap: 1rem;
}
/* Lifetime W-D-L pill sitting between the two cards. Reads as the
   headline summary so the eye lands on "who's winning the rivalry"
   before parsing the stat lists. */
.h2h-record-pill {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(8, 11, 22, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 18px;
  box-shadow:
    0 0 24px rgba(251, 191, 36, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  min-width: 130px;
}
.h2h-record-label {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}
.h2h-record-score {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.h2h-record-num {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.h2h-record-num.is-lead {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.5);
}
.h2h-record-num.is-trail {
  color: var(--muted);
  opacity: 0.7;
}
.h2h-record-dash {
  color: var(--muted-2);
  font-weight: 500;
}
.h2h-record-sub {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.h2h-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 25%, transparent 50%),
    rgba(20, 26, 44, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.35rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 36px rgba(2, 6, 23, 0.5);
  overflow: hidden;
}
/* Cyan identity for left card */
.h2h-result .h2h-card:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0; left: 4%; right: 4%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--cyan-2) 50%, var(--cyan) 70%, transparent);
  filter: blur(0.3px);
  pointer-events: none;
}
.h2h-result .h2h-card:nth-child(1) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 36px rgba(2, 6, 23, 0.5),
    0 0 28px rgba(34, 211, 238, 0.12);
}
.h2h-result .h2h-card:nth-child(1)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(34, 211, 238, 0.10), transparent 60%);
  pointer-events: none;
}
/* Violet identity for right card */
.h2h-result .h2h-card:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0; left: 4%; right: 4%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--violet) 30%, var(--violet-2) 50%, var(--violet) 70%, transparent);
  filter: blur(0.3px);
  pointer-events: none;
}
.h2h-result .h2h-card:nth-child(2) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 36px rgba(2, 6, 23, 0.5),
    0 0 28px rgba(168, 85, 247, 0.12);
}
.h2h-result .h2h-card:nth-child(2)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(168, 85, 247, 0.10), transparent 60%);
  pointer-events: none;
}
.h2h-card > * { position: relative; z-index: 1; }

.h2h-card header { margin: 0 0 1.1rem; }
.h2h-card h3 {
  margin: 0;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.15;
}
.h2h-result .h2h-card:nth-child(1) h3 {
  background: linear-gradient(135deg, #f0f9ff 0%, var(--cyan-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.25));
}
.h2h-result .h2h-card:nth-child(2) h3 {
  background: linear-gradient(135deg, #f0f9ff 0%, var(--violet-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.25));
}
.h2h-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.1rem;
  margin: 0;
}
.h2h-stats dt {
  color: var(--muted-2);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  align-self: center;
}
.h2h-stats dd {
  margin: 0;
  font-weight: 700;
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--text);
}
.h2h-val.h2h-lead  {
  color: rgb(167, 243, 208);
  font-weight: 800;
  text-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
}
.h2h-val.h2h-trail {
  color: var(--muted);
  font-weight: 600;
  opacity: 0.7;
}
@media (max-width: 540px) {
  .h2h-picker { grid-template-columns: 1fr; }
  .h2h-versus { text-align: center; padding: 0.15rem 0; }
  .h2h-result { grid-template-columns: 1fr; }
  .h2h-record-pill { order: -1; }   /* lifetime pill above the cards on mobile */
}

.lobby-waiting-hint {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.8rem;
  background: rgba(252, 211, 77, 0.08);
  border: 1px solid rgba(252, 211, 77, 0.3);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.85rem;
}

.globe-drop-region-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-2);
  text-transform: capitalize;
  letter-spacing: 0.02em;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.globe-drop-hint {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Wrapper hosts the globe + overlay UI as siblings. globe.gl owns the
   inner contents of #globe-drop-map (its WebGL canvas) and we can't
   safely keep our own children in there — they get reparented when
   the scene re-initializes. The wrapper is the positioning context
   for the FAB stack + the timer overlay. */
.globe-drop-map-wrap {
  position: relative;
  width: 100%;
}

.globe-drop-map {
  position: relative;
  width: 100%;
  height: clamp(420px, 62vh, 640px);
  /* No flat border or hard background — the globe should appear to
     float in space. We get the atmosphere look from a radial gradient
     that goes from near-black at the corners to a very deep navy
     behind the globe, with a cyan halo ringing the centre. */
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.10) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, #0a1530 0%, #02030a 75%);
  cursor: grab;
  border-radius: var(--radius);
  isolation: isolate;
}
.globe-drop-map::before {
  /* Soft outer ring — like Earth's atmosphere seen from orbit. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(34, 211, 238, 0.06) 65%, transparent 75%);
  z-index: 0;
}
.globe-drop-map:active { cursor: grabbing; }
/* globe.gl injects a <canvas> child that fills the container. */
.globe-drop-map canvas { display: block; position: relative; z-index: 1; }

.globe-drop-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}

.globe-drop-status {
  margin-top: 0.6rem;
}

.globe-drop-attribution {
  margin: 0.75rem 0 0;
  font-size: 0.7rem;
  color: var(--muted-2);
  text-align: right;
}
.globe-drop-attribution a {
  color: inherit;
  text-decoration: underline dotted;
}

.globe-drop-reveal {
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.globe-drop-reveal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.globe-drop-reveal-distance {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.globe-drop-reveal-distance strong { color: var(--accent-2); }
.globe-drop-reveal-distance.is-pulse strong {
  display: inline-block;
  animation: gd-score-pulse 700ms cubic-bezier(0.18, 0.84, 0.32, 1) both;
}
@keyframes gd-score-pulse {
  0%   { transform: translateY(8px) scale(0.85); opacity: 0; }
  35%  { transform: translateY(-2px) scale(1.35); opacity: 1; color: var(--accent-2); }
  60%  { transform: translateY(0) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* "5 to next" countdown chip — visible only during the global reveal
   window so players see exactly how many seconds until the next city. */
.globe-drop-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem 0.35rem 0.45rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.globe-drop-countdown-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.globe-drop-countdown-label { letter-spacing: 0.08em; }

.globe-drop-reveal-trivia {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}
/* Wikipedia escape hatch — small pill below the reveal so players can
   read more about the location regardless of whether the inline trivia
   fetch returned anything. */
.globe-drop-reveal-wiki {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cyan-2);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.globe-drop-reveal-wiki:hover {
  background: rgba(34, 211, 238, 0.16);
  border-color: rgba(34, 211, 238, 0.45);
}

/* Pin styling is now handled by globe.gl's pointColor() (no DOM nodes
   to style — pins are rendered into the WebGL canvas). Legend chips
   below the globe explain the colors. */
.globe-drop-legend {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.globe-drop-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.globe-drop-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.globe-drop-legend-dot.is-actual { background: var(--gold); box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.3); }
.globe-drop-legend-dot.is-mine   { background: var(--accent); }
.globe-drop-legend-dot.is-other  { background: var(--bad); }

/* ---------- Stage: picking (between questions) ---------- */

.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.pick-progress {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.pick-progress-label { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.7rem; color: var(--muted-2); font-weight: 600; }
.pick-progress-now {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.pick-progress-sep { color: var(--muted-2); }
.pick-progress-total { color: var(--muted); font-family: var(--mono); }

.pick-decider {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.7rem 0.35rem 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.pick-decider-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  flex-shrink: 0;
}
.pick-decider-text { display: flex; flex-direction: column; line-height: 1.1; }
.pick-decider-label {
  font-size: 0.62rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.pick-decider-name {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
}

.pick-prompt {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0.4rem 0 1rem;
}

.pick-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
  max-width: 740px;
  margin: 0 auto;
}

.pick-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.05rem 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text) !important;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, box-shadow 0.15s;
  min-height: 78px;
}
.pick-cat-btn:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pick-cat-btn:active { transform: translateY(1px); }
.pick-cat-btn:disabled {
  opacity: 0.55;
  cursor: default;
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: none;
}
.pick-cat-label {
  font-weight: 600;
  font-size: 0.98rem;
  text-transform: capitalize;
}
.pick-cat-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted-2);
}
.pick-cat-random {
  background: linear-gradient(135deg, var(--accent-soft), rgba(74, 222, 128, 0.08));
  border-color: var(--accent);
}
.pick-cat-random:hover {
  background: linear-gradient(135deg, var(--accent-soft), rgba(74, 222, 128, 0.16));
}

.pick-waiting-msg {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 1.5rem 0 0.5rem;
  font-style: italic;
}

/* ---------- Stage: game ---------- */

.game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.game-progress {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.game-progress-label { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.7rem; color: var(--muted-2); font-weight: 600; }
.game-progress-now {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.game-progress-sep { color: var(--muted-2); }
.game-progress-total { color: var(--muted); font-family: var(--mono); }

.game-timer {
  position: relative;
  width: 72px;
  height: 72px;
}
.timer-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.35));
  transition: filter 0.3s ease;
}
.timer-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 5;
}
.timer-ring-fill {
  fill: none;
  /* Default: cyan glow. Warn / danger states shift hue along
     cyan → amber → red as the timer drains. */
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-linecap: round;
  /* circumference for r=28 ≈ 175.93; JS keeps offset in sync */
  stroke-dasharray: 176;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s linear, stroke 0.3s ease;
}
.game-timer[data-state="warn"]   .timer-ring-fill { stroke: var(--warn); }
.game-timer[data-state="danger"] .timer-ring-fill {
  stroke: var(--bad);
  animation: gd-timer-pulse 0.65s ease-in-out infinite;
}
.game-timer[data-state="warn"]   .timer-ring { filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.5)); }
.game-timer[data-state="danger"] .timer-ring { filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.6)); }
@keyframes gd-timer-pulse {
  0%, 100% { stroke-opacity: 1; }
  50%      { stroke-opacity: 0.55; }
}
.game-timer-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.question-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 22px 60px -16px rgba(0,0,0,0.4);
}

.question-category {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0.3rem 0.7rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.question-text {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  margin: 0 0 1.2rem;
  line-height: 1.3;
}

.answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.answer-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text) !important;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, box-shadow 0.15s;
  min-height: 64px;
}
.answer-btn:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.answer-btn:active { transform: translateY(1px); }
.answer-btn:disabled { cursor: default; }

.answer-btn .answer-letter {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--surface-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-2);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.answer-btn.is-picked {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.answer-btn.is-picked .answer-letter { background: var(--accent); color: #fff; }

/* Reveal states applied at end of question */
.answer-btn.is-correct,
.answer-btn.is-correct:hover {
  border-color: var(--good);
  background: var(--good-soft);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}
.answer-btn.is-correct .answer-letter { background: var(--good); color: var(--good-ink); }

.answer-btn.is-wrong,
.answer-btn.is-wrong:hover {
  border-color: var(--bad);
  background: var(--bad-soft);
}
.answer-btn.is-wrong .answer-letter { background: var(--bad); color: var(--bad-ink); }

.answer-btn.is-dim,
.answer-btn.is-dim:hover {
  opacity: 0.55;
  border-color: var(--border);
  background: var(--surface-2);
  box-shadow: none;
}

.answer-status {
  margin: 0.85rem 0 0;
  min-height: 1.2rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.answer-status.is-correct { color: var(--good); font-weight: 600; }
.answer-status.is-wrong { color: var(--bad); font-weight: 600; }

@media (max-width: 540px) {
  .answer-grid { grid-template-columns: 1fr; }
}

/* Mini live scoreboard */
/* Live standings — unified strip.
 *
 * Players sit side-by-side inside ONE glass container with a single
 * subtle border. Each player is a row that fills its grid track;
 * adjacent players are separated by a thin vertical divider via the
 * `+`-sibling rule, NOT individual borders. The strip stays compact
 * regardless of player count: each row has the same height + padding,
 * and the score / check are right-aligned to a consistent baseline.
 */
.mini-board {
  margin-top: 1rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-translucent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.mini-board h3 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.mini-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
}
/* Thin vertical divider between adjacent players. Skipped for the
   leading edge of the strip (no divider before the first player). */
.mini-board-row + .mini-board-row {
  border-left: 1px solid rgba(148, 163, 184, 0.10);
}
.mini-board-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 0.86rem;
  position: relative;
  overflow: hidden;
  min-width: 0;
  transition: background 0.18s ease;
}
.mini-board-row:hover { background: rgba(255, 255, 255, 0.02); }

/* Highlight states use background TINTS only — no separate border so
   nothing protrudes outside the strip. The "me" shimmer still sweeps
   across its row. */
.mini-board-row.is-me {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(168, 85, 247, 0.10));
}
.mini-board-row.is-me::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.16), transparent);
  animation: gd-row-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gd-row-shimmer {
  0%   { left: -120%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}
.mini-board-row.is-leader {
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.14), transparent 70%);
}

.mini-board-rank {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--cyan);
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 1rem;
  text-align: center;
  opacity: 0.85;
}
.mini-board-row.is-leader .mini-board-rank {
  color: var(--gold);
}
.mini-board-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-weight: 500;
  font-size: 0.88rem;
  position: relative;
  z-index: 1;
}
.mini-board-streak {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(245, 158, 9, 0.18);
  color: var(--warn);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Submitted indicator — green tint on the name span PLUS a small ✓
   sliding in next to it. No "submitted" word, no toast, no badge
   chrome. The tint reads at a glance even at a distance; the ✓ is
   the precise confirmation. */
.mini-board-row.is-answered .mini-board-name {
  background: rgba(16, 185, 129, 0.16);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.18) inset;
}
.mini-board-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  opacity: 0;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: rgb(110, 231, 183);
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
  transition: width 0.18s ease, opacity 0.18s ease;
}
.mini-board-row.is-answered .mini-board-check::before { content: "✓"; }
.mini-board-row.is-answered .mini-board-check {
  width: 1rem;
  opacity: 1;
}

.mini-board-score {
  /* Compact pill, right-aligned. Smaller than the previous size so the
     name stays dominant in the row. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.28);
  color: var(--cyan-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
.mini-board-row.is-leader .mini-board-score {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--gold);
}

/* Stack vertically on narrow viewports — keeps each row roomy enough
   to show the name without truncation when there isn't horizontal
   space for side-by-side. */
@media (max-width: 540px) {
  .mini-board-list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
  }
  .mini-board-row + .mini-board-row {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
  }
}

/* ---------- Stage: end ---------- */

.end-head { text-align: center; margin-bottom: 1.6rem; }

/* Solo-only hero block. Replaces the podium / standings table for
   single-player runs since there's nothing to rank against. */
.solo-hero {
  margin: 0 auto 1.8rem;
  max-width: 720px;
  padding: 1.6rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.06), transparent 50%),
    rgba(8, 11, 22, 0.55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 50px rgba(2, 6, 23, 0.55),
    0 0 36px rgba(34, 211, 238, 0.12);
  position: relative;
  overflow: hidden;
}
.solo-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55) 50%, transparent);
  filter: blur(0.4px);
  pointer-events: none;
}
.solo-hero-score-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.1rem;
  text-align: center;
}
.solo-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
}
.solo-hero-stat-label {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.solo-hero-stat-value {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--cyan-2);
  text-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
  letter-spacing: -0.01em;
  line-height: 1;
}
/* Game-over title — same 3-stop gradient (cyan → white → violet) as
   the Brain Arena hero so the resolution beat feels like a finale,
   not a plain dismissal. Layered drop-shadow halo for the gravitas. */
.end-head h2 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: linear-gradient(110deg,
    var(--cyan) 0%,
    var(--cyan-2) 22%,
    #f0f9ff 50%,
    var(--violet-2) 78%,
    var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 32px rgba(34, 211, 238, 0.22))
    drop-shadow(0 6px 28px rgba(168, 85, 247, 0.18));
  margin: 0;
}
/* Subtitle — soft gold + one-shot shimmer when the screen loads. */
.end-head p {
  margin: 0.7rem 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: #fde68a;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
  position: relative;
  display: inline-block;
}
.end-head p::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: end-shimmer 1.8s ease-out 0.4s 1 forwards;
  pointer-events: none;
}
@keyframes end-shimmer {
  from { background-position: -150% 0; }
  to   { background-position: 250% 0; }
}

/* Podium */
.podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 0.4rem;
  margin: 0 auto 0.7rem;
  max-width: 300px;        /* tighter so the table downstream reads as the focus */
  min-height: 84px;
}
.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding-bottom: 0.2rem;
  animation: podium-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes podium-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.podium-slot-1 { animation-delay: 0.25s; }
.podium-slot-2 { animation-delay: 0.05s; }
.podium-slot-3 { animation-delay: 0.15s; }

.podium-medal {
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}
.podium-slot-1 .podium-medal { filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6)); }
.podium-slot-2 .podium-medal { filter: drop-shadow(0 0 9px rgba(203, 213, 225, 0.45)); }
.podium-slot-3 .podium-medal { filter: drop-shadow(0 0 9px rgba(245, 158, 11, 0.45)); }
.podium-name {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--text);
  letter-spacing: -0.005em;
}
.podium-score {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}
.podium-slot-1 .podium-score {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.podium-slot-2 .podium-score {
  color: var(--silver);
  text-shadow: 0 0 10px rgba(203, 213, 225, 0.40);
}
.podium-slot-3 .podium-score {
  color: var(--bronze);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}
.podium-block {
  width: 100%;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
    linear-gradient(180deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  text-align: center;
  padding-top: 0.25rem;
  color: var(--muted-2);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  position: relative;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04) inset;
}
.podium-block::after {
  content: "";
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
  opacity: 0.6;
}
.podium-slot-1 .podium-block {
  height: 62px;
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.55), rgba(251, 191, 36, 0.18) 40%, rgba(120, 53, 15, 0.45) 100%);
  border-color: rgba(251, 191, 36, 0.65);
  color: var(--gold);
  box-shadow:
    0 0 48px rgba(251, 191, 36, 0.40),
    0 0 0 1px rgba(251, 191, 36, 0.30) inset,
    0 -1px 0 rgba(255, 255, 255, 0.10) inset;
}
.podium-slot-1 .podium-block::before {
  /* Confetti burst — five emojis flung out from behind the gold
     column on load, falling with staggered durations. CSS-only so
     it doesn't tax JS during the celebratory moment. */
  content: "🎉  ✨  🎊  ✨  🎉";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  white-space: nowrap;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.45));
  animation: confetti-burst 1.4s ease-out 0.5s 1 both;
  pointer-events: none;
}
@keyframes confetti-burst {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.5); }
  25%  { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(1.1); }
}
.podium-slot-2 .podium-block {
  height: 46px;
  background:
    linear-gradient(180deg, rgba(226, 232, 240, 0.40), rgba(148, 163, 184, 0.14) 40%, rgba(51, 65, 85, 0.45) 100%);
  border-color: rgba(203, 213, 225, 0.55);
  color: var(--silver);
  box-shadow:
    0 0 30px rgba(203, 213, 225, 0.25),
    0 0 0 1px rgba(203, 213, 225, 0.22) inset,
    0 -1px 0 rgba(255, 255, 255, 0.10) inset;
}
.podium-slot-3 .podium-block {
  height: 34px;
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.42), rgba(180, 83, 9, 0.18) 40%, rgba(120, 53, 15, 0.45) 100%);
  border-color: rgba(245, 158, 11, 0.55);
  color: var(--bronze);
  box-shadow:
    0 0 28px rgba(245, 158, 11, 0.28),
    0 0 0 1px rgba(245, 158, 11, 0.20) inset,
    0 -1px 0 rgba(255, 255, 255, 0.08) inset;
}

.end-board-wrap {
  background: var(--surface-translucent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(34, 211, 238, 0.16);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 32px rgba(2, 6, 23, 0.4);
}
.end-board, .leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.end-board thead th, .leaderboard-table thead th {
  text-align: left;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid rgba(34, 211, 238, 0.12);
  background: rgba(20, 26, 44, 0.5);
}
/* Sortable column headers — visible affordance + active-sort
   indicator. The arrow lives inside ::after so we don't need
   re-render-cost JS to swap glyphs. */
.leaderboard-table thead th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
  position: relative;
  padding-right: 1.4rem;
}
.leaderboard-table thead th[data-sort-key]:hover { color: var(--text); }
.leaderboard-table thead th[data-sort-key]::after {
  content: "↕";
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  opacity: 0.35;
  font-family: var(--mono);
}
.leaderboard-table thead th.is-sorted { color: var(--cyan-2); }
.leaderboard-table thead th.is-sorted::after { opacity: 1; color: var(--cyan-2); }
.leaderboard-table thead th.is-asc::after  { content: "↑"; }
.leaderboard-table thead th.is-desc::after { content: "↓"; }
.end-board td, .leaderboard-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  vertical-align: middle;
  color: var(--text);
}
.end-board tbody tr:last-child td, .leaderboard-table tbody tr:last-child td { border-bottom: 0; }
.end-board tbody tr, .leaderboard-table tbody tr {
  transition: background 0.15s;
}
.end-board tbody tr:hover, .leaderboard-table tbody tr:hover {
  background: rgba(34, 211, 238, 0.04);
}
/* Tier-coloured top rows. Targets the first 3 visible rows globally —
   matches the visual rank since the table is rendered in rank order. */
.end-board tbody tr:nth-child(1) td, .leaderboard-table tbody tr:nth-child(1) td {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.02) 60%, transparent);
}
.end-board tbody tr:nth-child(1) td:first-child, .leaderboard-table tbody tr:nth-child(1) td:first-child {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.end-board tbody tr:nth-child(2) td, .leaderboard-table tbody tr:nth-child(2) td {
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.06), transparent 60%);
}
.end-board tbody tr:nth-child(2) td:first-child, .leaderboard-table tbody tr:nth-child(2) td:first-child {
  color: var(--silver);
  text-shadow: 0 0 10px rgba(203, 213, 225, 0.35);
}
.end-board tbody tr:nth-child(3) td, .leaderboard-table tbody tr:nth-child(3) td {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.07), transparent 60%);
}
.end-board tbody tr:nth-child(3) td:first-child, .leaderboard-table tbody tr:nth-child(3) td:first-child {
  color: var(--bronze);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.40);
}

/* User's row — clearly readable cyan wash + visible left rail. Overrides
   tier-row backgrounds via stronger selector. */
.end-board tbody tr.is-me td, .leaderboard-table tbody tr.is-me td {
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.06) 50%, rgba(168, 85, 247, 0.06));
}
.end-board tbody tr.is-me td:first-child, .leaderboard-table tbody tr.is-me td:first-child {
  border-left: 3px solid var(--cyan);
  padding-left: calc(0.95rem - 3px);
  box-shadow: -2px 0 18px rgba(34, 211, 238, 0.55);
  color: var(--cyan-2);
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
}
.end-board td:first-child, .leaderboard-table td:first-child {
  color: var(--muted);
  width: 36px;
  font-family: var(--mono);
  font-weight: 700;
  padding-left: 0.95rem;
}
.end-board td.col-score, .end-board td.col-xp, .end-board td.col-streak,
.leaderboard-table td.col-xp, .leaderboard-table td.col-games, .leaderboard-table td.col-wins, .leaderboard-table td.col-winpct {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--cyan-2);
}
.end-board td.col-xp, .leaderboard-table td.col-xp { color: var(--good); }

/* Room settings panel — sits at the top of the room lobby so all
   players can see what they're about to play. Host gets an Edit
   button; others see the values read-only. */
.room-settings {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.04), transparent 50%),
    rgba(8, 11, 22, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: var(--radius);
}
.room-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.room-settings-head h3 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.room-settings-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem 1rem;
  margin: 0;
}
.room-settings-item dt {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.2rem;
}
.room-settings-item dd {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
}
.room-settings-hint {
  font-size: 0.78rem;
  color: var(--muted-2);
  font-style: italic;
}
.room-settings-edit-btn { margin-top: 0.6rem; }
.room-settings-edit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.7rem 0.9rem;
}
.room-settings-edit .room-settings-field { margin: 0; }
.room-settings-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.room-settings-msg {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.room-settings-msg.is-busy { color: var(--cyan-2); }
.room-settings-msg.is-err { color: var(--bad); }

/* Room-session H2H — appears on the end stage once at least one match
   has finished in this room and there are 2+ players. Glass card with
   a violet accent scanline + pill wins/losses badges per row. */
.room-session-h2h {
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.3rem 1.15rem;
  background:
    linear-gradient(180deg, rgba(168, 85, 247, 0.06), transparent 50%),
    var(--surface-translucent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: var(--radius);
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 36px rgba(2, 6, 23, 0.45),
    0 0 28px rgba(168, 85, 247, 0.08);
}
.room-session-h2h::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.55) 50%, transparent);
  pointer-events: none;
}
.room-session-h2h .mini-board-head {
  margin-bottom: 0.8rem;
}
.room-session-h2h h3 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.session-h2h-row .mini-board-name {
  font-weight: 700;
}
.session-h2h-wl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.session-h2h-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.session-h2h-pill.is-win {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: rgb(110, 231, 183);
}
.session-h2h-pill.is-draw {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fde68a;
}
.session-h2h-pill.is-loss {
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.30);
  color: var(--muted);
}

/* Rematch coordination — visible only after a rematch is proposed.
   Shows accept progress + per-player accept/decline buttons. */
.rematch-strip {
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.06), transparent 50%),
    rgba(8, 11, 22, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 32px rgba(2, 6, 23, 0.45),
    0 0 28px rgba(34, 211, 238, 0.10);
}
.rematch-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55) 50%, transparent);
  pointer-events: none;
}
.rematch-status {
  margin: 0;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.rematch-actions {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.end-actions {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

/* ---------- End-of-game recap ---------- */

.end-recap {
  margin-top: 1.6rem;
  padding: 1.3rem 1.4rem 1.2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 35%),
    var(--surface-translucent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius);
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 16px 40px rgba(2, 6, 23, 0.5);
}
.end-recap::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.45) 50%, transparent);
  pointer-events: none;
}
.end-recap-head { margin-bottom: 1.1rem; }
.end-recap-head h3 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}
.end-recap-head h3::before { content: "📋"; }
.end-recap-sub { margin: 0; font-size: 0.88rem; color: var(--muted); }

.end-recap-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.95rem;     /* tightened so the table reads as the main act */
}
.end-recap-stat {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(8, 11, 22, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem 0.55rem;   /* compact — was 1rem padding */
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.end-recap-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.4) 50%, transparent);
  border-radius: 999px;
}
.end-recap-stat:hover { transform: translateY(-2px); border-color: rgba(148, 163, 184, 0.18); }
/* "You" card: cyan accent. */
.end-recap-stat.is-mine {
  border-color: rgba(34, 211, 238, 0.30);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10) inset, 0 0 22px rgba(34, 211, 238, 0.10);
}
.end-recap-stat.is-mine::before {
  background: linear-gradient(90deg, transparent, var(--cyan), var(--cyan-2), var(--cyan), transparent);
}
.end-recap-stat.is-mine .end-recap-stat-value {
  color: var(--cyan-2);
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.35);
}
/* "Closest guess" card: violet accent. */
.end-recap-stat.is-closest {
  border-color: rgba(168, 85, 247, 0.30);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.10) inset, 0 0 22px rgba(168, 85, 247, 0.10);
}
.end-recap-stat.is-closest::before {
  background: linear-gradient(90deg, transparent, var(--violet), var(--violet-2), var(--violet), transparent);
}
.end-recap-stat.is-closest .end-recap-stat-value {
  color: var(--violet-2);
  text-shadow: 0 0 14px rgba(168, 85, 247, 0.30);
}
.end-recap-stat-label {
  display: block;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 0.62rem;            /* was 0.7 — smaller alongside compacter cards */
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.end-recap-stat-value {
  font-family: var(--mono);
  font-size: 1.25rem;            /* was 1.7 — recedes so the table dominates */
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}
.end-recap-stat-sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.66rem;
  color: var(--muted);
}

/* Lifetime head-to-head banner at the top of the recap. Only
   renders in 2-player rooms so the pair record is unambiguous —
   gives the local player their W-D-L vs the opponent before
   they read the per-round breakdown. */
.end-recap-h2h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.65rem;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(168, 85, 247, 0.06));
  border: 1px solid rgba(34, 211, 238, 0.20);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.end-recap-h2h-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.end-recap-h2h-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}
.end-recap-h2h-names {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}
.end-recap-h2h-names span {
  color: var(--muted);
  font-weight: 500;
  margin: 0 0.3rem;
}
.end-recap-h2h-record {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.end-recap-h2h-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.end-recap-h2h-pill small {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.end-recap-h2h-pill.is-win  { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.35); color: rgb(110, 231, 183); }
.end-recap-h2h-pill.is-draw { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.25); color: var(--muted); }
.end-recap-h2h-pill.is-loss { background: rgba(239, 68, 68, 0.12);  border-color: rgba(239, 68, 68, 0.30);  color: rgb(252, 165, 165); }
.end-recap-h2h-total {
  font-size: 0.72rem;
  color: var(--muted-2);
  letter-spacing: 0.02em;
}

/* Compact per-round table. Replaces the in-between card list
   so an 8–10 round match reads as a single scannable grid:
   rank | ×mult | location | per-player scores | winner. */
.end-recap-table-wrap {
  text-align: center;       /* centers the auto-width table */
  position: relative;
  overflow-x: auto;
  /* Right-edge fade: signals horizontal scroll when 3- and 4-player
     rooms overflow on narrow viewports. The mask is a no-op when
     nothing overflows — at desktop widths the table fits and no
     fade is visible. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
}
.end-recap-table {
  /* Stretch full-width — table is the focal element now. */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.98rem;             /* was 0.85 — bumped for readability */
  text-align: left;
  background: rgba(8, 11, 22, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
}
.end-recap-table th,
.end-recap-table td {
  padding: 0.85rem 1rem;           /* was 0.4 0.55 — generous row breathing */
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  vertical-align: middle;
}
.end-recap-table th.recap-score-cell,
.end-recap-table th.recap-winner-cell { text-align: right; }
.end-recap-table th {
  font-size: 0.74rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  background: rgba(8, 11, 22, 0.55);
  border-bottom: 1px solid rgba(34, 211, 238, 0.20);
  position: sticky;
  top: 0;
}
.end-recap-table tbody tr {
  transition: background 0.18s ease;
}
.end-recap-table tbody tr:hover { background: rgba(34, 211, 238, 0.06); }
.end-recap-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.012); }
.end-recap-table tbody tr:last-child td { border-bottom: none; }
.recap-rank {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--cyan);
  font-size: 0.86rem;
  width: 3rem;
}
.recap-mult-cell {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--warn);
  font-size: 0.86rem;
  width: 3.4rem;
  white-space: nowrap;
}
.recap-loc-cell { min-width: 0; }
.recap-loc-name {
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
}
.recap-loc-country {
  color: var(--muted-2);
  font-size: 0.78rem;
  margin-left: 0.4rem;
}
.recap-score-cell {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  width: 6.5rem;
  white-space: nowrap;
  color: rgb(110, 231, 183);
  font-size: 1rem;
}
.recap-score-cell.is-zero { color: var(--muted-2); font-weight: 500; }
.recap-score-cell.is-mine { background: rgba(34, 211, 238, 0.06); }
.recap-score-cell.is-winner {
  background: rgba(16, 185, 129, 0.12);
  color: rgb(110, 231, 183);
}
.recap-score-cell.is-winner.is-mine {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(34, 211, 238, 0.12));
}
.recap-base {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.recap-score-meta {
  display: block;
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.recap-winner-cell {
  width: 5.5rem;
  text-align: right;
  white-space: nowrap;
}

.recap-pick.is-wrong   { color: var(--bad); text-decoration: line-through; }
.recap-pick.is-correct { color: var(--good); }

.recap-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(168, 85, 247, 0.10));
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
  white-space: nowrap;
}
.recap-tie-badge {
  display: inline-flex;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 540px) {
  /* Tighter spacing on phones — full 0.85rem padding would overflow the
     viewport with 4-player columns. Keeps the table dense enough to read
     end-to-end without horizontal scroll for 2-player games. */
  .end-recap-table { font-size: 0.88rem; }
  .end-recap-table th,
  .end-recap-table td { padding: 0.55rem 0.55rem; }
  .recap-score-cell { width: auto; font-size: 0.92rem; }
  .recap-score-meta { display: none; }
  .recap-loc-name { font-size: 0.92rem; }
  .recap-loc-country { display: block; margin-left: 0; font-size: 0.7rem; }
  .end-recap-h2h { padding: 0.5rem 0.65rem; gap: 0.5rem; }
  .end-recap-stat-value { font-size: 1.1rem; }
}

.end-recap-empty {
  text-align: center;
  color: var(--muted);
  padding: 1.2rem 0.5rem;
  font-size: 0.9rem;
}

/* Detailed stats (premium) */
.detailed-stats {
  margin-top: 1.6rem;
  padding: 1.3rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 35%),
    var(--surface-translucent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 36px rgba(2, 6, 23, 0.45);
}
.detailed-stats-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.detailed-stats-head h3 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
/* Container switches between tile grid (trivia) and a single comparison
   table (globe drop) at render time. is-table disables the grid so the
   <table> can lay out edge-to-edge with overflow-x scroll on phones. */
.detailed-stats-grid.is-table {
  display: block;
  overflow-x: auto;
}
.detailed-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
}
.detailed-stat {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(8, 11, 22, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: var(--radius-sm);
  padding: 1rem 0.9rem 0.85rem;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.detailed-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%; height: 2px;
  border-radius: 999px;
}
.detailed-stat:hover { transform: translateY(-2px); border-color: rgba(148, 163, 184, 0.20); }
/* Cycle accent colors per tile so each one reads as its own metric. */
.detailed-stat:nth-child(4n+1)::before { background: linear-gradient(90deg, transparent, var(--cyan), var(--cyan-2), var(--cyan), transparent); }
.detailed-stat:nth-child(4n+2)::before { background: linear-gradient(90deg, transparent, var(--violet), var(--violet-2), var(--violet), transparent); }
.detailed-stat:nth-child(4n+3)::before { background: linear-gradient(90deg, transparent, var(--good), #34d399, var(--good), transparent); }
.detailed-stat:nth-child(4n+4)::before { background: linear-gradient(90deg, transparent, var(--warn), #fcd34d, var(--warn), transparent); }
.detailed-stat:nth-child(4n+1) .detailed-stat-value { color: var(--cyan-2); text-shadow: 0 0 14px rgba(34, 211, 238, 0.35); }
.detailed-stat:nth-child(4n+2) .detailed-stat-value { color: var(--violet-2); text-shadow: 0 0 14px rgba(168, 85, 247, 0.35); }
.detailed-stat:nth-child(4n+3) .detailed-stat-value { color: #6ee7b7; text-shadow: 0 0 14px rgba(16, 185, 129, 0.35); }
.detailed-stat:nth-child(4n+4) .detailed-stat-value { color: #fcd34d; text-shadow: 0 0 14px rgba(245, 158, 11, 0.35); }
.detailed-stat-label {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 0.7rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}
.detailed-stat-value {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}
.detailed-stat-sub {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.01em;
  font-weight: 500;
  /* Keep long city names from blowing the grid layout. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detailed-stat.is-highlight {
  border-color: rgba(34, 211, 238, 0.30);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10) inset;
}

/* ---- Globe Drop comparison table ----------------------------------
   Side-by-side stats: stat label on the left, one column per player.
   Cells get a leader highlight so the eye picks up wins-per-row in
   one pass without sorting columns mentally. */
.detailed-stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.detailed-stats-table th,
.detailed-stats-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  vertical-align: middle;
}
.detailed-stats-table tbody tr:last-child td,
.detailed-stats-table tbody tr:last-child th { border-bottom: none; }
.detailed-stats-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  background: rgba(8, 11, 22, 0.4);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.detailed-stats-table .detailed-stats-col       { text-align: right; }
.detailed-stats-table .detailed-stats-col.is-mine {
  color: var(--cyan-2);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.10), rgba(34, 211, 238, 0.04));
}
.detailed-stats-row-label {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.detailed-stats-cell {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}
.detailed-stats-cell.is-mine {
  background: rgba(34, 211, 238, 0.05);
}
.detailed-stats-cell.is-leader {
  /* The cell that wins this row — gold accent so the eye locks on. */
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(168, 85, 247, 0.08));
  color: var(--gold);
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.30);
}
.detailed-stats-cell.is-leader.is-mine {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(34, 211, 238, 0.12));
}
.detailed-stats-cell.is-missing {
  color: var(--muted);
  font-weight: 500;
}
.detailed-stats-value { display: block; line-height: 1.1; }
.detailed-stats-sub {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Continent-grouping divider row — subtle banded header so the
   per-region rows read as their own block under the headline stats. */
.detailed-stats-table tr.detailed-stats-section th {
  font-size: 0.65rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
  text-align: left;
  padding: 0.75rem 0.75rem 0.35rem;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
  border-bottom: none;
  background: rgba(8, 11, 22, 0.25);
}

@media (max-width: 540px) {
  .detailed-stats-table th,
  .detailed-stats-table td { padding: 0.4rem 0.5rem; }
  .detailed-stats-table { font-size: 0.82rem; }
}

.detailed-stats-upsell {
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.05rem;
  background: linear-gradient(180deg, rgba(252, 211, 77, 0.06), transparent 80%), var(--surface);
  border: 1px dashed rgba(252, 211, 77, 0.35);
  border-radius: var(--radius);
}
.detailed-stats-upsell p { margin: 0; color: var(--text); font-size: 0.92rem; }

/* ---------- Leaderboard ---------- */

.leaderboard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.85rem;
}
.leaderboard-filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.leaderboard-filters .lobby-field { min-width: 160px; }

.leaderboard-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- Profile ---------- */

.profile-head { margin-bottom: 0.95rem; }

.profile-card-trivia {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 25%, transparent 50%),
    rgba(20, 26, 44, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 50px rgba(2, 6, 23, 0.55);
  min-height: 420px;
}
.profile-card-trivia::before {
  content: "";
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(34, 211, 238, 0.55) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(168, 85, 247, 0.55) 70%,
    transparent);
  filter: blur(0.4px);
  pointer-events: none;
}
/* Atmospheric texture — concentric rings rendered via radial gradients
   at low opacity. Sits behind the stat tiles, gives the page presence
   instead of empty dark space. */
.profile-card-trivia::after {
  content: "";
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background:
    radial-gradient(circle at center, transparent 28%, rgba(34, 211, 238, 0.05) 28.5%, transparent 30%),
    radial-gradient(circle at center, transparent 38%, rgba(168, 85, 247, 0.04) 38.5%, transparent 40%),
    radial-gradient(circle at center, transparent 48%, rgba(34, 211, 238, 0.035) 48.5%, transparent 50%),
    radial-gradient(circle at center, transparent 58%, rgba(168, 85, 247, 0.03) 58.5%, transparent 60%),
    radial-gradient(circle at center, rgba(34, 211, 238, 0.06), transparent 25%);
  filter: blur(0.6px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.profile-card-trivia > * { position: relative; z-index: 1; }

.profile-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  /* Gradient ring via double-bg trick: dark fill inside a cyan→violet
     gradient border. Soft outer glow gives the avatar presence. */
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), transparent 40%),
    linear-gradient(rgba(14, 18, 32, 0.95), rgba(14, 18, 32, 0.95)) padding-box,
    linear-gradient(135deg, var(--cyan) 0%, var(--violet-2) 50%, var(--violet) 100%) border-box;
  border: 2.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.08),
    0 0 32px rgba(34, 211, 238, 0.25),
    0 0 48px rgba(168, 85, 247, 0.20);
}
.profile-id { flex: 1; min-width: 200px; }
.profile-display-field { margin: 0; }
.profile-email {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted-2);
  font-family: var(--mono);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
}
.profile-stat {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(8, 11, 22, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: var(--radius-sm);
  padding: 1rem 0.85rem 0.9rem;
}
/* Headline stat (Avg score) spans 2 columns and gets a larger value
   so it reads as the primary metric while the other tiles serve as
   context. The grid auto-fit still allows the row to collapse on
   narrow viewports. */
.profile-stat.is-headline {
  grid-column: span 2;
  border-color: rgba(34, 211, 238, 0.30);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10) inset;
}
.profile-stat.is-headline .profile-stat-value {
  font-size: 2.1rem;
}
@media (max-width: 540px) {
  .profile-stat.is-headline { grid-column: 1 / -1; }   /* full-width on mobile */
  text-align: center;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.profile-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%; height: 2px;
  border-radius: 999px;
  filter: blur(0.3px);
}
.profile-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(148, 163, 184, 0.20);
}
/* Color-coded top accent per stat tile, in DOM order: XP, Games, Wins, Win% */
.profile-stat:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, var(--cyan), var(--cyan-2), var(--cyan), transparent);
}
.profile-stat:nth-child(1) { box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.05) inset, 0 0 22px rgba(34, 211, 238, 0.06); }
.profile-stat:nth-child(1) .profile-stat-value { color: var(--cyan-2); text-shadow: 0 0 16px rgba(34, 211, 238, 0.35); }

.profile-stat:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, var(--violet), var(--violet-2), var(--violet), transparent);
}
.profile-stat:nth-child(2) { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.05) inset, 0 0 22px rgba(168, 85, 247, 0.06); }
.profile-stat:nth-child(2) .profile-stat-value { color: var(--violet-2); text-shadow: 0 0 16px rgba(168, 85, 247, 0.35); }

.profile-stat:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, var(--good), #34d399, var(--good), transparent);
}
.profile-stat:nth-child(3) { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.05) inset, 0 0 22px rgba(16, 185, 129, 0.06); }
.profile-stat:nth-child(3) .profile-stat-value { color: #6ee7b7; text-shadow: 0 0 16px rgba(16, 185, 129, 0.35); }

.profile-stat:nth-child(4)::before {
  background: linear-gradient(90deg, transparent, var(--warn), #fcd34d, var(--warn), transparent);
}
.profile-stat:nth-child(4) { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.05) inset, 0 0 22px rgba(245, 158, 11, 0.06); }
.profile-stat:nth-child(4) .profile-stat-value { color: #fcd34d; text-shadow: 0 0 16px rgba(245, 158, 11, 0.35); }

.profile-stat-label {
  display: block;
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 0.66rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.profile-stat-value {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}

.profile-premium-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.05rem 1.15rem;
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(168, 85, 247, 0.08)),
    var(--surface-translucent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(2, 6, 23, 0.35),
    0 0 24px rgba(251, 191, 36, 0.10);
  overflow: hidden;
}
.profile-premium-card::before {
  content: "";
  position: absolute;
  top: 0; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.55) 50%, transparent);
  pointer-events: none;
}
.profile-premium-info h3 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--text);
}
.profile-premium-info p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.profile-premium-card.is-premium {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(34, 211, 238, 0.08)),
    var(--surface-translucent);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(2, 6, 23, 0.35),
    0 0 24px rgba(16, 185, 129, 0.18);
}
.profile-premium-card.is-trial {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(251, 191, 36, 0.08)),
    var(--surface-translucent);
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(2, 6, 23, 0.35),
    0 0 24px rgba(34, 211, 238, 0.14);
}

/* Master switch: when boot() sees Config.PREMIUM_UI_ENABLED === false it
 * adds `premium-disabled` to <body>, and these rules pull every premium-
 * related affordance out of layout. The pure premium.js helpers stay
 * loaded so we can flip the flag back on without code changes.
 * See apps/brain-arena/PREMIUM_SETUP.md for the rollout checklist. */
body.premium-disabled #profile-premium-card,
body.premium-disabled #profile-admin-controls,
body.premium-disabled #premium-modal,
body.premium-disabled #custom-pack-details,
body.premium-disabled #detailed-stats-upsell,
body.premium-disabled .premium-tag,
body.premium-disabled .premium-chip,
body.premium-disabled [data-action="open-premium"] { display: none !important; }

.profile-admin-controls {
  margin-top: 0.6rem;
  padding: 0.75rem 0.95rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.profile-admin-controls h4 { margin: 0 0 0.2rem; font-size: 0.95rem; color: var(--text); }
.profile-admin-hint { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.82rem; }
.profile-admin-hint code { background: var(--surface-2); padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.78rem; }
.profile-admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.custom-pack {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.custom-pack > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
  user-select: none;
}
.custom-pack > summary::-webkit-details-marker { display: none; }
.custom-pack > summary:hover { background: var(--surface-2); }
.custom-pack[open] > summary { border-bottom: 1px solid var(--border); }

.custom-pack-body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.custom-pack-hint { margin: 0; font-size: 0.85rem; color: var(--muted); }
.custom-pack-body textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.4;
  resize: vertical;
}
.custom-pack-body textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.custom-pack-actions { display: flex; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; }
.custom-pack-msg { margin: 0; font-size: 0.85rem; color: var(--muted); min-height: 1rem; }
.custom-pack-msg.is-ok { color: var(--good); }
.custom-pack-msg.is-err { color: var(--bad); }

.profile-signed-out {
  margin: 1rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* ---------- Modal (matches globe-drop-rivals) ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal[hidden] { display: none !important; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(34, 211, 238, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(168, 85, 247, 0.06), transparent 60%),
    rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: modal-backdrop-in 200ms ease-out;
}
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.04), transparent 40%),
    var(--surface-translucent);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 18px;
  padding: 1.15rem 1.2rem 1rem;
  max-width: 90vw;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 32px 80px rgba(2, 6, 23, 0.75),
    0 0 48px rgba(34, 211, 238, 0.12);
  animation: modal-panel-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55) 50%, transparent);
  pointer-events: none;
}
@keyframes modal-panel-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-panel-sm { max-width: 26rem; }

.modal-panel > h2 {
  font-family: "Space Grotesk", "Outfit", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 2.25rem 0.7rem 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

.modal-close, .modal-close:hover {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--muted) !important;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text) !important; }
.modal-close svg { width: 13px; height: 13px; display: block; }

.modal-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.modal-actions .btn { height: 34px; padding: 0 0.9rem; font-size: 0.85rem; border-radius: 7px; }

.premium-list {
  list-style: none;
  margin: 0.4rem 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.premium-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.premium-modal-hint {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}
.premium-modal-price {
  margin: 0 0 0.75rem;
  text-align: center;
  color: var(--text);
  font-size: 1rem;
}
.premium-modal-price strong { font-size: 1.15rem; }

/* ---------- Responsive ---------- */

@media (max-width: 540px) {
  .room-head { gap: 0.55rem; }
  .room-code-pill { padding: 0.3rem 0.4rem 0.3rem 0.7rem; }
  .room-code-value { font-size: 0.95rem; letter-spacing: 0.15em; }
  .podium { max-width: 100%; }
  .game-head { gap: 0.55rem; }
  .game-timer { width: 54px; height: 54px; }
  .game-timer-num { font-size: 0.95rem; }
  .question-card { padding: 1.1rem 1rem; }
}