/* ============================================================
   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) {

  /* ── The 1440x900 canvas ───────────────────────────────────
     The desktop design is drawn once, at 1440x900, and scaled to whatever
     window it is given — on BOTH axes, by the smaller ratio, so a 2560x1440
     monitor sees the same composition 1.6x larger and a 1275x555 laptop
     sees it 0.62x smaller, never cut off and never reflowed into a
     different layout. js/utils/viewport.js publishes `--app-scale`; the
     shell is laid out at (window ÷ scale) canvas pixels and zoomed back up
     by `scale`, so it always fills the window exactly.

     Everything inside must measure the CANVAS, not the real window:
       - the shell is a size container (`app`), so the height and width
         bands in this file are `@container app` queries against canvas
         pixels, and every former `vh` token is `cqh` — the same numbers,
         resolved against the canvas height;
       - the fluid space/type ramps from css/responsive.css are restated
         here in container units for the same reason;
       - media queries keyed to the real window are only the 1024px
         desktop/phone split itself, which is a device decision.
     Body-mounted modals sit outside the shell and get the same zoom below.
     `zoom` (not `transform`) so that scroll panels, hit-testing, fixed
     overlays and container units all keep working in canvas coordinates. */
  html[data-page="game"] body #app > .main-gradient {
    zoom: var(--app-scale, 1);
    width: calc(var(--app-w) / var(--app-scale, 1));
    height: calc((var(--app-h) - var(--site-nav-h, 0px)) / var(--app-scale, 1));
    max-height: calc((var(--app-h) - var(--site-nav-h, 0px)) / var(--app-scale, 1));
    container-type: size;
    container-name: app;

    --sp-4:  clamp(3px,  0.8cqmin,  6px);
    --sp-6:  clamp(4px,  1.1cqmin,  8px);
    --sp-8:  clamp(5px,  1.5cqmin, 10px);
    --sp-12: clamp(7px,  2.2cqmin, 14px);
    --sp-16: clamp(9px,  2.8cqmin, 18px);
    --gutter: clamp(10px, 2.5cqw, 24px);
    --stack-gap: clamp(6px, 1.4cqh, 16px);
    --fs-sm:  clamp(11px, 2cqmin,   13px);

    /* The content columns fill the canvas. The old fixed caps (1120/1200/
       1340) were the design's widths at 1440x900; on any window wider than
       16:10 the canvas is wider than that and the difference showed up as
       gutters — 30% of a 1920x1080 screen. Every column now spans the
       canvas minus a 24px gutter each side, so the composition fills the
       window at every aspect ratio. Modals keep the px defaults on :root. */
    --dk-col-narrow: calc(100cqw - 48px);
    --dk-col-wide:   calc(100cqw - 48px);
    /* responsive.css caps every direct child of <main> at --content-max
       (a rem ramp keyed to the real window); on the canvas that cap is the
       canvas width too, or the home screen stops at 84rem. */
    --content-max:   calc(100cqw - 48px);
  }
  /* Screens that ship the phone's `max-w-2xl` / `max-w-md` column (Trophy
     Room, Legends, Challenges, the 1v1 series screens, the bracket) open up
     on the canvas too. The Trophy Room and Legends use the width as two
     columns and Challenges as a two- or three-column grid; the 1v1 series
     screens and the bracket widen to the home column's old design width,
     since a single card stack wider than that reads as a billboard. */
  html[data-page="game"] #app > .main-gradient > main > .max-w-2xl:where(:not(.results-layout):not(.draft-screen__inner):not(.legends)),
  html[data-page="game"] #app > .main-gradient > main > .max-w-3xl,
  html[data-page="game"] #app > .main-gradient > main > .max-w-md {
    max-width: var(--dk-col-narrow) !important;
  }
  html[data-page="game"] #app > .main-gradient > header .max-w-2xl { max-width: var(--dk-col-wide) !important; }
  html[data-page="game"] #app > .main-gradient > main > .max-w-md { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html[data-page="game"] #app > .main-gradient > main > .max-w-md > p { grid-column: 1 / -1; }
  html[data-page="game"] #app > .main-gradient > main > .max-w-md > .more-modes__daily { grid-column: 1 / -1; }
  /* Trophy Room: one page. The rank spans the top, the crew standings and
     the hall under them take the left column, banners / badges and titles
     stack on the right, and the three controls close the board as a
     full-width strip. The body is the only two-column track; the room card
     keeps its art's height, so the aspect-locked art fills it with no empty
     matte. */
  html[data-page="game"] .trophy-board__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  html[data-page="game"] .trophy-board__side { border-top: 0; border-left: 1px solid var(--border); }
  html[data-page="game"] .trophy-board > .trophy-rank { padding: 0 0 24px; }
  html[data-page="game"] .trophy-hall .trophy-scene { padding: 28px 32px 28px 0; }
  html[data-page="game"] .trophy-banners,
  html[data-page="game"] .trophy-collection { padding: 28px 0 28px 32px; }
  html[data-page="game"] .trophy-board__main { display: flex; flex-direction: column; }
  /* Crew season hugs its content. Its action (Start a crew, or the link to
     today's board) rides the heading row on the right; the pitch or the
     standings run full width beneath. */
  html[data-page="game"] .trophy-board__main > .trophy-crew { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 28px 32px 28px 0; }
  html[data-page="game"] .trophy-board__main > .trophy-crew > .trophy-crew__head { grid-column: 1; grid-row: 1; justify-content: flex-start; margin-bottom: 0; }
  html[data-page="game"] .trophy-board__main > .trophy-crew > .trophy-crew__link,
  html[data-page="game"] .trophy-board__main > .trophy-crew .trophy-crew__cta { grid-column: 2; grid-row: 1; margin-top: 0; }
  html[data-page="game"] .trophy-board__main > .trophy-crew #crew-season-body,
  html[data-page="game"] .trophy-board__main > .trophy-crew .trophy-crew__invite { display: contents; }
  html[data-page="game"] .trophy-board__main > .trophy-crew #crew-season-body > :not(.trophy-crew__invite),
  html[data-page="game"] .trophy-board__main > .trophy-crew .trophy-crew__pitch { grid-column: 1 / -1; }
  html[data-page="game"] .trophy-board__main > .trophy-crew #crew-season-body > :first-child,
  html[data-page="game"] .trophy-board__main > .trophy-crew .trophy-crew__pitch { margin-top: 12px; }
  html[data-page="game"] .trophy-hall .trophy-banner { min-height: 136px; gap: 8px; }
  html[data-page="game"] .trophy-hall .trophy-banner__art { width: 56px; height: 77px; }
  html[data-page="game"] .trophy-hall .trophy-banner__empty { font-size: 26px; }
  html[data-page="game"] .trophy-control { flex-direction: row; gap: 12px; min-height: 76px; }
  html[data-page="game"] .trophy-control__icon { font-size: 24px; }
  html[data-page="game"] .trophy-control__text { align-items: flex-start; }
  html[data-page="game"] .trophy-control__label { font-size: 14px; }
  /* Legends: hero and Back span; the decade cards flow in two columns,
     three once the canvas is wide enough for them. */
  html[data-page="game"] .legends {
    max-width: var(--dk-col-narrow) !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
  }
  html[data-page="game"] .legends > .legends-hero,
  html[data-page="game"] .legends > button { grid-column: 1 / -1; }
  @container app (min-width: 2000px) {
    html[data-page="game"] .legends,
    html[data-page="game"] #app > .main-gradient > main > .max-w-md { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* Modals mount on <body>, outside the canvas: same zoom, same look. */
  html[data-page="game"] body > div[id$="-root"] { zoom: var(--app-scale, 1); }

  /* ── GM Level rewards track ──────────────────────────────
     The panel keeps its 600px max-width; the extra room goes to bigger
     tiles and previews rather than a wider rail. */
  .gm-track__tile { width: 52px; height: 52px; font-size: 20px; }
  .gm-track__rail { gap: 12px; padding: 30px 20px 22px; scroll-padding-inline: 20px; }
  .gm-track__marker { top: -22px; }
  .gm-track__detail { padding: 20px; }
  .gm-track__rewards { grid-template-columns: repeat(auto-fit, minmax(140px, 180px)); gap: 16px; }

  /* ── 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. */

  /* Night Game (the dark theme). The field and header here; the desktop
     tokens get their dark values below the :root block that defines them.
     See the matching block in css/styles.css. */
  [data-theme="blacktop"] {
    --bg:           #0f131c;
    --header-bg:    transparent;
    --header-shadow: transparent;
  }

  /* Desktop-only design tokens, shared by both themes. The `--dk-*`
     prefix keeps them from colliding with the app-wide set above. */
  :root {
    --dk-shell:      #eef1f6;
    --dk-panel:      #ffffff;
    --dk-panel-2:    #f4f7ff;
    --dk-inset:      #eef3ff;
    --dk-line:       #d5dce8;
    --dk-line-soft:  #e6ebf3;
    --dk-strong:     #0b1a3a;
    --dk-body:       #3d4a66;
    --dk-dim:        #5b6880;
    --dk-faint:      #8290ab;
    --dk-orange:     #ff7a1a;
    --dk-blue:       #1540c8;
    --dk-blue-lit:   #0f33a6;
    --dk-blue-fill:  #1540c8;   /* solid blue with white ink: locks, position discs */
    --dk-green:      #15803d;
    --dk-gold:       #b45309;
    --dk-elev:       #ffffff;
    --dk-elev-hi:    #f4f7ff;
    --dk-shadow:     0 3px 0 #c4ccda;
    --dk-shadow-lg:  0 4px 0 #c4ccda;
    --dk-page-bg:    #eef1f6;
  }

  /* ── 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.

     These are a RAMP, not fixed constants. The old fixed values held from
     1024px all the way to an ultrawide, so a 2560px panel got the same
     1120px card as a 1280px laptop with 1400px of gutter around it — the
     design had exactly one size and only looked right at one. The 1024px
     values below are byte-for-byte what shipped before, so every screen the
     design was actually drawn for is untouched; the bands further down only
     add sizes that did not exist. Every consumer reads the token, never the
     px, so widening a band moves every screen at once.

     Nothing applies a width class directly: the live consumers are
     `.results-layout`, `.draft-workspace`, the in-run header's inner and
     the team-report modal, each pointed at a token further down this
     file. */
  :root {
    --dk-col-narrow: 1120px;
    --dk-col-wide:   1340px;
  }

  /* Growth bands. Each step is ~13%, which is enough to read as "the game
     filled my monitor" without the cards becoming billboards. Width alone
     gates these: a wide-but-short window (1920x600) gets the wider column
     and the short-height reflow further down, which is the right answer for
     it — the space it actually has is horizontal. */
  /* The width ramp that used to live here (1500/1800/2300/3000px bands)
     is superseded: the canvas rule above sets every column to the canvas
     width, so the tokens no longer step. */

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

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

  /* 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); }
  }
}

/* ============================================================
   HEADER / SHELL
   ============================================================ */
@media (min-width: 1024px) {
  /* The in-run header becomes a persistent top bar. (The home screen draws
     its own header; see the HOME SCREEN section at the end of this file.) */
  .app-header-wrap {
    border-bottom: 1px solid var(--dk-line);
    box-shadow: none !important;
  }
  /* The fill and blur sit on a layer behind the bar, not on the wrap: a
     backdrop-filter on the wrap makes it the containing block for its
     `position: fixed` children, which shut the era picker's panel and
     backdrop inside the 62px bar (panel off to the left, only the bar
     dimmed). */
  .app-header-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* Drop the era panel just under the bar, right-aligned with its action
     pills (the 24px gutter plus the inner's 24px padding), as on phone. */
  .era-picker-anchor {
    top: 68px;
    right: max(48px, calc((100% - var(--dk-col-wide)) / 2 + 24px));
  }
  /* The canvas is tall enough for every decade at once, so the list is not
     capped to the phone's 16.5rem scroll box. */
  .era-picker-panel__list { max-height: none; }
  /* No dimming behind the panel. The backdrop stays, invisible, so a click
     outside still closes the picker instead of reaching the board. */
  .era-picker-backdrop { background: transparent; }

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

  .app-header__inner {
    max-width: var(--dk-col-wide) !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(--field-fg) !important;
    background: var(--field-pill-bg);
    border: 1px solid var(--field-pill-line);
  }

  [data-theme="blacktop"] .app-header__brand svg { color: var(--field-fg) !important; background: var(--field-pill-bg); border-color: var(--field-pill-line); }
  /* Night Game: layered navy panels, off-white ink, lifted accents. */
  [data-theme="blacktop"] {
    --dk-shell:      #0f131c;
    --dk-page-bg:    #0f131c;
    --dk-panel:      #1b2232;
    --dk-panel-2:    #161c2a;
    --dk-inset:      #161c2a;
    --dk-line:       #2a3244;
    --dk-line-soft:  #222a3a;
    --dk-strong:     #e6eaf2;
    --dk-body:       #c3cad8;
    --dk-dim:        #aab3c5;
    --dk-faint:      #7f8aa0;
    --dk-orange:     #ff8a3d;
    --dk-blue:       #8ab4ff;
    --dk-blue-lit:   #a9c7ff;
    --dk-blue-fill:  #2f5fd0;
    --dk-green:      #5ad48a;
    --dk-gold:       #f2c14e;
    --dk-elev:       #1b2232;
    --dk-elev-hi:    #242c3f;
    --dk-shadow:     0 2px 0 #0b0e15;
    --dk-shadow-lg:  0 3px 0 #0b0e15;
  }
  [data-theme="blacktop"] .draft-workspace .draft-board-wrap__head p { color: var(--field-fg) !important; }
  [data-theme="blacktop"] .gm-recap__h1 { color: var(--field-fg); }
  [data-theme="blacktop"] .gm-recap__eyebrow--you { color: var(--dk-blue-lit); }
  [data-theme="blacktop"] .gm-recap__eyebrow--ai  { color: var(--dk-gold); }
  [data-theme="blacktop"] .gm-recap__deck { color: var(--field-muted); }
  .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;
  }

  /* The menu header carries the crest at every width, the phone menu's mark
     included — the icon-and-wordmark lockup is the in-run header's, not a
     stand-in for the logo. The lockup ships display:none inline; on the
     desktop menu it is shown beside the crest as a wordmark (see HOME). */

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

  .app-header__actions .header-pill--icon {
    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 {
    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);
  }
  /* Main Menu at the right end of the bar: the context pills' shape. */
  .app-header__actions .header-pill--back {
    padding: 0 14px;
  }
  .app-header__actions .header-pill--back: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 .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; }
}

/* ============================================================
   DAILY CHALLENGE BANNER
   The featured horizontal card at the top of the Challenges screen
   (renderDailyModeCard). The home screen itself is laid out at the end
   of this file.
   ============================================================ */
@media (min-width: 1024px) {
  /* Daily challenge — featured horizontal card. */
  .home-card--daily {
    position: relative;
    overflow: hidden;
    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 .home-card__court {
    display: block !important;
    position: absolute;
    top: -8%;
    right: 12%;
    width: 24%;
    height: 116%;
    opacity: 0.55;
    pointer-events: none;
  }
  .home-card--daily .home-card__court svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: color-mix(in srgb, var(--dk-orange) 45%, transparent);
    stroke-width: 1.5;
  }
  .home-card--daily .home-card__court svg * { vector-effect: non-scaling-stroke; }
  .home-card--daily > * { position: relative; }
  /* The unplayed banner's Play: second to last, ahead of the court. The
     played banner has a Board button there, so it is untouched. */
  .home-card--daily > span:nth-last-child(2) {
    height: 54px;
    padding: 0 26px !important;
    border-radius: 14px !important;
    display: flex; align-items: center;
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 19px !important;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
  }
  .home-card--daily > span:first-child + div > p:first-child { font-size: 16px; }
  .home-card--daily > span:first-child + div > p:nth-child(2) { font-size: 13px; }
  .home-card--daily > span:first-child + div > p:nth-child(3) { font-size: 12px; }
  .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);
  }

  /* Short canvases: the court drops out and the banner tightens. */
  @container app (max-height: 740px) {
    .home-card--daily .home-card__court { display: none !important; }
    .home-card--daily { padding: 13px 18px !important; gap: 14px; }
    .home-card--daily > span:first-child { width: 44px; height: 44px; font-size: 21px; }
  }
  @container app (max-height: 600px) {
    .home-card--daily { padding: 10px 14px !important; }
  }
}

