/* ALL-22's design system (Direction A, "Broadcast"): the tokens and the components every page shares. That is the
   header, the phone strip and second row, the ☰ menu, the footer, the slim bar, buttons, chips, plates, Up Next and
   the front door's layout. Every page loads this first; tools/site/shell.mjs writes the link, stamped with this
   file's hash, so after an edit run `node tools/site/shell.mjs --write`.
   Everything here is named ds- (classes) or --ds- (tokens), so a page's own CSS can't collide with it.
   The rules:
   - one button height (44px, 36px for small ones) and one 8px spacing scale (4px for tight spots);
   - color has a job: white saves, gold plays, teal is Franchise. No rainbow of labels.
   docs/DESIGN.md has the whole picture. */

:root {
  --ds-bg: #080b0f;
  --ds-panel: #0e1319;
  --ds-tag: #090d11;
  --ds-sheet: #0b1016;
  --ds-hover: #141a22;
  --ds-line: rgba(255, 255, 255, 0.09);
  --ds-tagb: rgba(255, 255, 255, 0.22);
  --ds-ghost: rgba(255, 255, 255, 0.12);
  --ds-hoverb: rgba(255, 255, 255, 0.3);
  --ds-text: #f3f5f8;
  --ds-white-hover: #dfe3e8;
  --ds-muted: #9aa3af;
  --ds-subtle: #7d8794;
  --ds-nav: #d5dae1;
  --ds-gold: #f2c230;
  --ds-gold-hover: #f7d35c;
  --ds-on-gold: #1c1303;
  --ds-teal: #2dd4bf;
  --ds-teal-hover: #5eead4;
  --ds-on-teal: #042f2e;
  --ds-def: #5bc0f8;
  --ds-st: #c4b5fd;
  --ds-red: #f87171;
  --ds-win: #4ade80;
  --ds-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-rc: "Roboto Condensed", "Arial Narrow", sans-serif;
  /* spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 */
  --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 16px; --ds-s5: 24px; --ds-s6: 32px; --ds-s7: 48px;
  --ds-btn: 44px;
  --ds-btn-sm: 36px;
  --ds-r: 6px;
  --ds-r-lg: 10px;
  /* the chrome's heights: the header (desktop 56, phones' top row 60), the phone strip, the second row */
  --ds-head-h: 56px;
  --ds-strip-h: 48px;
  --ds-sub-h: 44px;
  --ds-gutter: 16px;
}

