/* ============================================================
   css/styles.css — Custom styles & animations for 82-0
   (everything that Tailwind's utility classes can't cover)
   ============================================================ */

/* ── Loading / busy spinner ────────────────────────────────
   `@keyframes _spin` used to live in an inline <style> INSIDE
   #loading-overlay, and js/data/players.js removes that overlay once the
   database is in — which deleted the keyframes from the document. Every
   later user of the same animation (the global + daily leaderboard modals
   in js/utils/storage.js) was then painting a circle that could never
   turn. Defining it here, in a stylesheet that outlives the boot screen,
   is the whole fix; .app-spinner exists so the two call sites share one
   definition instead of repeating the animation shorthand inline. */
@keyframes _spin { to { transform: rotate(360deg); } }

.app-spinner {
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  animation: _spin 0.7s linear infinite;
}

/* ── Theme variables ──────────────────────────────────────── */
:root {
  /* Chalk scheme (docs/colour-scheme.md): a cool off-white field, white
     panels with navy ink, chrome blue for progress and links, one orange
     for the screen's main action, gold only for rewards. Every text pair
     clears 4.5:1 and the structure is carried by luminance so it survives
     the washed-out laptop panels most players are on. */
  --bg:          #eef1f6;
  --card:        #ffffff;
  --card2:       #f4f7ff;
  --card3:       #ffffff;
  --border:      #d5dce8;
  --border-light:#e6ebf3;
  --fg:          #0b1a3a;
  --muted:       #5b6880;
  --muted-fg:    #3d4a66;
  --primary:     #1540c8;
  --primary-fg:  #ffffff;
  --primary-soft: rgba(21, 64, 200, 0.14);
  --shadow:      rgba(11,26,58,0.08);
  --shadow2:     rgba(11,26,58,0.05);
  --overlay:     rgba(11,26,58,0.45);
  --header-bg:   transparent;
  --header-shadow: transparent;
  --input-bg:    #ffffff;
  /* Tinted surfaces (inline-style backgrounds) */
  --surface-blue:   #eef3ff;
  --surface-indigo: #eef3ff;
  --surface-green:  #f0fdf4;
  --surface-red:    #fef2f2;
  --surface-amber:  #fffbeb;
  --surface-orange: #fff7ed;
  --surface-yellow: #fefce8;
  --surface-cream:  #fffef8;
  --surface-sky:    #eef3ff;
  --surface-muted:  #f4f7ff;
  --surface-track:  #dde5f6;
  /* "Perfect / 82-0" gold accents (leaderboard rows, champ badges) */
  --amber-badge-bg: #fff3c4;
  --amber-border:   #f4d58a;
  --amber-text:     #b45309;
  --amber-strong:   #b45309;
  /* Courtside broadcast palette — the results hero + playoff ladder screens.
     Orange is the single live accent; the outfield gradient (green to pitch
     tan) carries the broadcast look. See "Courtside broadcast" below. */
  --acc:            #ff7a1a;
  --acc-deep:       #e8690c;
  --acc-soft:       rgba(255, 122, 26, 0.18);
  /* The action button: --acc fill, dark ink, and a navy ring + 4px edge so
     the button stays a slab when a cheap panel washes the orange out. */
  --acc-hi:         #ff8a35;
  --on-acc:         #140a00;
  --action-edge:    #0b1a3a;
  /* Text and chrome that sit directly on the field (the header, the home
     screen's headline and footer, the draft pool label, content pages).
     Panels read --fg; these read --field-*, so the field and the panels can
     be tuned apart. */
  --field-fg:        #0b1a3a;
  --field-muted:     #3d4a66;
  --field-line:      rgba(11, 26, 58, 0.12);
  --field-pill-bg:   #ffffff;
  --field-pill-line: #c4ccda;
  --hardwood-from:  #0f2d1e;
  --hardwood-to:    #4a3a1c;
  --gold-from:      #f59e0b;
  --gold-to:        #d97706;
  --pip-win:        #16a34a;
  --pip-loss:       #fda4af;
  --autopsy-text:   #dc2626;
  --autopsy-border: #fecaca;
  /* Trophy Room banners (the pennants in the 12-slot grid). White ink on
     these fills clears 4.5:1 in both themes. */
  --banner-fill:         #1d4ed8;
  --banner-edge:         #f5b82e;
  --banner-ink:          #ffffff;
  --banner-perfect-fill: #92400e;
  --banner-perfect-edge: #fbbf24;
  /* GM Level rewards track. --border and --acc are tuned for large fills, not
     for 2px rules or 13px text on the tinted panels, so the track carries its
     own AA-checked set: a 3:1 line for tile borders and the track line, an
     orange and a green that clear 4.5:1 on the orange panel, a muted that
     clears it on the amber/orange tints, and the ink for gold tiles. */
  --gm-track-line:       #64748b;
  --gm-track-accent-ink: #c2410c;
  --gm-track-ok:         #15803d;
  --gm-track-muted:      #556072;
  --gm-gold-ink:         #1c0a00;
  /* Legends collection screen: the progress accent, its track, and the gold
     it turns when a decade (or the whole collection) is complete. */
  --legends-ring:        #4f46e5;
  --legends-track:       #e0e7ff;
  --legends-gold:        #b45309;
  --legends-gold-soft:   #fef3c7;
  /* Colours the renderer paints inline (js/ui/render.js and friends) and the
     rating / fans / chemistry ramps (js/ui/theme.js, js/logic/chemistry.js).
     The light values are the exact hexes they replaced; the dark theme lifts
     each ink for a dark panel and turns each pastel into a translucent tint.
     Solid fills carry their own ink token because one blue cannot be both
     readable text and a background for white text on a dark panel. */
  --primary-fill:     #1540c8;
  --primary-fill-fg:  #ffffff;
  --fill-orange:      #f97316;
  --fill-orange-deep: #ea580c;
  --on-fill-orange:   #ffffff;
  --fill-amber:       #d97706;
  --fill-amber-hi:    #b45309;
  --on-fill-amber:    #ffffff;
  --fill-blue:        #2563eb;
  --on-fill-blue:     #ffffff;
  /* 1v1 snake-order dots once a pick is made */
  --pick-done-blue:     #93c5fd;
  --on-pick-done-blue:  #1e40af;
  --pick-done-amber:    #fcd34d;
  --on-pick-done-amber: #92400e;
  --ink-blue:         #2563eb;
  --ink-blue-mid:     #1d4ed8;
  --ink-blue-deep:    #1e40af;
  --ink-amber:        #d97706;
  --ink-amber-deep:   #92400e;
  --ink-yellow:       #a16207;
  --ink-green:        #15803d;
  --ink-green-mid:    #16a34a;
  --ink-red:          #dc2626;
  --ink-red-mid:      #ef4444;
  --ink-red-deep:     #b91c1c;
  --ink-orange:       #c2410c;
  --ink-orange-mid:   #ea580c;
  --ink-orange-deep:  #9a3412;
  --ink-orange-hot:   #f97316;
  --ink-teal:         #0f766e;
  --ink-slate:        #64748b;
  --ink-slate-light:  #94a3b8;
  --ink-slate-deep:   #475569;
  --ink-slate-ink:    #334155;
  --ink-indigo:       #4338ca;
  --ink-indigo-mid:   #6366f1;
  --ink-indigo-light: #818cf8;
  --surface-blue-pale:     #eff6ff;
  --surface-blue-faint:    #f8fbff;
  --surface-blue-hi:       #dbeafe;
  --surface-orange-faint:  #fffaf5;
  --surface-yellow-strong: #fef9c3;
  --surface-green-strong:  #dcfce7;
  --surface-green-mint:    #ecfdf5;
  --surface-indigo-hi:     #e0e7ff;
  --surface-amber-hi:      #fef3c7;
  --surface-slate:         #e2e8f0;
  --line-amber:        #fde68a;
  --line-amber-strong: #fcd34d;
  --line-blue:         #bfdbfe;
  --line-blue-strong:  #93c5fd;
  --line-green:        #bbf7d0;
  --line-green-strong: #86efac;
  --line-red:          #fecaca;
  --line-orange:       #fdba74;
  --line-orange-soft:  #fed7aa;
  --line-indigo:       #c7d2fe;
  --line-slate:        #cbd5e1;
  --line-faint:        #f1f5f9;
  --trait-bg:          #f1f5f9;
  --trait-fg:          #475569;
  --trait-line:        #e2e8f0;
  /* OVR tiers: 97+ elite, 92+ star, 85+ good, the rest solid. */
  --ovr-elite:         #d97706;
  --ovr-star:          #2563eb;
  --ovr-good:          #0f766e;
  --ovr-solid:         #64748b;
}

/* ── Night Game: the dark theme (docs/colour-scheme.md) ────────────────
   Built for low light. Three steps of navy (field, panel, raised panel)
   replace the white cards, the ink is off-white rather than pure white, and
   every accent is lifted so it clears 4.5:1 on a dark panel. One saturated
   thing per screen: the orange action button. The attribute value stays
   `blacktop` because it is the stored preference (a saved 'dark' or
   'blacktop' both boot here). */
[data-theme="blacktop"] {
  --bg:              #0f131c;
  --card:            #1b2232;
  --card2:           #242c3f;
  --card3:           #161c2a;
  --border:          #2a3244;
  --border-light:    #222a3a;
  --fg:              #e6eaf2;
  --muted:           #7f8aa0;
  --muted-fg:        #aab3c5;
  --primary:         #8ab4ff;
  --primary-fg:      #0f131c;
  --primary-soft:    rgba(138, 180, 255, 0.16);
  --primary-fill:    #2f5fd0;
  --primary-fill-fg: #f4f7ff;
  --shadow:          rgba(0, 0, 0, 0.4);
  --shadow2:         rgba(0, 0, 0, 0.3);
  --overlay:         rgba(0, 0, 0, 0.65);
  --input-bg:        #161c2a;
  --surface-blue:    rgba(138, 180, 255, 0.12);
  --surface-indigo:  rgba(180, 184, 255, 0.12);
  --surface-green:   rgba(90, 212, 138, 0.12);
  --surface-red:     rgba(240, 138, 138, 0.12);
  --surface-amber:   rgba(242, 193, 78, 0.12);
  --surface-orange:  rgba(255, 138, 61, 0.12);
  --surface-yellow:  rgba(242, 193, 78, 0.10);
  --surface-cream:   rgba(242, 193, 78, 0.06);
  --surface-sky:     rgba(138, 180, 255, 0.08);
  --surface-muted:   #242c3f;
  --surface-track:   #2a3244;
  --amber-badge-bg:  rgba(242, 193, 78, 0.16);
  --amber-border:    rgba(242, 193, 78, 0.4);
  --amber-text:      #f2c14e;
  --amber-strong:    #f2c14e;
  --acc:             #ff8a3d;
  --acc-deep:        #e0702a;
  --acc-soft:        rgba(255, 138, 61, 0.2);
  --acc-hi:          #ffa05c;
  --on-acc:          #1a0d00;
  --action-edge:     #9a4a12;
  --field-fg:        #e6eaf2;
  --field-muted:     #aab3c5;
  --field-line:      rgba(255, 255, 255, 0.10);
  --field-pill-bg:   rgba(255, 255, 255, 0.06);
  --field-pill-line: rgba(255, 255, 255, 0.16);
  --hardwood-from:   #14301f;
  --hardwood-to:     #2a2415;
  --gold-from:       #f2c14e;
  --gold-to:         #c9942a;
  --pip-win:         #5ad48a;
  --pip-loss:        #5a2a2a;
  --autopsy-text:    #f08a8a;
  --autopsy-border:  rgba(240, 138, 138, 0.35);
  --banner-fill:     #2a4bb0;
  --banner-edge:     #f2c14e;
  --gm-track-line:       #4a5468;
  --gm-track-accent-ink: #ffb27a;
  --gm-track-ok:         #5ad48a;
  --gm-track-muted:      #aab3c5;
  --legends-ring:        #8ab4ff;
  --legends-track:       #2a3244;
  --legends-gold:        #f2c14e;
  --legends-gold-soft:   rgba(242, 193, 78, 0.14);
  --fill-orange:      #ff8a3d;
  --fill-orange-deep: #ff8a3d;
  --on-fill-orange:   #1a0d00;
  --fill-amber:       #e0a53a;
  --fill-amber-hi:    #c9942a;
  --on-fill-amber:    #1c1206;
  --fill-blue:        #2f5fd0;
  --on-fill-blue:     #f4f7ff;
  --pick-done-blue:     #3b5fa8;
  --on-pick-done-blue:  #e6eaf2;
  --pick-done-amber:    #7a5c14;
  --on-pick-done-amber: #f6efdc;
  --ink-blue:         #8ab4ff;
  --ink-blue-mid:     #a9c7ff;
  --ink-blue-deep:    #a9c7ff;
  --ink-amber:        #f2c14e;
  --ink-amber-deep:   #f2c14e;
  --ink-yellow:       #f2c14e;
  --ink-green:        #5ad48a;
  --ink-green-mid:    #5ad48a;
  --ink-red:          #f08a8a;
  --ink-red-mid:      #f08a8a;
  --ink-red-deep:     #f08a8a;
  --ink-orange:       #ffb27a;
  --ink-orange-mid:   #ffb27a;
  --ink-orange-deep:  #ffb27a;
  --ink-orange-hot:   #ff8a3d;
  --ink-teal:         #5ad4c4;
  --ink-slate:        #a7b1c4;
  --ink-slate-light:  #7f8aa0;
  --ink-slate-deep:   #aab3c5;
  --ink-slate-ink:    #c3cad8;
  --ink-indigo:       #b4b8ff;
  --ink-indigo-mid:   #b4b8ff;
  --ink-indigo-light: #b4b8ff;
  --surface-blue-pale:     rgba(138, 180, 255, 0.12);
  --surface-blue-faint:    rgba(138, 180, 255, 0.06);
  --surface-blue-hi:       rgba(138, 180, 255, 0.16);
  --surface-orange-faint:  rgba(255, 138, 61, 0.08);
  --surface-yellow-strong: rgba(242, 193, 78, 0.16);
  --surface-green-strong:  rgba(90, 212, 138, 0.16);
  --surface-green-mint:    rgba(90, 212, 138, 0.14);
  --surface-indigo-hi:     rgba(180, 184, 255, 0.2);
  --surface-amber-hi:      rgba(242, 193, 78, 0.16);
  --surface-slate:         #2a3244;
  --line-amber:        rgba(242, 193, 78, 0.4);
  --line-amber-strong: rgba(242, 193, 78, 0.6);
  --line-blue:         rgba(138, 180, 255, 0.4);
  --line-blue-strong:  rgba(138, 180, 255, 0.6);
  --line-green:        rgba(90, 212, 138, 0.4);
  --line-green-strong: rgba(90, 212, 138, 0.5);
  --line-red:          rgba(240, 138, 138, 0.4);
  --line-orange:       rgba(255, 138, 61, 0.4);
  --line-orange-soft:  rgba(255, 138, 61, 0.3);
  --line-indigo:       rgba(180, 184, 255, 0.4);
  --line-slate:        #3d4760;
  --line-faint:        #222a3a;
  --trait-bg:          #242c3f;
  --trait-fg:          #aab3c5;
  --trait-line:        #3d4760;
  --ovr-elite:         #f2c14e;
  --ovr-star:          #8ab4ff;
  --ovr-good:          #5ad4c4;
  --ovr-solid:         #a7b1c4;
}
/* Orange that is not the action button still takes the action ink. */
[data-theme="blacktop"] .auth-btn--primary { color: var(--on-acc); }
/* Token utilities for markup the renderer builds (js/ui/render.js). They
   replace Tailwind's literal palette classes, which only had a light value. */
.ink-blue         { color: var(--ink-blue); }
.ink-amber        { color: var(--ink-amber); }
.ink-amber-text   { color: var(--amber-text); }
.ink-green        { color: var(--ink-green); }
.ink-green-mid    { color: var(--ink-green-mid); }
.ink-red          { color: var(--ink-red); }
.ink-red-mid      { color: var(--ink-red-mid); }
.ink-indigo       { color: var(--ink-indigo); }
.ink-indigo-mid   { color: var(--ink-indigo-mid); }
.ink-indigo-light { color: var(--ink-indigo-light); }
.surface-amber    { background: var(--surface-amber); }
.line-faint       { border-color: var(--line-faint); }
.line-amber-strong { border-color: var(--line-amber-strong); }
.line-green-strong { border-color: var(--line-green-strong); }
.trait-chip       { background: var(--trait-bg); color: var(--trait-fg); border-color: var(--trait-line); }
.hover-surface-green:hover  { background: var(--surface-green); }
.hover-surface-indigo:hover { background: var(--surface-indigo-hi); }
[data-theme="blacktop"] .app-header { border-bottom-color: var(--field-line); }
[data-theme="blacktop"] .app-header__brand,
[data-theme="blacktop"] .app-header__brand * { color: var(--field-fg); }
[data-theme="blacktop"] .header-pill {
  background: var(--field-pill-bg);
  border-color: var(--field-pill-line);
  color: var(--field-fg);
}
html[data-theme="blacktop"] .app-header__actions .header-pill--restart { color: #ffd1d1; }
[data-theme="blacktop"] .draft-board-wrap__head p { color: var(--field-fg); }
[data-theme="blacktop"] .site-footer { border-top-color: var(--field-line); }
[data-theme="blacktop"] .site-footer,
[data-theme="blacktop"] .site-footer__link,
[data-theme="blacktop"] .site-footer-nav,
[data-theme="blacktop"] .site-footer-nav a { color: var(--field-muted); }
/* Content pages are one block of text on the field: give it a panel. */
[data-theme="blacktop"] .seo-content { background: var(--card); color: var(--fg); border-top-color: var(--field-line); }
/* Home screen: the header, headline and footer sit on the field. */
[data-theme="blacktop"] .main-gradient.hm {
  --hm-shell:     #0f131c;
  --hm-panel:     #1b2232;
  --hm-panel-hi:  #242c3f;
  --hm-inset:     #161c2a;
  --hm-line:      #2a3244;
  --hm-line-hi:   #3d4760;
  --hm-rule:      rgba(255, 255, 255, 0.16);
  --hm-ink:       #e6eaf2;
  --hm-ink-2:     #aab3c5;
  --hm-ink-3:     #7f8aa0;
  --hm-icon:      #8ab4ff;
  --hm-orange:    #ff8a3d;
  --hm-orange-hi: #ffa05c;
  --hm-on-orange: #1a0d00;
  --hm-blue:      #8ab4ff;
  --hm-blue-ink:  #8ab4ff;
  --hm-track:     #2a3244;
  --hm-cta-bg:    transparent;
  --hm-cta-bg-hi: rgba(255, 255, 255, 0.06);
  --hm-cta-line:  #3d4760;
  --hm-cta-ink:   #dbe2f0;
  --hm-card-shadow: 0 2px 0 #0b0e15;
  --hm-glow:      transparent;
  --hm-floor-1:   #1b2436;
  --hm-floor-2:   #141b2a;
  --hm-spot:      #8ab4ff;
  --hm-spot-a:    0.08;
  --hm-court:     #3b4f7a;
  --hm-shadow:    #05070c;
  --hm-shadow-a:  0.5;
  --hm-shadow-line-a: 0.4;
  --hm-pip:       #2a3a58;
  --hm-vs:        #e6eaf2;
  --hm-edge:      #3d4760;
  --hm-cta-edge:  #9a4a12;
  --hm-gold-ink:  #f2c14e;
}
[data-theme="blacktop"] .hm .hm-head { border-bottom-color: var(--field-line); }
[data-theme="blacktop"] .hm .hm-brand__mark,
[data-theme="blacktop"] .hm .hm-headline { color: var(--field-fg); }
[data-theme="blacktop"] .hm .hm-brand__tag { color: var(--field-muted); }
[data-theme="blacktop"] .hm .hm-icon { border-color: var(--field-pill-line); color: var(--field-fg); background: var(--field-pill-bg); }
[data-theme="blacktop"] .hm .hm-tools__rule { background: var(--field-pill-line); }
[data-theme="blacktop"] .hm > .site-footer { border-top-color: var(--field-line); }
/* Text that stands on the field on particular screens. */
[data-theme="blacktop"] #app[data-phase="more-modes"] main > div > p.text-muted-fg { color: var(--field-muted); }
[data-theme="blacktop"] .dd-road__title,
[data-theme="blacktop"] .dd-road__count b { color: var(--field-fg); }
[data-theme="blacktop"] .dd-road__copy,
[data-theme="blacktop"] .dd-road__count b span { color: var(--field-muted); }
/* Phone layouts: the roster header, the elimination header and the matchup
   header stand on the field (on desktop each sits inside a panel). */
@media (max-width: 1023px) {
  [data-theme="blacktop"] .draft-roster__head p { color: var(--field-muted); }
  [data-theme="blacktop"] .draft-roster__head .text-primary { color: var(--field-fg); }
  [data-theme="blacktop"] .draft-roster__idle-hint,
  [data-theme="blacktop"] .draft-roster__place-hint { color: var(--field-muted); }
  [data-theme="blacktop"] .elim-screen__title,
  [data-theme="blacktop"] .elim-screen__sub .text-foreground { color: var(--field-fg); }
  [data-theme="blacktop"] .elim-screen__sub { color: var(--field-muted); }
  [data-theme="blacktop"] #app[data-phase="series-preview"] main > div > .text-center > h1 { color: var(--field-fg); }
  [data-theme="blacktop"] #app[data-phase="series-preview"] main > div > .text-center > p { color: var(--field-muted); }
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* Game shell — index.html only, opted in via <html data-page="game">.
   Keeps gameplay inside #app so players don't scroll into the crawlable
   #about FAQ mid-session (especially on mobile). Crawlers still see
   #about in the HTML source.

   This MUST stay scoped: css/styles.css is shared with the standalone
   content pages, and applying the viewport lock globally made daily.html
   unscrollable and cut off the bottom of privacy.html. Normal document
   scrolling is the safe default; the lock is opt-in, so a new page that
   forgets the attribute just scrolls instead of breaking. */
html[data-page="game"],
html[data-page="game"] body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
#app {
  height: 100%;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Visually hidden but available to screen readers / aria-live */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.daily-community-copy {
  font-weight: 700;
}
.daily-community-copy__full { display: none; }
.daily-community-copy__short { display: inline; }
@media (min-width: 640px) {
  .daily-community-copy__short { display: none; }
  .daily-community-copy__full { display: inline; }
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--card2); }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 9999px; }

/* ── Roster slots ──────────────────────────────────────────── */
.slot-empty.droppable { cursor: pointer; }
.slot-empty.droppable:hover {
  border-color: var(--primary) !important;
  background: var(--card2) !important;
}

/* ── Positional fit borders (filled roster slots) ──────────── */
.fit-primary {
  border-color: #22c55e !important;
  border-top:   3px solid #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.22), 0 1px 3px rgba(0,0,0,0.06) !important;
}
.fit-flex {
  border-color: #f97316 !important;
  border-top:   3px solid #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.22), 0 1px 3px rgba(0,0,0,0.06) !important;
}
/* Slate, not red. A player parked off their natural position costs nothing
   on its own — the engine re-assigns the whole floor at sim time (see
   renderRosterSlot in js/ui/render.js) — so red was announcing a penalty that
   never lands. The chip still marks the slot as not-their-natural-spot. */
.fit-place {
  border-color: #94a3b8 !important;
  border-top:   3px solid #94a3b8 !important;
  box-shadow: 0 0 0 2px rgba(148,163,184,0.22), 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ── Slot-machine spin animation ───────────────────────────── */
.slot-badge { transition: all 0.12s; }
.slot-spinning .slot-badge {
  animation: spinTick 0.08s steps(1) infinite;
}

/* ── Phone / tablet slot reel (render.js miniReel) ───────────
   The compact cells' one-line version of the desktop reel: while the
   spin rolls, a blurred strip of names scrolls down behind a payline
   frame; on landing the value drops in, the era a beat after the team.
   The desktop reveal cards use this same reel for their value line
   (css/desktop.css .draft-reveal). */
.slot-reel {
  --reel-acc: #f97316;
  position: relative;
  align-self: stretch;
  display: flex;
  justify-content: center;
  border-radius: 0.5rem;
}
.slot-reel--era { --reel-acc: #3b82f6; }
.slot-reel__win {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 1px 0;
}
.slot-reel__strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: blur(1.2px);
  animation: slotReelStrip 0.42s linear infinite;
}
.slot-reel__strip span {
  flex: none;
  white-space: nowrap;
  color: var(--muted-fg);
}
.slot-reel__strip span.is-final { color: var(--fg); }
@keyframes slotReelStrip {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
.slot-reel.is-rolling .slot-reel__win {
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.slot-reel.is-rolling::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--reel-acc);
  border-radius: 0.5rem;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reel-acc) 20%, transparent);
  pointer-events: none;
}
.slot-reel.is-rolling .slot-badge { visibility: hidden; }
.slot-spinning .slot-reel .slot-badge { animation: none; }
/* landReels() (render.js) decelerates the strip onto the result; the
   landed paint only gives the value a small pop as it locks. */
.slot-reel.is-settling .slot-badge {
  display: inline-block;
  animation: slotReelPop 0.35s ease-out both;
}
.slot-reel--era.is-settling .slot-badge { animation-delay: 0.1s; }
@keyframes slotReelPop {
  from { transform: scale(1.14); }
  to   { transform: none; }
}
/* The strip is NOT stopped under prefers-reduced-motion: a frozen strip
   showed two static names for the whole spin and read as broken (see the
   exemption in css/responsive.css). Only the decorative landing pop is off. */
@media (prefers-reduced-motion: reduce) {
  .slot-reel.is-settling .slot-badge { animation: none; }
}

/* ── Phone / tablet draft screen (below the desktop layout) ────
   The same design as the desktop draft screen, folded to fit: one card for
   the round and the coach, tinted Team / Era cards (render.js
   renderMiniRevealCell), and the three meters as compact tiles with bars. */
@media (max-width: 1023px) {
  /* Round + coach: one card, the coach behind a divider. */
  .draft-topcard {
    flex-shrink: 0;
    border-radius: 0.875rem;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow2);
    overflow: visible;
  }
  .draft-topcard .draft-round-bar { padding: 0.5rem 0.75rem !important; gap: 0.4rem !important; }
  .draft-round-bar__segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .draft-round-bar__segs i { display: block; height: 5px; border-radius: 999px; background: var(--card2); }
  .draft-round-bar__segs i.is-done,
  .draft-round-bar__segs i.is-active { background: var(--primary); }
  .draft-topcard .draft-coach-chip { border-top: 1px solid var(--border); }
  .draft-topcard .draft-coach-chip > button:not(.draft-coach-chip__picker),
  .draft-topcard .draft-coach-chip > div:not(.draft-coach-chip__picker) {
    border: 0 !important;
    border-radius: 0 0 0.875rem 0.875rem !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .draft-slot-machine__round { color: var(--primary); }

  /* Team / Era cards. */
  .draft-slot-machine__cell.m-reveal {
    --rv-acc: #ea580c;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon label ring" "value value value";
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.35rem;
    padding: 0.5rem 0.625rem !important;
    border-width: 1px !important;
    border-color: color-mix(in srgb, var(--rv-acc) 28%, var(--border)) !important;
    background: radial-gradient(130% 90% at 50% 0%,
                  color-mix(in srgb, var(--rv-acc) 11%, var(--card)),
                  var(--card) 75%) !important;
  }
  .draft-slot-machine__cell.m-reveal--era { --rv-acc: #2563eb; }
  .m-reveal__icon {
    grid-area: icon;
    width: 1.75rem; height: 1.75rem;
    border-radius: 0.5rem;
    display: grid; place-items: center;
    color: #fff;
    background: var(--rv-acc);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--rv-acc) 30%, transparent);
  }
  .m-reveal__icon svg { width: 55%; height: 55%; }
  .m-reveal__label {
    grid-area: label;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em;
    color: var(--muted-fg);
  }
  .m-reveal__ring {
    grid-area: ring;
    position: relative;
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--card);
    font-weight: 900; font-size: 1rem; color: var(--fg);
  }
  .m-reveal__ring::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--rv-acc) 55%, var(--card));
  }
  .m-reveal.is-spinning .m-reveal__ring::before { animation: mRevealTurn 1.1s linear infinite; }
  @keyframes mRevealTurn { to { transform: rotate(360deg); } }
  .m-reveal__lock {
    grid-area: ring;
    font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.08em;
    color: var(--primary-fill-fg); background: var(--primary-fill);
    padding: 0.125rem 0.4rem; border-radius: 999px;
  }
  .m-reveal__value { grid-area: value; display: none; min-width: 0; }
  .m-reveal.is-spinning .m-reveal__value,
  .m-reveal.is-landed .m-reveal__value { display: block; }
  .m-reveal__meta {
    grid-area: value; justify-self: start;
    font-size: 0.6875rem; font-weight: 600; color: var(--muted-fg);
    background: var(--card2); padding: 0.125rem 0.5rem; border-radius: 999px;
  }
  .m-reveal .slot-reel { --reel-acc: var(--rv-acc); }
  .m-reveal .slot-reel__win { align-items: center; }
  .m-reveal .slot-reel .text-xl { line-height: 1.5 !important; }
  /* While rolling, a little more window than one line, so the names read as
     a reel passing the frame rather than a clipped line. The extra reaches
     half above and half below the one-line frame (negative margins), so the
     card keeps the landed value's height and nothing below it moves when
     the spin starts or lands. The line is 1.5x the .text-xl size each band
     sets on these cells (0.875rem on phones, see css/responsive.css for
     tablets). */
  .m-reveal .slot-reel.is-rolling .slot-reel__win {
    height: 2.4rem;
    margin-block: calc((1.5 * 0.875rem - 2.4rem) / 2);
  }
  @media (min-width: 640px) {
    .m-reveal .slot-reel.is-rolling .slot-reel__win {
      height: 3rem;
      margin-block: calc((1.5 * clamp(17px, 3.6vh, 24px) - 3rem) / 2);
    }
  }
  /* bg-primary/70 is not in the static Tailwind build, so the disabled
     SPINNING… button had no fill — white on white in the light theme. */
  .draft-slot-machine button[disabled] {
    background: color-mix(in srgb, var(--primary) 55%, var(--card)) !important;
    color: #fff !important;
  }
  .m-reveal.is-landed .slot-reel { justify-content: flex-start; }
  .m-reveal.is-landed .slot-reel__win {
    width: auto; max-width: 100%;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    background: var(--rv-pill, color-mix(in srgb, #2563eb 14%, var(--card)));
  }
  .m-reveal.is-landed .slot-badge {
    color: var(--rv-ink, #2563eb) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  @media (prefers-reduced-motion: reduce) {
    .m-reveal.is-spinning .m-reveal__ring::before { animation: none; }
  }

  /* Fans · Chemistry · Overall as compact tiles with a bar. */
  .draft-screen__inner > .draft-stat-gauges { gap: 0.5rem; }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon label" "value value" "bar bar";
    align-items: center;
    column-gap: 0.375rem;
    row-gap: 0.25rem;
    padding: 0.5rem 0.625rem !important;
  }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge__arc-wrap { grid-area: icon; width: 1.5rem; height: 1.5rem; }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge__svg { display: none; }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge__icon {
    position: static; transform: none;
    width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; border-width: 0;
    font-size: 0.75rem;
  }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge__label {
    grid-area: label; margin: 0; text-align: left;
    font-size: 0.5625rem !important; letter-spacing: 0.1em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge__value {
    grid-area: value; margin: 0; font-size: 1.125rem !important;
  }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge__note { display: none; }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge__bar {
    grid-area: bar; display: block; height: 4px; border-radius: 999px;
    background: var(--card2); overflow: hidden;
  }
  .draft-screen__inner > .draft-stat-gauges .draft-stat-gauge__bar i { display: block; height: 100%; border-radius: inherit; }

  .draft-roster__idle-hint { margin: 0; font-size: 0.6875rem; font-weight: 600; color: var(--muted-fg); }
}

/* ── Utility ───────────────────────────────────────────────── */
.main-gradient { background: var(--bg); }
.stat-bar-fill { transition: width 0.8s cubic-bezier(.4,0,.2,1); }
.card-shadow { box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow2); }

/* ── Locked draft slot ───────────────────────────────────────────────────── */
.locked {
  cursor: default !important;
  pointer-events: none;
}

/* ── Keyframes (must mirror the Tailwind config in index.html) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes spinTick {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.3; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(37,99,235,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(37,99,235,0);    }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ── App header & era picker ───────────────────────────────── */
.app-header-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-header {
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  box-shadow: 0 1px 3px var(--header-shadow);
}

.app-header__inner {
  margin: 0 auto;
  display: flex;
  height: 3rem;
  max-width: 42rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 900;
  color: var(--fg);
  margin: 0;
}

/* The wordmark is a Home button wrapped in the page's h1 (see renderHeader).
   The h1 is a bare wrapper — UA heading margin reset, sized by its button —
   and the button drops the UA chrome so the lockup looks exactly as it did
   when the h1 carried the class itself. */
.app-header__brand-wrap {
  display: flex;
  flex-shrink: 0;
  margin: 0;
}
button.app-header__brand {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.header-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card2);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-fg);
  line-height: 1.2;
  white-space: nowrap;
}