/* ============================================================
   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).

     The whole screen is pinned to one viewport — the page never scrolls
     while drafting. Three regions absorb whatever height is left over
     after the fixed chrome (header, stepper, slot machine, roster strip):
     the draft board grid and the synergy list scroll inside themselves.
     Every fixed dimension below is a clamp() on `vh`, so the layout
     scales continuously with the window instead of stepping between
     breakpoints — a 1600px-tall monitor and a 700px laptop both land on
     one screenful with no dead space and no clipped roster.

     The `--dk-d-*` tokens are the whole scaling system: change a clamp
     here and every rule that reads it follows. Keep the lower bound of
     each clamp at the smallest size the element is still legible at —
     that lower bound is what a short window actually gets. */
  .draft-screen {
    /* Vertical rhythm */
    --dk-d-gap:        clamp(7px, 1.35cqh, 16px);
    --dk-d-pad-y:      clamp(8px, 1.9cqh, 22px);
    /* Slot machine (team/era spinner) */
    --dk-d-slot-pad:   clamp(10px, 1.9cqh, 22px);
    --dk-d-slot-cell:  clamp(52px, 10.5cqh, 120px);
    --dk-d-slot-face:  clamp(20px, 3.3cqh, 34px);
    --dk-d-spin-h:     clamp(38px, 5.4cqh, 58px);
    /* Roster strip */
    --dk-d-roster-h:   clamp(60px, 11cqh, 118px);
    --dk-d-roster-pad: clamp(6px, 1.3cqh, 14px);
    --dk-d-roster-pos: clamp(15px, 2.1cqh, 22px);
    --dk-d-roster-ovr: clamp(14px, 1.9cqh, 20px);
    /* Round stepper strip */
    --dk-d-step-pad:   clamp(7px, 1.3cqh, 14px);
    --dk-d-step-round: clamp(18px, 2.5cqh, 26px);
    /* Team-status gauges */
    --dk-d-gauge-w:    clamp(66px, 9.6cqh, 104px);
    --dk-d-gauge-h:    clamp(56px, 8.2cqh, 89px);
    --dk-d-gauge-badge:clamp(26px, 3.5cqh, 38px);
    --dk-d-gauge-val:  clamp(18px, 2.4cqh, 26px);
    --dk-d-panel-pad:  clamp(10px, 1.7cqh, 18px);

    /* Tailwind's `min-h-screen` would let the column grow past the fold;
       a hard height is what makes the leftover-space maths below work. */
    min-height: 0;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .draft-screen__main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: var(--dk-d-pad-y) 24px !important;
  }

  .draft-workspace {
    width: 100%;
    /* `!important`, like `.results-layout` above, because
       responsive.css caps every direct child of <main> at `--content-max`
       with a far more specific selector. Without it the draft screen never
       reached its own design width: on a 1920px monitor the cap held the
       workspace at 1152px — 188px narrower than the 1340px it was drawn
       for — and it stayed pinned at 1344px on an ultrawide while the menu
       beside it grew past 1800px. The screen's own maximum should be what
       bounds it. */
    max-width: var(--dk-col-wide) !important;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* On a tall monitor the board needs less height than it is offered.
       Centring spends the surplus as even margin above and below rather
       than as one dead gap between the cards and the roster strip. */
    justify-content: center;
    gap: var(--dk-d-gap);
  }

  /* ── Before the first spin ────────────────────────────────
     There is no board yet, so the left column is just the spinner and an
     empty roster. Nothing claims the leftover height, the centring above
     splits it evenly top and bottom, and the screen reads as a small block
     marooned in the middle of a large empty page.

     Hand that space to the spinner. It is the only thing on screen you can
     act on before a spin, so a larger TEAM/ERA pair and a full-width SPIN
     button is the honest use of the room — and it puts the roster strip at
     the bottom exactly where it sits once the board appears, so nothing
     jumps when the spin lands. The cells are capped so a tall monitor gets
     a generous spinner rather than an absurd one. */
  .draft-workspace--no-board .draft-workspace__cols { flex: 1 1 auto; }

  /* Spinner at the top, roster strip at the bottom — the same geometry the
     screen has once the board arrives, so the roster does not jump when the
     spin lands. Whatever is left over sits between them, which is exactly
     where the board will appear. */
  .draft-workspace--no-board .draft-workspace__left {
    justify-content: space-between;
  }

  /* The spinner is the only card in the column before the first board, so
     it takes the whole height; its reveal cells are what grow. */
  .draft-workspace--no-board .draft-workspace__left .draft-slot-machine {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .draft-workspace--no-board .draft-slot-machine__grid {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }
  .draft-workspace--no-board .draft-slot-machine__cell { height: 100%; }

  /* The completed state uses the same stable shell, but keeps its action,
     roster and status rail anchored to the top instead of spacing the left
     column across the full viewport. */
  .draft-workspace--complete .draft-workspace__cols { flex: 1 1 auto; }
  .draft-workspace--complete .draft-workspace__left {
    justify-content: flex-start;
    gap: clamp(20px, 4cqh, 36px);
  }

  /* `0 1 auto`, not `1`: the columns take their content's height when it
     fits and shrink (never grow) when it doesn't, handing the overflow to
     the board's and synergy list's own scrollbars. */
  .draft-workspace__cols {
    /* Grow as well as shrink: the board (left) and the synergy list (right)
       are each column's elastic region, so leftover canvas height lands in
       them rather than as margin above and below the workspace. */
    flex: 1 1 auto;
    max-height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(272px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--dk-d-gap);
    align-items: stretch;
  }
  .draft-workspace__left,
  .draft-workspace__right {
    display: flex;
    flex-direction: column;
    gap: var(--dk-d-gap);
    min-width: 0;
    min-height: 0;
    /* A no-op while the board is on screen (its `flex: 1` leaves no free
       space to distribute). It only bites once the roster is complete and
       the board is gone, centring the simulate card against the full-height
       synergy rail instead of stranding it at the top. */
    justify-content: center;
  }

  /* Narrower desktops keep both columns — stacking them is what pushed
     the roster off the fold. The rail just gets tighter instead. */
  @container app (max-width: 1200px) {
    .draft-workspace__cols { grid-template-columns: minmax(0, 1.9fr) minmax(232px, 0.85fr); }
  }

  /* ── Who stretches, who stays put ──────────────────────────
     Exactly one child per column is allowed to grow. Everything else is
     `flex: 0 0 auto` so it keeps its natural height and the leftover
     lands in the scrollable region. */
  .draft-workspace__left  > *,
  .draft-workspace__right > * { flex: 0 0 auto; min-height: 0; }

  .draft-workspace .draft-board-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .draft-workspace .draft-board-wrap__head { flex: 0 0 auto; margin-bottom: 8px !important; }

  /* ── Round stepper strip ───────────────────────────────── */
  .draft-stepper {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: var(--dk-d-step-pad, 14px) 18px;
    border-radius: 16px;
    background: var(--dk-elev);
    border: 1px solid var(--dk-line);
    /* No wrapping on the draft screen: a second row is exactly the kind of
       unbudgeted height that used to push the roster past the fold. */
    flex-wrap: nowrap;
  }
  .draft-stepper--complete {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 6px;
    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--complete .draft-stepper__head { grid-row: 1 / 3; }
  .draft-stepper--complete .draft-stepper__phases { grid-column: 2; grid-row: 1; }
  .draft-stepper--complete .draft-stepper__name { display: none; }
  .draft-stepper--complete .draft-coach-chip {
    grid-column: 2;
    grid-row: 2;
    width: min(100%, 560px);
    justify-self: center;
  }
  .draft-stepper--complete .draft-stepper__done-chip {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }
  .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: var(--dk-d-step-round, 26px);
    font-weight: 800; color: var(--dk-strong); margin-top: 2px;
    white-space: nowrap;
  }
  .draft-stepper__round small { color: var(--dk-faint); font-size: 0.7em; }

  .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; position: relative; }

  /* Float the coach list under its chip. Inline (as on mobile) it would grow
     the stepper by ~250px, and on a fixed-height screen that height comes
     straight out of the draft board below it. */
  .draft-stepper .draft-coach-chip__picker {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: 380px;
    max-width: 90vw;
    background: var(--dk-panel) !important;
    border: 1px solid var(--dk-line) !important;
    box-shadow: var(--dk-shadow-lg);
  }
  /* The chip itself only — `> div` alone also caught the picker below and
     crushed it to one row. */
  .draft-stepper .draft-coach-chip > button:not(.draft-coach-chip__picker),
  .draft-stepper .draft-coach-chip > div:not(.draft-coach-chip__picker) {
    height: clamp(30px, 4cqh, 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-workspace .draft-slot-machine {
    border-radius: 20px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-elev-hi) !important;
    padding: var(--dk-d-slot-pad, 22px) !important;
    box-shadow: var(--dk-shadow-lg);
  }
  .draft-workspace .draft-slot-machine__grid {
    gap: 14px !important;
    margin-bottom: clamp(8px, 1.6cqh, 18px) !important;
  }
  .draft-workspace .draft-slot-machine__cell {
    min-height: var(--dk-d-slot-cell, 120px) !important;
    border-radius: 16px !important;
    border-width: 2px !important;
    padding: clamp(8px, 1.6cqh, 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: var(--dk-d-slot-face, 34px) !important;
    font-weight: 800;
  }
  /* The spin action is the loudest control on the screen. */
  .draft-workspace .draft-slot-machine [data-action="spin"] {
    height: var(--dk-d-spin-h, 58px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 14px !important;
    font-size: clamp(12px, 1.7cqh, 16px) !important;
    letter-spacing: 0.1em;
    background: var(--acc) !important;
    border: none;
    color: var(--on-acc) !important;
    box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
    animation: pulseGlowAction 2.4s ease-in-out infinite;
  }
  .draft-workspace .draft-slot-machine > button[disabled] {
    /* SPINNING… is a small grey label in the helper line's spot, not a
       full-width blue bar: the reels already show the spin, and a bar that
       flashed on and off with every spin made the board jarring. Direct
       child only — the header's disabled Skip buttons keep their pill. */
    background: none !important;
    color: var(--muted-fg) !important;
    height: var(--dk-d-spin-h, 58px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    font-weight: 700;
  }
  /* The "Draft places into an open natural slot…" helper line. */
  .draft-workspace .draft-slot-machine > p.text-center {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.3;
    /* Same height as the SPINNING… button it replaces, so the board
       below does not jump when a spin starts or lands. */
    min-height: var(--dk-d-spin-h, 58px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── 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: clamp(4px, 0.9cqh, 10px) !important; }

  .draft-workspace .draft-roster-slot {
    min-height: var(--dk-d-roster-h, 118px);
    border-radius: 14px !important;
    padding: var(--dk-d-roster-pad, 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: var(--dk-d-roster-pos, 22px) !important;
    font-weight: 800;
  }
  .draft-workspace .draft-roster-slot--filled .draft-roster-slot__pos {
    font-size: clamp(12px, 1.6cqh, 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: var(--dk-d-roster-ovr, 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);
  }

  /* The draft board is the left column's elastic region: it takes whatever
     height is left after the slot machine and roster strip, and scrolls
     internally when the spin returns more players than fit. A fixed `vh`
     cap here is what used to overflow the fold on short windows. */
  .draft-workspace .draft-board-scroll {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    /* Reserve the scrollbar's width always, so drafting a player (which can
       drop the board below the scroll threshold) doesn't reflow the grid. */
    scrollbar-gutter: stable;
  }
  /* The spinning skeleton has no content to give it height. */
  .draft-workspace .draft-board-scroll--shell { min-height: 6rem; }
  /* Under the spinner it is no panel at all: the landed cards sit straight
     on the page, so a white panel shown only mid-spin flashed in and out
     with every spin. The cards then fade in where they will sit — no 8px
     rise — and the heading, on screen through the spin, does not blink. */
  .draft-workspace .draft-slot-machine ~ .draft-board-wrap .draft-board-scroll--shell {
    border: 0;
    background: none;
  }
  .draft-workspace .draft-slot-machine ~ .draft-board-wrap.animate-fade-up { animation: none; }
  .draft-workspace .draft-slot-machine ~ .draft-board-wrap.animate-fade-up .draft-board-grid {
    animation: fadeIn 0.3s ease-out;
  }

  /* Fluid card count instead of a hard 3-up: the board fills its width with
     as many ~168px cards as fit, so a typical five-player spin lands on one
     row on a wide column and reflows down gracefully on a narrow one. */
  .draft-workspace .draft-board-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap: 10px !important;
    align-content: start;
  }

  /* ── Team status panel ─────────────────────────────────── */
  .dk-team-status {
    border-radius: 20px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    padding: var(--dk-d-panel-pad, 18px) 14px;
  }
  .dk-team-status__head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: clamp(8px, 1.4cqh, 14px);
  }
  .dk-team-status__label {
    font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--dk-dim);
  }
  .dk-team-status__hint { font-size: 11px; font-weight: 600; color: var(--dk-dim); }
  .dk-team-status .draft-stat-gauges { gap: 8px; }

  /* The rail's gauges follow the same vh scale as everything else, so the
     dashboard shrinks with the window rather than squeezing the synergy
     panel below it off the screen. */
  .dk-team-status .draft-stat-gauge {
    --gauge-w:     var(--dk-d-gauge-w, 104px);
    --gauge-h:     var(--dk-d-gauge-h, 89px);
    --gauge-badge: var(--dk-d-gauge-badge, 38px);
    padding: clamp(8px, 1.5cqh, 16px) 4px clamp(7px, 1.3cqh, 14px) !important;
  }
  .dk-team-status .draft-stat-gauge__value { font-size: var(--dk-d-gauge-val, 26px); }

  /* ── Chemistry synergies panel ─────────────────────────── */
  .dk-synergy {
    border-radius: 18px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    padding: var(--dk-d-panel-pad, 16px);
  }
  /* On the draft screen the synergy panel is the rail's elastic region —
     it fills the space under the gauges and scrolls its own list. */
  .draft-workspace__right .dk-synergy {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .dk-synergy__head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: clamp(6px, 1.2cqh, 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;
  }
  .draft-workspace__right .dk-synergy__list {
    flex: 1 1 auto; min-height: 0; max-height: none;
  }
  .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="blacktop"]) .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;
  }
  .draft-workspace__right .dk-synergy__empty { flex: 1 1 auto; min-height: 0; padding: 10px; }
  .dk-synergy__empty-icon { font-size: 26px; opacity: 0.5; }
  .draft-workspace__right .dk-synergy:has(> .dk-synergy__empty) {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon head" "icon text";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px 16px;
  }
  .draft-workspace__right .dk-synergy:has(> .dk-synergy__empty) .dk-synergy__empty { display: contents; }
  .draft-workspace__right .dk-synergy:has(> .dk-synergy__empty) .dk-synergy__head { grid-area: head; margin: 0; }
  .draft-workspace__right .dk-synergy:has(> .dk-synergy__empty) .dk-synergy__empty-icon {
    grid-area: icon; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; font-size: 15px; opacity: 1;
    background: var(--dk-inset);
  }
  .draft-workspace__right .dk-synergy:has(> .dk-synergy__empty) .dk-synergy__empty-text {
    grid-area: text; max-width: none; text-align: left;
  }
  .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 {
    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);
    /* --dk-d-slot-pad is only defined inside .draft-screen, hence the fallback. */
    padding: var(--dk-d-slot-pad, 22px) !important;
  }
  .draft-workspace--complete .draft-simulate-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(250px, 38cqh, 318px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .draft-workspace--complete .draft-simulate-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.75;
    background:
      radial-gradient(circle at 50% 48%, transparent 0 17%, color-mix(in srgb, var(--dk-blue) 10%, transparent) 17.2% 17.8%, transparent 18%),
      linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--dk-blue) 9%, transparent) 50%, transparent 50.2%),
      radial-gradient(ellipse 48% 118% at 0 48%, transparent 0 83%, color-mix(in srgb, var(--dk-blue) 9%, transparent) 83.2% 83.8%, transparent 84%),
      radial-gradient(ellipse 48% 118% at 100% 48%, transparent 0 83%, color-mix(in srgb, var(--dk-blue) 9%, transparent) 83.2% 83.8%, transparent 84%);
  }
  .draft-workspace--complete .draft-simulate-card > * { position: relative; z-index: 1; }
  .draft-workspace--complete .draft-simulate-card > .flex svg { width: 56px; height: 56px; }
  .draft-workspace--complete .draft-simulate-card > p.font-black { font-size: 26px; }
  .draft-workspace--complete .draft-roster-slot { min-height: clamp(104px, 15cqh, 128px); }

  /* ── Short windows: buy height for the board ───────────────
     Fitting on one screen is not enough — a draft card whose "Draft"
     button sits below the fold of its own scroll region is a card you
     can't use without hunting for it. Below these heights the screen
     spends its remaining budget on the cards and drops the chrome that
     is nice-to-have.

     The drop order is by value to the pick you are making right now:
     the one-time welcome banner goes first, the trait chips only after
     that, and the spinner's decorations last.

     First to go: the cold-open welcome. It is one-time onboarding worth
     ~5rem, and below this height that 5rem is the difference between
     seeing a whole draft card and seeing two thirds of one. Mobile hides
     it outright (css/styles.css). */
  @container app (max-height: 900px) {
    .draft-screen .draft-cold-open { display: none !important; }
  }

  /* Trade the trait chips for card height, exactly as the mobile
     one-viewport layout does — position, name, stats and the Draft
     button are what the pick is actually made on.

     820, not 780: a MacBook Air 13 reports 790px of viewport and was
     missing this band by ten pixels, so it kept the full 211px card and
     could only ever show one row of the board with 387px of players
     hidden below the scroll. */
  @container app (max-height: 820px) {
    .draft-workspace .draft-card-traits { display: none !important; }
    .draft-workspace .draft-card-body { padding: 9px !important; }
    .draft-workspace .draft-card__head { margin-bottom: 5px !important; }
    .draft-workspace .draft-card__name { margin-bottom: 4px !important; }
    .draft-workspace .draft-card__actions { padding: 0 9px 9px !important; }
    .draft-workspace .draft-card-btn { padding: 6px 0 !important; }

    /* Slot-machine chrome compacts too: the team/era values stay large,
       the labels and LOCKED pills give up their margins. */
    .draft-workspace .draft-slot-machine > .flex.items-center { margin-bottom: 7px !important; }
    .draft-workspace .draft-slot-machine__cell .text-\[10px\] { margin-bottom: 2px !important; }
    .draft-workspace .draft-slot-machine__cell .mt-2 {
      margin-top: 3px !important;
      padding: 1px 7px !important;
    }
  }

  /* Moving compact cards up to 820px must not reduce the LOCKED label's
     type in the newly covered 781–820px band. Keep its shipped threshold. */
  @container app (max-height: 780px) {
    .draft-workspace .draft-slot-machine__cell .mt-2 { font-size: 9px !important; }
  }

  /* ── Laptop tier ──────────────────────────────────────────
     A 14" 1920x1080 laptop is the common case that lands here: Windows
     recommends 150% scaling at that size, so the CSS viewport is 1280x720,
     and Chrome's tab strip + omnibox take it to roughly 1280x610. At 125%
     it is 1536x754; at 175%, 1097x522.

     The page already fits at all of those — but the draft board was being
     squeezed to ~174px against a 144px card, so barely one row of players
     was visible, and at 1097x522 the card was taller than the board and its
     "Draft" button fell below the scroll fold entirely.

     The spinner is where the height comes from. Once a spin has landed, its
     two big cells restate the team and era that the board header directly
     underneath already says ("JAZZ · 1970S"), so it is the block that can
     give up the most for the least. The cards then give up padding — never
     the position, name, stats or button, which are what the pick is made
     on. Above 760px tall nothing here applies and the desktop layout is
     exactly as it was — 760 is chosen so the 150%-scaled fullscreen case
     (1280x720) is included while a normal 900px+ window is not. */
  @container app (max-height: 760px) {
    .draft-screen {
      --dk-d-slot-cell: clamp(38px, 6.6cqh, 62px);
      --dk-d-slot-pad:  clamp(7px, 1.2cqh, 12px);
      --dk-d-slot-face: clamp(16px, 2.7cqh, 22px);
    }
    .draft-workspace .draft-slot-machine__grid {
      margin-bottom: clamp(4px, 0.8cqh, 8px) !important;
    }
    .draft-workspace .draft-slot-machine__cell {
      padding: clamp(4px, 0.8cqh, 9px) 10px !important;
    }
    /* The "DRAFT BOARD — ROUND n" row keeps its Skip buttons; only its
       margin goes. */
    .draft-workspace .draft-slot-machine > .flex.items-center {
      margin-bottom: 5px !important;
    }

    /* Cards: tighten the box, keep every piece of information in it. */
    .draft-workspace .draft-card-body { padding: 7px !important; }
    .draft-workspace .draft-card__actions { padding: 0 7px 7px !important; }
    .draft-workspace .draft-card__name { margin-bottom: 3px !important; }
    .draft-workspace .draft-card__head { margin-bottom: 4px !important; }
    .draft-workspace .draft-card-btn { padding: 5px 0 !important; }
  }

  /* Last resort before the layout would clip: the era/team spinner keeps
     only its values, and the stepper drops its phase labels. */
  @container app (max-height: 660px) {
    .draft-screen .draft-stepper__name { display: none; }
    .draft-workspace .draft-slot-machine__cell .mt-2 { display: none !important; }
    .draft-workspace .draft-slot-machine > p.text-center { display: none !important; }
    .draft-reveal__stats { display: none; }
  }

  /* Very short (1080p at 175%, or a heavily chromed 150% window). The board
     can only afford one row here, so the card must actually fit in one row
     — otherwise its "Draft" button sits under the fold and the primary
     action of the screen is invisible. The stats line is the last thing to
     compact; the button never is. */
  /* Two complete card rows, or one — never one and a half.
     At 1275x555 (a 1080p laptop at 150% OS scaling) the board panel gets
     ~187px once the spinner, roster strip and chrome are paid for, while a
     player card is 124px. The second row was landing half-cut against the
     panel edge: the reader cannot tell whether the sliced card is the last
     one, on the screen where the whole decision is made. The rules below
     buy back the ~70px the second row needs by compacting the chrome AROUND
     the board — the spinner has already done its job once TEAM and ERA are
     showing, and does not need to stay the tallest element on screen. The
     card's own name, stats and Draft button are what the pick is made on,
     so their shipped type sizes stay unchanged. */
  @container app (max-height: 620px) {
    .draft-screen {
      --dk-d-roster-h:   clamp(44px, 8cqh, 58px);
    }
    .draft-workspace .draft-slot-machine__cell { padding: 4px 10px !important; }
  }

  @container app (max-height: 560px) {
    .draft-screen {
      --dk-d-slot-cell: clamp(32px, 6cqh, 44px);
      /* Must stay at or below the 620px band's value — this block is later
         in source, so a larger number here silently undoes that trim. */
      --dk-d-roster-h:  clamp(40px, 7.4cqh, 52px);
    }
    .draft-workspace .draft-card__stats { gap: 0 5px !important; line-height: 1.25; }
    .draft-workspace .draft-card-body { padding: 6px !important; }
    .draft-workspace .draft-card__actions { padding: 0 6px 6px !important; }
    .draft-workspace .draft-board-wrap__head { margin-bottom: 4px !important; }
  }
  .draft-workspace .draft-simulate-card [data-action="simulate"] {
    height: var(--dk-d-spin-h, 56px);
    border-radius: 14px !important;
    font-size: 15px !important;
    letter-spacing: 0.06em;
    background: var(--acc) !important;
    color: var(--on-acc) !important;
    box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
    animation: pulseGlowAction 2.4s ease-in-out infinite;
  }
}

/* ============================================================
   GM vs AI AND HOT-SEAT 1v1 — THE FULL COURT
   ------------------------------------------------------------
   renderGmCourtDrafting() at desktop widths: one control strip, one full
   court with your starting five on the left half and the AI GM's on the
   right, the team/era reveal in the centre circle, and the draft board in a
   tray under the floor. It replaced three columns — two roster rails of
   mostly "Empty" boxes either side of the board — in which nothing compared
   your five against theirs and the rails were most of the screen.

   The same one-viewport contract as the solo workspace: the screen carries
   `.draft-workspace` as well as `.gm-workspace`, so the board's internal
   scrolling and the card styling apply inside the tray unchanged. The court
   takes whatever height the strip and the tray leave, between a floor that
   keeps the tokens clear of each other and a cap that stops a tall monitor
   turning it into a poster.

   Hot-seat 1v1 drafts here too: the `--you` / `--ai` suffixes name the
   left and right halves, whoever is sitting there. Above the floor, the
   win bar (`.gm-winbar`) splits one track at Player 1's series odds.
   ============================================================ */