/* ---------------------------------------------------------------- a page built on the system alone (the front door) */
body.ds-page { margin: 0; min-height: 100vh; background: var(--ds-bg); color: var(--ds-text); font: 400 15px/1.4 var(--ds-font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ds-show-phone { display: none !important; }
@media (max-width: 999px) {
  .ds-hide-phone { display: none !important; }
  .ds-show-phone { display: inline-flex !important; }
}

/* ---------------------------------------------------------------- base (only inside the system's own parts) */
.ds, .ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds { font-family: var(--ds-font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ds :focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 2px; }
.ds-i { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-i.ds-f { fill: currentColor; stroke: none; }
.ds-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- state set before paint (shell.js, in <head>) */
/* a forward from an old link is under way: nothing of this page shows */
html.ds-fwd { background: var(--ds-bg); }
html.ds-fwd body { visibility: hidden; }
/* pages for both sports carry both sports' links; the sport in play shows (football unless html.ds-bb) */
html:not(.ds-bb) .ds-bb-only, html.ds-bb .ds-fb-only { display: none !important; }
/* a NEW pill after a label (<span class="ds-new">New</span>): kept for later, nothing wears it now */
.ds-new { display: inline-block; margin-left: 6px; padding: 2px 4px 1px; border-radius: 3px; background: var(--ds-teal); color: var(--ds-on-teal); font: 800 9px/1 var(--ds-rc); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
/* the Patch Notes dot: a note this browser hasn't read yet */
.ds-nd { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-gold); }
html.ds-notes-new .ds-nd { display: inline-block; }
html.ds-notes-new [aria-current] > .ds-nd { display: none; }

/* ---------------------------------------------------------------- the wordmark and the sport switch */
.ds-wm { flex: none; font: 800 22px/1 var(--ds-rc); letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; color: var(--ds-text); text-decoration: none; }
.ds-wm span { color: var(--ds-gold); }
.ds-wm:hover { color: var(--ds-text); }
.ds-sw { flex: none; display: inline-flex; height: 32px; border: 1px solid var(--ds-tagb); border-radius: var(--ds-r); background: var(--ds-tag); overflow: hidden; }
.ds-sw a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; font: 800 12.5px/1 var(--ds-rc); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ds-muted); text-decoration: none; white-space: nowrap; }
.ds-sw a + a { border-left: 1px solid var(--ds-tagb); }
.ds-sw a:hover { color: var(--ds-text); background: var(--ds-hover); }
.ds-sw a:focus-visible { outline-offset: -2px; }
.ds-sw .ds-i { width: 14px; height: 14px; }
/* lit: the page's sport, or on a page for both sports the one in play */
.ds-sw a[aria-current], html:not(.ds-bb) .ds-sw.ds-both .ds-sw-fb, html.ds-bb .ds-sw.ds-both .ds-sw-bb { background: var(--ds-text); color: var(--ds-bg); }

/* ---------------------------------------------------------------- the header: one row on desktop */
.ds-head { position: sticky; top: 0; z-index: 40; background: rgba(8, 11, 15, 0.96); border-bottom: 1px solid var(--ds-line); color: var(--ds-text); }
.ds-head-in { display: flex; align-items: center; gap: 20px; height: var(--ds-head-h); padding: 0 24px; }
.ds-brand { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ds-tabs { display: flex; align-self: stretch; }
.ds-tab { position: relative; display: flex; align-items: center; padding: 0 14px; font: 800 15px/1 var(--ds-rc); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-nav); text-decoration: none; white-space: nowrap; }
.ds-tab:hover { color: var(--ds-text); }
.ds-tab:focus-visible { outline-offset: -4px; }
.ds-tab[aria-current] { color: var(--ds-text); }
.ds-tab[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--ds-gold); }
.ds-tab.ds-fr[aria-current]::after { background: var(--ds-teal); }
.ds-tab .ds-new { transform: translateY(-6px); }
.ds-util { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ds-lb { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: var(--ds-r); font: 800 13.5px/1 var(--ds-rc); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-nav); text-decoration: none; white-space: nowrap; }
.ds-lb:hover { color: var(--ds-text); background: var(--ds-hover); }
.ds-lb .ds-i { color: var(--ds-gold); }
.ds-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ds-tagb); border-radius: 50%; background: var(--ds-tag); color: var(--ds-text); }
.ds-av:hover { background: var(--ds-hover); border-color: var(--ds-hoverb); color: var(--ds-text); }
.ds-av .ds-i { width: 19px; height: 19px; }
.ds-av[aria-current] { border-color: var(--ds-text); }
html.ds-acct-off .ds-av { display: none; }
.ds button.ds-menu-btn { flex: none; display: none; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--ds-tagb); border-radius: 8px; background: var(--ds-tag); color: var(--ds-text); font: inherit; cursor: pointer; transform: none; }
.ds button.ds-menu-btn:hover { background: var(--ds-hover); border-color: var(--ds-hoverb); }
.ds-menu-btn .ds-i { width: 22px; height: 22px; }

/* the phone strip (Build, Play, Franchise, Challenges) and a section's second row */
.ds-strip { display: none; }
.ds-sub { position: sticky; top: var(--ds-head-h); z-index: 39; display: flex; align-items: stretch; height: var(--ds-sub-h); padding: 0 14px; border-bottom: 1px solid var(--ds-line); background: var(--ds-sheet); }
.ds-sbt { position: relative; display: flex; align-items: center; padding: 0 12px; font: 800 13.5px/1 var(--ds-rc); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-muted); text-decoration: none; white-space: nowrap; }
.ds-sbt:hover { color: var(--ds-text); }
.ds-sbt:focus-visible { outline-offset: -4px; }
.ds-sbt[aria-current] { color: var(--ds-text); }
.ds-sbt[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--ds-gold); }
.ds-sbt .ds-i { width: 15px; height: 15px; margin-right: 6px; color: var(--ds-gold); }
/* the challenge on screen before app.js says so (shell.js reads the hash and the last one played; the markup lights
   17–0, ALL22_SHELL.sub() keeps aria-current and the class together) */
