/* style.css — Wizards & Commoners · 2026 MLB Summer Rush
   Art direction: 90s console sports menu — PlayStation 1 tournament screens,
   NFL Blitz 99 attitude, chunky beveled panels, hard drop-shadows, CRT glow.
   Palette: red / white / blue, drawn from the MLB shield mark. */

/* The [hidden] attribute must always win over component display rules,
   regardless of specificity added later in this file. */
[hidden] { display: none !important; }

@font-face {
  font-family: '62Dragz';
  src: url('./assets/fonts/62DRAGZ.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Milker';
  src: url('./assets/fonts/Milker.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Title faces — kept exactly as art-directed. 62Dragz drives every heading,
     manager name, and big score number; Milker drives the countdown timer.
     These are the "title fonts" and are intentionally left untouched. */
  --font-display: '62Dragz', 'Arial Black', sans-serif;
  --font-timer: 'Milker', '62Dragz', 'Arial Black', sans-serif;

  /* Functional label face. Previously the decorative 'Dollar Bill' font was used
     for all UI chrome (buttons, captions, tags, tickers), which read as noisy and
     was hard to parse at small sizes. It is now a single clean broadcast grotesque
     — Barlow, set uppercase + tracked at each use — so every label stays crisp and
     legible while the 62Dragz titles carry the retro attitude. */
  --font-label: 'Barlow', system-ui, 'Arial', sans-serif;
  --font-pixel: var(--font-label);
  /* Body copy: the same clean grotesque, mixed-case for readable paragraphs. */
  --font-body: 'Barlow', system-ui, 'Arial', sans-serif;

  --text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.4rem, 1.2rem + 1.1vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px;
  --radius-xl: 8px; --radius-full: 9999px;
  --transition-interactive: 100ms linear;
  --content-default: 1080px;

  --notch: 12px;
  --notch-sm: 7px;

  /* header/ticker are a fixed scoreboard bar — near-black charcoal in light and dark
     theme, ESPN-style, so the white-line league logo always has guaranteed contrast. */
  --header-bg: #0c0c0e;
  --header-bg-2: #060607;
  --header-border: #3a3a3f;
  --header-ink: #000000;
  --header-text: #ffffff;
  --header-text-muted: #b7b7bd;
  --header-accent: #ff3b46;
  --header-surface: #1a1a1d;
  --header-surface-hover: #262629;
}

/* ---------- dark — ESPN night broadcast: charcoal, red, blue, white (only theme) ---------- */
:root {
  --color-bg: #151517;
  --color-bg-2: #1b1b1e;
  --color-surface: #212124;
  --color-surface-2: #2a2a2e;
  --color-surface-offset: #1b1b1e;
  --color-divider: #3a3a3f;
  --color-border: #46464c;
  --color-text: #f6f6f7;
  --color-text-muted: #bcbcc2;
  --color-text-faint: #a2a2a9;
  --color-blue: #3d7dfa;
  --color-blue-soft: color-mix(in oklab, #3d7dfa 22%, transparent);
  --color-red: #ff3b46;
  --color-red-soft: color-mix(in oklab, #ff3b46 20%, transparent);
  --color-ink: #050505;
  --shadow-sm: 3px 3px 0 var(--color-ink);
  --shadow-md: 5px 5px 0 var(--color-ink);
  --shadow-lg: 8px 8px 0 var(--color-ink);
  --glow-blue: 5px 5px 0 var(--color-ink), 0 0 26px color-mix(in oklab, #3d7dfa 45%, transparent);
  --glow-red: 5px 5px 0 var(--color-ink), 0 0 26px color-mix(in oklab, #ff3b46 45%, transparent);

  /* Border-glow rings for interactive/accent elements (box-shadow based — for
     square elements that are NOT clipped by clip-path). A thin colored ring plus
     a soft outer bloom gives the "slight glow to the color borders" the design
     calls for without washing the panel out. */
  --ring-blue: 0 0 0 1px color-mix(in oklab, var(--color-blue) 55%, transparent), 0 0 12px -1px color-mix(in oklab, var(--color-blue) 55%, transparent);
  --ring-red: 0 0 0 1px color-mix(in oklab, var(--color-red) 55%, transparent), 0 0 12px -1px color-mix(in oklab, var(--color-red) 55%, transparent);
  /* drop-shadow glows for clip-path (notched) panels, where box-shadow is clipped
     away. filter: drop-shadow follows the notched silhouette, so the glow hugs the
     angled corners. Paired with a soft ambient shadow for gentle modern depth. */
  --drop-ambient: drop-shadow(0 5px 9px color-mix(in oklab, #000 55%, transparent));
  --dropglow-blue: drop-shadow(0 0 7px color-mix(in oklab, var(--color-blue) 60%, transparent));
  --dropglow-red: drop-shadow(0 0 7px color-mix(in oklab, var(--color-red) 60%, transparent));
  --dropglow-white: drop-shadow(0 0 6px color-mix(in oklab, #ffffff 42%, transparent));
  --dropglow-gold: drop-shadow(0 0 8px color-mix(in oklab, var(--medal-gold, #3d7dfa) 62%, transparent));
}

body {
  background:
    radial-gradient(1100px 620px at 84% -8%, color-mix(in oklab, var(--color-blue) 9%, transparent), transparent 62%),
    radial-gradient(900px 520px at -5% 10%, color-mix(in oklab, var(--color-red) 6%, transparent), transparent 58%),
    var(--color-bg);
  background-attachment: fixed;
}

/* ---------- CRT scanline + vignette overlay ---------- */
.crt-overlay {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, color-mix(in oklab, #000 6%, transparent) 0px, transparent 1px, transparent 4px),
    radial-gradient(circle at 50% 45%, transparent 72%, color-mix(in oklab, #000 30%, transparent) 138%);
  opacity: 0.2;
  mix-blend-mode: multiply;
}
@media (prefers-contrast: more) { .crt-overlay { display: none; } }

/* ---------- layout ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; top: var(--space-3); left: var(--space-3); width: auto; height: auto; clip: auto; z-index: 200; background: var(--color-blue); color: var(--color-ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.wrap { width: min(100% - 2 * var(--space-6), var(--content-default)); margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-6) var(--space-16); }

/* ---------- header (fixed navy scoreboard bar, same in both themes) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Clean charcoal scoreboard bar with a faint red sheen up top — meshes with the
     red/blue/white palette instead of muddying it, and a soft red under-glow on the
     bottom edge modernizes the hard shadow line. */
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--header-accent) 9%, #131316) 0%, #0b0b0d 62%, #0a0a0c 100%);
  border-bottom: 3px solid var(--header-border);
  box-shadow:
    0 3px 0 var(--header-ink),
    0 8px 22px -8px color-mix(in oklab, var(--header-accent) 40%, transparent);
}
.site-header .inner {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 68px; padding-block: var(--space-3);
}
.brand { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; }
.brand .mark { display: inline-flex; align-items: center; height: 40px; filter: drop-shadow(2px 2px 0 var(--header-ink)); flex-shrink: 0; }
.brand .mark img { height: 38px; width: auto; display: block; }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.brand .wordmark .title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg);
  letter-spacing: -0.01em; color: var(--header-text);
  text-shadow: 2px 2px 0 var(--header-ink);
}
.brand .wordmark .sub {
  font-family: var(--font-label); font-weight: 600; font-size: 0.6rem; color: var(--header-accent);
  letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px;
}
.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.site-header .btn, .site-header .btn.ghost {
  background: var(--header-surface); border-color: var(--header-border); color: var(--header-text);
  box-shadow: 3px 3px 0 var(--header-ink);
}
.site-header .btn:hover { border-color: var(--header-accent); color: var(--header-accent); box-shadow: 4px 4px 0 var(--header-ink), var(--ring-red); }
.site-header .btn:active { box-shadow: 1px 1px 0 var(--header-ink); }
.site-header .btn[aria-pressed='true'] { border-color: var(--header-accent); color: var(--header-accent); background: color-mix(in oklab, var(--header-accent) 16%, var(--header-surface)); box-shadow: 3px 3px 0 var(--header-ink), var(--ring-red); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  color: var(--header-text-muted); border: 3px solid var(--header-border);
  background: var(--header-surface); box-shadow: 3px 3px 0 var(--header-ink);
}
.icon-btn:hover { color: var(--header-accent); border-color: var(--header-accent); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--header-ink); }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--header-ink); }

/* ---------- ticker (attract-mode marquee) ---------- */
.ticker {
  background: var(--header-ink); border-bottom: 3px solid var(--header-border);
  overflow: hidden; white-space: nowrap;
}
.ticker-track {
  display: inline-block; padding-block: 0.4rem;
  font-family: var(--font-label); font-weight: 600; font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--header-accent); animation: ticker 32s linear infinite;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; white-space: normal; }
}

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.6rem 1.1rem; border-radius: var(--radius-md);
  font-family: var(--font-label); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  border: 3px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-sm); transform: translate(0, 0); cursor: pointer;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
}
.btn:hover { border-color: var(--color-blue); color: var(--color-blue); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-ink), var(--ring-blue); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn.primary { background: var(--color-blue); color: #fff; border-color: var(--color-ink); }
.btn.primary:hover { color: #fff; filter: brightness(1.1); }
.btn.ghost { background: var(--color-surface); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.btn:focus-visible, .icon-btn:focus-visible, .tab:focus-visible { outline: 3px solid var(--header-accent); outline-offset: 2px; }

/* ---------- tabs ---------- */
.tabbar { display: flex; gap: var(--space-1); border-bottom: 3px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: var(--space-3) var(--space-5); color: var(--color-text-muted);
  background: transparent; border: none; border-bottom: 4px solid transparent;
  cursor: pointer; display: flex; align-items: center; gap: var(--space-2);
  white-space: nowrap; transition: color 120ms linear, border-color 120ms linear;
}
.tab .tab-num { font-family: var(--font-label); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.06em; color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.tab:hover { color: var(--color-text); }
.tab.active { color: var(--color-text); border-color: var(--color-blue); box-shadow: 0 6px 12px -6px color-mix(in oklab, var(--color-blue) 70%, transparent); }
.tab.active .tab-num { color: var(--color-blue); text-shadow: 0 0 8px color-mix(in oklab, var(--color-blue) 55%, transparent); }
.tab-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-red); display: inline-block; margin-left: 2px; animation: pulse 1s steps(2, jump-none) infinite; box-shadow: 0 0 8px color-mix(in oklab, var(--color-red) 60%, transparent); }

.tabpanel { display: flex; flex-direction: column; gap: var(--space-5); }
.panel-lede { color: var(--color-text-muted); max-width: 70ch; font-size: var(--text-base); font-family: var(--font-body); }

/* ---------- board controls: search + team filter ---------- */
.board-controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.search-field {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.5rem 0.8rem; border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 2px solid var(--color-border);
  color: var(--color-text-muted); flex: 0 1 260px;
}
.search-field svg { flex-shrink: 0; }
.search-field input {
  border: none; background: transparent; outline: none; color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-sm); width: 100%;
}
.search-field input::placeholder { color: var(--color-text-faint); }
.search-field:focus-within { border-color: var(--color-blue); box-shadow: var(--ring-blue); }
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
  background: var(--color-blue-soft); border: 2px solid var(--color-blue); color: var(--color-blue);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); cursor: pointer;
  box-shadow: var(--ring-blue);
}
.filter-chip:hover { filter: brightness(1.15); }
.filter-hint { margin-left: auto; color: var(--color-text-faint); font-size: var(--text-xs); font-family: var(--font-body); }

/* ---------- sections ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--color-text);
  letter-spacing: 0.04em; text-shadow: 2px 2px 0 var(--color-ink);
}
.section-head .hint { color: var(--color-text-muted); font-size: var(--text-sm); font-family: var(--font-body); }

/* ---------- shared logo frame (leaderboard chips + game rows) ---------- */
.logo-frame {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: #fff; border: 2px solid var(--team-color, var(--color-border));
  box-shadow: 0 0 0 1px var(--color-ink);
}
.logo-frame img { width: 18px; height: 18px; object-fit: contain; display: block; }

/* ---------- leaderboard ---------- */
.board { display: grid; gap: var(--space-3); }
.manager-card {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface); border: 3px solid var(--color-border);
  position: relative; transition: transform var(--transition-interactive), filter var(--transition-interactive), border-color var(--transition-interactive);
  clip-path: polygon(var(--notch-sm) 0, 100% 0, 100% calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) 100%, 0 100%, 0 var(--notch-sm));
  /* drop-shadow (not box-shadow) so the depth follows the notched silhouette */
  filter: var(--drop-ambient);
}
.manager-card:hover { transform: translate(-2px, -2px); border-color: color-mix(in oklab, var(--color-blue) 55%, var(--color-border)); filter: var(--drop-ambient) var(--dropglow-blue); }
.manager-card.rank-1 { border-color: var(--color-blue); filter: var(--drop-ambient) var(--dropglow-blue); }
.manager-card.rank-14, .manager-card.is-last { border-color: var(--color-red); filter: var(--drop-ambient) var(--dropglow-red); }
.manager-card.pending { opacity: 0.65; }
.manager-card.is-hidden { display: none; }
.manager-card.is-highlighted { border-color: var(--color-blue); filter: var(--drop-ambient) var(--dropglow-blue); }

.rank-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-md); flex-shrink: 0;
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl);
  background: var(--color-surface-2); color: var(--color-text-muted); border: 3px solid var(--color-border);
  font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 2px color-mix(in oklab, #000 25%, transparent);
}
.rank-badge .label { font-family: var(--font-label); font-weight: 600; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; color: color-mix(in oklab, currentColor 85%, transparent); }
.manager-card.rank-1 .rank-badge { background: var(--color-blue); color: #fff; border-color: var(--color-ink); }
.manager-card.rank-2 .rank-badge { background: color-mix(in oklab, #e8e8ea 75%, var(--color-surface-2)); color: var(--color-ink); border-color: var(--color-ink); }
.manager-card.rank-3 .rank-badge { background: color-mix(in oklab, var(--color-red) 45%, var(--color-surface-2)); color: #fff; border-color: var(--color-ink); }

.manager-main { min-width: 0; }
.manager-name { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.1; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--color-text); text-shadow: 1px 1px 0 var(--color-ink); }
.manager-name .tag { font-family: var(--font-label); font-size: 0.56rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.manager-name .tag.dd { background: var(--color-red-soft); color: var(--color-red); border: 2px solid var(--color-red); }
.manager-name .tag.tie { background: var(--color-surface-2); color: var(--color-text-muted); border: 2px solid var(--color-border); }
.manager-name .tag.ghost { background: color-mix(in oklab, var(--color-text-faint) 18%, transparent); color: var(--color-text-muted); border: 2px dashed var(--color-text-faint); }

.team-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.team-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.45rem 0.55rem 0.45rem 0.25rem; border-radius: var(--radius-sm);
  background: var(--color-surface-2); border: 2px solid var(--color-border); font-size: var(--text-sm);
  min-width: 0; font-family: var(--font-body); font-weight: 600; cursor: pointer;
  transition: border-color 120ms linear, outline-color 120ms linear;
}
.team-chip .abbr { font-weight: 700; letter-spacing: 0.01em; }
.team-chip .runs { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); }
.team-chip.live { border-color: var(--color-red); box-shadow: var(--ring-red); }
.team-chip.live .runs { color: var(--color-red); }
.team-chip.live .logo-frame { animation: pulse 1s steps(2, jump-none) infinite; }
.team-chip.empty { color: var(--color-text-muted); font-style: italic; font-family: var(--font-body); cursor: default; }
.team-chip:focus-visible, .game-team:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.team-chip.chip-active, .game-team.chip-active { border-color: var(--color-blue); outline: 2px solid var(--color-blue); outline-offset: 1px; }

.manager-total { text-align: right; padding-left: var(--space-3); border-left: 3px solid var(--color-divider); }
.manager-total .num { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text); text-shadow: 2px 2px 0 var(--color-ink); }
.manager-total .num.accent { color: var(--color-blue); text-shadow: 2px 2px 0 var(--color-ink), 0 0 18px color-mix(in oklab, var(--color-blue) 55%, transparent); }
.manager-total .num.last { color: var(--color-red); text-shadow: 2px 2px 0 var(--color-ink), 0 0 18px color-mix(in oklab, var(--color-red) 55%, transparent); }
.manager-total .cap { font-family: var(--font-label); font-weight: 600; font-size: 0.6rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.14em; }

/* progress bar under total */
.manager-card .bar { grid-column: 2 / 4; height: 6px; border-radius: var(--radius-sm); background: var(--color-surface-offset); overflow: hidden; margin-top: var(--space-3); border: 1px solid var(--color-ink); }
.manager-card .bar > span { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--color-blue) 0 6px, var(--color-red) 6px 12px); border-radius: inherit; transition: width 500ms ease-out; }