@media (min-width: 1024px) {
  /* The court absorbs the height up to its cap; past that a tall monitor
     splits what is left above and below rather than under the tray. */
  .gm-workspace {
    justify-content: center;

    --gm-floor:        #5e9a46;
    --gm-floor-grain:  rgba(0, 0, 0, 0.06);
    --gm-line:         #fff8ec;
    --gm-half-up-you:  rgba(37, 99, 235, 0.75);
    --gm-half-up-ai:   rgba(180, 83, 9, 0.75);
    /* Opaque: a translucent blue over the outfield mixes to teal. */
    --gm-paint-you:    #c3d4f7;
    --gm-paint-ai:     rgba(217, 119, 6, 0.28);
    --gm-you-fill:     #2563eb;
    --gm-you-ink:      #ffffff;
    --gm-ai-fill:      #b45309;
    --gm-ai-ink:       #ffffff;
    --gm-tag-bg:       #ffffff;
    --gm-tag-ink:      #0f172a;
    --gm-open-bg:      rgba(255, 255, 255, 0.5);
    --gm-open-tag:     rgba(255, 255, 255, 0.78);
    --gm-open-you:     #1e3a8a;
    --gm-open-ai:      #78350f;
    --gm-medal-bg:     #fffaf1;
    --gm-court-shadow: inset 0 0 0 1px rgba(92, 64, 30, 0.22), var(--dk-shadow);
  }
  /* Night Game: a deeper outfield, the lifted blue and gold for the halves. */
  [data-theme="blacktop"] .gm-workspace {
    --gm-floor:        #243f27;
    --gm-floor-grain:  rgba(0, 0, 0, 0.14);
    --gm-line:         rgba(255, 236, 214, 0.5);
    --gm-half-up-you:  rgba(138, 180, 255, 0.8);
    --gm-half-up-ai:   rgba(242, 193, 78, 0.75);
    --gm-paint-you:    rgba(138, 180, 255, 0.3);
    --gm-paint-ai:     rgba(242, 193, 78, 0.3);
    --gm-you-fill:     #3f73e6;
    --gm-you-ink:      #ffffff;
    --gm-ai-fill:      #e0a53a;
    --gm-ai-ink:       #1c1206;
    --gm-tag-bg:       var(--dk-panel);
    --gm-tag-ink:      var(--dk-strong);
    --gm-open-bg:      rgba(15, 19, 28, 0.42);
    --gm-open-tag:     rgba(15, 19, 28, 0.7);
    --gm-open-you:     #a9c7ff;
    --gm-open-ai:      #ffd38a;
    --gm-medal-bg:     var(--dk-elev-hi);
  }

  /* ── Control strip ─────────────────────────────────────── */
  .gm-strip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: var(--dk-d-step-pad, 14px) 16px;
    border-radius: 16px;
    background: var(--dk-elev);
    border: 1px solid var(--dk-line);
    box-shadow: var(--dk-shadow);
  }
  .gm-strip__side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .gm-strip__side--ai { justify-content: flex-end; }
  .gm-strip__dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 999px; }
  .gm-strip__dot--you { background: var(--gm-you-fill); }
  .gm-strip__dot--ai { background: var(--gm-ai-fill); }
  .gm-strip__name {
    flex: 0 0 auto;
    font-size: clamp(18px, 2.4cqh, 22px);
    font-weight: 800;
    line-height: 1;
  }
  .gm-strip__name--you { color: var(--dk-blue-lit); }
  .gm-strip__name--ai { color: var(--dk-gold); }
  .gm-strip__coach {
    min-width: 0;
    font-size: 12px;
    color: var(--dk-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The coach chip is interactive until the first spin locks it. Its picker
     floats under it for the reason it does in the solo stepper: laid out
     inline it grows the strip by ~250px, straight out of the court. */
  .gm-strip .draft-coach-chip { flex: 0 1 380px; min-width: 0; margin: 0; position: relative; }
  .gm-strip .draft-coach-chip__picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: 380px;
    max-width: 90vw;
    background: var(--dk-panel) !important;
    border: 1px solid var(--dk-line) !important;
    box-shadow: var(--dk-shadow-lg);
  }
  .gm-strip .draft-coach-chip > button:not(.draft-coach-chip__picker),
  .gm-strip .draft-coach-chip > div:not(.draft-coach-chip__picker) {
    height: clamp(30px, 4cqh, 40px);
    padding: 0 14px !important;
    border-radius: 11px !important;
    background: var(--dk-panel-2) !important;
    border: 1px solid var(--dk-line) !important;
  }

  /* Snake order: every pick numbered, coloured by who makes it, and the one
     on the clock spelled out on its own wider pill. */
  .gm-order { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
  .gm-order__pip {
    flex: 0 0 auto;
    min-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;
    background: var(--dk-panel);
    border: 2px solid;
    white-space: nowrap;
  }
  .gm-order__pip--you { border-color: color-mix(in srgb, var(--gm-you-fill) 45%, transparent); color: var(--dk-blue-lit); }
  .gm-order__pip--ai { border-color: color-mix(in srgb, var(--gm-ai-fill) 45%, transparent);  color: var(--dk-gold); }
  .gm-order__pip--done.gm-order__pip--you { background: color-mix(in srgb, var(--gm-you-fill) 22%, var(--dk-panel)); border-color: transparent; }
  .gm-order__pip--done.gm-order__pip--ai { background: color-mix(in srgb, var(--gm-ai-fill) 24%, var(--dk-panel));  border-color: transparent; }
  .gm-order__pip--current { padding: 0 12px; border-color: transparent; }
  .gm-order__pip--current.gm-order__pip--you {
    background: var(--gm-you-fill);
    color: var(--gm-you-ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-you-fill) 30%, transparent);
  }
  .gm-order__pip--current.gm-order__pip--ai {
    background: var(--gm-ai-fill);
    color: var(--gm-ai-ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-ai-fill) 30%, transparent);
  }
  /* A 1024–1180px window cannot fit two coach names beside ten pills; the
     AI's coach is the one to drop — the centre circle names it on its turn. */
  @container app (max-width: 1180px) {
    .gm-strip__coach { display: none; }
    .gm-order { gap: 4px; }
    .gm-order__pip { min-width: 24px; height: 24px; font-size: 11px; }
  }

  /* ── Win bar ───────────────────────────────────────────── */
  /* A chess.com-style evaluation bar: one track, Player 1's colour filling
     it from the left to their series odds, a white edge where the colours
     meet, and a faint tick at 50%. Each render replaces the bar, so the fill
     slides from the share the last render drew (--gm-win-from). */
  .gm-winbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: end;
    gap: 14px;
    padding: 8px 16px 10px;
    border-radius: 16px;
    background: var(--dk-elev);
    border: 1px solid var(--dk-line);
    box-shadow: var(--dk-shadow);
  }
  .gm-winbar__pct {
    font-size: clamp(22px, 3cqh, 28px);
    font-weight: 800;
    line-height: 30px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .gm-winbar__pct--you { color: var(--dk-blue-lit); }
  .gm-winbar__pct--ai { color: var(--dk-gold); }
  .gm-winbar__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .gm-winbar__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .gm-winbar__label { min-width: 0; color: var(--dk-dim); overflow: hidden; text-overflow: ellipsis; }
  .gm-winbar__label small { font-size: inherit; font-weight: 700; letter-spacing: 0.06em; text-transform: none; }
  .gm-winbar__lead--you { color: var(--dk-blue-lit); }
  .gm-winbar__lead--ai { color: var(--dk-gold); }
  .gm-winbar__lead--even { color: var(--dk-dim); }
  .gm-winbar__track {
    position: relative;
    height: 30px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--gm-ai-fill);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
  }
  .gm-winbar__fill {
    position: relative;
    z-index: 1;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 10px;
    overflow: hidden;
    background: var(--gm-you-fill);
    color: var(--gm-you-ink);
    border-right: 3px solid #ffffff;
    animation: gmWinSlide 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .gm-winbar__fill b,
  .gm-winbar__p2 { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
  .gm-winbar__p2 { position: absolute; right: 10px; z-index: 0; color: var(--gm-ai-ink); }
  .gm-winbar__mid {
    position: absolute;
    left: 50%;
    top: 5px;
    bottom: 5px;
    width: 2px;
    margin-left: -1px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
  }
  @keyframes gmWinSlide { from { width: var(--gm-win-from, 50%); } }
  @media (prefers-reduced-motion: reduce) {
    .gm-winbar__fill { animation: none; }
  }

  /* ── The ground ────────────────────────────────────────── */
  .gm-court {
    --gm-medal: min(78cqh, 230px);
    position: relative;
    flex: 1 1 0;
    /* A two-row board scrolls inside the tray before the ground gets so short
       that the starters crowd the boundary. */
    min-height: clamp(240px, 40cqh, 330px);
    max-height: 470px;
    container: gmcourt / size;
    border-radius: 18px;
    overflow: hidden;
    background:
      repeating-linear-gradient(90deg, transparent 0 46px, var(--gm-floor-grain) 46px 47px),
      var(--gm-floor);
    box-shadow: var(--gm-court-shadow);
  }
  /* The field of play's edge, inset so the rounded corners never clip the line. */
  .gm-court::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 3px solid var(--gm-line);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
  }
  /* The half on the clock is outlined in its side's colour. A flat tint was
     tried first: blue over the outfield reads as a muddy teal. */
  .gm-court__half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    transition: box-shadow 0.3s ease;
  }
  .gm-court__half--you { left: 0; }
  .gm-court__half--ai { right: 0; }
  .gm-court--you-up .gm-court__half--you { box-shadow: inset 0 0 0 4px var(--gm-half-up-you), inset 0 0 44px -12px var(--gm-half-up-you); }
  .gm-court--ai-up  .gm-court__half--ai { box-shadow: inset 0 0 0 4px var(--gm-half-up-ai),  inset 0 0 44px -12px var(--gm-half-up-ai); }
  .gm-court__midline {
    position: absolute;
    left: 50%;
    top: 10px;
    bottom: 10px;
    width: 3px;
    transform: translateX(-50%);
    background: var(--gm-line);
    z-index: 1;
  }
  /* Each end is drawn at the ground's height, at its true proportions — only
     the outfield between the two arcs stretches with the window. */
  .gm-court__end {
    position: absolute;
    top: 10px;
    bottom: 10px;
    height: calc(100% - 20px);
    width: auto;
    aspect-ratio: 300 / 500;
    fill: none;
    stroke: var(--gm-line);
    z-index: 1;
  }
  .gm-court__end > * { stroke-width: 3px; vector-effect: non-scaling-stroke; }
  .gm-court__end--you { left: 10px; }
  .gm-court__end--ai { right: 10px; transform: scaleX(-1); }
  .gm-court__end--you .gm-court__paint { fill: var(--gm-paint-you); }
  .gm-court__end--ai  .gm-court__paint { fill: var(--gm-paint-ai); }

  /* ── Starters on the field ─────────────────────────────── */
  .gm-token {
    --gm-reach: calc(50cqw - var(--gm-medal) / 2 - 70px);
    position: absolute;
    top: var(--gy);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
  }
  .gm-token--you { left:  min(calc(var(--gx) * 1cqh + 10px), var(--gm-reach)); transform: translate(-50%, -50%); }
  .gm-token--ai { right: min(calc(var(--gx) * 1cqh + 10px), var(--gm-reach)); transform: translate(50%, -50%); }
  .gm-token__disc {
    width: clamp(42px, 19cqh, 62px);
    aspect-ratio: 1;
    box-sizing: border-box;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .gm-token__tag {
    max-width: 118px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gm-token--filled .gm-token__disc {
    border: 3px solid var(--gm-tag-bg);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.28);
  }
  .gm-token--filled.gm-token--you .gm-token__disc { background: var(--gm-you-fill); color: var(--gm-you-ink); }
  .gm-token--filled.gm-token--ai  .gm-token__disc { background: var(--gm-ai-fill);  color: var(--gm-ai-ink); }
  .gm-token--filled .gm-token__disc b { font-size: clamp(16px, 7.5cqh, 23px); font-weight: 800; }
  .gm-token--filled .gm-token__disc small { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; }
  .gm-token--filled .gm-token__tag {
    background: var(--gm-tag-bg);
    color: var(--gm-tag-ink);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
  }

  .gm-token:not(.gm-token--filled):not(.gm-token--place) .gm-token__disc {
    background: var(--gm-open-bg);
    border: 2px dashed currentColor;
    font-size: clamp(15px, 6cqh, 18px);
    font-weight: 800;
  }
  .gm-token:not(.gm-token--filled):not(.gm-token--place) .gm-token__tag {
    background: var(--gm-open-tag);
    font-size: 11px;
    font-weight: 600;
  }
  .gm-token--you:not(.gm-token--filled) { color: var(--gm-open-you); }
  .gm-token--ai:not(.gm-token--filled) { color: var(--gm-open-ai); }

  .gm-token--place { cursor: pointer; }
  .gm-token--place .gm-token__disc {
    background: var(--surface-blue);
    border: 3px dashed var(--gm-you-fill);
    color: var(--dk-blue-lit);
    font-size: 26px;
    font-weight: 700;
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--gm-you-fill) 22%, transparent);
    animation: gmPlacePulse 1.6s ease-in-out infinite;
    transition: transform 0.12s ease;
  }
  .gm-token--place .gm-token__tag { background: var(--gm-you-fill); color: #ffffff; }
  .gm-token--place:hover .gm-token__disc,
  .gm-token--place:focus-visible .gm-token__disc { transform: scale(1.08); }
  .gm-token--place:focus-visible { outline: none; }
  .gm-token--place:focus-visible .gm-token__tag { outline: 2px solid var(--dk-strong); outline-offset: 2px; }
  @keyframes gmPlacePulse {
    0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gm-you-fill) 26%, transparent); }
    50%      { box-shadow: 0 0 0 11px color-mix(in srgb, var(--gm-you-fill) 8%, transparent); }
  }
  /* Hot-seat 1v1: Player 2 places on the right half, in their own colour. */
  .gm-token--ai.gm-token--place .gm-token__disc {
    background: color-mix(in srgb, var(--gm-ai-fill) 14%, var(--dk-panel));
    border-color: var(--gm-ai-fill);
    color: var(--dk-gold);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--gm-ai-fill) 22%, transparent);
    animation-name: gmPlacePulseAi;
  }
  .gm-token--ai.gm-token--place .gm-token__tag { background: var(--gm-ai-fill); color: var(--gm-ai-ink); }
  @keyframes gmPlacePulseAi {
    0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gm-ai-fill) 26%, transparent); }
    50%      { box-shadow: 0 0 0 11px color-mix(in srgb, var(--gm-ai-fill) 8%, transparent); }
  }

  /* ── Centre circle ─────────────────────────────────────── */
  .gm-medal {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: var(--gm-medal);
    aspect-ratio: 1;
    box-sizing: border-box;
    /* Pixels, not %: percentage padding resolves against the court's width,
       which blew the circle out into a tall pill. */
    padding: 18px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 3px solid var(--gm-line);
    background: var(--gm-medal-bg);
    box-shadow: 0 10px 30px rgba(60, 40, 15, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
  }
  .gm-medal__pick {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dk-dim);
    white-space: nowrap;
  }
  .gm-medal__team {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: clamp(22px, 13cqh, 38px);
    font-weight: 800;
    line-height: 1.02;
    color: var(--dk-strong);
    white-space: nowrap;
  }
  /* Sized by the name's length so "Timberwolves" fits the circle on one
     line instead of breaking mid-word. */
  .gm-medal__team--long { font-size: clamp(20px, 9.5cqh, 29px); }
  .gm-medal__team--xlong { font-size: clamp(17px, 7.5cqh, 23px); }
  .gm-medal__swatch {
    flex: 0 0 auto;
    width: 0.42em;
    height: 0.42em;
    border-radius: 4px;
    border: 2px solid;
  }
  .gm-medal__era {
    font-size: clamp(16px, 8cqh, 23px);
    font-weight: 700;
    line-height: 1;
    color: var(--dk-blue-lit);
  }
  .gm-medal--p2 .gm-medal__era { color: var(--dk-gold); }
  .gm-medal__coach { font-size: 12px; font-weight: 600; color: var(--dk-dim); }
  .gm-medal--spinning .gm-medal__team,
  .gm-medal--spinning .gm-medal__era { opacity: 0.72; }
  .gm-medal__cue {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--gm-you-fill);
    color: var(--gm-you-ink);
  }
  .gm-medal__cue--ai { background: var(--gm-ai-fill); color: var(--gm-ai-ink); }
  .gm-medal__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    animation: gmClockBlink 1.4s ease-in-out infinite;
  }
  @keyframes gmClockBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
  .gm-medal__spin {
    margin-top: 8px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--acc);
    color: var(--on-acc);
    box-shadow: inset 0 0 0 2px var(--action-edge), 0 3px 0 var(--action-edge);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
  }
  .gm-medal__spin:hover { background: var(--acc-hi); }
  .gm-medal__spin--ai { background: linear-gradient(180deg, #b45309, #92400e); }
  .gm-medal__spin--ai:hover { background: linear-gradient(180deg, #92400e, #78350f); }
  .gm-medal__spin--busy { opacity: 0.7; cursor: not-allowed; }

  /* ── Draft board tray ──────────────────────────────────── */
  .gm-tray {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--dk-elev);
    border: 1px solid var(--dk-line);
    box-shadow: var(--dk-shadow);
  }
  /* Holds the height of a row of cards while there are none, so the court
     does not grow and shrink every time the wheel spins. */
  .gm-tray--empty { flex: 0 0 auto; min-height: clamp(128px, 24cqh, 230px); box-sizing: border-box; }
  .gm-tray__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .gm-tray__swatch { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 4px; }
  .gm-tray__title {
    flex: 0 0 auto;
    font-size: clamp(18px, 2.4cqh, 22px);
    font-weight: 800;
    line-height: 1;
    color: var(--dk-strong);
    white-space: nowrap;
  }
  .gm-tray__label {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dk-dim);
  }
  .gm-tray__hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--dk-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Live 1v1 on the court (js/ui/render.js gmNames / gmLeftSeat) ──────
     Each device sees its own five on the left. On the other device's turn
     your half steps back, their board shows read-only under a dashed edge,
     and a chip on your own board says the other person is watching it. */
  /* A tint over the outfield reads muddy (see .gm-court__half), so your half
     steps back by fading your players instead. */
  .gm-court--remote .gm-token--you { opacity: 0.55; transition: opacity 0.3s ease; }
  .gm-strip__you {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--gm-you-fill);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .gm-strip__presence {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--dk-dim);
    white-space: nowrap;
  }
  .gm-strip__presence-dot { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; }
  .gm-tray--remote { border-style: dashed; border-color: var(--gm-half-up-ai); }
  .gm-tray--remote .gm-tray__title { color: var(--dk-gold); }
  .gm-tray__mirror {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    opacity: 0.88;
  }
  /* Their cards' Draft buttons would only ever be refused — not shown. */
  .gm-tray__mirror button { visibility: hidden; }
  .gm-tray__watch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--gm-half-up-ai);
    color: var(--dk-gold);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
  .gm-tray__watch-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--gm-ai-fill); }
  .gm-skip {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    color: var(--dk-body);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
  }
  .gm-skip:hover { border-color: var(--dk-blue); color: var(--dk-blue-lit); }

  /* The tray's own head names the team and era; the board's is a repeat. */
  .gm-tray .draft-board-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .gm-tray .draft-board-wrap__head { display: none !important; }
  /* Three classes deep to outrank the solo workspace's auto-fill grid, which
     is `!important` too and later in this file. */
  .gm-workspace .gm-tray .draft-board-grid {
    grid-template-columns: repeat(var(--gm-cols, 3), minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* Three or four players spread across the whole tray make wide, sparse
     cards; hold them to a readable width, kept to the left edge of the tray
     (under its team · era head) rather than floating in the middle. */
  .gm-workspace .gm-tray:not(:has(.draft-board-grid > :nth-child(5))) .draft-board-grid {
    max-width: calc(var(--gm-cols, 3) * 260px);
    margin: 0;
    width: 100%;
  }

  /* Recent picks fill the empty tray instead of costing a row of their own. */
  .gm-recent { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
  .gm-recent__items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
  .gm-recent__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 4px;
    border-radius: 999px;
    background: var(--dk-inset);
    border: 1px solid var(--dk-line);
  }
  .gm-recent__who {
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
  }
  .gm-recent__who--you { background: var(--gm-you-fill); color: var(--gm-you-ink); }
  .gm-recent__who--ai { background: var(--gm-ai-fill);  color: var(--gm-ai-ink); }
  .gm-recent__name { font-size: 12px; font-weight: 700; color: var(--dk-strong); white-space: nowrap; }
  .gm-recent__pick { font-size: 10px; color: var(--dk-faint); white-space: nowrap; }

  @media (prefers-reduced-motion: reduce) {
    .gm-medal__dot,
    .gm-token--place .gm-token__disc { animation: none; }
  }

  /* ── The matchup (series preview) ─────────────────────────
     renderGmMatchup(): the draft's court again, both fives on it, the series
     odds in the centre circle. Same one-viewport contract as the draft — the
     screen carries `.draft-screen`, so the court takes the leftover height. */
  .gm-matchup {
    width: 100%;
    max-width: var(--dk-col-wide) !important;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--dk-d-gap);
  }
  .gm-matchup__title {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .gm-matchup__eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dk-blue-lit);
  }
  .gm-matchup__h1 {
    margin: 0;
    font-size: clamp(20px, 2.8cqh, 26px);
    font-weight: 800;
    line-height: 1;
    color: var(--dk-strong);
  }
  /* No tray under the floor here, so the court may stand a little taller. */
  .gm-matchup .gm-court { max-height: 540px; }
  /* Both coaches stay on the strip here: there is no snake order beside them. */
  .gm-matchup .gm-strip__coach { display: inline; }

  .gm-medal--odds { gap: 4px; }
  .gm-medal__odds {
    font-size: clamp(40px, 22cqh, 72px);
    font-weight: 800;
    line-height: 0.9;
    color: var(--dk-blue-lit);
  }
  .gm-medal--ai   .gm-medal__odds { color: var(--dk-gold); }
  .gm-medal--even .gm-medal__odds { color: var(--dk-strong); }
  .gm-medal__game { margin-top: 4px; font-size: 11px; color: var(--dk-dim); }

  .gm-matchup__row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px;
    gap: 12px;
  }
  .gm-panel {
    box-sizing: border-box;
    min-width: 0;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--dk-elev);
    border: 1px solid var(--dk-line);
    box-shadow: var(--dk-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .gm-strength {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .gm-strength__v { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
  .gm-strength__v--you { color: var(--dk-blue-lit); }
  .gm-strength__v--ai { color: var(--dk-gold); }
  /* One bar split at each side's share of the combined strength, so the gap
     reads at a glance instead of as two numbers to compare. */
  .gm-strength__bar {
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    background: var(--gm-ai-fill);
  }
  .gm-strength__you { height: 100%; background: var(--gm-you-fill); }

  .gm-edges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .gm-edge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--dk-inset);
    color: var(--dk-dim);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }
  .gm-edge b { font-size: 11px; }
  .gm-edge--you { background: color-mix(in srgb, var(--gm-you-fill) 20%, var(--dk-panel)); color: var(--dk-blue-lit); }
  .gm-edge--ai { background: color-mix(in srgb, var(--gm-ai-fill) 22%, var(--dk-panel));  color: var(--dk-gold); }

  /* ── The series (renderGmSeries) ──────────────────────────
     The matchup's court again; the centre circle carries the series score
     and the leader's half is outlined. The seven games sit in one row of
     tiles beside the next-game button. */
  .gm-matchup__row--series { grid-template-columns: minmax(0, 1fr) 300px; }

  .gm-medal__score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    line-height: 0.9;
  }
  .gm-medal__wins {
    font-size: clamp(40px, 22cqh, 72px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .gm-medal__wins--you { color: var(--dk-blue-lit); }
  .gm-medal__wins--ai { color: var(--dk-gold); }
  .gm-medal__dash { font-size: clamp(24px, 12cqh, 40px); font-weight: 700; color: var(--dk-faint); }
  /* The trailing side's number steps back so the lead reads at a glance. */
  .gm-medal--you .gm-medal__wins--ai,
  .gm-medal--ai  .gm-medal__wins--you { opacity: 0.55; }

  .gm-games { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .gm-game {
    min-height: 64px;
    box-sizing: border-box;
    padding: 8px 6px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--dk-inset);
    border: 1px solid var(--dk-line);
    text-align: center;
  }
  .gm-game__k {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dk-dim);
  }
  .gm-game__score { font-size: 20px; font-weight: 800; line-height: 1; color: var(--dk-faint); font-variant-numeric: tabular-nums; }
  .gm-game__you { color: var(--dk-blue-lit); }
  .gm-game__ai { color: var(--dk-gold); }
  .gm-game__chip {
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .gm-game--you { background: color-mix(in srgb, var(--gm-you-fill) 12%, var(--dk-panel)); border-color: color-mix(in srgb, var(--gm-you-fill) 40%, transparent); }
  .gm-game--ai { background: color-mix(in srgb, var(--gm-ai-fill) 14%, var(--dk-panel));  border-color: color-mix(in srgb, var(--gm-ai-fill) 40%, transparent); }
  .gm-game--you .gm-game__chip { background: var(--gm-you-fill); color: var(--gm-you-ink); }
  .gm-game--ai  .gm-game__chip { background: var(--gm-ai-fill);  color: var(--gm-ai-ink); }
  .gm-game__state { font-size: 12px; font-weight: 600; color: var(--dk-faint); }
  .gm-game--next { border: 2px dashed var(--gm-you-fill); }
  .gm-game--next .gm-game__state { color: var(--dk-blue-lit); font-weight: 800; }

  /* ── The recap (renderGmSeriesResult) ───────────────────────
     A sports page's box score: headline, line score, two box scores. It
     scrolls rather than squeezing when a window is short — every row here
     is something the player reads, not chrome. */
  .gm-recap { justify-content: flex-start; overflow-y: auto; gap: 16px; }
  .gm-recap__head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--dk-strong);
  }
  .gm-recap__copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .gm-recap__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .gm-recap__eyebrow--you { color: var(--dk-blue-lit); }
  .gm-recap__eyebrow--ai { color: var(--dk-gold); }
  .gm-recap__h1 {
    margin: 0;
    font-size: clamp(40px, 7.4cqh, 64px);
    font-weight: 800;
    line-height: 0.95;
    color: var(--dk-strong);
  }
  .gm-recap__deck { margin: 0; font-size: 15px; color: var(--dk-dim); }
  .gm-recap__actions { flex: 0 0 auto; display: flex; gap: 10px; }
  .gm-recap__btn {
    height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    color: var(--dk-strong);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .gm-recap__btn--primary {
    padding: 0 26px;
    border: 0;
    background: var(--acc);
    color: var(--on-acc);
    box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .gm-recap__btn--primary:hover { background: linear-gradient(180deg, #2563eb, #1d4ed8); }

  .gm-line {
    flex: 0 0 auto;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    box-shadow: var(--dk-shadow);
  }
  .gm-line__row {
    display: grid;
    align-items: center;
    min-height: 54px;
    padding: 0 20px;
    border-top: 1px solid var(--dk-line-soft);
  }
  .gm-line__row--label {
    min-height: 36px;
    border-top: 0;
    background: var(--dk-strong);
    color: var(--dk-panel);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .gm-line__row--won.gm-line__row--you { background: color-mix(in srgb, var(--gm-you-fill) 9%, var(--dk-panel)); }
  .gm-line__row--won.gm-line__row--ai { background: color-mix(in srgb, var(--gm-ai-fill) 11%, var(--dk-panel)); }
  .gm-line__team { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .gm-line__name { font-size: 22px; font-weight: 800; }
  .gm-line__row--you .gm-line__name { color: var(--dk-blue-lit); }
  .gm-line__row--ai  .gm-line__name { color: var(--dk-gold); }
  .gm-line__coach { font-size: 12px; color: var(--dk-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gm-line__g { text-align: center; font-size: 22px; font-weight: 700; color: var(--dk-faint); font-variant-numeric: tabular-nums; }
  .gm-line__row--label .gm-line__g { font-size: 11px; color: inherit; }
  .gm-line__g--won { font-weight: 800; color: var(--dk-strong); }
  .gm-line__series { text-align: center; }
  .gm-line__total { font-size: 30px; font-weight: 800; color: var(--dk-faint); font-variant-numeric: tabular-nums; }
  .gm-line__row--won .gm-line__total { padding: 0 14px; border-radius: 8px; color: #ffffff; }
  .gm-line__row--won.gm-line__row--you .gm-line__total { background: var(--gm-you-fill); color: var(--gm-you-ink); }
  .gm-line__row--won.gm-line__row--ai  .gm-line__total { background: var(--gm-ai-fill);  color: var(--gm-ai-ink); }

  .gm-recap__boxes { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gm-box {
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    box-shadow: var(--dk-shadow);
  }
  .gm-box--you { border-top: 4px solid var(--gm-you-fill); }
  .gm-box--ai { border-top: 4px solid var(--gm-ai-fill); }
  .gm-box__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; }
  .gm-box__title { font-size: 22px; font-weight: 800; }
  .gm-box--you .gm-box__title { color: var(--dk-blue-lit); }
  .gm-box--ai  .gm-box__title { color: var(--dk-gold); }
  .gm-box__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 60px 70px;
    align-items: center;
    min-height: 40px;
    font-size: 15px;
    border-bottom: 1px solid var(--dk-line-soft);
  }
  .gm-box__row--head {
    min-height: 28px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dk-dim);
    border-bottom: 2px solid var(--dk-strong);
  }
  .gm-box__row--head > :nth-child(n+3) { text-align: right; }
  .gm-box__pos { font-size: 12px; font-weight: 800; }
  .gm-box--you .gm-box__pos { color: var(--dk-blue-lit); }
  .gm-box--ai  .gm-box__pos { color: var(--dk-gold); }
  .gm-box__player { font-weight: 700; color: var(--dk-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gm-box__ovr { text-align: right; font-weight: 800; }
  .gm-box__ppg { text-align: right; color: var(--dk-dim); font-variant-numeric: tabular-nums; }
  .gm-box__foot { display: flex; justify-content: space-between; padding-top: 10px; font-size: 13px; color: var(--dk-dim); }
  .gm-box__foot b { color: var(--dk-strong); }

  .gm-matchup__go {
    min-height: 64px;
    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: 4px;
    cursor: pointer;
  }
  .gm-matchup__go:hover { background: var(--acc-hi); }
  .gm-matchup__go-label { font-size: 17px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
  .gm-matchup__go-sub { font-size: 12px; color: var(--on-acc); opacity: 0.75; }

  /* ── A friend's challenge on these screens (duel-guest) ─────
     The strength panel becomes a scouting report — one line on why the odds
     lean the way they do over the same bar — the series gets a way to the
     end under its next-game button, and the recap's buttons give way to the
     reply panel (`.duel-back`, css/styles.css). */
  .gm-scout { margin: 0; font-size: 15px; line-height: 1.45; color: var(--dk-body); text-wrap: pretty; }
  .gm-scout b { color: var(--dk-strong); }
  .gm-matchup__go-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .gm-matchup__go-col .gm-matchup__go { flex: 1 1 auto; }
  .gm-matchup__skip {
    min-height: 34px;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dk-strong);
    cursor: pointer;
  }
  .gm-matchup__skip:hover { color: var(--dk-blue-lit); }
  /* Tailwind's preflight makes every svg a block; this one sits in the line. */
  .gm-recap__eyebrow > svg { display: inline-block; margin-right: 8px; vertical-align: -2px; }
  .gm-recap__head .duel-back {
    flex: 0 0 430px;
    padding: 16px 18px;
    background: var(--dk-panel);
    border-color: var(--dk-line);
    box-shadow: var(--dk-shadow-lg);
  }
  .gm-recap__head .duel-back__note { text-align: left; }
  .gm-box__era { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--dk-dim); }
}

/* ============================================================
   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 var(--dk-line);
    background: linear-gradient(140deg, var(--hardwood-from), var(--hardwood-to)) !important;
    position: relative;
    overflow: hidden;
  }
  :root:not([data-theme="blacktop"]) .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; }

  /* ── Playoffs: title band ──────────────────────────────────
     "Road to the Ring" is a light panel on desktop: orange eyebrow,
     condensed navy title, and a faint half court with the trophy pinned to
     the right edge (playoffBandArt() in js/ui/render.js, desktop only).
     Once a champion is crowned the band turns amber and the title's second
     half takes the orange accent. Both themes read the --dk-* tokens. */
  .broadcast-band {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 136px;
    border-radius: 20px;
    border: 1px solid var(--dk-line);
    padding: 24px 28px;
    background: var(--dk-elev);
    color: var(--dk-strong);
    box-shadow: var(--dk-shadow);
  }
  :root:not([data-theme="blacktop"]) .broadcast-band {
    background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 55%, #e9f0ff 100%);
  }
  .broadcast-band > * { position: relative; z-index: 1; }
  .broadcast-band__art {
    position: absolute;
    z-index: 0;
    top: 0; right: 0; bottom: 0; left: auto;
    height: 100%;
    width: 46%;
    color: color-mix(in srgb, var(--dk-blue) 22%, transparent);
    pointer-events: none;
  }
  .broadcast-band__eyebrow { margin-bottom: 4px; font-size: 12px; letter-spacing: 0.22em; color: var(--dk-orange); }
  .broadcast-band__title { font-size: 46px; line-height: 1; letter-spacing: 0.01em; color: var(--dk-strong); }
  .broadcast-band__title-accent { color: var(--dk-orange); }
  .broadcast-band__sub { margin-top: 8px; font-size: 15px; color: var(--dk-dim); }
  .broadcast-band__sub b { color: var(--dk-orange); }
  .broadcast-band--title { border-color: color-mix(in srgb, var(--dk-gold) 45%, transparent); }
  :root:not([data-theme="blacktop"]) .broadcast-band--title {
    background: linear-gradient(135deg, #fffdf5 0%, #fff8e6 55%, #fdf0cf 100%);
  }
  .broadcast-band--title .broadcast-band__art { color: color-mix(in srgb, var(--dk-gold) 32%, transparent); }

  /* ── Playoffs: bracket ─────────────────────────────────────
     The outer card is the panel; the scroll wrapper inside it is
     transparent. Each column is a grid of equal rows — four quarterfinal
     rows, two semifinal rows, one final — so a later round's matchup sits
     exactly between the two that feed it, and the connector geometry is
     percentages of the row rather than tuned offsets. */
  .playoffs-bracket-card {
    border-radius: 20px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-elev) !important;
    padding: 22px 26px 24px !important;
    box-shadow: var(--dk-shadow);
  }
  .playoff-bracket-wrap {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    margin: 0;
    padding: 6px 4px;
    overflow-x: auto;
  }
  .playoff-bracket {
    --brk-gap: 44px;
    --brk-line: color-mix(in srgb, var(--dk-faint) 80%, transparent);
    /* The elbow: a 2px vertical strip down the left edge and a 2px
       horizontal strip through the middle, in one box. */
    --brk-elbow:
      linear-gradient(var(--brk-line), var(--brk-line)) left center / 2px 100% no-repeat,
      linear-gradient(var(--brk-line), var(--brk-line)) center / 100% 2px no-repeat;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(200px, 1fr);
    column-gap: var(--brk-gap);
    min-width: 0;
    min-height: 0;
    padding: 0;
  }
  .playoff-bracket__col {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    padding: 0;
  }
  .playoff-bracket__col:not(:last-child)::after { display: none; }
  .playoff-bracket__round-label {
    text-align: center;
    font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--dk-strong);
    margin: 0 0 12px;
  }
  .playoff-bracket__col--champ .playoff-bracket__round-label { color: var(--dk-orange); }
  .playoff-bracket__stack,
  .playoff-bracket__stack--sf,
  .playoff-bracket__stack--f {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0;
    padding: 0;
    flex: none;
  }
  .playoff-bracket__stack--sf { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .playoff-bracket__stack--f { grid-template-rows: minmax(0, 1fr); }
  /* The ladder: four stage columns and the champion's. */
  .playoff-bracket--ladder {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(170px, 0.9fr);
  }
  .playoff-bracket--ladder .playoff-bracket__stack--ladder { grid-template-rows: minmax(0, 1fr); }
  .playoff-bracket--ladder .bracket-matchup__note { font-size: 11px; margin-top: 6px; }
  .bracket-matchup-wrap {
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    padding: 9px 0;
    min-width: 0;
  }

  /* Connectors: a stub leaves every matchup to the right; the elbow that
     joins the two feeders and enters the next matchup is one pseudo-element
     drawn with two background strips, spanning the feeders' row centres
     (25% and 75% of the wrap, since the wrap is exactly two feeder rows). */
  .playoff-bracket__col--qf .bracket-matchup-wrap::after,
  .playoff-bracket__col--sf .bracket-matchup-wrap::after,
  .playoff-bracket__col--f  .bracket-matchup-wrap::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    right: calc(var(--brk-gap) / -2);
    width: calc(var(--brk-gap) / 2);
    height: 2px;
    transform: translateY(-50%);
    background: var(--brk-line);
  }
  .playoff-bracket__col--sf .bracket-matchup-wrap::before,
  .playoff-bracket__col--f  .bracket-matchup-wrap::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: calc(var(--brk-gap) / -2);
    width: calc(var(--brk-gap) / 2);
    top: 25%; bottom: 25%; height: auto;
    background: var(--brk-elbow);
  }

  .bracket-champion::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: calc(var(--brk-gap) / -2);
    width: calc(var(--brk-gap) / 2);
    height: 2px;
    transform: translateY(-50%);
    background: var(--brk-line);
  }

  .bracket-matchup {
    position: relative;
    z-index: 1;
    border-radius: 12px;
    border: 1px solid var(--dk-line);
    background: var(--dk-inset);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  }
  /* The user's matchup carries the orange 82-0 accent. */
  .brk-o .bracket-matchup:has(.bracket-team--player) {
    border: 2px solid var(--dk-orange);
    background: var(--dk-inset);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dk-orange) 12%, transparent),
                0 6px 16px color-mix(in srgb, var(--dk-orange) 12%, transparent);
  }
  .brk-o .bracket-matchup--live {
    border-color: var(--dk-orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dk-orange) 16%, transparent);
  }

  .bracket-team {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    min-height: 0;
    border-bottom: 1px solid var(--dk-line);
  }
  .bracket-team:last-child { border-bottom: 0; }
  .bracket-team__seed {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    background: var(--dk-panel); color: var(--dk-strong);
    border: 1px solid var(--dk-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
  }
  .bracket-team__name {
    flex: 1; min-width: 0;
    font-size: 15px; font-weight: 700; color: var(--dk-strong); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bracket-team__score {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 21px; font-weight: 800; line-height: 1; color: var(--dk-strong); flex-shrink: 0;
  }
  .brk-o .bracket-team--player .bracket-team__seed {
    background: var(--dk-orange); color: #fff; border-color: var(--dk-orange);
  }
  .bracket-team--won .bracket-team__name { color: var(--dk-green); }
  .bracket-team--won .bracket-team__score { color: var(--dk-green); }
  .bracket-team--lost { opacity: 1; }
  .bracket-team--lost .bracket-team__name { color: var(--dk-dim); font-weight: 600; }
  .bracket-team--lost .bracket-team__seed { color: var(--dk-dim); }
  .brk-o .bracket-team--player.bracket-team--lost { opacity: 0.8; }
  .bracket-matchup:has(.bracket-team--tbd:first-child:nth-last-child(2)) {
    border: 1.5px dashed var(--dk-line);
    background: var(--dk-panel-2);
    box-shadow: none;
  }
  .bracket-team--tbd { background: transparent; font-style: normal; }
  .bracket-team--tbd .bracket-team__seed {
    background: transparent; border-color: transparent; box-shadow: none; color: var(--dk-faint);
  }
  .bracket-team--tbd .bracket-team__name { color: var(--dk-faint); font-style: italic; font-weight: 600; }

  .bracket-champion {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; margin: 0; padding: 22px 16px; min-height: 0;
    border-radius: 16px;
    border: 2px dashed color-mix(in srgb, var(--dk-orange) 55%, transparent);
    background: color-mix(in srgb, var(--dk-gold) 9%, var(--dk-panel));
    box-shadow: none;
  }
  :root:not([data-theme="blacktop"]) .bracket-champion { background: linear-gradient(180deg, #fffdf7, #fff8e1); }
  .bracket-champion__art { width: 62%; max-width: 150px; color: #d9a520; }
  .bracket-champion__placeholder { font-size: 40px; font-weight: 800; line-height: 1; color: var(--dk-strong); }
  .bracket-champion--filled {
    border: 2px solid var(--dk-orange);
    background:
      radial-gradient(140px 130px at 50% 38%, color-mix(in srgb, var(--dk-gold) 22%, transparent), transparent 70%),
      var(--dk-panel);
    box-shadow: var(--dk-shadow);
  }
  .bracket-champion__icon {
    font-size: 64px; line-height: 1;
    filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--dk-gold) 45%, transparent));
  }
  .bracket-champion__name {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 34px; font-weight: 800; line-height: 1.05;
    color: var(--dk-strong); text-align: center; max-width: none;
  }

  /* ── Team Report modal ─────────────────────────────────── */
  #team-report-root > div > div[role="dialog"] {
    max-width: var(--dk-col-narrow) !important;
    width: calc(100vw / var(--app-scale, 1) - 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;
  }
}

/* ============================================================
   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, so no markup is
     duplicated and no block is hidden. The two-column composition itself
     lives in the >=1151px block below — below that width the screen stays
     the phone's single flex column, untouched. */
  .results-layout {
    max-width: var(--dk-col-narrow) !important;
    gap: 16px !important;
  }

  /* 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); }
  /* Night Game: the same slab in the fill blue, with the ground line instead of a glow. */
  [data-theme="blacktop"] .dk-res-rail .courtside-cta:not(.courtside-cta--locked) {
    background: linear-gradient(135deg, var(--dk-blue-fill), color-mix(in srgb, var(--dk-blue-fill) 85%, #000));
    box-shadow: var(--dk-shadow);
  }

  /* ── Two-column composition ──────────────────────────────
     Only above 1150px; narrower desktops can't carry a comfortable rail,
     and there they simply keep the phone's single flex column (wrappers
     still `display: contents`, phone order values still in charge).
     Scoping the whole composition up here — rather than declaring it at
     1024 and unwinding it below 1151 — is what keeps that fallback exact,
     since `order` has no "put it back" value to unwind to.

     Three explicit slots: hero across the top, then one cell per column.
     Each column is its own flex context, so the rail's blocks stack
     tightly against each other instead of being spaced out by the main
     column's row heights — row-sharing is what left a ragged gap beside
     the tall Starting 5 card when the blocks were placed individually. */
  @container app (min-width: 1151px) {
    .results-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
      /* At least the canvas height: the hero keeps its own height and the
         two columns share what is left, spacing their blocks out inside it
         so the screen finishes at the bottom edge rather than 100px short.
         The column row is `1fr` with its content as the floor (not
         minmax(0, 1fr)): when the main column runs past the canvas, the row
         grows with it and the page scrolls, instead of the row stopping at
         the canvas and the rail finishing ~120px above the main column. */
      flex: 1 0 auto;
      grid-template-rows: auto 1fr;
      /* `stretch`, not `start`: it makes both columns the height of the
         taller one, which is what lets the two columns finish level instead
         of the shorter one stopping ~64px early. Which column is taller
         varies with mode (daily adds banners to the left), so this is
         deliberately symmetric rather than assuming the rail always wins. */
      align-items: stretch;
    }

    .results-layout > .courtside-hero { grid-column: 1 / -1; grid-row: 1; }

    /* Main column — the read-out: what the season did. */
    .results-col--main { grid-column: 1; grid-row: 2; }

    /* Next-action rail — everything you might *do* next (enter the
       playoffs, open the report, save the run, build another, share, view
       legends), so the read-out stays uninterrupted and the rail no longer
       runs out of content two thirds of the way down the screen. */
    .results-col--rail { grid-column: 2; grid-row: 2; }

    .results-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }
    /* The wrappers are the grid items now, so each column reads in document
       order. The phone order values (css/styles.css) must be cleared or
       they reshuffle the rail — and they are set per-class, so this reset
       has to name the same classes to match their specificity rather than
       relying on `*` and source order. */
    .results-col > *,
    .results-col > .results-block--hero,
    .results-col > .results-block--playoffs,
    .results-col > .results-block--save,
    .results-col > .dk-res-legends { order: 0; }

    /* With the columns now equal height, one card per column takes up the
       slack so the pair ends flush rather than leaving a ragged gap under
       the shorter one. Each is the last card in its column and each is a
       single banner whose contents centre happily at any height, so they
       are the right ones to stretch — everything above them keeps its own
       size. */
    .results-col--main > .dk-res-legends,
    .results-col--rail > .dk-res-challenge {
      flex: 1 1 auto;
      min-height: 0;
    }
    /* The legends banner is a button laid out as a row; centring keeps its
       icon and two lines optically placed once it is taller than its text. */
    .results-col--main > .dk-res-legends { align-items: center; }

    /* With the grid row now the canvas height, the columns can be much
       taller than their content. The Starting 5 card is the main column's
       elastic block — its five rows spread out to fill it — and on the
       rail the playoffs call-to-action grows (a taller hero with its text
       centred reads as intended; a taller story-card box does not). */
    .results-col--main > .dk-res-five,
    .results-col--main > .dk-res-five > .rounded-2xl {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .results-col--main > .dk-res-five .flex.flex-col {
      flex: 1 1 auto;
      justify-content: space-evenly;
    }
    .results-col--rail > .dk-res-challenge { flex: 0 0 auto; }
    .results-col--rail > .dk-res-rail { flex: 1 1 auto; min-height: 0; }
    .results-col--rail > .dk-res-rail > :first-child {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* The CTA's text block is `flex-1` for the phone's row layout; in this
       stretched column it would fill the height and pin the text to the
       top, so it keeps its own height and centres with the trophy. */
    .results-col--rail > .dk-res-rail > .courtside-cta > .flex-1 { flex: 0 0 auto; }
  }
}

/* ============================================================
   RESULTS — one-page layout (renderResultsDesktop in
   js/ui/render/results.js). One card: the record and the four stats share
   the hero, thin --dk-line rules separate the sections, and the whole page
   sits in a single card. Below 1151px the two columns stack, in the same flex
   column the rest of the results screen uses there.
   ============================================================ */
@media (min-width: 1024px) {
  .rd {
    --rd-ovr:   #e36500;
    --rd-chem:  #00a047;
    --rd-fans:  #2574f2;
    --rd-coach: #009b8b;
  }
  [data-theme="blacktop"] .rd {
    --rd-ovr:   #ff8a3d;
    --rd-chem:  #22c55e;
    --rd-fans:  #6ea8ff;
    --rd-coach: #2dd4bf;
  }
  /* The whole page sits in one card on the screen's own background. The
     card's padding is taken back from the panel's bottom padding so a full
     run (legends strip, level-up line) still fits one screen. */
  html[data-page="game"] #app > .main-gradient.rd-page > main { padding-bottom: var(--sp-8) !important; }
  .results-layout.rd {
    row-gap: 14px !important;
    column-gap: 0 !important;
    padding: 12px 26px 14px;
    border: 1px solid var(--dk-line);
    border-radius: 20px;
    background: var(--dk-panel);
    box-shadow: 0 6px 18px rgba(15, 26, 51, 0.07);
  }
  .rd-label {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dk-body);
  }
  .rd-rule { flex: none; height: 1px; background: var(--dk-line); }

  /* ── Hero: record left, the four stats right ── */
  .rd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dk-line);
  }
  .rd-hero__record {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-right: 32px;
    border-right: 1px solid var(--dk-line);
  }
  .rd-hero .courtside-hero__eyebrow { margin: 0; }
  /* A shorter lockup than the card hero's, so the page fits one screen. */
  .rd-hero .grade-badge { width: 64px; height: 64px; }
  .rd-hero .grade-badge__letter { font-size: 30px; }
  .rd-hero .grade-badge__letter--wide { font-size: 24px; }
  .rd-hero .courtside-record__w { font-size: 54px !important; }
  .rd-hero .courtside-record__l { font-size: 38px !important; }
  .rd-hero .grade-badge { background: var(--dk-orange); }
  :root:not([data-theme="blacktop"]) .rd-hero .grade-badge__inner { background: #fff7ed; }
  [data-theme="blacktop"] .rd-hero .grade-badge__inner { background: var(--dk-panel); }
  .rd-hero .grade-badge__letter,
  .rd-hero .grade-badge__label { color: var(--dk-orange); }
  .rd-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .rd-hero .season-strip { margin-top: 0; }
  .rd-hero .season-strip__pips { flex-wrap: nowrap; }
  .rd-hero .season-strip__pip { flex: 1 1 0; width: auto; min-width: 2px; }
  .rd-hero .season-strip__count { color: var(--dk-dim); }

  .rd-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: center;
  }
  .rd-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 4px 18px;
  }
  .rd-stat + .rd-stat { border-left: 1px solid var(--dk-line); }
  .rd-stat__label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--dk-body);
  }
  .rd-stat__value {
    font-size: clamp(32px, 3.2cqw, 46px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }
  .rd-stat__value small { font-size: 0.5em; font-weight: 700; margin-left: 1px; }
  .rd-stat--ovr .rd-stat__value   { color: var(--rd-ovr); }
  .rd-stat--chem .rd-stat__value  { color: var(--rd-chem); }
  .rd-stat--fans .rd-stat__value  { color: var(--rd-fans); }
  .rd-stat--coach .rd-stat__value { color: var(--rd-coach); }

  /* ── Left column: Starting 5, challenge, Draft Again ── */
  .rd-five { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
  .rd-five__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
  }
  .rd-five__court { display: flex; min-width: 0; }
  /* The court keeps the proportions its lines are drawn at (100 x 90), so
     it scales with the space instead of stretching to it. */
  .rd-five__court .draft-court {
    width: auto;
    height: 320px;
    aspect-ratio: 10 / 9;
    --court-dot: clamp(36px, 5cqh, 46px);
  }
  .rd-five__court .draft-court__name { font-size: 12px; }
  .rd-five__court .draft-court__ovr { font-size: 14px; flex-direction: row; gap: 4px; align-items: baseline; }
  .rd-five__rows { min-width: 0; display: flex; flex-direction: column; justify-content: space-evenly; }
  .rd-five__rows > div { padding-top: 6px; padding-bottom: 6px; }

  .rd-legends {
    flex: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-indigo);
    background: var(--surface-indigo);
    color: var(--ink-indigo-mid);
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
  }
  .rd-legends__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rd-legends__text b { margin-right: 4px; font-size: 13px; font-weight: 900; color: var(--ink-indigo); }
  .rd-legends__go { flex: none; color: var(--ink-indigo-light); }

  .rd-streak {
    flex: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #ef4444 45%, var(--dk-line));
    background: color-mix(in srgb, #ef4444 10%, var(--dk-panel));
    color: var(--dk-strong);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
  }
  .rd-streak__text { flex: 1; }
  .rd-streak__go { color: var(--dk-orange); }

  .rd-challenge { flex: none; display: flex; flex-direction: column; gap: 6px; }
  .rd-challenge .rd-label { font-size: 13px; }
  .rd-challenge__copy { margin: 0 0 6px; font-size: 15px; line-height: 1.45; color: var(--dk-body); }
  .rd-challenge__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rd-challenge__btns--single { grid-template-columns: 1fr; }
  .rd-soft {
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--dk-line);
    background: var(--card2);
    color: var(--dk-strong);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
  }
  .rd-soft:hover {
    background: color-mix(in srgb, var(--dk-blue) 6%, var(--card2));
    border-color: color-mix(in srgb, var(--dk-strong) 18%, var(--dk-line));
  }

  /* Draft Again wears the home screen's Play button. */
  .rd-primary {
    flex: none;
    width: 100%;
    height: 52px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background: var(--acc);
    color: var(--on-acc);
    box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
    font: 700 20px/1 'Barlow Condensed', 'Fira Sans', sans-serif;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  .rd-primary:hover { background: var(--acc-hi); }
  .rd-arrow { flex: none; transition: transform 0.15s; }
  .rd-primary:hover .rd-arrow { transform: translateX(2px); }

  /* ── Right column: playoffs, submit, Team Report, Experience ── */
  .rd-cta {
    flex: none;
    width: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 18px 26px 18px 20px;
    border: 0;
    border-radius: 14px;
    background: var(--surface-orange);
    box-shadow: inset 0 0 0 2px var(--dk-orange);
    color: var(--dk-strong);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  .rd-cta:hover { background: color-mix(in srgb, var(--dk-orange) 14%, var(--dk-panel)); }
  .rd-cta__icon {
    flex: none;
    width: 104px;
    height: 104px;
    border-radius: 16px;
    background: var(--dk-panel);
    border: 1px solid color-mix(in srgb, var(--dk-orange) 35%, var(--dk-line));
    display: grid;
    place-items: center;
    font-size: 56px;
    line-height: 1;
  }
  .rd-cta__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .rd-cta__title { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; color: var(--dk-strong); }
  .rd-cta__sub { font-size: 18px; color: var(--dk-dim); }
  .rd-cta .rd-arrow { color: var(--dk-orange); }
  .rd-cta:hover .rd-arrow { transform: translateX(3px); }
  .rd-cta--locked { background: var(--card2); box-shadow: inset 0 0 0 2px var(--dk-line); cursor: default; }
  .rd-cta--locked:hover { background: var(--card2); }
  .rd-cta--locked .rd-cta__icon { border-color: var(--dk-line); }

  /* Grows into the space between the CTA and Team Report and centres its
     content vertically there; left-aligned like the rest of the rail. */
  .rd-submit { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
  .rd-submit .rd-label { font-size: 12px; margin-bottom: 8px; }
  .rd-submit__row { display: flex; gap: 8px; }
  .rd-submit__input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    color: var(--dk-strong);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .rd-submit__input:focus {
    outline: none;
    border-color: var(--dk-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dk-blue) 18%, transparent);
  }
  .rd-submit__btn {
    flex: none;
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-fill);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  .rd-submit__btn:hover { background: color-mix(in srgb, var(--primary-fill) 86%, #000); }
  .rd-submit__hint { margin: 6px 0 0; font-size: 12px; color: var(--dk-dim); }

  .rd-rule--push { margin-top: auto; }
  .rd-report {
    flex: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--dk-strong);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }
  .rd-report__icon { font-size: 30px; line-height: 1; }
  .rd-report__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .rd-report__label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dk-body); }
  .rd-report__title { font-size: 18px; font-weight: 700; color: var(--dk-strong); }
  .rd-report__go { font-size: 22px; line-height: 1; color: var(--dk-body); transition: transform 0.15s, color 0.15s; }
  .rd-report:hover .rd-report__go { transform: translateX(3px); color: var(--dk-blue); }

  .rd-xp { flex: none; display: flex; flex-direction: column; }
  .rd-xp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
  .rd-xp .rd-label { font-size: 15px; }
  .rd-xp__gain { margin: 0; font-size: 28px; font-weight: 900; color: var(--acc); }
  .rd-xp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 36px; }
  .rd-xp__row { display: flex; justify-content: space-between; gap: 8px; font-size: 18px; color: var(--dk-body); }
  .rd-xp__row b { color: var(--dk-strong); font-variant-numeric: tabular-nums; }
  .rd-xp__level {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    font-size: 19px;
    font-weight: 900;
    color: var(--dk-strong);
  }
  .rd-xp__level small { font-size: 15px; font-weight: 500; color: var(--dk-dim); }
  .rd-xp__bar { height: 14px; margin-top: 10px; border-radius: 999px; background: var(--surface-track); overflow: hidden; }
  .rd-xp__bar > div { height: 100%; border-radius: 999px; background: var(--acc); }
  .rd-xp__note { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── Two columns, from the same width as the existing composition ──
     The hero splits at the same fractions as the columns below it, so its
     dividing line lands on the line between Starting 5 and the rail. */
  @container app (min-width: 1151px) {
    .results-layout.rd > .rd-hero { grid-column: 1 / -1; grid-row: 1; }
    .results-layout.rd > .rd-col { gap: 12px; }
    .results-layout.rd > .results-col--main { padding-right: 32px; border-right: 1px solid var(--dk-line); }
    .results-layout.rd > .results-col--rail { padding-left: 32px; }
    .rd-five { flex: 1 1 auto; }
    .rd-five__body { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
    .rd-five__court .draft-court { height: 100%; min-height: 240px; }
  }
}

/* ============================================================
   PLAYOFFS — container width, action hierarchy, eliminated screen
   ============================================================ */
@media (min-width: 1024px) {
  /* The bracket needs the wide column; a 2xl cap clipped the Champion
     column off the right edge. */
  .playoffs-layout { max-width: var(--dk-col-narrow) !important; width: 100%; margin: 0 auto; gap: 16px !important; }
  .playoff-bracket-wrap { max-width: none; width: 100%; }
  .playoff-bracket__col--champ { min-width: 0; }

  /* Reference hierarchy: one loud orange primary with the blue outline
     secondary beside it, and a plain full-width tertiary underneath. After
     "Simulate Entire Playoffs" the Continue button takes the whole row. */
  .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 1 0; min-width: 280px; height: 62px;
    border-radius: 14px !important;
    font-size: 18px !important;
    color: #1c1917 !important;
    background: linear-gradient(180deg, #fdba74, #f97316) !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.32);
  }
  .dk-po-secondary {
    flex: 1 1 0; min-width: 240px; height: 62px;
    border-radius: 14px !important;
    font-size: 17px !important;
    border: 2px solid var(--dk-blue) !important;
    color: var(--dk-blue) !important;
    background: var(--dk-panel);
  }
  .dk-po-continue {
    flex: 1 1 100%; height: 62px;
    border-radius: 14px !important;
    font-size: 18px !important;
  }
  .dk-po-tertiary {
    flex: 1 1 100%; height: 56px;
    border-radius: 14px !important;
    font-size: 16px !important;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    color: var(--dk-strong);
  }
  .dk-po-primary[disabled],
  .dk-po-secondary[disabled] { opacity: 0.55; box-shadow: none; }

  /* The champion banner under the bracket when another team took the title. */
  .dk-po-champ-banner { border-radius: 16px !important; padding: 16px 20px !important; }
  .dk-po-champ-banner > p:first-child { font-size: 12px; letter-spacing: 0.22em; }
  .dk-po-champ-banner > p:nth-child(2) {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 30px; line-height: 1.05; color: var(--dk-strong);
  }
  .dk-po-champ-banner > p:last-child { font-size: 13px; }

  /* ── Eliminated ────────────────────────────────────────────
     The phone column becomes one panel: a court end at each edge, the
     heart and headline centred, the playoff run full width, the champion
     card beside the submit card, then the two actions stacked. */
  html[data-page="game"] #app > .main-gradient > main > .elim-screen {
    max-width: min(1000px, var(--dk-col-narrow)) !important;
  }
  .elim-screen {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 30px 30px 26px;
    border-radius: 22px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    box-shadow: var(--dk-shadow);
  }
  .elim-screen > * { grid-column: 1 / -1; position: relative; z-index: 1; min-width: 0; }
  .elim-screen__court {
    position: absolute;
    z-index: 0;
    top: 0; bottom: 0;
    width: 30%;
    grid-column: auto; grid-row: auto;
    color: color-mix(in srgb, var(--dk-blue) 15%, transparent);
    pointer-events: none;
  }
  .elim-screen__court--l { left: 0; }
  .elim-screen__court--r { right: 0; transform: scaleX(-1); }
  .elim-screen__mark { font-size: 58px !important; line-height: 1; margin: 6px 0 -2px !important; }
  .elim-screen__title {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 56px !important; font-weight: 800; line-height: 1; margin: 0;
    color: var(--dk-strong) !important;
  }
  .elim-screen__sub { font-size: 21px !important; line-height: 1.2; margin-top: -4px; color: var(--dk-dim) !important; }
  .elim-screen__sub span { color: var(--dk-strong) !important; font-weight: 700; }
  .elim-screen__run {
    margin-top: 8px;
    border-radius: 16px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-panel) !important;
    padding: 20px 24px !important;
    box-shadow: none;
  }
  .elim-screen__run > p:first-child { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 10px; color: var(--dk-dim); }
  .elim-screen__line { font-size: 22px; line-height: 1.3; padding: 4px 0; }
  .elim-screen__line span { font-size: 24px; font-weight: 800; }
  .elim-screen__season {
    font-size: 17px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--dk-line); color: var(--dk-dim);
  }
  .elim-screen__champ {
    grid-column: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border-radius: 16px !important;
    padding: 20px !important;
    border: 2px solid color-mix(in srgb, var(--dk-gold) 45%, transparent) !important;
    background: linear-gradient(180deg, #fffdf5, #fff6dc) !important;
    box-shadow: none;
  }
  .elim-screen__champ > p:first-child { font-size: 12px; letter-spacing: 0.22em; margin: 0; color: var(--dk-gold); }
  .elim-screen__champ-art { width: 200px; max-width: 80%; color: #d29a12; }
  .elim-screen__champ > p:last-child {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 40px; line-height: 1; margin: 0; color: var(--dk-gold);
  }
  .elim-screen__champ + div {
    grid-column: 2;
    text-align: left;
    display: flex; flex-direction: column; justify-content: center;
    border-radius: 16px !important;
    padding: 20px !important;
  }
  .elim-screen__actions { gap: 12px; margin-top: 4px; }
  .elim-screen__actions > button { height: 56px; border-radius: 14px !important; font-size: 16px !important; }

  /* ── Championship ──────────────────────────────────────────
     One page: the hero spans the top with the trophy beside the title, the
     road and the five sit side by side under it, then the XP line and the
     three actions in one row. The column stops at 1120px; the canvas-wide
     column every screen gets turned the phone stack into 1,900px-wide
     strips. Source order is the phone's (the five closes the page there),
     so the grid places each block by area. */
  html[data-page="game"] #app > .main-gradient > main > .champ {
    max-width: min(1120px, var(--dk-col-narrow)) !important;
  }
  .champ {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "hero hero"
      "road five"
      "xp   xp"
      "acts acts";
    gap: 14px 16px;
  }
  .champ-hero    { grid-area: hero; }
  .champ-road    { grid-area: road; }
  .champ-five    { grid-area: five; }
  .champ-xp      { grid-area: xp; }
  .champ-actions { grid-area: acts; }

  .champ-hero {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "mark  text"
      "stats stats";
    justify-content: center;
    align-items: center;
    column-gap: 34px;
    padding: 22px 32px 20px;
    border-radius: 24px;
    background:
      radial-gradient(45% 75% at 36% 30%, rgba(250, 204, 21, 0.2), transparent 72%),
      linear-gradient(160deg, var(--hardwood-from), var(--hardwood-to));
  }
  :root:not([data-theme="blacktop"]) .champ-hero {
    background:
      radial-gradient(45% 75% at 36% 30%, rgba(250, 204, 21, 0.2), transparent 72%),
      linear-gradient(140deg, #1e293b, #3b2417);
  }
  .champ-hero__mark  { grid-area: mark; width: 104px; margin: 0; }
  .champ-hero__text  { grid-area: text; text-align: left; }
  .champ-stats       { grid-area: stats; }
  .champ-hero__rays  { width: 760px; height: 760px; margin: -380px 0 0 -380px; }
  .champ-bit         { width: 8px; height: 8px; }
  .champ-bit--bar    { width: 5px; height: 16px; }
  .champ-bit--wide   { display: block; }
  .champ-hero__eyebrow { font-size: 13px; margin-bottom: 4px; }
  .champ-hero__title-top { font-size: 28px; letter-spacing: 0.36em; margin-right: 0; }
  .champ-hero__title-main { font-size: 88px; margin-top: -2px; }
  .champ-hero__sub { margin: 10px 0 0; font-size: 18px; }
  .champ-hero__feat { font-size: 13px; padding: 5px 14px; }
  .champ-stats {
    width: 100%;
    max-width: 820px;
    justify-self: center;
    gap: 10px;
    margin-top: 18px;
  }
  .champ-stat { padding: 11px 8px 10px; border-radius: 14px; gap: 5px; }
  .champ-stat dt { font-size: 11px; letter-spacing: 0.16em; }
  .champ-stat dd { font-size: 36px; }

  .champ-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    box-shadow: var(--dk-shadow);
    padding: 16px 18px 16px;
  }
  .champ-label { font-size: 11px; letter-spacing: 0.18em; color: var(--dk-dim); margin-bottom: 12px; }
  .champ-card__head { margin-bottom: 12px; }
  .champ-road__list { flex: 1; gap: 10px; }
  .champ-round {
    flex: 1;
    grid-template-columns: 58px minmax(0, 1fr) auto auto;
    gap: 16px;
    padding: 10px 16px 10px 10px;
    border-radius: 14px;
    border-color: var(--dk-line-soft);
    background: var(--dk-panel-2);
  }
  .champ-round--finals { border-color: var(--line-amber-strong); background: linear-gradient(90deg, var(--surface-amber-hi), var(--surface-amber)); }
  .champ-round__band { height: 48px; border-radius: 11px; font-size: 24px; }
  .champ-round__name { font-size: 11px; letter-spacing: 0.14em; color: var(--dk-dim); }
  .champ-round--finals .champ-round__name { color: var(--dk-gold); }
  .champ-round__opp { font-size: 21px; color: var(--dk-strong); }
  .champ-round__opp small { font-size: 13px; color: var(--dk-faint); }
  .champ-round__pips { gap: 3px; }
  .champ-round__pip { width: 8px; height: 22px; }
  .champ-round__score { font-size: 36px; color: var(--dk-strong); }
  .champ-round--finals .champ-round__score { color: var(--dk-gold); }

  .champ-five__list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
  .champ-five__coach { font-size: 13px; color: var(--dk-dim); }
  .champ-player { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; padding: 5px 0; border-top-color: var(--dk-line-soft); }
  .champ-player:first-child { padding-top: 0; }
  .champ-player:last-child { padding-bottom: 0; }
  .champ-player__pos { height: 30px; border-radius: 9px; font-size: 13px; }
  .champ-player__name { font-size: 16px; color: var(--dk-strong); }
  .champ-player__meta { font-size: 12px; color: var(--dk-dim); }
  .champ-player__ovr { font-size: 14px; padding: 3px 10px; }
  .champ-player__ovr small { font-size: 10px; }

  /* One line even with unlocks: the canvas has the width, and a second
     line pushed the actions off a 900px canvas. */
  .champ-xp { font-size: 14px; color: var(--dk-dim); gap: 6px 12px; }
  .champ-xp b { color: var(--dk-strong); }
  .champ-xp__gain { font-size: 18px; padding: 2px 12px; }
  .champ-xp__unlock { flex-basis: auto; }

  .champ-actions { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .champ-actions > .champ-btn { height: 60px; padding: 0 12px; border-radius: 14px; font-size: 17px; }
  .champ-actions > .champ-btn--share { grid-column: auto; font-size: 19px; }
  .champ-actions > .btn-neutral-outline { border-color: var(--dk-line); background: var(--dk-panel); color: var(--dk-strong); }
  .champ-btn__icon { width: 21px; height: 21px; }
}

/* ============================================================
   HOT-SEAT 1v1 — SERIES AND RESULTS
   ------------------------------------------------------------
   The 1v1 designs. renderSeriesSim() (which also stands in for the
   preview) and renderSeriesResult() emit this markup for
   `S.mode === '1v1'` at desktop widths only — see the `pvp-*` helpers
   in js/ui/render.js. The 1v1 draft itself is on the full court with
   GM vs AI (`gm-*`, above). Dynasty Duel and the phone layout are
   untouched.

   One composition on both screens: both rosters as half-court cards
   down the left, and the screen's one job on the right — the
   scoreboard during the series, the recap after it. They fill the
   canvas and scroll if a recap runs long.
   ============================================================ */
@media (min-width: 1024px) {
  .pvp-screen {
    --pvp-p1:      var(--dk-blue);
    --pvp-p2:      var(--dk-orange);
    --pvp-p1-soft: color-mix(in srgb, var(--dk-blue) 9%, var(--dk-panel));
    --pvp-p2-soft: color-mix(in srgb, var(--dk-orange) 9%, var(--dk-panel));
    --pvp-gap:     var(--dk-d-gap, 14px);
    --pvp-dot:     clamp(42px, 6.6cqh, 62px);
  }

  /* ── Header title ──────────────────────────────────────────
     A centred screen title between the brand and the tray. Only emitted
     when a screen passes one to renderHeader(); today that is these three. */
  .app-header__title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
  }
  .app-header__title-main {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--dk-strong);
    white-space: nowrap;
  }
  .app-header__title-sub {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dk-faint);
    white-space: nowrap;
  }

  /* ── Layout ──────────────────────────────────────────────── */
  .pvp-main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .pvp-layout {
    width: 100%;
    /* `!important` for the same reason as .draft-workspace: responsive.css
       caps every direct child of <main> with a more specific selector. */
    max-width: var(--dk-col-wide) !important;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(300px, 27cqw, 400px) minmax(0, 1fr);
    gap: var(--pvp-gap);
    align-items: stretch;
  }
  .pvp-screen .pvp-layout { min-height: 100%; }

  /* ── Roster courts ─────────────────────────────────────── */
  .pvp-sides {
    display: flex;
    flex-direction: column;
    gap: var(--pvp-gap);
    min-height: 0;
  }
  .pvp-side {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 14px;
    border-radius: 18px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    box-shadow: var(--dk-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .pvp-side--p1 { background: linear-gradient(180deg, var(--pvp-p1-soft), var(--dk-panel)); }
  .pvp-side--p2 { background: linear-gradient(180deg, var(--pvp-p2-soft), var(--dk-panel)); }
  .pvp-side--p1.pvp-side--active { border-color: var(--pvp-p1); box-shadow: 0 0 0 1px var(--pvp-p1), var(--dk-shadow); }
  .pvp-side--p2.pvp-side--active { border-color: var(--pvp-p2); box-shadow: 0 0 0 1px var(--pvp-p2), var(--dk-shadow); }
  .pvp-side__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .pvp-side__name {
    font-size: clamp(17px, 2.4cqh, 22px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .pvp-side--p1 .pvp-side__name { color: var(--pvp-p1); }
  .pvp-side--p2 .pvp-side__name { color: var(--pvp-p2); }
  .pvp-side__count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dk-dim);
    white-space: nowrap;
  }
  .pvp-side__cue {
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--dk-inset);
    color: var(--dk-body);
    white-space: nowrap;
  }

  .pvp-court {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 12px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    overflow: hidden;
  }
  .pvp-side--p1 .pvp-court {
    --pvp-line: color-mix(in srgb, var(--pvp-p1) 28%, transparent);
    background: color-mix(in srgb, var(--pvp-p1) 4%, var(--dk-panel));
  }
  .pvp-side--p2 .pvp-court {
    --pvp-line: color-mix(in srgb, var(--pvp-p2) 30%, transparent);
    background: color-mix(in srgb, var(--pvp-p2) 4%, var(--dk-panel));
  }
  .pvp-court__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--pvp-line, var(--dk-line));
    stroke-width: 1.5;
    pointer-events: none;
  }
  .pvp-court__lines * { vector-effect: non-scaling-stroke; }

  /* A slot is anchored by the centre of its circle; the label hangs below. */
  .pvp-slot {
    position: absolute;
    width: 104px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transform: translate(-50%, calc(var(--pvp-dot) / -2));
  }
  .pvp-slot__circle {
    width: var(--pvp-dot);
    height: var(--pvp-dot);
    flex: 0 0 auto;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--pvp-dot) * 0.4);
    font-weight: 800;
    line-height: 1;
    background: var(--dk-panel);
    border: 2px solid var(--dk-line);
    color: var(--dk-dim);
    box-shadow: var(--dk-shadow);
    transition: transform 0.12s ease, background 0.12s ease;
  }
  .pvp-side--p1 .pvp-slot__circle { border-color: color-mix(in srgb, var(--pvp-p1) 45%, var(--dk-line)); color: var(--pvp-p1); }
  .pvp-side--p2 .pvp-slot__circle { border-color: color-mix(in srgb, var(--pvp-p2) 45%, var(--dk-line)); color: var(--pvp-p2); }
  /* Filled: solid on the draft and series screens, outlined on the recap. */
  .pvp-slot--filled .pvp-slot__circle { color: #fff; border-color: transparent; }
  .pvp-side--p1 .pvp-slot--filled .pvp-slot__circle { background: var(--pvp-p1); }
  .pvp-side--p2 .pvp-slot--filled .pvp-slot__circle { background: var(--pvp-p2); }
  .pvp-side--outline .pvp-slot--filled .pvp-slot__circle { background: var(--dk-panel); border-width: 2.5px; }
  .pvp-side--p1.pvp-side--outline .pvp-slot--filled .pvp-slot__circle { color: var(--pvp-p1); border-color: var(--pvp-p1); }
  .pvp-side--p2.pvp-side--outline .pvp-slot--filled .pvp-slot__circle { color: var(--pvp-p2); border-color: var(--pvp-p2); }
  /* A selected pick with no natural slot open: the empty slots are targets. */
  .pvp-slot--place { cursor: pointer; }
  .pvp-slot--place .pvp-slot__circle { animation: pvpPlacePulse 1.2s ease-in-out infinite; }
  .pvp-side--p1 .pvp-slot--place .pvp-slot__circle { background: var(--pvp-p1-soft); border-color: var(--pvp-p1); }
  .pvp-side--p2 .pvp-slot--place .pvp-slot__circle { background: var(--pvp-p2-soft); border-color: var(--pvp-p2); }
  .pvp-slot--place:hover .pvp-slot__circle { transform: scale(1.06); }
  @keyframes pvpPlacePulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
    50%      { box-shadow: 0 0 0 7px transparent; }
  }
  .pvp-slot__pos {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--dk-body);
  }
  .pvp-slot__name {
    max-width: 100%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dk-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Right-hand panel ──────────────────────────────────── */
  .pvp-panel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pvp-gap);
    padding: clamp(12px, 2cqh, 22px) clamp(12px, 1.6cqw, 22px);
    border-radius: 18px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    box-shadow: var(--dk-shadow);
  }
  .pvp-panel--series { gap: clamp(12px, 2cqh, 20px); }
  /* The recap is five blocks tall; the tighter rhythm is what keeps Play
     Again above the fold on the 1440x900 canvas. */
  .pvp-panel--result { gap: clamp(8px, 1.4cqh, 14px); }
  .pvp-panel > * { flex: 0 0 auto; }

  /* ── Series: status, score and scoreboard ──────────────── */
  .pvp-status {
    align-self: center;
    padding: 8px 26px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .pvp-status--neutral { background: var(--dk-panel-2); color: var(--dk-dim); border-color: var(--dk-line); }
  .pvp-status--p1 { background: var(--pvp-p1-soft); color: var(--pvp-p1); border-color: color-mix(in srgb, var(--pvp-p1) 35%, transparent); }
  .pvp-status--p2 { background: var(--pvp-p2-soft); color: var(--pvp-p2); border-color: color-mix(in srgb, var(--pvp-p2) 35%, transparent); }
  .pvp-score {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 16px;
    border: 1px solid var(--dk-line);
    overflow: hidden;
  }
  .pvp-score__side {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: clamp(18px, 4cqh, 40px) 20px;
  }
  .pvp-score__side--p1 {
    background: linear-gradient(180deg, var(--pvp-p1-soft), color-mix(in srgb, var(--pvp-p1-soft) 50%, var(--dk-panel)));
    border-right: 1px solid var(--dk-line);
  }
  .pvp-score__side--p2 {
    background: linear-gradient(180deg, var(--pvp-p2-soft), color-mix(in srgb, var(--pvp-p2-soft) 50%, var(--dk-panel)));
  }
  .pvp-score__side > * { position: relative; }
  .pvp-score__court {
    position: absolute !important;
    top: -20%;
    width: 70%;
    height: 140%;
    fill: none;
    stroke: var(--dk-line);
    stroke-width: 1.5;
    opacity: 0.45;
    pointer-events: none;
  }
  .pvp-score__side--p1 .pvp-score__court { left: -12%; }
  .pvp-score__side--p2 .pvp-score__court { right: -12%; }
  .pvp-score__name { font-size: clamp(24px, 3.8cqh, 36px); font-weight: 800; text-transform: uppercase; }
  .pvp-score__num { font-size: clamp(64px, 13cqh, 120px); font-weight: 800; line-height: 0.95; }
  .pvp-score__side--p1 .pvp-score__name,
  .pvp-score__side--p1 .pvp-score__num { color: var(--pvp-p1); }
  .pvp-score__side--p2 .pvp-score__name,
  .pvp-score__side--p2 .pvp-score__num { color: var(--pvp-p2); }
  .pvp-score__unit { font-size: 15px; font-weight: 600; color: var(--dk-dim); }
  .pvp-score__vs {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--dk-dim);
    background: var(--dk-panel);
    border: 2px solid var(--dk-line);
    box-shadow: var(--dk-shadow);
  }

  .pvp-table {
    border-radius: 16px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
    overflow: hidden;
  }
  .pvp-table__head,
  .pvp-table__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 150px 150px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
  }
  .pvp-table__head { border-bottom: 1px solid var(--dk-line); }
  .pvp-table__title {
    grid-column: 1 / 3;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dk-strong);
  }
  .pvp-table__col { text-align: center; font-size: 15px; font-weight: 800; text-transform: uppercase; }
  .pvp-table__col--p1 { color: var(--pvp-p1); }
  .pvp-table__col--p2 { color: var(--pvp-p2); }
  .pvp-table__row { border-bottom: 1px solid var(--dk-line-soft); border-left: 4px solid transparent; }
  .pvp-table__row:last-child { border-bottom: 0; }
  .pvp-table__row--next { background: var(--surface-blue); border-left-color: var(--dk-blue); }
  .pvp-table__game { font-size: 15px; font-weight: 700; color: var(--dk-dim); }
  .pvp-table__row--next .pvp-table__game,
  .pvp-table__row--played .pvp-table__game { font-weight: 800; color: var(--dk-strong); }
  .pvp-table__chip {
    justify-self: start;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .pvp-table__chip--next { background: color-mix(in srgb, var(--dk-blue) 16%, transparent); color: var(--dk-blue-lit); }
  .pvp-table__chip--p1 { background: color-mix(in srgb, var(--pvp-p1) 14%, transparent); color: var(--pvp-p1); }
  .pvp-table__chip--p2 { background: color-mix(in srgb, var(--pvp-p2) 14%, transparent); color: var(--pvp-p2); }
  .pvp-table__score {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--dk-dim);
    font-variant-numeric: tabular-nums;
  }
  .pvp-table__score--won { color: var(--dk-strong); }
  .pvp-table__score--tbd { font-size: 16px; font-weight: 700; }
  .pvp-table__row--next .pvp-table__score--tbd { color: var(--dk-strong); }

  .pvp-cta {
    width: 100%;
    height: clamp(50px, 7cqh, 72px);
    border: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--dk-blue);
    color: #fff;
    font: inherit;
    font-size: clamp(17px, 2.6cqh, 24px);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s ease;
  }
  .pvp-cta:hover { background: var(--dk-blue-lit); }

  /* ── Results ─────────────────────────────────────────────── */
  .pvp-banner {
    text-align: center;
    padding: clamp(10px, 1.8cqh, 20px) 20px;
    border-radius: 18px;
    border: 1px solid;
  }
  .pvp-banner--p1 { background: var(--pvp-p1-soft); border-color: color-mix(in srgb, var(--pvp-p1) 30%, transparent); }
  .pvp-banner--p2 { background: color-mix(in srgb, #f59e0b 12%, var(--dk-panel)); border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
  .pvp-banner__title {
    margin: 0;
    font-size: clamp(24px, 3.8cqh, 38px);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
  }
  .pvp-banner--p1 .pvp-banner__title { color: var(--pvp-p1); }
  .pvp-banner--p2 .pvp-banner__title { color: var(--pvp-p2); }
  .pvp-banner__score {
    margin: 6px 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: clamp(40px, 6.4cqh, 64px);
    font-weight: 800;
    line-height: 1;
  }
  .pvp-banner__n--p1 { color: var(--pvp-p1); }
  .pvp-banner__n--p2 { color: var(--pvp-p2); }
  .pvp-banner__dash { font-size: 0.75em; color: var(--dk-faint); }
  .pvp-banner__sub { margin: 0; font-size: 15px; color: var(--dk-dim); }

  .pvp-games {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--pvp-gap);
  }
  .pvp-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
  }
  .pvp-game__k { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dk-dim); }
  .pvp-game__v { font-size: clamp(17px, 2.4cqh, 24px); font-weight: 800; line-height: 1; text-transform: uppercase; }
  .pvp-game__v--p1 { color: var(--pvp-p1); }
  .pvp-game__v--p2 { color: var(--pvp-p2); }
  .pvp-game__score { font-size: 11px; font-weight: 700; color: var(--dk-faint); font-variant-numeric: tabular-nums; }

  .pvp-tables { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pvp-gap); }
  .pvp-tbl {
    padding: 12px 18px 6px;
    border-radius: 16px;
    border: 1px solid;
  }
  .pvp-tbl--p1 { background: var(--pvp-p1-soft); border-color: color-mix(in srgb, var(--pvp-p1) 25%, var(--dk-line)); }
  .pvp-tbl--p2 { background: var(--pvp-p2-soft); border-color: color-mix(in srgb, var(--pvp-p2) 25%, var(--dk-line)); }
  .pvp-tbl__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .pvp-tbl__team { font-size: 21px; font-weight: 800; text-transform: uppercase; }
  .pvp-tbl--p1 .pvp-tbl__team { color: var(--pvp-p1); }
  .pvp-tbl--p2 .pvp-tbl__team { color: var(--pvp-p2); }
  .pvp-tbl table { width: 100%; border-collapse: collapse; }
  .pvp-tbl th {
    padding: 5px 4px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dk-dim);
  }
  .pvp-tbl td {
    padding: clamp(5px, 0.9cqh, 9px) 4px;
    border-top: 1px solid var(--dk-line-soft);
    font-size: 14px;
    color: var(--dk-strong);
  }
  .pvp-tbl th:nth-child(n+3),
  .pvp-tbl td:nth-child(n+3) { text-align: right; }
  .pvp-tbl__pos { width: 40px; font-weight: 700; color: var(--dk-dim); }
  .pvp-tbl__name { font-weight: 700; }
  .pvp-tbl__ovr {
    display: inline-block;
    min-width: 38px;
    padding: 3px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
  }
  .pvp-tbl__ppg { color: var(--dk-dim); font-variant-numeric: tabular-nums; }

  .pvp-strength {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 20px 12px;
    border-radius: 16px;
    border: 1px solid var(--dk-line);
    background: var(--dk-panel);
  }
  .pvp-strength__title { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dk-dim); }
  .pvp-strength__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
  }
  .pvp-strength__name { font-size: 14px; font-weight: 700; }
  .pvp-strength__name--p1 { color: var(--pvp-p1); }
  .pvp-strength__name--p2 { color: var(--pvp-p2); }
  .pvp-strength__val { font-size: 14px; font-weight: 800; color: var(--dk-strong); font-variant-numeric: tabular-nums; }
  .pvp-strength__bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--dk-inset); overflow: hidden; }
  .pvp-strength__fill { height: 100%; border-radius: 999px; }
  .pvp-strength__fill--p1 { background: var(--pvp-p1); }
  .pvp-strength__fill--p2 { background: var(--pvp-p2); }

  @media (prefers-reduced-motion: reduce) {
    .pvp-slot--place .pvp-slot__circle { animation: none; }
  }
}

