/* ============================================================
   css/desktop.css — 82-0 desktop redesign ("midnight broadcast")
   ------------------------------------------------------------
   EVERY rule in this file lives inside `@media (min-width: 1024px)`.
   That is deliberate and load-bearing: the mobile and tablet UI is a
   separate, already-shipped design, and nothing here may reach it.
   If you add a rule, add it inside one of the existing media blocks.

   Design source of truth: "82-0 Desktop" reference. The dark theme is
   the reference palette verbatim; the light theme keeps the product's
   existing light surfaces and inherits the same structure, typography
   and component system so the theme toggle keeps working on desktop.
   ============================================================ */

@media (min-width: 1024px) {

  /* ── Tokens ──────────────────────────────────────────────
     Overriding the shared custom properties is the highest-leverage
     move in this file: every existing component that already paints
     with var(--card) / var(--border) / … picks up the new look with
     no markup change. */
  [data-theme="dark"] {
    --bg:           #080d1a;
    --card:         #16233b;
    --card2:        #101c33;
    --card3:        #0f1a2e;
    --border:       #26374f;
    --border-light: #223350;
    --fg:           #f8fafc;
    --muted:        #64748b;
    --muted-fg:     #8497b2;
    --primary:      #3b82f6;
    --primary-fg:   #ffffff;
    --primary-soft: rgba(59, 130, 246, 0.16);
    --header-bg:    rgba(11, 18, 33, 0.86);
    --header-shadow: rgba(3, 7, 18, 0.5);
    --input-bg:     #0d1729;
    --surface-muted: #101c33;
    --overlay:      rgba(4, 8, 17, 0.72);
    --acc:          #f97316;
    --acc-deep:     #ea580c;
  }

  /* Desktop-only design tokens, shared by both themes. The `--dk-*`
     prefix keeps them from colliding with the app-wide set above. */
  :root {
    --dk-shell:      #f1f5f9;
    --dk-panel:      #ffffff;
    --dk-panel-2:    #f8fafc;
    --dk-inset:      #f1f5f9;
    --dk-line:       #e2e8f0;
    --dk-line-soft:  #eef2f7;
    --dk-strong:     #0f172a;
    --dk-body:       #334155;
    --dk-dim:        #64748b;
    --dk-faint:      #94a3b8;
    --dk-orange:     #ea580c;
    --dk-orange-lit: #c2410c;
    --dk-blue:       #2563eb;
    --dk-blue-lit:   #1d4ed8;
    --dk-green:      #15803d;
    --dk-gold:       #b45309;
    --dk-purple:     #7c3aed;
    --dk-elev:       linear-gradient(180deg, #ffffff, #f8fafc);
    --dk-elev-hi:    linear-gradient(180deg, #ffffff, #f1f5f9);
    --dk-ring:       rgba(37, 99, 235, 0.4);
    --dk-shadow:     0 10px 26px rgba(15, 23, 42, 0.1);
    --dk-shadow-lg:  0 12px 30px rgba(15, 23, 42, 0.13);
    --dk-page-bg:    radial-gradient(1200px 620px at 50% -8%, #ffffff 0%, #f6f8fc 46%, #eef2f8 100%);
  }

  [data-theme="dark"] {
    --dk-shell:      #080d1a;
    --dk-panel:      #16233b;
    --dk-panel-2:    #111c30;
    --dk-inset:      #0f1a2e;
    --dk-line:       #26374f;
    --dk-line-soft:  #223350;
    --dk-strong:     #f8fafc;
    --dk-body:       #c6d2e4;
    --dk-dim:        #8497b2;
    --dk-faint:      #5b6b86;
    --dk-orange:     #f97316;
    --dk-orange-lit: #fb923c;
    --dk-blue:       #3b82f6;
    --dk-blue-lit:   #60a5fa;
    --dk-green:      #22c55e;
    --dk-gold:       #fbbf24;
    --dk-purple:     #c084fc;
    --dk-elev:       linear-gradient(180deg, #16233b, #111c30);
    --dk-elev-hi:    linear-gradient(180deg, #18294a, #101b31);
    --dk-ring:       rgba(59, 130, 246, 0.45);
    --dk-shadow:     0 10px 26px rgba(3, 7, 18, 0.4);
    --dk-shadow-lg:  0 12px 30px rgba(3, 7, 18, 0.45);
    --dk-page-bg:    radial-gradient(1200px 620px at 50% -8%, #14213e 0%, #0a1122 46%, #080d1a 100%);
  }

  /* ── Page shell ─────────────────────────────────────────── */
  body { background: var(--dk-shell); }

  .main-gradient,
  .flex.flex-col.min-h-screen.main-gradient {
    background: var(--dk-page-bg);
    background-attachment: fixed;
  }

  /* Widen the content column. Every screen ships `max-w-2xl` / `max-w-md`
     for mobile; desktop opens them up to the reference's containers. */
  .dk-wide  { max-width: 1340px !important; }
  .dk-mid   { max-width: 1200px !important; }
  .dk-narrow{ max-width: 1120px !important; }

  /* ── Typography ─────────────────────────────────────────── */
  .cond,
  .dk-cond {
    font-family: 'Barlow Condensed', 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
  }

  .dk-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dk-dim);
  }

  .dk-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dk-dim);
  }

  /* ── Shared surface primitives ──────────────────────────── */
  .dk-panel {
    border-radius: 18px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
  }

  .dk-panel--raised {
    border-radius: 20px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev-hi);
    box-shadow: var(--dk-shadow-lg);
  }

  /* ── Button system ──────────────────────────────────────── */
  .dk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 13px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease,
                border-color 0.15s ease, transform 0.08s ease;
  }
  .dk-btn:hover   { filter: brightness(1.07); }
  .dk-btn:active  { transform: translateY(1px); }
  .dk-btn:focus-visible {
    outline: 2px solid var(--dk-blue-lit);
    outline-offset: 2px;
  }
  .dk-btn[disabled],
  .dk-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
    transform: none;
  }

  .dk-btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32);
  }
  .dk-btn--hero {
    color: #0a0f1a;
    background: linear-gradient(180deg, #fbbf24, #f97316);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.38);
  }
  .dk-btn--secondary {
    color: var(--dk-blue-lit);
    background: color-mix(in srgb, var(--dk-blue) 12%, transparent);
    border-color: color-mix(in srgb, var(--dk-blue) 45%, transparent);
  }
  .dk-btn--ghost {
    color: var(--dk-dim);
    background: transparent;
    border-color: var(--dk-line);
  }
  .dk-btn--ghost:hover { color: var(--dk-body); background: var(--dk-panel); }

  /* Restrained pulse on the single most important action per screen.
     Honoured only when the user has not asked for reduced motion. */
  @keyframes dkGlowBlue {
    0%, 100% { box-shadow: 0 8px 22px rgba(37, 99, 235, 0.34), 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50%      { box-shadow: 0 8px 22px rgba(37, 99, 235, 0.34), 0 0 0 7px rgba(59, 130, 246, 0); }
  }
  @keyframes dkGlowOrange {
    0%, 100% { box-shadow: 0 8px 22px rgba(249, 115, 22, 0.4), 0 0 0 0 rgba(249, 115, 22, 0.4); }
    50%      { box-shadow: 0 8px 22px rgba(249, 115, 22, 0.4), 0 0 0 7px rgba(249, 115, 22, 0); }
  }
  .dk-glow-blue   { animation: dkGlowBlue 2.4s infinite; }
  .dk-glow-orange { animation: dkGlowOrange 2.4s infinite; }

  @media (prefers-reduced-motion: reduce) {
    .dk-glow-blue, .dk-glow-orange { animation: none; }
    .dk-btn { transition: none; }
  }
}

/* ============================================================
   HEADER / SHELL
   ============================================================ */
@media (min-width: 1024px) {
  /* Both headers in the app (the in-run `.app-header` and the home
     screen's `.mode-header`) become the same persistent top bar. */
  .app-header-wrap,
  .mode-header {
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dk-line);
    box-shadow: none !important;
  }

  .app-header { background: transparent; border-bottom: 0; }

  .app-header__inner,
  .mode-header__inner {
    max-width: 1340px !important;
    height: 62px !important;
    padding: 0 24px !important;
    gap: 16px;
  }

  /* Brand lockup — swap the bare wordmark for the reference's badge +
     stacked wordmark. The h1 stays the h1 (SEO + a11y depend on it). */
  .app-header__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0;
  }
  .app-header__brand svg {
    width: 40px !important;
    height: 40px !important;
    padding: 8px;
    border-radius: 11px;
    color: var(--dk-orange) !important;
    background: var(--dk-elev-hi);
    border: 1px solid var(--dk-line);
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12);
  }
  .app-header__brand > span {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--dk-strong);
    line-height: 1;
    position: relative;
  }
  /* "All-Time Roster Builder" strapline under the wordmark. Decorative,
     so it is not exposed to assistive tech (the h1 already names it). */
  .app-header__brand > span::after {
    content: 'All-Time Roster Builder';
    display: block;
    font-family: 'Fira Sans', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--dk-faint);
    text-transform: uppercase;
    margin-top: 2px;
  }

  .mode-header__logo { height: 44px !important; margin-top: 0 !important; }

  /* Utility cluster — grouped in one tray instead of loose pills. */
  .app-header__actions,
  .mode-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .app-header__actions .header-pill--icon,
  .mode-header__actions > button[data-action^="open-"],
  .mode-header__actions .theme-toggle {
    width: 34px;
    height: 32px;
    padding: 0 !important;
    border-radius: 9px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-panel-2) !important;
    font-size: 14px;
    color: var(--dk-body) !important;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .app-header__actions .header-pill--icon:hover,
  .mode-header__actions > button[data-action^="open-"]:hover,
  .mode-header__actions .theme-toggle:hover {
    background: var(--dk-inset) !important;
    border-color: var(--dk-blue) !important;
  }

  /* Coach / era context pills — the centre group in the reference. */
  .app-header__actions .header-pill {
    height: 38px;
    padding: 0 12px;
    border-radius: 11px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel-2);
    color: var(--dk-body);
    font-size: 12px;
    font-weight: 700;
  }
  .app-header__actions .header-pill--interactive:hover {
    background: var(--dk-inset);
    border-color: var(--dk-blue);
  }
  .app-header__actions .header-pill--restart {
    border-color: rgba(239, 68, 68, 0.3);
    background: transparent;
    color: #f87171;
  }
  [data-theme="light"] .app-header__actions .header-pill--restart,
  :root:not([data-theme="dark"]) .app-header__actions .header-pill--restart { color: #dc2626; }
  .app-header__actions .header-pill--restart:hover {
    background: rgba(239, 68, 68, 0.1);
  }

  /* The mobile-only restart bar never belongs on desktop. */
  .mobile-restart-bar { display: none !important; }
}

