/*
 * Brain Arena — app styles.
 *
 * Dark theme matching globe-drop-rivals / rising-shows 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; }
/* Pin off main.css's `button:hover:active { background-color: rgba(206,27,40,0.25) }`
   red pressed flash (its 0-2-1 specificity beats the single-class rules above). */
.btn:hover:active { background-color: var(--surface-2); }
.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);
}
/* See .btn:hover:active note; the gradient supplies the fill here. */
.btn-primary:hover:active { background-color: transparent; }

.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);
}
/* See .btn:hover:active note. */
.btn-ghost:hover:active { background-color: rgba(34, 211, 238, 0.07); }

/* ---------- 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: nowrap;
  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;
  /* Pin off main.css's global `button` gray ring (inset 0 0 0 1px #555);
     an inactive pill is borderless. The .is-active variant sets its own. */
  box-shadow: none !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;
  box-shadow: none !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);
}

@media (max-width: 480px) {
  .view-tab, .view-tab:hover { padding: 0.5rem 0.65rem; font-size: 0.82rem; gap: 0.3rem; }
}

.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;
}

.link-btn {
  background: none;
  border: none;
  /* `!important` + box-shadow:none pin off main.css's global `button`
     rules (gray #555 text/ring, red hover). The end-screen sign-up CTA
     uses .link-btn outside .auth-gate, so target the class directly. */
  color: var(--accent) !important;
  box-shadow: none !important;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.link-btn:hover,
.link-btn:focus-visible {
  color: var(--cyan-2) !important;
  box-shadow: none !important;
}
.link-btn:hover:active { background: none; }

.lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 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; --ctrl-h: 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;
  min-height: 1.2rem;
  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; }
}

/* ---------- 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;
  /* Pin off main.css's global `button` ring (inset 0 0 0 1px #555) + its
     red hover/active repaint; this is a borderless icon button. */
  box-shadow: none !important;
  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;
  box-shadow: none !important;
}
.room-code-copy:hover:active { background: rgba(34, 211, 238, 0.12); }
.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;
  /* Pin off main.css's global `button` gray ring (inset 0 0 0 1px #555);
     an inactive segment is borderless. The .is-active variant sets its own. */
  box-shadow: none !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);
  box-shadow: none !important;
}
.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: flex-start;
  gap: 0.75rem;
  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;
  overflow: hidden;
  max-height: 200px;
  visibility: visible;
  transition: max-height 0.28s ease, visibility 0.28s ease, margin-top 0.28s ease;
}
.lobby-solo-actions.is-hidden {
  max-height: 0;
  visibility: hidden;
  margin-top: 0;
}
/* 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);
  /* `!important` + box-shadow pins off main.css's global `button` rules
     (gray #555 text/ring, red hover/active repaint), same approach as
     .link-btn / .room-code-copy. */
  color: rgb(252, 165, 165) !important;
  box-shadow: none;
  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) !important;
  box-shadow: none;
}
.btn-icon-danger:hover:active { background: rgba(248, 113, 113, 0.12); }
.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,
.btn-danger-ghost:hover {
  /* `!important` + grouped :hover so the pink survives .btn / .btn:hover's
     own `color: var(--text) !important` counter-pins (added vs main.css). */
  color: rgb(252, 165, 165) !important;
  border-color: rgba(248, 113, 113, 0.4);
}
.btn-danger-ghost:hover {
  background: rgba(248, 113, 113, 0.10);
}
.btn-danger-ghost:hover:active { background-color: rgba(248, 113, 113, 0.10); }
.btn-danger,
.btn-danger:hover {
  background: rgb(220, 38, 38) !important;
  border-color: rgb(220, 38, 38) !important;
  /* Grouped :hover so white beats .btn-primary:hover's
     `color: #051b22 !important` on the confirm-modal danger variant. */
  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;
}

.room-spectator-banner {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.85rem;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 8px;
  color: var(--violet-2);
  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.
   .fab-pinned is a JS fallback class for browsers that don't support :has(). */
.globe-drop-fab-stack:not(:has(#globe-drop-clear-btn:not([hidden]))):not(.fab-pinned) {
  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;
  touch-action: manipulation;
  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); }
/* Pin off main.css's `button:hover:active` red background flash; restate
   the color layer of the shorthand backgrounds above. */
.globe-drop-fab-primary:hover:active { background-color: transparent; }
.globe-drop-fab-ghost:hover:active { background-color: rgba(20, 11, 4, 0.55); }

@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; }
}

