/* /<game>/ and /<game>-leaderboard/ — the shared game and leaderboard
   component layer. Legacy page markup (classes that used to live only in
   /style.css) redrawn in the design system: tokens only, logical
   properties, one category accent per page read from --accent.
   Loaded only by game and leaderboard pages via front.page.styles.
   Game-board internals (canvas, tubes, d-pads, overlays) stay in each
   game's own stylesheet. */

/* ── Legacy variable bridge ─────────────────────────────────────────────
   Inline game styles still read the old style.css names. Map them onto
   tokens at zero specificity (:where) so a shop theme loaded later always
   wins. Never alias --text-bright / --text-main / --accent-* here: tokens
   read those as theme inputs and an alias would create a cycle. */
:where(:root) {
  --glass: var(--surface-1);
  --glass-border: var(--border);
  --font-main: var(--font-body);
  --font-heading: var(--font-display);
  --text-soft: var(--text-muted);
  --text-subtext: var(--text-faint);
  --accent-violet: var(--violet);
  --primary-glow: color-mix(in srgb, var(--primary) 35%, transparent);
  --transition-smooth: all var(--dur-fast) var(--ease);
}

/* ── Category accent ────────────────────────────────────────────────────
   The migration puts the catalog group on <body data-accent>; every
   component below reads --accent (violet when absent). Hub cards carry
   their own game's group the same way. */
:is(body, .lb-hub-card)[data-accent="cyan"] { --accent: var(--cyan); }
:is(body, .lb-hub-card)[data-accent="pink"] { --accent: var(--pink); }
:is(body, .lb-hub-card)[data-accent="amber"] { --accent: var(--amber); }
:is(body, .lb-hub-card)[data-accent="coral"] { --accent: var(--coral); }
:is(body, .lb-hub-card)[data-accent="lime"] { --accent: var(--lime); }
:is(body, .lb-hub-card)[data-accent="violet"] { --accent: var(--violet); }
body[data-accent] { --accent-ink: var(--primary-ink); }

/* ── Page frame ─────────────────────────────────────────────────────── */
main > .container { padding-block: var(--space-5) var(--space-9); }
main > .container > * + * { margin-block-start: var(--space-5); }
/* The game column (.sk-play, .ws-play, ...): one rhythm for every game.
   Inline legacy margins on its children are neutralised so the gap is
   the only spacing; inline-level actions stay centred instead of
   stretching. */
main > .container > [class$="-play"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
main > .container > [class$="-play"] > * { margin-block: 0 !important; }
main > .container > [class$="-play"] > :is(a, button) { align-self: center; }
@media (min-width: 768px) {
  main > .container { padding-block-start: var(--space-6); }
}
/* Game headline: the h1 and its one-line intro open the game column.
   :where() keeps it at element specificity so a game sheet can tune it. */
:where(main > .container > [class$="-play"]) > h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}
:where(main > .container > [class$="-play"]) > h1 + p {
  max-inline-size: 60ch;
  margin-inline: auto !important;
  color: var(--text-muted);
  text-align: center;
  text-wrap: pretty;
}
:lang(zh) :where(main > .container > [class$="-play"]) > h1,
:lang(ja) :where(main > .container > [class$="-play"]) > h1 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-3); line-height: 1.15; }
:lang(ru) :where(main > .container > [class$="-play"]) > h1,
:lang(hi) :where(main > .container > [class$="-play"]) > h1 { line-height: 1.15; }
:lang(ar) :where(main > .container > [class$="-play"]) > h1 { line-height: 1.4; letter-spacing: 0; }

/* First-viewport frame: on a 1366x768 laptop the board has to start on
   the first screen. Game pages open tighter under the header, the h1
   drops to one title-size line (its text is untouched) and the intro
   reads as a single muted subline. The selector out-ranks the per-game
   .xx-h1 rules on size only; script line-heights stay theirs. */
main > .container:has(> [class$="-play"]) { padding-block-start: var(--space-4); }
@media (min-width: 768px) {
  main > .container > [class$="-play"] > h1 { font-size: var(--step-3); }
  main > .container > [class$="-play"] > h1 + p { max-inline-size: 90ch; font-size: var(--step--1); }
}
@media (min-width: 1080px) {
  main > .container > [class$="-play"] { gap: var(--space-3); }
  /* Toolbar: mode tabs and the settings that follow them share one row. */
  main > .container > [class$="-play"]:has(> [class*="-mode-tabs"] + [class$="-settings"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: var(--space-5);
  }
  main > .container > [class$="-play"]:has(> [class*="-mode-tabs"] + [class$="-settings"]) > * { grid-column: 1 / -1; min-inline-size: 0; }
  main > .container > [class$="-play"]:has(> [class*="-mode-tabs"] + [class$="-settings"]) > :is(a, button) { justify-self: center; }
  main > .container > [class$="-play"] > [class*="-mode-tabs"]:has(+ [class$="-settings"]) { grid-column: 2; align-self: center; margin: 0; }
  main > .container > [class$="-play"] > [class*="-mode-tabs"] + [class$="-settings"] {
    grid-column: 3;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1) var(--space-5);
  }
  main > .container > [class$="-play"] > [class*="-mode-tabs"] + [class$="-settings"] > p { flex-basis: 100%; text-align: start; }
}

