/* ═══════════════ Trivia Rumble — global leaderboard ═══════════════ */
/* Tokens come from tokens.css. Page chrome matches quizzes.css exactly;
   the board rows reuse the podium standings vocabulary. */

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Outfit", system-ui, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 85% -10%, oklch(0.30 0.06 25 / 0.55), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, oklch(0.28 0.05 255 / 0.45), transparent 60%);
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }
main { max-width: 1440px; margin: 0 auto; }

/* ─────────── shared bits (landing conventions) ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 800; letter-spacing: 0.01em; border: 0; cursor: pointer;
  border-radius: var(--r-ctl); padding: 14px 24px; font-size: 1.05rem;
  color: var(--gold-ink); background: var(--gold); box-shadow: 0 4px 0 var(--gold-edge);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px) scale(0.99); box-shadow: 0 1px 0 var(--gold-edge); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); font-weight: 700; }
.btn-ghost:active { transform: scale(0.98); box-shadow: inset 0 0 0 2px var(--line); }

.card { background: var(--bg-raise); border-radius: var(--r-panel); box-shadow: inset 0 0 0 2px var(--line); }

/* ─────────── nav ─────────── */
.nav {
  max-width: 1440px; margin: 0 auto; padding: 24px 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; row-gap: 10px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-tiles { display: flex; gap: 5px; }
.brand-tiles i { width: 22px; height: 22px; border-radius: 7px; }
.brand-tiles .t-coral { background: var(--coral); box-shadow: 0 2px 0 var(--coral-edge); }
.brand-tiles .t-amber { background: var(--amber); box-shadow: 0 2px 0 var(--amber-edge); }
.brand-tiles .t-teal  { background: var(--teal);  box-shadow: 0 2px 0 var(--teal-edge); }
.brand-tiles .t-blue  { background: var(--blue);  box-shadow: 0 2px 0 var(--blue-edge); }
.brand-name { font-weight: 900; font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { font-weight: 700; font-size: 1rem; color: var(--ink-dim); transition: color 0.2s; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.btn-nav { padding: 10px 20px; font-size: 0.95rem; }
.nav-avatar {
  width: 44px; height: 44px; border-radius: 14px;
  background: oklch(0.33 0.05 85); /* board-mandated selected fill, matches auth.css */
  box-shadow: inset 0 0 0 2px var(--gold);
  display: grid; place-items: center; font-size: 21px;
}

/* ─────────── board ─────────── */
/* Two columns on a wide screen: the list, and a rail carrying the pitch. The
   rail is the landing page's idiom. A pinned bar is a phone idiom, and this is
   not a phone. On a phone the rail simply falls under the list. */
.board-wrap {
  padding: 40px 72px 72px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px;
  align-items: start;
}
.board-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.board-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.board-head h1 {
  font-weight: 900; font-size: clamp(2.25rem, 4.4vw, 4rem);
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92;
}
.board-head p { font-weight: 600; font-size: 1.05rem; color: var(--ink-dim); }

.board-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.board-count { font-weight: 700; font-size: 0.82rem; color: var(--ink-dim); }

.seg { display: flex; gap: 4px; background: var(--bg-sink); border-radius: 12px; padding: 3px; }
.seg-btn {
  border: 0; cursor: pointer; font: inherit; background: transparent;
  border-radius: 9px; padding: 8px 16px; font-weight: 700; font-size: 0.95rem;
  color: var(--ink-dim); -webkit-tap-highlight-color: transparent;
}
.seg-btn.active { background: var(--gold); color: var(--gold-ink); }

.board-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }

/* A row is one game. Five columns so the stat gets its own, rather than
   fighting the score for a baseline: rank, avatar, name, stat, score. */
/* Four columns, not five: the chip is one cell holding its own tile and name,
   so the row stopped needing an avatar column of its own. */
.board-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 220px 100px;
  gap: 16px; align-items: center;
  background: var(--bg-raise); border-radius: var(--r-ctl); padding: 14px 18px;
  box-shadow: inset 0 0 0 2px var(--line);
}
.board-row.is-me { box-shadow: inset 0 0 0 2px var(--gold); }
.br-rank {
  font-weight: 900; font-size: 1.05rem; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.board-row.top-1 .br-rank { color: var(--gold); }
.board-row .chip { min-width: 0; }
.br-stat { font-weight: 600; font-size: 0.88rem; color: var(--ink-dim); }
.br-stat-short { display: none; }
.br-points { font-weight: 900; font-size: 1.2rem; font-variant-numeric: tabular-nums; text-align: right; }

/* The dare. Every board ends with the number to beat, a full one included. */
.board-row.is-ghost {
  background: transparent; box-shadow: none;
  border: 2px dashed var(--line); padding: 12px 16px;
}
/* The dare sits in the name column. It only runs to the edge on a row that has
   no score beside it, otherwise it lands on top of one. */
.board-row:has(.br-dare) { grid-template-columns: 40px auto minmax(0, 1fr); }
.br-dare { grid-column: 3 / -1; font-weight: 700; font-size: 0.95rem; color: var(--ink-dim); }
.board-row.is-ghost .br-points { color: var(--ink-dim); opacity: 0.6; }
.board-row.is-faint { opacity: 0.4; }
.board-row.is-fainter { opacity: 0.28; }
.br-bar { grid-column: 3 / -1; height: 10px; max-width: 110px; border-radius: 999px; background: var(--bg-raise); }

.board-mark-note {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.82rem; color: var(--ink-dim);
}

/* The empty board holds rank 1 inside a gold ring, so it invites rather than
   apologises. It is the frame most people will ever see on this page. */
.board-empty {
  box-shadow: inset 0 0 0 2px var(--gold);
  padding: 24px 20px; display: flex; flex-direction: column; gap: 14px;
  text-align: center; align-items: center;
}
.board-empty .board-row { width: 100%; }
.board-empty .br-dare { color: var(--gold); text-align: left; }
.board-empty .board-row.is-next { border-color: var(--gold); }
.board-empty .board-row.is-next .br-rank { color: var(--gold); }
.board-empty-title {
  font-weight: 900; font-size: 1.6rem; text-transform: uppercase;
  letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance;
}
.board-empty-sub { font-weight: 600; font-size: 0.95rem; color: var(--ink-dim); line-height: 1.5; text-wrap: balance; }
.board-cta { width: 100%; }

/* ─────────── the rail ─────────── */
.board-rail { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; min-width: 0; }
.board-pitch { padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 0 0 2px var(--gold); }
.board-pitch-title {
  font-weight: 900; font-size: clamp(1.4rem, 2.2vw, 2rem); text-transform: uppercase;
  letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance;
}
.board-pitch-sub { font-weight: 600; font-size: 0.95rem; color: var(--ink-dim); line-height: 1.5; }
.board-reset {
  background: var(--bg-sink); border-radius: var(--r-ctl);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px;
}
.board-reset-icon { font-size: 1.5rem; }
.board-reset-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.board-reset-text b { font-weight: 800; font-size: 0.95rem; }
.board-reset-text span { font-weight: 600; font-size: 0.82rem; color: var(--ink-dim); }

@media (max-width: 1080px) {
  /* One column. The rail becomes the closing line under the list, which is
     where a pitch belongs once it is no longer beside anything. */
  .board-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .board-rail { position: static; }
}

@media (max-width: 900px) {
  .nav { padding: 20px; }
  .board-wrap { padding: 24px 20px 56px; gap: 20px; }
  /* Name and stat stack: two facts about one run, with the score the third and
     loudest on the right. On one line the stat fights the score for a baseline. */
  .board-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px; padding: 12px 14px;
  }
  .br-rank { font-size: 0.95rem; }
  .board-row .chip { grid-column: 2; grid-row: 1; align-self: end; }
  /* Indented past the tile so it sits under the name rather than under the
     avatar. The tile is 36px and the chip's own gap is 10px. */
  .br-stat { grid-column: 2; grid-row: 2; font-size: 0.78rem; align-self: start; margin-left: 46px; }
  .br-points { grid-column: 3; grid-row: 1 / span 2; font-size: 1.05rem; }
  .board-row:not(:has(.br-stat)) .chip { grid-row: 1 / span 2; align-self: center; }
  .br-dare { grid-column: 3 / -1; grid-row: 1 / span 2; align-self: center; font-size: 0.88rem; }
  .board-row:has(.br-dare) { grid-template-columns: 24px auto minmax(0, 1fr); }
  .board-row:has(.br-dare) .chip { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .br-bar { grid-column: 2 / -1; grid-row: 1 / span 2; align-self: center; }
  .board-empty-title { font-size: 1.45rem; }
}

@media (max-width: 360px) {
  /* The stat shortens rather than wrapping or vanishing. Nothing else moves. */
  .br-stat-long { display: none; }
  .br-stat-short { display: inline; }
}