/* ============================================================
   CLASSIC DRAFT + RESULTS — the classic drafting designs
   ------------------------------------------------------------
   Restyles the desktop draft workspace and results screen to the
   classic drafting mockups. The roster is drawn on a half court
   (`.draft-court`, js/ui/render.js renderRosterCourt): in the status
   rail while drafting, inside the Roster Complete card, and beside the
   Starting 5 list on the results screen. The coach chip is its own card
   beside the progress card, the reveal cells are tinted Team / Era
   cards (a "?" ring before the spin, the team's colours once it lands),
   and the draft buttons go solid blue. Every rule sits inside the desktop media query; the
   phone draft and results are untouched.
   ============================================================ */
@media (min-width: 1024px) {
  /* ── Progress card + coach card ────────────────────────── */
  /* One card: progress on the left, the coach behind a divider. */
  .draft-stepper:not(.draft-stepper--complete) {
    gap: 0;
    padding: 0;
    border-radius: 16px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
    box-shadow: var(--dk-shadow);
  }
  .draft-stepper__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: var(--dk-d-step-pad, 14px) 18px;
  }
  .draft-stepper__name { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
  /* The complete strip keeps its one green card; the wrapper steps aside so
     the grid placements above still see the head and the phases. */
  .draft-stepper--complete .draft-stepper__main { display: contents; }
  .draft-stepper:not(.draft-stepper--complete) .draft-coach-chip {
    align-self: stretch;
    display: flex;
    align-items: center;
    width: clamp(300px, 30%, 440px);
    padding: 0 8px;
    border-left: 1px solid var(--dk-line);
  }
  .draft-stepper:not(.draft-stepper--complete) .draft-coach-chip > button:not(.draft-coach-chip__picker),
  .draft-stepper:not(.draft-stepper--complete) .draft-coach-chip > div:not(.draft-coach-chip__picker) {
    height: clamp(40px, 5.6cqh, 52px);
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .draft-stepper:not(.draft-stepper--complete) .draft-coach-chip > button:not(.draft-coach-chip__picker):hover {
    background: var(--dk-inset) !important;
  }

  /* ── Reveal cells: the clean panel (renderRevealCell) ──────
     Before the spin each cell holds a flat white panel: a hairline border
     with a 3px line in the accent (orange team, blue era) along the top,
     the icon and label in the accent, an inset window with a "?" in a
     dashed ring, the round as a small tag in the corner and a Pool / Reveal
     row. While spinning the window rolls the one-line reel
     (css/styles.css .slot-reel), which brakes onto the result. Once the
     board is dealt the card folds into one row below. Unscoped past the
     desktop query because renderSlotMachine() also serves the 1v1 draft. */
  .draft-slot-machine__cell.draft-reveal {
    --rv-acc: var(--dk-orange);
    --rv-ink-q: #0b1a3a;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: clamp(14px, 3cqh, 26px) !important;
    border-width: 1px !important;
    border-color: var(--dk-line) !important;
    background: color-mix(in srgb, var(--dk-inset) 55%, var(--dk-panel)) !important;
  }
  .draft-slot-machine__cell.draft-reveal--era { --rv-acc: var(--dk-blue); }
  .draft-reveal__card {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    border: 1px solid var(--dk-line);
    border-radius: 14px;
    background: var(--dk-panel);
    box-shadow: 0 1px 2px rgba(11, 26, 58, 0.06), 0 8px 20px -12px rgba(11, 26, 58, 0.18);
  }
  .draft-reveal__inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 3px solid var(--rv-acc);
    border-radius: 13px;
    background: var(--dk-panel);
  }
  .draft-reveal__band {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 4px;
    color: var(--rv-acc);
  }
  .draft-reveal__icon { display: grid; place-items: center; }
  .draft-reveal__icon svg { width: 20px; height: 20px; }
  .draft-reveal__label {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: clamp(18px, 2.6cqh, 22px);
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
  }
  .draft-reveal__window {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    margin: 10px 16px 16px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--dk-inset);
    box-shadow: inset 0 0 0 1px var(--dk-line);
  }
  .draft-reveal__window > * { grid-area: 1 / 1; }
  .draft-reveal__q {
    width: clamp(96px, 17cqh, 150px);
    height: clamp(96px, 17cqh, 150px);
    display: grid;
    place-items: center;
    border: 2px dashed color-mix(in srgb, var(--rv-acc) 45%, var(--dk-line));
    border-radius: 50%;
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: clamp(44px, 8cqh, 72px);
    font-weight: 800;
    line-height: 1;
    color: var(--rv-acc);
    background: var(--dk-panel);
  }
  .draft-reveal__value { display: none; position: relative; z-index: 1; width: min(86%, 340px); }
  .draft-reveal__stats {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--dk-line);
    text-align: left;
  }
  .draft-reveal__stats > span { min-width: 0; padding: clamp(8px, 1.3cqh, 12px) 16px; }
  .draft-reveal__stats > span + span { border-left: 1px solid var(--dk-line); }
  .draft-reveal__stats small {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dk-faint);
  }
  .draft-reveal__stats strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: var(--dk-strong);
  }
  .draft-reveal__seal {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--dk-line);
    border-radius: 999px;
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: clamp(11px, 1.6cqh, 13px);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.05;
    color: var(--dk-body);
    background: var(--dk-inset);
  }
  .draft-reveal__seal b { font-weight: 800; }
  .draft-reveal__lock {
    flex: none;
    align-self: center;
    margin-right: 14px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff;
    background: #0b1a3a;
  }
  /* Landed, the label takes the team's colour; the name's ink keeps it
     readable when that colour is too light for the white panel. Night Game:
     the lock turns light and the label lifts towards white so a dark team
     colour still reads on the dark panel. */
  .draft-reveal.is-landed .draft-reveal__band { color: var(--rv-ink, var(--rv-acc)); }
  [data-theme="blacktop"] .draft-reveal__lock { color: #0b1a3a; background: var(--dk-strong); }
  [data-theme="blacktop"] .draft-reveal.is-landed .draft-reveal__band {
    color: color-mix(in srgb, var(--rv-acc) 55%, #fff);
  }

  /* The value line is the phone's one-line reel, set in the display face. */
  .draft-slot-machine__cell.draft-reveal .slot-reel .text-xl {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: clamp(24px, 3.6cqh, 34px) !important;
    font-weight: 800;
    line-height: 1.35 !important;
    letter-spacing: 0.02em;
  }
  .draft-reveal .slot-reel { --reel-acc: var(--rv-acc); }
  .draft-reveal .slot-reel__win { font-size: clamp(24px, 3.6cqh, 34px); align-items: center; }
  /* Rolling in the tall card: two lines of window, so the names read as a
     reel passing the frame rather than a clipped line. */
  .draft-workspace--no-board .draft-reveal.is-spinning .slot-reel__win { height: 2.3em; }
  /* The frame stays one line, as on the phone — the value's 1.35 line-height
     at the window's font size, centred in the window, exactly where the value
     lands — so the names roll through it instead of two of them sitting in a
     two-line box. */
  .draft-workspace--no-board .draft-reveal .slot-reel.is-rolling::after {
    inset: calc((2.3 - 1.35) / 2 * clamp(24px, 3.6cqh, 34px)) 0;
  }

  /* Spinning: the reel takes the "?"'s place. */
  .draft-reveal.is-spinning .draft-reveal__value,
  .draft-reveal.is-landed .draft-reveal__value { display: block; }
  .draft-reveal.is-spinning .draft-reveal__q,
  .draft-reveal.is-landed .draft-reveal__q { display: none; }

  /* Landed: the value sits on a pill — a soft tint of the team's colour
     (12%, matching reelTint() in js/ui/render.js) with a light rim and the
     name in that colour (inline --rv-* vars), or the era's blue. */
  .draft-reveal.is-landed .slot-reel__win {
    width: auto;
    padding: 0 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rv-pill, var(--dk-blue)) 12%, #fff);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rv-pill, var(--dk-blue)) 35%, #fff);
  }
  .draft-reveal.is-landed .slot-badge { color: var(--rv-ink, var(--dk-blue)) !important; }
  /* Night Game: the pill tints over the panel rather than over white, with
     the name lifted towards white so a dark team colour still reads. */
  [data-theme="blacktop"] .draft-reveal.is-landed .slot-reel__win {
    background: color-mix(in srgb, var(--rv-pill, var(--dk-blue)) 22%, var(--dk-panel));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rv-pill, var(--dk-blue)) 45%, var(--dk-panel));
  }
  [data-theme="blacktop"] .draft-reveal.is-landed .slot-badge {
    color: color-mix(in srgb, var(--rv-pill, var(--dk-blue)) 55%, #fff) !important;
  }

  /* Board on screen: the card folds into one row in the phone's style
     (css/styles.css .m-reveal) and gives its height to the board — a soft
     accent tint, a solid icon tile and a small grey label, the value, then
     a dashed "?" ring that turns while spinning and LOCKED once landed. */
  .draft-workspace:not(.draft-workspace--no-board) .draft-slot-machine__cell.draft-reveal {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__card {
    flex: none;
    border-color: color-mix(in srgb, var(--rv-acc) 30%, var(--dk-line));
    background: radial-gradient(140% 120% at 30% 0%,
                  color-mix(in srgb, var(--rv-acc) 11%, var(--dk-panel)), var(--dk-panel) 75%);
    box-shadow: none;
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__inner {
    position: relative;
    flex-direction: row;
    align-items: center;
    padding: 0 16px 0 12px;
    border-top: 0;
    background: transparent;
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__band { gap: 12px; padding: 0 6px 0 0; }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__icon {
    flex: none;
    width: clamp(28px, 5cqh, 38px);
    height: clamp(28px, 5cqh, 38px);
    border-radius: 10px;
    color: var(--rv-on, #fff);
    background: var(--rv-acc);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--rv-acc) 30%, transparent);
  }
  [data-theme="blacktop"] .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__icon { color: var(--rv-on, #0b1a3a); }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__label {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--dk-dim);
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__lock {
    margin-right: 0;
    padding: 4px 11px;
    font-size: 11px;
    color: var(--primary-fill-fg);
    background: var(--primary-fill);
  }
  /* Landed: the team on a solid pill in its own colour (the era on a soft
     blue), like the phone. */
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-landed .slot-reel__win {
    padding: 0 12px;
    background: var(--rv-pill, color-mix(in srgb, var(--dk-blue) 14%, var(--dk-panel)));
    box-shadow: none;
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-landed .slot-badge { color: var(--rv-on, var(--dk-blue)) !important; }
  /* Spinning: the dashed ring turns where LOCKED will land. */
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-spinning .draft-reveal__inner { padding-right: 64px; }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-spinning .draft-reveal__inner::before,
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-spinning .draft-reveal__inner::after {
    position: absolute;
    inset-block: 0;
    right: 16px;
    width: clamp(28px, 4.6cqh, 36px);
    height: clamp(28px, 4.6cqh, 36px);
    margin-block: auto;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border-radius: 50%;
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-spinning .draft-reveal__inner::before {
    content: '';
    border: 2px dashed color-mix(in srgb, var(--rv-acc) 55%, var(--dk-panel));
    animation: draftRevealRingTurn 1.1s linear infinite;
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-spinning .draft-reveal__inner::after {
    content: '?';
    font-size: 17px;
    font-weight: 900;
    color: var(--dk-strong);
  }
  @keyframes draftRevealRingTurn { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-spinning .draft-reveal__inner::before { animation: none; }
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__window {
    margin: 0;
    padding: clamp(8px, 1.4cqh, 14px) 12px;
    justify-items: start;
    background: none;
    box-shadow: none;
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__value { display: block; width: 100%; }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-landed .slot-reel { justify-content: flex-start; }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__q,
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__stats,
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal__seal { display: none; }
  .draft-workspace:not(.draft-workspace--no-board) .draft-slot-machine__cell.draft-reveal .slot-reel .text-xl {
    font-size: clamp(20px, 3cqh, 28px) !important;
  }
  /* Rolling in the one-row card: the frame stays one line — exactly where
     the value lands — and the window reaches into the padding, so names pass
     through the frame rather than showing as two clipped halves. The
     window's negative margins keep the row at the landed value's height, so
     nothing moves when the spin starts or lands. */
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal .slot-reel.is-rolling .slot-reel__win {
    --rv-reach: calc(clamp(8px, 1.4cqh, 14px) - 3px);
    height: calc(1.35 * clamp(20px, 3cqh, 28px) + 2 * var(--rv-reach));
    margin-block: calc(-1 * var(--rv-reach));
  }
  /* The names roll at the left, where the landed pill draws the value (its
     12px inset), not centred — so the value does not jump sideways as it
     locks. A held or era-locked value waits in the same spot. */
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal.is-spinning .slot-reel__win {
    justify-content: flex-start;
    padding: 0 12px;
  }
  .draft-workspace:not(.draft-workspace--no-board) .draft-reveal .slot-reel.is-rolling .slot-reel__strip {
    align-items: flex-start;
    padding-left: 12px;
  }

  /* Board header: the round in blue, the skips left. (Space still spins the
     board — events.js handleSpinKey — it just isn't badged on the button.) */
  .draft-slot-machine__round { color: var(--dk-blue-lit); font-weight: 800; }
  .draft-slot-machine__skips {
    font-size: 12px;
    font-weight: 600;
    color: var(--dk-dim);
    white-space: nowrap;
    /* Shown before the first spin, where the Skip buttons will sit: same
       height as them (css/responsive.css --tap), so the row does not jump. */
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }

  /* ── Board header and cards ─────────────────────────────── */
  .draft-workspace .draft-board-wrap__head p {
    font-family: 'Barlow Condensed', 'Fira Sans', sans-serif;
    font-size: 17px !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--dk-strong) !important;
  }
  .draft-workspace .draft-board-wrap__head > span { width: 12px; height: 12px; }
  .draft-workspace .draft-board-grid {
    /* Four across on a canvas wide enough for the five stats to sit on one
       line (the mockup's width); three on the 1440 canvas. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 14px !important;
  }
  .draft-workspace .draft-card {
    border-radius: 16px !important;
    border: 1px solid var(--dk-line) !important;
    background: var(--dk-panel) !important;
    box-shadow: var(--dk-shadow);
  }
  .draft-workspace .draft-card-body { padding: 14px; }
  .draft-workspace .draft-card__actions { padding: 0 14px 14px; }
  .draft-workspace .draft-card__pos {
    padding: 4px 10px;
    border-radius: 999px;
    border-color: transparent;
    background: var(--surface-blue);
    color: var(--dk-blue-lit);
    font-size: 11px;
    font-weight: 800;
  }
  /* A long archetype ("Lockdown Defender") drops under the position pill
     rather than breaking inside it. */
  .draft-workspace .draft-card__head { flex-wrap: wrap; }
  .draft-workspace .draft-card__arch span { white-space: nowrap; }
  .draft-workspace .draft-card__name { font-size: 17px; font-weight: 800; }
  .draft-workspace .draft-card__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: 16px;
    row-gap: 5px;
  }
  .draft-workspace .draft-card__stats > span { font-size: 12px; color: var(--dk-dim); white-space: nowrap; }
  .draft-workspace .draft-card__stats > span > .font-semibold { font-size: 14px; font-weight: 800; }
  .draft-workspace .draft-card-traits { gap: 6px; }
  .draft-workspace .draft-card-traits > span {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--dk-panel-2);
    color: var(--dk-body);
    border-color: var(--dk-line);
  }
  .draft-workspace .draft-card-btn:not([disabled]) {
    height: 40px;
    border-radius: 11px;
    font-size: 14px;
    background: var(--dk-orange) !important;
    color: var(--on-acc) !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 2px var(--action-edge), 0 4px 0 var(--action-edge);
    transition: background 0.12s ease;
  }
  .draft-workspace .draft-card-btn:not([disabled]):hover { background: var(--acc-hi) !important; }

  /* ── The half court ─────────────────────────────────────── */
  .draft-court {
    position: relative;
    width: 100%;
    aspect-ratio: 10 / 8;
    border-radius: 12px;
    border: 1px solid var(--dk-line);
    background: color-mix(in srgb, var(--dk-blue) 4%, var(--dk-panel));
    overflow: hidden;
    --court-dot: clamp(40px, 6.4cqh, 60px);
  }
  .draft-court__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: color-mix(in srgb, var(--dk-blue) 28%, var(--dk-line));
    stroke-width: 1.5;
    pointer-events: none;
  }
  .draft-court__lines * { vector-effect: non-scaling-stroke; }
  .draft-court__slot {
    position: absolute;
    width: 40%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transform: translate(-50%, calc(var(--court-dot) / -2));
  }
  .draft-court__circle {
    width: var(--court-dot);
    height: var(--court-dot);
    flex: 0 0 auto;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--court-dot) * 0.38);
    font-weight: 800;
    line-height: 1;
    background: var(--dk-panel);
    border: 2px solid color-mix(in srgb, var(--dk-blue) 45%, var(--dk-line));
    color: var(--dk-blue);
    box-shadow: var(--dk-shadow);
    transition: transform 0.12s ease, background 0.12s ease;
  }
  .draft-court__slot:not(.draft-court__slot--filled) .draft-court__circle {
    outline: 2px dashed color-mix(in srgb, var(--dk-blue) 22%, var(--dk-line));
    outline-offset: 6px;
  }
  .draft-court__slot--filled .draft-court__circle { background: var(--dk-blue-fill); color: #fff; border-color: transparent; }
  .draft-court__pos { font-size: 13px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; color: var(--dk-strong); }
  .draft-court__name {
    max-width: 100%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dk-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .draft-court__ovr {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(16px, 2.4cqh, 22px);
    font-weight: 800;
    line-height: 1;
  }
  .draft-court__ovr small { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--dk-dim); }
  .draft-court__slot--place { cursor: pointer; }
  .draft-court__slot--place .draft-court__circle { animation: pvpPlacePulse 1.2s ease-in-out infinite; }
  .draft-court__slot--place:hover .draft-court__circle { transform: scale(1.06); }
  .draft-court__fit { font-size: 10px; font-weight: 700; line-height: 1; }
  .draft-court__slot--primary .draft-court__circle { border-color: var(--dk-green); color: var(--dk-green); background: color-mix(in srgb, var(--dk-green) 12%, var(--dk-panel)); }
  .draft-court__slot--primary .draft-court__fit { color: var(--dk-green); }
  .draft-court__slot--flex .draft-court__circle { border-color: var(--dk-gold); color: var(--dk-gold); background: color-mix(in srgb, var(--dk-gold) 12%, var(--dk-panel)); }
  .draft-court__slot--flex .draft-court__fit { color: var(--dk-gold); }
  .draft-court__slot--off .draft-court__circle { border-color: var(--dk-faint); color: var(--dk-dim); }
  .draft-court__slot--off .draft-court__fit { color: var(--dk-dim); }
  .draft-court__slot--place-fit .draft-court__fit { color: var(--dk-blue-lit); }
  @media (prefers-reduced-motion: reduce) {
    .draft-court__slot--place .draft-court__circle { animation: none; }
  }

  /* ── Roster panel in the status rail ───────────────────── */
  .dk-roster {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--dk-d-panel-pad, 16px);
    border-radius: 18px;
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
  }
  .dk-roster__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .dk-roster__count { color: var(--dk-blue-lit); }
  .dk-roster__hint {
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--dk-blue-lit);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-roster .draft-court { max-height: clamp(220px, 36cqh, 340px); }
  .dk-roster__hint--idle { color: var(--dk-dim); }

  /* While drafting, Team Status and the roster are one card that runs the
     full height of the rail: the gauges keep their natural height and the
     court takes the rest. The court grows until it reaches the half court's
     own proportions (the 100 x 90 line art), so the lines don't stretch and
     any height beyond that is split evenly above and below it. */
  .draft-workspace__right > .dk-team-status--roster {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .dk-team-status--roster .dk-roster {
    flex: 1 1 auto;
    min-height: 0;
    container-type: inline-size;
    margin-top: clamp(12px, 2cqh, 20px);
    padding: clamp(12px, 2cqh, 20px) 0 0;
    border: 0;
    border-top: 1px solid var(--dk-line);
    border-radius: 0;
    background: transparent;
  }
  .dk-team-status--roster .dk-roster__head { flex: 0 0 auto; }
  .dk-team-status--roster .draft-court {
    flex: 1 1 auto;
    min-height: 220px;
    max-height: 90cqw;
    aspect-ratio: auto;
    margin-block: auto;
    --court-dot: clamp(44px, 7cqh, 66px);
  }
  .dk-team-status--roster .draft-court__name { font-size: clamp(13px, 1.7cqh, 15px); }

  /* ── Roster Complete card ───────────────────────────────── */
  .draft-workspace .draft-simulate-card {
    border: 1px solid var(--dk-line);
    background: var(--dk-elev);
  }
  .draft-workspace--complete .draft-simulate-card { min-height: 0; justify-content: flex-start; }
  .draft-workspace--complete .draft-simulate-card::before { display: none; }
  .draft-workspace--complete .draft-workspace__left { justify-content: flex-start; }
  .draft-workspace--complete .draft-simulate-card > .flex { margin-bottom: 4px !important; }
  .draft-workspace--complete .draft-simulate-card > p.text-sm { margin-bottom: 10px !important; }
  /* The card runs to the bottom of the right column (Team Status +
     synergies), and the court takes the extra height, so the two columns
     finish level. */
  .draft-workspace--complete .draft-workspace__left > .draft-simulate-card { flex: 1 1 auto; }
  .draft-workspace--complete .draft-simulate-card .draft-court {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
    height: clamp(220px, 46cqh, 480px);
    margin-bottom: 14px;
    --court-dot: clamp(48px, 7.4cqh, 68px);
  }
  .draft-workspace--complete .draft-simulate-card .draft-court__name { font-size: 15px; }
  .draft-workspace--complete .draft-simulate-card [data-action="simulate"] {
    height: clamp(50px, 7cqh, 66px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 14px !important;
    font-size: clamp(15px, 2.2cqh, 20px) !important;
    background: var(--acc) !important;
  }

  /* ── Results: the hero (light gradient by day, hardwood tokens in Night
     Game) and the Starting 5 court ───────── */
  :root:not([data-theme="blacktop"]) .courtside-hero {
    border-color: var(--dk-line);
    background: linear-gradient(135deg, #f8fbff, #eef4ff) !important;
    box-shadow: var(--dk-shadow);
  }
  .courtside-hero::after {
    background:
      radial-gradient(circle at 50% 50%, transparent 0 9%, color-mix(in srgb, var(--dk-blue) 16%, transparent) 9.2% 9.7%, transparent 10%),
      linear-gradient(90deg, transparent 49.9%, color-mix(in srgb, var(--dk-blue) 16%, transparent) 50% 50.15%, transparent 50.3%),
      radial-gradient(ellipse 30% 130% at 0 50%, transparent 0 78%, color-mix(in srgb, var(--dk-blue) 16%, transparent) 78.2% 78.7%, transparent 79%),
      radial-gradient(ellipse 30% 130% at 100% 50%, transparent 0 78%, color-mix(in srgb, var(--dk-blue) 16%, transparent) 78.2% 78.7%, transparent 79%);
  }
  .courtside-hero__eyebrow { color: var(--dk-dim); }
  .courtside-hero__tier {
    background: var(--dk-panel);
    border: 1.5px solid var(--dk-orange);
    color: var(--dk-orange);
  }
  .courtside-record__w { color: var(--dk-blue); }
  .courtside-record__dash,
  .courtside-record__l { color: var(--ink-slate); }
  .courtside-hero__sub { color: var(--dk-dim); }
  .courtside-hero__sub b { color: var(--dk-orange); }
  .courtside-hero .season-strip__count { color: var(--dk-dim); }
  .courtside-hero .grade-badge {
    background: var(--dk-orange);
  }
  :root:not([data-theme="blacktop"]) .courtside-hero .grade-badge__inner { background: #fff7ed; }
  [data-theme="blacktop"] .courtside-hero .grade-badge__inner { background: var(--dk-panel); }
  .courtside-hero .grade-badge__letter,
  .courtside-hero .grade-badge__label { color: var(--dk-orange); }

  /* The main column's blocks keep their content height. The composition
     above lets them shrink to the canvas, which on a 900px canvas stacked
     the legends banner over the fourth starter; with the court beside the
     list the card needs its full height, so the page scrolls instead. */
  @container app (min-width: 1151px) {
    .results-col--main > .dk-res-five,
    .results-col--main > .dk-res-five > .rounded-2xl,
    .results-col--main > .dk-res-legends { flex: 1 0 auto; min-height: auto; }
  }
  .results-layout .dk-res-five > .rounded-2xl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: stretch;
  }
  .results-layout .dk-res-five > .rounded-2xl > p { grid-column: 1 / -1; }
  .results-layout .dk-res-five .dk-five__court { grid-column: 1; grid-row: 2; display: flex; align-items: stretch; min-height: 0; }
  .results-layout .dk-res-five .dk-five__court .draft-court {
    aspect-ratio: auto;
    height: auto;
    min-height: 250px;
    --court-dot: clamp(40px, 6cqh, 54px);
  }
  .results-layout .dk-res-five .dk-five__court .draft-court__name { font-size: 12px; }
  .results-layout .dk-res-five .dk-five__court .draft-court__ovr { font-size: 15px; flex-direction: row; gap: 4px; align-items: baseline; }
  .results-layout .dk-res-five > .rounded-2xl > .flex.flex-col { grid-column: 2; grid-row: 2; justify-content: space-evenly; }
}

/* ── Dynasty Duel at desktop widths ────────────────────────────────────────
   Dynasty Home is laid out in css/styles.css (its own breakpoint, since it
   is a wide board at every desktop width). The bracket screen's court turns
   landscape and takes the whole canvas: the scorebug across the top, the
   floor filling whatever height the bracket strip and the Start button
   leave. The series, its result and the tier-cleared screen build on it. */
@media (min-width: 1024px) {
  html[data-page="game"] #app > .main-gradient > main > .dd-arena { max-width: 100%; }
  .dd-arena { max-width: 100%; flex: 1 1 auto; justify-content: center; gap: 16px; }
  .dd-arena__eyebrow { display: none; }

  .dd-hardwood {
    flex: 1 1 auto;
    min-height: 380px;
    /* No taller than the court drawn full width (its 1368:532 floor plus the
       scorebug and padding), so a tall canvas centres the screen instead of
       showing a band of empty floor above and below the lines. */
    max-height: calc((100cqw - 2 * var(--gutter) - 24px) * 532 / 1368 + 66px);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "you round them" "floor floor floor";
    padding: 10px 12px 12px;
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
  }
  .dd-hardwood__band { padding: 0 16px; }
  .dd-hardwood__band--round {
    grid-area: round; display: flex; justify-content: center; padding: 0 18px;
    background: rgba(255, 255, 255, 0.07); color: #cbd5e1;
    font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  }
  .dd-hardwood__team { font-size: 22px; }
  .dd-hardwood__team--kicker { display: none; }
  .dd-hardwood__team--name { display: block; }
  .dd-hardwood__str small { font-size: 9px; }
  .dd-hardwood__str b { font-size: 24px; }
  /* Mirrored on their side: "1.50 STRENGTH … '89 PISTONS". */
  .dd-hardwood__band--them .dd-hardwood__str { order: -1; flex-direction: row-reverse; }

  .dd-hardwood__floor {
    display: flex; align-items: center; justify-content: center;
    container-type: size;
    background: repeating-linear-gradient(0deg, var(--dd-floor-grain) 0 1px, transparent 1px 15px), var(--dd-floor);
  }
  /* The court keeps its proportions; any floor left over is apron. */
  .dd-hardwood__box { width: min(100cqw, 100cqh * 1368 / 532); aspect-ratio: 1368 / 532; }
  .dd-hardwood__lines--land { display: block; }
  .dd-hardwood__lines--port { display: none; }

  .dd-hardwood__paint {
    left: 62.5%; right: auto; top: 50%; width: 24.1%;
    flex-direction: column; align-items: center; gap: 0;
    font-size: calc(7.16cqw * var(--fit-land, 1)); line-height: 0.86;
  }
  .dd-hardwood__year { font-size: 0.49em; line-height: 0.95; }

  .dd-hardwood__jump { width: 10.53%; gap: 0.3em; }
  .dd-hardwood__jump-label,
  .dd-verdict { font-size: clamp(8px, 0.66cqw, 12px); }
  .dd-hardwood__jump-pct { font-size: clamp(30px, 3.65cqw, 64px); }

  .dd-hardwood__player { --dot: 4.39cqw; left: var(--lx); top: var(--ly); gap: 0.45cqw; max-width: 15cqw; }
  .dd-hardwood__dot { border-width: 3px; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.3); }
  .dd-hardwood__plate { font-size: clamp(11px, 0.95cqw, 16px); padding: 0.3em 0.7em; border-radius: 8px; }
  .dd-hardwood__full { display: inline; }
  .dd-hardwood__last { display: none; }

  .dd-arena__foot { display: flex; flex-direction: row; align-items: center; gap: 40px; padding: 0 4px; }
  .dd-arena__actions { flex: 0 0 380px; display: flex; flex-direction: column; gap: 2px; }
  .dd-arena__go { position: static; margin: 0; padding: 0; background: none; }
  .dd-route { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; }
  .dd-route__stop { flex: 0 0 auto; flex-direction: row; gap: 10px; text-align: left; }
  .dd-route__stop + .dd-route__stop { flex: 1 1 0; }
  .dd-route__stop + .dd-route__stop::before { position: static; flex: 1 1 auto; width: auto; margin-right: 4px; }
  .dd-route__node { width: 30px; height: 30px; font-size: 13px; }
  .dd-route__node svg { width: 15px; height: 15px; }
  .dd-route__text b { font-size: 18px; }
  .dd-route__text span { font-size: 11px; }

  /* Series screen: the scorebug's wins mirror like the strength does, the
     latest final sits at center court with your five stepped clear of it,
     and the seven games are tiles beside the button. */
  .dd-hardwood__wins { gap: 12px; }
  .dd-hardwood__wins b { font-size: 28px; }
  .dd-pips { gap: 5px; }
  .dd-pip { width: 11px; height: 11px; }
  .dd-hardwood__band--them .dd-hardwood__wins { order: -1; flex-direction: row-reverse; }

  .dd-hardwood--final .dd-hardwood__paint {
    display: flex; left: auto; right: 2.05%; top: 7.5%; width: auto;
    transform: none; align-items: flex-end;
    font-size: calc(4.39cqw * var(--fit-land, 1));
  }
  .dd-hardwood--won .dd-hardwood__paint { opacity: 0.5; }

  .dd-final {
    left: 50%; top: 50%; width: 40.9%;
    translate: -50% -50%;
    gap: 0.6cqw; padding: 1.17cqw 1.9cqw 1.32cqw; border-radius: 18px;
  }
  .dd-final__label { font-size: clamp(9px, 0.8cqw, 13px); }
  .dd-final__score { gap: 1.3cqw; }
  .dd-final__side small { font-size: clamp(12px, 1.17cqw, 20px); }
  .dd-final__side b { font-size: 6.73cqw; }
  .dd-final__dash { font-size: 2.92cqw; padding-top: 1.3cqw; }
  .dd-final__line { font-size: clamp(11px, 0.91cqw, 16px); }

  .dd-games { flex: 1 1 auto; gap: 10px; }
  .dd-game {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: space-between; align-items: center;
    justify-items: start; gap: 5px 6px; min-height: 84px; box-sizing: border-box; padding: 9px 11px;
    border-radius: 12px; border: 1px solid var(--border); background: var(--card); text-align: left;
  }
  .dd-game__num { font-size: 10px; letter-spacing: 0.12em; }
  .dd-game__mark { width: 20px; height: 20px; font-size: 11px; justify-self: end; }
  .dd-game__score,
  .dd-game__note,
  .dd-game__swing { grid-column: 1 / -1; }
  .dd-game__score { font-size: 22px; color: var(--fg); }
  .dd-game--w .dd-game__them,
  .dd-game--l .dd-game__you { font-weight: 600; color: var(--muted-fg); }
  .dd-game--w .dd-game__you,
  .dd-game--l .dd-game__them { font-weight: 800; color: var(--fg); }
  .dd-game__note { font-size: 10.5px; }
  .dd-game--played .dd-game__note { display: block; }

  .dd-game--latest {
    padding: 8px 10px; border: 2px solid color-mix(in srgb, var(--dd-you) 45%, var(--card));
    background: color-mix(in srgb, var(--dd-you) 8%, var(--card));
  }
  .dd-game--latest .dd-game__score { color: var(--fg); }
  .dd-game--latest .dd-game__mark,
  .dd-game--clinched .dd-game__mark,
  .dd-game--out .dd-game__mark { box-shadow: none; }
  .dd-game--latest .dd-game__note { color: var(--dd-you); font-weight: 700; }
  .dd-game--clinched {
    border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 10%, var(--card));
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
  }
  .dd-game--clinched .dd-game__num,
  .dd-game--clinched .dd-game__note { color: var(--dd-gold-strong); font-weight: 800; }
  .dd-game--out { border-color: color-mix(in srgb, var(--dd-danger) 55%, var(--card)); background: color-mix(in srgb, var(--dd-danger) 6%, var(--card)); }
  .dd-game--out .dd-game__num,
  .dd-game--out .dd-game__note { color: var(--dd-danger); font-weight: 800; }

  .dd-game--next {
    gap: 4px 6px; padding: 8px 10px; border: 2px solid var(--dd-bronze);
    background: color-mix(in srgb, var(--dd-bronze) 5%, var(--card));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dd-bronze) 12%, transparent);
  }
  .dd-game--next .dd-game__mark,
  .dd-game--later .dd-game__mark,
  .dd-game--maybe .dd-game__mark,
  .dd-game--skip .dd-game__mark,
  .dd-game--next .dd-game__note { display: none; }
  .dd-game__tag { display: block; justify-self: end; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dd-bronze); }
  .dd-game__swing { display: block; font-size: 11px; font-weight: 700; color: var(--fg); }
  .dd-game__swing--win b { color: var(--dd-you); }
  .dd-game__swing--lose b { color: var(--dd-bronze); }
  .dd-game--later { border: 1.5px dashed color-mix(in srgb, var(--muted-fg) 45%, transparent); background: transparent; }
  .dd-game--maybe,
  .dd-game--skip { border: 1.5px dashed color-mix(in srgb, var(--muted-fg) 28%, transparent); background: transparent; }
  .dd-games__swing { display: none; }

  /* Series result: the scoreboard across the canvas, then the odds chart,
     the numbers and the next step side by side. The button sits in the next
     step's card: it's placed on the grid's bottom row, over the card's
     reserved bottom padding, so on a phone the same button can ride the
     bottom of the screen. */
  html[data-page="game"] #app > .main-gradient > main > .dd-recap { max-width: 100%; }
  .dd-recap { max-width: 100%; flex: 1 1 auto; justify-content: center; gap: 16px; }
  .dd-board { padding: 10px 12px 12px; border-radius: 22px; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2); }
  .dd-board__bands { display: flex; gap: 8px; min-height: 36px; }
  .dd-board__bands > .dd-hardwood__band--you,
  .dd-board__bands > .dd-hardwood__band--them { flex: 1 1 0; }
  .dd-board .dd-hardwood__band--round.dd-board__round--gold { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
  .dd-board__body { flex-direction: row; align-items: center; gap: 40px; padding: 18px 22px 14px; }
  .dd-board__story { flex: 0 0 34%; }
  .dd-board__chips { gap: 8px; }
  .dd-chip { height: 24px; gap: 6px; padding: 0 10px; font-size: 10.5px; letter-spacing: 0.14em; }
  .dd-chip svg { width: 13px; height: 13px; }
  .dd-board__title { font-size: 50px; }
  .dd-board__sub { font-size: 15px; line-height: 1.45; }
  .dd-linescore { flex: 1 1 auto; width: auto; margin: 0; }
  .dd-linescore th,
  .dd-linescore td { padding: 10px 0; }
  .dd-linescore thead th { padding: 0 0 10px; font-size: 10px; letter-spacing: 0.14em; }
  .dd-linescore thead th:not(.dd-linescore__team) { width: 62px; }
  .dd-linescore thead th.dd-linescore__total { width: 84px; }
  .dd-linescore tbody .dd-linescore__team { font-size: 20px; }
  .dd-linescore tbody .dd-linescore__team::before { width: 10px; height: 10px; margin-right: 9px; border-radius: 3px; vertical-align: 2px; }
  .dd-linescore tbody td { font-size: 30px; }
  .dd-linescore tbody td.dd-linescore__total { font-size: 40px; }

  .dd-recap__cards {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 24fr) minmax(0, 30fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0 16px;
  }
  .dd-swing { grid-column: 1; grid-row: 1 / 3; }
  .dd-tally { grid-column: 2; grid-row: 1 / 3; }
  .dd-next,
  .dd-recap__actions { grid-column: 3; }
  .dd-next { grid-row: 1 / 3; }
  .dd-recap__cards--no-odds { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
  .dd-recap__cards--no-odds .dd-tally { grid-column: 1; }
  .dd-recap__cards--no-odds .dd-next,
  .dd-recap__cards--no-odds .dd-recap__actions { grid-column: 2; }
  .dd-recap__actions { grid-row: 2; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 20px 12px; }
  .dd-recap__actions .dd-links { padding: 0; }

  .dd-swing { gap: 6px; padding: 18px 20px 14px; }
  .dd-swing__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .dd-recap__label { font-size: 11px; }
  .dd-swing__note { font-size: 12.5px; }
  .dd-swing__chart--wide { display: block; }
  .dd-swing__chart--narrow { display: none; }

  .dd-tally {
    padding: 18px 20px; border: 1px solid var(--border); border-radius: 1rem; background: var(--card);
    box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow2);
  }
  .dd-tally__label { display: block; }
  .dd-tally__list { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 0; margin-top: 8px; }
  .dd-tally__item { padding: 12px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
  .dd-tally__item:last-child { padding-bottom: 0; border-bottom: 0; }
  .dd-tally__item dt { font-size: 10px; }
  .dd-tally__value { font-size: 32px; }
  .dd-tally__note { font-size: 11.5px; }

  .dd-next { gap: 12px; padding: 18px 20px 112px; }
  .dd-next__name { font-size: 42px; }
  .dd-next__meta { font-size: 12px; }
  .dd-next__odds { flex-direction: column; align-items: flex-end; gap: 5px; }
  .dd-next__odds b { font-size: 40px; }
  .dd-next .dd-verdict { height: 20px; padding: 0 8px; font-size: 9.5px; }
  .dd-next__route { gap: 10px; padding-top: 12px; }
  .dd-next__stop { gap: 10px; font-size: 13px; }
  .dd-next__node { width: 24px; height: 24px; font-size: 12px; }
  .dd-next__node svg { width: 12px; height: 12px; }
  .dd-next__res { font-size: 12px; }
  .dd-next__note { font-size: 12.5px; }

  /* Tier cleared: the floor landscape with the five in a row in front of the
     medallion, the three series in the scorebug, and the XP, the rewards and
     the next tier side by side beneath. As on the series result, the button
     sits on the grid's bottom row over the next-tier card's reserved padding,
     so on a phone the same button can ride the bottom of the screen. */
  html[data-page="game"] #app > .main-gradient > main > .dd-ceremony { max-width: 100%; }
  .dd-ceremony { max-width: 100%; flex: 1 1 auto; justify-content: center; gap: 14px; }
  .dd-hardwood--ceremony {
    max-height: calc((100cqw - 2 * var(--gutter) - 24px) * 470 / 1368 + 66px);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr);
    grid-template-areas: "you badge results" "floor floor floor";
  }
  .dd-ceremony__badge { padding: 0 16px; font-size: 11px; letter-spacing: 0.16em; }
  .dd-ceremony__badge svg { width: 13px; height: 13px; }
  .dd-ceremony__results { gap: 8px; }
  .dd-ceremony__result { min-height: 36px; padding: 0 12px; border-radius: 9px; }
  .dd-ceremony__result-team { font-size: 18px; }
  .dd-ceremony__result-score { font-size: 22px; }
  .dd-ceremony__tick {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 18px; height: 18px; margin-left: -2px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.92); color: #0f172a; font-size: 10px; font-weight: 900;
  }
  .dd-hardwood--ceremony .dd-hardwood__box { width: min(100cqw, 100cqh * 1368 / 470); aspect-ratio: 1368 / 470; }
  .dd-ceremony__bits--land { display: block; }
  .dd-ceremony__bits--port { display: none; }
  .dd-ceremony__bit--bar { width: 0.51cqw; height: 1.02cqw; }
  .dd-ceremony__bit--dot { width: 0.58cqw; height: 0.58cqw; }

  .dd-medal {
    top: 48.1%; width: 17.84%; gap: 0.37cqw;
    border-width: 0.44cqw;
    box-shadow: 0 0 0 0.66cqw rgba(251, 191, 36, 0.22), 0 24px 50px rgba(15, 23, 42, 0.45);
  }
  .dd-medal__icon svg { width: 2.19cqw; height: 2.19cqw; }
  .dd-medal__tier { font-size: clamp(8px, 0.73cqw, 12px); }
  .dd-medal__title { gap: 0.37cqw; }
  .dd-medal__name { font-size: calc(2.92cqw * var(--fit, 1)); }
  .dd-medal__cleared { font-size: 1.83cqw; }
  .dd-medal__games {
    display: block; margin-top: 0.3cqw;
    font-size: clamp(8px, 0.73cqw, 12px); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #94a3b8;
  }

  .dd-ceremony__cards {
    display: grid;
    grid-template-columns: minmax(0, 28fr) minmax(0, 35fr) minmax(0, 37fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0 14px;
  }
  .dd-ceremony__xp { grid-column: 1; grid-row: 1 / 3; }
  .dd-ceremony__unlocks { grid-column: 2; grid-row: 1 / 3; }
  .dd-ceremony__next { grid-column: 3; grid-row: 1 / 3; }
  .dd-ceremony__actions {
    grid-column: 3; grid-row: 2; z-index: 1;
    display: flex; align-items: center; gap: 12px; padding: 0 20px 18px;
  }
  .dd-ceremony__actions .dd-arena__go { flex: 1 1 auto; }
  .dd-ceremony__actions .dd-links { padding: 0; }

  .dd-ceremony__xp,
  .dd-ceremony__next { gap: 10px; padding: 18px 20px; }
  .dd-ceremony__unlocks { gap: 10px; padding: 16px 18px; }
  .dd-ceremony__next { padding-bottom: 92px; }
  .dd-ceremony__head .dd-recap__label { font-size: 11px; }
  .dd-ceremony__haul { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dd-ceremony__amount { font-size: 50px; }
  .dd-ceremony__level > span { font-size: 10.5px; }
  .dd-ceremony__level b { font-size: 30px; }
  .dd-ceremony__bar { margin-top: auto; }
  .dd-ceremony__barmeta { font-size: 11.5px; }
  .dd-ceremony__room { font-size: 12px; }
  .dd-ceremony__tiles { gap: 8px; }
  .dd-ceremony__tile { padding: 5px 5px 6px; }
  .dd-ceremony__tile .reward-preview,
  .dd-ceremony__lock { height: 50px; }
  .dd-ceremony__name { font-size: 10px; }
  .dd-ceremony__upnext { margin-block: auto; gap: 16px; padding: 16px 18px; }
  .dd-ceremony__upnext .reward-preview { width: 72px; height: 60px; }
  .dd-ceremony__upnext p { font-size: 14px; }
  .dd-ceremony__upnext p span { font-size: 12px; }
  .dd-ceremony__pay { font-size: 12px; }
  .dd-ceremony__tier { font-size: 40px; }
  .dd-ceremony__teams { gap: 6px; }
  .dd-ceremony__teams > li { min-height: 30px; padding: 0 10px; }
  .dd-ceremony__teams b { font-size: 16px; }
  .dd-ceremony__teams span { display: inline; }
  .dd-ceremony__next--trophy { gap: 18px; }
  .dd-ceremony__trophy-art { width: 84px; height: 119px; }
  .dd-ceremony__next--trophy .dd-ceremony__tier { font-size: 30px; }
}

/* ============================================================
   HOME SCREEN (renderModeSelect) — the 1440x900 canvas layout.
   css/styles.css holds the shared parts and the --hm-* palette. Header with
   labelled tool buttons, GM Level and Legends in one panel, then four cards
   in one row — Classic (wider), Dynasty Duel, 1v1 and the Trophy Room
   cabinet — then the footer. The card row is the one that stretches: on a
   canvas taller than 900 the pictures grow and everything else keeps its
   size.
   ============================================================ */
@media (min-width: 1024px) {
  .main-gradient.hm { background-attachment: scroll; }
  .hm .hm-head__inner { height: 76px; max-width: none; padding: 0 40px; }
  .hm .hm-brand__crest { width: 46px; height: 46px; }
  .hm .hm-brand__text { display: flex; }
  .hm .hm-tools { gap: 8px; }
  .hm .hm-icon { width: 40px; height: 40px; border-radius: 10px; }
  .hm .hm-tools__rule { height: 26px; margin: 0 10px; }
  /* Tool buttons carry their labels here: white with black ink in the light
     theme, a dark glass with white ink in Blacktop. The account button is one
     of them (hm-icon--labelled), signed in or out. */
  .hm .hm-tools .hm-icon--labelled {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 44px;
    padding: 0 15px 0 13px;
    border: 1px solid var(--hm-line-hi);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 0 var(--hm-line-hi);
    color: #0b0f19;
    font: 600 14px/1 'Fira Sans', sans-serif;
  }
  .hm .hm-tools .hm-icon--labelled:hover { background: #f8fafc; border-color: #94a3b8; color: #0b0f19; }
  .hm .hm-icon__label { display: inline; }
  [data-theme="blacktop"] .hm .hm-tools .hm-icon--labelled {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
    color: #f1f5f9;
  }
  [data-theme="blacktop"] .hm .hm-tools .hm-icon--labelled:hover { background: rgba(255, 255, 255, 0.1); color: #f1f5f9; }

  html[data-page="game"] #app > .hm > main.hm-main { padding: 24px 40px !important; }
  html[data-page="game"] #app > .hm > main > .hm-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    gap: 16px;
  }

  .hm .hm-label { font-size: 15px; letter-spacing: 0.1em; }

  /* GM Level and Legends: one panel, GM Level taking the larger share. */
  .hm .hm-stats {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    flex: none;
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    background: var(--hm-panel);
    box-shadow: var(--hm-card-shadow);
  }
  .hm .hm-stats--one { grid-template-columns: 1fr; }
  .hm .hm-stat {
    gap: 18px;
    height: 100px;
    padding: 0 26px 0 20px;
    border-radius: 16px 0 0 16px;
    text-align: left;
  }
  .hm .hm-stat + .hm-stat { border-radius: 0 16px 16px 0; padding-left: 18px; gap: 16px; }
  .hm .hm-stats--one .hm-stat { border-radius: 16px; }
  .hm .hm-stat:hover { background: var(--hm-panel-hi); }
  .hm .hm-stat__visual { width: 70px; height: 70px; }
  /* GM Level: no XP ring here (the bar beside it shows progress); the level
     sits in a soft grey circle instead. Phones keep the ring. */
  .hm .hm-stat--level .hm-stat__visual { border-radius: 50%; background: var(--hm-inset); box-shadow: inset 0 0 0 1px var(--hm-line); }
  .hm .hm-stat--level .hm-stat__visual > svg { display: none; }
  .hm .hm-stat__lvl { font-size: 28px; }
  .hm .hm-stat--level .hm-stat__lvl { font-weight: 800; }
  .hm .hm-stat__lvlno { display: inline; }
  .hm .hm-stat__text { gap: 6px; }
  .hm .hm-stat__value { font: 700 26px/1.1 'Barlow Condensed', sans-serif; }
  .hm .hm-stat__bar { display: block; height: 8px; border-radius: 4px; background: var(--hm-track); overflow: hidden; }
  .hm .hm-stat__bar > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--acc-deep), var(--acc)); }
  .hm .hm-stat__meta { justify-content: flex-start; gap: 6px; font-size: 13px; }
  .hm .hm-stat--level .hm-stat__meta { gap: 0; }
  .hm .hm-stat--level .hm-stat__pct::before { content: '\00b7\00a0'; margin-left: 5px; font-weight: 500; color: var(--hm-ink-2); }
  .hm .hm-stat__next { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 12px; }
  .hm .hm-stat__next i {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fbbf24;
    color: #7c2d12;
    font-size: 11px;
    font-style: normal;
  }
  .hm .hm-stat .hm-chev { display: block; flex: none; }

  /* Legends: a fan of player cards and a count, in its own purple. */
  .hm .hm-stat--legends {
    --hm-leg: #7c3aed;
    --hm-leg-soft: rgba(124, 58, 237, 0.14);
    --hm-fan-card: #ffffff;
    --hm-fan-edge: #c4b5fd;
    --hm-fan-line: #e2e8f0;
  }
  [data-theme="blacktop"] .hm .hm-stat--legends {
    --hm-leg: #a78bfa;
    --hm-leg-soft: rgba(167, 139, 250, 0.16);
    --hm-fan-card: #1e2840;
    --hm-fan-edge: #5b4a9a;
    --hm-fan-line: #334155;
  }
  .hm .hm-stat__fan { display: block; flex: none; width: 84px; height: 76px; margin: -6px 0; overflow: visible; }
  .hm .hm-stat--legends .hm-label { color: var(--hm-leg); }
  .hm .hm-stat--legends .hm-stat__value { display: flex; align-items: center; gap: 8px; overflow: visible; }
  .hm .hm-stat--legends .hm-stat__value b { font-size: 34px; line-height: 1; }
  .hm .hm-stat__of,
  .hm .hm-stat--legends .hm-stat__meta { display: none; }
  .hm .hm-stat__ofdesk { display: block; font: 600 12px/1.15 'Fira Sans', sans-serif; color: var(--hm-ink-3); }
  .hm .hm-stat__togo { display: block; font: 500 12.5px/1 'Fira Sans', sans-serif; color: var(--hm-ink-2); }
  .hm .hm-stat__togo b { font-weight: 600; color: var(--hm-leg); }
  .hm .hm-stat__chip {
    display: block;
    flex: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--hm-leg-soft);
    color: var(--hm-leg);
    font: 700 15px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.02em;
  }

  .hm .hm-modes {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .hm .hm-duo { display: contents; }
  .hm .hm-card { min-height: 0; }
  .hm .hm-art,
  .hm .hm-duo .hm-art {
    flex: 1 1 auto;
    min-height: 150px;
    aspect-ratio: auto;
  }
  /* The portrait pictures fill the panel and fit inside it (their own
     preserveAspectRatio="meet"), so nothing is ever cropped; js/ui/homeArt.js
     runs each floor 800 units past every edge, so whatever the panel's
     shape, the spare space is more floor. */
  .hm .hm-art__desk {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .hm .hm-art__phone { display: none; }
  .hm .hm-art__pos { font-size: 15px; }
  .hm .hm-card__body,
  .hm .hm-duo .hm-card__body { flex: none; padding: 22px 26px 26px; }
  .hm .hm-card__head,
  .hm .hm-duo .hm-card__head { gap: 12px; margin-bottom: 12px; }
  .hm .hm-tile { width: 36px; height: 36px; border-radius: 10px; }
  .hm .hm-tile svg { width: 20px; height: 20px; }
  .hm .hm-card .hm-tile { color: #0b0f19; }
  [data-theme="blacktop"] .hm .hm-card .hm-tile { color: #f1f5f9; }
  .hm .hm-card__title,
  .hm .hm-duo .hm-card__title { font-size: 32px; }
  /* Three lines for every description, so the four pictures above them end
     at the same height whatever the copy's length. */
  .hm .hm-card__desc,
  .hm .hm-duo .hm-card__desc {
    flex: none;
    min-height: 68px;
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
  }
  .hm .hm-card--classic .hm-card__desc { max-width: 440px; }
  .hm .hm-cta,
  .hm .hm-duo .hm-cta { height: 52px; font-size: 20px; letter-spacing: 0.03em; }

  /* Trophy Room: the phone's row becomes the fourth card — a display cabinet,
     gold-framed and with a link rather than a play button, so it reads as a
     collection, not a mode. Cream and gold in the light theme, navy and gold
     in Blacktop; the cabinet drawing reads the --tr-* colours. */
  .hm .hm-trophy {
    --tr-bg-1: #fffbf2; --tr-bg-2: #fbf0d9; --tr-edge: #b8862a;
    --tr-wall-1: #f6e7c8; --tr-wall-2: #eed8ab; --tr-panel: rgba(120, 80, 20, 0.07);
    --tr-case: #e7cf9c; --tr-glass-1: #fffdf8; --tr-glass-2: #f5e8cb;
    --tr-ghost: rgba(146, 98, 20, 0.42); --tr-glow: 0.55; --tr-sheen: 0.35;
    --tr-label: #a16207; --tr-title: var(--hm-ink); --tr-desc: var(--hm-ink-2);
    --tr-count: var(--hm-ink-2); --tr-num: #b45309; --tr-link: #b45309; --tr-rule: rgba(184, 134, 42, 0.4);
  }
  [data-theme="blacktop"] .hm .hm-trophy {
    --tr-bg-1: #13203f; --tr-bg-2: #0b1429; --tr-edge: #8a6414;
    --tr-wall-1: #16244a; --tr-wall-2: #0b1429; --tr-panel: rgba(255, 255, 255, 0.04);
    --tr-case: #0a1020; --tr-glass-1: #1c2d57; --tr-glass-2: #101b36;
    --tr-ghost: rgba(232, 194, 106, 0.32); --tr-glow: 0.3; --tr-sheen: 0.045;
    --tr-label: #e8c26a; --tr-title: #ffffff; --tr-desc: rgba(226, 232, 240, 0.78);
    --tr-count: rgba(226, 232, 240, 0.85); --tr-num: #fde68a; --tr-link: #fbbf24; --tr-rule: rgba(201, 149, 43, 0.35);
  }
  .hm .hm-row.hm-trophy,
  .hm .hm-row.hm-trophy:hover {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid #c9952b;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--tr-bg-1), var(--tr-bg-2));
    box-shadow: 0 4px 0 var(--tr-edge);
    text-align: left;
  }
  .hm .hm-trophy > .hm-row__icon,
  .hm .hm-trophy > .hm-row__text,
  .hm .hm-trophy > .hm-chev { display: none; }
  .hm .hm-trophy > .hm-trophy__art { display: block; border-bottom: 1px solid var(--tr-rule); background: var(--tr-wall-2); }
  .hm .hm-trophy__body { display: flex; flex-direction: column; flex: none; padding: 22px 26px 26px; }
  .hm .hm-trophy__label {
    margin-bottom: 10px;
    font: 600 13px/1 'Fira Sans', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-label);
  }
  .hm .hm-trophy__title { margin-bottom: 12px; font: 700 32px/1 'Barlow Condensed', sans-serif; color: var(--tr-title); }
  /* 19px shorter than a mode card's, which is how much taller the label and
     title stack is than a mode card's tile row: the bodies end level. */
  .hm .hm-trophy__desc { min-height: 49px; margin-bottom: 22px; font: 400 15px/1.5 'Fira Sans', sans-serif; color: var(--tr-desc); }
  .hm .hm-trophy__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 52px;
    border-top: 1px solid var(--tr-rule);
  }
  .hm .hm-trophy__count { font: 600 14px/1 'Fira Sans', sans-serif; color: var(--tr-count); white-space: nowrap; }
  .hm .hm-trophy__count b { margin-right: 4px; font: 700 20px/1 'Barlow Condensed', sans-serif; color: var(--tr-num); }
  .hm .hm-trophy__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 19px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: var(--tr-link);
  }
  .hm .hm-trophy:hover .hm-trophy__link { text-decoration: underline; text-underline-offset: 4px; }

  .hm > .site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;          /* the footer ships Tailwind's w-full; with side margins that overflows */
    height: 54px;
    margin: 0 40px;
    padding: 0;
    border-top: 1px solid var(--hm-line);
    background: none;
  }
  .hm > .site-footer .site-footer__links { gap: 0 10px; }
  .hm > .site-footer .site-footer__link { font-size: 13px; font-weight: 500; color: var(--hm-ink-2); }
  .hm > .site-footer .site-footer__link:hover,
  .hm > .site-footer .site-footer__link:focus-visible { color: var(--hm-ink); }
  .hm > .site-footer .site-footer__sep { color: var(--hm-rule); }
}