/* Headline helpers. .teko-title keeps the heading's own step. */
.teko-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.teko-title > i,
.teko-subtitle > i { font-size: 0.72em; color: var(--accent); }
.teko-subtitle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.1em;
  color: var(--text);
}

/* ── Mode tabs: segmented control ───────────────────────────────────────
   Shared by game mode switches (.sk-mode-tabs, .ws-mode-tabs, ...) and the
   leaderboard category / period / difficulty tabs. A Hull track holding
   Mist segments; the selected one is a Deck 2 key tinted with the accent. */
.lb-categories,
.lb-time-filters,
.lb-diff-tabs,
[class*="-mode-tabs"] {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
  padding: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-md) + var(--space-1));
  background: var(--bg-raised);
}
:is(.lb-categories, .lb-time-filters, .lb-diff-tabs, [class*="-mode-tabs"])::-webkit-scrollbar { display: none; }
a.lb-cat-tab { text-decoration: none; }
@media (max-width: 479.98px) { nav.lb-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; overflow: visible; } nav.lb-categories > .lb-cat-tab { min-inline-size: 0; padding-inline: var(--space-2); } }
.lb-cat-tab,
.lb-time-tab,
.lb-diff-tab,
[class*="-mode-tab"]:not([class*="-mode-tabs"]) {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
:is(.lb-cat-tab, .lb-time-tab, .lb-diff-tab, [class*="-mode-tab"]) > i { font-size: 0.9em; margin: 0; }
:is(.lb-cat-tab, .lb-time-tab, .lb-diff-tab, [class*="-mode-tab"]:not([class*="-mode-tabs"])):hover {
  background: var(--surface-2);
  color: var(--text);
  transform: none;
}
:is(.lb-cat-tab, .lb-time-tab, .lb-diff-tab, [class*="-mode-tab"]:not([class*="-mode-tabs"])):is(.active, [aria-selected="true"]) {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--text);
  box-shadow: var(--shadow-1);
}
:is(.lb-cat-tab, .lb-time-tab, .lb-diff-tab, [class*="-mode-tab"]):is(.active, [aria-selected="true"]) > i { color: var(--accent); }
/* Secondary filters (period, difficulty) sit one size down under the main tabs. */
.lb-time-filters, .lb-diff-tabs { margin-block-start: var(--space-3); }
:is(.lb-time-tab, .lb-diff-tab) { min-block-size: 36px; padding-inline: var(--space-3); }
main > .container > .lb-categories + .lb-time-filters { margin-block-start: var(--space-3); }

/* ── Readouts: HUD strip ────────────────────────────────────────────────
   One bar of equal Deck 1 cells split by 1px seams (the bar's Seam fill
   shows through the 1px gaps). Each cell is a display-caps label and a
   tabular Teko value: stacked on phones, side by side from 768px, so the
   strip stays about 48px tall and the board keeps the first screen. The
   featured cell carries a 2px accent top line and an accent value. */
.stats-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--border);
  box-shadow: var(--shadow-1);
}
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-inline-size: 0;
  padding: var(--space-2) var(--space-1);
  background: var(--surface-1);
  text-align: center;
}
.stat-card.featured { box-shadow: inset 0 2px 0 var(--accent); }
.stat-label {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block-start: 0.12em;
  color: var(--text-muted);
}
.stat-main { display: flex; justify-content: center; min-inline-size: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 0.9;
  padding-block-start: 0.1em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-card.featured .stat-value,
.stat-value.highlight-text { color: var(--accent); }
:lang(ar) .stat-label { letter-spacing: 0; }
@media (min-width: 768px) {
  .stat-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
    min-block-size: 48px;
    padding: var(--space-1) var(--space-3);
  }
  .stat-card:has(.timer-controls) { align-items: center; }
  .stat-label { font-size: var(--step-0); }
}

/* Stepper inside a stat tile (level / duration pickers). */
.timer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-inline-size: 0;
}
.arrow-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 28px;
  block-size: var(--tap);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.arrow-btn:hover { background: var(--surface-2); color: var(--accent); }
.arrow-btn:disabled { opacity: 0.4; cursor: not-allowed; background: none; color: var(--text-muted); }
[dir="rtl"] .arrow-btn i { transform: scaleX(-1); }
@media (min-width: 480px) { .arrow-btn { inline-size: 36px; font-size: 1rem; } }

/* ── Panels ─────────────────────────────────────────────────────────── */
.section-box,
.glass-panel:not(.modal-box) {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
@media (min-width: 768px) {
  .section-box, .glass-panel:not(.modal-box) { padding: var(--space-6); }
}
.section-box > :first-child { margin-block-start: 0; }
.section-box > h2.teko-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  font-size: var(--step-2);
  line-height: 1;
}
/* Game card: the panel that holds the board. Thin padding so the play
   area gets the room, the category strip on top, contents clipped to the
   radius. Games that need a full bleed set padding: 0 themselves. */