/* ============================================================
   HOME
   ============================================================ */
@media (min-width: 1024px) {
  .mode-screen__main { padding: 30px 24px 56px !important; }

  .home-shell {
    width: 100%;
    max-width: 1120px !important;
  }

  /* Desktop-only intro band. Rendered once and hidden below 1024px —
     it is presentation, not a duplicate of any mobile control. */
  .home-intro {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  .home-intro__title {
    margin: 0;
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dk-strong);
    line-height: 1;
  }
  .home-intro__title em { font-style: normal; color: var(--dk-orange); }
  .home-intro__sub { margin: 6px 0 0; font-size: 14px; color: var(--dk-dim); }
  .home-intro__stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--dk-panel-2);
    border: 1px solid var(--dk-line);
  }
  .home-intro__stat-label { font-size: 11px; font-weight: 700; color: var(--dk-dim); }
  .home-intro__stat-value {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--dk-blue-lit);
    line-height: 1;
  }
  .home-intro__stat-value small { font-size: 13px; color: var(--dk-faint); }

  /* 12-column mode grid. `display:contents` lets the mobile Ball IQ / 1v1
     pair participate directly without duplicating their markup. */
  .home-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: stretch;
  }
  .home-grid > * { margin-bottom: 0 !important; }
  .home-pair,
  .home-daily-wrap { display: contents; }

  .home-card--daily      { grid-column: span 12; }
  .home-card--classic    { grid-column: span 6; grid-row: span 2; }
  .home-card--balliq     { grid-column: span 3; }
  .home-card--1v1        { grid-column: span 3; }
  .home-card--trophy     { grid-column: span 6; }
  .home-card--challenges { grid-column: span 12; }

  /* Classic — the main mode, given the most visual weight. */
  .home-card--classic {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    padding: 26px !important;
    border-radius: 20px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-elev-hi) !important;
    box-shadow: var(--dk-shadow-lg);
    transition: border-color 0.16s ease, transform 0.16s ease;
  }
  .home-card--classic:hover {
    border-color: var(--dk-orange) !important;
    transform: translateY(-2px);
  }
  .home-card--classic > span:first-child {
    width: 64px; height: 64px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    background: color-mix(in srgb, var(--dk-orange) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--dk-orange) 30%, transparent);
    margin-bottom: auto;
  }
  .home-card--classic > p:nth-of-type(1) {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 40px !important;
    font-weight: 800;
    line-height: 1;
    margin: 28px 0 0;
    text-align: left;
    color: var(--dk-strong) !important;
  }
  .home-card--classic > p:nth-of-type(2) {
    margin: 8px 0 18px;
    text-align: left !important;
    font-size: 14px !important;
    color: var(--dk-dim) !important;
    max-width: 36ch;
  }
  .home-card--classic > div:last-child {
    height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px !important;
    font-size: 15px !important;
    color: #0a0f1a !important;
    background: linear-gradient(180deg, #fbbf24, #f97316) !important;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
    padding: 0 !important;
    margin-top: auto;
  }

  /* Secondary modes */
  .home-card--balliq,
  .home-card--1v1 {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 20px !important;
    border-radius: 18px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-elev) !important;
    transition: border-color 0.16s ease, transform 0.16s ease;
  }
  .home-card--balliq:hover,
  .home-card--1v1:hover {
    border-color: var(--dk-blue) !important;
    transform: translateY(-2px);
  }
  .home-card--balliq > span:first-child,
  .home-card--1v1 > span:first-child {
    width: 48px; height: 48px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    background: color-mix(in srgb, var(--dk-blue) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--dk-blue) 28%, transparent);
  }
  .home-card--balliq > p:nth-of-type(1),
  .home-card--1v1 > p:nth-of-type(1) {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 24px !important;
    font-weight: 800;
    line-height: 1;
    margin: 2px 0 0;
    color: var(--dk-strong) !important;
  }
  .home-card--balliq > p:nth-of-type(2),
  .home-card--1v1 > p:nth-of-type(2) {
    text-align: left !important;
    font-size: 12px !important;
    color: var(--dk-dim) !important;
    line-height: 1.4;
  }
  .home-card--balliq > div:last-child,
  .home-card--1v1 > div:last-child {
    height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 700;
    color: var(--dk-body) !important;
    background: var(--dk-panel-2) !important;
    border: 1px solid var(--dk-line);
    padding: 0 !important;
    margin-top: auto;
  }

  /* Trophy Room — gold, reward-flavoured. */
  .home-card--trophy {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 20px 22px !important;
    border-radius: 18px !important;
    font-size: 0 !important;
    text-align: left !important;
    border: 1px solid color-mix(in srgb, var(--dk-gold) 34%, transparent) !important;
    background: linear-gradient(100deg,
                  color-mix(in srgb, var(--dk-gold) 14%, transparent),
                  transparent 65%), var(--dk-elev) !important;
    color: var(--dk-gold) !important;
    transition: border-color 0.16s ease, transform 0.16s ease;
  }
  .home-card--trophy:hover {
    border-color: color-mix(in srgb, var(--dk-gold) 60%, transparent) !important;
    transform: translateY(-2px);
  }
  .home-card--trophy .home-card__trophy-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--dk-gold) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--dk-gold) 32%, transparent);
  }
  .home-card--trophy .home-card__trophy-body { flex: 1; min-width: 0; }
  .home-card--trophy .home-card__trophy-title {
    display: block;
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--dk-gold);
  }
  .home-card--trophy .home-card__trophy-sub {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in srgb, var(--dk-gold) 62%, var(--dk-dim));
  }
  .home-card--trophy .home-card__trophy-chev {
    font-size: 20px;
    flex-shrink: 0;
    color: var(--dk-gold);
  }

  /* Challenges strip */
  .home-card--challenges {
    padding: 18px 22px !important;
    border-radius: 18px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-elev) !important;
    transition: border-color 0.16s ease;
  }
  .home-card--challenges:hover { border-color: var(--dk-blue) !important; }
  .home-card--challenges .text-xl {
    width: 48px; height: 48px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--dk-panel-2);
    border: 1px solid var(--dk-line);
  }

  /* Daily challenge — featured horizontal card. */
  .home-card--daily {
    display: flex !important;
    align-items: center;
    gap: 18px;
    padding: 18px 22px !important;
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, var(--dk-orange) 34%, transparent) !important;
    background: linear-gradient(100deg,
                  color-mix(in srgb, var(--dk-orange) 16%, transparent),
                  transparent 60%), var(--dk-elev) !important;
    box-shadow: var(--dk-shadow);
    transition: border-color 0.16s ease, transform 0.16s ease;
  }
  .home-card--daily:hover {
    border-color: color-mix(in srgb, var(--dk-orange) 60%, transparent) !important;
    transform: translateY(-2px);
  }
  .home-card--daily > span:first-child {
    flex-shrink: 0;
    width: 54px; height: 54px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    background: color-mix(in srgb, var(--dk-orange) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--dk-orange) 30%, transparent);
  }
}

