@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); }

/* The bug: light gray with dark text on the light theme, broadcast navy on dark. */
:root {
  --bug: #d7dde4;
  --bug-hover: #ccd3db;
  --bug-line: #bcc5cf;
  --bug-text: #2b323b;        /* dark slate rather than near-black: softer on the gray card */
  --bug-dim: #5d6876;
  --brand: #13233a;          /* the wordmark keeps its navy plate in both themes */
  /* Game page: on the light theme the scorebug is the white card and the info panel under it
     the quieter gray; on dark, the navy scorebug over a lighter panel. */
  --hero-bg: var(--surface);
  --info-bg: var(--bug);
  --hero-border: var(--rule);   /* a white card needs an edge on the light page; navy doesn't */
  --brand-text: #f3f5f8;
  --live: #f2b705;
  --win: #2f9e58;
  --loss: #d64545;
  --live-ink: #1c1600;

  --page: #e9edf1;
  --surface: #ffffff;
  --text: #13233a;
  --muted: #5f6f82;
  --rule: #d3dae2;
  --focus: #1f6feb;

  --cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Dark theme: follows the system unless the theme menu forces one (html[data-theme]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0c1522;
    --surface: #132034;
    --text: #e6ebf1;
    --muted: #8d9db1;
    --rule: #22334b;
    --bug: #1a2d48;
    --bug-hover: #213654;
    --bug-line: #2c4466;
    --bug-text: #f3f5f8;
    --bug-dim: #8fa1b8;
    --hero-bg: var(--bug);
    --info-bg: var(--surface);
    --hero-border: transparent;
    --win: #43c374;
    --loss: #f06767;
    --focus: #6ea8ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0c1522;
  --surface: #132034;
  --text: #e6ebf1;
  --muted: #8d9db1;
  --rule: #22334b;
  --bug: #1a2d48;
  --bug-hover: #213654;
  --bug-line: #2c4466;
  --bug-text: #f3f5f8;
  --bug-dim: #8fa1b8;
  --hero-bg: var(--bug);
  --info-bg: var(--surface);
  --hero-border: transparent;
  --win: #43c374;
  --loss: #f06767;
  --focus: #6ea8ff;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: inherit; }
html, body { margin: 0; }
/* iPhone fixes for sideways page scrolling:
   - Safari "text autosizing" can enlarge some text after layout, pushing one-line pieces
     (names, scores, stat values) past the screen edge. Keep text at the size we set.
   - Nothing may widen the page: anything wider than the screen already scrolls inside its
     own box (tables). The clip is on the page's sections, not <body>: Safari passes body's
     overflow up to the window and then ignores it for touch scrolling. overflow-x: clip,
     unlike hidden, doesn't create a scroll container, so sticky headers keep working.
     (Safari before 16 lacks clip and gets hidden, which only costs the sticky quarter headings.) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--page); }   /* the page's own color from the first paint */
.bar, main, .foot { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body { width: 100%; }
body {
  background: var(--page);
  color: var(--text);
  font: 400 1rem/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.missing { visibility: hidden; }
.pic { display: inline-flex; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  padding: .75rem max(var(--gutter), calc((100% - 76rem) / 2 + var(--gutter)));
  background: var(--page);
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  /* The wordmark is a tiny bug: navy plate with an amber clock tab. The tab is its own shape (not
     an inset shadow), so it can open on hover with crisp edges; the plate itself never moves. */
  --tab: .5rem;
  position: relative; overflow: hidden;
  font: 800 1.75rem/1 var(--cond);
  letter-spacing: -.01em;
  text-decoration: none;
  border-radius: 4px;
  background: var(--brand);
  color: var(--brand-text);
  padding: .3rem calc(.6rem + var(--tab)) .35rem .6rem;
}
.wordmark::after {             /* the clock tab */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: var(--tab);
  background: var(--live);
}
/* the tab's width as one animatable value, so the tab, the plate's padding and the dot's reveal
   all move together (overshoot included) */
@property --tab { syntax: "<length>"; inherits: true; initial-value: 8px; }   /* (an absolute length: rem isn't allowed here) */
.wordmark::before {            /* the live dot: just left of the closed tab, so the navy plate hides it */
  content: ""; position: absolute; z-index: 1; top: 50%; right: .55rem; width: .45rem; height: .45rem; margin-top: -.225rem;
  border-radius: 50%; background: var(--live-ink);
  /* only the part inside the tab shows: the dot sits .55-1rem from the right edge, so as the tab
     opens past it, it's uncovered, as if pulled out from behind the navy */
  clip-path: inset(0 0 0 clamp(0rem, calc(1rem - var(--tab)), .5rem));
}

/* Pull to refresh (touch screens), iOS-style: the page slides down by --pull, revealing an
   activity spinner in the gap above the header. */
.ptr-active .bar, .ptr-active main, .ptr-active .foot { transform: translateY(var(--pull, 0px)); }
.ptr-animate .bar, .ptr-animate main, .ptr-animate .foot { transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.ptr {
  position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 0;
  height: var(--pull, 0px); display: grid; place-items: center; pointer-events: none;
  opacity: 0; overflow: hidden;
}
.ptr-active .ptr { opacity: 1; }
.ptr-animate .ptr { transition: height .75s cubic-bezier(.22, 1, .36, 1); }
.ptr-spinner { width: 1.75rem; height: 1.75rem; }
.ptr-spinner line { stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; transition: opacity .08s linear; }
/* Spinning: spokes shaded from full to faint, the whole thing stepping round like iOS's. */
.ptr-refreshing .ptr-spinner { animation: ptr-spin .8s steps(8) infinite; }
.ptr-refreshing .ptr-spinner line:nth-child(1) { opacity: 1; }
.ptr-refreshing .ptr-spinner line:nth-child(2) { opacity: .25; }
.ptr-refreshing .ptr-spinner line:nth-child(3) { opacity: .3; }
.ptr-refreshing .ptr-spinner line:nth-child(4) { opacity: .4; }
.ptr-refreshing .ptr-spinner line:nth-child(5) { opacity: .5; }
.ptr-refreshing .ptr-spinner line:nth-child(6) { opacity: .62; }
.ptr-refreshing .ptr-spinner line:nth-child(7) { opacity: .75; }
.ptr-refreshing .ptr-spinner line:nth-child(8) { opacity: .88; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* Search in progress: a spinner beside "Searching…", and placeholder cards that pulse. */
.search-loading { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.load-spinner { width: 1.35rem; height: 1.35rem; flex: none; animation: ptr-spin .8s steps(8) infinite; }
.load-spinner line { stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
.load-spinner line:nth-child(1) { opacity: 1; } .load-spinner line:nth-child(2) { opacity: .25; }
.load-spinner line:nth-child(3) { opacity: .3; } .load-spinner line:nth-child(4) { opacity: .4; }
.load-spinner line:nth-child(5) { opacity: .5; } .load-spinner line:nth-child(6) { opacity: .62; }
.load-spinner line:nth-child(7) { opacity: .75; } .load-spinner line:nth-child(8) { opacity: .88; }
.bug.ghost { min-height: 4.75rem; animation: ghost-pulse 1.4s ease-in-out infinite; }
.loading-grid .bug.ghost:nth-child(2) { animation-delay: .15s; } .loading-grid .bug.ghost:nth-child(3) { animation-delay: .3s; }
@keyframes ghost-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .load-spinner, .bug.ghost { animation: none; } }
@media (prefers-reduced-motion: reduce) { .ptr-refreshing .ptr-spinner { animation-duration: 2.4s; } }

/* No transitions until the page has painted (app.js removes .preload): stops the browser
   from animating elements into their starting positions on load. */
.preload *, .preload *::before, .preload *::after { transition: none !important; }

/* ---------- search ---------- */
.search-button { order: 3; }
.search-button .bi { width: 1.1rem; height: 1.1rem; }
.search-button + .theme-toggle { margin-left: 0; }
.search-sheet {
  position: fixed; z-index: 15; left: 0; right: 0; top: 0;
  padding: calc(env(safe-area-inset-top, 0px) + .75rem) max(var(--gutter, 1rem), calc((100% - 76rem) / 2 + clamp(1rem, 4vw, 2.5rem))) .9rem;
  background: var(--page); border-bottom: 1px solid var(--rule); box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .12);
}
.search-form { display: flex; gap: .6rem; align-items: center; }
/* One rounded bar: the scope pill on the left, then the text field. */
.search-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; padding: 0 .35rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
}
.search-field:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.search-form input {
  flex: 1; min-width: 0; align-self: stretch; padding: 0 .75rem 0 .55rem;
  font: 500 1.05rem/1 var(--body); color: var(--text);   /* 1.05rem keeps iOS from zooming in */
  background: none; border: 0; border-left: 1px solid var(--rule); border-radius: 0;
}
.search-form input:focus { outline: none; }
.search-clear {
  flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%;
  font-size: 1.35rem; line-height: 1; color: var(--muted); background: none; cursor: pointer;
}
.search-clear:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.search-clear[hidden] { display: none; }
/* The browser's own clear icon (only some show one) is replaced by ours, everywhere. */
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-scope {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem .3rem .5rem; border: 0; border-radius: 999px;
  font: 700 .9rem/1 var(--cond); letter-spacing: .02em; color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent); cursor: default;
}
.search-scope .scope-icon { width: 1rem; height: 1rem; }
.search-cancel { font: 600 1rem/1 var(--body); color: var(--text); background: none; border: 0; padding: .5rem .25rem; cursor: pointer; }
.search-suggest {
  list-style: none; margin: .45rem 0 0; padding: .3rem; max-width: 46rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .14);
}
.search-suggest .sg {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 8px; cursor: pointer;
  font: 500 1rem/1.25 var(--body); color: var(--muted);
}
.search-suggest .sg strong { color: var(--text); font-weight: 700; }
.search-suggest .sg[aria-selected="true"], .search-suggest .sg:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.search-suggest .sg-icon { width: 1rem; height: 1rem; flex: none; opacity: .7; }
.search-suggest .sg-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hint { margin: .6rem .25rem 0; font-size: .85rem; color: var(--muted); }
/* Same muted color as the hint text, marked as links only by a dotted underline. */
.search-hint a { color: inherit; text-decoration: underline dotted; text-underline-offset: .2em; }
.search-hint a:hover { color: var(--text); }

.search-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.25rem; }
.search-again {
  display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; padding: .55rem 1rem;
  font: 600 1.05rem/1.2 var(--body); color: var(--text); text-align: left;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
}
.search-again .bi { color: var(--muted); }
.search-again span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sorter { margin-left: auto; display: inline-flex; gap: .15rem; padding: .15rem; border-radius: 999px;
          background: color-mix(in srgb, var(--text) 7%, transparent); align-self: center; }
.sorter a { padding: .25rem .65rem; border-radius: 999px; font: 600 .8rem/1 var(--body); color: var(--muted); text-decoration: none; }
.sorter a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.sorter a:not([aria-current="true"]):hover { color: var(--text); }
.search-spelling { margin: -.5rem 0 1rem; font-size: .95rem; color: var(--muted); }
.search-spelling strong { color: var(--text); font-weight: 700; }
.search-spelling a { color: var(--text); text-underline-offset: .2em; }
.grid .season-divider { grid-column: 1 / -1; margin: .6rem 0 -.1rem; font: 700 1.05rem/1.2 var(--cond); color: var(--muted); }
.grid .season-divider:first-child { margin-top: 0; }
.bug.canceled, .bug.postponed { opacity: .62; }
.bug.canceled .status .big, .bug.postponed .status .big { font-size: 1.05rem; }
.more-games { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; margin-top: .75rem;
              color: var(--muted); font-size: .9rem; }
.more-retry { font: inherit; color: var(--text); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; }
.search-notice { margin: -.5rem 0 1.25rem; padding: .6rem .8rem; border-left: 3px solid var(--live); background: var(--surface); border-radius: 0 6px 6px 0; font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .4rem .3rem .65rem;
  font: 600 .85rem/1 var(--body); color: var(--text); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
}
.chip:not(:has(.chip-x)) { padding-right: .65rem; }
.chip-x {
  display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-size: .95rem; line-height: 1; color: var(--muted); text-decoration: none;
}
.chip-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.chip.removed { color: var(--muted); background: none; border-style: dashed; }
.chip.removed s { text-decoration-thickness: 1px; }

/* Team-season result: a card in the scorebug's style, linking to that season's team page. */
.season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .6rem; }
.season-card { display: block; background: var(--bug); color: var(--bug-text); border-radius: 6px; text-decoration: none; overflow: hidden; }
.season-card:hover { background: var(--bug-hover); }
.season-head { display: grid; grid-template-columns: 1.75rem 1fr auto auto; align-items: center; gap: .6rem; padding: .7rem .75rem .7rem .6rem; }
.season-head .logo { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.season-title { font: 600 1.3rem/1.1 var(--cond); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-title strong { font-weight: 800; }
.season-rec { font: 700 1.2rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.season-head .chev { color: var(--bug-dim); }
.season-games { list-style: none; margin: 0; padding: .1rem 0 .35rem; border-top: 1px solid var(--bug-line); }
.season-game { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .5rem; align-items: baseline; padding: .3rem .75rem .3rem .6rem; font-size: .9rem; }
.season-game .res { font: 800 .95rem/1 var(--cond); text-align: center; }
.season-game.r-W .res { color: var(--win); }
.season-game.r-L .res { color: var(--loss); }
.season-game .what { color: var(--bug-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-game .what-note { color: var(--bug-dim); }
.season-game .sc { font: 600 .95rem/1 var(--cond); color: var(--bug-dim); font-variant-numeric: tabular-nums; }
.wx-line { display: inline-flex; align-items: center; gap: .3rem; }
.wx-line .bi { width: 1em; height: 1em; flex: none; }
.wx-line .temp { font-weight: 700; }
.bug .player-line { color: var(--bug-text); font-weight: 600; }
.bug .game-note + .player-line { border-top: 0; padding-top: 0; }
.player-card { background: var(--bug); color: var(--bug-text); border-radius: 6px; overflow: hidden; grid-column: 1 / -1; }
.player-span { font: 600 1rem/1 var(--cond); color: var(--bug-dim); }
.player-card .season-head { grid-template-columns: 1.75rem 1fr auto; }
.player-seasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bug-line); }
.player-seasons li { padding: .55rem .75rem .6rem .6rem; }
.player-seasons li + li { border-top: 1px solid var(--bug-line); }
.ps-head { display: flex; align-items: baseline; gap: .35rem; color: var(--bug-text); text-decoration: none; font: 600 1.1rem/1.2 var(--cond); }
.ps-head:hover { text-decoration: underline; }
.ps-games { margin-left: auto; font: 500 .8rem/1 var(--body); color: var(--bug-dim); }
.coach-seasons { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .35rem; }
.coach-season { display: inline-flex; gap: .35rem; color: var(--bug-text); text-decoration: none; font-size: .9rem; font-variant-numeric: tabular-nums; }
.coach-season .rec { color: var(--bug-dim); }
.coach-season:hover span:first-child { text-decoration: underline; }
.ps-line { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; margin-top: .25rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ps-label { color: var(--bug-dim); font: 600 .95rem/1.3 var(--cond); }
/* Answer card: the summary above a team's search results. */
.answer-block { margin-bottom: 1.5rem; }
.answer-card { background: var(--bug); color: var(--bug-text); border-radius: 6px; overflow: hidden; }
.ans-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .85rem 1rem .8rem .85rem; }
.ans-head .logo { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.ans-title { display: grid; gap: .15rem; min-width: 0; }
.ans-title strong { font: 800 1.45rem/1.1 var(--cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-count { font-size: .85rem; color: var(--bug-dim); }
.ans-record { font: 800 2.2rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.ans-count-big { display: grid; justify-items: end; line-height: 1; }
.ans-count-big strong { font: 800 2.2rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.ans-count-big span { font: 600 .9rem/1.2 var(--cond); color: var(--bug-dim); }
.ans-overall strong { font: 700 1.05rem/1 var(--cond); margin-right: .15rem; }
.ans-headline { margin: 0; padding: .65rem 1rem; border-top: 1px solid var(--bug-line); font: 700 1.2rem/1.25 var(--cond); }
.ans-rows { display: grid; grid-template-columns: 7.5rem 1fr; margin: 0; border-top: 1px solid var(--bug-line); }
.ans-rows dt, .ans-rows dd { margin: 0; padding: .45rem 1rem; border-bottom: 1px solid var(--bug-line); }
.ans-rows dt { font: 600 .95rem/1.4 var(--cond); color: var(--bug-dim); padding-right: 0; }
.ans-rows dd { min-width: 0; }
.ans-rows dt:nth-last-child(2), .ans-rows dd:last-child { border-bottom: 0; }
.ans-streak { font: 700 1.05rem/1.3 var(--cond); }
.ans-streak.r-W, .ans-game.r-W .res { color: var(--win); }
.ans-streak.r-L, .ans-game.r-L .res { color: var(--loss); }
.ans-game { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; color: var(--bug-text); text-decoration: none; }
.ans-game:hover .opp { text-decoration: underline; }
.ans-game .res { font: 800 1rem/1 var(--cond); }
.ans-game .sc { font: 700 1rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.ans-game .when { color: var(--bug-dim); font-size: .85rem; }
@media (max-width: 34rem) {
  .ans-rows { grid-template-columns: 5.75rem 1fr; }
  .ans-rows dt, .ans-rows dd { padding: .45rem .75rem; }
  .ans-record { font-size: 1.8rem; }
}
.team-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.team-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem .5rem .6rem; background: var(--bug); color: var(--bug-text); border-radius: 6px; text-decoration: none; font: 700 1.1rem/1 var(--cond); }
.team-chip:hover { background: var(--bug-hover); }

/* Bootstrap Icons: text-sized by default. */
.bi { width: 1em; height: 1em; flex: none; }

/* ---------- sport menu ---------- */
/* Just the icon: no border or background, sized to the header's 2.5rem row. */
.menu-button {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  color: var(--text); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.menu-button:hover { color: var(--muted); }
.menu-button .menu-bi { width: 2.5rem; height: 2.5rem; }
/* The header's 1.5rem column gap plus the icon's own built-in margin left too much space
   before the logo; pull the logo in so it sits about a quarter-inch from the lines. */
.menu-button { margin-right: -1.1rem; }
.menu-icon { display: none; }
.wordmark { margin-right: auto; }

.drawer-scrim {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(8, 14, 24, .45); opacity: 0; transition: opacity .25s ease;
}
.drawer-open .drawer-scrim { opacity: 1; }
.drawer {
  position: fixed; z-index: 21; top: 0; bottom: 0; left: 0;
  width: min(20rem, 85vw); overflow-y: auto;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--page); border-right: 1px solid var(--rule);
  box-shadow: 0 0 2rem rgba(0, 0, 0, .25);
  /* Closed = off-screen AND invisible. visibility only switches back to hidden after the
     slide-out finishes, so closing still animates, but a closed menu can never be seen, even
     if a browser animates its first frame (iOS Safari briefly showed it on page load). */
  transform: translateX(-105%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.drawer-open .drawer { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.drawer-open, .drawer-open body { overflow: hidden; }   /* the page doesn't scroll behind the menu */
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-scrim { transition: none; } }

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .5rem 1.25rem; }
.drawer-head { padding-top: .9rem; }   /* the wordmark here matches the one in the header */
.drawer-close {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  color: var(--text); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.drawer-close:hover { border-color: var(--rule); }
.drawer-close .bi { width: 1.1rem; height: 1.1rem; }
/* Groups use the scoreboard's day-heading look: heavy type over a rule. */
.drawer-group { padding: .75rem 1.25rem .25rem; }
.drawer-group h3 {
  margin: 0 0 .4rem; padding-bottom: .35rem;
  font: 800 1.2rem/1.1 var(--cond); border-bottom: 3px solid var(--day-rule);
}
.drawer-group ul { list-style: none; margin: 0; padding: 0; }
.drawer-group a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .6rem; margin: 0 -.6rem; border-radius: 6px;
  font: 600 1.05rem/1 var(--body); color: var(--text); text-decoration: none;
}
.drawer-group a:hover { background: var(--surface); }
.drawer-group a.current { background: var(--surface); box-shadow: inset 3px 0 0 var(--live); }
.drawer-group h3 { display: flex; align-items: center; gap: .5rem; }
.drawer-group h3 .sport-bi { width: 1.15rem; height: 1.15rem; }
.drawer-group a .sport-name { flex: 1; }
.drawer-group a .bi:last-child:not(.sport-bi) { color: var(--muted); }

.controls { display: flex; align-items: center; gap: .75rem; }
/* Sun/moon toggle: shows the theme a click switches to. Far right on wide screens;
   beside the wordmark on phones, where the menus wrap to their own row. */
.theme-toggle {
  order: 3; display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--muted); }
.theme-toggle .icon { width: 1.25rem; height: 1.25rem; grid-area: 1 / 1; }
.theme-toggle .moon { fill: currentColor; }
.theme-toggle .sun { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .sun circle { fill: currentColor; stroke: none; }
.theme-toggle .sun, .theme-toggle.is-dark .moon { display: none; }
.theme-toggle.is-dark .sun { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle .icon { transition: transform .3s ease; }
  .theme-toggle:active .icon { transform: rotate(-30deg); }
}
.field { display: flex; }
select, .stepper button {
  font: 600 1rem/1 var(--body);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  min-height: 2.5rem;
}
/* (a line height of 1 left no room below the baseline: Firefox clipped g, p, y in "Big Ten",
   "Big Sky", "Patriot"; the box's height is set by min-height either way) */
select { padding: 0 2rem 0 .75rem; appearance: none; line-height: 1.3;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem center, right .7rem center;
  background-size: .3rem .3rem; background-repeat: no-repeat; }
.stepper { display: inline-flex; align-items: center; gap: .25rem; }
.stepper button { width: 2.5rem; font-size: 1.4rem; cursor: pointer; }
.stepper button:disabled { opacity: .35; cursor: default; }
#period-label { min-width: 7.5rem; text-align: center; font: 600 1.15rem/1 var(--cond); display: flex; justify-content: center; }

/* ---------- main ---------- */
main {
  flex: 1;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 2rem;
}
main:focus { outline: none; }

.group + .group { margin-top: 2.25rem; }
/* Day headers match the team headers on game pages: heavy condensed type over a rule. */
.group h2 {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .75rem;
  margin: 0 0 .85rem; padding-bottom: .45rem;
  font: 800 1.45rem/1.1 var(--cond);
  border-bottom: 3px solid var(--day-rule);
}
:root { --day-rule: var(--text); }
:root[data-theme="dark"] { --day-rule: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --day-rule: var(--muted); } }
.group h2 .count { display: inline-flex; align-items: center; gap: .6rem; font: 500 .95rem/1 var(--body); color: var(--muted); }
.live-count { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--text); }
.live-count::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--live); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: .6rem;
}

/* ---------- the bug ---------- */
/* Cards are two-toned like the game page: the scorebug's color (white on the light page, navy in
   dark) with its edge, and a game's name strip below in the darker info-panel color. */
.bug {
  display: grid;
  grid-template-columns: 1fr 5.25rem;
  background: var(--hero-bg);
  border: 1px solid var(--hero-border);
  color: var(--bug-text);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
}
a.bug:hover .teams { background: var(--bug-hover); }
/* The two team rows own the card's minimum height, so lines added below a card (bowl name,
   player stats) never squeeze them together. */
.teams { display: grid; grid-template-rows: auto auto; align-content: center; row-gap: .2rem; padding: .45rem 0; min-height: 4.75rem; box-sizing: border-box; }
.team {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: 0 .75rem 0 .6rem;
}
.team .logo { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.team .logo.missing { visibility: hidden; }
.pic { display: inline-flex; flex: none; }
.team .name {
  font: 600 1.28rem/1.2 var(--cond);  /* 1.2 so descenders (g, y, p) aren't clipped by the ellipsis overflow */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
/* The name truncates; rank and record stay whole beside it. */
.team .name { display: flex; align-items: baseline; }
.team .name .full, .team .name a.team-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.team .name a.team-link { display: flex; align-items: baseline; }
.team .rec { flex: none; margin-left: .4rem; font: 500 .8rem/1 var(--body); color: var(--bug-dim); font-variant-numeric: tabular-nums; }
.hero .team .rec { font-size: .95rem; }
.team .rank { font: 600 .8rem/1 var(--body); color: var(--bug-dim); margin-right: .3rem; vertical-align: .15em; }
.team .score { font: 700 1.45rem/1.1 var(--cond); font-variant-numeric: tabular-nums; text-align: right; min-width: 2ch; }
/* Bowl / named game (or neutral site) along the bottom of a card. */
.bug .game-note {
  grid-column: 1 / -1;
  padding: .3rem .75rem .35rem .6rem;
  background: var(--info-bg);
  border-top: 1px solid var(--bug-line);
  font: 500 .78rem/1.2 var(--body); color: var(--bug-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bug.final .team.lost .name,
.bug.final .team.lost .score { color: var(--bug-dim); }

.status {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: .2rem; padding: .4rem .3rem;
  border-left: 1px solid var(--bug-line);
  text-align: center;
  font: 600 .95rem/1.1 var(--cond);
  color: var(--bug-dim);
}
.status .big { font: 700 1.15rem/1 var(--cond); color: var(--bug-text); font-variant-numeric: tabular-nums; }
.status .small { font: 500 .78rem/1.15 var(--body); }
.status .small.line { white-space: nowrap; }
/* Team page: this team's result on finished games. */
.bug.result-win  { box-shadow: inset 4px 0 0 var(--win); }
.bug.result-loss { box-shadow: inset 4px 0 0 var(--loss); }
.bug.result-tie  { box-shadow: inset 4px 0 0 var(--bug-dim); }
.bug.result-live { box-shadow: inset 4px 0 0 var(--live); }
/* the name strip has its own background, which would cover the card's edge: draw it there too */
.bug.result-win .game-note  { box-shadow: inset 4px 0 0 var(--win); }
.bug.result-loss .game-note { box-shadow: inset 4px 0 0 var(--loss); }
.bug.result-tie .game-note  { box-shadow: inset 4px 0 0 var(--bug-dim); }
.bug.result-live .game-note { box-shadow: inset 4px 0 0 var(--live); }
/* and the team rows, which take a background of their own on hover (it covered the edge) */
.bug.result-win .teams  { box-shadow: inset 4px 0 0 var(--win); }
.bug.result-loss .teams { box-shadow: inset 4px 0 0 var(--loss); }
.bug.result-tie .teams  { box-shadow: inset 4px 0 0 var(--bug-dim); }
.bug.result-live .teams { box-shadow: inset 4px 0 0 var(--live); }
/* the line between the card and its strip: drawn as its own line (not a border) so it can start
   after a colored edge instead of cutting across it */
.bug .game-note { position: relative; border-top: 0; }
.bug .game-note::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--bug-line); }
.bug:is(.result-win, .result-loss, .result-tie, .result-live) .game-note::before { left: 4px; }
.bug.live .status { background: var(--live); color: var(--live-ink); border-left-color: var(--live); }
.bug.live .status .big { color: var(--live-ink); }
/* under two minutes left in the 4th quarter: the clock box goes red */
.bug.live .status.crunch { background: #d4202a; color: #fff; border-left-color: #d4202a; }
.bug.live .status.crunch .big, .bug.live .status.crunch .small { color: #fff; }

/* Score just changed: one brief flash on the number, nothing else moves. */
.score.bumped { animation: bump 1.6s ease-out; }
@keyframes bump { 0% { color: var(--live); } 100% { color: inherit; } }

/* ---------- game view ---------- */
.back { display: inline-block; margin-bottom: 1rem; color: var(--muted); font-weight: 600; text-decoration: none; }
.back:hover { color: var(--text); }
.hero .bug { grid-template-columns: 1fr 7.5rem; min-height: 8.5rem; background: var(--hero-bg); border: 1px solid var(--hero-border); border-bottom: 0; }
.hero .teams { padding: .85rem 0; row-gap: .55rem; }
.hero .team { grid-template-columns: 2.5rem 1fr auto; padding: 0 1.25rem 0 1rem; gap: .9rem; }
.hero .team .logo { width: 2.5rem; height: 2.5rem; }
.hero .team .name { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; }
.hero .team .score { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; }
.hero .status .big { font-size: 1.6rem; font-weight: 800; }
.hero .status .small { font-size: .9rem; }

/* Team names link to team pages without looking like links until hovered. */
a.team-link { color: inherit; text-decoration: none; }
a.team-link:hover { text-decoration: underline; text-underline-offset: .15em; }

/* Team page header: same heavy condensed type and team-colored rule as box score team headers. */
/* The team's header: a card like the game page's scoreboard (white on the light page, navy in
   dark), with the team's color along the bottom edge. */
.team-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
  padding: 1rem 1.25rem; border-radius: 6px;
  background: var(--hero-bg); color: var(--bug-text);
  border: 1px solid var(--hero-border); border-bottom: 3px solid var(--team-line, var(--text));
}
/* With season stats, the header sits on the stats panel like the game page's scoreboard on its
   info panel: shared width, joined corners, the panel in the info color. */
.team-card { margin: 0; }
.team-card.with-stats .team-head { border-radius: 6px 6px 0 0; }
.team-stats {
  background: var(--info-bg); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 6px 6px;
  padding: .85rem 1.25rem 1rem;
}
.team-stats-title {
  display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .6rem;
  font: 600 1rem/1 var(--cond); color: var(--muted);
}
.team-stats .compare { margin: 0; }       /* the panel's padding spaces it now */
/* The same panel standing alone (a game page's team stats). */
.stat-panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;   /* white on the light page */
  padding: 1rem 1.25rem 1rem;
}
.stat-panel .compare { margin: 0; }
.stat-panel + * { margin-top: 1.5rem; }
.stat-panel-title { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .75rem; font: 600 1.35rem/1.1 var(--cond); color: var(--text); }   /* like the section headings */
.team-stats-title .sub { font: 500 .85rem/1 var(--body); color: var(--muted); opacity: .8; }
.team-head .team-title .record { color: var(--bug-dim); }
.team-head .team-title .record strong { color: var(--bug-text); }
.team-head .team-title h1 .rank { color: var(--bug-dim); }
.team-logo { width: 3.5rem; height: 3.5rem; object-fit: contain; flex: none; }
.team-title { flex: 1; min-width: 12rem; }
.team-title h1 { margin: 0; font: 800 clamp(1.8rem, 5vw, 2.4rem)/1.05 var(--cond); }
.team-title h1 .rank { font: 600 1rem/1 var(--body); color: var(--muted); margin-right: .4rem; vertical-align: .35em; }
.team-title .record { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem .45rem; color: var(--muted); }
.team-title .record strong { color: var(--text); font-weight: 600; }
.team-head .dot, .record .dot { opacity: .6; }
.section-head .sub { color: var(--muted); font-size: .9rem; margin-right: auto; margin-left: .6rem; }

/* Game info panel: tucked under the scorebug (shares its width and corner radius), with
   the same condensed headings used across the site. */
.hero .bug { border-radius: 6px 6px 0 0; }
.hero:not(:has(+ .game-info)) .bug { border-radius: 6px; border-bottom: 1px solid var(--hero-border); }
.game-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  background: var(--info-bg); border: 1px solid var(--rule); border-top: 1px solid var(--bug-line);
  border-radius: 0 0 6px 6px;
}
.info-col { padding: .8rem 1rem .9rem; min-width: 0; }
.info-col + .info-col { border-left: 1px solid var(--rule); }
.info-col h3 {
  display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem;
  font: 600 1rem/1 var(--cond); color: var(--muted);
}
.info-col h3 .bi { width: .95rem; height: .95rem; }
.info-main { margin: 0; font: 600 1.05rem/1.3 var(--body); color: var(--text); }
.info-main .temp { font: 700 1.3rem/1 var(--cond); }
.info-detail { margin: .2rem 0 0; font-size: .9rem; line-height: 1.35; color: var(--muted); }
.info-detail .est {
  margin-left: .4rem; padding: .05rem .4rem; border: 1px solid var(--rule); border-radius: 999px;
  font-size: .75rem; cursor: help; white-space: nowrap;
}
@media (max-width: 34rem) {
  /* Phones: one compact row per item, the label in a narrow column on the left and the
     content beside it, in smaller type, so the panel doesn't dominate the screen. */
  .game-info { grid-template-columns: 1fr; }
  .info-col + .info-col { border-left: 0; border-top: 1px solid var(--rule); }
  .info-col {
    display: grid; grid-template-columns: 5.4rem 1fr; column-gap: .5rem; align-items: baseline;
    padding: .5rem .8rem;
  }
  .info-col h3 { grid-row: span 2; margin: 0; font-size: .85rem; align-self: start; padding-top: .15rem; }
  .info-col h3 .bi { width: .85rem; height: .85rem; }
  .info-main { font-size: .92rem; }
  .info-main .temp { font-size: 1.05rem; }
  .info-detail { margin-top: .1rem; font-size: .8rem; }
}

#period-label { gap: .5rem; }

/* Row above the scorebug: back link left, download menu right (outside the card). */
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; min-height: 2rem; }
.game-top .back { margin-bottom: 0; }
.dl { position: relative; z-index: 3; }
.dl-button {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.dl-button .bi { width: 1.15rem; height: 1.15rem; }
.dl-button:hover, .dl.open .dl-button { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.dl-menu {
  position: absolute; top: 100%; right: 0; min-width: 13rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .18);
  opacity: 0; visibility: hidden; transform: translateY(-.25rem);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.dl.open .dl-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .12s ease, transform .12s ease; }
@media (hover: hover) {
  .dl:hover .dl-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .12s ease, transform .12s ease; }
}
.dl-menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem;
  font: 600 .95rem/1 var(--body); color: var(--text); text-align: left;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.dl-menu button:hover, .dl-menu button:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); }
.dl-menu button .bi { width: 1.05rem; height: 1.05rem; color: var(--muted); }
.dl-menu .dl-kind { margin-left: auto; font: 500 .75rem/1 var(--body); color: var(--muted); }

/* Period scores inside the hero bug: small, dim, unlabeled; overtime set off by a rule. */
.hero .team.with-ls { grid-template-columns: 2.75rem minmax(0, 1fr) auto auto; }
.ls { display: flex; align-items: center; font: 600 1.05rem/1 var(--cond); font-variant-numeric: tabular-nums; color: var(--bug-dim); }
.ls .p { width: 1.9rem; text-align: center; }
.ls .p.ot.first { margin-left: .35rem; border-left: 1px solid var(--bug-line); }
.ls .p.now { color: var(--bug-text); }
.hero .team.with-ls .score { text-align: right; min-width: var(--score-w, 2ch); }
.name .abbr { display: none; }

.block { margin-top: 2rem; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .25rem;
}
.section-head h2 { margin: 0; font: 600 1.35rem/1.1 var(--cond); }
.head-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* Two-option switch (All plays / Scoring plays), same look as the order toggle. */
.segmented { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.segmented button {
  font: 600 .9rem/1 var(--body); color: var(--muted); background: none; border: 0;
  padding: .5rem .7rem; cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--rule); }
.segmented button.on { color: var(--text); background: var(--surface); }
.segmented button:not(.on):hover { color: var(--text); }
.toggle { font: 600 .9rem/1 var(--body); color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 6px; padding: .5rem .7rem; cursor: pointer; }
.toggle:hover { color: var(--text); }

.period { margin-top: .75rem; }
.period h3 {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--bar-h, 4.1rem)); z-index: 1;
  margin: 0; padding: .45rem 0;
  background: var(--page);
  font: 600 1.1rem/1 var(--cond); color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.plays { list-style: none; margin: 0; padding: 0; }
.play {
  display: grid;
  grid-template-columns: 3.4rem 1.5rem 1fr auto;
  gap: .7rem;
  align-items: start;
  padding: .6rem .6rem;
  border-bottom: 1px solid var(--rule);
}
.play .clock { font: 600 1rem/1.4 var(--cond); color: var(--muted); font-variant-numeric: tabular-nums; }
.tlogo { width: 1.5rem; height: 1.5rem; object-fit: contain; flex: none; }
.play .tlogo { margin-top: .05rem; }
.play .text { min-width: 0; overflow-wrap: anywhere; }
/* Running score: each team's short name beside its number (away above home, like the
   scorebug); on scoring plays the side that scored is in full-strength bold. */
.play .run { display: grid; justify-items: end; row-gap: .1rem; font: 600 .95rem/1.15 var(--cond); font-variant-numeric: tabular-nums; color: var(--muted); }
.run-row { display: flex; align-items: baseline; gap: .4rem; }
.run-team { font: 500 .75rem/1 var(--body); color: var(--muted); white-space: nowrap; }
.run-pts { min-width: 2ch; text-align: right; }
.play.scoring .text { font-weight: 500; }
.play.marker { padding-top: .45rem; padding-bottom: .45rem; }
.play.marker .text { font-size: .85rem; color: var(--muted); }
.play.scoring .run-row.scored .run-pts { color: var(--text); font-weight: 800; }
.play.scoring .run-row.scored .run-team { color: var(--text); }
.play.scoring { box-shadow: inset 3px 0 0 var(--live); }
.drive > .drive-title { font: 600 .95rem/1.3 var(--body); color: var(--muted); padding: .8rem .6rem .25rem; }


.expand {
  display: block; width: 100%; margin-top: .5rem; padding: .7rem;
  font: 600 .95rem/1 var(--body); color: var(--text);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; cursor: pointer;
}
.expand:hover { border-color: var(--muted); }

/* ---------- tables: line score + box score ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.stats {
  border-collapse: collapse; width: auto;
  font: 500 .95rem/1.2 var(--body); font-variant-numeric: tabular-nums;
}
.stats td, .stats thead th:not(.who) { min-width: 3.2rem; }
.stats th, .stats td { padding: .45rem .55rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.stats thead th { font: 600 .9rem/1 var(--cond); color: var(--muted); }
.stats .who {
  text-align: left; position: sticky; left: 0; z-index: 1;
  background: var(--page); font-weight: 600; min-width: 9rem;
}
.stats thead .who { background: var(--page); }
.stats .pos { margin-left: .4rem; font-weight: 500; font-size: .8rem; color: var(--muted); }
.stats tr.starter .who { box-shadow: inset 2px 0 0 var(--muted); }
.stats tbody tr:hover th, .stats tbody tr:hover td { background: var(--surface); }

.box-team { margin-top: 1rem; --team: var(--text); }
.box-team { --team-line: var(--team); }  /* already chosen to contrast with the theme */
/* Each stat category: a clear title with a team-colored marker, a tinted header row,
   and real space between categories. */
.stat-block + .stat-block { margin-top: 1.6rem; }
.box-team h3 + .stat-block { margin-top: 1.1rem; }
.stat-title {
  margin: 0 0 .4rem; padding-left: .55rem;
  font: 800 1.15rem/1.1 var(--cond); color: var(--text);
  border-left: 4px solid var(--team-line);
}
.box-team .stats thead th,
.box-team .stats thead .who { background: color-mix(in srgb, var(--team) 12%, var(--page)); }

/* ---------- team comparison ---------- */
.compare { margin: .75rem 0 1.5rem; }
.compare.collapsed .compare-row.extra { display: none; }
.compare-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule); }
.team-key { display: inline-flex; align-items: center; gap: .5rem; font: 800 1.2rem/1 var(--cond); }
.compare-row {
  display: grid;
  grid-template-columns: 4rem 1fr 1fr 4rem;
  grid-template-areas: "label label label label" "lv lbar rbar rv";
  align-items: center;
  column-gap: 2px;
  padding: .55rem 0 .45rem;
  border-bottom: 1px solid var(--rule);
}
.compare-row .label { grid-area: label; text-align: center; font: 500 .9rem/1.2 var(--body); color: var(--muted); margin-bottom: .3rem; }
.compare-row .val { font: 600 1.15rem/1 var(--cond); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.compare-row .val.left { grid-area: lv; text-align: left; }
.compare-row .val.right { grid-area: rv; text-align: right; }
.compare-row .val.lead { color: var(--text); font-weight: 800; }
.track { display: flex; height: .7rem; background: var(--rule); }
.track.left { grid-area: lbar; justify-content: flex-end; border-radius: 4px 0 0 4px; }
.track.right { grid-area: rbar; justify-content: flex-start; border-radius: 0 4px 4px 0; }
.track .fill { display: block; height: 100%; background: var(--c); }
.track.left .fill { border-radius: 4px 0 0 4px; }
.track.right .fill { border-radius: 0 4px 4px 0; }
@media (prefers-reduced-motion: no-preference) {
  .track .fill { transition: width .4s ease-out; }
}
.stat-block.collapsed tr.extra { display: none; }
.stats thead th.ranked { color: var(--text); }
.more {
  margin: .35rem 0 0; padding: .35rem 0;
  font: 600 .9rem/1 var(--body); color: var(--muted);
  background: none; border: 0; cursor: pointer;
}
.more:hover { color: var(--text); text-decoration: underline; }
/* Box-score tables span the content width (like the play-by-play) and track the window;
   the name column hugs its content and the stat columns share the rest. Tables too wide
   for a small screen scroll inside their own box. */
.box-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.box-grid .stats { width: 100%; }
.box-grid .stats .who { width: 1%; padding-right: 1.25rem; }  /* name column hugs the longest name */
/* Stat columns share the remaining width; centered so numbers sit under their headers. */
.box-grid .stats td,
.box-grid .stats thead th:not(.who) { text-align: center; }
.box-grid .stat-block { min-width: 0; }
.box-team h3 {
  display: flex; align-items: center; gap: .55rem; margin: 0; padding: .6rem 0 .5rem;
  font: 800 1.45rem/1 var(--cond);
  border-bottom: 3px solid var(--team-line);
}
.box-team + .box-team { margin-top: 2rem; }

/* ---------- states ---------- */
.note { color: var(--muted); padding: 2rem 0; max-width: 40rem; }
.note strong { color: var(--text); }

.foot { padding: 1rem clamp(1rem, 4vw, 2.5rem); color: var(--muted); font-size: .85rem; text-align: center; }

@media (max-width: 34rem) {
  .controls { flex: 1 1 100%; order: 4; margin-left: 0; }
  #period-label { flex: 1; }
  #period-label select { flex: 1; min-width: 0; }   /* season + week share the row */
  .theme-toggle { margin-left: auto; }
  .controls .field, .controls .field select { flex: 1; width: 100%; }
  .stepper { flex: 1; justify-content: space-between; }
  .stepper select { width: 100%; }
  .play { grid-template-columns: 2.9rem 1.25rem 1fr auto; gap: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .score.bumped { animation: none; }
}

/* Live play-by-play: a pulsing red dot by the heading, and new plays briefly highlighted as they
   arrive. Reduced motion: a steady dot, and new plays keep a soft tint until the next update. */
.live-badge {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: .7rem; vertical-align: .15em;
  font: 700 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #d4202a;
}
:root[data-theme="dark"] .live-badge { color: #ff5a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .live-badge { color: #ff5a5f; } }
.live-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #e0242c; animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 36, 44, .6); }
  70% { box-shadow: 0 0 0 .55rem rgba(224, 36, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 36, 44, 0); }
}
.play.fresh { animation: play-fresh 2.6s ease-out; }
@keyframes play-fresh {
  from { background: color-mix(in srgb, #f2c200 30%, transparent); }
  to { background: transparent; }
}
/* Dark mode: on navy the ring fades out much sooner, so a brighter dot and a stronger, wider
   ring (light mode stays as it is). */
:root[data-theme="dark"] .live-dot { background: #ff3b44; animation-name: live-pulse-dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .live-dot { background: #ff3b44; animation-name: live-pulse-dark; } }
@keyframes live-pulse-dark {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 68, .9), 0 0 .35rem rgba(255, 59, 68, .55); }
  70% { box-shadow: 0 0 0 .7rem rgba(255, 59, 68, 0), 0 0 .35rem rgba(255, 59, 68, .3); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 68, 0), 0 0 .35rem rgba(255, 59, 68, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .play.fresh { animation: none; background: color-mix(in srgb, #f2c200 14%, transparent); }
}

/* Restart button for simulated games, beside search: in the live clock's yellow and black, so
   it's impossible to miss that simulation is on. */
.sim-reset { order: 3; background: var(--live); color: var(--live-ink); border-color: var(--live); }
.sim-reset:hover { border-color: var(--live-ink); }
/* on phones round buttons push right; with the restart button doing that, search stays beside it */
.sim-reset + .search-button { margin-left: 0; }
.sim-reset .bi { width: 1.05rem; height: 1.05rem; }
.sim-reset.spinning .bi { animation: sim-spin .6s ease-in-out; }
@keyframes sim-spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .sim-reset.spinning .bi { animation: none; } }

/* The field (live games): a voxel-style slab under the scorebug, with the situation above it. */
.field-panel {
  margin-top: 1.5rem; padding: .85rem 1rem .6rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
}
.field-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  margin-bottom: .35rem; padding: 0 .25rem; font: 600 1.15rem/1.2 var(--cond);
}
.field-head .f-down { font-weight: 800; font-size: 1.35rem; text-align: center; }
.field-head .f-poss { display: inline-flex; align-items: center; gap: .45rem; justify-self: start; }
.field-head .f-spot { justify-self: end; }
.field-head .f-dot { width: .7rem; height: .7rem; border-radius: 2px; background: var(--poss, var(--text)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.field-head .f-spot { color: var(--muted); font-weight: 600; }
.field-art svg { display: block; width: 100%; height: auto; }
/* the wide drawing, or the deeper narrow one when the panel is narrow (switches as you resize) */
.field-art { container-type: inline-size; }
.field-art .fa-narrow { display: none; }
@container (max-width: 560px) {
  .field-art .fa-wide { display: none; }
  .field-art .fa-narrow { display: block; }   /* (as specific as the default rule above, so it wins) */
}

:root {
  --f-turf-a: #6cbf55; --f-turf-b: #61b14b; --f-edge: #3f7f32; --f-line: rgba(255, 255, 255, .85);
  --f-tile: rgba(255, 255, 255, .13); --f-num: rgba(255, 255, 255, .92);
}
:root[data-theme="dark"] {
  --f-turf-a: #2f6a37; --f-turf-b: #2a6032; --f-edge: #183d1f; --f-line: rgba(255, 255, 255, .7);
  --f-tile: rgba(255, 255, 255, .08); --f-num: rgba(255, 255, 255, .8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --f-turf-a: #2f6a37; --f-turf-b: #2a6032; --f-edge: #183d1f; --f-line: rgba(255, 255, 255, .7);
    --f-tile: rgba(255, 255, 255, .08); --f-num: rgba(255, 255, 255, .8);
  }
}
.field-art .f-turf-a { fill: var(--f-turf-a); }
.field-art .f-turf-b { fill: var(--f-turf-b); }
.field-art .f-edge { fill: var(--f-edge); }
.field-art .f-ez { opacity: .92; }
.field-art .f-tile { stroke: var(--f-tile); stroke-width: 1; }
.field-art .f-line { stroke: var(--f-line); stroke-width: 2; }
.field-art .f-goal { stroke: #fff; stroke-width: 4.5; }
.field-art .f-lace { fill: #fff; opacity: .9; }
.field-art .f-num { fill: var(--f-num); }
.field-art .f-ez-name { fill: rgba(255, 255, 255, .92); font-family: var(--cond); font-weight: 800; text-anchor: middle; dominant-baseline: central; letter-spacing: .15px; }
.field-art .f-scrim { stroke: #3d8bff; stroke-width: 4; }
.field-art .f-togain.fourth { stroke: #ff2731; }
.field-art .f-line-halo { stroke: #fff; stroke-width: 8; }
.field-art .f-togain { stroke: var(--live); stroke-width: 4; }
.field-art .f-arrow { fill: #fff; stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
/* voxels: each cube's front, top (lit) and side (shaded) faces */
.field-art .f-post-front { fill: var(--live); }
.field-art .f-post-top { fill: #ffd84d; }
.field-art .f-post-side { fill: #c48f00; }
.field-art .f-ball-front { fill: #8a4a1d; }
.field-art .f-ball-top { fill: #b8672e; }
.field-art .f-ball-side { fill: #5e300f; }

/* The down and distance in a pill: the live yellow, like the line to gain on the field. */
.field-head .f-pill {
  justify-self: center; padding: .2rem .85rem; border-radius: 999px;
  background: var(--info-bg); color: var(--text); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
  border: 1px solid var(--rule);
}
/* dark: the info color is the panel's own background there, so a light tint keeps it a pill */
:root[data-theme="dark"] .field-head .f-pill { background: color-mix(in srgb, var(--info-bg), #fff 9%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-head .f-pill { background: color-mix(in srgb, var(--info-bg), #fff 9%); } }
/* 3rd down called out in the live yellow, 4th in red */
.field-head .f-pill.down-3, :root .field-head .f-pill.down-3 { background: var(--live); color: var(--live-ink); border-color: var(--live); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.field-head .f-pill.down-4, :root .field-head .f-pill.down-4 { background: #d4202a; color: #fff; border-color: #d4202a; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
/* A little football by the team with the ball (live games, in the scorebug). */
.poss-ball { display: inline-flex; align-items: center; flex: none; margin-left: .4rem; align-self: center; }
.poss-ball svg { width: 1.15rem; height: auto; display: block; }
/* a football's silhouette, in the card's text color */
.poss-ball { color: inherit; }
.poss-ball .pb-leather { fill: currentColor; }
.hero .team.with-ls .name .poss-ball { margin-left: .3rem; }
.field-head .f-poss, .field-head .f-spot { white-space: nowrap; min-width: 0; }
@media (max-width: 34rem) {
  .field-head { gap: .5rem; font-size: 1rem; padding: 0; }
  .field-head .f-down { font-size: 1.15rem; }
  .field-head .f-pill { padding: .15rem .65rem; }
}

/* Simulation: jump to this game's kickoff (beside the download menu), in the live yellow. */
.game-top-actions { display: inline-flex; align-items: center; gap: .5rem; }
.sim-jump {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--live); color: var(--live-ink); border: 1px solid var(--live);
}
.sim-jump:hover { border-color: var(--live-ink); }
.sim-jump:disabled { opacity: .6; cursor: progress; }
.sim-jump .bi { width: 1rem; height: 1rem; margin-left: 2px; }   /* a play triangle looks centered a touch to the right */
.sim-jump.restart .bi { width: .95rem; height: .95rem; margin-left: 0; }

/* A game that just went final on screen: the status fades from the live yellow, "Final" pops in,
   and the losing team dims smoothly (then the card slides down to the finished games). */
@media (prefers-reduced-motion: no-preference) {
  .bug.just-final .status { animation: just-final-status 1.1s ease-out both; }
  .bug.just-final .status > * { animation: just-final-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
  .bug.just-final .team.lost .name, .bug.just-final .team.lost .score { animation: just-final-dim 1.4s ease .3s both; }
}
@keyframes just-final-status {
  from { background: var(--live); color: var(--live-ink); }
}
/* a game that ended inside the last two minutes was red: its fade starts red */
@media (prefers-reduced-motion: no-preference) {
  .bug.just-final.from-crunch .status { animation-name: just-final-status-red; }
}
@keyframes just-final-status-red {
  from { background: #d4202a; color: #fff; }
}
@keyframes just-final-pop {
  from { transform: scale(.6); opacity: 0; }
}
@keyframes just-final-dim {
  from { color: var(--bug-text); }
}

/* Live games: cards (the week scoreboard, team pages, search) drop the record, which crowded the
   football; the game page's scorebug puts it on its own row under the name at every width (rank,
   name and football on the first row). Finished and upcoming games keep the record beside the
   name, dropping below it only on narrow screens. */
.bug.live:not(.hero .bug) .team .rec { display: none; }
/* The game page's scorebug: records go under the names, for every game (scorebug .rec-below). Two explicit
   rows: rank, name and football on the first (the name takes what's left, "…" if it must), the
   record on the second. A grid, not wrapping, so every browser lays it out the same way. */
.hero .bug.rec-below .team .name {
  display: grid; grid-template-columns: auto minmax(0, max-content) auto; justify-content: start; align-items: baseline;
  column-gap: .3rem; row-gap: 0; overflow: visible; white-space: normal;
}
.hero .bug.rec-below .team .name .rank { grid-column: 1; grid-row: 1; margin: 0; }
.hero .bug.rec-below .team .name > a.team-link, .hero .bug.rec-below .team .name > .full {
  grid-column: 2; grid-row: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero .bug.rec-below .team .name:not(:has(.rank)) > a.team-link, .hero .bug.rec-below .team .name:not(:has(.rank)) > .full { grid-column: 1 / span 2; }
.hero .bug.rec-below .team .name .poss-ball { grid-column: 3; grid-row: 1; align-self: center; margin-left: .35rem; }
.hero .bug.rec-below .team .name .rec { grid-column: 1 / -1; grid-row: 2; margin: .1rem 0 0; line-height: 1.1; }

/* The game page's scorebug, compact: sized by the scorebug's own width (a container query), not
   the screen's, so it stays compact until there's room for the full sizes. */
.hero { container-type: inline-size; container-name: hero; }
@container hero (max-width: 38rem) {
  .hero .bug { grid-template-columns: 1fr 5.5rem; min-height: 7rem; }
  .hero .team { grid-template-columns: 2rem 1fr auto; padding: 0 .9rem 0 .75rem; gap: .6rem; }
  .hero .team .logo { width: 2rem; height: 2rem; }
  /* Narrow screens: smaller names (trimmed with "…" if they still don't fit) so the period
     scores fit. Names stay in normal case rather than switching to all-caps abbreviations. */
  .hero .bug:has(.with-ls) { grid-template-columns: 1fr 4.6rem; }
  .hero .team.with-ls { grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: .45rem; padding: 0 .7rem 0 .6rem; }
  .hero .team.with-ls .name { font-size: 1.35rem; }
  .hero .team.with-ls .name .rank { font-size: .7rem; }
  .hero .team.with-ls .rec { font-size: .75rem; }
  .hero .team.with-ls .score { font-size: 1.9rem; }
  /* an overtime column: everything a little tighter, logos kept */
  .hero .bug.has-ot .team.with-ls { grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; gap: .35rem; padding: 0 .6rem 0 .5rem; }
  .hero .bug.has-ot .team.with-ls .logo { width: 1.6rem; height: 1.6rem; }
  .hero .bug.has-ot .ls .p { width: 1.05rem; }
  .hero .bug.has-ot .team.with-ls .name { font-size: 1.15rem; }
  .ls { font-size: .85rem; }
  .ls .p { width: 1.2rem; }
  .ls .p.ot.first { margin-left: .2rem; }
}

/* The red zone (the offense inside the opponent's 20): the band lights up on the field, pulsing
   gently, and the spot says so in red ("Red zone · Ball on ALA 12"; on phones "Red zone · ALA 12"). */
.field-art .f-redzone { fill: #d81f28; opacity: .78; }   /* opaque enough to read red over the green */
@media (prefers-reduced-motion: no-preference) {
  .field-art .f-redzone { animation: redzone-pulse 1.8s ease-in-out infinite; }
}
@keyframes redzone-pulse { 0%, 100% { opacity: .62; } 50% { opacity: .9; } }
.field-head .f-red { color: #d4202a; font-weight: 700; }
:root[data-theme="dark"] .field-head .f-red { color: #ff5a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-head .f-red { color: #ff5a5f; } }
.field-head .f-red-tag { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
@media (max-width: 34rem) {
  .field-head .f-ball-on { display: none; }
}

/* "Live" by a team's name on its page while it has a game going (opens the game): the play-by-
   play's pulsing red dot, in a small pill. */
.live-pill {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: .7rem; vertical-align: .35em;
  padding: .22rem .6rem .22rem .5rem; border-radius: 999px; border: 1px solid currentColor;
  font: 700 .72rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: #d4202a;
}
.live-pill:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
:root[data-theme="dark"] .live-pill { color: #ff5a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .live-pill { color: #ff5a5f; } }
.live-pill .live-dot { width: .5rem; height: .5rem; }

/* the ball's shadow (it slides along the turf under the ball in flight) and a touchdown's flash */
.field-art .f-ball-shadow { fill: rgba(0, 0, 0, .38); }
.field-art .f-ez-flash { fill: #fff; opacity: 0; }
.field-art .f-ball-a, .field-art .f-shadow-a { transform-box: view-box; }

/* an incomplete pass's X, and the posts (they shake when a kick doinks off them) */
.field-art .f-incomplete { opacity: 0; transform-box: fill-box; transform-origin: center; }
.field-art .f-x { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.field-art .f-x-edge { stroke: rgba(0, 0, 0, .45); stroke-width: 7; stroke-linecap: round; }
.field-art .f-post-g { transform-box: view-box; }

/* a run's trail: a dashed line along the turf behind the ball, fading once it gets there */
.field-art .f-trail { stroke: #fff; stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; opacity: 0; }

/* after a touchdown the ball is off the field (animations still show it: they set its opacity) */
.field-art .gone .f-ball-a, .field-art .gone .f-shadow-a { opacity: 0; }

/* a turnover's burst: a red ring on the turf where the ball changed hands */
.field-art .f-burst-a { opacity: 0; transform-box: view-box; }
.field-art .f-burst-ring { fill: none; stroke: #ff2731; stroke-width: 3.5; }

/* Long status words ("Halftime") are sized to their box: the usual big size where there's room,
   smaller in a narrow status column (a phone's scorebug, a card) so they never spill out. */
.status { container-type: inline-size; }
.status .big.fit { font-size: min(1.15rem, 23cqi); white-space: nowrap; }
.hero .status .big.fit { font-size: min(1.6rem, 23cqi); }
/* the compact scorebug: a slightly smaller football, so the name keeps its room */
@container hero (max-width: 38rem) {
  .hero .poss-ball svg { width: .9rem; }
  .hero .bug.rec-below .team .name .poss-ball { margin-left: .2rem; }
}

/* The coin toss: a coin over the field (at midfield in each drawing) that flies up spinning and
   lands flat on the turf, tilted back to the field's angle, showing the winner's logo. */
.field-art .fa-wide, .field-art .fa-narrow { position: relative; }
.coin {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); aspect-ratio: 1;
  transform: translate(-50%, -70%); perspective: 600px; pointer-events: none;
  font-size: calc(var(--cwn) * 1cqi);       /* 1em = the coin's width (the field is a size container) */
}
.coin-shadow {
  position: absolute; left: 8%; right: 8%; bottom: 8%; height: 34%; border-radius: 50%;
  background: rgba(0, 0, 0, .35); filter: blur(1px);
}
.coin-air, .coin-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin-spin { transform: rotateX(64deg); }                 /* at rest: lying on the turf */
/* voxel coin: pixel-stepped faces (a rim and a lighter center), solid edge layers between them */
.coin-face, .coin-layer { position: absolute; inset: 0; clip-path: var(--coin-shape); }
.coin-face { display: grid; place-items: center; background: #c48f00; backface-visibility: hidden; }
.coin-face.front { transform: translateZ(.06em); }
.coin-face.back { transform: rotateX(180deg) translateZ(.06em); }
.coin-inner {
  width: 82%; height: 82%; clip-path: var(--coin-shape); display: grid; place-items: center;
  background: linear-gradient(135deg, #ffd84d 0 45%, #f2b705 45% 100%);    /* two flat tones: a lit and a shaded half */
}
.coin-layer { background: #9e7300; transform: translateZ(calc(var(--z) * .0125em)); }
/* the logo, stamped in gold: its shape filled with one gold, a pale lip just below for depth */
.coin-logo { position: relative; width: 66%; height: 66%; }
.coin-logo-ink, .coin-logo-lip {
  position: absolute; inset: 0;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.coin-logo-ink { background: #8f6600; }
.coin-logo-lip { background: #fff0b0; transform: translate(.012em, .02em); }
@media (prefers-reduced-motion: no-preference) {
  .coin.flip .coin-air { animation: coin-air 1.7s cubic-bezier(.3, .6, .4, 1) both; animation-delay: var(--coin-delay, 0s); }
  .coin.flip .coin-spin { animation: coin-spin 1.7s cubic-bezier(.25, .7, .35, 1) both; animation-delay: var(--coin-delay, 0s); }
  .coin.flip .coin-shadow { animation: coin-shadow 1.7s cubic-bezier(.3, .6, .4, 1) both; animation-delay: var(--coin-delay, 0s); }
}
@keyframes coin-air {           /* up, then down to the turf, and a little bounce */
  0% { transform: translateY(0); }
  42% { transform: translateY(-85%); }
  84% { transform: translateY(0); }
  92% { transform: translateY(-18%); }
  100% { transform: translateY(0); }
}
@keyframes coin-spin {          /* five and a half turns, landing face up */
  0% { transform: rotateX(0deg); }
  84% { transform: rotateX(1864deg); }
  100% { transform: rotateX(1864deg); }
}
@keyframes coin-shadow {        /* smaller and fainter while the coin is high */
  0% { transform: scale(1); opacity: 1; }
  42% { transform: scale(.45); opacity: .35; }
  84%, 100% { transform: scale(1); opacity: 1; }
}

/* each play's down and distance, beside the team logo, with the description on the line below */
.play .dd { display: block; margin-bottom: .15rem; font: 700 .85rem/1.25 var(--cond); color: var(--text); letter-spacing: .01em; }
.play .dd .dd-spot { font-weight: 600; color: var(--muted); }
.play .dd.dd-4 { color: #d4202a; }
:root[data-theme="dark"] .play .dd.dd-4 { color: #ff5a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .play .dd.dd-4 { color: #ff5a5f; } }
.play .desc { display: block; }
.play.has-dd .tlogo { align-self: start; margin-top: 0; }
/* the down and distance line is exactly the logo's height, its text centered on the logo's middle
   and sized up to match it */
.play.has-dd .dd { display: flex; align-items: center; gap: .3em; height: 1.5rem; margin-bottom: .1rem; font-size: 1.05rem; line-height: 1; }
.play.has-dd .dd .dd-spot { font-size: .92em; }

/* a scoring play's team logo, after the bullet ("Field goal · [logo] Baylor") */
.field-head .f-event { display: inline-flex; align-items: center; justify-content: center; white-space: pre; }
.field-head .f-ev-logo { width: 1.15em; height: 1.15em; object-fit: contain; margin-right: .3em; }

/* the end zones' team logos: white silhouettes, like the lettering beside them */
.field-art .f-ez-logo { filter: brightness(0) invert(1); opacity: .92; }
.field-art .f-ez-logo.ready { filter: none; }        /* (the white PNG: already a silhouette) */

/* the offense's direction, painted on the turf like the yard numbers */
.field-art .f-arrow-paint { fill: var(--f-num); }

.bug .game-note + .game-note::before { display: none; }   /* (no line between a game's name and a search card's stat line) */

/* the ball at rest: a slow, slight hover (about 1.5px, every 2.1s), its shadow tightening and fading a touch as
   it lifts; on its own layer, so it never fights the play animations */
@media (prefers-reduced-motion: no-preference) {
  .field-art .f-ball-idle { animation: ball-idle 2.1s ease-in-out infinite; }
  .field-art .f-shadow-idle { animation: shadow-idle 2.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes ball-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes shadow-idle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.93); opacity: .8; } }

/* a finished game's status box is the darker info-panel color, so finished games recede next to
   upcoming ones (the going-final fade ends here too) */
.bug.final .status { background: var(--info-bg); }

/* the matchup (before kickoff): season averages, then each team's recent results as chips */
/* (room to breathe: each section a clear group under its heading, the first a little clear of the title) */
.matchup .matchup-sub { margin: 2.25rem 0 .8rem; font: 700 .8rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.matchup .matchup-sub:first-of-type { margin-top: 1rem; }
/* recent results: two mirrored columns under the same team header as the season averages, split by
   a center rule like the stat bars'; each row a fixed set of columns (result, score, vs/@,
   opponent) so they line up down the column; the result a colored letter, not a filled badge */
.form-cols { display: grid; grid-template-columns: 1fr 1fr; }
.form-col { list-style: none; margin: 0; padding: 0; }
.form-col.left { padding-right: .9rem; border-right: 1px solid var(--rule); }
.form-col.right { padding-left: .9rem; }
.form-col li { border-top: 1px solid var(--rule); }
.form-col li:first-child { border-top: 0; }
.form-row {
  display: grid; grid-template-columns: 1rem 3rem 1.4rem minmax(0, 1fr); align-items: center; column-gap: .35rem;
  padding: .45rem 0; color: var(--text); text-decoration: none; font: 600 .85rem/1 var(--body);
}
.form-col.right .form-row { grid-template-columns: minmax(0, 1fr) 1.4rem 3rem 1rem; }
.form-col.right .form-row > .form-r { grid-column: 4; grid-row: 1; }
.form-col.right .form-row > .form-score { grid-column: 3; grid-row: 1; text-align: right; }
.form-col.right .form-row > .form-where { grid-column: 2; grid-row: 1; }
.form-col.right .form-row > .form-opp { grid-column: 1; grid-row: 1; justify-self: end; }   /* (against its vs/@, mirroring the left) */
/* hover (and keyboard focus): the whole row lights up, a soft tint reaching a little past its text */
.form-row { margin: 0 -.4rem; padding-left: .4rem; padding-right: .4rem; border-radius: 4px; transition: background-color .12s ease; }
.form-row:hover, .form-row:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); outline: none; }
.form-r { font: 800 .9rem/1 var(--cond); color: var(--muted); text-align: center; }
.form-row.win .form-r { color: var(--win); }
.form-row.loss .form-r { color: var(--loss); }
.form-score { font: 700 1rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.form-where { font-size: .75rem; color: var(--muted); text-align: center; }
.form-opp { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.form-col.right .form-opp { flex-direction: row-reverse; }
.form-opp .tlogo { width: 1.05rem; height: 1.05rem; flex: none; }
.form-none { padding: .45rem 0; color: var(--muted); font-size: .85rem; }
.form-col.right .form-none { text-align: right; }
.form { display: grid; gap: .2rem; }
@media (max-width: 34rem) {   /* phones: tighter columns, and just the opponent's abbreviation */
  .form-col.left { padding-right: .5rem; }
  .form-col.right { padding-left: .5rem; }
  .form-row { grid-template-columns: .8rem 2.5rem 1.1rem minmax(0, 1fr); column-gap: .25rem; }
  .form-col.right .form-row { grid-template-columns: minmax(0, 1fr) 1.1rem 2.5rem .8rem; }
  .form-opp .tlogo { display: none; }
}

/* a live card's down and distance in its strip, after the game's name: a touch heavier, same dim color */
.bug .game-note .note-dd { font-weight: 650; font-variant-numeric: tabular-nums; }
/* a live card's strip with both: the down and distance on the left, the game's name to the right,
   a touch lighter, shortening with "…" before it would crowd the situation */
.bug .game-note.split { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.bug .game-note.split .note-dd { flex: none; }
.bug .game-note.split .note-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }

/* the search popup's footer: the "Try ..." caption, and a "?" pinned bottom right that opens the guide */
.search-foot { display: flex; align-items: flex-end; gap: .75rem; }
.search-foot .search-hint { flex: 1; min-width: 0; }
.search-help-button {
  display: inline-grid; place-items: center; flex: none; margin-left: auto; margin-top: .4rem; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.search-help-button:hover, .search-help-button:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); outline: none; }
.search-help-button .bi { width: 1.15rem; height: 1.15rem; }

/* the search guide: a modal dialog, scrolling inside, over a dimmed page */
.help-modal {
  width: min(42rem, calc(100vw - 2rem)); max-height: min(85vh, 52rem); padding: 0; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); color: var(--text); box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}
.help-modal[open] { display: flex; flex-direction: column; }
.help-modal::backdrop { background: rgba(6, 12, 22, .55); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem .9rem 1.25rem; border-bottom: 1px solid var(--rule); }
.help-head h2 { margin: 0; font: 700 1.3rem/1.1 var(--cond); }
.help-close { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.help-close:hover, .help-close:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); outline: none; }
.help-body { overflow-y: auto; padding: 1rem 1.25rem 1.25rem; overscroll-behavior: contain; }
.help-intro { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.help-group { padding: .85rem 0; border-top: 1px solid var(--rule); }
.help-group:first-of-type { border-top: 0; padding-top: 0; }
.help-group h3 { margin: 0 0 .2rem; font: 700 1.05rem/1.2 var(--cond); }
.help-about { margin: 0 0 .5rem; color: var(--muted); font-size: .85rem; }
.help-examples { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.help-examples a {
  display: inline-block; padding: .3rem .6rem; border-radius: 999px; background: var(--info-bg); color: var(--text);
  font-size: .82rem; text-decoration: none; border: 1px solid var(--rule);
}
.help-examples a:hover, .help-examples a:focus-visible { border-color: var(--muted); outline: none; }

/* The wordmark on hover (mouse devices only, not touch; not with reduced motion): the clock tab
   swings open to about three times its width, springing a little past and settling, and a live dot
   pulses inside it. The plate grows to make room, so the text stays put; nothing moves by fractions
   of a pixel, which kept the rounded edges flickering. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wordmark { transition: --tab .45s cubic-bezier(.34, 1.56, .64, 1); }
  .wordmark:hover, .wordmark:focus-visible { --tab: 1.55rem; }
  /* the dot pulses all along, hidden behind the navy, so it's already pulsing as the tab uncovers it */
  .wordmark::before { animation: wordmark-dot 1.1s ease-in-out infinite; }
  .wordmark:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
}
@keyframes wordmark-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.65); opacity: .45; } }
/* (no hover, or reduced motion: --tab doesn't animate, the tab stays closed and the dot hidden) */

/* the conference record after the overall one ("1–3 (0–2 Sun Belt)"): the game page's scorebug,
   at any width (records have their own line there); where the line is too narrow, it drops whole
   onto the next line rather than being cut off. Cards keep just the overall record. */
.rec-conf { display: none; margin-left: .55em; }
.hero .rec-conf { display: inline-block; white-space: nowrap; }
.hero .bug.rec-below .team .name .rec { white-space: normal; }

/* records under the names give each team row a second line: more room between the two rows,
   most where the scorebug is wide */
.hero .bug.rec-below .teams { row-gap: .8rem; }
@container hero (min-width: 44rem) {
  .hero .bug.rec-below .teams { row-gap: 1.1rem; }
}
/* (the record line may run past the name column, under the quarter scores; the page caps its width
   short of the total score, and the team name keeps its own "…") */
.hero .bug.rec-below .team .name { overflow: visible; }
/* (the record's box takes no width in the name column's layout, so the name keeps all of it; its text
   runs past, capped by the page) */
.hero .bug.rec-below .team .name .rec { width: 0; min-width: 0; overflow: visible; position: relative; z-index: 1; }
.hero .bug.rec-below .team .name .rec-in { display: inline-block; width: max-content; }

/* the game page's scorebug: a team's abbreviation in place of a name that doesn't fit (the page
   measures; .use-abbr), in the name's place in the layout */
.hero .team.use-abbr .name .full { display: none; }
.hero .team.use-abbr .name .abbr { display: inline; }
.hero .bug.rec-below .team .name > .abbr { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero .bug.rec-below .team .name:not(:has(.rank)) > .abbr { grid-column: 1 / span 2; }

/* ---------------------------------------------------------------- win probability */
.wp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.wp-head .stat-panel-title { margin: 0; }
.wp-leader { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.wp-leader .tlogo { width: 1.8rem; height: 1.8rem; }
.wp-leader-name { font: 700 1.2rem/1 var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-leader-pct { font: 800 2rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.wp-split { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; }
.wp-side { display: inline-flex; align-items: center; gap: .35rem; font: 700 .95rem/1 var(--cond); font-variant-numeric: tabular-nums; color: var(--muted); }
.wp-side .tlogo { width: 1.25rem; height: 1.25rem; }
.wp-bar { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--rule); }
.wp-seg { display: block; height: 100%; transition: width .4s ease; }
.wp-seg + .wp-seg { border-left: 2px solid var(--surface); }
.wp-chart { position: relative; margin-top: .9rem; touch-action: pan-y; min-height: 150px; }
.wp-svg { display: block; overflow: visible; }
.wp-grid { stroke: var(--rule); stroke-width: 1; }
.wp-mid { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.wp-area { opacity: .32; }
.wp-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wp-q { fill: var(--muted); font: 600 11px var(--body); text-anchor: middle; }
.wp-now { fill: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .wp-now { animation: wp-now 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes wp-now { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.wp-hover { stroke: var(--muted); stroke-width: 1; }
.wp-edge { position: absolute; left: 0; line-height: 0; }
.wp-edge .tlogo { width: 1.25rem; height: 1.25rem; }
.wp-tip {
  position: absolute; top: -.4rem; transform: translate(-50%, -100%); padding: .25rem .5rem; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  font: 600 .8rem/1.2 var(--body); white-space: nowrap; pointer-events: none;
}


/* the predicted winner and its chance, at the top of a live game's play-by-play (taps to the chart) */
.wp-chip {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: .6rem; padding: .3rem .75rem .3rem .35rem;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--text);
  font: 800 1.2rem/1 var(--cond); font-variant-numeric: tabular-nums; vertical-align: middle; cursor: pointer;
}
.wp-chip .tlogo { width: 1.6rem; height: 1.6rem; }
.wp-chip-to { font: 600 .85rem/1 var(--body); color: var(--muted); }
.wp-chip:hover, .wp-chip:focus-visible { border-color: var(--muted); outline: none; }
/* (tapping the chip scrolls here: clear of the pinned header bar) */
#win-probability { scroll-margin-top: calc(var(--bar-h, 4.5rem) + env(safe-area-inset-top, 0px) + .75rem); }
/* (right-aligned: the heading takes its line, and the chip its right end; on wide screens that's
   just before the play filters) */
.section-head h2:has(.wp-chip) { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.section-head h2 .wp-chip { margin-left: auto; margin-right: .25rem; }

/* the projected margin under an upcoming game's kickoff time ("ALA -7.5") */
.status .proj-line { font-weight: 700; font-variant-numeric: tabular-nums; }
/* the projected score in an upcoming game's matchup */
.proj-section { margin-bottom: 2.25rem; }   /* (the same gap as between the other sections) */
.proj-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .5rem 0 .9rem; }
.proj-side { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.proj-side.home { justify-content: flex-end; }
.proj-side .tlogo { width: 1.6rem; height: 1.6rem; flex: none; }
.proj-side .tlogo { width: 2rem; height: 2rem; }
.proj-pts { font: 800 2rem/1 var(--cond); font-variant-numeric: tabular-nums; }

/* the chart's hover: when and the chance, then the score at that moment */
.wp-tip-line, .wp-tip-score { display: block; }
.wp-tip-score { margin-top: .15rem; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- rankings */
.rank-page { max-width: 46rem; margin: 0 auto; }
.rank-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.rank-head h1 { margin: 0; font: 600 1.6rem/1.1 var(--cond); }
.rank-controls { display: flex; gap: .5rem; }
.rank-tabs { margin-bottom: 1rem; flex-wrap: wrap; }
.rank-about { color: var(--muted); font-size: .85rem; margin: 0 0 .75rem; }
.rank-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
.rank-list li { display: grid; grid-template-columns: 2.2rem 3rem minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  padding: .55rem .9rem; border-top: 1px solid var(--rule); }
.rank-list li:first-child { border-top: 0; }
.rank-list.power li { grid-template-columns: 2.2rem 3rem minmax(0, 1fr) 4rem 4rem 4rem 3rem 3rem; }
.rank-resume { text-align: right; font: 700 1rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.rank-cols { color: var(--muted); font: 700 .7rem/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.rank-cols span:nth-child(n+4) { text-align: right; }
.rank-about strong { color: var(--text); font-weight: 600; }
.rank-n { font: 800 1.15rem/1 var(--cond); font-variant-numeric: tabular-nums; text-align: right; }
.rank-move { font: 700 .8rem/1 var(--body); font-variant-numeric: tabular-nums; color: var(--muted); }
.rank-move.up { color: var(--win); } .rank-move.down { color: var(--loss); }
.rank-move.new { font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.rank-team { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; color: inherit; text-decoration: none; }
.rank-team .tlogo { width: 1.7rem; height: 1.7rem; flex: none; }
.rank-name { font: 700 1.05rem/1.1 var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-team:hover .rank-name { text-decoration: underline; }
.rank-rec, .rank-rating, .rank-od { text-align: right; font-variant-numeric: tabular-nums; }
.rank-rec { color: var(--muted); font-size: .9rem; }
.rank-rating { font: 800 1.05rem/1 var(--cond); }
.rank-od { color: var(--muted); font-size: .9rem; }
.rank-more { margin-top: .75rem; }
/* a voter poll's points and first-place votes */
.rank-list.votes li { grid-template-columns: 2.2rem 3rem minmax(0, 1fr) 4rem 4.5rem; }
.rank-pts { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; }
.rank-fpv { color: var(--muted); font: 600 .85rem/1 var(--body); }
/* (the header's OFF and DEF cells carry .rank-od, to hide with their columns on phones, but keep
   the header's own small caps, like RECORD and RATING) */
.rank-cols .rank-od, .rank-cols .rank-rec, .rank-cols .rank-pts { font: inherit; color: inherit; }
.rank-who { display: flex; flex-direction: column; min-width: 0; }
.rank-sub { display: none; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; margin-top: .15rem; }
/* Narrower windows (and tablets): the record moves under the name (its column goes) and the rest
   tightens, so the name gets the room; offense and defense stay */
@media (max-width: 48rem) {
  .rank-list li { grid-template-columns: 1.8rem 2.2rem minmax(0, 1fr); gap: .5rem; padding: .5rem .75rem; }
  .rank-list.power li { grid-template-columns: 1.8rem 2.2rem minmax(0, 1fr) 3.6rem 3.6rem 3rem 3rem; }
  .rank-list.votes li { grid-template-columns: 1.8rem 2.2rem minmax(0, 1fr) 4rem; }
  .rank-list .rank-rec { display: none; }
  .rank-sub { display: block; }
  .rank-team { gap: .5rem; }
  .rank-move { font-size: .75rem; }
}
/* Phones: offense and defense go too */
@media (max-width: 30rem) {
  .rank-list li { grid-template-columns: 1.6rem 2rem minmax(0, 1fr); gap: .4rem; padding: .5rem .6rem; }
  .rank-list.power li { grid-template-columns: 1.6rem 2rem minmax(0, 1fr) 3.4rem 3.4rem; }
  .rank-list.votes li { grid-template-columns: 1.6rem 2rem minmax(0, 1fr) 3.6rem; }
  .rank-list.power .rank-od { display: none; }
  .rank-team { gap: .45rem; }
  .rank-team .tlogo { width: 1.45rem; height: 1.45rem; }
  .rank-move { font-size: .72rem; }
}

/* rankings answers in search: rank, team (or poll), and its value */
.rank-list.answer li { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
.rank-list.answer .rank-sub.show { display: block; }
.rank-value { text-align: right; font: 700 1rem/1 var(--cond); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-value.up { color: var(--win); } .rank-value.down { color: var(--loss); }
.rank-list.answer + .rank-more { display: inline-block; margin-top: .75rem; }
.rank-answer.poll-row .rank-name { font-size: 1rem; }
@media (max-width: 30rem) { .rank-list.answer li { grid-template-columns: 1.6rem minmax(0, 1fr) auto; } }

/* ---------------------------------------------------------------- conferences */
.conf-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.conf-link:hover { text-decoration-color: currentColor; }
.conf-season { color: var(--muted); font: 600 1rem/1 var(--cond); }
.conf-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.conf-index a { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .8rem 1rem; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
.conf-index a:hover { border-color: var(--muted); }
.conf-name { font: 700 1.1rem/1.1 var(--cond); }
.conf-count { color: var(--muted); font-size: .8rem; }
.rank-list.standings li { grid-template-columns: 2.2rem minmax(0, 1fr) 3.4rem 4rem 3rem 3rem 3rem; }
.rank-list.standings .rank-cols span:nth-child(n+3) { text-align: right; }
.rank-list.standings .rank-rating { font-size: 1rem; }
.st-pts, .st-streak { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; }
.st-rank { color: var(--muted); font: 600 .8rem/1 var(--body); margin-right: .3rem; }
.rank-list.standings .rank-sub { display: none; }
@media (max-width: 48rem) {
  .rank-list.standings li { grid-template-columns: 1.8rem minmax(0, 1fr) 3.4rem 3rem; }
  .rank-list.standings .st-wide, .rank-list.standings .st-pts { display: none; }
  .rank-list.standings .rank-sub { display: block; }
}
@media (max-width: 30rem) {
  .rank-list.standings li { grid-template-columns: 1.6rem minmax(0, 1fr) 3.2rem; }
  .rank-list.standings .st-streak { display: none; }
}
/* (the header's PF/PA/Strk cells carry their columns' classes, to hide with them: the header's own style still) */
.rank-cols .st-pts, .rank-cols .st-streak, .rank-cols .st-wide { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- the full-screen field */
.field-panel { position: relative; }
.field-full { position: absolute; z-index: 3; right: .5rem; bottom: .5rem; display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  padding: 0; border: 1px solid var(--rule); border-radius: 6px; background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--muted); cursor: pointer; }
.field-full:hover, .field-full:focus-visible { color: var(--text); border-color: var(--muted); }
.field-full .bi { width: .95rem; height: .95rem; }
html.stadium-open, html.stadium-open body { overflow: hidden; }
.stadium { position: fixed; inset: 0; z-index: 1000; background: #0b1426; touch-action: none; }
.stadium-canvas { display: block; width: 100%; height: 100%; }
.stadium-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .75rem); right: calc(env(safe-area-inset-right, 0px) + .75rem);
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(10,14,22,.55);
  color: #fff; cursor: pointer; padding: 0; display: grid; place-items: center; }   /* (the "x" centered both ways) */
.stadium-close svg { display: block; }
.stadium-close:hover, .stadium-close:focus-visible { background: rgba(10,14,22,.8); outline: 2px solid #fff; outline-offset: 2px; }
.stadium-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stadium-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 2rem; color: #fff; text-align: center; }
.stadium-hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem); transform: translateX(-50%);
  margin: 0; padding: .45rem .9rem; border-radius: 999px; background: rgba(10,14,22,.7); color: #fff; font: 500 .85rem/1.2 var(--body);
  white-space: nowrap; pointer-events: none; transition: opacity .6s; }
.stadium-hint.gone { opacity: 0; }
@media (max-width: 30rem) { .stadium-hint { font-size: .75rem; } }
/* (narrow screens: the hint above the camera control in the corner, wrapping rather than running off the sides) */
@media (max-width: 40rem) {
  .stadium-hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 4.2rem); white-space: normal; width: max-content;
    max-width: calc(100% - 2rem); text-align: center; border-radius: 12px; }
}

/* the full-screen field's possession label: "[dot] Alabama ball · 3rd & 9" */
.stadium-poss { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .9rem); left: calc(env(safe-area-inset-left, 0px) + .9rem);
  max-width: calc(100% - 6rem); margin: 0; padding: .45rem .8rem; display: flex; align-items: center; gap: .5rem; border-radius: 999px;
  background: rgba(10,14,22,.72); color: #fff; font: 700 .95rem/1.2 var(--cond); letter-spacing: .02em; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stadium-poss-dot { flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
/* the full-screen button without WebGL: dimmed, its message on hover or focus (or a tap) */
.field-full.is-off { opacity: .45; cursor: not-allowed; }
.field-full-tip { position: absolute; right: 0; bottom: calc(100% + .45rem); width: max-content; max-width: min(17rem, 70vw);
  padding: .45rem .65rem; border-radius: 6px; background: var(--text); color: var(--page, #fff); font: 500 .8rem/1.3 var(--body);
  text-align: left; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; opacity: 0; transform: translateY(2px);
  transition: opacity .15s, transform .15s; }
.field-full.is-off:hover .field-full-tip, .field-full.is-off:focus-visible .field-full-tip, .field-full.tip-open .field-full-tip { opacity: 1; transform: none; }
.field-full.is-off:hover, .field-full.is-off:focus-visible, .field-full.tip-open { opacity: 1; }
.field-full.is-off:hover .bi, .field-full.is-off:focus-visible .bi, .field-full.tip-open .bi { opacity: .45; }
/* the camera control: ‹ name ›, in the bottom right corner, out of the action (arrow keys and swipes do the same) */
.stadium-cams { position: absolute; right: calc(env(safe-area-inset-right, 0px) + .75rem); bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem);
  display: flex; align-items: center; gap: .25rem; padding: .2rem; border-radius: 999px; background: rgba(10,14,22,.62); color: #fff; }
.stadium-cam-label { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 8.5rem; }
.stadium-cam-icon { display: inline-flex; opacity: .8; }
.stadium-cam-name { font: 700 .95rem/1 var(--cond); letter-spacing: .03em; }
.stadium-cam-step { width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: transparent; color: #fff;
  font: 400 1.7rem/1 var(--body); cursor: pointer; }
.stadium-cam-step:hover, .stadium-cam-step:focus-visible { background: rgba(255,255,255,.14); outline: none; }
/* small screens (a phone, either way up): no camera control, swipes change it; its name (with the
   icon) fades in at the bottom center on a change, then out */
@media (max-width: 40rem), (max-height: 30rem) and (pointer: coarse) {
  .stadium-cams { right: auto; left: 50%; transform: translateX(-50%); padding: .45rem .9rem; pointer-events: none;
    opacity: 0; transition: opacity .35s; }
  .stadium-cams.flash { opacity: 1; }
  .stadium-cam-step { display: none; }
  .stadium-cam-label { min-width: 0; }
}
/* while the full-screen field loads: its dark background and a spinner */
.stadium-loading { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; background: #0b1426; }
.stadium-spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #fff;
  animation: stadium-spin .8s linear infinite; }
@keyframes stadium-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stadium-spinner { animation-duration: 2.4s; } }

/* ---- loading: placeholders shaped like what's coming, a shimmer across them, a bar along the top */
.sk-wrap { display: block; width: 100%; grid-column: 1 / -1; }   /* (the full width, whatever the page's own layout) */
.sk-wrap .sk-card { box-sizing: border-box; width: 100%; }
.sk-wrap { --sk-base: color-mix(in srgb, var(--text) 8%, var(--surface)); --sk-hi: color-mix(in srgb, var(--text) 16%, var(--surface)); }
.sk { display: block; border-radius: 4px; background: linear-gradient(100deg, var(--sk-base) 0%, var(--sk-base) 35%, var(--sk-hi) 50%, var(--sk-base) 65%, var(--sk-base) 100%);
  background-size: 300% 100%; animation: sk-shimmer 1.5s ease-in-out infinite; }
.sk-line { height: .7rem; }
.sk-line.sk-thin { height: .5rem; }
.sk-line.sk-head { height: .9rem; }
.sk-dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none; }
.sk-dot.sk-big { width: 3.4rem; height: 3.4rem; }
.sk-score { width: 1.8rem; height: 1.2rem; margin-left: auto; flex: none; }
.sk-card { background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: 8px; padding: .8rem .9rem; display: grid; gap: .6rem;
  animation: sk-in .35s ease both; }
.sk-page-board .sk-card { min-height: 4.75rem; }
.sk-team { display: flex; align-items: center; gap: .6rem; }
.sk-status { margin-top: .1rem; }
/* the game page's placeholder, as the page stacks */
.sk-gametop { margin: .25rem 0 .7rem; }
.sk-gamehero { grid-template-columns: 1fr 5.5rem; gap: 0; padding: 0; border-radius: 8px 8px 0 0; overflow: hidden; }
.sk-gamerows { display: grid; gap: .9rem; padding: 1rem 1rem; }
.sk-gamehero .sk-team { gap: .8rem; }
.sk-dot.sk-dot-md { width: 2rem; height: 2rem; }
.sk-line.sk-name { height: 1.1rem; }
.sk-score.sk-score-big { width: 1.7rem; height: 1.9rem; }
.sk-gamestatus { border-radius: 0; height: 100%; min-height: 5.5rem; }
.sk-gameinfo { display: grid; gap: .45rem; padding: .7rem 1rem; border: 1px solid var(--hero-border); border-top: 0; border-radius: 0 0 8px 8px;
  background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.sk-fieldpanel { margin-top: 1rem; gap: .8rem; }
.sk-fieldhead { display: flex; justify-content: space-between; align-items: center; }
.sk-field { height: clamp(6.5rem, 20vw, 11rem); border-radius: 6px; }
.sk-sechead { display: flex; justify-content: space-between; align-items: center; margin: 1.4rem 0 .7rem; }
.sk-pill { width: 5.5rem; height: 1.6rem; border-radius: 1rem; }
.sk-page-game .sk-list { margin-top: 0; }
.sk-play { display: grid; grid-template-columns: 2.6rem 1.6rem 1fr; gap: .75rem; align-items: start; padding: .6rem 0; border-top: 1px solid var(--rule); }
.sk-play:first-child { border-top: 0; }
.sk-teamhead { grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
.sk-stack { display: grid; gap: .6rem; }
.sk-list { gap: .2rem; margin-top: 1rem; }
.sk-page-table .sk-list { margin-top: 0; }
.sk-row { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--rule); }
.sk-row:first-of-type { border-top: 0; }
.sk-row > .sk-line:last-child { margin-left: auto; flex: none; }
.sk-row > .sk-line:nth-child(3) { flex: none; }
.sk-page-board .grid > .sk-card:nth-child(n) { animation-name: sk-in; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes sk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* the bar along the top of the page */
.load-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; }
.load-bar.on { opacity: 1; }
.load-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, transparent, var(--live) 30%, var(--live) 70%, transparent); animation: load-sweep 1.1s ease-in-out infinite; }
@keyframes load-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
/* (reduced motion: a slow, gentle pulse; the bar holds still) */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: sk-pulse 2.4s ease-in-out infinite; background: var(--sk-hi); }
  .sk-card { animation: none; }
  .load-bar::before { animation: none; width: 100%; opacity: .7; }
  @keyframes sk-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
}