/* `.header-pill` is `display: inline-flex`, and `text-overflow: ellipsis`
   does not apply to a flex container — its text becomes an anonymous flex
   item, so an over-long label was hard-cut mid-word ("Triangle Offe") with no
   ellipsis to signal the truncation. Cap the pill here and let the inner text
   node ellipsize as a block-level flex ITEM instead, which is where
   text-overflow actually works. */
.header-pill--muted {
  max-width: 11rem;
  overflow: hidden;
}

.header-pill--muted > span,
.header-pill--muted > .header-pill__text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Restart / leave confirm — theme via CSS vars so dark mode isn't stuck light */
.confirm-leave-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.confirm-leave-card__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 8px;
}
.confirm-leave-card__body {
  font-size: 14px;
  color: var(--muted-fg);
  margin-bottom: 20px;
}
.confirm-leave-card__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.confirm-leave-card__btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.confirm-leave-card__btn--cancel {
  background: var(--card2);
  border: 1.5px solid var(--border);
  color: var(--fg);
}
.confirm-leave-card__btn--confirm {
  background: var(--primary-fill);
  border: none;
  color: var(--primary-fill-fg);
}

.header-pill--icon {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  /* `.header-pill` centres on the cross axis but leaves the main axis at
     flex-start, which is right for the text pills (the coach name truncates
     from the end). An icon pill has one glyph and a fixed width from 1024px
     up — css/desktop.css gives it width:34px and padding:0 — so flex-start
     pins the glyph to the left edge with all 18px of slack on the right.
     Centre it explicitly; below 1024px the box is shrink-to-fit so this
     changes nothing there. */
  justify-content: center;
}

.header-pill--icon:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Main Menu at the right end of the bar (renderHeader's `menuBack`), in
   place of the action pills. Below 640px it shrinks to the arrow;
   aria-label keeps the name. */
.header-pill--back {
  gap: 0.375rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.header-pill--back:hover {
  border-color: var(--primary);
  color: var(--primary);
}
@media (max-width: 639px) {
  .header-pill--back { padding: 0.25rem 0.5rem; }
  .header-pill__back-label { display: none; }
}

/* Roster place targets are <button>s for a11y — strip UA chrome */
button.draft-roster-slot {
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.header-pill--interactive {
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.header-pill--interactive:hover,
.header-pill--open {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--card2);
}

.header-pill__chev {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.header-pill__chev--open {
  transform: rotate(180deg);
}

.header-pill__lock {
  margin-left: 0.125rem;
  font-size: 10px;
}

.mobile-restart-bar {
  display: none;
}

/* Mobile: horizontally scroll header actions so every control stays reachable */
@media (max-width: 639px) {
  .app-header__inner {
    gap: 0.5rem;
    padding: 0 0.5rem 0 0.75rem;
    overflow: hidden;
  }

  .app-header__brand {
    flex-shrink: 0;
    min-width: 0;
    font-size: 0.875rem;
  }

  .app-header__actions {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-end;
    flex-wrap: nowrap;
    padding: 0.2rem 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .app-header__actions::-webkit-scrollbar {
    display: none;
  }

  .app-header__actions > * {
    flex-shrink: 0;
  }

  .header-pill--restart {
    display: none !important;
  }

  .header-pill--muted {
    max-width: 8rem;
  }

  .mobile-restart-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.2rem 0.75rem 0.35rem;
    border-bottom: 1px solid var(--border);
    background: var(--header-bg);
  }

  /* …except on the drafting screen, which carries no Restart on mobile.
     `.header-pill--restart` is already hidden at this width above, so this
     removes the last one. Scoped to `.draft-screen` (the Classic draft root)
     so the 1v1 board and every other screen keep theirs. */
  .draft-screen .mobile-restart-bar {
    display: none;
  }

  .mobile-restart-bar__btn {
    font-size: 11px;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--card2);
    color: var(--muted-fg);
    cursor: pointer;
    line-height: 1.2;
  }

  .era-picker-anchor {
    top: 4.35rem;
  }
}

.era-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--overlay);
  animation: fadeIn 0.15s ease-out;
}

.era-picker-anchor {
  position: fixed;
  z-index: 60;
  top: 3.25rem;
  right: max(1rem, calc(50% - 21rem + 1rem));
  width: min(17.5rem, calc(100vw - 2rem));
  animation: eraDropIn 0.18s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes eraDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.era-picker-panel {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 12px 40px var(--shadow), 0 2px 8px var(--shadow2);
}

.era-picker-panel__head {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
}

.era-picker-panel__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
}

.era-picker-panel__hint {
  margin-top: 0.125rem;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}

.era-picker-panel__list {
  max-height: 16.5rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.era-picker-panel__divider {
  margin: 0.25rem 0.75rem;
  border-top: 1px solid var(--border-light);
}

.era-picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  row-gap: 0.0625rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.era-picker-row:hover {
  background: var(--card3);
}

.era-picker-row--active {
  background: var(--card2);
}

.era-picker-row--active:hover {
  background: var(--card2);
}

.era-picker-row__label {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.25;
}

.era-picker-row--active .era-picker-row__label {
  color: var(--primary);
}

.era-picker-row__sub {
  grid-column: 1;
  grid-row: 2;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.era-picker-row__check {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 1rem;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  text-align: center;
}

/* ── Playoff bracket tree ───────────────────────────────────── */
.playoff-bracket-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
}

.playoff-bracket {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 34rem;
  min-height: 17rem;
  padding: 0.25rem 0;
}

.playoff-bracket__col {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 5.75rem;
  padding: 0 0.5rem;
}

.playoff-bracket__col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.5rem;
  right: 0;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
  pointer-events: none;
}

.playoff-bracket__round-label {
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.375rem;
  flex-shrink: 0;
}

.playoff-bracket__stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.35rem;
}

.playoff-bracket__stack--sf {
  justify-content: center;
  gap: 3.5rem;
  padding: 1.25rem 0;
}

.playoff-bracket__stack--f {
  justify-content: center;
}

/* The IPL ladder (02 §10): four one-match stages and the champion, side by
   side. Each stage column centres its single matchup; the note beneath it
   says who won and by how much. */
.playoff-bracket--ladder {
  min-width: 36rem;
  min-height: 11rem;
}
.playoff-bracket__stack--ladder {
  justify-content: center;
}
.playoff-bracket__col--current .playoff-bracket__round-label {
  color: var(--primary);
}
.bracket-matchup__note {
  margin: 0.3rem 0 0;
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}

.bracket-matchup-wrap {
  position: relative;
}

/* Horizontal connectors into next round */
.playoff-bracket__col--qf .bracket-matchup-wrap::after,
.playoff-bracket__col--sf .bracket-matchup-wrap::after {
  content: '';
  position: absolute;
  right: -0.5rem;
  top: 50%;
  width: 0.5rem;
  height: 2px;
  background: #94a3b8;
  transform: translateY(-50%);
  z-index: 2;
}

/* Vertical connectors on semifinal side */
.playoff-bracket__col--sf .bracket-matchup-wrap--sf0::before,
.playoff-bracket__col--sf .bracket-matchup-wrap--sf1::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  width: 2px;
  background: #94a3b8;
  z-index: 1;
}

.playoff-bracket__col--sf .bracket-matchup-wrap--sf0::before {
  top: -2.75rem;
  height: calc(50% + 2.75rem);
}

.playoff-bracket__col--sf .bracket-matchup-wrap--sf1::before {
  bottom: -2.75rem;
  height: calc(50% + 2.75rem);
}

.playoff-bracket__col--f .bracket-matchup-wrap--f::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: #94a3b8;
}

.bracket-matchup {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 1px 2px var(--shadow2);
}

.bracket-matchup--live {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.bracket-team {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid var(--border-light);
  min-height: 1.65rem;
}

.bracket-team:last-child {
  border-bottom: none;
}

.bracket-team__seed {
  width: 0.9rem;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}

.bracket-team__name {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.bracket-team__score {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
}

.bracket-team--player {
  background: var(--card2);
}

.bracket-team--player .bracket-team__name {
  color: var(--primary);
  font-weight: 700;
}

.bracket-team--won {
  background: var(--surface-green);
}

.bracket-team--won .bracket-team__name {
  color: var(--ink-green);
  font-weight: 700;
}

.bracket-team--won .bracket-team__score {
  color: var(--ink-green-mid);
}

.bracket-team--lost {
  opacity: 0.42;
}

.bracket-team--tbd {
  background: var(--card3);
}

.bracket-team--tbd .bracket-team__name {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}

.bracket-champion {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 4rem;
  margin-top: 0.25rem;
  padding: 0.75rem 0.5rem;
  border: 2px dashed var(--border);
  border-radius: 8px;
  background: var(--card3);
}

.bracket-champion--filled {
  border-style: solid;
  border-color: #fbbf24;
  background: linear-gradient(180deg, var(--surface-amber) 0%, var(--surface-amber-hi) 100%);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

.bracket-champion__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.bracket-champion__name {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-amber-deep);
  text-align: center;
  line-height: 1.25;
  max-width: 5rem;
  word-break: break-word;
}

.bracket-champion__placeholder {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--muted);
}

/* ── Courtside broadcast — Results hero & Playoffs title band ──
   The results and playoff screens share one identity: a dark outfield
   gradient band (green to pitch tan) with orange (--acc) as the only live
   accent. Every color
   here resolves from a theme token so both screens follow the light/dark
   toggle without a single JS branch. */

.courtside-hero {
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--hardwood-from), var(--hardwood-to));
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
  color: #fff;
  padding: 18px 18px 16px;
}

.courtside-hero--perfect {
  box-shadow: 0 0 0 2px #fde68a, 0 10px 30px rgba(217, 119, 6, 0.3);
}

.courtside-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.courtside-hero__eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.courtside-hero__tier {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--acc-soft);
  color: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
  white-space: nowrap;
}

.courtside-hero__body {
  display: flex;
  align-items: center;
  gap: 16px;
}

.courtside-hero__col {
  flex: 1;
  min-width: 0;
}

.courtside-hero__sub {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.courtside-hero__sub b {
  color: var(--acc);
  font-weight: 800;
}

/* Gold grade badge — a 3px gradient ring around a dark disc. */
.grade-badge {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--gold-from), var(--gold-to));
}

.grade-badge__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(11, 18, 32, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* line-height:1 collapses the two lines onto each other without the gap. */
  line-height: 1;
  gap: 3px;
}

.grade-badge__letter {
  font-size: 40px;
  font-weight: 800;
  color: #fde68a;
}

/* Two-character grades ("A+") need to come down a step to stay in the ring. */
.grade-badge__letter--wide {
  font-size: 31px;
  letter-spacing: -0.02em;
}

.grade-badge__label {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.65);
}

.courtside-record {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}

.courtside-record__w {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.courtside-record__dash {
  font-size: 26px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}

.courtside-record__l {
  font-size: 44px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

/* 82 win/loss pips — the whole season at a glance, wraps on narrow screens. */
.season-strip {
  margin-top: 14px;
}

.season-strip__pips {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5px;
}

.season-strip__pip {
  width: 3px;
  height: 15px;
  border-radius: 1px;
  background: var(--pip-win);
}

.season-strip__pip--loss {
  background: var(--pip-loss);
}

.season-strip__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
}

.season-strip__streak {
  font-size: 10px;
  font-weight: 800;
  color: var(--acc);
}

.season-strip__count {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

/* Quick tiles — OVR / CHEM / FANS / COACH */
.quick-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.quick-tile {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 10px 6px;
  text-align: center;
}

.quick-tile__label {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted-fg);
}

.quick-tile__value {
  margin: 1px 0 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}

.quick-tile__value small {
  font-size: 11px;
}

/* Primary CTA — "Enter the Playoffs". Uses the blue --primary system (not
   --acc orange) so it reads as the app's normal primary action rather than
   competing with the courtside broadcast orange accent used elsewhere on
   this screen (hero tier badge, streak text, fans/coach tiles, etc). */
.courtside-cta {
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: var(--acc);
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
  transition: transform 0.15s ease, background 0.15s ease;
}

.courtside-cta:hover {
  background: var(--acc-hi);
}

.courtside-cta__icon {
  font-size: 26px;
  flex-shrink: 0;
}

.courtside-cta__title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--on-acc);
}

.courtside-cta__sub {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--on-acc);
  opacity: 0.78;
}

.courtside-cta__chev {
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

/* Locked variant — under 20 wins there is no bracket to enter. */
.courtside-cta--locked {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: default;
}

.courtside-cta--locked:hover {
  transform: none;
  box-shadow: none;
}

.courtside-cta--locked .courtside-cta__title {
  color: var(--fg);
}

.courtside-cta--locked .courtside-cta__sub {
  color: var(--muted-fg);
}

/* Loss autopsy — slim red strip instead of a full card. */
.autopsy-strip {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--autopsy-border);
  background: var(--surface-red);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-family: inherit;
}

button.autopsy-strip {
  cursor: pointer;
  transition: border-color 0.15s ease;
}

button.autopsy-strip:hover {
  border-color: var(--autopsy-text);
}

/* Real diagnoses run longer than the two lines the mock had, so the icon
   anchors to the title rather than floating in the middle of the block. */
.autopsy-strip__icon {
  font-size: 20px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}

.autopsy-strip__body {
  flex: 1;
  min-width: 0;
}

.autopsy-strip__title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--autopsy-text);
}

.autopsy-strip__fix {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--muted-fg);
}

.autopsy-strip__detail {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted-fg);
}

.autopsy-strip__cta {
  font-size: 11px;
  font-weight: 800;
  color: var(--autopsy-text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 82-0 has no losses to dissect — the same strip in celebration gold. */
.autopsy-strip--gold {
  border-color: var(--amber-border);
  background: var(--surface-cream);
}

.autopsy-strip--gold .autopsy-strip__title {
  color: var(--amber-text);
}

.autopsy-strip--gold .autopsy-strip__fix {
  color: var(--amber-strong);
}

/* Season leaders — compact single-line rows. */
.leaders-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.leaders-row__icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.leaders-row__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaders-row__val {
  font-size: 17px;
  font-weight: 800;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.leaders-row__key {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted-fg);
  width: 26px;
  flex-shrink: 0;
}

/* Playoffs broadcast title band */
.broadcast-band {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--hardwood-from), var(--hardwood-to));
  color: #fff;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
}

.broadcast-band__eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acc);
}

.broadcast-band__title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.broadcast-band__sub {
  margin: 5px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.broadcast-band__sub b {
  color: var(--acc);
  font-weight: 800;
}

.bracket-hint {
  margin: 8px 2px 0;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}

/* The bracket is 34rem wide and stops overflowing once the card can hold it,
   so the swipe affordance retires instead of pointing at nothing. */
@media (min-width: 640px) {
  .bracket-hint {
    display: none;
  }
}

/* Courtside buttons — .btn-courtside (playoffs simulate/continue) is a blue
   --primary fill. .btn-courtside-outline is shared with results' "Share
   Result" button and stays orange there; the playoffs screen opts into blue
   via the narrow .btn-courtside-outline--playoffs modifier below instead of
   recoloring the shared class. .btn-neutral-outline stays neutral. */
.btn-courtside,
.btn-courtside-outline,
.btn-neutral-outline {
  width: 100%;
  border-radius: 12px;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-courtside {
  padding: 14px 0;
  border: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--on-acc);
  background: var(--acc);
  box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
}

.btn-courtside:hover:not(:disabled) {
  background: var(--acc-hi);
}

.btn-courtside-outline {
  padding: 12px 0;
  border: 1px solid var(--acc);
  font-size: 13px;
  font-weight: 700;
  color: var(--acc);
  background: var(--card);
}

.btn-courtside-outline:hover:not(:disabled) {
  background: var(--acc-soft);
}

/* Playoffs-only override — "Simulate Entire Playoffs" reuses the outline
   button's structure but switches to the blue primary system. Kept as a
   separate modifier (rather than recoloring .btn-courtside-outline itself)
   because that shared class is also Share Result's orange outline, which is
   unrelated to the playoffs CTA de-orange ask. */
.btn-courtside-outline--playoffs {
  border: 2px solid var(--fg);
  color: var(--fg);
}

.btn-courtside-outline--playoffs:hover:not(:disabled) {
  background: var(--card2);
}

/* The one action colour. Any button carrying .btn-action is the screen's
   main button: orange fill, dark ink, navy ring and edge. The glow variant
   keeps the ring while it pulses (Tailwind's pulseGlow would otherwise
   replace the box-shadow with its blue halo). */
.btn-action {
  background: var(--acc);
  color: var(--on-acc);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
}
.btn-action:hover:not(:disabled) { background: var(--acc-hi); }
.btn-action.animate-pulse-glow { animation-name: pulseGlowAction; }
@keyframes pulseGlowAction {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge), 0 0 0 0 var(--acc-soft); }
  50%      { box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge), 0 0 0 8px transparent; }
}

.btn-neutral-outline {
  padding: 12px 0;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  background: var(--card);
}

.btn-neutral-outline:hover:not(:disabled) {
  border-color: var(--acc);
  background: var(--card2);
}

.btn-courtside:disabled,
.btn-courtside-outline:disabled,
.btn-neutral-outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Orange bracket override — the playoff screen swaps the bracket's default
   blue player/live accents for courtside orange. Scoped to .brk-o so the
   bracket component keeps its blue defaults anywhere else it is used. */
.brk-o .bracket-team--player {
  background: var(--surface-amber);
}

.brk-o .bracket-team--player .bracket-team__name {
  color: var(--acc);
}

.brk-o .bracket-matchup--live {
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 0 0 2px var(--acc-soft);
}

/* Narrow phones: the 74px badge + 64px record overflow below ~360px. */
@media (max-width: 360px) {
  .courtside-hero {
    padding: 16px 14px 14px;
  }

  .grade-badge {
    width: 62px;
    height: 62px;
  }

  .grade-badge__letter {
    font-size: 33px;
  }

  .grade-badge__letter--wide {
    font-size: 26px;
  }

  .courtside-record__w {
    font-size: 52px;
  }

  .courtside-record__l {
    font-size: 36px;
  }

  .broadcast-band__title {
    font-size: 26px;
  }
}

/* ── Championship ceremony ─────────────────────────────────────
   The title screen (renderChampionship in js/ui/render/playoffs.js). The
   hero is the playoff screens' night band turned gold. Like .courtside-hero
   and .broadcast-band it stays dark in both themes, so its golds and whites
   are fixed colours; the cards under it read the theme tokens. This is the
   phone and tablet layout; css/desktop.css composes the same blocks into
   one page. */
html[data-page="game"] #app > .main-gradient > main > .champ {
  max-width: min(100%, 34rem);
}

.champ {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.champ-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  padding: 18px 16px 16px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(85% 55% at 50% 22%, rgba(250, 204, 21, 0.2), transparent 72%),
    linear-gradient(165deg, var(--hardwood-from), var(--hardwood-to));
  box-shadow: 0 10px 28px rgba(11, 26, 58, 0.28);
}

.champ-hero > * {
  position: relative;
  z-index: 1;
}

.champ-hero > .champ-hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.champ-bit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: rotate(var(--turn, 0deg));
  opacity: 0.8;
}

.champ-bit--bar {
  width: 4px;
  height: 12px;
  border-radius: 2px;
}

.champ-bit--gold   { background: #fbbf24; }
.champ-bit--white  { background: #ffffff; opacity: 0.6; }
.champ-bit--orange { background: #fb923c; }
.champ-bit--blue   { background: #60a5fa; }
.champ-bit--wide   { display: none; }

/* The trophy and the light behind it travel together, so the rays stay
   centred on the cup whether the hero stacks (phone) or sits it beside the
   title (desktop). */
.champ-hero__mark {
  width: 74px;
  margin: 0 auto 6px;
}

.champ-hero__rays {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(253, 230, 138, 0.15) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.45) 42%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.45) 42%, transparent 100%);
  animation: champRays 90s linear infinite;
  pointer-events: none;
}

.champ-trophy {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px rgba(251, 191, 36, 0.38));
}

.champ-hero__eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fcd34d;
  overflow-wrap: anywhere;
}

.champ-hero__title {
  margin: 0;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.champ-hero__title-top {
  display: block;
  font-size: 19px;
  letter-spacing: 0.42em;
  /* Letter-spacing trails the last letter; pull it back so the word centres. */
  margin-right: -0.42em;
  color: #fff7d6;
}

.champ-hero__title-main {
  display: block;
  margin-top: -1px;
  font-size: clamp(46px, 15vw, 64px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: #fcd34d;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .champ-hero__title-main {
    background: linear-gradient(180deg, #fffbea 0%, #fde68a 38%, #f5b82e 64%, #dd920e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.champ-hero__sub {
  margin: 10px auto 0;
  max-width: 30em;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
}

.champ-hero__sub b {
  color: #fff;
  font-weight: 800;
}

.champ-hero__feat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #1c1206;
  background: linear-gradient(180deg, #fde68a, #f5b82e);
}

.champ-hero__feat::before {
  content: '★';
}

.champ-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 0;
}

.champ-stat {
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 7px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.07);
}

.champ-stat dt {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.champ-stat dd {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.champ-card {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 12px 12px 10px;
  box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow2);
}

.champ-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.champ-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.champ-card__head .champ-label {
  margin: 0;
}

.champ-road__list,
.champ-five__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.champ-road__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.champ-round {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--card2);
}

.champ-round__band {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.champ-round__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.champ-round__name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.champ-round__opp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  color: var(--fg);
}

.champ-round__opp small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.champ-round__pips {
  display: flex;
  gap: 2px;
}

.champ-round__pip {
  width: 6px;
  height: 16px;
  border-radius: 2px;
  background: var(--pip-win);
}

/* A loss is an empty pip, not just a different colour: the dark theme's
   --pip-loss all but vanishes on the gold Finals row, and the shape still
   reads without colour. */
.champ-round__pip--loss {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-red-mid);
}

.champ-round__score {
  min-width: 2.1em;
  text-align: right;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.champ-round--finals {
  border-color: var(--line-amber-strong);
  background: linear-gradient(90deg, var(--surface-amber-hi), var(--surface-amber));
}

.champ-round--finals .champ-round__name,
.champ-round--finals .champ-round__score {
  color: var(--amber-text);
}

.champ-xp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-fg);
}

.champ-xp b {
  color: var(--fg);
}

.champ-xp__gain {
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--amber-border);
  background: var(--amber-badge-bg);
  font-size: 15px;
  font-weight: 800;
  color: var(--amber-text);
}

.champ-xp__unlock {
  flex-basis: 100%;
  font-weight: 700;
  color: var(--amber-text);
}

.champ-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.champ-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.champ-btn--share {
  grid-column: 1 / -1;
  padding: 15px 0;
  font-size: 16px;
}

.champ-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.champ-player {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border-light);
}

.champ-player:first-child {
  border-top: 0;
  padding-top: 0;
}

.champ-player__pos {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border-radius: 7px;
  background: var(--primary-soft);
  font-size: 11px;
  font-weight: 900;
  color: var(--primary);
}

.champ-player__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.champ-player__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}

.champ-player__meta {
  font-size: 11px;
  color: var(--muted-fg);
}

.champ-player__ovr {
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.champ-player__ovr small {
  font-size: 9px;
}

.champ-five__coach {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-fg);
}

/* The entrance: the trophy rises, then the title, the numbers, the road and
   the actions follow it in. Only on the first render of a title (.champ--intro,
   set by renderChampionship), so a re-render never replays it. */