body[data-experience="games"] .section-box:has(canvas, [class*="-stage"], [class*="-board"]):not(.tlb-board, .arcade-rank, .history-section) {
  padding: var(--space-2);
  overflow: hidden;
  border-block-start-color: var(--accent);
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat padding-box,
    var(--surface-1);
}
@media (min-width: 768px) {
  body[data-experience="games"] .section-box:has(canvas, [class*="-stage"], [class*="-board"]):not(.tlb-board, .arcade-rank, .history-section) { padding: var(--space-3); }
}

/* Live play: while a run is active (body[data-game-active], set by the
   game scripts) the game card and its HUD light the page accent: a 55%
   accent edge and a soft accent lift below the card (offset and blur, no
   halo). It eases in over the panel duration and out when the run ends.
   Reduced motion keeps only the static border tint. */
body[data-experience="games"] .section-box:has(canvas, [class*="-stage"], [class*="-board"]):not(.tlb-board, .arcade-rank, .history-section),
[class$="-play"] > .stats-grid {
  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
body[data-experience="games"][data-game-active] .section-box:has(canvas, [class*="-stage"], [class*="-board"]):not(.tlb-board, .arcade-rank, .history-section) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  border-block-start-color: var(--accent);
  box-shadow: var(--shadow-1), 0 14px 36px -18px color-mix(in srgb, var(--accent) 45%, transparent);
}
body[data-game-active] [class$="-play"] > .stats-grid {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-1), 0 8px 22px -14px color-mix(in srgb, var(--accent) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  body[data-experience="games"] .section-box:has(canvas, [class*="-stage"], [class*="-board"]):not(.tlb-board, .arcade-rank, .history-section),
  [class$="-play"] > .stats-grid { transition: none; }
  body[data-experience="games"][data-game-active] .section-box:has(canvas, [class*="-stage"], [class*="-board"]):not(.tlb-board, .arcade-rank, .history-section),
  body[data-game-active] [class$="-play"] > .stats-grid { box-shadow: var(--shadow-1); }
}

/* ── Rank neighbours (game page) ────────────────────────────────────── */
.rank-neighbors { display: flex; flex-direction: column; gap: 2px; }
.rank-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rank-row:nth-child(odd) { background: var(--bg-raised); }
.rank-pos {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.12em;
  color: var(--text-faint);
}
.rank-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }
.rank-cps,
.rank-val,
.rank-score {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.12em;
  color: var(--text);
  text-align: end;
}
.rank-row--me,
.rank-row.me {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-1)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
:is(.rank-row--me, .rank-row.me) :is(.rank-pos, .rank-cps, .rank-val, .rank-score) { color: var(--accent); }
/* "Ask in Community" pins (assets/community-ask.mjs) take a fourth column. */
.rank-row:has(> .lb-ask) { grid-template-columns: 4.5rem minmax(0, 1fr) auto auto; gap: var(--space-2) var(--space-3); }
.rank-neighbors > .muted,
.rank-neighbors > p {
  padding: var(--space-4) !important;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}

/* ── Small actions ──────────────────────────────────────────────────── */
.ghost-btn-sm {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 36px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ghost-btn-sm::after { content: ''; position: absolute; inset: -4px 0; }
.ghost-btn-sm:hover { border-color: var(--border-control); background: var(--surface-3); color: var(--text); }
.ghost-btn-sm:disabled { opacity: 0.45; cursor: not-allowed; }
.close-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--tap);
  block-size: var(--tap);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.close-btn:hover { background: var(--surface-2); color: var(--text); }
.full-width { inline-size: 100%; }

/* ── Modals: the shared modal look plus legacy bits ─────────────────── */
.modal-box > p { color: var(--text-muted); }
.modal-box > p + p { margin-block-start: var(--space-3); }
.modal-header .teko-title { margin: 0; font-size: var(--step-2); line-height: 1; padding-block-start: 0.12em; }
.modal-actions,
[class$="-modal-actions"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-block-start: var(--space-5) !important;
}

/* ── Below-the-game sections: guides, articles, FAQ ─────────────────── */
.seo-section { padding-block: var(--space-6) var(--space-9); }
.seo-section + .seo-section { padding-block-start: 0; }
.seo-section > .container > * + * { margin-block-start: var(--space-5) !important; }
@media (min-width: 1080px) { .seo-section { padding-block-end: var(--space-10); } }

/* Articles list (modal or inline): ruled rows, title over blurb. */
.articles-list { display: flex; flex-direction: column; gap: 2px; margin-block: 0 var(--space-4); }
.article-row,
.blog-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-block-size: var(--tap);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.article-row:hover, .blog-link:hover { background: var(--surface-2); color: var(--text-muted); }
.article-row > b,
.blog-title {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.article-row > span,
.blog-link > .muted { color: var(--text-muted); font-size: var(--step--1); line-height: 1.45; }
.articles-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  font-weight: 600;
}