/* Mobile (≤768px): thumb-friendly action bar. Both Submit and Clear live
   fixed at the bottom of the viewport (Clear to the LEFT of the Submit
   pill) so players never scroll below the globe to act. Both are ≥48x48px
   tap targets and clear the safe-area inset. The FAB stack's absolute
   top-right positioning is overridden here. */
@media (max-width: 768px) {
  /* The FAB stack's entry animation leaves a transform matrix on the
     element (animation-fill-mode keeps the keyframe transform applied),
     and ANY non-none transform makes the stack a containing block for its
     position:fixed children — which would pin Submit/Clear to the stack
     (top-right) instead of the viewport bottom. Drop the animation here so
     the stack never establishes a containing block on mobile. */
  .globe-drop-fab-stack {
    animation: none;
    transform: none;
  }
  /* Submit + Clear are pinned to the viewport bottom as a CENTRED PAIR.
     Pair width = Clear(56) + gap(10) + Submit(200) = 266px. We anchor each
     button off left:50% with fixed pixel offsets so the group is centred
     and never overflows at 390px (the narrowest target). */
  #globe-drop-submit-btn {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    /* right half of the 266px pair: start 33px right of viewport centre */
    left: calc(50% - 67px);
    z-index: 200;
    height: 48px;
    min-height: 48px;
    width: 200px;
    padding: 0 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    min-width: 200px;
    box-shadow: 0 4px 24px rgba(34, 211, 238, 0.45), 0 2px 8px rgba(0,0,0,0.5);
    /* Override the FAB-stack absolute positioning context */
    top: auto;
    right: auto;
    transform: none;
  }
  /* Clear button pulled out of the top FAB stack and pinned just left of
     the Submit pill (10px gap). Fixed 56px width so the pair maths holds. */
  #globe-drop-clear-btn {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    /* left edge of the 266px pair: 133px left of viewport centre */
    left: calc(50% - 133px);
    z-index: 200;
    height: 48px;
    min-height: 48px;
    width: 56px;
    min-width: 48px;
    padding: 0;
    border-radius: 999px;
    font-size: 0.9rem;
    top: auto;
    right: auto;
    transform: none;
  }
  /* Bottom Clear is icon-only (the X glyph reads as "remove pin") so it
     stays a compact 56px circle in the centred pair. The ≤540px rule
     already hides FAB labels; keep it hidden here too. */
  #globe-drop-clear-btn span { display: none; }
  /* Add bottom padding to the map wrap so the fixed pills don't
     cover the bottom of the globe on short screens. */
  .globe-drop-map-wrap {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }

  /* Item 11: sticky question prompt so the "Where is …" header stays
     pinned to the top as the player scrolls the globe into view. z-index
     sits above globe content but below the fixed Submit pill (z 200). The
     blur lets the globe show through faintly behind it. */
  .globe-drop-prompt-row {
    position: sticky;
    top: 0;
    z-index: 60;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background:
      linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(168, 85, 247, 0.08)),
      rgba(8, 11, 22, 0.78);
  }
}

/* ---- Item 13: collapsible standings (mobile only) ---- */
/* Toggle button: hidden on desktop, shown ≤768px. Colours pinned with
   !important so main.css's `button { color:#555 !important }` + red hover
   can't repaint it (same approach as the FAB buttons above). */