.champ--intro .champ-hero__mark { animation: champRise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.champ--intro .champ-hero__text { animation: champIn 0.5s ease-out 0.15s both; }
.champ--intro .champ-stats      { animation: champIn 0.5s ease-out 0.28s both; }
.champ--intro .champ-road       { animation: champIn 0.45s ease-out 0.38s both; }
.champ--intro .champ-xp,
.champ--intro .champ-actions    { animation: champIn 0.45s ease-out 0.48s both; }
.champ--intro .champ-five       { animation: champIn 0.45s ease-out 0.56s both; }

@keyframes champRise {
  from { opacity: 0; transform: translateY(18px) scale(0.84); }
  to   { opacity: 1; transform: none; }
}

@keyframes champIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes champRays {
  to { transform: rotate(1turn); }
}

/* The global reduced-motion rule shortens animations but keeps their delays,
   which would hold the screen blank for half a second; drop them outright. */
@media (prefers-reduced-motion: reduce) {
  .champ *,
  .champ *::before {
    animation: none !important;
  }
}

@media (max-width: 360px) {
  .champ-hero {
    padding: 16px 12px 14px;
  }

  .champ-stat dd {
    font-size: 21px;
  }

  .champ-stat dt {
    letter-spacing: 0.06em;
  }

  .champ-round {
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .champ-round__opp small {
    display: none;
  }
}

/* Short phones (an iPhone SE is 667px tall): a smaller trophy keeps the
   actions on the first screen. */
@media (max-width: 1023px) and (max-height: 700px) {
  .champ-hero__mark {
    width: 58px;
  }
}

/* ── Drafting screen (desktop defaults) ─────────────────────── */
.draft-board-scroll {
  height: 24vh;
}

.draft-board-scroll--shell {
  min-height: 10rem;
  border: 1px solid var(--border);
  background: var(--card);
}

.draft-slot-machine__cell {
  min-height: 5.5rem;
}

/* ── Drafting screen — mobile one-screen layout ─────────────── */
@media (max-width: 639px) {
  .draft-screen {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .draft-screen__main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .draft-screen__inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.3rem !important;
  }

  .draft-cold-open {
    display: none;
  }

  .draft-round-bar {
    flex-shrink: 0;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0.25rem !important;
  }

  .draft-round-bar .text-sm {
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  .draft-round-bar__meta {
    display: none;
  }

  .draft-coach-chip {
    flex-shrink: 0;
  }

  .draft-coach-chip .rounded-xl {
    padding: 0.3rem 0.5rem !important;
  }

  .draft-coach-chip .text-xs {
    font-size: 0.625rem !important;
  }

  .draft-coach-chip .text-sm {
    font-size: 0.6875rem !important;
  }

  .draft-coach-chip .text-\[10px\] {
    font-size: 0.5625rem !important;
  }

  .draft-slot-machine {
    flex-shrink: 0;
    padding: 0.5rem !important;
  }

  .draft-slot-machine .text-xs {
    font-size: 0.5625rem !important;
    margin-bottom: 0.25rem !important;
  }

  .draft-slot-machine__grid {
    gap: 0.375rem !important;
    margin-bottom: 0.375rem !important;
  }

  .draft-slot-machine__cell {
    min-height: 3.25rem !important;
    padding: 0.375rem !important;
  }

  .draft-slot-machine__cell .text-xl {
    font-size: 0.875rem !important;
  }

  .draft-slot-machine__cell .text-\[10px\] {
    font-size: 0.5rem !important;
    margin-bottom: 0.125rem !important;
  }

  .draft-slot-machine__cell .mt-2 {
    margin-top: 0.125rem !important;
    font-size: 0.5rem !important;
    padding: 0.0625rem 0.375rem !important;
  }

  .draft-slot-machine [data-action="spin"],
  .draft-slot-machine button[disabled] {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.04em;
  }

  .draft-slot-machine > p.text-center {
    font-size: 0.5625rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2;
  }

  .draft-board-wrap {
    flex: 0 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .draft-board-wrap__head {
    margin-bottom: 0.2rem !important;
    flex-shrink: 0;
  }

  .draft-board-wrap__head .text-xs {
    font-size: 0.5625rem !important;
  }

  .draft-board-scroll {
    flex: 0 0 auto;
    height: 24vh;
    -webkit-overflow-scrolling: touch;
  }

  .draft-board-scroll .grid {
    gap: 0.22rem !important;
  }

  .draft-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .draft-board-scroll {
    border: 1px solid var(--border);
    background: var(--card);
  }

  .draft-board-scroll--shell {
    min-height: 4.25rem;
  }

  .draft-card {
    border-radius: 0.5rem !important;
  }

  .draft-card .draft-card-body {
    padding: 0.22rem 0.28rem !important;
  }

  .draft-card-body--blind {
    min-height: 0 !important;
    padding: 0.28rem !important;
  }

  .draft-card__head {
    margin-bottom: 0.1rem !important;
    gap: 0.2rem !important;
  }

  .draft-card__pos {
    font-size: 0.6875rem !important;
    padding: 0.04rem 0.2rem !important;
  }

  .draft-card__arch span {
    font-size: 0.6875rem !important;
    padding: 0.04rem 0.2rem !important;
  }

  .draft-card__name {
    font-size: 0.875rem !important;
    margin-bottom: 0.1rem !important;
    line-height: 1.1 !important;
  }

  .draft-card__stats {
    gap: 0.1rem 0.2rem !important;
  }

  .draft-card__stats span {
    font-size: 0.75rem !important;
  }

  .draft-card-traits {
    display: none !important;
  }

  .draft-card__actions {
    padding: 0 0.22rem 0.22rem !important;
  }

  .draft-card-btn {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.15;
    border-radius: 0.35rem !important;
  }

  .draft-roster {
    flex-shrink: 0;
  }

  .draft-roster__head {
    margin-bottom: 0.2rem !important;
  }

  .draft-roster__head .text-xs {
    font-size: 0.5625rem !important;
  }

  .draft-roster__place-hint {
    display: none;
  }

  .draft-roster .grid {
    gap: 0.2rem !important;
  }

  .draft-roster-slot {
    padding: 0.2rem !important;
    gap: 0.0625rem !important;
  }

  .draft-roster-slot .text-\[10px\] {
    font-size: 0.5rem !important;
  }

  .draft-roster-slot .text-\[11px\] {
    font-size: 0.5625rem !important;
  }

  .draft-roster-slot .text-xs {
    font-size: 0.5625rem !important;
  }
}

@media (min-width: 640px) {
  .playoff-bracket {
    min-width: 38rem;
    min-height: 19rem;
  }

  .bracket-team__name {
    font-size: 11px;
  }

  .playoff-bracket__col {
    min-width: 6.5rem;
  }
}

/* ── Live stat gauges (Fans + Chemistry) — drafting screen, every width ───
   2K-style radial arcs, the drafting screen's only live meters. See
   renderStatGauges() in js/ui/render.js. Sizing here is the mobile/tablet
   baseline; the desktop block further down scales the arc up. */
.cond {
  font-family: 'Barlow Condensed', 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
}

.draft-stat-gauges {
  display: flex;
  gap: 0.5625rem;
}

/* One size knob per breakpoint. The arc SVG is viewBox="0 0 100 84" with its
   circle centred at (50,50), so the badge's offset is derived from the height
   rather than hand-tuned — change --gauge-h and the badge stays centred. */
.draft-stat-gauge {
  --gauge-w: 96px;
  --gauge-h: 82px;
  --gauge-badge: 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.625rem 0 0.5625rem;
}

/* Only the desktop Team Status rows draw it (css/desktop.css). */
.draft-stat-gauge__bar { display: none; }

.draft-stat-gauge__arc-wrap {
  position: relative;
  width: var(--gauge-w);
  height: var(--gauge-h);
}

.draft-stat-gauge__svg {
  width: var(--gauge-w);
  height: var(--gauge-h);
  overflow: visible;
}

.draft-stat-gauge__icon {
  position: absolute;
  top: calc(var(--gauge-h) / 84 * 50 - var(--gauge-badge) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--gauge-badge);
  height: var(--gauge-badge);
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--gauge-badge) * 0.44);
}

.draft-stat-gauge__value {
  margin-top: 1px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.draft-stat-gauge__suffix {
  font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted-fg);
}

.draft-stat-gauge__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-top: 3px;
}

.draft-stat-gauge__note {
  font-size: 9px;
  color: var(--muted-fg);
  text-align: center;
  line-height: 1.3;
  margin: 4px 10px 0;
}

/* Dark mode toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--muted-fg);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}

.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Connector lines in bracket */

/* ── Results screen — block order ─────────────────────────────
   The courtside design reads hero → quick tiles → signal chips → playoff
   CTA → everything else, at every width. The hero group shares one order
   value so its three siblings stay together in DOM order. */
.results-layout {
  display: flex;
  flex-direction: column;
}

/* The .results-col wrappers exist only so the desktop composition can give
   each column its own flow (see css/desktop.css). Here they are erased with
   `display: contents`, which promotes the blocks inside back to direct flex
   items of .results-layout — so the order values below still sort the whole
   screen as one column. Every rule is therefore written twice: once for a
   block that is a direct child, once for one inside a wrapper. */
.results-col {
  display: contents;
}

.results-layout > *,
.results-col > * {
  order: 40;
}

.results-layout > .results-block--hero,
.results-col > .results-block--hero {
  order: 10;
}

/* "Enter the Playoffs" is the point of this screen — it outranks the
   save-your-run card on phones too, where the card used to come first. */
.results-layout > .results-block--playoffs,
.results-col > .results-block--playoffs {
  order: 20;
}

.results-layout > .results-block--save,
.results-col > .results-block--save {
  order: 30;
}

/* Legends-collected is a footnote to the run, so on one column it stays last
   — after the action buttons. It lives in the desktop left column now (see
   renderResults), which would otherwise float it to the top of the order-40
   group here; this keeps the phone sequence exactly as it was. */
.results-layout > .dk-res-legends,
.results-col > .dk-res-legends {
  order: 50;
}

/* ── Menu footer ───────────────────────────────────────────────────────────
   The three site links, rendered on the mode-select screen only (see
   renderFooter in js/ui/render.js). Plain CSS rather than Tailwind classes,
   same as the SEO block below, so the footer needs no tailwind.css
   rebuild.

   Sized as real links rather than a legal footnote: this row is the only
   visible route from the game to the guide, the roster index and the terms,
   so it has to be readable and tappable. The row is a flex line so the
   button and the two anchors share one baseline — a <button> and an <a> do
   not agree on that by default. The shared hit height is set in
   css/responsive.css, beside the tap floor it is derived from.

   It stays one line at every width, down to a 320px phone. Wrapping was the
   alternative and it cost three stacked rows and 110px of a screen whose
   mode cards want that height far more than the footer does; the labels
   shorten instead (see .site-footer__short below).

   css/desktop.css re-sizes and re-colours it for the desktop palette from
   1024px up. */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 3px 0;
  /* A footer link has to be legible without competing with the mode cards
     above it. The shared --muted-fg is right for that in light mode but is
     near-white in dark (#e2e8f0, a shade off body text), so the recessive
     pair is set here instead — the same two values css/desktop.css picked
     for --dk-dim, so both files agree on what "dim" means. */
  --footer-link: #64748b;
  --footer-sep:  #cbd5e1;
}
.site-footer__links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 2px;
  max-width: 760px;
  margin: 0 auto;
}
.site-footer__link {
  display: inline-flex;
  align-items: center;
  padding: 4px clamp(4px, 1.6vw, 8px);
  border: 0;
  background: none;
  font-family: inherit;
  /* The row is one line at every width (see .site-footer__links), so the
     type has to give where the viewport does. The ramp only bites below
     ~400px; from there up it sits at its 11.5px ceiling, and desktop.css
     takes it to 12.5px. The 9.5px floor keeps it above the 9px the rest of
     the game treats as the readable minimum. */
  font-size: clamp(9.5px, 2.9vw, 11.5px);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--footer-link);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__sep {
  font-size: inherit;
  line-height: 1;
  color: var(--footer-sep);
  user-select: none;
}

/* Written out in full, the three labels need about 500px of run — more than
   a phone has to give at any size worth reading. So the two long ones carry
   a short form as well (footerLabel in js/ui/render.js) and the row swaps to
   it below 640px, which is the same switch .daily-community-copy makes for
   the same reason. Keeping one line matters more than the extra words: the
   full labels are one tap away in the pages they point at. */
.site-footer__short { display: inline; }
.site-footer__full { display: none; }
@media (min-width: 640px) {
  .site-footer__short { display: none; }
  .site-footer__full { display: inline; }
}

/* ── Static SEO content (index.html below-game guide + daily.html archive) ──
   Plain CSS on the shared theme tokens — deliberately not Tailwind classes,
   so these crawlable pages need no tailwind.css rebuild. */
.seo-content {
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  padding: 48px 20px 40px;
  line-height: 1.65;
}
/* index.html only (.seo-content--crawlable on the #about section): the
   below-game guide/FAQ. It used to be clip-rect'd to a 1px box so mobile
   players could not "fall out" of the game into it — but that left every
   word of it, and every link to teams.html / daily.html, invisible to every
   visitor. Google discounts text no user can see, and CSS-hidden text is
   named in its spam policy; Bing is more forgiving, which is one reason the
   two engines disagreed about this site so sharply. So it is now an
   ordinary expandable panel: closed by default (display:none, same as any
   accordion or tab — content a user can reveal is indexed at full weight),
   and opened as a fixed, scrollable overlay from the "How to play & FAQ"
   footer link (html[data-about="open"], toggled by the inline script beside
   the section in index.html). The game shell's viewport lock is untouched.

   This hiding must never live on the base .seo-content class — daily.html
   reuses that class for its ENTIRE page body, so putting the clip here
   rendered the whole Daily Challenge page blank for anyone arriving from
   search. */
.seo-content--crawlable { display: none; }
html[data-about="open"] .seo-content--crawlable {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 8000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-top: 0;
  padding-top: 56px;
}
.seo-close {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 8001;
  display: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: 700 14px/1 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
html[data-about="open"] .seo-close { display: inline-flex; align-items: center; justify-content: center; }
.seo-inner { max-width: 760px; margin: 0 auto; }
.seo-content h1,
.seo-content h2 {
  font-size: 22px; font-weight: 900; letter-spacing: -0.01em; margin: 0 0 12px;
}
.seo-content h3 { font-size: 16px; font-weight: 700; margin: 28px 0 10px; }
.seo-content p,
.seo-content li { font-size: 14.5px; color: var(--muted-fg); }
.seo-content p strong,
.seo-content li strong { color: var(--fg); }
.seo-content ol { padding-left: 22px; margin: 0 0 8px; }
.seo-content ol li { margin-bottom: 6px; }
.seo-content a { color: var(--primary); font-weight: 600; text-decoration: none; }
.seo-content a:hover { text-decoration: underline; }
.seo-faq details {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); padding: 12px 16px; margin-bottom: 8px;
}
.seo-faq summary {
  font-size: 14.5px; font-weight: 700; color: var(--fg);
  cursor: pointer; list-style-position: inside;
}
.seo-faq details p { margin: 10px 0 2px; }
.seo-links { margin-top: 28px; font-size: 13px; }
/* daily.html challenge cards */
.challenge-card {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); padding: 12px 16px; margin-bottom: 8px;
}
.challenge-card .emoji { font-size: 22px; line-height: 1.2; }
.challenge-card .title { font-size: 14.5px; font-weight: 700; color: var(--fg); margin: 0; }
.challenge-card .desc { font-size: 13.5px; color: var(--muted-fg); margin: 2px 0 0; }
.challenge-card .date { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.seo-cta {
  display: inline-block; margin: 6px 0 24px; padding: 12px 22px;
  border-radius: 12px; background: var(--acc); color: var(--on-acc) !important;
  box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
  font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
}
.seo-cta:hover { text-decoration: none; background: var(--acc-hi); }

/* ── Daily Challenge detail pages (daily/<slug>.html) ──────────────────────
   Generated by scripts/build_challenge_pages.mjs. They reuse .seo-content
   for the shell, so only the page-specific pieces live here. */
.cp-page h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 32px 0 10px;
}
.cp-crumb { font-size: 13px; margin: 0 0 18px; }
.cp-type { font-size: 13.5px; color: var(--muted-fg); margin: 0 0 14px; }
.cp-type b {
  color: var(--primary); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
}
/* Rule breakdown: label above value, one row per constraint. */
.cp-facts { margin: 0 0 8px; display: flex; flex-direction: column; gap: 10px; }
.cp-facts div {
  border-left: 3px solid var(--primary);
  padding: 2px 0 2px 12px;
}
.cp-facts dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted-fg); margin-bottom: 1px;
}
.cp-facts dd { margin: 0; font-size: 14.5px; color: var(--fg); }
.cp-player { margin-top: 4px; }
.cp-stats { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cp-stat {
  font-size: 12.5px; color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}
.cp-stat b { color: var(--fg); font-weight: 700; }
.cp-dates {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cp-dates li {
  font-size: 13px; color: var(--muted-fg); margin: 0;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 11px; background: var(--card);
}

/* ── Franchise & era roster pages (teams/<slug>.html, eras/<decade>.html) ──
   Generated by scripts/build_team_pages.mjs. Same .seo-content / .cp-page
   shell as the daily challenge pages; only the roster-table pieces are new. */
.tp-page h3 {
  font-size: 14.5px; font-weight: 700; color: var(--fg);
  margin: 24px 0 8px;
}
/* Roster tables are wider than a phone. They scroll inside their own box so
   the page body never scrolls sideways. */
.tp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.tp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  white-space: nowrap;
}
.tp-table th,
.tp-table td {
  padding: 7px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.tp-table thead th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted-fg);
  background: var(--card2);
  position: sticky; top: 0;
}
.tp-table tbody tr:last-child td { border-bottom: none; }
.tp-table td { color: var(--muted-fg); }
.tp-table td:first-child { color: var(--fg); font-weight: 600; }
.tp-table .tp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* All-time five: numbered, position-led. */
.tp-five { padding-left: 22px; margin: 0 0 12px; }
.tp-five li { margin-bottom: 7px; color: var(--fg); font-size: 14.5px; }
.tp-five b { color: var(--primary); }
.tp-five__meta { color: var(--muted-fg); font-size: 13.5px; }
.tp-era-link { font-size: 13px; margin: 0 0 4px; }
.tp-links { font-size: 13.5px; line-height: 2; }

/* ── Draft panel scroll affordance ───────────────────────────────────────────
   The game shell is viewport-locked, so .draft-screen__inner is the only
   thing that scrolls — and on a short phone it holds just ~42px of overflow.
   The board therefore ends mid-card-row with nothing to signal that more
   exists, which read as a clipped layout rather than a scroll.

   js/ui/render.js (updateDraftPanelScroll) adds .has-more-below whenever
   content remains past the bottom edge and removes it once the player has
   scrolled to the end, so the fade is never shown over a fully-visible board.

   Implemented as a sticky flex item with a negative margin: the pseudo-element
   is the panel's last flex child, sticks to the bottom of the scrollport, and
   its -28px top margin means it occupies no layout space and cannot push the
   roster it sits over. */
.draft-screen__inner.has-more-below::after {
  content: '';
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  height: 28px;
  margin-top: -28px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* ── Account modal ────────────────────────────────────────────────────────────
   Mounted outside #app on document.body, like the leaderboard modals. Built
   entirely from the existing custom properties — no new tokens, and no
   existing selector touched, so nothing about the rest of the UI moves.

   Sized against --app-h rather than the viewport: the game shell locks
   html/body to 100dvh with overflow hidden, so a modal measured in vh escapes
   its own container on a phone with the keyboard open. The card scrolls
   internally; the page behind it never does. */

#auth-modal-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-top: max(16px, env(safe-area-inset-top));
}
.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.auth-modal {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 380px;
  max-height: calc(var(--app-h, 100dvh) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Fira Sans', sans-serif;
}
.auth-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border-light);
}
.auth-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.auth-modal__x {
  border: none;
  background: none;
  color: var(--muted-fg);
  font-size: 24px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 8px;
}
.auth-modal__x:hover { color: var(--fg); }
.auth-modal__body {
  padding: 16px 20px 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-modal__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-fg);
}
.auth-modal__fine {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-fg);
}
.auth-modal__foot {
  margin: 0;
  padding: 12px 20px 16px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.auth-modal__banner {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-red);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.45;
}
.auth-modal__links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.auth-field__input {
  /* 16px minimum, or iOS zooms the locked viewport on focus and does not
     fully restore it. */
  font-size: 16px;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--input-bg);
  color: var(--fg);
  width: 100%;
}
.auth-field__input:focus {
  outline: none;
  border-color: var(--primary);
}
.auth-field__input--bad { border-color: #dc2626; }
.auth-field__err {
  font-size: 11.5px;
  line-height: 1.4;
  color: #dc2626;
  min-height: 1em;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted-fg);
  cursor: pointer;
}
.auth-check input { width: 16px; height: 16px; accent-color: var(--acc); cursor: pointer; }

.auth-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  width: 100%;
  /* 44px minimum touch target. */
  min-height: 44px;
}
.auth-btn:disabled { opacity: 0.6; cursor: default; }
.auth-btn--primary { background: var(--acc); color: #fff; }
.auth-btn--danger { background: #dc2626; color: #fff; }
.auth-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--fg);
  font-size: 13px;
  min-height: 38px;
  padding: 8px 14px;
  width: auto;
}

.auth-link {
  background: none;
  border: none;
  padding: 6px 2px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
}
.auth-link:hover { text-decoration: underline; }
.auth-link--danger { color: #dc2626; }

.auth-note {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-amber);
  border: 1px solid var(--amber-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.auth-note--ok { background: var(--surface-green); border-color: var(--border); }

/* ── Federated sign-in ──────────────────────────────────────────────────────
   Neutral, bordered buttons rather than each provider's own brand colour: the
   modal already has one filled accent button (the primary action), and a row
   of coloured buttons above it turns the whole panel into competing calls to
   action. The marks carry the branding. */
.auth-providers { display: flex; flex-direction: column; gap: 8px; }
.auth-provider {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  background: var(--card2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  width: 100%;
  /* 44px minimum touch target, same floor as .auth-btn. */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-provider:hover:not(:disabled) { background: var(--card3); border-color: var(--primary); }
.auth-provider:disabled { opacity: 0.6; cursor: default; }
.auth-provider__icon { width: 18px; height: 18px; flex-shrink: 0; }

.auth-providers--sm { gap: 6px; }
.auth-provider--sm {
  font-size: 13px;
  min-height: 38px;
  padding: 8px 12px;
  justify-content: flex-start;
}

/* "or" rule. Rendered only when there is a provider block above it — a lone
   divider over an email form reads as a rendering fault. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-linked {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.auth-linked__title {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-fg);
}
.auth-linked__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.auth-linked__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.auth-linked__on { font-size: 11px; font-weight: 700; color: var(--muted-fg); }

/* The invisible reCAPTCHA phone auth mounts into. It never shows anything —
   the widget solves itself — but the element has to be in the DOM before the
   verifier is constructed, so it is in the markup rather than created on
   demand. Not display:none: reCAPTCHA refuses to attach to a hidden element. */
#auth-recaptcha { width: 100%; height: 0; overflow: hidden; }
/* Google's terms permit hiding the badge above only while this notice is
   shown, so the two travel together. */
.auth-recaptcha-notice a { color: var(--primary); }
.auth-note__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--amber-text);
}
.auth-note__body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-fg);
}

/* Earned rewards. The three display frames are drawn inside the room SVG
   now (see js/ui/rewards.js), so nothing here keys off #app attributes. */