/* ============================================================
   DRAFT WORKSPACE
   ============================================================ */
@media (min-width: 1024px) {
  /* The desktop draft is a two-column workspace: the draft machine and
     roster on the left, live team status on the right. renderDrafting()
     emits this structure only at desktop (see isDesktopDraftLayout). */
  .draft-screen__main { padding: 22px 24px 48px !important; }

  .draft-workspace {
    width: 100%;
    max-width: 1340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .draft-workspace__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, 1fr);
    gap: 16px;
    align-items: start;
  }
  .draft-workspace__left,
  .draft-workspace__right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /* Narrower desktops can't carry two comfortable columns — collapse to
     one before anything overlaps. */
  @media (max-width: 1200px) {
    .draft-workspace__cols { grid-template-columns: minmax(0, 1fr); }
  }

  /* ── Round stepper strip ───────────────────────────────── */
  .draft-stepper {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--dk-elev);
    border: 1px solid var(--dk-line);
    flex-wrap: wrap;
  }
  .draft-stepper--complete {
    background: linear-gradient(100deg,
                  color-mix(in srgb, var(--dk-green) 12%, transparent),
                  transparent 60%), var(--dk-elev);
    border-color: color-mix(in srgb, var(--dk-green) 30%, transparent);
  }
  .draft-stepper__head { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
  .draft-stepper__eyebrow {
    font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--dk-dim);
  }
  .draft-stepper--complete .draft-stepper__eyebrow { color: var(--dk-green); }
  .draft-stepper__round {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 26px; font-weight: 800; color: var(--dk-strong); margin-top: 2px;
  }
  .draft-stepper__round small { color: var(--dk-faint); font-size: 18px; }

  .draft-stepper__phases {
    flex: 1; display: flex; align-items: center; gap: 7px; min-width: 220px;
  }
  .draft-stepper__phase {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  }
  .draft-stepper__bar {
    width: 100%; height: 7px; border-radius: 9999px;
    background: var(--dk-inset);
    transition: background 0.25s ease;
  }
  .draft-stepper__phase--done .draft-stepper__bar,
  .draft-stepper__phase--active .draft-stepper__bar { background: var(--dk-blue); }
  .draft-stepper--complete .draft-stepper__bar { background: var(--dk-green); }
  .draft-stepper__name {
    font-size: 9px; font-weight: 700; color: var(--dk-faint);
    white-space: nowrap;
  }
  .draft-stepper__phase--active .draft-stepper__name {
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--dk-blue-lit);
  }
  .draft-stepper__done-chip {
    flex-shrink: 0; font-size: 12px; font-weight: 800;
    color: var(--dk-green); padding: 6px 12px; border-radius: 9999px;
    background: color-mix(in srgb, var(--dk-green) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--dk-green) 30%, transparent);
  }

  /* Coach chip sits inside the stepper strip on desktop. */
  .draft-stepper .draft-coach-chip { flex-shrink: 0; margin: 0; }
  .draft-stepper .draft-coach-chip > button,
  .draft-stepper .draft-coach-chip > div {
    height: 40px;
    padding: 0 14px !important;
    border-radius: 11px !important;
    background: var(--dk-panel-2) !important;
    border: 1px solid var(--dk-line) !important;
  }

  /* ── Draft machine (slot machine + spin) ───────────────── */
  .draft-screen__center .draft-slot-machine,
  .draft-workspace .draft-slot-machine {
    border-radius: 20px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-elev-hi) !important;
    padding: 22px !important;
    box-shadow: var(--dk-shadow-lg);
  }
  .draft-workspace .draft-slot-machine__grid {
    gap: 14px !important;
    margin-bottom: 18px !important;
  }
  .draft-workspace .draft-slot-machine__cell {
    min-height: 120px !important;
    border-radius: 16px !important;
    border-width: 2px !important;
    padding: 22px 16px !important;
    background: var(--dk-inset) !important;
  }
  .draft-workspace .draft-slot-machine__cell .text-xl {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 34px !important;
    font-weight: 800;
  }
  /* The spin action is the loudest control on the screen. */
  .draft-workspace .draft-slot-machine [data-action="spin"] {
    height: 58px;
    border-radius: 14px !important;
    font-size: 16px !important;
    letter-spacing: 0.1em;
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    border: none;
    color: #fff !important;
    animation: dkGlowBlue 2.4s infinite;
  }
  .draft-workspace .draft-slot-machine button[disabled] {
    height: 58px; border-radius: 14px !important; font-size: 16px !important;
  }

  /* ── Roster grid ───────────────────────────────────────── */
  .draft-workspace .draft-roster .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .draft-workspace .draft-roster__head { margin-bottom: 10px !important; }

  .draft-workspace .draft-roster-slot {
    min-height: 118px;
    border-radius: 14px !important;
    padding: 14px 8px !important;
    gap: 4px;
    justify-content: center;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .draft-workspace .draft-roster-slot:not(.draft-roster-slot--filled) {
    border: 2px dashed var(--dk-line) !important;
    background: var(--dk-inset) !important;
  }
  .draft-workspace .draft-roster-slot--filled {
    background: var(--dk-elev) !important;
    border: 1px solid var(--dk-line) !important;
  }
  .draft-workspace .draft-roster-slot__pos {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 22px !important;
    font-weight: 800;
  }
  .draft-workspace .draft-roster-slot--filled .draft-roster-slot__pos { font-size: 16px !important; }
  .draft-workspace .draft-roster-slot__name {
    font-size: 13px !important; font-weight: 700; line-height: 1.1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .draft-workspace .draft-roster-slot__ovr {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 20px; font-weight: 800; line-height: 1;
  }
  .draft-workspace .draft-roster-slot__ovr-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--dk-dim);
  }

  .draft-workspace .draft-board-scroll {
    height: auto;
    max-height: 46vh;
    min-height: 15rem;
  }

  /* ── Team status panel ─────────────────────────────────── */
  .dk-team-status {
    border-radius: 20px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    padding: 18px 16px 16px;
  }
  .dk-team-status__label {
    display: block; text-align: center; margin-bottom: 14px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--dk-dim);
  }
  .dk-team-status .draft-stat-gauges { gap: 10px; }

  /* ── Chemistry synergies panel ─────────────────────────── */
  .dk-synergy {
    border-radius: 18px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    padding: 16px;
  }
  .dk-synergy__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  .dk-synergy__count {
    font-size: 10px; font-weight: 800; color: var(--dk-green);
    padding: 2px 9px; border-radius: 9999px;
    background: color-mix(in srgb, var(--dk-green) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--dk-green) 30%, transparent);
  }
  /* Many synergies must not blow out the rail — contain and scroll. */
  .dk-synergy__list {
    display: flex; flex-direction: column; gap: 7px;
    max-height: 360px; overflow-y: auto;
  }
  .dk-synergy__item {
    border-radius: 10px; padding: 9px 12px;
    font-size: 12px; font-weight: 500; line-height: 1.35;
  }
  .dk-synergy__item--good {
    border: 1px solid color-mix(in srgb, var(--dk-green) 26%, transparent);
    background: color-mix(in srgb, var(--dk-green) 9%, transparent);
    color: color-mix(in srgb, var(--dk-green) 70%, var(--dk-strong));
  }
  .dk-synergy__item--bad {
    border: 1px solid rgba(239, 68, 68, 0.26);
    background: rgba(239, 68, 68, 0.09);
    color: #fca5a5;
  }
  :root:not([data-theme="dark"]) .dk-synergy__item--bad { color: #b91c1c; }
  .dk-synergy__empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; padding: 22px 10px; text-align: center;
  }
  .dk-synergy__empty-icon { font-size: 26px; opacity: 0.5; }
  .dk-synergy__empty-text {
    margin: 0; font-size: 12px; color: var(--dk-dim); max-width: 26ch;
  }

  /* ── Roster-complete simulate CTA ──────────────────────── */
  .draft-workspace .draft-simulate-card,
  .dk-simulate-card {
    border-radius: 20px;
    border: 2px solid color-mix(in srgb, var(--dk-blue) 50%, transparent);
    background: linear-gradient(120deg,
                  color-mix(in srgb, var(--dk-blue) 16%, transparent),
                  transparent 70%), var(--dk-elev);
    padding: 22px !important;
  }
  .draft-workspace .draft-simulate-card [data-action="simulate"] {
    height: 56px;
    border-radius: 14px !important;
    font-size: 15px !important;
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
    animation: dkGlowBlue 2.4s infinite;
  }
}