.globe-drop-standings-toggle,
.globe-drop-standings-toggle:hover {
  display: none;
}
@media (max-width: 768px) {
  .globe-drop-standings-toggle,
  .globe-drop-standings-toggle:hover {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.9rem;
    height: 40px;
    border: 1px solid rgba(34, 211, 238, 0.30);
    border-radius: 999px;
    background: rgba(8, 11, 22, 0.55);
    color: #e2e8f0 !important;
    /* Pin off main.css's global `button` ring (inset 0 0 0 1px #555) + its
       red hover/active repaint; this pill carries its own border. */
    box-shadow: none !important;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  }
  .globe-drop-standings-toggle:hover {
    border-color: rgba(34, 211, 238, 0.55);
    background: rgba(12, 18, 34, 0.7);
    color: #67e8f9 !important;
    box-shadow: none !important;
  }
  .globe-drop-standings-toggle:hover:active {
    background: rgba(12, 18, 34, 0.7);
  }
  /* Pulse cue (item 2): while the local player has submitted but the
     board is still collapsed, breathe a soft cyan glow + a glowing dot so
     the player knows there's an updated standing to peek at. Colours are
     self-contained (cyan), so main.css's red button-hover rule can't
     repaint the glow. Clears when expanded or the next question resets. */
  .globe-drop-standings-toggle.is-pulsing {
    animation: gd-standings-pulse 1.6s ease-in-out infinite;
  }
  .globe-drop-standings-toggle.is-pulsing::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.9);
    animation: gd-standings-dot 1.6s ease-in-out infinite;
  }
  .globe-drop-standings-toggle-chevron {
    transition: transform 0.2s ease;
  }
  .globe-drop-standings-toggle[aria-expanded="true"] .globe-drop-standings-toggle-chevron {
    transform: rotate(180deg);
  }
  /* Collapse both boards by default on mobile. The stage carries the
     .standings-collapsed class (toggled from JS); when present the live-
     standings + rounds-history boards animate shut. */
  #stage-globe-drop.standings-collapsed #mini-board-globe-drop,
  #stage-globe-drop.standings-collapsed #rounds-history-board {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease,
                padding 0.28s ease, margin 0.28s ease;
  }
  #stage-globe-drop #mini-board-globe-drop,
  #stage-globe-drop #rounds-history-board {
    overflow: hidden;
    max-height: 1200px;
    transition: max-height 0.28s ease, opacity 0.2s ease;
  }
}
/* Pulse keyframes are intentionally outside the media query so they are
   globally registered (animations reference them from inside the query). */
@keyframes gd-standings-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18); }
}
@keyframes gd-standings-dot {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* ---- Item 12: first-use tap hint ---- */
/* Centred, non-interactive coach mark over the globe. pointer-events:none
   so it never swallows the tap it's prompting. Pulses gently, then is
   removed (hidden) on first click or after 5s. */
.globe-drop-tap-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  max-width: 78%;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: rgba(8, 11, 22, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #e2f6ff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 4px 20px rgba(2, 6, 23, 0.5), 0 0 16px rgba(34, 211, 238, 0.18);
  animation: globe-tap-hint-pulse 1.8s ease-in-out infinite;
}
.globe-drop-tap-hint[hidden] { display: none; }
@keyframes globe-tap-hint-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.82; }
  50%      { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}

/* 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:not([hidden]) {
  animation: stage-fade 0.35s ease-out both;
}
.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);
}
/* The "Rounds so far" board is a single per-player score summary (no
   per-location rows). Styles for the player rows + pills live in the
   .rounds-history-scoreboard / .rh-score-* block below. */

/* Part 2: per-player score summary. One flex row per player; the name is
   fixed-width so names line up, the pills flex-wrap within the row on
   narrow screens (staying grouped under their player), and the Total is
   pinned to the row end. Colors are pinned explicitly so the sitewide
   main.css button/hover rules can't bleed in. */