/* ── Dynasty Duel · draft on Center Court ──────────────────────────────────
   Desktop Dynasty Duel drafts on the bracket screen's floor until the five
   are in (renderDynastyDraftCourt in js/ui/render.js; no other mode renders
   .draft-workspace--ddcourt). The floor gets a fixed share of the canvas and
   the board row underneath is the elastic region, as on the shipped draft
   screen. The jump circle is drawn at r=100 of the 1368x532 court (the
   bracket screen's is 72) so the wheel fits in it: 200/1368 of the width,
   and it reaches 100/532 above and below the middle. */
@media (min-width: 1024px) {
  .dd-scope.dd-draftcourt--bronze { --dd-acc: var(--dd-bronze); }
  .dd-scope.dd-draftcourt--silver { --dd-acc: var(--dd-silver); }
  .dd-scope.dd-draftcourt--gold { --dd-acc: var(--dd-gold); }
  .dd-scope.dd-draftcourt--goat { --dd-acc: var(--dd-goat); }

  .draft-workspace--ddcourt { justify-content: flex-start; }
  .draft-workspace--ddcourt .dd-hardwood--draft {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    grid-template-rows: auto clamp(220px, 37cqh, 440px);
    gap: 8px;
    padding: 8px 10px 10px;
    border-radius: 20px;
  }

  /* Scorebug */
  .dd-hardwood--draft .dd-hardwood__band--round { gap: 14px; transition: background 0.15s ease, color 0.15s ease; }
  .dd-hardwood--draft .dd-hardwood__band--round.dd-draftcourt__round--place { background: rgba(34, 197, 94, 0.2); color: #bbf7d0; }
  .dd-draftcourt__round-text { overflow: hidden; text-overflow: ellipsis; }
  .dd-draftcourt__pips { display: flex; gap: 4px; flex-shrink: 0; }
  .dd-draftcourt__pip { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
  .dd-draftcourt__pip--done { background: #60a5fa; }
  .dd-draftcourt__pip--now { background: rgba(96, 165, 250, 0.3); box-shadow: inset 0 0 0 1.5px #60a5fa; }
  .dd-draftcourt__count { margin-left: 4px; font-size: 0.72em; opacity: 0.75; }

  /* Their half: the first dynasty between the circle and the arc, the rest
     of the bracket in the corner. */
  .dd-hardwood--draft .dd-hardwood__paint { left: 63%; width: 22.4%; font-size: calc(4.9cqw * var(--fit-land, 1)); }
  .dd-draftcourt__up {
    margin-top: 0.9em;
    font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(9px, 0.78cqw, 12px); font-weight: 800; letter-spacing: 0.18em; line-height: 1;
    color: var(--fg); opacity: 0.72;
  }
  .dd-draftcourt__later {
    position: absolute; right: 1.2%; bottom: 3.2%;
    display: flex; gap: 0.5cqw; list-style: none; margin: 0; padding: 0;
  }
  .dd-draftcourt__later li {
    padding: 0.3em 0.7em; border-radius: 6px; white-space: nowrap;
    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, 0.8cqw, 12px); font-weight: 700;
  }
  .dd-draftcourt__later li span { margin-right: 0.3em; font-size: 0.82em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); }

  /* The wheel in the jump circle */
  .dd-hardwood--draft .dd-hardwood__jump { width: 14.62%; gap: 0.35cqw; }
  .dd-jump__team {
    max-width: 88%; padding-bottom: 0.08em;
    border-bottom: 0.12em solid var(--team, var(--dd-acc));
    font-size: calc(2.2cqw * var(--fit, 1)); font-weight: 800; line-height: 0.95;
    text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dd-jump__era { font-size: 1.75cqw; font-weight: 800; line-height: 1; color: var(--dd-acc); }
  .dd-jump__spin {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3cqw;
    border: 0; border-radius: 999px; background: transparent; color: var(--fg);
    cursor: pointer; transition: background 0.15s ease;
  }
  .dd-jump__spin:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }
  .dd-jump__spin:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
  .dd-jump__spin b { font-size: 3.3cqw; font-weight: 800; line-height: 0.9; text-transform: uppercase; color: var(--primary); }
  .dd-jump__hint { font-size: clamp(9px, 0.72cqw, 12px); font-weight: 700; color: var(--muted-fg); }
  /* Stacked, so the pair stays clear of the PG and SG spots either side. */
  .dd-jump__under {
    position: absolute; left: 50%; top: 71.2%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.4cqw; white-space: nowrap;
  }
  .dd-jump__skip {
    padding: 0.35em 0.9em; border-radius: 999px; cursor: pointer;
    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, 0.78cqw, 12px); font-weight: 800;
    transition: color 0.15s ease;
  }
  .dd-jump__skip:hover { color: var(--primary); }
  .dd-jump__skip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .dd-jump__note {
    padding: 0.3em 0.8em; border-radius: 999px; background: rgba(15, 23, 42, 0.55); color: #ffffff;
    font-size: clamp(10px, 0.78cqw, 12px); font-weight: 700;
  }

  /* Your half: open spots, and places to tap once a pick is selected. */
  .dd-hardwood--draft .dd-hardwood__player { max-width: 14cqw; }
  .dd-hardwood--draft .dd-hardwood__plate { font-size: clamp(10px, 1.02cqw, 14px); }
  .dd-hardwood--draft .dd-hardwood__plate > span { white-space: nowrap; }
  .dd-hardwood__slot {
    display: flex; flex-direction: column; align-items: center; gap: 0.45cqw;
    padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  }
  .dd-hardwood__slot:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; border-radius: 12px; }
  .dd-hardwood__slot .dd-hardwood__dot { transition: transform 0.15s ease; }
  .dd-hardwood__slot:hover .dd-hardwood__dot { transform: scale(1.08); }
  .dd-hardwood__player--primary .dd-hardwood__dot { background: #16a34a; animation: ddPlacePulse 1.6s ease-in-out infinite; }
  .dd-hardwood__player--primary .dd-hardwood__plate { background: #16a34a; color: #ffffff; border-color: transparent; }
  .dd-hardwood__player--flex .dd-hardwood__dot,
  .dd-hardwood__player--flex .dd-hardwood__plate { background: #d97706; color: #ffffff; border-color: transparent; }
  .dd-hardwood__player--off .dd-hardwood__dot { background: #64748b; }

  /* Board and status rail */
  .draft-workspace--ddcourt .draft-workspace__cols { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.8fr); }
  .draft-workspace--ddcourt .draft-workspace__right { justify-content: flex-start; }
  .draft-workspace--ddcourt .draft-workspace__right > .dd-chem { flex: 1 1 auto; overflow-y: auto; }
  .draft-workspace--ddcourt .dd-status { gap: 8px; padding: 12px; }
  .draft-workspace--ddcourt .dd-status__tiles { gap: 6px; }
  .draft-workspace--ddcourt .dd-tile { gap: 7px; padding: 8px; }
  .draft-workspace--ddcourt .dd-tile__ring { width: 34px; height: 34px; }
  .draft-workspace--ddcourt .dd-tile__text b { font-size: 19px; }
  .draft-workspace--ddcourt .dd-tile__text span { font-size: 9px; }
  .draft-workspace--ddcourt .dd-chem { padding: 12px 14px; }
  .dd-chem__empty { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted-fg); }
  .dd-draftcourt__empty {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 20px; border-radius: 18px; text-align: center;
    border: 1.5px dashed var(--dk-line, var(--border)); background: var(--dk-elev, var(--card));
    font-size: 14px; color: var(--muted-fg);
  }
  .dd-draftcourt__empty p { margin: 0; max-width: 46ch; }
  .dd-draftcourt__empty b { color: var(--fg); }
  .dd-draftcourt__note { margin: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
}
@keyframes ddPlacePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55), 0 6px 14px rgba(15, 23, 42, 0.3); }
  50%      { box-shadow: 0 0 0 0.9cqw rgba(22, 163, 74, 0), 0 6px 14px rgba(15, 23, 42, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .dd-hardwood__player--primary .dd-hardwood__dot,
  .dd-jump__spin { animation: none; }
}