/* ============================================================
   STAT GAUGES  (Fans · Chemistry · Overall)
   ============================================================ */
@media (min-width: 1024px) {
  .draft-stat-gauges { display: flex; gap: 12px; }

  .draft-stat-gauge {
    --gauge-w: 104px;
    --gauge-h: 89px;
    --gauge-badge: 38px;
    flex: 1;
    min-width: 0;
    border-radius: 16px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-elev) !important;
    padding: 16px 6px 14px !important;
  }
  .draft-stat-gauge__value {
    font-size: 26px;
    letter-spacing: -0.01em;
  }
  .draft-stat-gauge__suffix { font-size: 12px; }
  .draft-stat-gauge__label {
    font-size: 10px;
    letter-spacing: 0.14em;
    margin-top: 5px;
  }
  /* Small status line under the label ("Strong Base", "Elite Core"). */
  .draft-stat-gauge__sub {
    margin: 4px 8px 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--dk-dim);
  }
  .draft-stat-gauge__note { font-size: 10px; }

  /* Three-up hero trio used on Team Report / Results / Champion. */
  .dk-gauge-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .dk-gauge-trio .draft-stat-gauge {
    --gauge-w: 132px;
    --gauge-h: 113px;
    --gauge-badge: 48px;
    padding: 22px 10px 18px !important;
  }
  .dk-gauge-trio .draft-stat-gauge__value { font-size: 34px; }
  .dk-gauge-trio .draft-stat-gauge__label { font-size: 11px; }
  .dk-gauge-trio .draft-stat-gauge__sub   { font-size: 11px; }
}