/* ── Leaderboards ───────────────────────────────────────────────────── */
/* Board pages: centred title block, then tabs, your-rank bar, board. */
main > .container > h1.teko-title { text-align: center; }
main > .container > h1.teko-title + p,
.tlb-sub,
.lbsk-intro,
:is(.lb2048-intro, .lbfb-intro, .lblb-intro, .lbtb-intro, .localized-intro) {
  max-inline-size: 60ch;
  margin-inline: auto !important;
  color: var(--text-muted);
  text-align: center;
}
main > .container > h1.teko-title + p { margin-block-start: var(--space-2); }
.tlb-wrap { max-inline-size: 760px; margin-inline: auto; }
.tlb-wrap > * + * { margin-block-start: var(--space-4); }
.tlb-wrap > .tlb-title + .tlb-sub { margin-block-start: var(--space-2); }
.tlb-title { margin-block-end: 0; text-align: center; }
/* "Play <game>" under the board (each legacy page named its own wrapper). */
:is(.tlb-play-cta, .lb2048-cta, .lbfb-cta, .lblb-cta, .lbms-cta, .lbmt-cta, .lbsk-cta, .lbtb-cta, .bb-lb-cta, .tanklb-cta, .localized-cta, .cc-cta) {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-5);
  text-align: center;
}
/* Long-form note panel under the tetris boards. */
.tlb-note { max-inline-size: 760px; margin-inline: auto; }
.tlb-note > h2 { margin-block-end: var(--space-3); font-size: var(--step-2); }
.tlb-note > p + p { margin-block-start: var(--space-3); }

/* In-row extras the board scripts emit. */
.lb-medal-mini { font-size: 0.9em; }
.lb-diff-tag {
  display: block;
  margin-block-start: 2px;
  padding-block-start: 0.12em;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lb-time-sub { display: block; color: var(--text-faint); font-size: var(--step--1); font-weight: 500; line-height: 1.1; }
@media (min-width: 768px) { .lb-time-sub { display: none; } }
.slb-top .tlb-rank { color: var(--accent); }

/* Your rank: an accent-edged strip of tabular readouts. */
.lb-your-rank-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-3) var(--space-5);
  min-block-size: 56px;
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
  box-shadow: var(--shadow-1);
}
.lb-your-rank-bar .yr-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.lb-your-rank-bar .yr-label {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block-start: 0.12em;
  color: var(--text-muted);
}
.lb-your-rank-bar .yr-value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.lb-your-rank-bar.guest {
  justify-content: center;
  border-color: var(--border);
  border-style: dashed;
  background: var(--surface-1);
  box-shadow: none;
}
.lb-your-rank-bar.guest .yr-label {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
}
/* Your rank as neighbour rows (tower-blocks): the board's row look, the
   player's own row in the accent. */