/* ---------- compact summary card (Live Games tab: top-3 standings + top-3 wild cards) ---------- */
.summary-card {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface); border: 3px solid var(--color-border);
  clip-path: polygon(var(--notch-sm) 0, 100% 0, 100% calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) 100%, 0 100%, 0 var(--notch-sm));
  filter: var(--drop-ambient);
}
.summary-card:empty { display: none; }
.summary-block { display: flex; flex-direction: column; gap: var(--space-3); }
.summary-title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-base); color: var(--color-text);
  text-shadow: 1px 1px 0 var(--color-ink); display: flex; align-items: baseline; gap: var(--space-2); letter-spacing: 0.02em;
}
.summary-sub { font-family: var(--font-label); font-weight: 600; font-size: 0.62rem; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.1em; }

.mini-board { display: flex; flex-direction: column; gap: var(--space-2); }
.mini-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--color-surface-2); border: 2px solid var(--color-border);
}
.mini-row.dd { grid-template-columns: 1fr auto auto; }
.mini-row.lead { border-color: var(--color-blue); box-shadow: var(--ring-blue); }
.mini-row.last { border-color: var(--color-red); box-shadow: var(--ring-red); }
.mini-rank { font-family: var(--font-display); font-weight: 400; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; }
.mini-row.lead .mini-rank { color: var(--color-blue); }
.mini-row.last .mini-rank { color: var(--color-red); }
.mini-name { font-family: var(--font-display); font-weight: 400; font-size: var(--text-sm); color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-runs { font-family: var(--font-display); font-weight: 400; font-size: var(--text-sm); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-sub { font-family: var(--font-label); font-weight: 600; font-size: 0.62rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mini-board.sm .mini-row { padding: var(--space-1) var(--space-2); }
.empty-note.sm { font-size: var(--text-xs); }

.wc-mini-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.wc-mini { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.wc-mini-title { font-family: var(--font-label); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-divider); }
.wc-mini-title.wizard { color: var(--color-blue); border-color: color-mix(in oklab, var(--color-blue) 40%, var(--color-divider)); }
.wc-mini-title.commoner { color: var(--color-red); border-color: color-mix(in oklab, var(--color-red) 40%, var(--color-divider)); }
.wc-mini-title.double { color: var(--color-text); border-color: var(--color-divider); }

/* ---------- live games ---------- */
.games-list { display: flex; flex-direction: column; gap: var(--space-3); }
.game-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface); border: 3px solid var(--color-border);
  clip-path: polygon(var(--notch-sm) 0, 100% 0, 100% calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) 100%, 0 100%, 0 var(--notch-sm));
  transition: opacity 150ms linear, border-color 150ms linear, filter 150ms linear;
  filter: var(--drop-ambient);
}
.game-row.live { border-color: var(--color-red); filter: var(--drop-ambient) var(--dropglow-red); }
.game-row.is-dim { opacity: 0.35; }
.game-row.is-highlighted { border-color: var(--color-blue); filter: var(--drop-ambient) var(--dropglow-blue); }
.game-team { display: flex; align-items: center; gap: var(--space-2); min-width: 0; cursor: pointer; border-radius: var(--radius-sm); padding: var(--space-1); }
.game-team.home { justify-content: flex-end; flex-direction: row-reverse; text-align: right; }
.game-team .gname { font-family: var(--font-display); font-weight: 400; font-size: var(--text-base); color: var(--color-text); }
.game-team .gscore { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: var(--color-text); min-width: 1.4em; text-align: center; }
.game-team .gscore.dash { color: var(--color-text-faint); }
.game-team .gscore.win { color: var(--color-blue); text-shadow: 0 0 10px color-mix(in oklab, var(--color-blue) 45%, transparent); }
.game-team .picked-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.game-team.home .picked-tags { justify-content: flex-end; }
.picked-tag { font-family: var(--font-label); font-weight: 600; font-size: 0.54rem; padding: 0.16rem 0.44rem; border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.game-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.status-pill { font-family: var(--font-label); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); border: 2px solid var(--color-border); color: var(--color-text-muted); background: var(--color-surface-2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.status-pill.live { color: #fff; background: var(--color-red); border-color: var(--color-red); box-shadow: var(--ring-red); }
.status-pill.live .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1s steps(2, jump-none) infinite; }
.status-pill.final { color: var(--color-text-muted); }
.status-pill.postponed { color: var(--color-text-muted); font-style: italic; }

/* ---------- wild cards ---------- */
.wc-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wc-card {
  position: relative; padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--color-surface); border: 3px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden;
  clip-path: polygon(var(--notch-sm) 0, 100% 0, 100% calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) 100%, 0 100%, 0 var(--notch-sm));
  filter: var(--drop-ambient);
}
.wc-card .glyph { position: absolute; top: var(--space-4); right: var(--space-4); opacity: 0.6; }
.wc-card .glyph svg path, .wc-card .glyph svg circle { stroke-width: 3; }
.wc-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-base); color: var(--color-text); text-shadow: 1px 1px 0 var(--color-ink); padding-right: 2.75rem; letter-spacing: 0.01em; line-height: 1.2; text-wrap: pretty; }
.wc-card .desc { color: var(--color-text-muted); font-size: var(--text-sm); font-family: var(--font-body); }
.wc-card .owner { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); }
.wc-card .owner .sub { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--color-text-muted); margin-left: var(--space-2); }
.wc-card.wizard { border-color: var(--color-blue); filter: var(--drop-ambient) var(--dropglow-blue); }
.wc-card.wizard .owner { color: var(--color-blue); text-shadow: 2px 2px 0 var(--color-ink); }
.wc-card.commoner { border-color: var(--color-red); filter: var(--drop-ambient) var(--dropglow-red); }
.wc-card.commoner .owner { color: var(--color-red); text-shadow: 2px 2px 0 var(--color-ink); }
.wc-card.double { border-color: var(--color-text); filter: var(--drop-ambient) var(--dropglow-white); }
.wc-card.double .owner { color: var(--color-text); text-shadow: 2px 2px 0 var(--color-ink); }
.wc-card.hailmary { opacity: 0.85; border-style: dashed; }
.wc-list { display: flex; flex-direction: column; gap: var(--space-2); }
.wc-list .wc-item { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); font-family: var(--font-body); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-2); border: 2px solid var(--color-border); }
.wc-list .wc-item b { font-variant-numeric: tabular-nums; color: var(--color-blue); }
.empty-note { color: var(--color-text-faint); font-size: var(--text-sm); font-style: italic; font-family: var(--font-body); }