html.ds-g-151 .ds-sbt[data-ds-sub="17-0"] { color: var(--ds-muted); }
html.ds-g-151 .ds-sbt[data-ds-sub="17-0"]::after { content: none; }
html.ds-g-151 .ds-sbt[data-ds-sub="151"] { color: var(--ds-text); }
html.ds-g-151 .ds-sbt[data-ds-sub="151"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--ds-gold); }

/* compact desktop: 1000–1279px wide */
@media (min-width: 1000px) and (max-width: 1279px) {
  .ds-head-in { gap: 14px; padding: 0 18px; }
  .ds-brand { gap: 14px; }
  .ds-wm { font-size: 20px; }
  .ds-sw a { gap: 5px; padding: 0 9px 0 8px; font-size: 12px; }
  .ds-tab { padding: 0 10px; font-size: 14.5px; }
  .ds-tab[aria-current]::after { left: 10px; right: 10px; }
  .ds-lb { padding: 0 8px; }
  .ds-lb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------------------------------------------------------------- phones and tablets (under 1000px) */
@media (max-width: 999px) {
  /* the top row scrolls away; the strip stays pinned (no bottom bar) */
  .ds-head { position: relative; z-index: auto; border-bottom: 0; background: transparent; }
  .ds-head-in { height: 60px; gap: 8px; padding: 0 12px 0 var(--ds-gutter); }
  .ds-brand { flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; }
  .ds-wm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 19px; }
  .ds-sw { height: 26px; }
  .ds-sw a { gap: 4px; padding: 0 9px 0 7px; font-size: 11px; letter-spacing: 0.04em; }
  .ds-sw a::after { content: ""; position: absolute; inset: -6px 0; } /* a finger-sized target */
  .ds-sw .ds-i { width: 12px; height: 12px; }
  .ds-tabs, .ds-lb { display: none; }
  .ds-util { gap: 8px; }
  .ds-av { width: 40px; height: 40px; }
  .ds-av .ds-i { width: 20px; height: 20px; }
  .ds button.ds-menu-btn { display: grid; }
  .ds-strip { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: var(--ds-strip-h); border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); background: rgba(8, 11, 15, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .ds-st { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; font: 800 13.5px/1 var(--ds-rc); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-nav); text-decoration: none; white-space: nowrap; }
  .ds-st:focus-visible { outline-offset: -4px; }
  .ds-st[aria-current] { color: var(--ds-text); }
  .ds-st[aria-current]::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--ds-gold); }
  .ds-st.ds-fr[aria-current]::after { background: var(--ds-teal); }
  .ds-sub { top: var(--ds-strip-h); padding: 0 6px; }
  .ds-sbt { flex: 1; justify-content: center; padding: 0 8px; }
  .ds-sbt[aria-current]::after { left: 18%; right: 18%; }
}
@media (max-width: 429px) {
  .ds-sbt .ds-long { display: none; }
  .ds-sbt { font-size: 13px; }
}
@media (max-width: 359px) {
  .ds-head-in { padding-left: 12px; gap: 6px; }
  .ds-wm { font-size: 17.5px; }
  .ds-st { font-size: 12.5px; letter-spacing: 0.01em; }
}