/* ============================================================
   RESULTS · PLAYOFFS · CHAMPION · ELIMINATED · TEAM REPORT
   ============================================================ */
@media (min-width: 1024px) {
  /* ── Results: broadcast hero ───────────────────────────── */
  .courtside-hero {
    border-radius: 22px !important;
    padding: 24px 26px !important;
    border: 1px solid #2a2018;
    background: linear-gradient(140deg, #0a0f18, #1a1512) !important;
    position: relative;
    overflow: hidden;
  }
  :root:not([data-theme="dark"]) .courtside-hero {
    border-color: var(--dk-line);
    background: linear-gradient(140deg, #1e293b, #3b2417) !important;
  }
  .courtside-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(520px 240px at 85% 0%, rgba(249, 115, 22, 0.14), transparent);
    pointer-events: none;
  }
  .courtside-hero > * { position: relative; z-index: 1; }
  .courtside-record__w { font-size: 72px !important; }
  .courtside-record__l { font-size: 52px !important; }

  /* Two-column results composition: main column + next-action rail. */
  .dk-results-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(270px, 1fr);
    gap: 16px;
    align-items: start;
  }
  .dk-results-main,
  .dk-results-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

  @media (max-width: 1150px) {
    .dk-results-cols { grid-template-columns: minmax(0, 1fr); }
  }

  /* The dominant "what next" card in the rail. */
  .dk-next-action {
    text-align: left;
    border: 0;
    border-radius: 18px;
    padding: 20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.34);
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s ease;
  }
  .dk-next-action:hover { filter: brightness(1.06); }
  .dk-next-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .dk-next-action__title {
    margin: 0;
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 26px; font-weight: 800; color: #fff; line-height: 1;
  }
  .dk-next-action__sub { margin: 4px 0 0; font-size: 12px; color: rgba(255,255,255,0.85); }
  .dk-next-action__tag {
    font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255,255,255,0.78);
    padding: 4px 9px; border-radius: 9999px; background: rgba(255,255,255,0.15);
  }

  /* ── Playoffs: broadcast band ──────────────────────────── */
  .courtside-outline--playoffs {
    border-radius: 20px !important;
    padding: 22px 24px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid #33251a;
    background: linear-gradient(120deg, #0a0f18, #1c1512 130%) !important;
  }
  :root:not([data-theme="dark"]) .courtside-outline--playoffs {
    border-color: var(--dk-line);
    background: linear-gradient(120deg, #1e293b, #3b2417 130%) !important;
  }
  .courtside-outline--playoffs::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(500px 200px at 12% 0%, rgba(249, 115, 22, 0.18), transparent);
    pointer-events: none;
  }
  .courtside-outline--playoffs > * { position: relative; z-index: 1; }

  /* ── Playoffs: bracket ─────────────────────────────────── */
  .playoff-bracket-wrap {
    border-radius: 20px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    padding: 22px 18px;
    overflow-x: auto;
  }
  .playoff-bracket {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    min-width: 820px;
  }
  .playoff-bracket__col { display: flex; flex-direction: column; }
  .playoff-bracket__round-label {
    text-align: center;
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--dk-dim);
    margin: 0 0 12px;
  }
  .playoff-bracket__col--champ .playoff-bracket__round-label { color: var(--dk-gold); }
  .playoff-bracket__stack {
    display: flex; flex-direction: column; gap: 14px;
    justify-content: space-around; flex: 1;
  }
  /* Spacing the later rounds apart is what makes the bracket read as a
     bracket rather than four unrelated lists. */
  .playoff-bracket__stack--sf { gap: 60px; justify-content: center; padding: 30px 0; }
  .playoff-bracket__stack--f  { justify-content: center; }

  .bracket-matchup {
    border-radius: 11px;
    border: 1px solid var(--dk-line);
    background: var(--dk-inset);
    overflow: hidden;
  }
  /* The user's matchup carries the orange 82-0 accent. */
  .bracket-matchup:has(.bracket-team--player) {
    border: 1.5px solid var(--dk-orange);
    background: linear-gradient(120deg,
                  color-mix(in srgb, var(--dk-orange) 16%, transparent), var(--dk-inset));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dk-orange) 20%, transparent),
                0 6px 16px color-mix(in srgb, var(--dk-orange) 14%, transparent);
  }
  .bracket-matchup--live { border-color: var(--dk-blue); }

  .bracket-team {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--dk-line-soft);
  }
  .bracket-team:last-child { border-bottom: 0; }
  .bracket-team__seed {
    width: 20px; height: 20px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
    background: var(--dk-panel-2); color: var(--dk-body);
    flex-shrink: 0;
  }
  .bracket-team__name {
    flex: 1; min-width: 0;
    font-size: 12px; font-weight: 600; color: var(--dk-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bracket-team__score {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 15px; font-weight: 800; color: var(--dk-body); flex-shrink: 0;
  }
  .bracket-team--player {
    background: color-mix(in srgb, var(--dk-orange) 12%, transparent);
  }
  .bracket-team--player .bracket-team__name {
    font-weight: 800; color: var(--dk-orange-lit);
  }
  .bracket-team--player .bracket-team__seed {
    background: var(--dk-orange); color: #0a0f1a;
  }
  .bracket-team--won .bracket-team__score { color: var(--dk-green); }
  .bracket-team--lost { opacity: 0.6; }
  .bracket-team--tbd {
    font-style: italic;
  }
  .bracket-team--tbd .bracket-team__name { color: var(--dk-faint); font-style: italic; }
  .bracket-matchup:has(.bracket-team--tbd:first-child:nth-last-child(2)) {
    border-style: dashed;
    border-color: var(--dk-line);
    background: var(--dk-panel-2);
  }

  .bracket-champion {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; gap: 8px; padding: 20px;
    border-radius: 14px;
    border: 2px dashed color-mix(in srgb, var(--dk-gold) 40%, transparent);
    background: radial-gradient(120px 120px at 50% 40%,
                  color-mix(in srgb, var(--dk-gold) 12%, transparent), transparent);
  }
  .bracket-champion--filled {
    border-style: solid;
    border-color: var(--dk-gold);
    background: radial-gradient(160px 160px at 50% 30%,
                  color-mix(in srgb, var(--dk-gold) 22%, transparent), transparent);
  }
  .bracket-champion__icon { font-size: 38px; }
  .bracket-champion__name {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 20px; font-weight: 800; color: var(--dk-gold); text-align: center;
  }
  .bracket-champion__placeholder {
    font-size: 11px; font-weight: 700; color: var(--dk-dim); text-align: center;
  }

  /* ── Playoff action hierarchy ──────────────────────────── */
  .dk-playoff-actions {
    display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
  }
  .dk-playoff-actions > .dk-btn { height: 56px; border-radius: 14px; }
  .dk-playoff-actions__primary   { flex: 2; min-width: 260px; font-size: 15px; }
  .dk-playoff-actions__secondary { flex: 1; min-width: 200px; }
  .dk-playoff-actions__tertiary  { flex-shrink: 0; }

  /* ── Champion ──────────────────────────────────────────── */
  .dk-champ-hero {
    position: relative; overflow: hidden;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--dk-gold) 45%, transparent);
    background: linear-gradient(160deg, #241a08, #120d1f 70%);
    padding: 36px 28px;
    text-align: center;
  }
  .dk-champ-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(600px 320px at 50% -10%, rgba(251, 191, 36, 0.26), transparent);
    pointer-events: none;
  }
  .dk-champ-hero > * { position: relative; z-index: 1; }
  .dk-champ-hero__eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: 0.24em;
    text-transform: uppercase; color: #fbbf24;
  }
  .dk-champ-hero__trophy {
    font-size: 76px; margin: 10px 0 4px;
    filter: drop-shadow(0 6px 20px rgba(251, 191, 36, 0.5));
  }
  .dk-champ-hero__title {
    margin: 0;
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 60px; font-weight: 800; line-height: 0.95;
    background: linear-gradient(180deg, #fef3c7, #f59e0b);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .dk-champ-hero__sub { margin: 10px 0 0; font-size: 15px; color: #e8d9b0; }
  .dk-champ-stats {
    display: inline-flex; gap: 20px; margin-top: 18px;
    padding: 12px 22px; border-radius: 14px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.28);
  }
  .dk-champ-stats__val {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 28px; font-weight: 800; color: #fbbf24; line-height: 1;
  }
  .dk-champ-stats__label {
    font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: #c9b787;
  }
  .dk-champ-stats__div { width: 1px; background: rgba(251, 191, 36, 0.25); }

  /* ── Eliminated ────────────────────────────────────────── */
  .dk-elim-hero {
    position: relative; overflow: hidden;
    border-radius: 20px;
    border: 1px solid #3a2230;
    background: linear-gradient(140deg, #1a1114, #0d1220);
    padding: 26px;
  }
  .dk-elim-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(420px 200px at 12% 0%, rgba(239, 68, 68, 0.16), transparent);
    pointer-events: none;
  }
  .dk-elim-hero > * { position: relative; z-index: 1; }
  .dk-elim-hero__eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: #f87171;
  }
  .dk-elim-hero__title {
    margin: 2px 0 0;
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 40px; font-weight: 800; color: #f8fafc; line-height: 1;
  }

  /* ── Team Report modal ─────────────────────────────────── */
  #team-report-root .team-report-modal,
  #team-report-root > div > div[role="dialog"] {
    max-width: 1120px !important;
    width: calc(100vw - 48px) !important;
    border-radius: 20px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-page-bg) !important;
  }
  #team-report-root .rounded-2xl {
    border-radius: 18px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-elev) !important;
  }
  /* Report body becomes a two-column dashboard instead of one long stack. */
  .dk-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr);
    gap: 16px;
    align-items: start;
  }
  @media (max-width: 1150px) {
    .dk-report-grid { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ============================================================
   RESULTS — desktop composition
   ============================================================ */
@media (min-width: 1024px) {
  /* The results screen keeps its single mobile DOM; desktop reflows it into
     a hero band + main column + next-action rail purely with grid placement,
     so no markup is duplicated and no block is hidden. */
  .results-layout {
    max-width: 1120px !important;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    grid-auto-flow: row dense;
    align-items: start;
    gap: 16px !important;
  }

  /* Full-width hero across both columns. */
  .results-layout > .courtside-hero { grid-column: 1 / -1; }

  /* Main column */
  .dk-res-tiles,
  .dk-res-five,
  .dk-res-save,
  .dk-res-actions,
  .results-layout > .results-block--hero { grid-column: 1; }

  /* Next-action rail */
  .dk-res-rail,
  .dk-res-legends { grid-column: 2; }

  /* Anything not explicitly placed (daily banners, submit cards) stays in
     the main column rather than leaking into the rail. */
  .results-layout > *:not(.courtside-hero):not(.dk-res-rail):not(.dk-res-legends) {
    grid-column: 1;
  }

  /* Quick tiles read as a stat row at this width. */
  .dk-res-tiles.quick-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  /* The playoff CTA is the dominant next step, so the rail leads with it. */
  .dk-res-rail .courtside-cta {
    border-radius: 18px;
    padding: 20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 0;
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.34);
    color: #fff;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .dk-res-rail .courtside-cta__icon { font-size: 30px; }
  .dk-res-rail .courtside-cta__title {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 26px; font-weight: 800; color: #fff; line-height: 1;
  }
  .dk-res-rail .courtside-cta__sub { font-size: 12px; color: rgba(255,255,255,0.85); }
  .dk-res-rail .courtside-cta__chev { display: none; }
  /* Locked (missed the playoffs) keeps the panel treatment, not the CTA one. */
  .dk-res-rail .courtside-cta--locked {
    background: var(--dk-elev);
    border: 1px solid var(--dk-line);
    box-shadow: none;
    color: var(--dk-body);
  }
  .dk-res-rail .courtside-cta--locked .courtside-cta__title { color: var(--dk-strong); font-size: 22px; }
  .dk-res-rail .courtside-cta--locked .courtside-cta__sub { color: var(--dk-dim); }

  @media (max-width: 1150px) {
    .results-layout { grid-template-columns: minmax(0, 1fr); }
    .results-layout > * { grid-column: 1 !important; }
  }
}

/* ============================================================
   PLAYOFFS — container width + action hierarchy
   ============================================================ */
@media (min-width: 1024px) {
  /* The bracket needs the wider container; max-w-2xl clipped the Champion
     column off the right edge. */
  .playoffs-layout,
  .playoff-bracket-wrap { max-width: 1200px !important; width: 100%; }
  .playoffs-layout { margin: 0 auto; }

  /* Four columns that fit the container rather than a fixed 820px floor,
     so nothing is cut off at 1366px. */
  .playoff-bracket { min-width: 0; }
  .playoff-bracket__col--champ { min-width: 150px; }

  /* Reference hierarchy: one loud primary, a quieter secondary, a plain
     tertiary — never three identical buttons. */
  .playoffs-layout .flex.flex-col.gap-2:has(.dk-po-primary),
  .playoffs-layout .flex.flex-col.gap-2:has(.dk-po-tertiary) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
  }
  .dk-po-primary {
    flex: 2; min-width: 260px; height: 56px;
    border-radius: 14px !important;
    font-size: 15px !important;
    color: #0a0f1a !important;
    background: linear-gradient(180deg, #fbbf24, #f97316) !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(249, 115, 22, 0.36);
  }
  .dk-po-secondary {
    flex: 1; min-width: 200px; height: 56px;
    border-radius: 14px !important;
    font-size: 14px !important;
  }
  .dk-po-tertiary {
    flex-shrink: 0; height: 56px; padding: 0 20px;
    border-radius: 14px !important;
    font-size: 14px !important;
  }
  .dk-po-primary[disabled],
  .dk-po-secondary[disabled] { opacity: 0.55; box-shadow: none; }
}