/* ---------- status / error banners ---------- */
.banner { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); border: 3px solid var(--color-border); background: var(--color-surface-2); font-family: var(--font-body); }
.banner.warn { color: var(--color-red); border-color: var(--color-red); background: var(--color-red-soft); }
.banner.info { color: var(--color-text-muted); }

/* countdown */
/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: color-mix(in oklab, #000 70%, transparent);
  padding: var(--space-6); overflow-y: auto;
}
.modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.modal {
  width: min(100%, 760px); background: var(--color-surface); border: 3px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-block: var(--space-8);
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  filter: drop-shadow(0 14px 26px color-mix(in oklab, #000 62%, transparent)) drop-shadow(0 0 10px color-mix(in oklab, var(--color-blue) 22%, transparent));
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.modal-head h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--color-text); text-shadow: 2px 2px 0 var(--color-ink); }
.modal-close { width: 44px; height: 44px; border-radius: var(--radius-md); color: var(--color-text-muted); border: 3px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-2); box-shadow: var(--shadow-sm); }
.modal-close:hover { color: var(--color-red); border-color: var(--color-red); transform: translate(-1px, -1px); }

/* commissioner picks editor */
.picks-editor { display: flex; flex-direction: column; gap: var(--space-3); }
.pick-row { display: grid; grid-template-columns: 130px repeat(3, 1fr); gap: var(--space-2); align-items: center; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-2); border: 2px solid var(--color-border); }
.pick-row .mgr { font-weight: 400; font-family: var(--font-display); color: var(--color-text); font-size: var(--text-sm); }
.pick-row select { padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text); font-size: var(--text-sm); font-family: var(--font-body); }
.pick-row select:focus { border-color: var(--color-blue); }
.commissioner-login { display: flex; flex-direction: column; gap: var(--space-3); max-width: 360px; }
.commissioner-login input { padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text); font-family: var(--font-body); }
.commissioner-login input:focus { border-color: var(--color-blue); }
.form-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.toast { font-size: var(--text-sm); font-family: var(--font-body); font-weight: 600; padding: var(--space-3); border-radius: var(--radius-sm); margin-top: var(--space-3); border: 2px solid transparent; }
.toast.ok { color: var(--color-blue); background: var(--color-blue-soft); border-color: var(--color-blue); }
.toast.err { color: var(--color-red); background: var(--color-red-soft); border-color: var(--color-red); }