.earned-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--border); border-radius:12px; font-size:11px; color:var(--fg); background:var(--card); }
.earned-badge > span { display:flex; flex-direction:column; gap:2px; }
.earned-badge strong { font-size:11px; font-weight:800; }
.reward-medallion { width:64px; height:72px; flex-shrink:0; filter:drop-shadow(0 3px 3px var(--reward-shadow)); }
.earned-badge .reward-medallion { width:32px; height:36px; filter:none; }
.earned-decor .reward-medallion { display:block; margin:0 auto 8px; }
.reward-room { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--card); }
.reward-room > svg { display:block; width:100%; height:auto; }
.reward-room__title { margin:0; padding:12px 14px; color:var(--fg); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.reward-room__matte { padding:0; background:#e8dfce; }
.reward-room__window { position:relative; aspect-ratio:600 / 330; overflow:hidden; background:#172329; }
.reward-room__window > svg { display:block; width:100%; height:100%; }
.reward-room__window::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px #a19882,inset 0 4px 8px #10232b2e; }
.reward-room-list { margin:0; color:var(--fg); }
.reward-room-list > summary { padding:12px 14px; border-top:1px solid var(--border); font-size:13px; font-weight:700; cursor:pointer; }
.reward-room-list > summary:focus-visible { outline:2px solid var(--primary); outline-offset:-3px; }
.reward-room-labels { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 12px; }
.reward-room-labels span { font-size:11px; line-height:1.3; color:var(--fg); background:var(--card3); border:1px solid var(--border); border-radius:6px; padding:3px 6px; }
.save-warning { padding:12px; border:2px solid #d97706; border-radius:12px; background:var(--card); color:var(--fg); }

.earned-decor { display:flex; flex-wrap:wrap; gap:12px; }
.earned-decor figure { margin:0; padding:12px; min-width:100px; flex:1; text-align:center; color:var(--fg); background:var(--card); border:1px solid var(--border); border-radius:12px; }
.earned-decor figure span { display:block; font-size:32px; }
.earned-decor figcaption { font-size:12px; font-weight:600; line-height:1.3; }
.earned-decor figcaption > span { display:block; margin-top:2px; color:var(--muted-fg); font-size:10px; font-weight:500; }

/* GM Executive Profile: shared reward previews, without changing the unlocks. */
.gm-profile { width:100%; max-width:600px; border:1.5px solid var(--border); border-radius:20px; background:var(--card); color:var(--fg); font-family:'Fira Sans',sans-serif; box-shadow:0 20px 60px var(--shadow); animation:scaleIn .2s ease-out; }
.gm-profile__header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; background:var(--card); border-bottom:1px solid var(--border); border-radius:20px 20px 0 0; }
.gm-profile__header h2 { margin:0; font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:900; line-height:1; text-transform:uppercase; }
.gm-profile__close { width:44px; height:44px; flex-shrink:0; border:1px solid var(--border); border-radius:50%; background:var(--card2); color:var(--muted-fg); cursor:pointer; }
.gm-profile__body { padding:22px 24px; min-width:0; }
.gm-profile__identity { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:22px; }
.gm-shield { position:relative; display:inline-block; width:112px; height:133px; flex-shrink:0; }
.gm-shield > svg { display:block; width:100%; height:100%; }
.gm-eyebrow { margin:0; color:var(--muted-fg); font-size:11px; font-weight:800; line-height:1.4; letter-spacing:.07em; text-transform:uppercase; }
.gm-profile__progress h3 { margin:4px 0 14px; font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:800; line-height:1.1; text-transform:uppercase; overflow-wrap:anywhere; }
.gm-profile__xp { margin:0 0 7px; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.gm-profile__xp > span { color:var(--muted-fg); font-size:12px; font-weight:500; white-space:nowrap; }
.gm-profile__track { height:12px; overflow:hidden; border-radius:6px; background:var(--surface-track); }
.gm-profile__track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--acc-deep),var(--acc)); }
.gm-profile__remaining { margin:7px 0 0; color:var(--muted-fg); font-size:12px; }
.gm-profile__stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; padding-top:18px; border-top:1px solid var(--border); }
.gm-profile__stats > div + div { padding-left:18px; border-left:1px solid var(--border); }
.gm-profile__stats strong { display:block; margin-top:3px; font-size:23px; font-weight:900; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.gm-profile__stats strong > span { color:var(--muted-fg); font-size:16px; }
.gm-milestone { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:12px 18px; padding:18px 0; }
.gm-milestone--next { padding:18px; border:1px solid var(--acc); border-radius:12px; background:var(--surface-orange); }
.gm-milestone--complete { display:block; }
.gm-milestone--complete > p:last-child { margin:8px 0 0; color:var(--muted-fg); font-size:13px; }
.gm-milestone--next .gm-eyebrow,
.gm-milestone--next .gm-milestone__remaining { color:var(--gm-track-accent-ink); }
.gm-milestone h3 { margin:4px 0 6px; font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:800; line-height:1.1; }
.gm-milestone__intro > p:last-child { margin:0; font-size:14px; font-weight:600; line-height:1.45; }
.gm-milestone__previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); align-content:center; gap:12px; min-width:0; }
.gm-milestone figure,
.gm-track__detail figure { margin:0; min-width:0; text-align:center; }
.gm-milestone figcaption,
.gm-track__detail figcaption { font-size:11px; line-height:1.35; overflow-wrap:anywhere; min-width:0; }
.gm-milestone figcaption > span,
.gm-track__detail figcaption > span { display:block; margin-top:6px; color:var(--gm-track-muted); }
.gm-milestone figcaption > strong,
.gm-track__detail figcaption > strong { display:block; margin-top:2px; font-weight:600; }
.gm-milestone__remaining { grid-column:1/-1; margin:0; padding-top:10px; border-top:1px solid var(--border); color:var(--muted-fg); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.reward-preview { display:flex; align-items:center; justify-content:center; width:100%; height:82px; min-width:0; overflow:hidden; }
.reward-preview > svg { display:block; width:100%; height:100%; }
.reward-preview > svg[role="img"] { border-radius:7px; background:#132137; }
.reward-preview > .reward-medallion { width:64px; height:72px; filter:none; }
.reward-title-plaque { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; height:100%; padding:5px; border:3px ridge var(--title-metal); border-radius:4px; color:var(--title-metal); background:linear-gradient(140deg,#26364c,#0f1929); }
.reward-title-plaque > svg { width:34px; height:34px; flex-shrink:0; }
.reward-title-plaque > span { max-width:100%; font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; line-height:1.05; text-align:center; text-transform:uppercase; }
/* The "Rewards" card is a button into the rewards track. */
.gm-rewards-card { width:100%; text-align:left; color:var(--fg); font:inherit; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; }
.gm-rewards-card > .gm-milestone__intro,
.gm-rewards-card > .gm-milestone__previews { display:block; }
.gm-rewards-card > .gm-milestone__previews { display:grid; }
.gm-rewards-card > .gm-milestone__remaining { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gm-rewards-card__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gm-rewards-card__hint { color:var(--gm-track-accent-ink); font-size:12px; font-weight:800; white-space:nowrap; }
.gm-rewards-card__foot { display:flex; justify-content:flex-end; margin-top:10px; }
.gm-rewards-card.gm-milestone--complete > p { margin:8px 0 0; color:var(--muted-fg); font-size:13px; }
.gm-rewards-card:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@media (hover:hover) {
  .gm-rewards-card:hover { box-shadow:0 6px 18px var(--shadow); transform:translateY(-1px); border-color:var(--acc-deep); }
}
/* The rewards track: a horizontal rail of level tiles over a track line, the
   selected level's rewards beneath. The rail is the only thing that scrolls
   sideways; the modal never grows a horizontal scrollbar. */
.gm-track { margin-top:4px; min-width:0; }
/* A re-render inside the open dialog (opening the track, picking a tile) must
   not replay the panel's scale-in — only the first open animates. */
.gm-profile--settled { animation:none; }
.gm-track__head { display:flex; align-items:center; gap:12px; margin-bottom:8px; min-width:0; }
.gm-track__head > p { margin:0; min-width:0; }
.gm-profile .gm-track__back { min-height:44px; white-space:nowrap; flex-shrink:0; padding:8px 16px; border:1px solid var(--gm-track-line); border-radius:999px; background:var(--card2); color:var(--fg); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
/* The viewport clips nothing itself: it only paints the edge fades that say
   "there is more" when no scrollbar is showing. The rail beneath is the one
   horizontally scrolling element in the modal, padded so a focus ring or the
   selected tile's scale is never sliced off by its own overflow. */
.gm-track__viewport { position:relative; min-width:0; }
.gm-track__viewport::before,
.gm-track__viewport::after { content:''; position:absolute; top:0; bottom:8px; width:28px; pointer-events:none; z-index:2; }
.gm-track__viewport::before { left:0; background:linear-gradient(90deg,var(--card),transparent); }
.gm-track__viewport::after { right:0; background:linear-gradient(270deg,var(--card),transparent); }
.gm-track__rail { position:relative; display:flex; align-items:center; gap:10px; padding:28px 18px 20px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:18px; scrollbar-width:thin; scrollbar-color:var(--gm-track-line) transparent; -webkit-overflow-scrolling:touch; min-width:0; }
.gm-track__rail::-webkit-scrollbar { height:6px; }
.gm-track__rail::-webkit-scrollbar-thumb { background:var(--gm-track-line); border-radius:3px; }
.gm-track__rail::-webkit-scrollbar-track { background:transparent; }
.gm-track__line { position:absolute; left:0; right:0; top:calc(50% + 4px); height:2px; background:var(--gm-track-line); pointer-events:none; }
/* Tile states carry a shape as well as a colour: locked = dashed outline on
   the plain surface, earned = solid fill with a corner check, current = the
   caret above and the heavy orange border, milestone (a ten, or 100) = the
   gold fill with a 3px rim. */
.gm-track__tile { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:2px solid var(--gm-track-line); border-radius:10px; background:var(--card2); color:var(--fg); font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; cursor:pointer; scroll-snap-align:center; transition:transform .15s, border-color .15s, background-color .15s; }
.gm-track__tile--reward { border-color:var(--amber-strong); background:var(--surface-amber); color:var(--amber-text); }
.gm-track__tile--milestone { border:3px solid var(--amber-strong); border-radius:12px; background:var(--gold-from); color:var(--gm-gold-ink); box-shadow:0 2px 8px var(--shadow); }
.gm-track__tile--locked { border-style:dashed; background:var(--card2); box-shadow:none; }
.gm-track__tile--locked.gm-track__tile--reward,
.gm-track__tile--locked.gm-track__tile--milestone { color:var(--amber-text); }
.gm-track__tile--earned::after { content:'✓'; position:absolute; right:-5px; bottom:-6px; width:14px; height:14px; border-radius:50%; background:var(--gm-track-ok); color:var(--card); font:800 9px/14px 'Fira Sans',sans-serif; text-align:center; }
.gm-track__tile--current { border:3px solid var(--acc); color:var(--fg); background:var(--surface-orange); }
.gm-track__tile--current.gm-track__tile--milestone { background:var(--gold-from); color:var(--gm-gold-ink); }
.gm-track__tile--selected { transform:scale(1.28); z-index:1; box-shadow:0 0 0 3px var(--acc), 0 4px 12px var(--shadow); }
.gm-track__marker { position:absolute; top:-21px; left:50%; transform:translateX(-50%); color:var(--acc); font-size:12px; line-height:1; }
.gm-profile .gm-track__tile:focus-visible,
.gm-profile .gm-track__back:focus-visible { outline:2px solid var(--primary); outline-offset:6px; }
.gm-track__detail { margin-top:6px; padding:16px; border:1px solid var(--acc); border-radius:12px; background:var(--surface-orange); min-width:0; }
.gm-track__detail > h3 { margin:0 0 4px; font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:800; line-height:1.1; overflow-wrap:anywhere; }
.gm-track__status { margin:0 0 12px; color:var(--gm-track-accent-ink); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.gm-track__status--unlocked { color:var(--gm-track-ok); }
.gm-track__rewards { grid-template-columns:repeat(auto-fit,minmax(110px,160px)); min-width:0; }
.gm-track__none { margin:0; color:var(--gm-track-muted); font-size:13px; }
@media (hover:hover) {
  .gm-track__tile:hover { transform:scale(1.1); border-color:var(--acc); }
  .gm-track__tile--selected:hover { transform:scale(1.28); }
  .gm-profile .gm-track__back:hover { border-color:var(--acc); }
}
.gm-reward-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.gm-reward-row > .reward-preview { width:62px; height:54px; flex-shrink:0; }
.gm-reward-row .reward-title-plaque { border:0; background:none; padding:0; }
.gm-reward-row .reward-title-plaque > svg { width:48px; height:48px; }
.gm-reward-row .reward-title-plaque > span { display:none; }
.gm-reward-row .reward-medallion { width:43px; height:50px; }
.gm-reward-row__name { flex:1; min-width:0; }
.gm-reward-row__name > strong { display:block; font-size:14px; font-weight:700; line-height:1.3; }
.gm-reward-row__name > span { display:block; margin-top:3px; color:var(--muted-fg); font-size:12px; }
.gm-reward-row__level { color:var(--muted-fg); font-size:11px; white-space:nowrap; }
.gm-disclosure { margin-top:12px; color:var(--fg); }
.gm-disclosure > summary { padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card2); font-size:13px; font-weight:700; cursor:pointer; }
.gm-disclosure[open] > summary { margin-bottom:10px; }
.gm-disclosure > .gm-milestone + .gm-milestone { border-top:1px solid var(--border); }
.gm-profile__note { margin:16px 0 0; color:var(--muted-fg); font-size:11px; line-height:1.55; }
.gm-room-titles { margin:14px 0 0; }
.gm-profile button:focus-visible,
.gm-disclosure > summary:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }

/* ── Legends collection ───────────────────────────────────
   The collection screen: a hero with a progress ring and a decade strip,
   then one card per decade whose collected legends are mini player cards
   tinted by OVR tier. Gold means complete. */
.legends-hero,
.legends-decade { padding:18px; border:1px solid var(--border); border-radius:16px; background:var(--card); color:var(--fg); box-shadow:0 1px 3px var(--shadow2); }
.legends-hero { display:grid; grid-template-columns:132px minmax(0,1fr); gap:20px; align-items:center; border-color:var(--legends-ring); }
.legends-hero--done,
.legends-decade--done { border-color:var(--legends-gold); background:linear-gradient(180deg,var(--legends-gold-soft),var(--card) 60%); }
.legends-ring { display:block; }
.legends-ring--done { --legends-ring:var(--legends-gold); }
.legends-ring--lg { width:132px; height:132px; }
.legends-ring--sm { width:44px; height:44px; flex-shrink:0; }
.legends-ring--xs { width:34px; height:34px; }
.legends-hero__ring { position:relative; }
.legends-hero__pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-size:36px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.legends-hero__pct small { font-size:16px; font-weight:800; margin-left:1px; }
.legends-hero__body { min-width:0; }
.legends-eyebrow { margin:0; color:var(--muted-fg); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.legends-hero__count { margin:2px 0 4px; font-family:'Barlow Condensed',sans-serif; font-size:48px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.legends-hero__count strong { color:var(--legends-ring); }
.legends-hero--done .legends-hero__count strong { color:var(--legends-gold); }
.legends-hero__count span { color:var(--muted-fg); font-size:24px; font-weight:600; }
.legends-hero__note { margin:0 0 12px; color:var(--muted-fg); font-size:13px; line-height:1.45; }
.legends-hero__decades { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.legends-hero__decade { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; color:var(--muted-fg); font-size:10px; font-weight:800; }
.legends-hero__decade > span { position:absolute; }
.legends-hero__decade--done { color:var(--legends-gold); }
.legends-hero__decades-label { flex-basis:100%; color:var(--muted-fg); font-size:11px; font-weight:700; }
.legends-decade__head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.legends-decade__title { flex:1; min-width:0; }
.legends-decade__title h2 { margin:0; font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:900; line-height:1; }
.legends-decade__title p { margin:3px 0 0; color:var(--muted-fg); font-size:12px; font-weight:600; }
.legends-decade__count { color:var(--muted-fg); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.legends-decade__count strong { color:var(--fg); font-size:18px; font-weight:900; }
.legends-decade__medal { padding:5px 10px; border:1px solid var(--legends-gold); border-radius:999px; background:var(--legends-gold-soft); color:var(--legends-gold); font-size:11px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.legends-bar { height:6px; overflow:hidden; border-radius:3px; background:var(--legends-track); margin-bottom:12px; }
.legends-bar > span { display:block; height:100%; border-radius:inherit; background:var(--legends-ring); }
.legends-decade--done .legends-bar > span { background:var(--legends-gold); }
.legends-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; list-style:none; margin:0; padding:0; }
.legends-card { position:relative; display:flex; flex-direction:column; gap:2px; min-width:0; min-height:64px; padding:8px 9px 8px 11px; border:1px solid var(--border); border-left:4px solid var(--tier,var(--border)); border-radius:10px; background:var(--card2); color:var(--fg); }
.legends-card__pos { color:var(--muted-fg); font-size:9px; font-weight:800; letter-spacing:.06em; }
.legends-card__ovr { position:absolute; top:7px; right:8px; padding:1px 6px; border:1px solid var(--tier); border-radius:999px; color:var(--tier); font-size:10px; font-weight:900; font-variant-numeric:tabular-nums; }
.legends-card__name { font-size:12px; font-weight:800; line-height:1.2; overflow-wrap:break-word; }
.legends-card__type { color:var(--muted-fg); font-size:10px; line-height:1.2; }
.legends-card__team { color:var(--fg); font-size:10px; font-weight:700; line-height:1.2; }
.legends-card--locked,
.legends-card--more { align-items:center; justify-content:center; border-style:dashed; border-left-width:1px; background:transparent; color:var(--muted-fg); text-align:center; }
.legends-card__lock { font-size:20px; font-weight:900; opacity:.45; }
.legends-card--more strong { color:var(--fg); font-size:16px; font-weight:900; }
.legends-card--more span { font-size:10px; font-weight:700; }
.legends-decade__empty { margin:0; color:var(--muted-fg); font-size:12px; font-style:italic; }
@media (max-width:480px) {
  .legends-hero,
  .legends-decade { padding:14px; }
  .legends-hero { grid-template-columns:104px minmax(0,1fr); gap:14px; }
  .legends-ring--lg { width:104px; height:104px; }
  .legends-hero__pct { font-size:28px; }
  .legends-hero__count { font-size:40px; }
  .legends-hero__count span { font-size:20px; }
  .legends-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; }
  .legends-decade__title h2 { font-size:22px; }
}

/* ── Trophy Room ──────────────────────────────────────────
   The page itself, not a card on it: rank → crew → the hall → banners →
   badges and titles, closed by the three controls as a strip. The sections sit
   on the page background split by hairlines; only the collection items (the
   room, banner slots, badge tiles) keep boxes of their own. The room SVG and
   the banner pennants are the only fixed-palette art, and both read on
   either page background. css/desktop.css puts the hall beside the rest. */
.trophy-board { color:var(--fg); }
.trophy-board > .trophy-rank,
.trophy-scene,
.trophy-banners,
.trophy-collection,
.trophy-crew { padding:18px 0; }
.trophy-board > .trophy-rank { padding-top:0; border-bottom:1px solid var(--border); }
.trophy-board__side { border-top:1px solid var(--border); }
/* The crew standings share the hall's column on desktop, above the hall.
   Below 1024px that column steps aside and the crew opens the stack. */
.trophy-board__body { display:flex; flex-direction:column; }
.trophy-board__main { display:contents; }
.trophy-board__main > .trophy-crew { border-bottom:1px solid var(--border); }
.trophy-rank { display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:center; gap:18px; }
.trophy-rank .gm-shield { width:96px; height:114px; }
.trophy-rank__body { min-width:0; }
.trophy-rank__title { margin:2px 0 4px; font-family:'Barlow Condensed',sans-serif; font-size:34px; font-weight:900; line-height:1; text-transform:uppercase; letter-spacing:.01em; overflow-wrap:anywhere; }
.trophy-rank__meta { margin:0 0 10px; color:var(--muted-fg); font-size:13px; line-height:1.4; }
.trophy-rank__meta strong { color:var(--fg); font-weight:700; }
.trophy-rank .gm-profile__remaining { font-variant-numeric:tabular-nums; }
.trophy-rank__badge { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:96px; text-align:center; }
.trophy-rank__badge .reward-medallion { width:64px; height:72px; }
.trophy-rank__badge-name { display:flex; flex-direction:column; gap:2px; font-size:12px; line-height:1.3; }
.trophy-rank__badge-name strong { font-weight:800; }
.trophy-rank__badge-name > span:last-child:not(.gm-eyebrow) { color:var(--muted-fg); font-size:11px; }
.trophy-scene__head,
.trophy-banners__head,
.trophy-collection__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.trophy-scene__count,
.trophy-banners__count,
.trophy-collection__count { margin:0; color:var(--muted-fg); font-size:13px; font-variant-numeric:tabular-nums; }
.trophy-scene__count strong,
.trophy-banners__count strong,
.trophy-collection__count strong { color:var(--fg); font-size:18px; font-weight:900; }
.trophy-scene .reward-room { border-radius:12px; }
.trophy-scene__next { margin:12px 0 0; color:var(--muted-fg); font-size:13px; line-height:1.45; }
.trophy-scene__next strong { color:var(--fg); font-weight:700; }
.trophy-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trophy-control { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:72px; padding:12px 8px; border:0; background:transparent; color:var(--fg); font:inherit; cursor:pointer; text-align:center; transition:background-color .15s; }
.trophy-control + .trophy-control { border-left:1px solid var(--border); }
.trophy-control__text { display:flex; flex-direction:column; align-items:center; gap:3px; }
.trophy-control__icon { font-size:20px; line-height:1; }
.trophy-control__label { font-size:13px; font-weight:800; line-height:1.2; }
.trophy-control__count { color:var(--muted-fg); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.trophy-control:focus-visible { outline:2px solid var(--primary); outline-offset:-4px; }
.trophy-banner:focus-visible,
.trophy-history__row:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.trophy-banners__grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.trophy-banner { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:104px; padding:8px 4px; border:1.5px solid var(--border); border-radius:12px; background:var(--card3); color:var(--fg); font:inherit; cursor:pointer; transition:border-color .15s, transform .15s; }
.trophy-banner__art { width:44px; height:60px; flex-shrink:0; filter:drop-shadow(0 2px 2px var(--shadow)); }
.trophy-banner__name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:700; line-height:1.2; }
.trophy-banner--perfect { --banner-fill:var(--banner-perfect-fill); --banner-edge:var(--banner-perfect-edge); background:var(--surface-amber); border-color:var(--amber-border); }
.trophy-banner--empty { border-style:dashed; cursor:default; color:var(--muted-fg); }
.trophy-banner__empty { font-size:22px; line-height:1; opacity:.2; filter:grayscale(1); }
.trophy-banner__slot { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.trophy-banners__note { margin:12px 0 0; color:var(--muted-fg); font-size:12px; text-align:center; }
/* Crew season standings: a compact table, the board's first pane. The grid
   is shared by the column header and every row so the numbers line up
   without a <table>. */
.trophy-crew__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.trophy-crew__crew { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); font-size:13px; font-weight:800; }
.trophy-crew__cols,
.trophy-crew__row { display:grid; grid-template-columns:22px minmax(0,1fr) 46px 46px 46px; align-items:center; gap:8px; }
.trophy-crew__cols { padding:0 10px 6px; color:var(--muted-fg); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.trophy-crew__cols > span:nth-child(n+3) { text-align:right; }
.trophy-crew__rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.trophy-crew__row { padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--card2); font-size:13px; }
.trophy-crew__row--you { border-color:var(--ink-orange-hot); background:var(--surface-amber); }
.trophy-crew__rank { color:var(--muted-fg); font-size:12px; font-weight:900; font-variant-numeric:tabular-nums; }
.trophy-crew__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.trophy-crew__you { color:var(--ink-orange-hot); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.trophy-crew__passed,
.trophy-crew__played,
.trophy-crew__avg { text-align:right; font-variant-numeric:tabular-nums; font-weight:900; }
.trophy-crew__passed { color:var(--ink-orange-hot); }
.trophy-crew__played,
.trophy-crew__avg { color:var(--muted-fg); font-weight:700; }
.trophy-crew__msg,
.trophy-crew__pitch,
.trophy-crew__foot,
.trophy-crew__more { margin:0; color:var(--muted-fg); font-size:12px; line-height:1.5; }
.trophy-crew__msg { padding:4px 0; }
/* No crew yet: the pitch on the left, the button beside it on the right. */
.trophy-crew__invite { display:flex; align-items:center; gap:20px; }
.trophy-crew__pitch { flex:1 1 auto; min-width:0; }
.trophy-crew__invite .trophy-crew__cta { flex:0 0 auto; margin-top:0; white-space:nowrap; }
.trophy-crew__foot,
.trophy-crew__more { margin-top:10px; text-align:center; font-size:11px; }
.trophy-crew__cta { margin-top:10px; padding:10px 14px; border:0; border-radius:12px; background:var(--fill-orange); color:var(--on-fill-orange); font:inherit; font-size:12px; font-weight:900; cursor:pointer; }
.trophy-crew__link,
.trophy-crew__retry { margin-top:10px; padding:0; border:0; background:none; color:var(--muted-fg); font:inherit; font-size:11px; font-weight:700; text-decoration:underline; cursor:pointer; }
.trophy-crew__retry { margin:0; }
.trophy-crew__cta:focus-visible,
.trophy-crew__link:focus-visible,
.trophy-crew__retry:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }

@media (hover:hover) {
  .trophy-crew__cta:hover { background:var(--fill-orange-deep); }
  .trophy-crew__link:hover,
  .trophy-crew__retry:hover { color:var(--fg); }
  .trophy-control:hover { background:var(--card2); }
  .trophy-banner:not(.trophy-banner--empty):hover { border-color:var(--primary); transform:translateY(-2px); }
  .trophy-history__row:hover { border-color:var(--primary); }
}
/* Pop-outs: the banner / Team History detail and the history list. */
.trophy-detail__heading { min-width:0; }
.trophy-detail__heading h2 { font-size:26px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trophy-detail__record { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface-blue); }
.trophy-detail__record > strong { font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:900; line-height:1; }
.trophy-detail__record > span { font-size:13px; color:var(--muted-fg); }
.trophy-detail__record--perfect { background:var(--surface-amber); border-color:var(--amber-border); }
.trophy-detail__record--perfect > strong { color:var(--amber-text); }
.trophy-detail__stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0; }
.trophy-detail__stats > div { padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--card2); }
.trophy-detail__stats strong { display:block; margin-top:3px; font-size:20px; font-weight:900; font-variant-numeric:tabular-nums; }
.trophy-detail__lineup { list-style:none; margin:8px 0 0; padding:0; }
.trophy-detail__row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--border); }
.trophy-detail__row:first-child { border-top:0; }
.trophy-detail__pos { width:28px; flex-shrink:0; color:var(--primary); font-size:11px; font-weight:900; }
.trophy-detail__player { flex:1; min-width:0; }
.trophy-detail__player > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; }
.trophy-detail__player > span { display:block; margin-top:2px; color:var(--muted-fg); font-size:11px; }
.trophy-detail__ovr { flex-shrink:0; padding:2px 8px; border:1px solid var(--ovr); border-radius:999px; background:var(--card2); color:var(--ovr); font-size:10px; font-weight:800; }
.trophy-detail__bench { margin:6px 0 0; font-size:13px; line-height:1.5; }
.trophy-detail .gm-profile__body > h3 { margin:18px 0 0; }
.trophy-detail__leaders { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:16px; color:var(--muted-fg); font-size:11px; }
.trophy-detail__leaders strong { color:var(--fg); font-weight:700; }
.trophy-history { display:flex; flex-direction:column; gap:8px; }
.trophy-history__row { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 12px; border:1.5px solid var(--border); border-radius:12px; background:var(--card3); color:var(--fg); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s; }
.trophy-history__row--perfect { background:var(--surface-amber); border-color:var(--amber-border); }
.trophy-history__rank { width:24px; flex-shrink:0; color:var(--muted-fg); font-size:13px; font-weight:900; text-align:center; font-variant-numeric:tabular-nums; }
.trophy-history__team { flex:1; min-width:0; }
.trophy-history__team > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:800; }
.trophy-history__team > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; color:var(--muted-fg); font-size:11px; }
.trophy-history__record { flex-shrink:0; text-align:right; }
.trophy-history__record > strong { display:block; font-size:16px; font-weight:900; font-variant-numeric:tabular-nums; }
.trophy-history__record > span { color:var(--muted-fg); font-size:11px; }
.trophy-history__row--perfect .trophy-history__record > strong { color:var(--amber-text); }
@media (max-width:480px) {
  .gm-profile__header { padding:14px 16px; }
  .gm-profile__body { padding:18px 16px; }
  .gm-profile__identity { grid-template-columns:88px minmax(0,1fr); gap:14px; }
  .gm-profile__identity .gm-shield { width:88px; height:105px; }
  .gm-profile__progress h3 { font-size:22px; margin-bottom:10px; }
  .gm-profile__xp { font-size:12px; }
  .gm-milestone { grid-template-columns:minmax(0,1fr); gap:14px; }
  .gm-milestone__previews { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gm-milestone__previews > figure:only-child { max-width:180px; width:100%; justify-self:center; grid-column:1/-1; }
  .gm-milestone--next { padding:14px; }
  .gm-reward-row { gap:8px; }
  .gm-reward-row > .reward-preview { width:48px; }
  .gm-reward-row__name > strong { font-size:13px; }
  .gm-track__head { gap:10px; }
  .gm-profile .gm-track__back { padding:8px 12px; font-size:12px; }
  .gm-track__rail { gap:8px; padding:26px 14px 18px; scroll-padding-inline:14px; }
  .gm-track__viewport::before,
  .gm-track__viewport::after { width:20px; }
  .gm-track__tile { font-size:16px; }
  .gm-track__tile--selected { transform:scale(1.2); }
  .gm-track__detail { padding:12px; }
  .gm-track__detail > h3 { font-size:22px; }
  .gm-track__rewards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gm-track__rewards > figure:only-child { max-width:180px; width:100%; justify-self:center; grid-column:1/-1; }
}
/* Phone portrait: three columns left the rank title ~100px, so it broke
   mid-word. The shield narrows and the badge drops to a full-width row, the
   phone-landscape arrangement below; the title keeps its size, and at 320px
   still fits its widest word (BASKETBALL, 160px). */
@media (max-width:480px) {
  .trophy-rank { grid-template-columns:72px minmax(0,1fr); gap:12px; }
  .trophy-rank .gm-shield { width:72px; height:86px; }
  .trophy-rank__badge { grid-column:1/-1; flex-direction:row; justify-content:flex-start; gap:12px; padding-top:12px; border-top:1px solid var(--border); text-align:left; }
  .trophy-rank__badge .reward-medallion { width:44px; height:50px; }
  .trophy-rank__badge-name { align-items:flex-start; }
  .trophy-crew__invite { gap:12px; }
}
/* Phone landscape: wide but very short. The sticky header and the identity
   block are the fixed costs, so they compress first; the rail keeps its full
   44px tiles and the panel scrolls the rest. */
@media (max-height:500px) and (orientation:landscape) {
  .gm-profile__header { padding:10px 16px; }
  .gm-profile__header h2 { font-size:24px; }
  .gm-profile__body { padding:14px 16px; }
  .gm-profile__identity { grid-template-columns:64px minmax(0,1fr); gap:12px; }
  .gm-profile__identity .gm-shield { width:64px; height:76px; }
  .gm-profile__progress h3 { font-size:20px; margin-bottom:8px; }
  .gm-profile__stats { margin:14px 0; padding-top:12px; }
  .gm-track__rail { padding:26px 18px 16px; }
  .gm-profile__stats strong { font-size:21px; }
  .trophy-board > .trophy-rank,
  .trophy-scene,
  .trophy-banners,
  .trophy-collection { padding:14px 0; }
  .trophy-board > .trophy-rank { padding-top:0; }
  .trophy-rank { grid-template-columns:72px minmax(0,1fr); gap:12px; }
  .trophy-rank .gm-shield { width:72px; height:86px; }
  .trophy-rank__title { font-size:26px; }
  .trophy-rank__badge { grid-column:1/-1; flex-direction:row; justify-content:flex-start; gap:12px; padding-top:12px; border-top:1px solid var(--border); text-align:left; }
  .trophy-rank__badge .reward-medallion { width:44px; height:50px; }
  .trophy-rank__badge-name { align-items:flex-start; }
  .trophy-control { min-height:64px; padding:10px 4px; }
  .trophy-crew { padding:14px 0; }
  .trophy-crew__cols,
  .trophy-crew__row { grid-template-columns:20px minmax(0,1fr) 40px 40px 40px; gap:6px; }
  .trophy-control__label { font-size:12px; }
  .trophy-banners__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .trophy-banner { min-height:88px; }
  .trophy-detail__heading h2 { font-size:22px !important; }
  .trophy-detail__stats { gap:8px; }
  .trophy-detail__stats > div { padding:8px 10px; }
  .trophy-detail__stats strong { font-size:17px; }
  .trophy-history__row { gap:8px; padding:10px; }
}
@media (max-width:360px) {
  .trophy-banners__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .trophy-control__icon { font-size:18px; }
}

/* ── Dynasty Duel ──────────────────────────────────────────────────────────
   Four tiers of legendary teams, each a three-team bracket. The tiers
   borrow the reward badges' metal ladder — bronze, silver, gold, and a burnt
   red-gold for The GOATs — so the climb reads in the game's own vocabulary.
   Every rule is scoped under .dd-scope; nothing here touches other screens. */
.dd-scope {
  --dd-gold:        #b8860b;
  --dd-gold-strong: #92400e;
  --dd-bronze:      #b45309;
  --dd-silver:      #64748b;
  --dd-goat:        #9a3412;
  --dd-you:         #2563eb;
  --dd-them:        #d97706;
  --dd-danger:      #dc2626;
  --dd-acc:         var(--dd-gold);
  /* The bracket screen's ground: outfield green, mown in stripes. */
  --dd-floor:        #5e9a46;
  --dd-floor-grain:  rgba(0, 0, 0, 0.06);
  --dd-hardwood-apron: #16233b;
  --dd-hardwood-line:  rgba(255, 255, 255, 0.95);
  --dd-hardwood-circle: #fff8ec;
  --dd-paint:        rgba(255, 250, 240, 0.92);
  --dd-plate-bg:     #ffffff;
  --dd-plate-fg:     #0f172a;
  --dd-plate-edge:   transparent;
}
/* Night Game lifts the tier inks; the ground keeps its green under both themes. */
[data-theme="blacktop"] .dd-scope {
  --dd-gold:        #f2c14e;
  --dd-gold-strong: #f2c14e;
  --dd-bronze:      #e0a060;
  --dd-silver:      #a7b1c4;
  --dd-goat:        #ffb27a;
  --dd-danger:      #f08a8a;
}
.dd-scope .dd-road__tier--bronze,
.dd-scope .dd-card--bronze,
.dd-scope .dd-ceremony--bronze,
.dd-scope .dd-arena--bronze,
.dd-scope .dd-recap--bronze { --dd-acc: var(--dd-bronze); }
.dd-scope .dd-road__tier--silver,
.dd-scope .dd-card--silver,
.dd-scope .dd-ceremony--silver,
.dd-scope .dd-arena--silver,
.dd-scope .dd-recap--silver { --dd-acc: var(--dd-silver); }
.dd-scope .dd-road__tier--gold,
.dd-scope .dd-card--gold,
.dd-scope .dd-ceremony--gold,
.dd-scope .dd-arena--gold,
.dd-scope .dd-recap--gold { --dd-acc: var(--dd-gold); }
.dd-scope .dd-road__tier--goat,
.dd-scope .dd-card--goat,
.dd-scope .dd-ceremony--goat,
.dd-scope .dd-arena--goat,
.dd-scope .dd-recap--goat { --dd-acc: var(--dd-goat); }

.dd-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

/* Cards */
.dd-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow2);
}
.dd-card__head { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; }
.dd-card__title { font-size: 1.5rem; font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; color: var(--fg); }
.dd-card__copy { font-size: 0.8125rem; color: var(--muted-fg); line-height: 1.4; }

/* Buttons */
.dd-btn {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.dd-btn:hover { background: var(--card2); }
.dd-btn:active { transform: translateY(1px); }
.dd-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dd-btn--primary {
  border-color: transparent;
  background: var(--acc);
  color: var(--on-acc);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
}
.dd-btn--primary:hover { background: var(--acc-hi); }
.dd-btn--big { padding: 1rem 1.25rem; font-size: 0.9375rem; }
.dd-btn--ghost { color: var(--muted-fg); font-weight: 700; }
.dd-btn--danger { color: var(--dd-danger); border-color: color-mix(in srgb, var(--dd-danger) 35%, var(--border)); }
.dd-links { display: flex; justify-content: center; gap: 1.5rem; padding: 0.25rem 0 0.5rem; }
.dd-link {
  background: none; border: 0; padding: 0.35rem 0.25rem; font: inherit; font-size: 0.8125rem; font-weight: 700;
  color: var(--muted-fg); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.dd-link:hover { color: var(--fg); text-decoration-color: currentColor; }
.dd-link--danger:hover { color: var(--dd-danger); }
.dd-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* The "you are here" pulse on the bracket route. */
@keyframes ddPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dd-acc) 18%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--dd-acc) 0%, transparent); }
}

/* Challenges-screen status */
.dd-mode-status {
  display: inline-flex; align-self: flex-start; align-items: center;
  margin-top: 0.25rem; padding: 0.2rem 0.55rem; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--ink-amber-deep); background: rgba(245, 158, 11, 0.16);
}

.dd-trophy-art { display: block; }

/* ── Dynasty Home: the road to the trophy ────────────────────────────────
   Four tier columns read left → right like a bracket and end at the trophy;
   a band of two panels sits under them. Phone: everything stacks. Tablet:
   two columns. Wide desktop (≥1180px): the full five-column board. */
/* The app caps main's children at --content-max (42rem) and sets main's gutters;
   the board is wide by design, so it lifts that cap for its own children. */
.dd-road { --content-max: 118rem; width: 100%; max-width: 118rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
/* Dynasty Home's header title reads larger than the shared text-sm. */
.dd-scope:has(> .dd-road) > header p { font-size: 1.2rem; line-height: 1.75rem; }
.dd-road__intro { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; }
.dd-road__title { font-size: 2.1rem; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: var(--fg); }
.dd-road__copy { flex: 1 1 18rem; max-width: 34rem; font-size: 0.84rem; line-height: 1.45; color: var(--muted-fg); }
.dd-road__count { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.dd-road__count b { font-size: 2.1rem; font-weight: 900; line-height: 1; color: var(--fg); }
.dd-road__count b span { font-size: 1.1rem; color: var(--muted-fg); }
.dd-road__segs { display: flex; gap: 4px; }
.dd-road__seg { width: 42px; height: 8px; border-radius: 99px; background: var(--border); }
.dd-road__seg--done.dd-road__seg--bronze { background: var(--dd-bronze); }
.dd-road__seg--done.dd-road__seg--silver { background: var(--dd-silver); }
.dd-road__seg--done.dd-road__seg--gold { background: var(--dd-gold); }
.dd-road__seg--done.dd-road__seg--goat { background: var(--dd-goat); }

.dd-road__board { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
.dd-road__tier {
  position: relative; display: flex; flex-direction: column; gap: 0.55rem; min-width: 0;
  padding: 1rem 1.1rem; border-radius: 1.1rem; border: 1px solid var(--border); background: var(--card);
  box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow2);
}
.dd-road__tier--next,
.dd-road__tier--play {
  border: 2px solid var(--dd-bronze);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dd-bronze) 11%, var(--card)), var(--card) 48%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--dd-bronze) 18%, transparent);
}
.dd-road__tier--done { border-color: color-mix(in srgb, #16a34a 38%, var(--border)); }
.dd-road__tier--locked { background: var(--card3); }
.dd-rt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.dd-rt__num { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dd-acc); }
.dd-rt__name { margin-top: 0.1rem; font-size: 2rem; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: var(--fg); }
.dd-road__tier--next .dd-rt__name,
.dd-road__tier--play .dd-rt__name { color: var(--dd-bronze); }
.dd-road__tier--locked .dd-rt__name { color: var(--muted-fg); }
.dd-rt__badge { font-size: 0.72rem; font-weight: 800; white-space: nowrap; color: var(--muted-fg); padding-top: 0.2rem; }
.dd-rt__badge--done { color: #15803d; }
.dd-rt__badge--play { color: var(--dd-bronze); }
.dd-rt__teams { display: flex; flex-direction: column; gap: 0.5rem; }
.dd-rt__xp { font-size: 0.72rem; font-weight: 700; color: var(--muted-fg); }
.dd-road__tier--next .dd-rt__xp,
.dd-road__tier--play .dd-rt__xp { color: var(--dd-gold-strong); }
.dd-rt__foot { margin-top: auto; padding-top: 0.2rem; }
.dd-rt__foot .dd-btn { padding: 0.85rem 1rem; font-size: 0.8rem; }
.dd-rt__locked {
  display: flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0 0.5rem; text-align: center;
  border-radius: 0.75rem; border: 1.5px dashed var(--border); font-size: 0.75rem; font-weight: 700; color: var(--muted-fg);
}
.dd-btn--replay {
  color: #15803d; border-color: color-mix(in srgb, #16a34a 40%, var(--border));
  background: color-mix(in srgb, #16a34a 8%, var(--card)); font-weight: 800;
}
.dd-btn--replay:hover { background: color-mix(in srgb, #16a34a 14%, var(--card)); }

/* A dynasty: team-colour band with the year, then round, name, strength. */
.dd-team {
  position: relative; display: flex; align-items: stretch; min-width: 0; overflow: hidden;
  border-radius: 0.7rem; border: 1px solid var(--border); background: var(--card);
}
.dd-team__band { width: 3.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; font-weight: 900; line-height: 1; }
.dd-team__body { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1; padding: 0.45rem 0.75rem; }
.dd-team__round { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-fg); }
.dd-team__name { font-size: 1.2rem; font-weight: 800; line-height: 1.05; text-transform: uppercase; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-team__str { font-size: 0.68rem; font-weight: 700; color: var(--muted-fg); }
.dd-team__mark { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); }
.dd-team__mark--won { width: 1.4rem; height: 1.4rem; border-radius: 99px; background: #16a34a; color: #fff; font-size: 0.72rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.dd-team__mark--current { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dd-bronze); background: color-mix(in srgb, var(--dd-bronze) 12%, var(--card)); padding: 0.2rem 0.45rem; border-radius: 99px; }
.dd-team--current { border-color: var(--dd-bronze); box-shadow: 0 0 0 1px var(--dd-bronze); }
.dd-team--locked .dd-team__band { filter: grayscale(1); opacity: 0.42; }
.dd-team--locked .dd-team__name { color: var(--muted-fg); }

/* The prize column */
.dd-prize {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.4rem;
  padding: 1.25rem 1rem; border-radius: 1.1rem; border: 1.5px dashed color-mix(in srgb, var(--dd-gold) 45%, var(--border));
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--dd-gold) 10%, var(--card)), var(--card) 70%);
}
.dd-prize--won { border-style: solid; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--dd-gold) 22%, var(--card)), var(--card) 72%); }
.dd-prize__art { width: 4.6rem; height: 6.5rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); }
.dd-prize__art--empty { filter: grayscale(1) opacity(0.32); }
.dd-prize__name { font-size: 1.55rem; font-weight: 900; line-height: 1; text-transform: uppercase; color: var(--fg); }
.dd-prize--won .dd-prize__name { color: var(--dd-gold-strong); }
.dd-prize__date { font-size: 0.78rem; line-height: 1.4; color: var(--muted-fg); max-width: 15rem; }
.dd-prize__five { font-size: 0.74rem; font-weight: 600; line-height: 1.45; color: var(--fg); max-width: 16rem; }