/* ---------------------------------------------------------------- the ☰ menu (phones and tablets) */
dialog.ds-menu { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); max-width: 100vw; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--ds-line); background: var(--ds-sheet); color: var(--ds-text); overflow-y: auto; overscroll-behavior: contain; }
dialog.ds-menu[open] { display: flex; flex-direction: column; }
dialog.ds-menu::backdrop { background: rgba(0, 0, 0, 0.62); }
@media (max-width: 599px) { dialog.ds-menu { width: 100vw; border-left: 0; } }
.ds-menu-top { display: flex; align-items: center; gap: 8px; height: 60px; flex: none; padding: 0 12px 0 var(--ds-gutter); border-bottom: 1px solid var(--ds-line); background: var(--ds-bg); }
.ds-menu-top .ds-wm { flex: 1; font-size: 19px; }
.ds-menu-top .ds-av { width: 40px; height: 40px; }
.ds button.ds-menu-x { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--ds-text); border-radius: 8px; background: var(--ds-text); color: var(--ds-bg); font: inherit; cursor: pointer; transform: none; }
.ds button.ds-menu-x:hover { background: var(--ds-white-hover); }
.ds-menu-x .ds-i { width: 22px; height: 22px; stroke-width: 2.4; }
.ds-menu-body { padding: 14px var(--ds-gutter) 8px; }
.ds-bsw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 52px; border: 1px solid var(--ds-tagb); border-radius: 8px; background: var(--ds-tag); overflow: hidden; }
.ds-bsw a { display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 16px/1 var(--ds-rc); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ds-muted); text-decoration: none; }
.ds-bsw a + a { border-left: 1px solid var(--ds-tagb); }
.ds-bsw a:focus-visible { outline-offset: -3px; }
.ds-bsw a[aria-current], html:not(.ds-bb) .ds-bsw.ds-both .ds-sw-fb, html.ds-bb .ds-bsw.ds-both .ds-sw-bb { background: var(--ds-text); color: var(--ds-bg); }
.ds-menu-cap { margin: 7px 0 0; font-size: 12px; line-height: 1.4; color: var(--ds-muted); text-align: center; }
.ds h2.ds-glbl { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; padding: 0; font: 800 12px/1 var(--ds-rc); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-subtle); }
.ds-glbl::after { content: ""; flex: 1; height: 1px; background: var(--ds-line); }
.ds-box { border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); background: var(--ds-panel); overflow: hidden; }
.ds-mr { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 10px 8px 12px; color: var(--ds-text); text-decoration: none; }
.ds-mr:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-mr:focus-visible { outline-offset: -3px; }
.ds-mr + .ds-mr { border-top: 1px solid var(--ds-line); }
.ds-mr[aria-current] { background: rgba(255, 255, 255, 0.04); }
.ds-mi { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--ds-ghost); border-radius: 8px; background: var(--ds-tag); }
.ds-mi .ds-i { width: 19px; height: 19px; }
.ds-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-mt b { display: flex; align-items: center; font: 800 17px/1 var(--ds-rc); letter-spacing: 0.02em; text-transform: uppercase; }
.ds-mt small { overflow: hidden; font-size: 12.5px; line-height: 1.25; color: var(--ds-muted); white-space: nowrap; text-overflow: ellipsis; }
.ds-mt small.ds-teal { color: var(--ds-teal); }
.ds-mr .ds-chev { width: 18px; height: 18px; color: var(--ds-subtle); }
.ds-mr img { flex: none; height: auto; image-rendering: pixelated; }
.ds-gold-c { color: var(--ds-gold); }
.ds-teal-c { color: var(--ds-teal); }
.ds-red-c { color: var(--ds-red); }
.ds-st-c { color: var(--ds-st); }
.ds-menu .ds-foot { margin-top: auto; }