/* rules content */
.rules-body { color: var(--color-text); display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-body); }
.rules-body h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-base); color: var(--color-blue); text-shadow: 1px 1px 0 var(--color-ink); }
.rules-body ul { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.rules-body li { color: var(--color-text-muted); }
.rules-body strong { color: var(--color-text); }

/* footer */
.site-footer { border-top: 3px solid var(--header-border); padding-block: var(--space-6); color: var(--header-text-muted); font-size: var(--text-xs); font-family: var(--font-body); background: var(--header-bg); }
.site-footer .inner { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.site-footer .btn.ghost { background: var(--header-surface); border-color: var(--header-border); color: var(--header-text); box-shadow: 2px 2px 0 var(--header-ink); }
.site-footer .btn.ghost:hover { color: var(--header-accent); border-color: var(--header-accent); }

/* skeleton */
.skeleton { background: repeating-linear-gradient(45deg, var(--color-surface-2) 0 10px, var(--color-surface-offset) 10px 20px); background-size: 200% 100%; animation: shimmer 1s steps(8) infinite; border-radius: var(--radius-md); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-card { height: 92px; border-radius: var(--radius-lg); }

/* ---------- NEXT PASS: podium · crown · medals · badge slot · delta · hero · ticker ---------- */

/* medal palette — kept strictly within red / blue / white / charcoal:
   #1 champion = blue, #2 = light steel gray, #3 = charcoal. No gold/bronze. */
:root {
  --medal-gold: #3d7dfa;
  --medal-gold-deep: #1f4fbf;
  --medal-silver: #d7d9dd;
  --medal-silver-deep: #8b8d92;
  --medal-bronze: #6b6b72;
  --medal-bronze-deep: #46464c;
  --glow-gold: 5px 5px 0 var(--color-ink), 0 0 26px color-mix(in oklab, #3d7dfa 45%, transparent);
}

/* keep footer/content clear of the fixed bottom ticker */
body { padding-bottom: 44px; }
.site-footer { margin-bottom: 0; }

/* ---------- podium (ranks 1–3): bigger, more dramatic ---------- */
.manager-card.podium {
  padding-block: var(--space-6);
  background: color-mix(in oklab, var(--color-surface) 92%, var(--color-blue));
}
.manager-card.podium .manager-name .mgr-label { font-size: var(--text-xl); }
.manager-card.podium .manager-total .num { font-size: var(--text-2xl); }
.manager-card.podium .rank-badge { width: 76px; height: 76px; font-size: var(--text-2xl); }

/* crown + medal rank badges */
.rank-badge { gap: 1px; }
.rank-badge .rank-num { line-height: 1; }
.rank-badge .crown {
  font-size: 0.9rem; line-height: 1; color: #fff;
  text-shadow: 0 0 8px color-mix(in oklab, var(--medal-gold) 70%, transparent);
}
.manager-card.podium-top .rank-badge { box-shadow: inset 0 0 0 2px color-mix(in oklab, #fff 45%, transparent), 0 0 16px color-mix(in oklab, var(--medal-gold) 70%, transparent); } /* #1 medal gets an extra glow */

/* #1 — gold champion medal (gold token resolves to the palette blue) */
.manager-card.rank-1 {
  border-color: var(--medal-gold);
  filter: var(--drop-ambient) var(--dropglow-gold);
  background: color-mix(in oklab, var(--color-surface) 88%, var(--medal-gold));
}
.manager-card.rank-1 .rank-badge { background: linear-gradient(145deg, var(--medal-gold), var(--medal-gold-deep)); color: #fff; border-color: var(--color-ink); box-shadow: inset 0 0 0 2px color-mix(in oklab, #fff 35%, transparent), 0 0 14px color-mix(in oklab, var(--medal-gold) 60%, transparent); }
.manager-card.rank-1 .manager-total .num.accent { color: var(--medal-gold); text-shadow: 2px 2px 0 var(--color-ink), 0 0 20px color-mix(in oklab, var(--medal-gold) 60%, transparent); }
/* #2 — silver */
.manager-card.rank-2 { border-color: var(--medal-silver-deep); filter: var(--drop-ambient) var(--dropglow-white); }
.manager-card.rank-2 .rank-badge { background: linear-gradient(145deg, var(--medal-silver), var(--medal-silver-deep)); color: #15151a; border-color: var(--color-ink); box-shadow: inset 0 0 0 2px color-mix(in oklab, #fff 30%, transparent); }
/* #3 — bronze */
.manager-card.rank-3 { border-color: var(--medal-bronze-deep); filter: var(--drop-ambient) drop-shadow(0 0 5px color-mix(in oklab, var(--medal-bronze) 55%, transparent)); }
.manager-card.rank-3 .rank-badge { background: linear-gradient(145deg, var(--medal-bronze), var(--medal-bronze-deep)); color: #fff; border-color: var(--color-ink); box-shadow: inset 0 0 0 2px color-mix(in oklab, #fff 18%, transparent); }

/* lead-change celebration — subtle gold pulse on the new #1 */
.manager-card.is-leader-change { animation: leaderPop 900ms ease-out 1; }
@keyframes leaderPop {
  0% { filter: var(--drop-ambient) var(--dropglow-gold); transform: scale(1); }
  30% { filter: var(--drop-ambient) drop-shadow(0 0 16px color-mix(in oklab, var(--medal-gold) 75%, transparent)); transform: scale(1.015); }
  100% { filter: var(--drop-ambient) var(--dropglow-gold); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .manager-card.is-leader-change { animation: none; } }

/* ---------- dedicated badge slot (tags no longer crammed in the name) ---------- */
.manager-name { flex-wrap: wrap; row-gap: var(--space-1); }
.manager-name .mgr-label { text-shadow: 1px 1px 0 var(--color-ink); }
.manager-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-left: var(--space-1); }
.tag.delta { font-family: var(--font-label); font-weight: 700; font-size: 0.56rem; padding: 0.18rem 0.44rem; border-radius: var(--radius-sm); border: 2px solid; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.tag.delta.up { background: color-mix(in oklab, var(--color-blue) 18%, transparent); color: var(--color-blue); border-color: var(--color-blue); }
.tag.delta.down { background: var(--color-red-soft); color: var(--color-red); border-color: var(--color-red); }

/* ---------- persistent top-banner countdown (visible on every tab) ---------- */
.top-countdown {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); border: 2px solid var(--medal-gold-deep);
  background: color-mix(in oklab, var(--color-surface) 92%, var(--medal-gold));
  filter: var(--drop-ambient) var(--dropglow-gold);
}
.tc-label { font-family: var(--font-label); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--medal-gold); white-space: nowrap; }
.tc-clock { display: flex; align-items: baseline; gap: var(--space-4); font-variant-numeric: tabular-nums; }
.tc-unit { display: inline-flex; align-items: baseline; gap: 4px; }
.tc-n { font-family: var(--font-timer); font-size: var(--text-lg); color: var(--color-text); line-height: 1; text-shadow: 0 0 12px color-mix(in oklab, var(--medal-gold) 45%, transparent); }
.tc-l { font-family: var(--font-label); font-weight: 600; font-size: 0.62rem; color: var(--color-text-muted); text-transform: uppercase; }

/* ---------- bottom ESPN-style ticker ---------- */
.bottom-ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: stretch; height: 44px;
  background: var(--header-bg); border-top: 3px solid var(--header-border);
  box-shadow: 0 -4px 0 var(--header-ink);
  /* live-diamond token colors (consumed by the inline SVG fills) */
  --bt-lit: #3d7dfa;      /* occupied base */
  --bt-empty: color-mix(in oklab, #fff 8%, transparent); /* empty base */
  --bt-home: #ffffff;     /* home plate */
  --bt-stroke: var(--header-border);
}
.bt-label {
  flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--space-4);
  font-family: var(--font-display); font-size: 0.72rem; color: #fff; letter-spacing: 0.04em;
  background: var(--header-accent); text-shadow: 1px 1px 0 var(--header-ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
/* Topic-by-topic ticker: .bt-slot holds exactly one topic at a time and is moved/
   faded entirely via the Web Animations API in app.js (scroll right-to-left across
   the viewport, then a soft fall-down+fade before the next topic loads in) — no CSS
   keyframes here, since the scroll distance has to match each topic's real width. */
.bt-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; height: 44px; }
.bt-slot { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; height: 44px; white-space: nowrap; will-change: transform, opacity; }
.bt-seg { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); height: 44px; font-family: var(--font-label); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--header-text); }
.bt-seg b { color: var(--header-accent); font-family: var(--font-label); font-weight: 700; letter-spacing: 0.1em; }
.bt-seg.bt-stand { color: #fff; }
.bt-seg.bt-head { color: var(--header-text-muted); }
.bt-seg.bt-live b { color: var(--header-accent); }
.bt-seg.bt-live { color: #fff; }
.bt-seg.bt-final b { color: var(--header-text-muted); }
.bt-div { display: inline-flex; align-items: center; color: var(--header-accent); opacity: 0.7; }
.bt-diamond { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.bt-diamond rect { transition: fill 200ms linear; }

/* ---------- mobile tuning ---------- */
@media (max-width: 640px) {
  .manager-card.podium { padding-block: var(--space-5); }
  .manager-card.podium .rank-badge { width: 56px; height: 56px; font-size: var(--text-xl); }
  .manager-card.podium .manager-name .mgr-label { font-size: var(--text-lg); }
  .manager-card.podium .manager-total .num { font-size: var(--text-xl); }
  .manager-card.rank-1 .manager-name .mgr-label { font-size: var(--text-xl); }
  .top-countdown { justify-content: flex-start; padding: var(--space-2) var(--space-4); gap: var(--space-1) var(--space-3); }
  .tc-clock { gap: var(--space-3); }
  .tc-n { font-size: var(--text-base); }
  .bt-label { font-size: 0.6rem; padding: 0 var(--space-3); }
  .bt-seg { font-size: 0.55rem; padding: 0 var(--space-3); }
  .bt-diamond { width: 13px; height: 13px; }
  body { padding-bottom: 40px; }
  /* fit all three tabs on one row instead of truncating */
  .tab { padding: var(--space-2) var(--space-2); font-size: 0.82rem; gap: var(--space-1); flex: 1 1 0; justify-content: center; min-width: 0; }
  .tab .tab-num { display: none; }
}
@media (max-width: 640px) {
  .site-header .inner { flex-wrap: wrap; row-gap: var(--space-2); min-height: 0; padding-block: var(--space-2); }
  .brand { width: 100%; margin-right: 0; gap: var(--space-2); }
  .brand .mark { height: 30px; }
  .brand .mark img { height: 28px; }
  .brand .wordmark .title { font-size: 0.95rem; }
  .brand .wordmark .sub { display: none; }
  .header-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); }
  .header-actions .btn { padding: 0.55rem 0.7rem; font-size: 0.7rem; }
  .manager-card { grid-template-columns: 48px 1fr; }
  .manager-total { grid-column: 2 / 3; border-left: none; padding-left: 0; border-top: 3px solid var(--color-divider); padding-top: var(--space-2); text-align: left; display: flex; align-items: baseline; gap: var(--space-3); }
  .manager-total .num { font-size: var(--text-xl); }
  .manager-card .bar { grid-column: 1 / 3; }
  .rank-badge { width: 48px; height: 48px; font-size: var(--text-base); }
  .pick-row { grid-template-columns: 1fr; }
  .pick-row .mgr { margin-bottom: var(--space-1); }
  .filter-hint { display: none; }
  .board-controls { gap: var(--space-2); }
  .game-row { grid-template-columns: 1fr; text-align: left; }
  .game-team.home { flex-direction: row; justify-content: flex-start; text-align: left; }
  .game-team.home .picked-tags { justify-content: flex-start; }
  .game-mid { flex-direction: row; justify-content: space-between; padding-block: var(--space-1); }

  /* ---------- pull the leaderboard above the fold on phones ----------
     Status strip and the intro copy above the board were pushing the
     first ranking past a full phone viewport before any content showed.
     Rules button + the boardHint already cover this copy, so the longer
     lede is redundant weight on repeat visits (checked daily for 34 days). */
  .status-strip-inner { padding-block: var(--space-2); gap: var(--space-2) var(--space-4); }
  .status-strip .meta-row { gap: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .panel-lede { display: none; }
  .stack { padding-block: var(--space-4) var(--space-16); gap: var(--space-5); }
  .section-head { gap: var(--space-1); }
}