.lb-yr-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: var(--space-4);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.lb-yr-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.lb-yr-row .yr-pos { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1; color: var(--text-faint); }
.lb-yr-row .yr-name { min-inline-size: 0; overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lb-yr-row .yr-val { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1; color: var(--text); text-align: end; white-space: nowrap; }
.lb-yr-row :is(.yr-you, .yr-dtag) {
  margin-inline-start: var(--space-2);
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lb-yr-row.me {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.lb-yr-row.me :is(.yr-pos, .yr-val, .yr-you) { color: var(--accent); }
.daily-participate-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  margin-inline-start: auto;
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.daily-participate-btn:hover { background: color-mix(in srgb, var(--accent) 86%, white); color: var(--accent-ink); }

/* The board: a panel of 48px tabular rows, zebra-stepped on Hull, the
   signed-in player's row tinted and edged in the accent. */
.tlb-board {
  margin-block-start: var(--space-4);
  padding: var(--space-2) !important;
}
@media (min-width: 768px) { .tlb-board { padding: var(--space-3) !important; } }
#leaderboard-list { display: flex; flex-direction: column; gap: 2px; }
.tlb-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 48px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#leaderboard-list > .tlb-row:nth-child(odd) { background: var(--bg-raised); }
.tlb-head {
  min-block-size: 36px;
  padding-block: 0;
  border-block-end: 1px solid var(--border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  margin-block-end: var(--space-1);
}
.tlb-head > span {
  font-family: var(--font-display) !important;
  font-size: var(--step-0) !important;
  font-weight: 500 !important;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block-start: 0.12em;
  color: var(--text-faint) !important;
}
/* Rank column: a fixed inline size (the row gap keeps it off the player
   column) so a long localized head such as "الترتيب" ellipsizes instead of
   running into "Player". */
.tlb-rank {
  display: flex;
  align-items: center;
  flex: 0 0 4.25rem;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.12em;
  color: var(--text-faint);
}
.tlb-head > .tlb-rank { display: block; text-overflow: ellipsis; }
/* Top three: a Teko numeral on an accent key instead of medal emoji.
   First is the filled key (Void Ink on the accent), second and third
   tinted keys; their rows carry a 1px accent edge. */
.tlb-medal,
.rank-medal {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.14em;
  font-variant-numeric: tabular-nums;
}
:is(.tlb-medal, .rank-medal):is(.tlb-medal--1, .rank-medal--1) { background: var(--accent); box-shadow: var(--shadow-1); color: var(--accent-ink, var(--primary-ink)); }
:is(.tlb-medal, .rank-medal):is(.tlb-medal--3, .rank-medal--3) { background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
#leaderboard-list > .tlb-row:has(.tlb-medal):not(.tlb-row--me, .highlight-row) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
#leaderboard-list > .tlb-row:has(.tlb-medal--1) :is(.tlb-val:not(.tlb-val--sm), .tlb-score) { color: var(--accent); }
/* Inline UI icons that replaced emoji (Font Awesome glyphs and the
   authored badge SVGs in /assets/site/badges/). */
.coin-ico { color: var(--amber); font-size: 0.9em; }
.fruit-ico { color: var(--coral); font-size: 0.9em; }
.burst-ico { color: var(--amber); font-size: 0.8em; margin-inline-end: 0.15em; }
.lb-unit-ico { margin-inline-start: 0.25em; color: var(--text-muted); font-size: 0.75em; }
.medal-ico { font-size: 0.85em; }
.medal-ico--gold, .medal-ico--trophy { color: #ffc94a; }
.medal-ico--silver { color: #c9d1e0; }
.medal-ico--bronze { color: #d49a67; }
.lb-badge-ico { display: inline-block; inline-size: 1.15em; block-size: 1.15em; vertical-align: -0.2em; }
.tlb-name {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
  color: var(--text);
  font-weight: 600;
  line-height: 1.25;
}
.tlb-name > *,
.tlb-name .player-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlb-head .tlb-name { flex-direction: row; }
.player-identity,
.tlb-tag,
.tlb-name .player-tag { color: var(--text-faint); font-size: var(--step--1); font-weight: 400; }
.lb-badge { margin-inline-start: var(--space-1); }
.tlb-you {
  margin-inline-start: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 600;
  vertical-align: middle;
}
/* A chip left as a direct child of the column name still hugs its text. */
.tlb-name > .tlb-you { align-self: flex-start; margin-inline-start: 0; }

/* Character Wheel board (rows are links to the character card): the
   tier is a small 1px-edged chip in the tier colour, the five stats a
   faint icon line under the identity. */
a.tlb-row { text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
#leaderboard-list > a.tlb-row:hover { background: var(--surface-2); }
/* Rows are blocks now (an "Ask in Community" pin sits inside): the name's link stretches over the whole row. */
.wlb-entry { position: relative; }
.wlb-entry .wlb-open { color: inherit; text-decoration: none; }
.wlb-entry .wlb-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wlb-entry .wlb-open:focus-visible { outline: none; }
.wlb-entry:has(.wlb-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wlb-entry > .lb-ask { position: relative; z-index: 1; }
#leaderboard-list > .wlb-entry:hover { background: var(--surface-2); }
.wlb-board .tlb-name { gap: 2px; }
.wlb-board .tlb-name > .player-identity { white-space: normal; }
.wlb-tier {
  --tier: #9ca3af;
  display: inline-block;
  margin-inline-end: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--tier) 60%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tier) 12%, transparent);
  color: var(--tier);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.wlb-tier--bronze { --tier: #d49a67; }
.wlb-tier--silver { --tier: #dfe5ef; }
.wlb-tier--gold { --tier: #ffd24d; }
.wlb-tier--diamond { --tier: #5ee9ff; }
.wlb-tier--iridescent { --tier: #ff7ad1; }
.wlb-statline { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); color: var(--text-faint); font-size: var(--step--1); font-weight: 400; white-space: normal !important; }
.wlb-statline i { margin-inline-end: 0.3em; color: var(--accent); font-size: 0.85em; }
.tlb-val,
.tlb-score {
  flex: 0 0 6rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.12em;
  color: var(--text);
  text-align: end;
  white-space: nowrap;
}
.tlb-val--sm,
.tlb-time { flex: 0 0 4.75rem; font-size: var(--step-0); font-weight: 500; color: var(--text-muted); font-family: var(--font-display); text-align: end; }
.tlb-val--lg { flex-basis: 7.5rem; }
.tlb-val :is(.cps-value, .lb-time, .lb-best-tile, .lb-rank-tile) { font: inherit; color: inherit; }
.tlb-val .cps-rank { margin-inline-start: var(--space-1); }
.tlb-row--me,
.tlb-row.highlight-row {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-1)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
:is(.tlb-row--me, .tlb-row.highlight-row) :is(.tlb-rank, .tlb-val, .tlb-score) { color: var(--accent); }
/* Loading, empty and error states inside the board. */
.loading-indicator,
.empty-state,
.slb-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  text-align: center;
}
:is(.loading-indicator, .empty-state) > i { font-size: var(--step-3); color: var(--accent); }
.loading-indicator { flex-direction: row; justify-content: center; }
.loading-indicator > i { font-size: var(--step-1); }

/* Narrow phones: two-line rows keep every value visible. */
@media (max-width: 479.98px) {
  .tlb-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px var(--space-2);
    padding: var(--space-2);
  }
  .tlb-rank { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .tlb-name { grid-column: 2; grid-row: 1; }
  .tlb-name .player-name { white-space: normal; overflow-wrap: anywhere; }
  :is(.tlb-val:not(.tlb-val--sm), .tlb-score) { grid-column: 3; grid-row: 1; }
  :is(.tlb-val--sm, .tlb-time):nth-last-child(2) { grid-column: 2; grid-row: 2; text-align: start; }
  :is(.tlb-val--sm, .tlb-time):last-child { grid-column: 3; grid-row: 2; }
  .tlb-head { grid-template-rows: auto; }
  .tlb-head > :is(.tlb-val--sm, .tlb-time) { display: none; }
  .tlb-head .tlb-rank { grid-row: 1; }
  /* Rows with an "Ask in Community" pin (assets/community-ask.mjs): the pin takes a fourth column. */
  .tlb-row:has(> .lb-ask) { grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; }
  .tlb-row > .lb-ask { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
  :is(.tlb-val--sm, .tlb-time):has(+ :is(.tlb-val--sm, .tlb-time) + .lb-ask) { grid-column: 2; grid-row: 2; text-align: start; }
  :is(.tlb-val--sm, .tlb-time):has(+ .lb-ask) { grid-column: 3; grid-row: 2; }
  .daily-participate-btn { inline-size: 100%; justify-content: center; margin-inline-start: 0; }
}

/* ── Leaderboard hub (/leaderboard/) ────────────────────────────────── */
.lb-hub-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.lb-hub-title { margin: 0; }
.lb-hub-intro { max-inline-size: 60ch; color: var(--text-muted); font-size: var(--step-1); line-height: 1.5; }
#lb-hub-list-title { margin-block: var(--space-7) var(--space-4); font-size: var(--step-3); }
/* Lead + varied sizes, related to the home Live bento: the CPS board (the
   site's own ranking) leads across two of three columns; every game
   board follows as a compact card, icon key beside the title, blurb
   clamped to three lines (full text stays in the DOM). 1 / 2 / 3 columns. */
.lb-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .lb-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-hub-card--lead { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .lb-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-hub-card--lead { grid-column: span 2; }
}
.lb-hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-block-start-color: var(--accent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat padding-box,
    var(--surface-1);
  box-shadow: var(--shadow-1);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.lb-hub-card::before { content: none; }
.lb-hub-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  border-block-start-color: var(--accent);
  box-shadow: var(--shadow-2);
  color: var(--text-muted);
}
.lb-hub-icon {
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  font-size: 1.15rem;
}
.lb-hub-card > h2 {
  font-size: var(--step-2);
  line-height: 1.05;
  text-transform: none;
}
.lb-hub-card > p { flex: 1 1 auto; font-size: var(--step--1); line-height: 1.5; }
.lb-hub-go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.lb-hub-card:hover .lb-hub-go { text-decoration-color: var(--accent); }
.lb-hub-go > i { color: var(--accent); font-size: 0.85em; transition: translate var(--dur-fast) var(--ease); }
.lb-hub-card:hover .lb-hub-go > i { translate: 3px 0; }
[dir="rtl"] .lb-hub-go > i { transform: scaleX(-1); }
[dir="rtl"] .lb-hub-card:hover .lb-hub-go > i { translate: -3px 0; }
.lb-hub-seo { margin-block-start: var(--space-8); }
@media (min-width: 768px) { .lb-hub-grid { gap: var(--space-4); } .lb-hub-card { padding: var(--space-5); } }
/* Compact boards: icon key and title share the first row */
.lb-hub-card:not(.lb-hub-card--lead) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: center;
}
.lb-hub-card:not(.lb-hub-card--lead) > .lb-hub-icon { inline-size: 40px; block-size: 40px; font-size: 1rem; }
.lb-hub-card:not(.lb-hub-card--lead) > h2 { font-size: var(--step-1); line-height: 1.1; }
.lb-hub-card:not(.lb-hub-card--lead) > p {
  grid-column: 1 / -1;
  align-self: start;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.lb-hub-card:not(.lb-hub-card--lead) > .lb-hub-go { grid-column: 1 / -1; justify-self: start; }
/* Lead: a 64px key, a display title, a step-0 blurb, the low accent glow */
.lb-hub-card--lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: var(--space-5);
  row-gap: var(--space-4);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat padding-box,
    radial-gradient(120% 70% at 50% 120%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--surface-1);
}
@media (min-width: 768px) { .lb-hub-card--lead { padding: var(--space-6); } }
.lb-hub-card--lead > .lb-hub-icon { inline-size: 64px; block-size: 64px; font-size: 1.75rem; }
.lb-hub-card--lead > h2 { font-size: var(--step-3); line-height: 0.95; text-wrap: balance; }
.lb-hub-card--lead > h2 { align-self: center; }
.lb-hub-card--lead > :is(p, .lb-hub-go) { grid-column: 1 / -1; }
.lb-hub-card--lead > .lb-hub-go { justify-self: start; }
.lb-hub-card--lead > p { max-inline-size: 60ch; font-size: var(--step-0); }
:lang(ja) .lb-hub-card--lead > h2, :lang(zh) .lb-hub-card--lead > h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-2); line-height: 1.25; }
:lang(ru) .lb-hub-card--lead > h2, :lang(hi) .lb-hub-card--lead > h2 { line-height: 1.1; }
:lang(ar) .lb-hub-card--lead > h2 { line-height: 1.4; }

/* ── Guess-family readout labels (Caps Are Structure) ─────────────────
   The quiz pages' own stylesheets set their stat, field, clue-cell and
   result labels in tiny body-face caps (the strings ship upper-case).
   Readout labels are display caps at step--1, +0.06em, Mist; status
   labels on the result take the result colour. Notes that are prose
   drop the caps. body[data-page] outranks the page sheets, which load
   after this file. */
body[data-page] :is(.parameters-stat > span, .chain-stat span, .steam-stat span, .parameters-form > label, .guess-form > label, .clue-label, .answer-heading > span:first-child),
body[data-page] .parameter-cell::before,
body[data-page] :is(#parameters-result-kicker, .daily-flow-kicker, .result-copy > span, .steam-daily-badge, .gts-card-tag) {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-page] :is(.parameters-stat > span, .chain-stat span, .steam-stat span, .parameters-form > label, .guess-form > label, .clue-label, .answer-heading > span:first-child),
body[data-page] .parameter-cell::before { color: var(--text-muted); padding-block-start: 0.12em; }
body[data-page] .parameters-example-note {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
:lang(ar) body[data-page] :is(.parameters-stat > span, .chain-stat span, .steam-stat span, .parameters-form > label, .guess-form > label, #parameters-result-kicker, .daily-flow-kicker, .result-copy > span, .steam-daily-badge, .gts-card-tag),
:lang(ar) body[data-page] .parameter-cell::before { letter-spacing: 0; }

/* ── Reduced motion: hovers keep their colour, lose their travel ────── */
@media (prefers-reduced-motion: reduce) {
  .mg-ico:hover,
  .lb-hub-card:hover .lb-hub-go > i { transform: none; translate: none; }
}

/* ══ Arcade rank box (game pages) ═══════════════════════════════════════
   Every game's "Your Rank" section fills the page's content column, so its
   edges line up with the guide below. Includes a comfortable minimum
   height, a summary strip (rank + best), a slice of the board
   (top three + your neighbours), a guest invite with a
   Log in button and the leaderboard link as footer.
   Markup: assets/arcade-scores.js render(); the older boxes (snake, tanks,
   coreball, goods puzzle) go through CPSArcade.legacy() and keep their own
   rows. Cafe clicker keeps its own card. */
.section-box.arcade-rank,
body[data-page="snake"] #sk-rank-section,
body[data-page="tanks"] #tank-rank-section,
body[data-page="coreball"] #rank-section,
body[data-page="goods-puzzle"] #gp-rank-section {
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 15rem;
  margin-inline: auto;
  text-align: start;
  display: flex;
  flex-direction: column;
}
.section-box.arcade-rank > .teko-subtitle { flex-wrap: wrap; row-gap: var(--space-1); }
.arcade-rank [data-arcade-rank-list] { display: grid; gap: var(--space-3); flex: 1; align-content: start; }

/* Summary: your rank and your best */
.arcade-rank__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.arcade-rank__stat {
  display: grid; gap: var(--space-1); align-content: center;
  min-block-size: 5rem; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-raised);
}
.arcade-rank__stat > span {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; color: var(--text-muted);
}
:lang(ar) .arcade-rank__stat > span { letter-spacing: 0; }
.arcade-rank__stat > b {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.arcade-rank__stat > b small { font-size: 0.55em; font-weight: 500; }
.arcade-rank__stat--rank {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
}
.arcade-rank__stat--rank > b { color: var(--accent); }
.arcade-rank__summary.is-loading .arcade-rank__stat > b { color: var(--text-faint); }

/* Rows: the existing rank-row look, with a gap marker between top three and you */
.arcade-rank__rows { gap: 2px; }
.arcade-rank__gap { display: flex; justify-content: center; gap: 5px; padding-block: 6px; }
.arcade-rank__gap > span { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--text-faint); opacity: 0.7; }
.arcade-rank__label {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0;
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.arcade-rank__label > i { color: var(--amber, #f5b84a); }
.arcade-rank__status { margin: 0; text-align: center; padding: var(--space-2); }

/* Guest / not yet ranked: invite */
.arcade-rank__invite {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised));
}
.arcade-rank__icon { flex: none; font-size: 2rem; color: var(--accent); }
.arcade-rank__invite-text { display: grid; gap: var(--space-1); flex: 1; min-inline-size: 0; }
.arcade-rank__invite-text > b { font-size: var(--step-1); font-weight: 600; color: var(--text); line-height: 1.25; }
.arcade-rank__invite-text > span { color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
.arcade-rank__login { flex: none; white-space: nowrap; }
.arcade-rank [data-arcade-rank-list] { container-type: inline-size; }
@container (max-width: 520px) {
  .arcade-rank__invite { flex-direction: column; text-align: center; padding: var(--space-4); }
  .arcade-rank__login { align-self: stretch; justify-content: center; }
}

/* Footer: the page's leaderboard button, moved into the box */
.arcade-rank__foot {
  display: flex; justify-content: center; margin-block-start: var(--space-4); padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
}
.arcade-rank__foot > * { margin: 0 !important; }

/* Shared quiz controls and clue cards: readable touch layouts without
   fixed-height titles or labels floating over values. */
body[data-page] .parameters-search-field input { font-size: max(1rem, 16px); }
body[data-page] .parameters-search-option { min-block-size: 48px; font-size: 1rem; line-height: 1.4; text-align: start; }
body[data-page] .parameters-search-option > :is(span, .song-search-copy) { min-inline-size: 0; overflow-wrap: anywhere; }
body[data-page] :is(.parameters-hint-button, .parameters-give-up) { min-block-size: 44px; font-size: .875rem; }
body[data-page] .parameters-search-results { overscroll-behavior-y: contain; }
@media (max-width: 760px) {
  body[data-page] .howto-chevron { display: none; }
  body[data-page] .howto-step { font-size: .9375rem; line-height: 1.4; }
  body[data-page] .parameters-reset { inline-size: 44px; block-size: 44px; flex: none; }
  body[data-page] .parameters-statrow .parameters-statbar { min-inline-size: 0; flex: 1 1 0; }
  body[data-page] .parameters-stat { min-inline-size: 0; flex: 1 1 0; padding-inline: .65rem; }
  body[data-page] .parameters-stat :is(span, strong) { overflow-wrap: anywhere; line-height: 1.3; }
  body[data-page] .parameter-title { grid-template-rows: auto auto; }
  body[data-page] .parameter-title-copy { min-block-size: 40px; overflow: visible; }
  body[data-page] .parameter-title strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  body[data-page] .parameter-cell { justify-content: flex-start; gap: .4rem; padding: .75rem; }
  body[data-page] .parameter-cell::before { position: static; max-inline-size: 100%; overflow-wrap: anywhere; line-height: 1.35; text-align: start; }
  body[data-page] .parameter-cell :is(strong, small, .parameter-tags) { font-size: 1rem; line-height: 1.4; }
  body[data-page] .parameter-cell small { display: block; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
  body[data-page] .parameter-cell small > i { margin-inline-end: .3em; }
  body[data-page] .parameter-tags span { font-size: .875rem; overflow-wrap: anywhere; }
  /* Keep suggestions in the scroll flow below the field. A forced upward
     popup can put its first answers underneath the fullscreen toolbar. */
  body[data-page] .parameters-form { position: relative; inset-block: auto; }
  body[data-page] .parameters-search-results {
    position: static; margin-block-start: .4rem;
    max-block-size: min(20rem, 38dvh);
  }
  body[data-page] .parameters-search-row > :is(button, a) { align-self: start; }
  body[data-page] .parameters-result-copy { min-inline-size: 0; overflow-wrap: anywhere; }
  body[data-page] .parameters-result-actions > :is(button, a) { min-block-size: 44px; max-inline-size: 100%; white-space: normal; }
}

/* Grid items and translated how-to steps must shrink to a narrow phone. */
body[data-page] .parameters-page,
body[data-page] .parameters-page > * { min-inline-size: 0; }
body[data-page] .howto-step { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
body[data-page] .howto-step > span { min-inline-size: 0; }

/* Category color stays visible through the leaderboard directory and podium. */
.lb-hub-card { background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: none; }
.lb-hub-card:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg-raised)); }
.lb-hub-icon { background: var(--accent); color: var(--primary-ink); }
.lb-hub-go { color: var(--accent); }
#leaderboard-list > .tlb-row:has(.tlb-medal--1) { background: color-mix(in srgb, var(--amber) 14%, var(--bg-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 40%, transparent); }
#leaderboard-list > .tlb-row:has(.tlb-medal--2) { background: color-mix(in srgb, var(--cyan) 11%, var(--bg-raised)); }
#leaderboard-list > .tlb-row:has(.tlb-medal--3) { background: color-mix(in srgb, var(--coral) 11%, var(--bg-raised)); }

.lb-hub-card { background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), color-mix(in srgb, var(--bg-raised) 88%, transparent); }
.lb-hub-card--lead { box-shadow: 0 18px 48px -32px color-mix(in srgb, var(--accent) 50%, transparent); }

/* Let the board and its HUD define the game; remove duplicate outer framing. */
body[data-experience="games"] .section-box:has(canvas, [class*="-stage"], [class*="-board"]):not(.tlb-board, .arcade-rank, .history-section) { border: 0; background: none; box-shadow: none; padding: 0; overflow: visible; }
body[data-experience="games"][data-game-active] .section-box:has(canvas, [class*="-stage"], [class*="-board"]):not(.tlb-board, .arcade-rank, .history-section) { box-shadow: none; }
.stats-grid { border: 0; background: none; box-shadow: none; gap: var(--space-2); }
.stats-grid > .stat-card { --stat-tone: var(--cyan); border-radius: var(--radius-md); background: linear-gradient(125deg, color-mix(in srgb, var(--stat-tone) 21%, var(--bg-raised)), var(--bg-raised)); box-shadow: none; }
.stats-grid > .stat-card:nth-child(3n+2) { --stat-tone: var(--amber); }
.stats-grid > .stat-card:nth-child(3n+3) { --stat-tone: var(--pink); }
.stats-grid .stat-card :is(.stat-label, .stat-value) { color: var(--stat-tone); }
.section-box.arcade-rank { border: 0; background: linear-gradient(110deg, color-mix(in srgb, var(--amber) 12%, var(--bg-raised)), transparent); }