/* ---------------------------------------------------------------- the footer */
footer.ds-foot { display: block; margin: 0; padding: 18px var(--ds-gutter) 24px; border-top: 1px solid var(--ds-line); background: var(--ds-bg); color: var(--ds-muted); font: 400 12px/1.5 var(--ds-font); text-align: left; }
.ds-foot p { margin: 0; }
.ds-flinks { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 700 12px/1.4 var(--ds-rc); letter-spacing: 0.06em; text-transform: uppercase; }
.ds .ds-flinks a { display: inline-flex; align-items: center; gap: 5px; color: var(--ds-muted); font-weight: 700; text-decoration: none; }
.ds .ds-flinks a:hover { color: var(--ds-text); text-decoration: none; }
.ds .ds-flinks a[aria-current] { color: var(--ds-text); }
.ds-credits { margin-top: 8px !important; font-size: 12px; line-height: 1.45; color: var(--ds-subtle); }
.ds .ds-credits a { color: var(--ds-nav); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.ds .ds-credits a:hover { color: var(--ds-text); text-decoration-color: currentColor; }
.ds-fine { margin-top: 12px !important; font-size: 11.5px; line-height: 1.45; color: var(--ds-subtle); }
@media (max-width: 999px) {
  footer.ds-foot > * { max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1000px) {
  footer.ds-foot { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 12px 24px; }
  .ds-fine { flex: none; max-width: 560px; margin: 0 !important; font-size: 11px; line-height: 1.4; text-align: right; }
}

/* ---------------------------------------------------------------- a game's slim bar (pro.html, bowl.html, slugger.html) */
/* On a game's title screen only (shell.js: html.ds-gtitle); never in a match. The way back to Play and the game's logo,
   over the game's own picture; the title screen moves down under it. Its words in the games' own pixel font (every
   game page loads it), so the bar asks for no font of its own. Only where the title still fits under it: shell.js
   measures (a short window, a sideways phone: no bar). */
.ds-gbar { display: none; }
html.ds-gtitle .ds-gbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 10px; height: calc(var(--ds-gbar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px)); background: rgba(8, 11, 15, 0.88); border-bottom: 1px solid var(--ds-line); }
:root { --ds-gbar-h: 44px; }
.ds-gb-back { display: inline-flex; align-items: center; gap: 4px; height: var(--ds-gbar-h); padding: 0 6px 0 0; font: 400 10px/1 "Press Start 2P", var(--ds-rc); text-transform: uppercase; color: var(--ds-text); text-decoration: none; }
.ds-gb-back:hover { color: var(--ds-gold); }
.ds-gb-back .ds-i { width: 16px; height: 16px; }
.ds-gb-sep { width: 1px; height: 20px; flex: none; background: var(--ds-line); }
.ds-gb-logo { display: block; flex: none; }
.ds-gb-logo.ds-gb-px { image-rendering: pixelated; }
html.ds-gtitle #ui .screen.title { top: calc(var(--ds-gbar-h) + env(safe-area-inset-top, 0px)); }

/* ---------------------------------------------------------------- buttons: white saves, gold plays, teal is Franchise */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: var(--ds-btn); margin: 0; padding: 0 16px; border: 0; border-radius: var(--ds-r); font: 800 15px/1 var(--ds-rc); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ds-btn .ds-i { width: 17px; height: 17px; stroke-width: 2.2; }
.ds-btn:active { transform: translateY(1px); }
.ds-btn.ds-white { background: var(--ds-text); color: var(--ds-bg); }
.ds-btn.ds-white:hover { background: var(--ds-white-hover); color: var(--ds-bg); }
.ds-btn.ds-gold { background: var(--ds-gold); color: var(--ds-on-gold); }
.ds-btn.ds-gold:hover { background: var(--ds-gold-hover); color: var(--ds-on-gold); }
.ds-btn.ds-teal { background: var(--ds-teal); color: var(--ds-on-teal); }
.ds-btn.ds-teal:hover { background: var(--ds-teal-hover); color: var(--ds-on-teal); }
.ds-btn.ds-out { background: var(--ds-tag); border: 1px solid var(--ds-tagb); color: var(--ds-text); }
.ds-btn.ds-out:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-btn.ds-quiet { background: transparent; border: 1px solid var(--ds-ghost); color: var(--ds-muted); }
.ds-btn.ds-quiet:hover { border-color: var(--ds-hoverb); color: var(--ds-text); }
.ds-btn.ds-sm { height: var(--ds-btn-sm); padding: 0 10px 0 13px; gap: 3px; font-size: 14px; }
.ds-btn.ds-sm .ds-i { width: 16px; height: 16px; }
@media (max-width: 999px) { .ds-btn.ds-sm { height: 40px; } }

/* a team's plate (its abbreviation in its colors: --c1 the plate, --c2 the text, set by script) */
.ds-plate { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 5px; background: var(--c1, #39424e); color: var(--c2, #fff); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35); font: 800 10.5px/1 var(--ds-rc); letter-spacing: 0.02em; text-transform: uppercase; }
.ds-kick { margin: 0; font: 700 13px/1.2 var(--ds-rc); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ds-gold); }
.ds-sech { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 13px/1 var(--ds-rc); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-muted); }
.ds-sech::after { content: ""; flex: 1; height: 1px; background: var(--ds-line); }
.ds-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border: 1px solid var(--ds-tagb); border-radius: 4px; background: var(--ds-tag); font: 700 11.5px/1 var(--ds-rc); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-nav); white-space: nowrap; }