.rounds-history-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.rh-score-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  padding: 0.3rem 0.55rem;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(148, 163, 184, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.rh-score-row.is-me {
  background: var(--grad-brand-soft);
  border-color: rgba(34, 211, 238, 0.35);
}
.rh-score-name {
  flex: 0 0 auto;
  min-width: 4.5rem;
  max-width: 9rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rh-score-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
}
.rh-score-pill {
  display: inline-block;
  padding: 0.1rem 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.74rem;
  font-weight: 600;
  color: var(--cyan-2);
  white-space: nowrap;
}
.rh-score-pill-r {
  color: var(--muted);
  font-weight: 600;
}
.rh-score-pill strong {
  color: var(--cyan);
  font-weight: 700;
}
.rh-score-pill.is-zero,
.rh-score-pill.is-masked {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(148, 163, 184, 0.10);
  color: var(--muted);
}
.rh-score-pill.is-zero strong,
.rh-score-pill.is-masked strong {
  color: var(--muted);
}
.rh-score-total {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.rh-score-total strong {
  color: var(--cyan);
}
.rh-score-row.is-me .rh-score-pill strong,
.rh-score-row.is-me .rh-score-total strong {
  color: var(--text);
}
.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: 210;
  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-game-live {
  margin: 0;
  padding: 0.4rem 0.95rem;
  background: rgba(34, 211, 238, 0.08);
  border-bottom: 1px solid rgba(34, 211, 238, 0.18);
  color: var(--cyan-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  animation: chat-live-pulse 2s ease-in-out infinite;
}
@keyframes chat-live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.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;
  /* `!important` + box-shadow:none pin off main.css's global `button`
     rules (gray #555 text/ring, red hover/active). */
  color: var(--text) !important;
  box-shadow: none !important;
  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);
  color: var(--text) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.18) !important;
  transform: translateY(-1px);
}
.room-chat-quick-btn:hover:active { background: rgba(34, 211, 238, 0.08); }
.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; width: 58px; margin: 0 auto; }
  .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%;
  /* Lower floor than the old clamp(420px, …) so landscape phones (844x390)
     fit the whole globe inside the viewport. min(320px, 40vh) keeps the
     floor proportional on very short screens; desktop still lands in the
     420-640px band because 62vh dominates there. */
  height: clamp(min(320px, 40vh), 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;
}
/* Item 9: breathe the atmosphere ring while the globe scene + texture load.
   The .is-loading class is added before init and removed on onGlobeReady
   (2s fallback), so the pulse never lingers once the globe is interactive. */
.globe-drop-map.is-loading::before {
  animation: globe-loading-pulse 1.4s ease-in-out infinite;
}
@keyframes globe-loading-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.globe-drop-map:active { cursor: grabbing; }
/* globe.gl injects a <canvas> child that fills the container.
   touch-action:none lets the globe own all touch gestures (one-finger
   drag to rotate, pinch to zoom) instead of the page scrolling/zooming. */
.globe-drop-map canvas { display: block; position: relative; z-index: 1; touch-action: none; }

.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;
}

/* Reveal panel as a globe overlay (item 1). Lives inside
   .globe-drop-map-wrap and is anchored to the TOP of the globe area so
   the result fades in without the globe moving or the page scrolling.
   Inset to the RIGHT of the top-left timer ring (timer is 56px + 0.75rem
   margin, so left clears it with a gap). pointer-events:none on the box
   lets globe drags pass through the gutter; interactive children
   (Ready button, wiki link) restore pointer-events:auto below so they
   stay hit-testable. */
.globe-drop-reveal {
  position: absolute;
  top: 0.75rem;
  left: calc(0.75rem + 56px + 0.6rem);
  right: 0.75rem;
  z-index: 6;
  padding: 0.7rem 0.9rem;
  background: rgba(8, 11, 22, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(2, 6, 23, 0.5);
  pointer-events: none;
  animation: gd-reveal-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.globe-drop-reveal[hidden] { display: none; }
/* Restore interactivity for the controls inside the overlay so the
   Ready button + wiki link receive real pointer events even though the
   panel box itself is click-through. */
.globe-drop-reveal .globe-drop-ready-bar,
.globe-drop-reveal .globe-drop-reveal-wiki {
  pointer-events: auto;
}
@keyframes gd-reveal-in {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Mobile: drop below the timer ring and span the full width — the timer
   is too tall to share a row with the panel on a 390px viewport. */
@media (max-width: 540px) {
  .globe-drop-reveal {
    top: calc(0.5rem + 46px + 0.4rem);
    left: 0.5rem;
    right: 0.5rem;
  }
}
.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(--violet-2); }
.globe-drop-reveal-distance strong {
  display: inline-block;
}
.globe-drop-reveal-distance.is-pulse strong {
  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.15); opacity: 1; }
  60%  { transform: translateY(0) scale(1.05); }
  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.85rem;
  color: var(--muted);
  line-height: 1.5;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  /* Cap to ~3 lines so a long Wikipedia extract can never cover the
     whole globe; the "Read on Wikipedia" link is the escape hatch. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.globe-drop-reveal-trivia[hidden] { display: none; }
/* 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 .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 .globe-drop-reveal-wiki:hover {
  background: rgba(34, 211, 238, 0.16);
  border-color: rgba(34, 211, 238, 0.45);
  text-decoration: none;
}

/* 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;
  /* Base box-shadow + :hover color pins off main.css's global `button`
     rules (gray #555 ring, `button:hover { color: #ce1b28 !important }`
     which outranks the single-class pin above). */
  box-shadow: none;
  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);
  color: var(--text) !important;
}
.pick-cat-btn:hover:active { background-color: var(--surface-3); }
.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;
  /* Base box-shadow + :hover color pins off main.css's global `button`
     rules (gray #555 ring, `button:hover { color: #ce1b28 !important }`
     which outranks the single-class pin above). */
  box-shadow: none;
  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);
  color: var(--text) !important;
}
/* Pin off main.css's `button:hover:active` red background flash. */
.answer-btn:hover:active { background-color: var(--surface-3); }
.answer-btn.is-picked:hover:active { background-color: 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;
}