/* The band under the board */
/* One card, two sections: a divider and a tint on the scouting half keep them apart. */
.dd-road__band { display: grid; grid-template-columns: 1fr; border-radius: 1.1rem; border: 1px solid var(--border); background: var(--card); }
.dd-road__band > .dd-panel { border: 0; border-radius: 0; background: transparent; }
.dd-road__band > .dd-panel--scout { border-top: 1px solid var(--border); border-radius: 0 0 calc(1.1rem - 1px) calc(1.1rem - 1px); background: color-mix(in srgb, var(--card2) 35%, var(--card)); }
.dd-panel { min-width: 0; padding: 1rem 1.2rem; border-radius: 1.1rem; border: 1px solid var(--border); background: var(--card); }
.dd-panel__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.65rem; }
.dd-panel__meta { font-size: 0.72rem; font-weight: 600; color: var(--muted-fg); text-align: right; }
.dd-steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.85rem; margin-top: 0.75rem; }
.dd-steps li { display: flex; gap: 0.75rem; align-items: flex-start; }
.dd-steps__n {
  width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.6rem;
  font-size: 1.25rem; font-weight: 900; color: var(--dd-bronze);
  background: color-mix(in srgb, var(--dd-bronze) 10%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--dd-bronze) 35%, var(--border));
}
.dd-steps b { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: var(--fg); margin-bottom: 0.2rem; }
.dd-steps span { font-size: 0.78rem; line-height: 1.45; color: var(--muted-fg); }
.dd-record__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: 0.75rem; }
.dd-stat { padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: var(--card2); }
.dd-stat b { display: block; font-size: 1.75rem; font-weight: 900; line-height: 1; color: var(--fg); }
.dd-stat b i { font-style: normal; font-size: 1.35rem; color: var(--muted-fg); }
.dd-stat span { font-size: 0.66rem; font-weight: 700; color: var(--muted-fg); }
.dd-record__best { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; margin-bottom: 0.45rem; font-size: 0.78rem; color: var(--fg); }
.dd-record__best b { font-size: 1.35rem; font-weight: 900; line-height: 1; color: var(--dd-you); }
.dd-record__last { font-size: 0.78rem; line-height: 1.5; color: var(--muted-fg); }
.dd-record__last b { color: var(--fg); }
.dd-record__dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 99px; margin-right: 0.4rem; vertical-align: 0.05em; background: var(--muted-fg); }
.dd-record__dot--cleared { background: #16a34a; }
.dd-record__dot--lost { background: var(--dd-danger); }

/* Scouting report: the strength scale */
.dd-scale { position: relative; height: 5.6rem; margin: 0.35rem 0.5rem 0.25rem; }
.dd-scale__track { position: absolute; left: 0; right: 0; top: 2.5rem; height: 0.75rem; border-radius: 99px; overflow: hidden; background: var(--border); }
.dd-scale__zone { position: absolute; top: 0; bottom: 0; }
.dd-scale__zone--risky { background: rgba(239, 68, 68, 0.32); }
.dd-scale__zone--even { background: rgba(245, 158, 11, 0.45); }
.dd-scale__zone--fav { background: rgba(34, 197, 94, 0.38); }
.dd-scale__range { position: absolute; top: 2.15rem; height: 1.5rem; border-left: 2px solid var(--fg); border-right: 2px solid var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); border-radius: 3px; transform: translateX(-1px); }
.dd-scale__opp { position: absolute; top: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.dd-scale__discs { display: flex; }
.dd-scale__discs i {
  width: 1.8rem; height: 1.8rem; margin-left: -0.35rem; border-radius: 99px; display: flex; align-items: center; justify-content: center;
  font: 900 0.8rem/1 'Barlow Condensed', 'Fira Sans', sans-serif; font-style: normal; box-shadow: 0 0 0 2.5px var(--card);
}
.dd-scale__discs i:first-child { margin-left: 0; }
.dd-scale__opp em,
.dd-scale__you em { font-style: normal; font-size: 0.72rem; font-weight: 800; color: var(--fg); }
.dd-scale__you { position: absolute; top: 3.45rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.dd-scale__you::before { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--dd-you); }
.dd-scale__you em { color: var(--dd-you); }
.dd-scale__ticks { position: absolute; left: 0; right: 0; top: 3.55rem; }
.dd-scale__ticks span { position: absolute; transform: translateX(-50%); font-size: 0.68rem; font-weight: 700; color: var(--muted-fg); }
.dd-scale:has(.dd-scale__you) .dd-scale__ticks { top: 4.95rem; }
.dd-scale:has(.dd-scale__you) { height: 6.4rem; }
.dd-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.dd-odd { padding: 0.5rem 0.75rem; border-radius: 0.75rem; }
.dd-odd b { display: block; font-size: 1.3rem; font-weight: 900; line-height: 1; }
.dd-odd span { font-size: 0.68rem; font-weight: 700; }
.dd-odd--risky { background: rgba(239, 68, 68, 0.1);  color: #b91c1c; }
.dd-odd--even { background: rgba(245, 158, 11, 0.12); color: #a16207; }
.dd-odd--fav { background: rgba(34, 197, 94, 0.12);  color: #15803d; }
.dd-odd--table { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; background: var(--card2); color: var(--fg); }
.dd-odd--table span { font-size: 0.8rem; font-weight: 600; }
.dd-odd--table b { display: inline; font-size: 1.1rem; }
.dd-odd--table em { width: 100%; font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--muted-fg); }

@media (min-width: 640px) {
  .dd-road__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-prize { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 1rem; text-align: left; flex-wrap: wrap; }
  .dd-steps { grid-template-columns: repeat(3, 1fr); }
  .dd-record__stats { grid-template-columns: repeat(4, 1fr); }
  .dd-odds { grid-template-columns: repeat(3, 1fr) 1.5fr; }
  .dd-odd--table { grid-column: auto; }
}
@media (min-width: 1024px) {
  /* The board spans the whole canvas: no 118rem cap on a wide window. */
  .dd-road { --content-max: 100%; max-width: none; }
  .dd-road__title { font-size: 2.4rem; }
  .dd-road__band { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .dd-road__band > .dd-panel--scout { border-top: 0; border-left: 1px solid var(--border); border-radius: 0 calc(1.1rem - 1px) calc(1.1rem - 1px) 0; }
  .dd-scope:has(> .dd-road) > header p { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1180px) {
  .dd-road__board { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(15rem, 0.85fr); gap: 2rem; }
  /* Any height the canvas has left goes to the board: the tier columns grow
     and their three team rows share the extra, so nothing sits empty below. */
  .dd-road__board { flex: 1 0 auto; }
  .dd-rt__teams { flex: 1 1 auto; }
  .dd-rt__teams .dd-team { flex: 1 1 auto; }
  .dd-prize { grid-column: auto; flex-direction: column; text-align: center; }
  /* The connectors that make the columns read as one road. */
  .dd-road__tier::after { content: ''; position: absolute; top: 50%; right: -2rem; width: 2rem; height: 2px; background: var(--border); }
  .dd-road__tier--done::after { background: #16a34a; }
}

/* In-progress prompt */
.dd-prompt-backdrop { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.45); }
.dd-prompt {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9991;
  width: min(92vw, 380px); display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.25rem; border-radius: 1rem; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: scaleIn 0.2s ease-out;
}
.dd-prompt__title { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 0.25rem; }
.dd-prompt__body { font-size: 0.8125rem; color: var(--muted-fg); line-height: 1.45; margin-bottom: 0.5rem; }

/* Bracket screen: Centre Pitch (renderDynastyBracket in js/ui/render.js).
   Here the ground is drawn portrait — their end on top, your five at the
   bottom — and css/desktop.css turns the same markup landscape. Everything
   inside the ground's box is placed in % and sized in cqw of the box, so the
   drawing scales as one piece at any width. */
.dd-arena { width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* responsive.css caps every <main> child at --content-max; this column is narrower. */
html[data-page="game"] #app > .main-gradient > main > .dd-arena { max-width: min(100%, 28rem); }
.dd-arena__eyebrow { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dd-acc); }

.dd-hardwood {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "them" "floor" "you";
  gap: 8px;
  padding: 10px;
  border-radius: 20px;
  background: var(--dd-hardwood-apron);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
}
.dd-hardwood__band {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0; min-height: 36px; padding: 0 14px; border-radius: 9px; color: #ffffff;
}
.dd-hardwood__band--you { grid-area: you;  background: #1d4ed8; }
.dd-hardwood__band--them { grid-area: them; background: #b45309; }
.dd-hardwood__band--round { display: none; }
.dd-hardwood__team { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-hardwood__team--name { display: none; }
.dd-hardwood__str { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.dd-hardwood__str small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.dd-hardwood__str b { font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.dd-hardwood__floor {
  grid-area: floor;
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: repeating-linear-gradient(90deg, var(--dd-floor-grain) 0 1px, transparent 1px 14px), var(--dd-floor);
}
.dd-hardwood__box { position: relative; width: 100%; aspect-ratio: 338 / 560; container-type: inline-size; }
.dd-hardwood__lines { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dd-hardwood__lines--land { display: none; }
.dd-hardwood__ink { fill: none; stroke: var(--dd-hardwood-line); }
.dd-hardwood__key { stroke: none; }
.dd-hardwood__key--you { fill: rgba(37, 99, 235, 0.92); }
.dd-hardwood__key--them { fill: rgba(217, 119, 6, 0.92); }
.dd-hardwood__circle { fill: var(--dd-hardwood-circle); stroke: none; }

/* The dynasty's name, painted on their end of the outfield above the pitch. */
.dd-hardwood__paint {
  position: absolute; left: 0; right: 0; top: 23%;
  transform: translateY(-50%);
  display: flex; justify-content: center; align-items: baseline; gap: 0.2em;
  font-size: calc(14.8cqw * var(--fit-port, 1));
  font-weight: 800; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
  color: var(--dd-paint);
  pointer-events: none;
}

/* The toss circle: the series odds and what they mean. */
.dd-hardwood__jump {
  position: absolute; left: 50%; top: 50%; width: 31.95%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35em;
  text-align: center; color: var(--fg);
}
.dd-hardwood__jump-label { font-size: clamp(7px, 2.2cqw, 10px); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-fg); }
.dd-hardwood__jump-pct { font-size: clamp(26px, 11.2cqw, 52px); font-weight: 800; line-height: 0.9; font-variant-numeric: tabular-nums; }
.dd-verdict {
  display: inline-flex; align-items: center; height: 1.9em; padding: 0 0.75em; border-radius: 999px;
  font-size: clamp(7px, 2.2cqw, 10px); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.dd-verdict--long,
.dd-verdict--under { background: var(--surface-amber-hi); color: var(--ink-amber-deep); }
.dd-verdict--even { background: var(--surface-slate); color: var(--ink-slate-ink); }
.dd-verdict--fav { background: var(--surface-blue-hi); color: var(--ink-blue-mid); }

/* Your five, standing in the draft ground's formation. The dot sits on the spot. */
.dd-hardwood__five { list-style: none; margin: 0; padding: 0; }
.dd-hardwood__player {
  --dot: 13cqw;
  position: absolute; left: var(--px); top: var(--py);
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqw;
  width: max-content; max-width: 40cqw;
  transform: translate(-50%, calc(var(--dot) / -2));
}
.dd-hardwood__dot {
  width: var(--dot); height: var(--dot); flex-shrink: 0; box-sizing: border-box; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #2563eb; color: #ffffff; border: 2.5px solid #ffffff;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.3);
  font-size: calc(var(--dot) * 0.38); font-weight: 800; line-height: 1;
}
.dd-hardwood__plate {
  display: flex; align-items: baseline; gap: 0.4em; max-width: 100%;
  padding: 0.25em 0.6em; border-radius: 7px; border: 1px solid var(--dd-plate-edge);
  background: var(--dd-plate-bg); color: var(--dd-plate-fg);
  box-shadow: 0 2px 5px rgba(80, 45, 10, 0.2);
  font-size: clamp(10px, 3.4cqw, 14px); font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.dd-hardwood__plate > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-hardwood__plate b { font-size: 1.22em; font-weight: 800; line-height: 1; }
.dd-hardwood__full { display: none; }
.dd-hardwood__player--empty .dd-hardwood__dot { background: transparent; border-style: dashed; }

/* The bracket underneath: three rounds and the tier's XP, each with its odds.
   On a phone the court runs past the fold, so the footer's wrappers dissolve
   into the column and the Start button rides the bottom of the screen until
   the page scrolls down to it, on a strip of page background so nothing
   scrolls visibly underneath (css/desktop.css puts them back in a row). */
.dd-arena__foot,
.dd-arena__actions { display: contents; }
.dd-arena__go {
  /* Sticky insets stop at <main>'s padding; reach through it to the edge. */
  position: sticky; bottom: calc(-1 * var(--sp-16, 0px)); z-index: 5;
  margin-top: -10px; padding: 10px 0 calc(8px + var(--sp-16, 0px));
  background: linear-gradient(to bottom, transparent, var(--bg) 12px);
}
.dd-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dd-route__stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.dd-route__stop + .dd-route__stop::before {
  content: ""; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px;
  background: var(--border);
}
.dd-route__stop--won + .dd-route__stop::before { background: var(--dd-acc); }
.dd-route__node {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 26px; height: 26px; box-sizing: border-box; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); background: var(--card); color: var(--muted-fg);
  font-size: 11px; font-weight: 800;
}
.dd-route__node svg { width: 13px; height: 13px; }
.dd-route__stop--current .dd-route__node { border-color: var(--dd-acc); color: var(--dd-acc); animation: ddPulse 2s ease-in-out infinite; }
.dd-route__stop--won .dd-route__node { border-color: var(--dd-acc); background: var(--dd-acc); color: #ffffff; }
.dd-route__stop--prize .dd-route__node {
  border-style: dashed; border-color: color-mix(in srgb, var(--dd-gold) 55%, var(--border));
  background: color-mix(in srgb, var(--dd-gold) 8%, var(--card)); color: var(--dd-gold-strong);
}
.dd-route__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.dd-route__text b { font-size: 13.5px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-route__text span { font-size: 10px; font-weight: 700; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-route__stop--current .dd-route__text b { color: var(--dd-acc); }
.dd-route__stop--next .dd-route__text b { color: var(--muted-fg); }

/* Series screen (renderDynastySeries): the same floor with the series on it.
   The bands count wins in pips, the latest final lands on their half (center
   court on the landscape floor, css/desktop.css), and the seven games run
   underneath as dots here, tiles on desktop. */
.dd-hardwood--series .dd-hardwood__team { min-width: 0; }
.dd-hardwood__wins { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dd-hardwood__wins b { font-size: 25px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dd-pips { display: flex; gap: 4px; }
.dd-pip { width: 10px; height: 10px; box-sizing: border-box; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.45); }
.dd-pip--on { border-color: #ffffff; background: #ffffff; }
.dd-hardwood__band--out { opacity: 0.55; }
/* Once a final is up, the card covers their half; the painted name steps aside. */
.dd-hardwood--final .dd-hardwood__paint { display: none; }

.dd-final {
  position: absolute; left: 2.96%; top: 30.4%; width: 94.08%;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 1.8cqw;
  padding: 3.55cqw 4.14cqw 3.85cqw;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 26, 46, 0.96);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.4);
  color: #e2e8f0; text-align: center;
  animation: ddFinalLand 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.dd-final--won {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12), 0 16px 34px rgba(15, 23, 42, 0.4);
}
@keyframes ddFinalLand { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
.dd-final__label { font-size: clamp(8px, 2.66cqw, 11px); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #94a3b8; }
.dd-final__score { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3cqw; }
.dd-final__side { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dd-final__side--you { align-items: flex-end; }
.dd-final__side--them { align-items: flex-start; }
.dd-final__side small {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: clamp(11px, 3.85cqw, 16px); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.dd-final__side--you small { color: #93c5fd; }
.dd-final__side--them small { color: #fbbf24; }
.dd-final__side b { font-size: 18.3cqw; font-weight: 800; line-height: 0.85; color: #64748b; }
.dd-final__side--top b { color: #ffffff; }
.dd-final__dash { font-size: 8.3cqw; font-weight: 700; color: #475569; padding-top: 3.5cqw; }
.dd-final__line {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35em 0.6em;
  font-size: clamp(10px, 3.25cqw, 13px); font-weight: 700; color: #cbd5e1;
}
.dd-final__line b { color: #ffffff; }
.dd-final__chip {
  display: inline-flex; align-items: center; gap: 0.35em; height: 1.75em; padding: 0 0.65em; border-radius: 999px;
  background: #2563eb; color: #ffffff;
  font-size: 0.82em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.dd-final__chip svg { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.dd-final--loss .dd-final__chip { background: #b45309; }
.dd-final--won  .dd-final__chip { background: #fbbf24; color: #1c1917; }
.dd-final--lost .dd-final__chip { background: #dc2626; }
.dd-final__sep { color: #475569; }
.dd-final__delta--up { color: #93c5fd; }
.dd-final__delta--down { color: #fcd34d; }
.dd-final__next { color: #fcd34d; }
.dd-final--lost .dd-final__next { color: #fca5a5; }

/* The seven games: played, next, still to be played, if needed, not needed. */
.dd-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dd-game { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.dd-game__num { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; }
.dd-game__mark {
  position: relative; width: 28px; height: 28px; box-sizing: border-box; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1;
}
.dd-game--w .dd-game__mark { background: #2563eb; color: #ffffff; }
.dd-game--l .dd-game__mark { background: #b45309; color: #ffffff; }
.dd-game__score { font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--muted-fg); white-space: nowrap; }
.dd-game__note { font-size: 9px; font-weight: 600; line-height: 1.2; color: var(--muted-fg); }
.dd-game--played .dd-game__note,
.dd-game__tag,
.dd-game__swing { display: none; }
.dd-game--latest .dd-game__num,
.dd-game--latest .dd-game__score { color: var(--dd-you); font-weight: 800; }
.dd-game--latest .dd-game__mark { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-you) 30%, transparent); }
.dd-game--clinched .dd-game__num,
.dd-game--clinched .dd-game__score { color: var(--dd-gold-strong); }
.dd-game--clinched .dd-game__mark { box-shadow: 0 0 0 3px #fcd34d; }
.dd-game--out .dd-game__num,
.dd-game--out .dd-game__score { color: var(--dd-danger); }
.dd-game--out .dd-game__mark { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-danger) 35%, transparent); }
.dd-game--next .dd-game__num,
.dd-game--next .dd-game__note { color: var(--dd-bronze); font-weight: 800; }
.dd-game--next .dd-game__note { font-size: 10px; }
.dd-game--next .dd-game__mark {
  border: 2px solid var(--dd-bronze); color: var(--dd-bronze);
  background: color-mix(in srgb, var(--dd-bronze) 6%, var(--card));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dd-bronze) 14%, transparent);
}
.dd-game--later .dd-game__mark { border: 1.5px dashed color-mix(in srgb, var(--muted-fg) 60%, transparent); color: var(--muted-fg); }
.dd-game--maybe .dd-game__mark,
.dd-game--skip .dd-game__mark { border: 1.5px dashed color-mix(in srgb, var(--muted-fg) 35%, transparent); }
.dd-game--maybe .dd-game__mark,
.dd-game--skip .dd-game__mark,
.dd-game--maybe .dd-game__num,
.dd-game--skip .dd-game__num,
.dd-game--maybe .dd-game__note,
.dd-game--skip .dd-game__note { color: color-mix(in srgb, var(--muted-fg) 65%, transparent); }
.dd-games__swing { margin: -2px 0 0; text-align: center; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--muted-fg); }
.dd-games__swing b { font-weight: 800; }
.dd-games__up { color: var(--dd-you); }
.dd-games__down { color: var(--dd-bronze); }

/* Series result (renderDynastySeriesResult): the series as a box score. On a
   phone it all stacks — the scoreboard, the odds chart, the numbers as tiles,
   the next step — and the button rides the bottom of the screen; css/desktop.css
   lays it out as one canvas, the scoreboard across the top and three cards
   beneath it with the button inside the last. */
.dd-recap { width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: 14px; }
html[data-page="game"] #app > .main-gradient > main > .dd-recap { max-width: min(100%, 28rem); }
.dd-recap__label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-fg); }

.dd-board {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 14px 12px; border-radius: 20px;
  background: var(--dd-hardwood-apron); color: #e2e8f0;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
}
.dd-board__bands { display: none; }
.dd-board__body { display: flex; flex-direction: column; gap: 12px; }
.dd-board__story { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dd-board__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dd-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
}
.dd-chip svg { width: 11px; height: 11px; stroke-width: 2.5; }
.dd-chip--won { background: #fbbf24; color: #1c1917; }
.dd-chip--lost { background: #dc2626; color: #ffffff; }
.dd-chip--upset { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
.dd-chip--xp { background: color-mix(in srgb, #f59e0b 22%, var(--card)); color: var(--dd-gold-strong); }
.dd-board__title { margin: 0; font-size: 36px; font-weight: 800; line-height: 0.95; text-transform: uppercase; color: #ffffff; }
.dd-board__gold { color: #fbbf24; }
.dd-board__sub { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: #cbd5e1; }
.dd-board__sub b { color: #ffffff; }

.dd-linescore { width: 100%; margin-top: 2px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dd-linescore th,
.dd-linescore td { padding: 7px 0; line-height: 1.1; text-align: center; }
.dd-linescore thead th { padding: 0 0 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; }
.dd-linescore thead th:not(.dd-linescore__team) { width: 28px; }
.dd-linescore tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.dd-linescore .dd-linescore__team { text-align: left; white-space: nowrap; }
.dd-linescore tbody .dd-linescore__team { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #cbd5e1; }
.dd-linescore tbody .dd-linescore__team::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 1px;
  background: #3b82f6;
}
.dd-linescore tbody .dd-linescore__row--them .dd-linescore__team::before { background: #d97706; }
.dd-linescore tbody td { font-family: 'Barlow Condensed', 'Fira Sans', ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 700; color: #64748b; }
.dd-linescore tbody .is-top { color: #ffffff; }
.dd-linescore tbody .dd-linescore__none { color: #475569; }
.dd-linescore .dd-linescore__total { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.dd-linescore thead th.dd-linescore__total { width: 30px; }
.dd-linescore tbody td.dd-linescore__total { font-size: 22px; font-weight: 800; }

.dd-recap__cards { display: flex; flex-direction: column; gap: 14px; }
.dd-recap__actions { display: contents; }

/* Your odds after every game: one line, a label per point, W/L under each game. */
.dd-swing { gap: 4px; padding: 14px 14px 10px; }
.dd-swing__head { display: flex; flex-direction: column; gap: 3px; }
.dd-swing__note { font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.dd-swing__note b { font-weight: 800; color: var(--fg); }
.dd-swing__chart { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.dd-swing__chart--wide { display: none; }
.dd-swing__chart text { font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif; }
.dd-swing__grid { fill: none; stroke: var(--border); stroke-width: 1; }
.dd-swing__grid--mid { stroke: color-mix(in srgb, var(--muted-fg) 45%, transparent); stroke-dasharray: 4 5; }
.dd-swing__axis { font-weight: 700; fill: color-mix(in srgb, var(--muted-fg) 80%, transparent); }
.dd-swing__axis--x { text-anchor: middle; fill: var(--muted-fg); }
.dd-swing__band { fill: color-mix(in srgb, var(--dd-you) 9%, transparent); }
.dd-swing__band-label { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-anchor: middle; fill: var(--muted-fg); }
.dd-swing__area { fill: var(--dd-you); fill-opacity: 0.07; }
.dd-swing__line { fill: none; stroke: var(--dd-you); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dd-swing__hit { fill: transparent; }
.dd-swing__dot { fill: var(--card); stroke: var(--dd-you); stroke-width: 2.5; }
.dd-swing__dot--won { fill: var(--dd-you); stroke: var(--card); }
.dd-swing__dot--lost { fill: var(--dd-danger); stroke: var(--card); }
.dd-swing__dot--cleared { fill: #fbbf24; stroke: var(--card); }
.dd-swing__label { font-weight: 700; text-anchor: middle; fill: color-mix(in srgb, var(--fg) 82%, transparent); }
.dd-swing__label--hi,
.dd-swing__label--end { font-weight: 800; fill: var(--fg); }
.dd-swing__label--left { text-anchor: end; }
.dd-swing__mark--w { fill: #2563eb; }
.dd-swing__mark--l { fill: #b45309; }
.dd-swing__mark-text { font-weight: 800; text-anchor: middle; fill: #ffffff; }
.dd-swing__chart--narrow .dd-swing__label { font-size: 10.5px; }
.dd-swing__chart--narrow .dd-swing__label--hi { font-size: 12px; }
.dd-swing__chart--narrow .dd-swing__axis { font-size: 9px; }
.dd-swing__chart--narrow .dd-swing__axis--x { font-size: 9.5px; }
.dd-swing__chart--narrow .dd-swing__mark-text { font-size: 9px; }
.dd-swing__chart--wide .dd-swing__label { font-size: 12px; }
.dd-swing__chart--wide .dd-swing__label--hi { font-size: 14px; }
.dd-swing__chart--wide .dd-swing__axis { font-size: 10.5px; }
.dd-swing__chart--wide .dd-swing__mark-text { font-size: 10px; }

/* By the numbers: four tiles here, one card of rows on desktop. */
.dd-tally { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.dd-tally__label { display: none; }
.dd-tally__list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dd-tally__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.dd-tally__item dt { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-fg); }
.dd-tally__item dd { margin: 0; }
.dd-tally__value { font-size: 24px; font-weight: 800; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.dd-tally__dim { font-weight: 700; color: color-mix(in srgb, var(--muted-fg) 75%, transparent); }
.dd-tally__note { font-size: 10.5px; font-weight: 600; line-height: 1.35; color: var(--muted-fg); }

/* What's next: the next matchup, the tier's XP, or the way back to the draft. */
.dd-next { gap: 10px; padding: 14px; }
.dd-next__label { color: var(--dd-bronze); }
.dd-next--lost .dd-next__label { color: var(--dd-danger); }
.dd-next--cleared .dd-next__label { color: var(--dd-gold-strong); }
.dd-next--cleared {
  border: 1.5px solid #f59e0b;
  background: linear-gradient(160deg, color-mix(in srgb, #f59e0b 10%, var(--card)), var(--card) 60%);
}
.dd-next__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dd-next__title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dd-next__name { font-size: 30px; font-weight: 800; line-height: 0.9; text-transform: uppercase; color: var(--fg); }
.dd-next__meta { font-size: 11.5px; font-weight: 600; color: var(--muted-fg); }
.dd-next__odds { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dd-next__odds b { font-size: 28px; font-weight: 800; line-height: 0.9; color: var(--fg); }
.dd-next .dd-verdict { height: 19px; padding: 0 7px; font-size: 9px; letter-spacing: 0.1em; }
.dd-next__route { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); }
.dd-next--cleared .dd-next__route { border-top-color: color-mix(in srgb, #fbbf24 45%, var(--border)); }
.dd-next__stop { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--fg); }
.dd-next__node {
  width: 20px; height: 20px; flex-shrink: 0; box-sizing: border-box; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #b45309; color: #b45309; font-size: 10px; font-weight: 900;
}
.dd-next__node svg { width: 11px; height: 11px; }
.dd-next__stop--won .dd-next__node { border-color: #b45309; background: #b45309; color: #ffffff; }
.dd-next__stop--lost .dd-next__node { border-color: var(--dd-danger); background: var(--dd-danger); color: #ffffff; }
.dd-next__stop--now { font-weight: 800; }
.dd-next__stop--now .dd-next__node { box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18); }
.dd-next__stop--now.dd-next__stop--lost .dd-next__node { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-danger) 18%, transparent); }
.dd-next--cleared .dd-next__stop--now .dd-next__node { border-color: #fbbf24; background: #fbbf24; color: #1c1917; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }
.dd-next__stop--later,
.dd-next__stop--dead { opacity: 0.55; }
.dd-next__stop--later .dd-next__node,
.dd-next__stop--dead .dd-next__node { border-style: dashed; border-color: var(--muted-fg); color: var(--muted-fg); }
.dd-next__stop--prize .dd-next__node { border: 2px dashed #d4a017; background: color-mix(in srgb, #fbbf24 10%, var(--card)); color: var(--dd-gold-strong); }
.dd-next__who { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-next__res { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--muted-fg); }
.dd-next__stop--now .dd-next__res { font-weight: 800; color: var(--dd-bronze); }
.dd-next__stop--lost .dd-next__res { color: var(--dd-danger); }
.dd-next--cleared .dd-next__stop--now .dd-next__res { color: var(--dd-gold-strong); }
.dd-next__stop--prize .dd-next__res { font-weight: 800; color: var(--dd-gold-strong); }
.dd-next__note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--card2); font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--muted-fg); }
.dd-next__note b { color: var(--fg); }
.dd-next--cleared .dd-next__note { background: color-mix(in srgb, #fbbf24 8%, var(--card)); border: 1px solid color-mix(in srgb, #fbbf24 35%, var(--border)); }

/* Tier cleared: the victory lap (renderDynastyCleared). The bracket's court
   once more, a little shorter, with both keys painted yours: a medallion for
   the tier on the center circle, the five who cleared it gathered round it,
   and the three series under the floor. The XP, the rewards and the next
   tier stack beneath it and the button rides the bottom of the screen, like
   the bracket's; css/desktop.css turns the floor landscape, moves the series
   into the scorebug and sets the three cards in a row with the button inside
   the last. */
.dd-ceremony { width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: 12px; }
html[data-page="game"] #app > .main-gradient > main > .dd-ceremony { max-width: min(100%, 28rem); }
.dd-ceremony__cards,
.dd-ceremony__actions { display: contents; }

.dd-hardwood--ceremony {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "you badge" "floor floor" "results results";
}
.dd-ceremony__badge {
  grid-area: badge;
  display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 9px;
  background: rgba(251, 191, 36, 0.14); color: #fcd34d;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.dd-ceremony__badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.dd-ceremony__results { grid-area: results; list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.dd-ceremony__result {
  flex: 1 1 0; min-width: 0; min-height: 32px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 8px; border-radius: 8px;
}
.dd-ceremony__result-team {
  min-width: 0; font-size: 12.5px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-ceremony__result-score { flex-shrink: 0; font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-ceremony__tick { display: none; }

.dd-hardwood--ceremony .dd-hardwood__box { aspect-ratio: 338 / 420; }

/* Streamers left on the floor after the clear. */
.dd-ceremony__bits { position: absolute; inset: 0; pointer-events: none; }
.dd-ceremony__bits--land { display: none; }
.dd-ceremony__bit { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--turn, 0deg)); }
.dd-ceremony__bit--bar { width: 1.8cqw; height: 3.6cqw; border-radius: 2px; }
.dd-ceremony__bit--dot { width: 2.1cqw; height: 2.1cqw; border-radius: 999px; }
.dd-ceremony__bit--you { background: #2563eb; }
.dd-ceremony__bit--navy { background: #1d4ed8; }
.dd-ceremony__bit--gold { background: #fbbf24; }
.dd-ceremony__bit--white { background: #ffffff; }

/* The medallion on the center circle: navy and gold in both themes. */
.dd-medal {
  position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  box-sizing: border-box; border-radius: 999px; border: 1.5cqw solid #fbbf24;
  background: radial-gradient(circle at 50% 32%, #243a63, #0f1a2e 72%);
  box-shadow: 0 0 0 2.1cqw rgba(251, 191, 36, 0.22), 0 18px 36px rgba(15, 23, 42, 0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw;
  text-align: center; color: #ffffff;
}
.dd-medal__icon { display: flex; color: #fbbf24; }
.dd-medal__icon svg { width: 6.5cqw; height: 6.5cqw; }
.dd-medal__tier { font-size: clamp(7px, 2.5cqw, 10px); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #fcd34d; }
.dd-medal__title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; }
.dd-medal__name { font-size: calc(8.6cqw * var(--fit, 1)); font-weight: 800; line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.dd-medal__cleared { font-size: 5.6cqw; font-weight: 800; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: #fbbf24; }
.dd-medal__games { display: none; }

/* The cards: the XP, what it bought, and what's next. */
.dd-ceremony__xp,
.dd-ceremony__unlocks,
.dd-ceremony__next { gap: 9px; padding: 14px; }
.dd-ceremony__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dd-ceremony__haul { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dd-ceremony__amount { font-size: 40px; font-weight: 800; line-height: 0.9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-ceremony__level { margin: 0; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.dd-ceremony__level > span { font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-fg); }
.dd-ceremony__level b { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dd-ceremony__level i { font-style: normal; font-weight: 600; color: var(--muted-fg); }
.dd-ceremony__level em { font-style: normal; color: var(--dd-bronze); }
.dd-ceremony__line { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--muted-fg); }
.dd-ceremony__line b { color: var(--fg); }
.dd-ceremony__warn { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--dd-danger); }
.dd-ceremony__bar { height: 8px; border-radius: 999px; background: var(--card2); overflow: hidden; }
.dd-ceremony__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dd-ceremony__barmeta { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 600; color: var(--muted-fg); }

.dd-ceremony__room {
  flex-shrink: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--dd-you); white-space: nowrap;
}
.dd-ceremony__room:hover { text-decoration: underline; }
.dd-ceremony__room:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.dd-ceremony__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.dd-ceremony__tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 4px 4px 5px; border-radius: 10px; background: var(--card2); text-align: center;
}
.dd-ceremony__tile .reward-preview { height: 40px; }
.dd-ceremony__tile .reward-preview > .reward-medallion { width: auto; height: 100%; }
.dd-ceremony__tile .reward-title-plaque { border-width: 2px; padding: 2px; }
.dd-ceremony__tile .reward-title-plaque > svg { width: 60%; height: 60%; }
.dd-ceremony__tile .reward-title-plaque > span { display: none; }
/* Two lines at most, centred; a name that needs a third ends in an ellipsis. */
.dd-ceremony__name {
  display: flex; align-items: center; justify-content: center; height: 2.2em; max-width: 100%;
  font-size: 9px; font-weight: 700; line-height: 1.1; color: var(--fg);
}
.dd-ceremony__name > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dd-ceremony__tile--next { background: none; border: 1.5px dashed var(--border); }
.dd-ceremony__tile--next .dd-ceremony__name { color: var(--muted-fg); }
.dd-ceremony__lock {
  height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted-fg);
}
.dd-ceremony__lock svg { width: 14px; height: 14px; }
.dd-ceremony__lock small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.dd-ceremony__tile--more { justify-content: center; background: none; border: 1.5px dashed var(--border); color: var(--muted-fg); }
.dd-ceremony__tile--more b { font-size: 22px; font-weight: 800; line-height: 1; color: var(--fg); }
.dd-ceremony__more { font-size: 9.5px; font-weight: 700; }
.dd-ceremony__upnext { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--border); }
.dd-ceremony__upnext .reward-preview { width: 52px; height: 44px; flex-shrink: 0; opacity: 0.6; filter: grayscale(0.5); }
.dd-ceremony__upnext .reward-preview > .reward-medallion { width: auto; height: 100%; }
.dd-ceremony__upnext .reward-title-plaque > span { display: none; }
.dd-ceremony__upnext p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted-fg); }
.dd-ceremony__upnext p b { color: var(--fg); }
.dd-ceremony__upnext p span { font-size: 11px; }

.dd-ceremony__pay { font-size: 11px; font-weight: 600; color: var(--muted-fg); white-space: nowrap; }
.dd-ceremony__pay b { font-weight: 800; color: var(--fg); }
.dd-ceremony__tier { font-size: 32px; font-weight: 800; line-height: 0.9; text-transform: uppercase; }
.dd-ceremony__teams { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; }
.dd-ceremony__teams > li {
  flex: 1 1 0; min-width: 0; min-height: 28px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px; border-radius: 8px;
}
.dd-ceremony__teams b { min-width: 0; font-size: 13px; font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-ceremony__teams span { display: none; font-size: 11px; font-weight: 800; opacity: 0.85; font-variant-numeric: tabular-nums; }
.dd-ceremony__note { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--muted-fg); }
.dd-ceremony__next--trophy {
  flex-direction: row; align-items: center; gap: 14px;
  border: 1.5px solid color-mix(in srgb, var(--dd-gold) 55%, var(--border));
  background: radial-gradient(circle at 20% 40%, color-mix(in srgb, var(--dd-gold) 18%, var(--card)), var(--card) 70%);
}
.dd-ceremony__trophy-art { width: 72px; height: 102px; flex-shrink: 0; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3)); animation: scaleIn 0.5s ease-out; }
.dd-ceremony__trophy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dd-ceremony__next--trophy .dd-ceremony__tier { font-size: 26px; color: var(--dd-gold-strong); }
/* A 320px phone: the scorebug drops its "Series" label, each series puts its
   score under the name, and the next tier's names step down a size, so
   nothing loses letters. */
@media (max-width: 374px) {
  .dd-hardwood--ceremony .dd-hardwood__str small { display: none; }
  .dd-ceremony__result { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 5px 8px; }
  .dd-ceremony__result-team { max-width: 100%; font-size: 11px; }
  .dd-ceremony__result-score { font-size: 15px; }
  .dd-ceremony__teams > li { padding: 0 6px; }
  .dd-ceremony__teams b { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-route__stop--current .dd-route__node,
  .dd-ceremony__trophy-art,
  .dd-prompt,
  .dd-final { animation: none; }
  .dd-btn,
  .dd-link { transition: none; }
}

/* ── 1v1 screen — the home screen's arena look (js/ui/render.js
   renderPvpHubScreen). Dark whatever the theme, like the reference home
   screen it copies; three tall cards on a wide window, rows on a phone. ── */
.pvphub-arena {
  /* Ground blueprint: a faint line drawing of the ground (the boundary and
     the 30-yard circle, the pitch behind the middle card, a sightscreen at
     each window edge) over a light grid. Light theme here; the dark theme
     below redraws it in pale blue on navy. */
  --ph-fg:        #0f172a;
  --ph-muted:     #526074;
  --ph-back:      #3b475c;
  --ph-card:      linear-gradient(180deg, #ffffff, #f4f6fb);
  --ph-card-line: rgba(15, 23, 42, .1);
  --ph-card-glow: 0 18px 40px rgba(15, 23, 42, .12), inset 0 1px 0 #ffffff;
  --ph-court:     url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%201600%20900'%20preserveAspectRatio='xMidYMid%20slice'%20fill='none'%20stroke='rgba(37%2C99%2C235%2C.2)'%20stroke-width='4'%3E%3Cellipse%20cx='800'%20cy='450'%20rx='770'%20ry='400'/%3E%3Cellipse%20cx='800'%20cy='450'%20rx='740'%20ry='372'%20stroke-dasharray='14%2014'/%3E%3Cellipse%20cx='800'%20cy='450'%20rx='540'%20ry='280'%20fill='rgba(37%2C99%2C235%2C.05)'/%3E%3Crect%20x='650'%20y='410'%20width='300'%20height='80'%20rx='4'%20fill='rgba(249%2C115%2C22%2C.07)'/%3E%3Cpath%20d='M690%20400V500M910%20400V500'/%3E%3Crect%20x='30'%20y='370'%20width='22'%20height='160'%20rx='4'%20fill='rgba(249%2C115%2C22%2C.07)'/%3E%3Crect%20x='1548'%20y='370'%20width='22'%20height='160'%20rx='4'%20fill='rgba(249%2C115%2C22%2C.07)'/%3E%3C/svg%3E");
  --ph-grid:      rgba(37, 99, 235, .045);
  --ph-bg:        linear-gradient(180deg, #f8f9fc 0%, #eef2f8 100%);
  --ph-glow-top:  rgba(249, 115, 22, .14);
  min-height: var(--app-h, 100vh);
  box-sizing: border-box;
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ph-fg);
  font-family: 'Fira Sans', system-ui, sans-serif;
  background:
    radial-gradient(ellipse 90% 30% at 50% 0%, var(--ph-glow-top), transparent 70%),
    var(--ph-court) center / cover no-repeat,
    linear-gradient(var(--ph-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--ph-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--ph-bg);
}
html[data-theme="blacktop"] .pvphub-arena {
  --ph-fg:        #f4f6fb;
  --ph-muted:     #aab3c8;
  --ph-back:      #c7cfe0;
  --ph-card:      linear-gradient(180deg, rgba(24, 31, 50, .92), rgba(12, 17, 30, .96));
  --ph-card-line: rgba(255, 255, 255, .08);
  --ph-card-glow: 0 20px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  --ph-court:     url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%201600%20900'%20preserveAspectRatio='xMidYMid%20slice'%20fill='none'%20stroke='rgba(148%2C180%2C255%2C.18)'%20stroke-width='4'%3E%3Cellipse%20cx='800'%20cy='450'%20rx='770'%20ry='400'/%3E%3Cellipse%20cx='800'%20cy='450'%20rx='740'%20ry='372'%20stroke-dasharray='14%2014'/%3E%3Cellipse%20cx='800'%20cy='450'%20rx='540'%20ry='280'%20fill='rgba(148%2C180%2C255%2C.05)'/%3E%3Crect%20x='650'%20y='410'%20width='300'%20height='80'%20rx='4'%20fill='rgba(242%2C193%2C78%2C.07)'/%3E%3Cpath%20d='M690%20400V500M910%20400V500'/%3E%3Crect%20x='30'%20y='370'%20width='22'%20height='160'%20rx='4'%20fill='rgba(242%2C193%2C78%2C.07)'/%3E%3Crect%20x='1548'%20y='370'%20width='22'%20height='160'%20rx='4'%20fill='rgba(242%2C193%2C78%2C.07)'/%3E%3C/svg%3E");
  --ph-grid:      rgba(148, 180, 255, .04);
  --ph-bg:        linear-gradient(180deg, #0b1224 0%, #060a16 100%);
  --ph-glow-top:  rgba(249, 115, 22, .18);
}
.pvphub-arena__top .theme-toggle { margin-left: 10px; }
.pvphub-arena__top {
  width: 100%;
  max-width: 1152px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pvphub-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ph-back);
  font: 600 15px/1 'Fira Sans', system-ui, sans-serif;
  cursor: pointer;
}
.pvphub-back:hover { color: var(--ph-fg); }
.pvphub-arena__kicker {
  font: 700 12px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .26em;
  color: #f97316;
}
.pvphub-arena__hero {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.pvphub-arena__swords { width: 56px; height: 56px; }
.pvphub-arena__title {
  margin: 0;
  font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.01em;
}
.pvphub-arena__title span { color: #f97316; }
.pvphub-arena__sub { margin: 0; font-size: 14px; color: var(--ph-muted); }
.pvphub-arena__rule {
  margin-top: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #f97316;
  font: 700 13px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .28em;
  color: #f97316;
}

@media (min-width: 900px) {
  .pvphub-arena { padding: 28px 64px 48px; }
  .pvphub-arena__swords { width: 72px; height: 72px; }
  .pvphub-arena__title { font-size: 64px; }
  .pvphub-arena__sub { font-size: 16px; }
  .pvphub-arena__rule { margin-top: 14px; font-size: 14px; }
}

/* ── Online screen (js/ui/render/home.js renderOnlineHubScreen) — Play live
   is the centrepiece: one big card with two doors (Create match, or type a
   friend's code right here). Send a challenge and its newest result sit
   under it; vs AI and Local are a small Practice offline row. A plain
   background rather than the court blueprint: the arena's gradient and its
   orange glow. Stacked on a phone; the doors sit side by side from 900px. ── */
.pvphub-arena.olhub {
  background:
    radial-gradient(ellipse 80% 38% at 50% 0%, var(--ph-glow-top), transparent 70%),
    var(--ph-bg);
}
.olhub {
  --ol-soft:      #eef2f8;
  --ol-soft-line: rgba(15, 23, 42, .12);
  --ol-solid:     #ffffff;
  --ol-inv:       #ffffff;
  --ol-inv-edge:  rgba(2, 6, 23, .4);
  --ol-o-line:    rgba(249, 115, 22, .62);
  --ol-o-ring:    rgba(249, 115, 22, .16);
  --ol-b-line:    rgba(37, 99, 235, .4);
  --ol-b-ink:     #1d4ed8;
  --ol-b-soft:    rgba(37, 99, 235, .09);
  --ol-chip:      rgba(255, 255, 255, .72);
}
html[data-theme="blacktop"] .olhub {
  --ol-soft:      rgba(255, 255, 255, .06);
  --ol-soft-line: rgba(255, 255, 255, .14);
  --ol-solid:     #111a2e;
  --ol-inv:       #0b1224;
  --ol-inv-edge:  rgba(148, 163, 184, .45);
  --ol-o-line:    rgba(249, 115, 22, .58);
  --ol-o-ring:    rgba(249, 115, 22, .18);
  --ol-b-line:    rgba(96, 165, 250, .42);
  --ol-b-ink:     #93b4ff;
  --ol-b-soft:    rgba(96, 165, 250, .14);
  --ol-chip:      rgba(255, 255, 255, .04);
}
.olhub .pvphub-arena__title { font-size: 36px; }
.olhub .pvphub-arena__sub { max-width: 560px; }
.olhub-main {
  width: 100%;
  max-width: 900px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.olhub-main--solo { max-width: 560px; }

/* Play live: the big card. */
.olhub-live {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px 14px;
  border-radius: 24px;
  border: 2px solid var(--ol-o-line);
  background: var(--ph-card);
  box-shadow: var(--ph-card-glow), 0 0 0 6px var(--ol-o-ring), 0 28px 80px rgba(249, 115, 22, .2);
  text-align: center;
}
.olhub-live::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 240px;
  background: radial-gradient(70% 100% at 50% 0%, rgba(249, 115, 22, .17), transparent 75%);
  pointer-events: none;
}
.olhub-live > * { position: relative; }
.olhub-live__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
  font: 800 12px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .18em;
}
html[data-theme="blacktop"] .olhub-live__pill { color: #f87171; }
.olhub-live__pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .2);
  animation: olhub-pulse 1.6s ease-in-out infinite;
}
@keyframes olhub-pulse { 50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } }
.olhub-live__title { margin: 0; display: flex; align-items: center; gap: 6px; }
.olhub-live__icon { flex-shrink: 0; width: 46px; height: 46px; }
.olhub-live__icon svg,
.olhub-duel__icon svg,
.olhub-mini__icon svg { display: block; width: 100%; height: 100%; }
.olhub-live__name {
  font: italic 800 54px/.9 'Barlow Condensed', 'Fira Sans', sans-serif;
  text-transform: uppercase;
}
.olhub-live__name span { color: #f97316; }
.olhub-live__desc { margin: 0; max-width: 540px; font-size: 14px; line-height: 1.45; color: var(--ph-muted); }
.olhub-live__foot { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ph-muted); }
.olhub-doors { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.olhub-door {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--ol-soft);
  text-align: left;
}
/* A phone keeps each door to its heading and control. */
.olhub-door__lbl,
.olhub-door__p { display: none; }
.olhub-door__lbl {
  font: 800 11px/1 'Fira Sans', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.olhub-door__h {
  font: 800 21px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.olhub-door__p { font-size: 13.5px; line-height: 1.4; color: var(--ph-muted); }
.olhub-or { display: flex; align-items: center; gap: 10px; }
.olhub-or::before,
.olhub-or::after { content: ''; flex: 1; height: 1px; background: var(--ol-soft-line); }
.olhub-or span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ol-soft-line);
  background: var(--ol-solid);
  font: 800 12px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.olhub-btn {
  height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  font: 800 16px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
}
.olhub-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.olhub-btn--o { background: linear-gradient(180deg, #ff9a2e, #f26a0a); box-shadow: 0 5px 0 #a53e04, 0 12px 24px rgba(242, 106, 10, .3); }
.olhub-btn--b { background: linear-gradient(180deg, #3577f2, #1d4ed8); box-shadow: 0 5px 0 #1e3a8a, 0 12px 24px rgba(37, 99, 235, .28); }
.olhub-btn:hover { filter: brightness(1.07); }
.olhub-btn:active { transform: translateY(3px); }
.olhub-btn:focus-visible,
.olhub-mini:focus-visible,
.olhub-inbox:focus-visible { outline: 3px solid #fdba74; outline-offset: 3px; }
.olhub-join { display: flex; gap: 8px; }
/* Beats responsive.css's game-page `input { font-size: max(16px, …) }` iOS
   zoom guard — the box stays above 16px either way. */
.olhub input.olhub-join__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px dashed var(--ol-o-line);
  background: var(--ol-solid);
  color: var(--ph-fg);
  font: 800 22px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}
.olhub input.olhub-join__input::placeholder { color: var(--ph-muted); opacity: .5; }
.olhub input.olhub-join__input:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .22); }
.olhub-join__btn { flex-shrink: 0; width: 92px; background: var(--ph-fg); color: var(--ol-inv); box-shadow: 0 5px 0 var(--ol-inv-edge); }

/* Send a challenge, with the newest result under it. */
.olhub-duel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1.5px solid var(--ol-b-line);
  background: var(--ph-card);
  box-shadow: var(--ph-card-glow);
}
.olhub-duel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.olhub-duel__icon { flex-shrink: 0; width: 46px; height: 46px; }
.olhub-duel__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.olhub-duel__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ol-b-soft);
  color: var(--ol-b-ink);
  font: 800 12px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .18em;
}
.olhub-duel__pill svg { width: 12px; height: 12px; }
.olhub-duel__name {
  margin: 0;
  font: 800 24px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.olhub-duel__tag { font-size: 12.5px; line-height: 1.3; color: var(--ph-muted); }
.olhub-duel__cta { flex: 1 1 100%; }
.olhub-inbox {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--ph-card-line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.olhub-inbox__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  font: 800 11px/1 'Fira Sans', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.olhub-inbox__all { color: var(--ol-b-ink); }

/* vs AI and Local: the small Practice offline row. */
.olhub-practice { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.olhub-practice__lbl {
  margin: 0;
  font: 800 11px/1 'Fira Sans', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.olhub-practice__row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.olhub-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--ph-card-line);
  background: var(--ol-chip);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease;
}
.olhub-mini:hover { border-color: rgba(249, 115, 22, .7); }
.olhub-mini__icon { flex-shrink: 0; width: 28px; height: 28px; }
.olhub-mini__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.olhub-mini__txt b {
  font: 800 16px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.olhub-mini__txt small { font-size: 11px; line-height: 1.3; color: var(--ph-muted); }
.olhub-chev { flex-shrink: 0; width: 16px; height: 16px; color: var(--ph-muted); }
.olhub-offline { margin: 16px 0 0; font-size: 13px; color: var(--ph-muted); text-align: center; }

@media (min-width: 900px) {
  .olhub .pvphub-arena__title { font-size: 46px; }
  .olhub-main { margin-top: 26px; }
  .olhub-live { padding: 30px 40px 26px; gap: 16px; border-radius: 30px; }
  .olhub-live__icon { width: 78px; height: 78px; }
  .olhub-live__name { font-size: 96px; }
  .olhub-live__desc { font-size: 17px; }
  .olhub-live__foot { font-size: 13px; }
  .olhub-doors { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; margin-top: 6px; }
  .olhub-or { flex-direction: column; }
  .olhub-or::before,
  .olhub-or::after { width: 1px; height: auto; }
  .olhub-or span { width: 40px; height: 40px; font-size: 14px; }
  .olhub-door { padding: 20px 22px 22px; }
  .olhub-door__lbl,
  .olhub-door__p { display: block; }
  .olhub-door__h { font-size: 27px; }
  .olhub-door__p { margin-top: -2px; }
  .olhub-door > .olhub-btn,
  .olhub-join { margin-top: auto; }
  .olhub-btn { height: 56px; font-size: 20px; letter-spacing: .1em; }
  .olhub input.olhub-join__input { height: 56px; font-size: 24px; }
  .olhub-join__btn { width: 112px; }
  .olhub-duel { padding: 20px 24px 16px; }
  .olhub-duel__head { flex-wrap: nowrap; gap: 16px; }
  .olhub-duel__icon { width: 60px; height: 60px; }
  .olhub-duel__name { font-size: 30px; }
  .olhub-duel__tag { font-size: 14px; }
  .olhub-duel__cta { flex: 0 0 auto; padding: 0 26px; }
  .olhub-practice { flex-direction: row; justify-content: center; gap: 18px; }
  .olhub-practice__row { width: auto; grid-template-columns: repeat(2, 250px); gap: 12px; }
  .olhub-mini { padding: 8px 14px; }
  .olhub-mini__icon { width: 32px; height: 32px; }
  .olhub-mini__txt b { font-size: 18px; }
  .olhub-mini__txt small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .olhub-live__pill i { animation: none; }
  .olhub-btn:active { transform: none; }
  .olhub-mini { transition: none; }
}

/* A newer release waiting before a live match (render.js renderAppUpdateBanner). */
.app-update {
  width: 100%;
  box-sizing: border-box;
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.1);
  text-align: left;
}
.app-update__text { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--ph-fg, inherit); }
.app-update__btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #15803d;
  color: #ffffff;
  font: 800 14px/1 'Fira Sans', system-ui, sans-serif;
  cursor: pointer;
}
.app-update__btn:hover { filter: brightness(1.08); }
.app-update__btn:focus-visible { outline: 3px solid #86efac; outline-offset: 3px; }
.lvsb-actions .app-update { margin: 0; }
@media (max-width: 520px) {
  .app-update { flex-direction: column; align-items: stretch; }
}

/* ── Live 1v1 lobby (js/ui/render.js renderLiveLobby) — the arena again, with
   an arena scoreboard as the one card: HOME (seat 1, the host) and AWAY
   (seat 2) name plates either side of the best-of-7 series score, the snake
   draft order along the bottom. The board has its own palette per theme: a
   white board with navy score digits in the light theme, a black jumbotron
   in the dark one. Phone: the score sits above the two plates and the
   draft order wraps to two rows of five; 768px+: one scoreboard row. ── */
.lvsb {
  --sb-panel:       linear-gradient(180deg, #ffffff, #f3f6fb);
  --sb-line:        rgba(15, 23, 42, .1);
  --sb-strip:       rgba(15, 23, 42, .035);
  --sb-shadow:      0 24px 50px rgba(15, 23, 42, .14), inset 0 1px 0 #ffffff;
  --sb-live:        #dc2626;
  --sb-plate-fg:    #0f172a;
  --sb-s1-ink:      #c2410c;
  --sb-s1-fill:     rgba(249, 115, 22, .08);
  --sb-s1-line:     rgba(234, 88, 12, .55);
  --sb-s1-pip:      rgba(249, 115, 22, .12);
  --sb-s2-ink:      #1d4ed8;
  --sb-s2-fill:     rgba(37, 99, 235, .05);
  --sb-s2-line:     rgba(37, 99, 235, .38);
  --sb-s2-pip:      rgba(37, 99, 235, .07);
  --sb-placeholder: rgba(194, 65, 12, .5);
  --sb-digit-bg:    #0f172a;
  --sb-dash:        #94a3b8;
  --sb-soft:        #eef2f8;
  --sb-soft-line:   rgba(15, 23, 42, .14);
}
html[data-theme="blacktop"] .lvsb {
  --sb-panel:       linear-gradient(180deg, #0a0f1d, #04070f);
  --sb-line:        rgba(255, 255, 255, .1);
  --sb-strip:       rgba(255, 255, 255, .02);
  --sb-shadow:      0 30px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 6px rgba(255, 255, 255, .02);
  --sb-live:        #f87171;
  --sb-plate-fg:    #ffffff;
  --sb-s1-ink:      #fb923c;
  --sb-s1-fill:     rgba(249, 115, 22, .08);
  --sb-s1-line:     rgba(249, 115, 22, .55);
  --sb-s1-pip:      rgba(249, 115, 22, .16);
  --sb-s2-ink:      #93b4ff;
  --sb-s2-fill:     rgba(96, 165, 250, .05);
  --sb-s2-line:     rgba(148, 180, 255, .35);
  --sb-s2-pip:      rgba(96, 165, 250, .08);
  --sb-placeholder: rgba(253, 186, 116, .45);
  --sb-digit-bg:    #020409;
  --sb-dash:        #5a6478;
  --sb-soft:        rgba(255, 255, 255, .05);
  --sb-soft-line:   rgba(255, 255, 255, .14);
}
.lvsb .pvphub-arena__sub { max-width: 640px; }
.lvsb-board {
  width: 100%;
  max-width: 1000px;
  margin-top: 22px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--sb-line);
  background: var(--sb-panel);
  box-shadow: var(--sb-shadow);
  animation: scaleIn .2s ease-out;
}
.lvsb-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sb-line);
  background: var(--sb-strip);
  font: 700 12px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .2em;
  color: var(--ph-muted);
}
.lvsb-strip__mid { color: var(--ph-fg); letter-spacing: .28em; }
.lvsb-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--sb-live); }
.lvsb-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .2);
  animation: olhub-pulse 1.6s ease-in-out infinite;
}
.lvsb-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "score score" "home away";
  gap: 18px 12px;
  padding: 20px 16px 18px;
}
.lvsb-seat { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lvsb-seat--s1 { grid-area: home; }
.lvsb-seat--s2 { grid-area: away; text-align: right; }
.lvsb-seat__label {
  font: 800 11px/1.15 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--sb-s1-ink);
}
.lvsb-seat--s2 .lvsb-seat__label { color: var(--sb-s2-ink); }
.lvsb-seat__hint { font-size: 12px; line-height: 1.35; color: var(--ph-muted); }
.lvsb-plate {
  width: 100%;
  min-width: 0;
  height: 56px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  border: 2px solid var(--sb-s1-line);
  background: var(--sb-s1-fill);
  color: var(--sb-plate-fg);
  font: italic 800 22px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}
.lvsb-plate--s2 { border-color: var(--sb-s2-line); background: var(--sb-s2-fill); justify-content: flex-end; }
.lvsb-plate--open { border-style: dashed; color: var(--sb-s2-ink); }
.lvsb-plate__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
input.lvsb-plate { -webkit-appearance: none; appearance: none; margin: 0; }
/* Beats responsive.css's game-page `input { font-size: max(16px, …) }` (an
   iOS zoom guard) — both plate sizes stay above 16px, so the guard holds. */
.lvsb input.lvsb-plate { font-size: 22px; }
input.lvsb-plate--s2 { text-align: right; }
input.lvsb-plate::placeholder { color: var(--sb-placeholder); opacity: 1; }
input.lvsb-plate:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .22); }
.lvsb-score { grid-area: score; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lvsb-score__label {
  font: 700 12px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .28em;
  color: var(--ph-muted);
}
.lvsb-digits { display: flex; align-items: center; gap: 10px; }
.lvsb-digits i { font: 800 30px/1 'Barlow Condensed', 'Fira Sans', sans-serif; font-style: normal; color: var(--sb-dash); }
.lvsb-digit {
  width: 56px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--sb-digit-bg);
  border: 1px solid rgba(251, 191, 36, .28);
  box-shadow: inset 0 0 18px rgba(251, 191, 36, .12);
  font: 800 56px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(251, 191, 36, .45);
}
.lvsb-order {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--sb-line);
}
.lvsb-order__head { display: flex; align-items: baseline; gap: 10px; }
.lvsb-order__title {
  font: 800 13px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .22em;
  color: var(--ph-fg);
}
.lvsb-order__sub { font-size: 12px; color: var(--ph-muted); }
.lvsb-pips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.lvsb-pip {
  min-width: 0;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 9px;
  border: 1px solid var(--sb-s1-line);
  background: var(--sb-s1-pip);
}
.lvsb-pip--s2 { border-color: var(--sb-s2-line); background: var(--sb-s2-pip); }
.lvsb-pip small {
  font: 700 10px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .12em;
  color: var(--ph-muted);
}
.lvsb-pip b {
  max-width: 100%;
  padding: 0 2px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 800 13px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: 0;
  color: var(--sb-s1-ink);
}
.lvsb-pip--s2 b { color: var(--sb-s2-ink); }
.lvsb-actions {
  width: 100%;
  max-width: 460px;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.lvsb-cta {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ff9a2e, #f26a0a);
  box-shadow: 0 5px 0 #a53e04, 0 12px 24px rgba(242, 106, 10, .3);
  color: #ffffff;
  font: 800 19px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
.lvsb-cta:hover { filter: brightness(1.07); }
.lvsb-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #a53e04, 0 6px 14px rgba(242, 106, 10, .3); }
.lvsb-cta:disabled { cursor: progress; filter: saturate(.7); opacity: .8; transform: none; }
.lvsb-cta:focus-visible,
.lvsb-ghost:focus-visible,
.lvsb-link__copy:focus-visible { outline: 3px solid #fdba74; outline-offset: 3px; }
.lvsb-ghost {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--sb-soft-line);
  background: var(--sb-soft);
  color: var(--ph-fg);
  font: 600 14px/1.2 'Fira Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .16s ease;
}
.lvsb-ghost:hover { border-color: rgba(249, 115, 22, .7); }
.lvsb-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ph-muted); }
.lvsb-status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ph-fg);
}
.lvsb-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-s2-ink); }
.lvsb-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 12px;
  border: 1px solid var(--sb-line);
  background: var(--sb-soft);
  text-align: left;
}
.lvsb-link__url {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ph-fg);
  word-break: break-all;
}
.lvsb-link__copy {
  flex-shrink: 0;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9px;
  border: 1.5px solid var(--sb-s1-line);
  background: transparent;
  color: var(--sb-s1-ink);
  font: 800 14px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .14em;
  cursor: pointer;
}
.lvsb-link__copy:hover { background: var(--sb-s1-fill); }
/* The host's match code (waiting) and the friend's box to type it (code). */
.lvsb-code {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--sb-line);
  background: var(--sb-soft);
  text-align: left;
}
.lvsb-code__label {
  flex-shrink: 0;
  font: 800 12px/1.1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .2em;
  color: var(--ph-muted);
  width: 4.2em;
}
.lvsb-code__value {
  flex: 1 1 auto;
  min-width: 0;
  font: 800 28px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--sb-s1-ink);
  font-variant-numeric: tabular-nums;
}
.lvsb-code--input { padding: 8px 14px; cursor: text; }
.lvsb-code--input .lvsb-code__value { color: var(--sb-s2-ink); }
.lvsb-code__field {
  width: 100%;
  height: 48px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid var(--sb-line);
  background: transparent;
  text-transform: uppercase;
  outline: none;
}
.lvsb-code__field:focus { border-bottom-color: #f97316; }
.lvsb-code__field::placeholder { color: var(--ph-muted); opacity: .45; }
.lvsb-blink { animation: lvsb-blink 1.6s ease-in-out infinite; }
@keyframes lvsb-blink { 50% { opacity: .35; } }

@media (min-width: 768px) {
  .lvsb-board { margin-top: 30px; border-radius: 24px; }
  .lvsb-strip { padding: 14px 26px; font-size: 14px; }
  .lvsb-body {
    grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
    grid-template-areas: "home score away";
    align-items: center;
    gap: 12px;
    padding: 30px 30px 26px;
  }
  .lvsb-seat { gap: 10px; }
  .lvsb-seat__label { font-size: 14px; letter-spacing: .24em; }
  .lvsb-seat__hint { font-size: 13px; }
  .lvsb-plate,
  .lvsb input.lvsb-plate { height: 76px; padding: 0 18px; border-radius: 14px; font-size: 36px; letter-spacing: .02em; }
  .lvsb-score__label { font-size: 13px; }
  .lvsb-digits { gap: 12px; }
  .lvsb-digits i { font-size: 40px; }
  .lvsb-digit { width: 84px; height: 104px; border-radius: 12px; font-size: 84px; }
  .lvsb-order { flex-direction: row; align-items: center; gap: 22px; padding: 18px 30px 22px; }
  .lvsb-order__head { flex: 0 0 150px; flex-direction: column; align-items: flex-start; gap: 5px; }
  .lvsb-order__title { font-size: 14px; }
  .lvsb-pips { flex: 1 1 auto; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
  .lvsb-pip { height: 48px; border-radius: 10px; }
  .lvsb-pip b { font-size: 15px; letter-spacing: .06em; }
  .lvsb-code__value { font-size: 36px; letter-spacing: .14em; }
  .lvsb-actions { margin-top: 30px; gap: 14px; }
  .lvsb-cta { height: 62px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lvsb-board,
  .lvsb-live i,
  .lvsb-blink { animation: none; }
  .lvsb-cta,
  .lvsb-ghost { transition: none; }
}

/* ── Dynasty Duel · five in ───────────────────────────────────────────────────
   The draft screen once the five are in: a context bar (mode, tier, bracket,
   draft complete), the decision card (compact court, how the five stacks up
   against the tier with each series' odds, both actions) and, on desktop, a
   verdict rail (status tiles, the weak spot, chemistry split into what costs
   and what helps). Desktop sizing hangs off .draft-workspace--dd, which the
   renderer only sets in that state; the phone keeps the single column. */
.dd-scope {
  --dd-ok:      #15803d;
  --dd-acc-ink: #b45309;
}
.dd-scope.dd-ctx--bronze,
.dd-scope.dd-card--bronze { --dd-acc: var(--dd-bronze); }
.dd-scope.dd-ctx--silver,
.dd-scope.dd-card--silver { --dd-acc: var(--dd-silver); }
.dd-scope.dd-ctx--gold,
.dd-scope.dd-card--gold { --dd-acc: var(--dd-gold); }
.dd-scope.dd-ctx--goat,
.dd-scope.dd-card--goat { --dd-acc: var(--dd-goat); }
.dd-short { display: none; }

/* Context bar */
.dd-ctx {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 52px; padding: 8px 18px; border-radius: 14px;
  border: 1px solid var(--dk-line, var(--border));
  background: var(--dk-elev, var(--card)); color: var(--fg);
  box-shadow: 0 1px 3px var(--shadow);
}
.dd-ctx__badge {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dd-acc) 14%, transparent); color: var(--dd-acc);
}
.dd-ctx__badge svg { width: 15px; height: 15px; }
.dd-ctx__mode { font-size: 13px; font-weight: 700; color: var(--dk-body, var(--fg)); }
.dd-ctx__dot { color: var(--muted-fg); }
.dd-ctx__tier { font-size: 20px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--dd-acc); }
.dd-ctx__path {
  display: flex; align-items: center; gap: 10px; list-style: none;
  margin: 0 0 0 12px; padding: 0 0 0 22px; border-left: 1px solid var(--dk-line, var(--border));
  font-size: 13px; font-weight: 600; color: var(--dk-body, var(--fg));
}
.dd-ctx__step { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dd-ctx__step + .dd-ctx__step::before { content: ''; width: 28px; height: 2px; margin-right: 2px; background: var(--dk-line, var(--border)); }
.dd-ctx__num {
  width: 22px; height: 22px; box-sizing: border-box; border-radius: 999px;
  border: 2px solid var(--dk-line, var(--border)); color: var(--muted-fg);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.dd-ctx__step--next { font-weight: 700; color: var(--fg); }
.dd-ctx__step--next .dd-ctx__num { border-color: var(--dd-acc); color: var(--dd-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-acc) 16%, transparent); }
.dd-ctx__done {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--dd-ok);
  border: 1px solid color-mix(in srgb, var(--dd-ok) 45%, transparent);
  background: color-mix(in srgb, var(--dd-ok) 10%, transparent);
}
.dd-ctx__done svg { width: 13px; height: 13px; }

/* Decision card */
.dd-five-in { gap: 16px; }
.dd-five-in .dd-card__title { margin: 0; }

.dd-court {
  position: relative; flex-shrink: 0; height: 260px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--dk-line, var(--border)); background: var(--dk-panel-2, var(--card3));
}
.dd-court__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--dd-you) 28%, transparent); stroke-width: 1.5; }
.dd-court__lines * { vector-effect: non-scaling-stroke; }
.dd-court__chip {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--dk-line, var(--border)); background: var(--card);
  box-shadow: 0 2px 8px var(--shadow);
}
.dd-court__chip--off { border-color: color-mix(in srgb, var(--dd-them) 65%, transparent); }
.dd-court__chip--empty { padding: 6px; opacity: 0.6; }
.dd-court__pos {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px; background: var(--dd-you); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
}
.dd-court__who { display: flex; flex-direction: column; line-height: 1.15; }
.dd-court__who b { font-size: 14px; font-weight: 700; color: var(--fg); }
.dd-court__meta { font-size: 11px; color: var(--muted-fg); }
.dd-court__meta--off { font-weight: 700; color: var(--dd-acc-ink); }
.dd-court__ovr { margin-left: 4px; font-size: 24px; font-weight: 800; line-height: 1; }

/* How you stack up */
.dd-stack { display: flex; flex-direction: column; gap: 9px; }
.dd-stack__row {
  display: grid; grid-template-columns: minmax(140px, 196px) minmax(0, 1fr) 44px 132px;
  gap: 14px; align-items: center;
}
.dd-stack__row--head { align-items: end; }
.dd-stack__ticks { position: relative; height: 12px; font-size: 10px; font-weight: 700; color: var(--muted-fg); }
.dd-stack__ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.dd-stack__ticks span:first-child { transform: none; }
.dd-stack__ticks span:last-child { transform: translateX(-100%); }
.dd-stack__h { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-fg); text-align: right; white-space: nowrap; }
.dd-stack__name { font-size: 13px; font-weight: 700; color: var(--dk-body, var(--fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-stack__name b { color: var(--dd-acc-ink); }
.dd-stack__row--you .dd-stack__name { font-weight: 800; color: var(--dd-you); }
.dd-stack__track { position: relative; display: block; height: 12px; border-radius: 999px; background: var(--dk-inset, var(--card2)); }
.dd-stack__fill { display: block; height: 100%; border-radius: 999px; background: var(--dd-them); }
.dd-stack__row--you .dd-stack__fill { background: var(--dd-you); }
.dd-stack__you { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--dd-you); }
.dd-stack__val { font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.dd-stack__odds { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; white-space: nowrap; }
.dd-stack__odds b { font-size: 22px; font-weight: 800; line-height: 1; }
.dd-stack__odds span { font-size: 11px; font-weight: 700; color: var(--muted-fg); }
.dd-stack__odds--dog b { color: var(--dd-danger); }
.dd-stack__odds--fav b { color: var(--dd-ok); }
.dd-stack__odds--note { font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.dd-stack__verdict {
  margin: 4px 0 0; display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; line-height: 1.45; color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--dd-them) 40%, transparent);
  background: color-mix(in srgb, var(--dd-them) 10%, transparent);
}
.dd-stack__verdict svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--dd-acc-ink); }
.dd-stack__verdict--fav { border-color: color-mix(in srgb, var(--dd-ok) 40%, transparent); background: color-mix(in srgb, var(--dd-ok) 10%, transparent); }
.dd-stack__verdict--fav svg { color: var(--dd-ok); }

/* Both actions */
.dd-five-in__actions { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.dd-five-in__actions .dd-btn { height: 58px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.dd-five-in__actions .dd-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.dd-five-in__redraft { font-weight: 800; color: var(--dk-body, var(--fg)); border-color: var(--dk-line, var(--border)); }
.dd-five-in__redraft span { font-weight: 600; color: var(--muted-fg); }

/* Weak spot */
.dd-weak {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--dd-danger) 35%, transparent);
  background: color-mix(in srgb, var(--dd-danger) 8%, var(--card)); color: var(--fg);
}
.dd-weak__icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--card);
  border: 1px solid color-mix(in srgb, var(--dd-danger) 35%, transparent); color: var(--dd-danger);
  display: inline-flex; align-items: center; justify-content: center;
}
.dd-weak__icon svg { width: 18px; height: 18px; }
.dd-weak__text { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.4; }
.dd-weak__label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dd-danger); }

/* Status tiles */
.dd-status,
.dd-chem {
  display: flex; flex-direction: column; padding: 16px; border-radius: 16px; color: var(--fg);
  border: 1px solid var(--dk-line, var(--border)); background: var(--dk-elev, var(--card));
  box-shadow: 0 1px 3px var(--shadow);
}
.dd-status { gap: 12px; }
.dd-status__label { text-align: center; }
.dd-status__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dd-tile {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; min-width: 0;
  border: 1px solid var(--dk-line, var(--border)); background: var(--dk-panel-2, var(--card3));
}
.dd-tile__ring { width: 44px; height: 44px; flex-shrink: 0; }
.dd-tile__ring circle { fill: none; stroke-width: 5; stroke: var(--dk-line, var(--border)); }
.dd-tile__ring circle + circle { stroke-linecap: round; }
.dd-tile__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.dd-tile__text b { font-size: 22px; font-weight: 800; }
.dd-tile__text span { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-fg); }

/* Chemistry, sorted by what it costs */
.dd-chem { gap: 8px; }
.dd-chem__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dd-chem__chips { display: flex; gap: 6px; }
.dd-chem__chip { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; border: 1px solid transparent; }
.dd-chem__chip--good { color: var(--dd-ok); border-color: color-mix(in srgb, var(--dd-ok) 40%, transparent); background: color-mix(in srgb, var(--dd-ok) 10%, transparent); }
.dd-chem__chip--bad { color: var(--dd-danger); border-color: color-mix(in srgb, var(--dd-danger) 35%, transparent); background: color-mix(in srgb, var(--dd-danger) 8%, transparent); }
.dd-chem__chip--net { color: var(--card); background: var(--fg); }
.dd-chem__group { margin: 4px 0 0; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.dd-chem__group--bad { color: var(--dd-danger); }
.dd-chem__group--good { color: var(--dd-ok); }
.dd-chem__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dd-chem__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; border: 1px solid transparent; }
.dd-chem__row--good { border-color: color-mix(in srgb, var(--dd-ok) 28%, transparent); background: color-mix(in srgb, var(--dd-ok) 8%, transparent); }
.dd-chem__row--bad { border-color: color-mix(in srgb, var(--dd-danger) 30%, transparent); background: color-mix(in srgb, var(--dd-danger) 8%, transparent); }
.dd-chem__dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 999px; }
.dd-chem__row--good .dd-chem__dot { background: var(--dd-ok); }
.dd-chem__row--bad  .dd-chem__dot { background: var(--dd-danger); }
.dd-chem__what { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chem__val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-chem__row--good .dd-chem__val { color: var(--dd-ok); }
.dd-chem__row--bad  .dd-chem__val { color: var(--dd-danger); }
.dd-chem__more { margin-top: auto; padding-top: 4px; }
.dd-chem__more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; border-radius: 10px; border: 1px dashed var(--dk-line, var(--border));
  background: var(--dk-panel-2, var(--card3)); font-size: 12px; font-weight: 700; color: var(--fg);
}
.dd-chem__more summary::-webkit-details-marker { display: none; }
.dd-chem__more summary svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.dd-chem__more[open] summary svg { transform: rotate(180deg); }
.dd-chem__more summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dd-chem__more[open] .dd-chem__list { margin-top: 8px; }

/* Desktop: the card fills the left column with its actions at the foot;
   the court takes the height that is left, the chemistry card the rail's. */
.draft-workspace--dd .dd-five-in { flex: 1 1 auto; padding: 22px 24px; }
.draft-workspace--dd .dd-five-in .dd-card__title { font-size: 30px; }
.draft-workspace--dd .dd-court { flex: 1 1 auto; height: auto; min-height: 220px; max-height: 340px; }
.draft-workspace--dd .dd-five-in__actions { margin-top: auto; }
.draft-workspace--dd .draft-workspace__right { justify-content: flex-start; }
.draft-workspace--dd .draft-workspace__right > .dd-chem { flex: 1 1 auto; overflow-y: auto; }

/* Phone: one column, shorter labels, stacked actions. */
@media (max-width: 1023px) {
  .dd-ctx { min-height: 40px; padding: 6px 12px; gap: 8px; }
  .dd-ctx__path,
  .dd-ctx__done-long { display: none; }
  .dd-ctx__tier { font-size: 17px; }
  .dd-ctx__done { height: 24px; padding: 0 9px; font-size: 11px; }
  .dd-stack__row { grid-template-columns: 108px minmax(0, 1fr) 30px 42px; gap: 8px; }
  .dd-stack__name { font-size: 12px; }
  .dd-stack__val { font-size: 12px; }
  .dd-stack__odds b { font-size: 19px; }
  .dd-stack__odds span,
  .dd-stack__odds--note { display: none; }
  .dd-stack__h { font-size: 9px; letter-spacing: 0.06em; }
  .dd-stack__ticks span:nth-child(2),
  .dd-stack__ticks span:nth-child(4) { display: none; }
  .dd-long { display: none; }
  .dd-short { display: inline; }
  .dd-stack__verdict { font-size: 12px; padding: 9px 12px; }
  .dd-five-in__actions { grid-template-columns: 1fr; gap: 8px; }
  .dd-five-in__actions .dd-btn { height: 54px; }
  .dd-five-in__actions .dd-five-in__redraft { height: 46px; }
  .dd-weak { padding: 12px 14px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-chem__more summary svg { transition: none; }
}

/* ============================================================
   HOME SCREEN (renderModeSelect in js/ui/render.js)
   ------------------------------------------------------------
   The phone and tablet layout, and everything both layouts share: the
   --hm-* palette (light here, dark below), the header's tool buttons and
   the divider before the account button, the stat cards, the mode cards
   with a picture on top (js/ui/homeArt.js), Trophy Room and Challenges.
   css/desktop.css re-lays it out for the 1440x900 desktop canvas.
   ============================================================ */
.main-gradient.hm {
  --hm-shell:     #eef1f6;
  --hm-panel:     #ffffff;
  --hm-panel-hi:  #f4f7ff;
  --hm-inset:     #eef3ff;
  --hm-line:      #d5dce8;
  --hm-line-hi:   #c4ccda;
  --hm-rule:      #c4ccda;
  --hm-ink:       #0b1a3a;
  --hm-ink-2:     #3d4a66;
  --hm-ink-3:     #5b6880;
  --hm-icon:      #1540c8;
  --hm-orange:    #ff7a1a;
  --hm-orange-hi: #ff8a35;
  --hm-on-orange: #140a00;
  --hm-blue:      #1540c8;
  --hm-blue-ink:  #1540c8;
  --hm-track:     #dde5f6;
  --hm-cta-bg:    #ffffff;
  --hm-cta-bg-hi: #f4f7ff;
  --hm-cta-line:  #0b1a3a;
  --hm-cta-ink:   #0b1a3a;
  --hm-card-shadow: 0 3px 0 #c4ccda;
  --hm-glow:      transparent;
  /* The pictures (js/ui/homeArt.js): floor, light, court lines, floor
     shadows, series pips and the VS. The shapes keep their own colours. */
  --hm-floor-1:   #eef3ff;
  --hm-floor-2:   #e3ebfd;
  --hm-spot:      #ffffff;
  --hm-spot-a:    0.6;
  --hm-court:     #9db3e6;
  --hm-shadow:    #1e3a5f;
  --hm-shadow-a:  0.18;
  --hm-shadow-line-a: 0.14;
  --hm-pip:       #b9c6e8;
  --hm-vs:        #0b1a3a;
  /* The Classic card's edge and the Play button's ring; gold ink for "82-0". */
  --hm-edge:      #0b1a3a;
  --hm-cta-edge:  #0b1a3a;
  --hm-gold-ink:  #b45309;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: radial-gradient(900px 380px at 30% -120px, var(--hm-glow), transparent 70%) no-repeat, var(--hm-shell);
  color: var(--hm-ink);
  font-family: 'Fira Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Reset the home screen's own buttons; the shared footer keeps its styles. */
.hm :where(.hm-head,
.hm-main) :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}
.hm svg { display: block; flex: none; }
.hm :focus-visible { outline: 2px solid var(--hm-blue-ink); outline-offset: 3px; }

.hm .hm-label {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--hm-ink-3);
}

/* ── Header ── */
.hm .hm-head {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--hm-line);
  background: var(--hm-shell);
}
.hm .hm-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 calc(16px + var(--safe-r, 0px)) 0 calc(12px + var(--safe-l, 0px));
}
.hm .hm-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hm .hm-brand__crest { display: block; width: 42px; height: 42px; object-fit: contain; }
.hm .hm-brand__text { display: none; flex-direction: column; gap: 5px; }
.hm .hm-brand__mark { font: 700 27px/1 'Barlow Condensed', sans-serif; letter-spacing: 0.01em; color: var(--hm-ink); }
.hm .hm-brand__tag {
  font: 600 12px/1 'Fira Sans', sans-serif;
  font-variant-caps: all-small-caps;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--hm-ink-3);
}
.hm .hm-tools { display: flex; align-items: center; gap: 6px; }
.hm .hm-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--hm-line);
  color: var(--hm-icon);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.hm .hm-icon:hover { border-color: var(--hm-line-hi); background: var(--hm-panel); color: var(--hm-ink); }
/* The divider between the three tool buttons and the account button. It is
   its own, stronger colour: in the button borders' --hm-line it vanished. */
.hm .hm-tools__rule {
  width: 2px;
  height: 22px;
  margin: 0 5px;
  border-radius: 1px;
  background: var(--hm-rule);
}
/* The account button (renderAccountPill, home header only): a person icon
   and, on desktop, a "Profile" label, like the tool buttons beside it. */
.hm .account-pill--pending { opacity: 0.35; }

/* ── The column ── */
.hm .hm-main { display: flex; flex-direction: column; }
html[data-page="game"] #app > .hm > main > .hm-shell,
.hm .hm-shell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  max-width: min(100%, 560px);
  margin: 0 auto;
}

/* ── Headline + progress ── */
.hm .hm-hero { padding: 10px 0 2px; }
.hm .hm-headline {
  margin: 0 0 8px;
  font: 700 33px/1 'Barlow Condensed', sans-serif;
  color: var(--hm-ink);
}
.hm .hm-headline em { font-style: normal; color: var(--hm-gold-ink); }
/* Phone / tablet: no headline — the progress card leads the hero. The desktop
   composition (css/desktop.css, min-width 1024px) keeps it beside the stats. */
@media (max-width: 1023px) {
  .hm .hm-headline { display: none; }
}
.hm .hm-stats {
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  border: 1px solid var(--hm-line);
  border-radius: 14px;
  background: var(--hm-panel);
  box-shadow: var(--hm-card-shadow);
}
.hm .hm-stats--one { grid-template-columns: 1fr; }
.hm .hm-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 70px;
  padding: 0 12px;
  border-radius: 14px 0 0 14px;
  transition: background-color 0.15s;
}
.hm .hm-stat + .hm-stat { border-radius: 0 14px 14px 0; box-shadow: inset 1px 0 0 var(--hm-line); padding-left: 14px; }
.hm .hm-stats--one .hm-stat { border-radius: 14px; }
.hm .hm-stat:hover { background: var(--hm-panel-hi); }
.hm .hm-stat__visual { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; }
.hm .hm-stat__visual > svg { width: 100%; height: 100%; }
.hm .hm-stat__tile > svg { width: 22px; height: 23px; }
.hm .hm-ring__track { fill: none; stroke: var(--hm-track); stroke-width: 3; }
.hm .hm-ring__fill { fill: none; stroke: var(--hm-orange); stroke-width: 3; stroke-linecap: round; }
.hm .hm-stat__lvl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 17px/1 'Barlow Condensed', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--hm-ink);
}
.hm .hm-stat__tile { display: none; border-radius: 50%; border: 1px solid var(--hm-line-hi); color: var(--hm-blue); }
.hm .hm-stat__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.hm .hm-stat__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 17px/21px 'Barlow Condensed', sans-serif;
  color: var(--hm-ink);
}
.hm .hm-stat__value b { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.hm .hm-stat__of { color: var(--hm-ink-3); font-variant-numeric: tabular-nums; }
.hm .hm-stat__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  font: 500 11.5px/1 'Fira Sans', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--hm-ink-2);
}
.hm .hm-stat__pct { font-weight: 600; color: var(--hm-blue-ink); }
.hm .hm-stat--level .hm-stat__pct { color: var(--ink-orange); }
.hm .hm-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--hm-track); overflow: hidden; }
.hm .hm-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--hm-blue); }
.hm .hm-chev { color: var(--hm-ink-3); transition: transform 0.15s, color 0.15s; }
.hm .hm-stat .hm-chev { display: none; }

/* ── Mode cards: the picture, then tile + title, description and button ── */
.hm .hm-modes { display: flex; flex-direction: column; gap: 7px; }
.hm .hm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hm .hm-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: 18px;
  background: var(--hm-panel);
  box-shadow: var(--hm-card-shadow);
  transition: border-color 0.15s;
}
.hm .hm-card:hover { border-color: var(--hm-line-hi); }
.hm .hm-card--classic {
  border-color: var(--hm-edge);
  background: var(--hm-panel);
  box-shadow: 0 4px 0 var(--hm-edge);
}
.hm .hm-card--classic:hover { border-color: var(--hm-edge); }
/* Dynasty Duel and 1v1: Classic's dark outline and drop shadow. */
.hm .hm-duo .hm-card { box-shadow: 0 4px 0 var(--hm-edge); }
.hm .hm-duo .hm-card,
.hm .hm-duo .hm-card:hover { border-color: var(--hm-edge); }
.hm .hm-art {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  border-bottom: 1px solid var(--hm-line);
  background: var(--hm-inset);
  /* The phone strips keep the proportions they were drawn at (356x74 and
     173x52), so a wider column shows the same picture, larger. */
  aspect-ratio: 356 / 74;
}
.hm .hm-duo .hm-art { aspect-ratio: 173 / 52; }
.hm .hm-card--classic > .hm-art { border-bottom-color: var(--hm-line); }
.hm .hm-art__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm .hm-art__desk { display: none; }
.hm .hm-art__pos { font: 800 11.5px/1 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; fill: #ffffff; }
.hm .hm-art__vs { font: 800 34px/1 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; fill: var(--hm-vs); }
.hm .hm-card__body { display: flex; flex-direction: column; flex: 1; padding: 11px 14px 13px; }
.hm .hm-duo .hm-card__body { padding: 10px 11px 11px; }
.hm .hm-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.hm .hm-duo .hm-card__head { margin-bottom: 6px; }
.hm .hm-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--hm-line-hi);
  color: var(--hm-icon);
}
.hm .hm-tile svg { width: 18px; height: 18px; }
.hm .hm-tile--orange { border-color: var(--hm-line-hi); color: var(--hm-icon); }
.hm .hm-card__title { font: 700 26px/1 'Barlow Condensed', sans-serif; letter-spacing: 0.005em; color: var(--hm-ink); }
.hm .hm-duo .hm-card__title { font-size: 22px; }
.hm .hm-card__desc {
  margin-bottom: 11px;
  font: 400 14px/1.4 'Fira Sans', sans-serif;
  color: var(--hm-ink-2);
  text-wrap: balance;
}
.hm .hm-duo .hm-card__desc { flex: 1; margin-bottom: 9px; font-size: 13px; line-height: 1.38; }
.hm .hm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  margin-top: auto;
  border-radius: 12px;
  font: 700 19px/1 'Barlow Condensed', sans-serif;
  letter-spacing: 0.03em;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.hm .hm-duo .hm-cta { height: 44px; font-size: 17px; letter-spacing: 0.02em; }
.hm .hm-cta svg { transition: transform 0.15s; }
.hm .hm-card:hover .hm-cta svg { transform: translateX(2px); }
.hm .hm-cta--primary {
  background: var(--hm-orange);
  color: var(--hm-on-orange);
  box-shadow: inset 0 0 0 2px var(--hm-cta-edge), 0 4px 0 var(--hm-cta-edge);
}
.hm .hm-card:hover .hm-cta--primary { background: var(--hm-orange-hi); }
.hm .hm-cta--secondary {
  border: 1px solid var(--hm-cta-line);
  background: var(--hm-cta-bg);
  color: var(--hm-cta-ink);
}
.hm .hm-card:hover .hm-cta--secondary { background: var(--hm-cta-bg-hi); }

/* ── Trophy Room: a row here, the last item of the mode column. Desktop
   (css/desktop.css) turns the same button into a display-cabinet card. ── */
/* Phone / tablet: GM Level and Legends lead the column with the spacing the
   old hero gave them. */
@media (max-width: 1023px) {
  .hm .hm-stats { margin: 10px 0 2px; }
}
.hm .hm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 54px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--hm-line);
  border-radius: 14px;
  background: var(--hm-panel);
  box-shadow: var(--hm-card-shadow);
  transition: border-color 0.15s, background-color 0.15s;
}
.hm .hm-row:hover { border-color: var(--hm-line-hi); background: var(--hm-panel-hi); }
.hm .hm-row:hover .hm-chev { transform: translateX(2px); color: var(--hm-ink); }
.hm .hm-row__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--hm-line-hi);
  color: var(--hm-icon);
}
.hm .hm-row__icon svg { width: 19px; height: 19px; }
.hm .hm-row__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hm .hm-row__title { font: 700 19px/1.05 'Barlow Condensed', sans-serif; letter-spacing: 0.005em; color: var(--hm-ink); }
.hm .hm-row__count { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hm-ink-3); }
.hm .hm-row__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 11.5px/1.3 'Fira Sans', sans-serif;
  color: var(--hm-ink-2);
}
.hm .hm-row .hm-chev { width: 18px; height: 18px; }
/* Detail only the desktop canvas shows (css/desktop.css): the tool buttons'
   labels, the stats' extra lines, and the Trophy Room cabinet card. */
.hm .hm-icon__label,
.hm .hm-stat__lvlno,
.hm .hm-stat__bar,
.hm .hm-stat__next,
.hm .hm-stat__fan,
.hm .hm-stat__ofdesk,
.hm .hm-stat__togo,
.hm .hm-stat__chip,
.hm .hm-trophy__art,
.hm .hm-trophy__body { display: none; }

/* ── Footer: the shared site footer, on the home screen's hairline ── */
.hm > .site-footer { border-top-color: var(--hm-line); }

@media (min-width: 600px) {
  .hm .hm-brand__text { display: flex; }
}
/* Below 380px the side-by-side cards are too narrow for "Dynasty Duel" at
   22px; one line matters more than the size. */
@media (max-width: 379px) {
  .hm .hm-duo .hm-card__title { font-size: 20px; }
  .hm .hm-duo .hm-card__head { gap: 8px; }
  .hm .hm-duo .hm-tile { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm .hm-cta svg,
  .hm .hm-chev { transition: none; }
}

/* ── Site nav strip (index.html) ─────────────────────────────────────────────
   The one row of real links on the game page, under #app on every screen.
   Static HTML, so it is there for a first-time visitor cold-opened into a
   draft — and for Googlebot, which arrives the same way and used to find no
   visible link to any content page. Height comes from --site-nav-h in
   css/responsive.css (which also carves it out of the shell and hides it on
   viewports shorter than 500px). The recessive link pair is the same one
   .site-footer uses, for the same reason: the shared --muted-fg is near-white
   in dark mode. Labels shorten below 640px, like the in-app footer's. */
.site-nav {
  --nav-link: #64748b;
  --nav-sep:  #cbd5e1;
  box-sizing: border-box;
  height: var(--site-nav-h, 30px);
  padding: 0 8px var(--safe-b, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 2px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 clamp(3px, 1.2vw, 7px);
  color: var(--nav-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-nav__brand { color: var(--fg); font-weight: 800; }
.site-nav__sep { color: var(--nav-sep); user-select: none; }
.site-nav__short { display: inline; }
.site-nav__full,
.site-nav__wide { display: none; }
@media (min-width: 640px) {
  .site-nav__short { display: none; }
  .site-nav__full { display: inline; }
  .site-nav__wide { display: inline-flex; }
  span.site-nav__wide { display: inline; }
}
/* With the strip on screen the home screen's own footer row would be a
   second copy of the same three links directly above it. It stays in the
   markup (its How-to-play toggle is the one the tests pin) and returns on
   the short viewports where the strip is hidden. */
@media (min-height: 501px) {
  html[data-page="game"] .hm > .site-footer { display: none; }
}

/* ── Header strapline ────────────────────────────────────────────────────────
   The page's h1 wraps the "82-0" wordmark button (renderHeader). On its own
   that is the competitor's brand as far as a search engine can tell, so the
   h1 also carries the site's name as real, visible text — a second line under
   the wordmark on phones and tablets. From 1024px up css/desktop.css draws
   its own decorative strapline under the wordmark, so this one steps aside
   there; the desktop lockup is untouched. */
.app-header__strap {
  --strap-fg: #64748b;
  display: block;
  padding-left: 1.75rem;   /* clears the ball icon (1.25rem) and its gap */
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--strap-fg);
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .app-header__brand-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
@media (min-width: 1024px) {
  .app-header__strap { display: none; }
}

/* ── Cold-open banner ────────────────────────────────────────────────────────
   The first-run banner on the draft board now says what the game is: the one
   sentence of stable, descriptive copy on a screen whose every other word is
   a random board. It stays hidden on phones as before (the one-viewport draft
   layout has no 6rem to spare) EXCEPT on phones tall enough to carry a
   compact, one-paragraph form — which includes the smartphone viewport
   Googlebot renders the page with, so the indexed page has the sentence too.
   Cascade note: this must follow the @media (max-width: 639px) block that
   hides .draft-cold-open, which it does by sitting at the end of the file. */
.draft-cold-open__lead { font-weight: 600; }
@media (max-width: 639px) and (min-height: 700px) {
  .draft-cold-open {
    display: flex;
    padding: 0.5rem 0.625rem !important;
    gap: 0.5rem !important;
  }
  .draft-cold-open__emoji,
  .draft-cold-open__sub { display: none; }
  .draft-cold-open__lead {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}

/* ── Content-page footer nav ─────────────────────────────────────────────────
   The shared footer every generated page (and daily.html) ends with —
   siteFooterHtml() in scripts/lib/seo-utils.mjs writes it — so the roster,
   era and daily families all reach each other and the game with descriptive
   anchors, not "back to the game" fifty-eight times. */
.site-footer-nav {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted-fg);
}
.site-footer-nav__row { margin: 0 0 4px; }

/* ── A friend's challenge (duel guest) · series screens under 1024px ─────────
   js/ui/render/duel.js. Desktop draws the same three screens on GM vs AI's
   court (css/desktop.css `.gm-*`); a phone gets one column built on the same
   floor: the full court stood up for the matchup, a small court with the
   score in its centre circle for the series, then a recap that leads with
   the reply. `you` is always the guest on this device, `them` the friend who
   sent the link. `.duel-back` is the reply panel, shared with the desktop
   recap. */
.dg-main,
.dg-dock {
  --dg-floor:      #5e9a46;
  --dg-grain:      rgba(0, 0, 0, 0.06);
  --dg-line:       #fff8ec;
  --dg-paint-you:  #c3d4f7;
  --dg-paint-them: #efc08a;
  --dg-you:        #2563eb;
  --dg-on-you:     #ffffff;
  --dg-you-ink:    #1d4ed8;
  --dg-you-soft:   #dbeafe;
  --dg-them:       #b45309;
  --dg-on-them:    #ffffff;
  --dg-them-ink:   #9a3412;
  --dg-them-soft:  #fbe5cf;
  --dg-tag-bg:     #ffffff;
  --dg-tag-ink:    #0f172a;
  --dg-medal-bg:   #fffaf1;
  --dg-faint:      #8a94a7;
  --dg-lift:       0 3px 0 #c4ccda;
  --dg-lift-lg:    0 4px 0 #c4ccda;
}
/* Night Game: the walnut floor and the lifted blue and gold of the desktop court. */
[data-theme="blacktop"] .dg-main,
[data-theme="blacktop"] .dg-dock {
  --dg-floor:      #243f27;
  --dg-grain:      rgba(0, 0, 0, 0.14);
  --dg-line:       rgba(255, 236, 214, 0.5);
  --dg-paint-you:  rgba(138, 180, 255, 0.3);
  --dg-paint-them: rgba(242, 193, 78, 0.3);
  --dg-you:        #3f73e6;
  --dg-you-ink:    #a9c7ff;
  --dg-you-soft:   rgba(63, 115, 230, 0.24);
  --dg-them:       #e0a53a;
  --dg-on-them:    #1c1206;
  --dg-them-ink:   #f2c14e;
  --dg-them-soft:  rgba(224, 165, 58, 0.2);
  --dg-tag-bg:     #1b2232;
  --dg-tag-ink:    #e6eaf2;
  --dg-medal-bg:   #242c3f;
  --dg-faint:      #7f8aa0;
  --dg-lift:       0 2px 0 #0b0e15;
  --dg-lift-lg:    0 3px 0 #0b0e15;
}

/* <main> is the screen's one scroller (css/responsive.css §4) and stays a
   plain block: as a flex column of fixed height it would shrink the court,
   whose drawing and players are all absolutely positioned, to nothing. */
.dg-main { flex: 1 1 auto; padding: 16px 16px 24px; --content-max: 34rem; }
.dg-col {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--fg);
}
.dg-col > * { flex-shrink: 0; }
.dg-title { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.dg-eyebrow,
.dg-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dg-eyebrow { color: var(--primary); letter-spacing: 0.18em; }
.dg-label { color: var(--muted); }
.dg-h1 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1; color: var(--fg); }

.dg-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--dg-lift);
}

/* ── The court ─────────────────────────────────────────── */
.dg-court {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: repeating-linear-gradient(90deg, transparent 0 30px, var(--dg-grain) 30px 31px), var(--dg-floor);
  box-shadow: inset 0 0 0 1px rgba(92, 64, 30, 0.22), var(--dg-lift);
}
.dg-court--full { aspect-ratio: 358 / 560; }
.dg-court--mini {
  aspect-ratio: 358 / 186;
  border-radius: 12px;
  background: repeating-linear-gradient(90deg, transparent 0 22px, var(--dg-grain) 22px 23px), var(--dg-floor);
  box-shadow: inset 0 0 0 1px rgba(92, 64, 30, 0.22);
}
.dg-court__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--dg-line);
  stroke-width: 2.5;
}
.dg-court--mini .dg-court__lines { stroke-width: 1.6; }
.dg-court__paint--you  { fill: var(--dg-paint-you); }
.dg-court__paint--them { fill: var(--dg-paint-them); }
.dg-court__label {
  position: absolute;
  left: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dg-court__label--them { top: 12px;    background: var(--dg-them); color: var(--dg-on-them); }
.dg-court__label--you  { bottom: 12px; background: var(--dg-you);  color: var(--dg-on-you); }
/* The leader's half, outlined like the desktop court's. */
.dg-court__half { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; z-index: 1; }
.dg-court__half--you  { left: 0;  border-radius: 12px 0 0 12px; }
.dg-court__half--them { right: 0; border-radius: 0 12px 12px 0; }
.dg-court--you-up  .dg-court__half--you  { box-shadow: inset 0 0 0 3px var(--dg-you),  inset 0 0 26px -8px var(--dg-you); }
.dg-court--them-up .dg-court__half--them { box-shadow: inset 0 0 0 3px var(--dg-them), inset 0 0 26px -8px var(--dg-them); }

.dg-tok {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.dg-tok__disc {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2.5px solid #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.28);
}
.dg-tok--you  .dg-tok__disc { background: var(--dg-you);  color: var(--dg-on-you); }
.dg-tok--them .dg-tok__disc { background: var(--dg-them); color: var(--dg-on-them); }
.dg-tok__disc b { font-size: 18px; font-weight: 800; }
.dg-tok__disc small { margin-top: 1px; font-size: 7px; font-weight: 800; letter-spacing: 0.1em; }
.dg-tok__tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--dg-tag-bg);
  color: var(--dg-tag-ink);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.dg-dot {
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
}
.dg-dot--you  { background: var(--dg-you);  color: var(--dg-on-you); }
.dg-dot--them { background: var(--dg-them); color: var(--dg-on-them); }

/* The centre circle: the series odds on the matchup, the score on the series. */
.dg-medal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 3px solid var(--dg-line);
  background: var(--dg-medal-bg);
  box-shadow: 0 8px 24px rgba(60, 40, 15, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 10px;
  text-align: center;
}
.dg-medal__k { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dg-medal__big { font-size: 56px; font-weight: 800; line-height: 0.9; color: var(--dg-you-ink); }
.dg-medal--them .dg-medal__big { color: var(--dg-them); }
.dg-medal--even .dg-medal__big { color: var(--fg); }
.dg-medal__lean { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--fg); }
.dg-medal__sub { font-size: 10px; color: var(--muted); }
.dg-medal--score { width: 104px; height: 104px; gap: 1px; box-shadow: 0 6px 18px rgba(60, 40, 15, 0.28); }
.dg-medal--score .dg-medal__k { font-size: 8px; }
.dg-medal__score { display: flex; align-items: center; gap: 5px; line-height: 0.9; }
.dg-medal__score b { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dg-medal__score span { font-size: 22px; font-weight: 800; color: var(--dg-faint); }
.dg-medal__you  { color: var(--dg-you-ink); }
.dg-medal__them { color: var(--dg-them); }
[data-theme="blacktop"] .dg-medal--them .dg-medal__big,
[data-theme="blacktop"] .dg-medal__them { color: var(--dg-them-ink); }

/* ── Matchup panels ────────────────────────────────────── */
.dg-edges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dg-edge {
  min-width: 0;
  min-height: 48px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--card2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.dg-edge b { font-size: 10px; letter-spacing: 0.08em; opacity: 0.8; }
.dg-edge--you  { background: var(--dg-you-soft);  color: var(--dg-you-ink); }
.dg-edge--them { background: var(--dg-them-soft); color: var(--dg-them-ink); }
.dg-scout { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted-fg); text-wrap: pretty; }
.dg-scout b { color: var(--fg); }
.dg-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dg-bar__v { font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dg-bar__v--you  { color: var(--dg-you-ink); }
.dg-bar__v--them { color: var(--dg-them); }
[data-theme="blacktop"] .dg-bar__v--them { color: var(--dg-them-ink); }
.dg-bar__track { height: 10px; border-radius: 999px; overflow: hidden; display: flex; background: var(--dg-them); }
.dg-bar__fill { height: 100%; background: var(--dg-you); border-right: 2px solid var(--card); }

/* ── The dock: the one next step, pinned under the column ─ */
.dg-dock {
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px var(--shadow);
}
.dg-dock > * { width: 100%; max-width: 32rem; margin: 0 auto; }
.dg-dock .dg-go {
  min-height: 60px;
  border: 0;
  border-radius: 16px;
  background: var(--acc);
  color: var(--on-acc);
  box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 4px;
  cursor: pointer;
}
.dg-dock .dg-go:hover { background: var(--acc-hi); }
.dg-go__label { font-size: 17px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.dg-go__sub { font-size: 12px; opacity: 0.75; }
.dg-dock .dg-skip {
  min-height: 44px;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  cursor: pointer;
}
.dg-dock .dg-skip:hover { color: var(--primary); }

/* ── Series ─────────────────────────────────────────────── */
.dg-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--dg-lift-lg);
}
.dg-board__teams { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }
.dg-board__team { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; line-height: 1; }
.dg-board__team i { width: 8px; height: 8px; border-radius: 999px; }
.dg-board__team--you  { color: var(--dg-you-ink); }
.dg-board__team--you i  { background: var(--dg-you); }
.dg-board__team--them { color: var(--dg-them); }
.dg-board__team--them i { background: var(--dg-them); }
[data-theme="blacktop"] .dg-board__team--them { color: var(--dg-them-ink); }
.dg-board__status { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px; }
.dg-board__status span { font-size: 12px; color: var(--muted); text-align: right; }
.dg-board__lead { font-size: 16px; font-weight: 800; color: var(--fg); }
.dg-board__lead--you  { color: var(--dg-you-ink); }
.dg-board__lead--them { color: var(--dg-them); }
[data-theme="blacktop"] .dg-board__lead--them { color: var(--dg-them-ink); }

.dg-games { gap: 0; padding-bottom: 6px; }
.dg-games .dg-label { margin-bottom: 4px; }
.dg-g {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-bottom: 1px solid var(--border-light);
}
.dg-g:last-child { border-bottom: 0; }
[data-theme="blacktop"] .dg-g { border-bottom-color: var(--border); }
.dg-g__k { font-size: 12px; font-weight: 700; color: var(--muted); }
.dg-g__score { font-size: 22px; font-weight: 800; line-height: 1; color: var(--dg-faint); font-variant-numeric: tabular-nums; }
.dg-g__you  { color: var(--dg-you-ink); }
.dg-g__them { color: var(--dg-them); }
[data-theme="blacktop"] .dg-g__them { color: var(--dg-them-ink); }
.dg-g__chip { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.dg-g__chip--you  { background: var(--dg-you);  color: var(--dg-on-you); }
.dg-g__chip--them { background: var(--dg-them); color: var(--dg-on-them); }
.dg-g__ser { font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.dg-g__state { grid-column: 2 / -1; font-size: 13px; font-weight: 700; }
.dg-g--open .dg-g__k,
.dg-g--open .dg-g__state { color: var(--dg-faint); }
.dg-g--next {
  margin: 2px -8px;
  padding: 0 8px;
  border: 2px dashed var(--dg-you);
  border-radius: 12px;
  background: var(--dg-you-soft);
}
.dg-g--next .dg-g__k,
.dg-g--next .dg-g__state { color: var(--dg-you-ink); }

/* ── Result ─────────────────────────────────────────────── */
.dg-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 14px;
  border-bottom: 3px solid var(--fg);
}
.dg-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dg-head__eyebrow--you  { color: var(--dg-you-ink); }
.dg-head__eyebrow--them { color: var(--dg-them); }
[data-theme="blacktop"] .dg-head__eyebrow--them { color: var(--dg-them-ink); }
.dg-head__h1 { margin: 0; font-size: 52px; font-weight: 800; line-height: 0.9; letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.dg-head__deck { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted-fg); }

.dg-line {
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--dg-lift);
}
.dg-line__row { display: grid; align-items: center; column-gap: 2px; min-height: 48px; padding: 0 12px; }
.dg-line__row--label {
  min-height: 32px;
  background: var(--fg);
  color: var(--card);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-line__row--label .dg-line__g { font-size: 10px; color: inherit; font-weight: 800; }
.dg-line__row--you { border-bottom: 1px solid var(--border); }
.dg-line__row--won.dg-line__row--you  { background: color-mix(in srgb, var(--dg-you) 9%, var(--card)); }
.dg-line__row--won.dg-line__row--them { background: color-mix(in srgb, var(--dg-them) 11%, var(--card)); }
.dg-line__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-weight: 800; line-height: 1; }
.dg-line__row--you  .dg-line__name { color: var(--dg-you-ink); }
.dg-line__row--them .dg-line__name { color: var(--dg-them); }
[data-theme="blacktop"] .dg-line__row--them .dg-line__name { color: var(--dg-them-ink); }
.dg-line__g { text-align: center; font-size: 19px; font-weight: 800; color: var(--dg-faint); font-variant-numeric: tabular-nums; }
.dg-line__g--won { color: var(--fg); }
.dg-line__tot { display: flex; justify-content: center; }
.dg-line__tot span {
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
  color: var(--dg-faint);
}
.dg-line__row--won.dg-line__row--you  .dg-line__tot span { background: var(--dg-you);  color: var(--dg-on-you); }
.dg-line__row--won.dg-line__row--them .dg-line__tot span { background: var(--dg-them); color: var(--dg-on-them); }

.dg-box {
  padding: 12px 14px 10px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--dg-lift);
}
.dg-box--you  { border-top: 4px solid var(--dg-you); }
.dg-box--them { border-top: 4px solid var(--dg-them); }
.dg-box__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dg-box__title { min-width: 0; font-size: 21px; font-weight: 800; line-height: 1; }
.dg-box--you  .dg-box__title { color: var(--dg-you-ink); }
.dg-box--them .dg-box__title { color: var(--dg-them); }
[data-theme="blacktop"] .dg-box--them .dg-box__title { color: var(--dg-them-ink); }
.dg-box__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px 38px;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-light);
}
[data-theme="blacktop"] .dg-box__row { border-bottom-color: var(--border); }
.dg-box__row--head {
  min-height: 24px;
  border-bottom: 2px solid var(--fg) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dg-box__row--head > :nth-child(n+3) { text-align: right; }
.dg-box__pos { font-size: 11px; font-weight: 800; }
.dg-box--you  .dg-box__pos { color: var(--dg-you-ink); }
.dg-box--them .dg-box__pos { color: var(--dg-them); }
[data-theme="blacktop"] .dg-box--them .dg-box__pos { color: var(--dg-them-ink); }
.dg-box__pl { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dg-box__pl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--fg); }
.dg-box__pl small { font-size: 11px; color: var(--muted); }
.dg-box__ovr { text-align: right; font-weight: 800; }
.dg-box__ppg { text-align: right; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.dg-box__foot { display: flex; justify-content: space-between; padding-top: 8px; font-size: 12px; color: var(--muted); }
.dg-box__foot b { color: var(--fg); }

/* ── Send it back (duel recap, both layouts) ─────────────── */
.duel-back {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 0 var(--duel-back-lift, #c4ccda);
}
[data-theme="blacktop"] .duel-back { --duel-back-lift: #0b0e15; }
.duel-back__status {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted-fg);
}
.duel-back__status b { color: var(--fg); }
.duel-back__status > svg,
.duel-back__status > .duel-back__dot {
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 999px;
}
.duel-back__status--ok > svg   { background: var(--surface-green-strong); color: var(--ink-green); }
.duel-back__status--warn > svg { background: var(--surface-amber-hi); color: var(--amber-text); }
[data-theme="blacktop"] .duel-back__status--ok > svg   { background: rgba(90, 212, 138, 0.16); }
[data-theme="blacktop"] .duel-back__status--warn > svg { background: rgba(242, 193, 78, 0.16); color: var(--ink-amber); }
.duel-back__dot { position: relative; display: inline-block; background: var(--primary-soft); }
.duel-back__dot::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: var(--primary);
  animation: duelBackPulse 1.1s ease-in-out infinite;
}
@keyframes duelBackPulse { 50% { opacity: 0.3; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .duel-back__dot::after { animation: none; } }
.duel-back .duel-back__go {
  min-height: 56px;
  border: 0;
  border-radius: 15px;
  background: var(--acc);
  color: var(--on-acc);
  box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.duel-back .duel-back__go:hover { background: var(--acc-hi); }
.duel-back__note { margin: 0; font-size: 12px; line-height: 1.4; text-align: center; color: var(--muted); }
.duel-back__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duel-back .duel-back__btn {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 3px 0 var(--duel-back-lift, #c4ccda);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  cursor: pointer;
}
.duel-back .duel-back__btn:hover { color: var(--primary); }

/* ── Challenge link landing page (c/index.html) ──────────────────────────────
   Where a duel or rematch link lands before the game. The copy is picked
   before first paint (html[data-link]: duel, the default, or board); the
   card is filled in by js/utils/challengeLanding.js — the friend's five on
   the half court for a duel, the five boards and the record for a rematch —
   and goes away when there is no code to read (no data-link). One column up
   to 1100px; past it the copy sits beside the card. */
.cl-body {
  --cl-gutter:     max(16px, calc((100% - 34rem) / 2));
  --cl-floor:      #e3c393;
  --cl-grain:      rgba(120, 78, 30, 0.07);
  --cl-line:       #fff8ec;
  --cl-paint:      rgba(217, 119, 6, 0.28);
  --cl-them:       #b45309;
  --cl-on-them:    #ffffff;
  --cl-them-ink:   #b45309;
  --cl-hot:        #ea580c;
  --cl-tag-bg:     #ffffff;
  --cl-tag-ink:    #0f172a;
  --cl-soft:       #fff7ed;
  --cl-soft-line:  #fed7aa;
  --cl-lift:       0 3px 0 #c4ccda;
  --cl-lift-lg:    0 4px 0 #c4ccda;
  margin: 0;
  display: flex;
  flex-direction: column;
}
[data-theme="blacktop"] .cl-body {
  --cl-floor:      #3f2d1d;
  --cl-grain:      rgba(0, 0, 0, 0.14);
  --cl-line:       rgba(255, 236, 214, 0.5);
  --cl-paint:      rgba(242, 193, 78, 0.3);
  --cl-them:       #e0a53a;
  --cl-on-them:    #1c1206;
  --cl-them-ink:   #f2c14e;
  --cl-hot:        #ff8a3d;
  --cl-tag-bg:     #1b2232;
  --cl-tag-ink:    #e6eaf2;
  --cl-soft:       rgba(255, 138, 61, 0.12);
  --cl-soft-line:  rgba(255, 138, 61, 0.4);
  --cl-lift:       0 2px 0 #0b0e15;
  --cl-lift-lg:    0 3px 0 #0b0e15;
}
/* Which copy shows: a duel's (also the page with no code) or a board rematch's. */
html:not([data-link="board"]) .cl-body [data-for="board"],
html[data-link="board"] .cl-body [data-for="duel"] { display: none; }
/* No code, or one that no longer resolves: no card. */
html:not([data-link]) .cl-card { display: none; }

.cl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 0 var(--cl-gutter);
  border-bottom: 1px solid var(--border);
}
.cl-brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; }
.cl-brand__tile {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--cl-lift);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-brand__txt { display: flex; flex-direction: column; line-height: 1; }
.cl-brand__txt b { font-size: 22px; font-weight: 800; }
.cl-brand__txt small { margin-top: 3px; font-size: 8px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cl-free {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-green);
  border: 1px solid var(--line-green);
  color: var(--ink-green);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cl-free svg { width: 13px; height: 13px; flex: none; }
.cl-free__more { display: none; }

.cl-land {
  flex: 1;
  width: 100%;
  padding: 18px var(--cl-gutter) 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cl-intro,
.cl-act { display: flex; flex-direction: column; gap: 16px; }
.cl-pill {
  align-self: flex-start;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--cl-lift);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cl-pill svg { flex: none; }
.cl-h1 { margin: 0; font-size: clamp(52px, 17.5vw, 72px); font-weight: 800; line-height: 0.86; letter-spacing: -0.01em; color: var(--fg); }
.cl-h1 em { font-style: normal; color: var(--cl-hot); }
.cl-deck { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted-fg); text-wrap: pretty; }
.cl-deck b { font-weight: 700; color: var(--fg); }
.cl-deck__more { display: none; }

.cl-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--cl-lift-lg);
}
.cl-card__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 2px; }
.cl-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cl-card__title { margin: 4px 0 0; font-size: 24px; font-weight: 800; line-height: 1; color: var(--fg); }
.cl-stat { margin: 0; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cl-stat b { font-size: 28px; font-weight: 800; line-height: 0.9; color: var(--cl-them-ink); font-variant-numeric: tabular-nums; }

/* The half court: their basket at the top, both circles and the arc at their
   true proportions (the box keeps the drawing's aspect ratio). */
.cl-court {
  position: relative;
  aspect-ratio: 564 / 470;
  overflow: hidden;
  border-radius: 12px;
  background: repeating-linear-gradient(90deg, transparent 0 30px, var(--cl-grain) 30px 31px), var(--cl-floor);
  box-shadow: inset 0 0 0 1px rgba(92, 64, 30, 0.22);
}
.cl-court__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--cl-line); stroke-width: 3; }
.cl-court__paint { fill: var(--cl-paint); }
.cl-five { margin: 0; padding: 0; list-style: none; }
.cl-tok {
  position: absolute;
  z-index: 1;
  max-width: 36%;
  transform: translate(-50%, -23px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cl-tok__disc {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2.5px solid #ffffff;
  background: var(--cl-them);
  color: var(--cl-on-them);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.28);
}
.cl-tok__disc b { font-size: 19px; font-weight: 800; }
.cl-tok__disc small { margin-top: 1px; font-size: 7px; font-weight: 800; letter-spacing: 0.1em; }
.cl-tok__tag {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 8px 4px;
  border-radius: 8px;
  background: var(--cl-tag-bg);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
  line-height: 1.12;
  white-space: nowrap;
}
.cl-tok__tag b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; color: var(--cl-tag-ink); }
.cl-tok__tag small { font-size: 9px; font-weight: 600; color: var(--muted); }
/* Until the five is read off the link, the placeholders look like placeholders. */
html[data-link]:not([data-link-ready]) .cl-tok__tag,
html[data-link]:not([data-link-ready]) .cl-tok__disc b,
html[data-link]:not([data-link-ready]) .cl-board__era,
html[data-link]:not([data-link-ready]) .cl-board__team,
html[data-link]:not([data-link-ready]) #cl-stat { opacity: 0.45; }

.cl-boards {
  margin: 0;
  padding: 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 12px;
  background: repeating-linear-gradient(90deg, transparent 0 30px, var(--cl-grain) 30px 31px), var(--cl-floor);
  box-shadow: inset 0 0 0 1px rgba(92, 64, 30, 0.22);
}
.cl-board {
  display: grid;
  grid-template-columns: 30px auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--cl-tag-bg);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}
.cl-board__n {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--cl-them);
  color: var(--cl-on-them);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.cl-board__era { font-size: 26px; font-weight: 800; line-height: 1; color: var(--cl-them-ink); font-variant-numeric: tabular-nums; }
.cl-board__team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 700; color: var(--cl-tag-ink); }
.cl-board--open { background: transparent; box-shadow: inset 0 0 0 2px var(--cl-line); }
.cl-board--open .cl-board__n { background: transparent; color: var(--cl-line); box-shadow: inset 0 0 0 2px var(--cl-line); }
.cl-board--open .cl-board__era,
.cl-board--open .cl-board__team { color: var(--cl-tag-ink); opacity: 0.7; }

.cl-coach { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.cl-coach__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--cl-soft);
  border: 1px solid var(--cl-soft-line);
  color: var(--cl-them-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-coach__txt { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--muted); }
.cl-coach__txt b { font-size: 14px; font-weight: 700; color: var(--fg); }

.cl-cta-row { display: flex; flex-direction: column; gap: 10px; }
a.cl-go {
  margin: 0;
  min-height: 60px;
  padding: 0 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.cl-fine { margin: 0; text-align: center; font-size: 12px; line-height: 1.4; color: var(--muted); }
.cl-fine b { font-weight: 700; color: var(--fg); }
.cl-steps { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cl-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  align-content: start;
  padding: 14px 14px 15px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--cl-lift);
}
.cl-step__n {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.cl-step__t { font-size: 22px; font-weight: 800; line-height: 1; color: var(--fg); }
.cl-step__d { font-size: 13px; line-height: 1.45; color: var(--muted-fg); }

.cl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px var(--cl-gutter) 28px;
  font-size: 13px;
  color: var(--muted);
}
.cl-foot a { font-weight: 600; color: var(--primary); text-decoration: none; }
.cl-foot a:hover { text-decoration: underline; }
/* The smallest phones: a smaller five so the plates clear the guards' discs,
   and the button's label on one line. */
@media (max-width: 359px) {
  .cl-brand__txt small { display: none; }
  .cl-tok { transform: translate(-50%, -20px); gap: 3px; }
  .cl-tok__disc { width: 40px; height: 40px; border-width: 2px; }
  .cl-tok__disc b { font-size: 16px; }
  .cl-tok__tag { padding: 2px 6px 3px; }
  .cl-tok__tag b { font-size: 10px; }
  .cl-tok__tag small { font-size: 8px; }
  a.cl-go { padding: 0 16px; font-size: 15px; letter-spacing: 0.08em; }
}

@media (min-width: 1100px) {
  .cl-body { --cl-gutter: max(clamp(48px, 4.4vw, 64px), calc((100% - 1312px) / 2)); min-height: 100vh; }
  .cl-top { min-height: 76px; }
  .cl-brand { gap: 12px; }
  .cl-brand__tile { width: 42px; height: 42px; border-radius: 12px; }
  .cl-brand__txt b { font-size: 26px; }
  .cl-brand__txt small { margin-top: 4px; font-size: 9px; }
  .cl-free { gap: 8px; padding: 0; border: 0; background: none; color: var(--muted-fg); font-size: 13px; font-weight: 600; }
  .cl-free svg { width: 16px; height: 16px; color: var(--ink-green); }
  .cl-free__more { display: inline; }

  /* The copy beside the card, centred on it: the empty 1fr rows above and
     below take whatever height the card has over the copy. */
  .cl-land {
    padding-top: 36px;
    padding-bottom: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". card" "intro card" "act card" ". card";
    column-gap: clamp(48px, 5vw, 72px);
    row-gap: 0;
  }
  html:not([data-link]) .cl-land { grid-template-columns: minmax(0, 52rem); grid-template-areas: "." "intro" "act" "."; }
  .cl-intro { grid-area: intro; gap: 22px; }
  .cl-act { grid-area: act; gap: 0; margin-top: 30px; }
  .cl-card { grid-area: card; align-self: center; gap: 14px; padding: 18px; border-radius: 22px; }

  .cl-pill { padding: 7px 14px 7px 11px; font-size: 12px; letter-spacing: 0.16em; }
  .cl-h1 { font-size: clamp(80px, 8vw, 120px); line-height: 0.88; }
  .cl-deck { max-width: 33em; font-size: 19px; line-height: 1.55; }
  .cl-deck__more { display: inline; }
  .cl-deck__short { display: none; }
  .cl-cta-row { flex-direction: row; align-items: center; gap: 22px; }
  a.cl-go { flex: none; min-height: 66px; padding: 0 34px; font-size: 18px; }
  .cl-fine { max-width: 16em; text-align: left; font-size: 13px; line-height: 1.35; }
  .cl-fine b { display: block; margin-bottom: 3px; }
  .cl-steps { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .cl-step { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 16px 18px 18px; border-radius: 16px; }
  .cl-step__n { grid-row: auto; width: 26px; height: 26px; }
  .cl-step__t { margin-top: 4px; font-size: 24px; }

  .cl-label { font-size: 11px; }
  .cl-card__title { margin-top: 5px; font-size: 30px; }
  .cl-stat b { font-size: 34px; }
  .cl-court,
  .cl-boards { border-radius: 14px; background: repeating-linear-gradient(90deg, transparent 0 46px, var(--cl-grain) 46px 47px), var(--cl-floor); }
  .cl-tok { gap: 5px; transform: translate(-50%, calc(clamp(48px, 4.4vw, 64px) / -2)); }
  .cl-tok__disc { width: clamp(48px, 4.4vw, 64px); height: clamp(48px, 4.4vw, 64px); border-width: 3px; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.28); }
  .cl-tok__disc b { font-size: clamp(19px, 1.75vw, 25px); }
  .cl-tok__disc small { font-size: 9px; }
  .cl-tok__tag { padding: 4px 11px 5px; border-radius: 10px; }
  .cl-tok__tag b { font-size: 13px; }
  .cl-tok__tag small { font-size: 10px; }
  .cl-board { min-height: 60px; }
  .cl-board__era { font-size: 30px; }
  .cl-board__team { font-size: 19px; }
  .cl-coach { gap: 12px; padding: 4px 6px 2px; }
  .cl-coach__icon { width: 38px; height: 38px; border-radius: 12px; }
  .cl-coach__txt { font-size: 13px; }
  .cl-coach__txt b { font-size: 15px; }
}