/* ---------------------------------------------------------------- Up Next and the lower thirds */
.ds-upnext { display: flex; align-items: stretch; min-height: 64px; border: 1px solid var(--ds-tagb); border-radius: 8px; background: var(--ds-panel); overflow: hidden; }
.ds-unk { display: flex; align-items: center; justify-content: center; gap: 8px; width: 112px; flex: none; background: var(--ds-gold); color: var(--ds-on-gold); font: 800 14px/1 var(--ds-rc); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.ds-ld { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-on-gold); }
.ds-uns { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 18px; }
.ds-uns + .ds-uns { border-left: 1px solid var(--ds-line); }
.ds-uns.ds-wide { flex-grow: 1.3; }
.ds-uns > img { flex: none; width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.ds-unt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ds-unl { display: flex; align-items: center; gap: 6px; overflow: hidden; font: 700 11.5px/1.1 var(--ds-rc); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ds-muted); white-space: nowrap; text-overflow: ellipsis; }
.ds-unl .ds-i { width: 14px; height: 14px; }
.ds-unm { display: flex; align-items: center; gap: 7px; overflow: hidden; font: 800 17px/1.1 var(--ds-rc); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: var(--ds-text); }
.ds-unm .ds-at { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ds-subtle); }
.ds-unm .ds-rec { color: var(--ds-muted); }
.ds-upnext .ds-new1 { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px 8px 18px; }
.ds-new1 p { margin: 0; font: 800 17px/1.2 var(--ds-rc); text-transform: uppercase; color: var(--ds-text); }
.ds-new1 p small { display: block; margin-top: 3px; font: 400 13px/1.35 var(--ds-font); text-transform: none; color: var(--ds-muted); }
/* the bar holds its height until home.js fills it (html.ds-back: this browser has something to resume) */
html.ds-back .ds-upnext .ds-new1 { visibility: hidden; }
.ds-upnext.ds-filled .ds-new1 { display: none; }
@media (max-width: 999px) {
  .ds-upnext { flex-direction: column; min-height: 0; }
  .ds-unk { width: auto; height: 30px; justify-content: flex-start; padding: 0 10px; font-size: 12px; }
  .ds-uns { padding: 10px 12px; }
  .ds-uns + .ds-uns { border-left: 0; border-top: 1px solid var(--ds-line); }
  .ds-uns > img { width: 38px; height: 38px; }
  .ds-unm { font-size: 16px; }
  .ds-upnext .ds-new1 { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .ds-upnext .ds-new1 .ds-btn { width: 100%; }
  .ds-uns.ds-run { display: none; } /* phones: the franchise and the lineup, as drawn */
}

/* a lower third (the games hub's Your All-22 and Your franchise) */
.ds-l3 { display: flex; align-items: stretch; min-height: 92px; border: 1px solid var(--ds-tagb); border-radius: 8px; background: var(--ds-panel); overflow: hidden; }
.ds-l3k { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 118px; flex: none; padding: 0 16px; background: var(--ds-text); color: var(--ds-bg); }
.ds-l3k b { font: 800 18px/1 var(--ds-rc); text-transform: uppercase; }
.ds-l3k small { font: 700 11px/1 var(--ds-rc); letter-spacing: 0.06em; text-transform: uppercase; }
.ds-l3k.ds-teal { background: var(--ds-teal); color: var(--ds-on-teal); }
.ds-l3t { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px 12px; }
.ds-l3t b { display: flex; align-items: center; gap: 8px; font: 800 16px/1.1 var(--ds-rc); text-transform: uppercase; }
.ds-l3t small { font-size: 12.5px; line-height: 1.35; color: var(--ds-muted); }
.ds-l3a { display: flex; align-items: center; padding: 10px 16px 10px 0; }

/* ---------------------------------------------------------------- the front door (/) */
.ds-home { display: flex; flex-direction: column; gap: 24px; padding: 20px 32px 32px; }
.ds-home-main { display: flex; gap: 40px; align-items: flex-start; }
.ds-home-l { width: 456px; flex: none; display: flex; flex-direction: column; }
.ds-home h1 { margin: 0; font: 800 50px/0.95 var(--ds-rc); letter-spacing: 0.005em; text-transform: uppercase; color: var(--ds-text); }
.ds-home h1 span { color: var(--ds-gold); }
.ds-home .ds-kick { margin-bottom: 12px; }
.ds-lede { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--ds-nav); text-wrap: pretty; }
.ds-home-l .ds-sech { margin-top: 28px; margin-bottom: 10px; }
.ds-where { display: flex; flex-direction: column; border: 1px solid var(--ds-line); border-radius: 8px; background: var(--ds-panel); overflow: hidden; }
.ds-wr { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 14px 8px 12px; color: var(--ds-text); text-decoration: none; }
.ds-wr:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-wr:focus-visible { outline-offset: -3px; }
.ds-wr + .ds-wr { border-top: 1px solid var(--ds-line); }
.ds-wb { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--ds-ghost); border-radius: 8px; background: var(--ds-tag); }
.ds-wb .ds-i { width: 20px; height: 20px; }
.ds-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-wt b { display: flex; align-items: center; font: 800 18px/1 var(--ds-rc); letter-spacing: 0.02em; text-transform: uppercase; }
.ds-wt b .ds-new { vertical-align: 0; }
.ds-wt small { font-size: 13px; line-height: 1.3; color: var(--ds-muted); }
.ds-wr .ds-chev { color: var(--ds-subtle); }
.ds-frame { flex: 1; min-width: 0; max-width: 880px; margin: 0; border: 1px solid var(--ds-line); background: var(--ds-sheet); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); }
.ds-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1536 / 1064; }
.ds-cap { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 4px 6px 4px 16px; border-top: 1px solid var(--ds-line); font: 700 12.5px/1.2 var(--ds-rc); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-muted); }
.ds-cap b { color: var(--ds-text); font-weight: 800; }
.ds-cap .ds-lk { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ds-gold); font-weight: 800; text-decoration: none; white-space: nowrap; }
.ds-cap .ds-lk:hover { color: var(--ds-gold-hover); }
.ds-cap .ds-lk .ds-i { width: 15px; height: 15px; }
@media (max-width: 1279px) {
  .ds-home { padding-inline: 24px; }
  .ds-home-main { gap: 28px; }
  .ds-home-l { width: 400px; }
  .ds-home h1 { font-size: 44px; }
}
@media (max-width: 999px) {
  .ds-home { gap: 0; padding: 12px 0 0; }
  .ds-home > .ds-upnext { margin: 0 var(--ds-gutter); }
  .ds-home-main { flex-direction: column; gap: 0; }
  .ds-home-l { width: auto; padding: 18px var(--ds-gutter) 14px; }
  .ds-home h1 { font-size: 32px; }
  .ds-home .ds-kick { margin-bottom: 8px; font-size: 12.5px; }
  .ds-lede, .ds-home-l .ds-sech, .ds-home-l .ds-where { display: none; } /* phones: the strip is the way around */
  .ds-frame { max-width: none; width: 100%; border-inline: 0; box-shadow: none; }
  .ds-cap { justify-content: space-between; min-height: 36px; padding: 4px var(--ds-gutter); font-size: 11.5px; background: var(--ds-sheet); }
  .ds-cap .ds-hide-phone { display: none; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .ds-home > .ds-upnext, .ds-home-l { width: 100%; max-width: 640px; margin-inline: auto; }
  .ds-home-l { padding-inline: 0; }
  .ds-home > .ds-upnext { width: calc(100% - 2 * var(--ds-gutter)); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-mr, .ds-wr { transition: none; }
}