/* Pending (not yet submitted) — a subtle pulsing left border so it's
   obvious at a glance who is still thinking. Only applied during the
   Globe Drop asking phase; removed when the player locks in. */
.mini-board-row.is-pending {
  border-left: 2px solid rgba(168, 85, 247, 0.55);
}
.mini-board-row.is-pending .mini-board-rank {
  animation: mb-rank-pulse 1.6s ease-in-out infinite;
}
@keyframes mb-rank-pulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 0.35; }
}

/* 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;
}
/* When both me + pending: remove the violet border (the cyan shimmer is enough). */
.mini-board-row.is-me.is-pending {
  border-left-color: transparent;
}
/* Settled state removes the pending pulse cleanly. */
.mini-board-row.is-answered.is-pending {
  border-left-color: transparent;
}
.mini-board-row.is-answered .mini-board-rank {
  animation: none;
  opacity: 0.85;
}
.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);
  }
  /* When 5+ players, save space: hide the name, show rank + score only. */
  .mini-board-list.is-crowded .mini-board-name { display: none; }
}

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

.end-head {
  text-align: center;
  margin-bottom: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.end-share-btn {
  gap: 0.4rem;
  opacity: 0.85;
}
.end-share-btn:hover { opacity: 1; }

/* 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; }
}

/* Round-type subtitle (Globe Drop end screen). Scoped to .end-head so it
   beats the gold ".end-head p" rule without !important, and reads as calm
   metadata: a cyan pill on its own line under the summary. The [hidden]
   override is required because ".end-head p { display: inline-block }"
   would otherwise defeat the hidden attribute. */
.end-head .end-round-type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0.2rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cyan-2);
  text-shadow: none;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 999px;
}
.end-head .end-round-type::after { content: none; }
.end-head .end-round-type[hidden] { display: none; }

/* 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. */
  /* Mask applied only when content overflows (class set by JS). */
}
.end-recap-table-wrap.has-overflow {
  -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));
}
/* Globe Drop recap (.recap-gd): the green FILL is set inline from the base
   score (0-100) so its intensity scales with performance, not with winning.
   The round winner is marked by a subtle left accent bar instead of a brighter
   fill, so a 1-point win does not look like a blowout. The inline background
   overrides the flat .is-winner / gradient fills above for these cells; Trivia
   (cells without .recap-gd) keeps the flat winner fill. */
.recap-score-cell.recap-gd.is-winner {
  box-shadow: inset 3px 0 0 0 rgba(16, 185, 129, 0.95);
}
.recap-base {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.recap-score-meta {
  display: block;
  font-family: inherit;
  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 */
.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; }
}

/* ---------- 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;
}

.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: 36px;
  height: 36px;
  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;
  /* Pin off main.css's global `button` ring (inset 0 0 0 1px #555) + red
     hover/active repaint; this is a borderless icon button. */
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text) !important; box-shadow: none !important; }
.modal-close:hover:active { background: rgba(255, 255, 255, 0.06); }
.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; }

/* Focus-visible outlines for interactive elements missing them */
.room-code-copy:focus-visible,
.game-type-btn:focus-visible,
.pick-cat-btn:focus-visible,
.answer-btn:focus-visible,
.globe-drop-ready-btn:focus-visible,
.room-chat-quick-btn:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 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; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}