/* Typefaces served from this site (SIL Open Font License, see fonts/OFL.txt).
   Bricolage Grotesque for headings and scores, DM Sans for everything else,
   Barlow Condensed only for the lettering painted on the field. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

/* Palette: warm paper, white cards, ink. One color per meaning:
   crimson is the tracked team, slate is the opponent,
   ochre is a run ("ground"), blue is a pass ("air"). */
:root {
  --bg: #f5f4ef;
  --card: #ffffff;
  --line: #e7e5dd;
  --line-soft: #f0eee8;
  --ink: #16181d;
  --muted: #646a72;
  --faint: #9a9fa6;
  --wash: #f3f2ed;

  --team: #841617;   /* set per page from the team's own colors, see body below */
  --opp: #4a5a6a;
  --run: #96610f;
  --pass: #2d6db3;
  --turf: #1e5b3c;
  --turf-deep: #174730;
  --marker: #f2c230;
  --brand: #1e5b3c;        /* the logo's field green, and a lighter one for dark surfaces */
  --brand-light: #6fcf9b;
  --good: #1c7449;
  --good-wash: #e6f2ea;
  --warn: #8d2a1f;
  --warn-wash: #f8e9e6;

  /* Three surfaces besides the card itself:
     solid is a small filled control (a button, the chosen option),
     deep is a big dark panel that keeps white text in both modes,
     raised is the chosen item inside a washed track. */
  --solid: var(--ink);
  --on-solid: #ffffff;
  --deep: #16181d;
  --raised: #ffffff;
  --zero: #cfccc2;

  --display: "Bricolage Grotesque", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --field: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  --radius: 20px;
  --radius-small: 14px;
  --pad: 20px;
  --side: #101214;      /* the side menu on a wide screen: dark in both modes */
  --side-width: 236px;
  /* Cards have no outline. A soft shadow lifts them off the paper instead. */
  --shadow: 0 1px 2px rgba(22, 24, 29, 0.06), 0 20px 38px -26px rgba(22, 24, 29, 0.45);
  --on-call: #ffffff;   /* text on a run or pass colored chip */

  /* Text that sits straight on the page background, outside any card. */
  --on-bg: var(--ink);
  --on-bg-muted: var(--muted);
}

/* Dark mode: a charcoal page, darker grey cards, light text. Nothing is pure white
   or pure black. The meaning colors are lightened so they still show. */
html.dark {
  --brand: #6fcf9b;
  --bg: #232529;
  --card: #2f3237;
  --line: #44484f;
  --line-soft: #3a3d43;
  --ink: #f4f3ee;
  --muted: #bcc0c7;
  --faint: #8d929a;
  --wash: #3a3d44;

  --run: #dba545;
  --pass: #74aeea;
  --good: #7fd6a8;
  --good-wash: #2f4c40;
  --warn: #f2aca3;
  --warn-wash: #5a3a3a;

  --solid: #f4f3ee;
  --on-solid: #16181d;
  --deep: #1d1e22;
  --raised: #565a63;
  --zero: #5a5e67;
  --mine: 20%;

  --on-bg: #f4f3ee;
  --on-bg-muted: #b7bbc2;
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 38px -24px rgba(0, 0, 0, 0.8);
  --on-call: #16181d;
  color-scheme: dark;
}
/* Each page sends its teams' colors twice: as they are, and lightened for the grey cards. */
body { --team: var(--team-light, #841617); --opp: var(--opp-light, #4a5a6a); }
html.dark body { --team: var(--team-dark, #c7584f); --opp: var(--opp-dark, #aeb8c2); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--on-bg);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--pass);
  outline-offset: 2px;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(40px, 7vw, 60px); letter-spacing: -0.035em; }
h2 { font-size: 20px; }
p { margin: 0; }

.page { max-width: 1200px; margin: 0 auto; padding: 14px 16px 56px; }

/* Anything with its own surface sets its own text color, whatever the page behind it. */
.card, .topbar, .notice, .message, .chip, .seg, .find, .pick-box, .copy { color: var(--ink); }
.page-head .eyebrow, .hero .eyebrow, .page-head .lede, .hero .lede, .section > .note, .note.page-note,
.keys-summary p, .footer, .footer a { color: var(--on-bg-muted); }
.keys-summary p b, .footer a:hover { color: var(--on-bg); }
html.dark .next-card, html.dark .champ-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
html.dark .section > .note a, html.dark .page-head .lede a { color: var(--on-bg); }

/* ---------- Shared pieces ---------- */
.card {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--pad);
  min-width: 0;
  box-shadow: var(--shadow);
}
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 16px; }
.card-head p { color: var(--muted); font-size: 14px; flex-basis: 100%; max-width: 62ch; }

.eyebrow { display: block; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; }
.note { color: var(--muted); font-size: 13.5px; max-width: 76ch; }
.num { font-variant-numeric: tabular-nums; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.chip.soft { background: var(--wash); border-color: transparent; }
.chip.dark { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.team { background: var(--team); }
.dot.school { background: var(--c); }
html.dark .dot.school { background: var(--cd); }
.dot.opp { background: var(--opp); }
.dot.run { background: var(--run); }
.dot.pass { background: var(--pass); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--solid); border-radius: 999px;
  background: var(--solid); color: var(--on-solid);
  font: 600 15px var(--body); text-decoration: none; cursor: pointer;
}
.btn.light { background: #f4f3ee; border-color: #f4f3ee; color: #16181d; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.small { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn:hover { opacity: 0.88; }

/* Segmented control: one pill holding the choices. */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--wash); border-radius: 999px; }
.seg button {
  min-height: 32px; padding: 0 13px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: 600 13.5px var(--body); cursor: pointer; white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 29, 0.12); }

/* ---------- Top bar ---------- */
html { scroll-padding-top: 140px; }
/* The bar across the top on phones and tablets wears the same dark look as the side menu on a
   wide screen: the same colors, the team in its own color, and the same icons on the links. */
.topbar {
  display: flex; align-items: center; gap: 6px 14px;
  padding: 8px 8px 8px 16px; margin-bottom: 18px;
  background: var(--side); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--shadow);
  /* It stays in view: the page scrolls up underneath it. */
  position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 30;
  --ink: #f3f1e8; --muted: #c9ccd1; --faint: #8d929a;
  --wash: rgba(255, 255, 255, 0.08); --card: rgba(255, 255, 255, 0.12); --line: rgba(255, 255, 255, 0.12);
  --pass: #74aeea; --brand: #6fcf9b;
  color: var(--ink); color-scheme: dark;
}
.topbar .brand { color: var(--ink); }
/* The strip above the pinned bar is page colored, so text scrolling up does not peek out over it. */
.topbar::before { content: ""; position: absolute; left: -16px; right: -16px; bottom: 100%; height: calc(9px + env(safe-area-inset-top, 0px)); background: var(--bg); pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.brand svg { flex: none; }
/* The wordmark: "next" light, "snap" heavy and in the mark's green. */
.brand-name { font-weight: 500; letter-spacing: -0.035em; }
.brand-name b { font-weight: 800; color: var(--brand); }
/* The team menu comes right after the brand in the page, so a keyboard reaches it early. On one row it sits at the far end. */
.topbar nav { display: flex; gap: 2px; margin-left: 6px; order: 1; }
.theme { order: 2; }
.pick { order: 3; }
.topbar nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 12px; color: var(--muted); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.topbar nav a:hover { color: var(--ink); background: var(--wash); }
.topbar nav a.on { background: var(--card); color: var(--ink); font-weight: 600; }
.topbar .nav-icon { display: block; flex: none; color: var(--faint); }
.topbar nav a:hover .nav-icon { color: var(--muted); }
.topbar nav a.on .nav-icon { color: var(--brand); }
.theme {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 4px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.theme:hover { color: var(--ink); background: var(--wash); }
.theme[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); }
.pick { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pick label { font-size: 13px; color: var(--muted); }
/* The team being followed: a pill in the team's own color, like the card in the side menu. */
.pick-box { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-left: 15px; border-radius: 999px;
  background: var(--pick, var(--wash)); color: var(--pick-text, var(--ink)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.pick-box .dot { display: none; }
.pick-box::after { content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.pick select {
  appearance: none; -webkit-appearance: none;
  min-height: 38px; max-width: 210px; padding: 0 34px 0 0;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 700 14.5px var(--display); letter-spacing: -0.01em; color: inherit; text-overflow: ellipsis;
}
.pick select option { color: #16181d; background: #fff; font: 400 15px var(--body); }
@media (max-width: 1120px) {
  /* Brand and picker share the first row. The links get the second. */
  .topbar { flex-wrap: wrap; border-radius: 26px; padding: 8px; gap: 6px 10px; }
  .topbar .brand { padding-left: 6px; order: 1; }
  .pick { order: 2; margin-left: auto; min-width: 0; }
  .pick label { position: absolute; left: -9999px; }
  .pick select { max-width: 170px; }
  .topbar nav { order: 4; flex-basis: 100%; margin-left: 0; justify-content: flex-start; align-items: center; }
  .topbar nav a { padding: 7px 10px; font-size: 14px; }
  .theme { order: 3; width: 34px; height: 34px; margin-left: 0; }
}
@media (max-width: 560px) {
  .brand { font-size: 15px; gap: 7px; }
  /* Six links share one row on a phone, so they sit close together. */
  .topbar nav { gap: 2px; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { flex: 1 1 0; flex-direction: column; gap: 4px; min-width: 0; padding: 7px 2px 6px; font-size: 11px; letter-spacing: -0.01em; white-space: nowrap; }
  .pick { gap: 0; }
  .pick-box { padding-left: 12px; gap: 6px; }
  .pick-box::after { right: 11px; }
  .pick select { max-width: 112px; padding-right: 26px; font-size: 13.5px; }
  .topbar { gap: 6px 8px; }
}
@media (max-width: 380px) { .topbar nav a { font-size: 10.5px; letter-spacing: -0.02em; } .pick select { max-width: 86px; } .topbar .brand { padding-left: 2px; } }
@media (max-width: 345px) { .topbar nav a { font-size: 10px; } .topbar .nav-icon { width: 16px; height: 16px; } }

.theme-label, .side-link { display: none; }
.footer { margin-top: 40px; color: var(--on-bg-muted); font-size: 13px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.footer p { max-width: 70ch; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.plays-note { margin-top: 10px; color: var(--on-bg-muted); }
.footer a { color: var(--on-bg-muted); }
.footer a:hover { color: var(--on-bg); }

/* ---------- Ad slots ---------- */
.ad { display: grid; gap: 5px; justify-items: center; }
.ad-label { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-bg-muted); }
.ad-box { display: block; overflow: hidden; border-radius: 10px; background: var(--card); line-height: 0; }
.ad-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-preview { display: grid; place-items: center; border: 1.5px dashed #b9bbc0; background: transparent; color: var(--on-bg-muted); font-size: 13px; line-height: 1.4; text-align: center; }
/* The square in the side menu: only where the side menu is (see the side menu below). */
.ad-side { display: none; }
.ad-side .ad-box { width: 200px; height: 200px; }
/* The banner at the bottom of the page on a computer: centered over the main column, above the
   footer. It scrolls with the page, so the side square stays the only ad pinned in view. */
.ad-foot { display: none; }
.ad-foot .ad-box { width: 728px; height: 90px; max-width: 100%; }
/* The strip pinned to the foot of a phone or tablet screen. The page gets room at the bottom
   so the strip never sits over the footer. In AdSense mode Google draws this strip itself
   (its anchor ad), and the same room is kept for it. */
.ad-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; justify-items: center; gap: 2px;
  padding: 3px 10px calc(5px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); box-shadow: 0 -1px 0 var(--line), 0 -6px 18px rgba(10, 13, 34, 0.08);
}
.ad-bottom .ad-label { font-size: 9px; line-height: 11px; letter-spacing: 0.08em; }
.ad-bottom .ad-box { width: 320px; height: 50px; max-width: calc(100vw - 20px); border-radius: 8px; }
.ad-bottom .ad-preview { font-size: 12.5px; }
body.has-bottom-ad { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Notices and the suggestion form ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; margin: 18px 6px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--card); font-size: 14.5px; max-width: 78ch; }
.notice b { white-space: nowrap; }
.narrow { max-width: 640px; }
.page-head .lede { margin-top: 12px; color: var(--on-bg-muted); font-size: 17px; max-width: 52ch; }
.suggest-form { display: grid; gap: 8px; }
.suggest-form label { font-weight: 600; font-size: 14.5px; margin-top: 8px; }
.suggest-form label span { font-weight: 400; color: var(--muted); }
.suggest-form textarea, .suggest-form input[type="email"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-small);
  background: var(--wash); color: var(--ink); font: 400 16px/1.45 var(--body); resize: vertical;
}
.suggest-form .btn { justify-self: start; margin-top: 12px; }
.suggest-form .note { margin-top: 4px; }
.form-error { padding: 10px 14px; border-radius: 12px; background: var(--warn-wash); color: var(--warn); font-weight: 600; font-size: 14.5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Game: score header ----------
   Each team has half the board in its own color. The strip under it is
   neutral, white in light mode and black in dark mode: tick marks, then the
   down, the spot and the drive, which the viewer can hide. */
.scorecard {
  --strip: #ffffff; --strip-ink: #16181d; --strip-muted: #5b6068; --strip-line: #c9c6bb;
  border-radius: 22px; overflow: hidden;
  background: var(--strip); color: var(--strip-ink); box-shadow: var(--shadow);
}
html.dark .scorecard { --strip: #0d0e10; --strip-ink: #f4f3ee; --strip-muted: #b4b8bf; --strip-line: #4a4e56; }
.score-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px;
  padding: 22px 30px 18px;
  background: linear-gradient(104deg, var(--left-fill, #841617) 0 50%, var(--right-fill, #0d0e10) 50% 100%);
}
.side { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--left-text, #ffffff); }
.side.right { align-items: flex-end; text-align: right; color: var(--right-text, #ffffff); }
.side .has { font-size: 13px; font-weight: 600; opacity: 0.92; visibility: hidden; }
.side.has-ball .has { visibility: visible; }
.side .who { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.side .team { min-width: 0; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3.3vw, 44px); line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
/* A football beside the name of the team that has the ball. */
.side .ball { display: none; flex: none; width: clamp(28px, 3.4vw, 50px); aspect-ratio: 44 / 26; transform: rotate(-16deg); }
.side.has-ball .ball { display: block; }
.side .points { font-family: var(--display); font-weight: 800; font-size: clamp(54px, 7.4vw, 100px); line-height: 0.95; letter-spacing: -0.05em; }
/* The clock sits on the line between the two colors, so it has a surface of its own. */
.status {
  display: grid; justify-items: center; gap: 6px; margin-top: 16px; padding: 10px 16px 9px;
  border-radius: 16px; background: var(--card); color: var(--ink); text-align: center;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.55);
}
.status .clock { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status .clock:has(#period:empty):has(#clock:empty) { display: none; }
.status .week { font-size: 12.5px; color: var(--muted); }
.live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--team); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

.score-rule { display: flex; align-items: center; gap: 14px; min-height: 30px; padding: 0 28px; }
.score-rule .ticks { flex: 1; height: 7px; background: repeating-linear-gradient(90deg, var(--strip-line) 0 1.5px, transparent 1.5px 10px); }
.score-rule .strip-toggle { margin-right: -16px; }
.strip-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 12px; background: none; color: var(--strip-muted, var(--muted));
  font: 600 13px var(--body); cursor: pointer; white-space: nowrap;
}
.strip-toggle:hover { color: var(--strip-ink, var(--ink)); }
.strip-toggle svg { flex: none; transition: transform 200ms; }
.strip-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.score-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px 16px; padding: 2px 28px 18px; }
.score-details > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.score-details .k { font-size: 12.5px; font-weight: 600; color: var(--strip-muted); }
.score-details b { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
/* The halftime and final report that takes the strip's place: the same row of four, then two notes a team. */
.half-panel { padding: 0 28px 16px; }
.half-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 6px; font-size: 12.5px; color: var(--strip-muted); }
.half-title b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.015em; color: var(--strip-ink); }
.half-panel .half-stats { padding: 0; }
.half-stats b { font-weight: 500; color: var(--strip-muted); }
.half-stats b .lead { font-weight: 700; color: var(--strip-ink); }
.half-stats b i { font: 400 13px var(--body); letter-spacing: 0; }
.half-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 6px 24px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--strip-line); }
.half-team { display: grid; gap: 4px; min-width: 0; align-content: start; }
.half-team p { font-size: 14px; line-height: 1.4; }
.half-team .k { margin-right: 8px; font-size: 12.5px; font-weight: 600; color: var(--strip-muted); }

/* ---------- Game: layout ----------
   Two columns on a wide screen. On a phone the columns dissolve and the cards
   run in reading order: field, next play, situation, stats, game flow, plays. */
.game-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.game-grid .col { display: contents; }
.a-field { order: 10; }
.a-odds { order: 20; }
.a-brief { order: 30; }
.a-passing { order: 40; }
.a-stats { order: 50; }
.a-flow { order: 60; }
.a-drives { order: 65; }
.a-talk { order: 70; }
.a-gamekeys { order: 80; }
.a-log { order: 90; }
/* Talking points and keys to the game sit in the narrow right column on a wide
   screen. Before kickoff the keys are the thing to read, so they wait in the
   wide column right under the field and the situation, and move across once
   plays arrive. On a phone they follow the situation, then drop to the end. */
.a-gamekeys.pregame { order: 14; }
@media (max-width: 979px) { .game-grid:has(.a-gamekeys.pregame) .a-brief { order: 12; } }
@media (min-width: 980px) {
  .game-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); align-items: start; }
  .game-grid .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
}

/* ---------- Field ---------- */
.field-card { padding: 10px 10px 8px; }
.field-wrap { border-radius: 14px; overflow: hidden; background: var(--turf-deep); }
.field { display: block; width: 100%; height: auto; }
.field .yard-number { font-family: var(--field); font-weight: 600; font-size: 44px; fill: rgba(255, 255, 255, 0.78); }
.field .endzone-name { font-family: var(--field); font-weight: 700; font-size: 58px; letter-spacing: 0.08em; }
.field .moves { transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), x 600ms, width 600ms; }
.situation-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 4px 0 0 10px; }
.situation-row .situation { margin-right: auto; }
.situation-row .strip-toggle { margin-left: auto; }
/* "Hide" under the field puts the down and the drive away. The field stays. */
.field-card.strip-off .situation, .field-card.strip-off #drive-chip { display: none; }
.situation { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -0.025em; }
.situation .spot { font-weight: 500; color: var(--muted); }

/* ---------- Next play odds ---------- */
.odds { display: flex; flex-direction: column; }
.odds h2 { margin-top: 2px; }
.odds-figures { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 18px; }
.odds-figures .fig { display: grid; gap: 2px; transition: opacity 300ms; }
.odds-figures .fig.pass { text-align: right; justify-items: end; }
.odds-figures .label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.odds-figures .value { font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 0.95; letter-spacing: -0.035em; }
.odds-bar { position: relative; display: flex; gap: 2px; height: 14px; margin-top: 12px; }
.odds-bar .run, .odds-bar .pass { height: 100%; min-width: 4px; transition: flex-basis 500ms ease, opacity 300ms; }
.odds-bar .run { background: var(--run); border-radius: 7px 2px 2px 7px; }
.odds-bar .pass { background: var(--pass); border-radius: 2px 7px 7px 2px; flex-grow: 1; }
.odds-bar .league { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); transition: left 500ms ease; }
.odds.empty .odds-figures .value { color: var(--faint); }
.odds.empty .odds-bar .run, .odds.empty .odds-bar .pass { background: var(--line); }
.odds.empty .odds-bar .league { display: none; }
.odds.happened-run .fig.pass, .odds.happened-pass .fig.run,
.odds.happened-run .odds-bar .pass, .odds.happened-pass .odds-bar .run { opacity: 0.3; }
.odds-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.odds-caption .tick { display: inline-block; width: 3px; height: 13px; border-radius: 2px; background: var(--ink); margin-right: 7px; vertical-align: -2px; }

.last-play { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-small); background: var(--wash); }
.last-play .text { margin-top: 3px; font-size: 15.5px; line-height: 1.4; }
.verdict { display: none; margin-top: 10px; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.verdict.right, .verdict.wrong { display: flex; }
.verdict .badge, .log .badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.badge.right { background: var(--good-wash); color: var(--good); }
.badge.wrong { background: #ebeae4; color: var(--muted); }
html.dark .badge.wrong { background: #4a4e56; }
/* A quarterback run: a best guess until the viewer says what it was. */
.badge.guess { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.verdict.qb { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.qb-ask { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.qb-ask.small { display: inline-flex; flex-basis: auto; gap: 4px; margin: 0 0 0 2px; vertical-align: middle; }
.qb-ask.small button { min-height: 24px; padding: 0 9px; font-size: 12px; }
.qb-q { font-weight: 600; color: var(--muted); margin-right: 2px; }
.qb-ask button { min-height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 13px var(--body); cursor: pointer; }
.qb-ask button:hover { border-color: var(--ink); }
.qb-ask button[aria-pressed="true"] { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.qb-note { flex-basis: 100%; font-size: 12.5px; font-weight: 400; color: var(--muted); max-width: 46ch; }
.tally { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 16px; }
.tally .tile { padding: 12px 14px; border-radius: var(--radius-small); background: var(--wash); }
/* The lean wears the color of the call it leans to. */
#odds-lean[data-call="run"] { background: var(--run); border-color: var(--run); color: var(--on-call); }
#odds-lean[data-call="pass"] { background: var(--pass); border-color: var(--pass); color: var(--on-call); }
.tally .tile b { display: block; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.tally .tile span { font-size: 12.5px; color: var(--muted); }
.odds .note { margin-top: 12px; font-size: 12.5px; }

/* ---------- The situation ---------- */
.brief .card-head { align-items: flex-start; margin-bottom: 0; }
.brief .card-head h2 { margin-top: 2px; font-size: 26px; }
.brief .card-head p { font-size: 15px; color: var(--ink); max-width: 70ch; margin-top: 4px; }
.sides { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 640px) { .sides { grid-template-columns: 1fr 1fr; } }
.side-job { padding: 14px 16px 16px; border-radius: var(--radius-small); background: var(--wash); }
.side-job .who { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.side-job .goal { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; }
.side-job ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.side-job li { font-size: 13.5px; line-height: 1.4; color: var(--muted); padding-left: 14px; position: relative; }
.side-job li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
/* On the game page each job box is filled with that team's color. */
.side-job:has(.dot.team) { background: var(--left-fill, var(--wash)); color: var(--left-text, var(--ink)); }
.side-job:has(.dot.opp) { background: var(--right-fill, var(--wash)); color: var(--right-text, var(--ink)); }
.side-job:has(.dot.team, .dot.opp) .dot { display: none; }
.side-job:has(.dot.team, .dot.opp) .who, .side-job:has(.dot.team, .dot.opp) li { color: inherit; opacity: 0.9; }
.side-job:has(.dot.team, .dot.opp) li::before { background: currentColor; opacity: 0.6; }
html.dark .side-job:has(.dot.team, .dot.opp) { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }

.fourth { margin-top: 14px; padding: 16px; border: 1.5px solid var(--ink); border-radius: var(--radius-small); }
.fourth-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fourth h3 { font-size: 24px; margin-top: 2px; }
.options { display: grid; gap: 8px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.option { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.option.best { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.option .name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14.5px; }
.option .name b { font-family: var(--display); font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.option p { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.option.best p { color: inherit; opacity: 0.74; }
/* In dark mode the best option is a lighter grey with a bright outline, not a white block. */
html.dark .option.best { background: var(--raised); border-color: var(--ink); color: var(--ink); }
.fourth .did { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; font-size: 14.5px; }
.fourth .note { margin-top: 10px; font-size: 12.5px; }

/* ---------- Passing game ---------- */
.passing h2 { margin-top: 2px; }
.passing h3 { margin-top: 20px; font-size: 16px; letter-spacing: -0.01em; }
.pass-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.pass-table th, .pass-table td { padding: 8px 0 8px 10px; text-align: right; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.pass-table thead th { border-top: 0; padding-top: 0; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.pass-table tbody th { text-align: left; padding-left: 0; font-weight: 400; color: var(--muted); }
.pass-table td { font-weight: 600; }
.pass-table td small { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 5px; }
.target { padding: 9px 0 3px; }
.target .line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.target .line b { font-weight: 600; }
.target .line span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.target .track { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--line-soft); }
.target .track i { display: block; height: 100%; min-width: 3px; border-radius: 3px; background: var(--pass); transition: width 400ms ease; }
.passing .empty { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.passing .note { margin-top: 14px; font-size: 12.5px; }

/* ---------- Team stats (two-sided bars) ---------- */
.stat-teams { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14.5px; }
.stat-teams span { display: inline-flex; align-items: center; gap: 8px; }
.stat-row { padding: 12px 0 2px; }
.stat-row .values { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 10px; }
.stat-row .v { font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: -0.02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat-row .v.lead { font-weight: 700; color: var(--ink); }
.stat-row .v.r { text-align: right; }
.stat-row .name { font-size: 13.5px; color: var(--muted); text-align: center; }
.stat-row .pair { display: flex; gap: 2px; height: 6px; margin-top: 7px; }
.stat-row .pair i { display: block; height: 100%; min-width: 3px; transition: flex-basis 400ms ease; }
.stat-row .pair .l { background: var(--team); border-radius: 3px 1px 1px 3px; }
.stat-row .pair .r { background: var(--opp); border-radius: 1px 3px 3px 1px; flex-grow: 1; }
.stat-row .pair.none i { background: var(--line); }
.stats .note { margin-top: 16px; }

/* ---------- Game flow chart ---------- */
.flow-plot { position: relative; }
.flow-plot svg { display: block; width: 100%; overflow: visible; }
.flow-plot text { font-family: var(--body); font-size: 11.5px; fill: var(--muted); }
.flow-plot .grid { stroke: var(--line-soft); stroke-width: 1; }
.flow-plot .zero { stroke: var(--zero); stroke-width: 1; }
.flow-plot .side-label { font-size: 12px; font-weight: 600; fill: var(--ink); }
.flow-plot .end-label { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.flow-plot .cross { stroke: var(--ink); stroke-width: 1; opacity: 0.45; }
.flow-plot.can-jump svg { cursor: pointer; }
.flow-tip {
  position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none;
  width: max-content; max-width: 250px; padding: 9px 12px;
  background: var(--deep); color: #fff; border-radius: 12px; font-size: 12.5px; line-height: 1.35;
}
.flow-tip b { display: block; font-size: 14px; }
.flow-tip .swatch { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.flow-tip span { display: block; color: rgba(255, 255, 255, 0.72); }
.flow-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13.5px; }
.flow-table th, .flow-table td { padding: 7px 6px; text-align: right; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line-soft); }
.flow-table thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.flow-table th:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.flow-table th .dot { margin-right: 8px; }
.flow-table td:last-child { font-weight: 700; }
.flow .note { margin-top: 12px; }

/* ---------- Play log ---------- */
.log ol { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.4; }
.log li .when { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.log li .dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; margin-bottom: 2px; }
.log li .tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: 13px; color: var(--muted); }
.log li.drive { display: flex; align-items: center; gap: 8px; padding: 16px 0 8px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.log li.drive:first-child { border-top: 0; padding-top: 0; }
.log li.drive + li { border-top: 0; padding-top: 4px; }
.log li.score .body { font-weight: 500; }
.log li.empty { display: block; padding: 18px 0 6px; border-top: 0; color: var(--muted); }
.log .score-line { display: inline-flex; margin-top: 6px; }
#log-more { margin-top: 14px; }

/* ---------- Replay controls ---------- */
.controls {
  position: sticky; bottom: 12px; z-index: 5;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
  max-width: 860px; margin: 22px auto 0; padding: 10px 20px 10px 10px;
  background: var(--deep); color: #fff; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(22, 24, 29, 0.28);
}
html.dark .controls { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 30px rgba(0, 0, 0, 0.45); }
html.dark .flow-tip { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.controls .buttons { display: flex; gap: 6px; align-items: center; }
.controls button, .controls select {
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24); background: transparent; color: #fff;
  font: 600 14px var(--body); cursor: pointer;
}
.controls select option { color: #16181d; background: #fff; }
.controls button.primary { background: #f4f3ee; border-color: #f4f3ee; color: #16181d; min-width: 78px; }
.controls input[type="range"] { width: 100%; accent-color: #fff; }
.controls .where { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .controls { grid-template-columns: minmax(0, 1fr) auto; border-radius: 26px; padding: 10px 14px 10px 10px; bottom: 8px; gap: 8px 12px; }
  .controls .buttons { grid-column: 1 / -1; }
  .controls .buttons button { flex: 1; }
}
.message { margin-top: 14px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--team); border-radius: var(--radius-small); max-width: 70ch; font-size: 14.5px; }

/* ---------- Season page ---------- */
.hero { display: grid; gap: 18px; align-items: stretch; padding: 14px 6px 6px; }
.hero .lede { margin-top: 12px; color: var(--on-bg-muted); font-size: 17px; max-width: 46ch; }
.hero .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.next-card {
  display: grid; align-content: space-between; gap: 22px;
  padding: 22px; border-radius: var(--radius); background: var(--deep); color: #fff; text-decoration: none;
}
.next-card .eyebrow { color: rgba(255, 255, 255, 0.66); }
.next-card .who { display: block; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -0.03em; }
.next-card .when { display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.8); font-size: 15px; }
.next-card .btn { justify-self: start; }
@media (min-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); padding-top: 26px; }
}

.section { margin-top: 32px; }
.section > h2 { font-size: 21px; margin: 0 6px 12px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 6px 12px; }
.section-head h2 { font-size: 21px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--solid); }

/* A panel in a team's own color. The text color is chosen to read on it: white on a dark
   color, black on a light one. It keeps the team's color in dark mode too. */
.team-panel { padding: 22px 24px 24px; border-radius: var(--radius); background: var(--box, var(--deep)); color: var(--box-text, #fff); min-width: 0; }
.team-panel h1, .team-panel h2 { color: inherit; }
.team-panel .eyebrow, .team-panel .season-line, .team-panel .lede,
.hero .team-panel .eyebrow, .hero .team-panel .lede, .page-head .team-panel .eyebrow, .page-head .team-panel .lede { color: inherit; opacity: 0.86; }
.team-panel .season-line { opacity: 1; }
.team-panel .season-line > span { opacity: 0.86; }
.team-panel .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
html.dark .team-panel { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.page-head .team-panel { margin: 0 -6px; }
.page-head .team-panel + .row { margin-top: 16px; }
@media (max-width: 560px) { .team-panel { padding: 20px 20px 22px; } }

/* ---------- Drives and biggest plays on the game page ---------- */
.swings { list-style: none; margin: 0; padding: 0; }
.swings li { display: grid; grid-template-columns: 68px minmax(0, 1fr) 92px; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.swings li:first-child { border-top: 0; }
.swings .when { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.swings .what { min-width: 0; }
.swings .swing { font-family: var(--display); font-weight: 700; font-size: 16px; white-space: nowrap; text-align: right; }
.swings .swing small { display: block; font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--muted); text-align: right; }
.drives-card .drive-row .who { font-weight: 600; }
@media (max-width: 560px) {
  .swings li { grid-template-columns: minmax(0, 1fr) auto; }
  .swings .when { grid-column: 1 / -1; }
}

/* ---------- Advanced numbers ---------- */
.adv-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(88px, auto) minmax(150px, 1fr); gap: 4px 18px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.tape-title + .adv-row { border-top: 0; }
.adv-name { font-size: 14.5px; font-weight: 600; }
.adv-name small, .adv-value small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.adv-value { text-align: right; }
.adv-value b { font-family: var(--display); font-size: 21px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.adv-rank { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.adv-track { display: block; height: 6px; border-radius: 3px; background: var(--line-soft); }
.adv-track i { display: block; height: 100%; border-radius: 3px; background: var(--faint); }
.adv-track i.good { background: var(--good); }
.adv-track i.poor { background: var(--warn); }
@media (max-width: 640px) {
  .adv-row { grid-template-columns: minmax(0, 1fr) auto; }
  .adv-rank { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
}
/* A team's national rank beside a number in a two-sided row. */
.stat-row .v small { font-family: var(--body); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.stat-row .v.r small { margin-left: 0; margin-right: 8px; }

/* ---------- Player leaders ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jump .chip { text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.jump .chip:hover { color: var(--ink); }
.leader-grid { display: grid; gap: 14px; align-items: start; }
@media (min-width: 700px) { .leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .leader-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* One team's lists are all different lengths, so they stack in columns instead of rows. */
@media (min-width: 700px) {
  .leader-grid.packed { display: block; columns: 2; column-gap: 14px; }
  .leader-grid.packed .leader { break-inside: avoid; margin-bottom: 14px; }
}
@media (min-width: 1180px) { .leader-grid.packed { columns: 3; } }
.leader { scroll-margin-top: 90px; }
.leader h3 { font-size: 17px; margin-bottom: 6px; }
.leader-list { list-style: none; margin: 0; padding: 0; }
.leader-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.leader-list li:first-child { border-top: 0; }
.leader-list.short:not(.all) li.more { display: none; }
.leader-list .place { font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.leader-list li:first-child .place { color: var(--ink); }
.leader-list b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.leader-list small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.leader-list .who small .dot { width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; }
.leader-list .amount { text-align: right; max-width: 170px; }
.leader-list .amount b { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.leader-list li:first-child .amount b { font-size: 21px; }
/* The followed team's players, marked the way its row is in the rankings. */
.leader-list li.mine { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; border-top-color: transparent; background: color-mix(in srgb, var(--team) var(--mine, 9%), var(--card)); box-shadow: inset 3px 0 0 var(--team); }
.leader-list li.mine + li { border-top-color: transparent; }
.leader-more { margin-top: 8px; }
.leader .note { margin-top: 10px; font-size: 12.5px; }
.section[id] { scroll-margin-top: 90px; }

/* ---------- Compare ---------- */
.compare-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 16px; }
.pick-team { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; flex: 1 1 260px; }
.pick-team legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pick-team select { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); color: var(--ink); font: 600 15px var(--body); min-width: 0; }
.pick-team select:first-of-type { flex: 1 1 160px; }
.versus-word { align-self: center; padding-top: 18px; color: var(--muted); font-size: 14px; }
.versus { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 760px) { .versus { grid-template-columns: 1fr 1fr; } }
.versus-side h2 { font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -0.03em; margin-top: 4px; }
.sim-title { font-size: 26px; margin-top: 2px; }
.sim .winbar { margin-top: 4px; }
.sim-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; padding-top: 0; }
@media (min-width: 860px) { .sim-tally { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sim-play { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; }
.sim-play .note { margin: 0; }
.sim > .note { margin-top: 18px; max-width: 80ch; }
#one-game { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.one-final { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-items: end; }
.one-side { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; color: var(--muted); }
.one-side .who { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.one-side b { grid-column: 1 / -1; font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 0.95; letter-spacing: -0.04em; }
.one-side.won { color: var(--ink); }
.one-final .note { grid-column: 1 / -1; margin-top: 4px; }
.compare-row { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.compare-row .v { font-size: 18px; }
.tape-title + .compare-row { border-top: 0; }
#one-stats { margin-top: 12px; }
.drives { list-style: none; margin: 0; padding: 0; }
.drive-period { padding: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.drive-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 2fr) auto; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.drive-row .who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.drive-row .what { color: var(--muted); }
.drive-row.scored .what { color: var(--ink); font-weight: 700; }
.drive-row .how { color: var(--muted); font-size: 13px; }
.drive-row .score { font-weight: 600; text-align: right; }
@media (max-width: 640px) {
  .drive-row { grid-template-columns: minmax(0, 1fr) auto; }
  .drive-row .how { grid-column: 1 / -1; order: 3; }
  .drive-row .what { text-align: right; }
  .drive-row .score { display: none; }
  .one-side b { font-size: 48px; }
  .versus-word { padding-top: 0; flex-basis: 100%; }
}

/* The season menu sits in the small line above a page title, on the page background. */
.season-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.season-pick { display: inline-flex; align-items: center; gap: 6px; }
.season-box { position: relative; display: inline-flex; }
.season-box::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.season-pick select {
  appearance: none; -webkit-appearance: none; min-height: 30px; padding: 0 28px 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink);
  font: 600 13.5px var(--body); cursor: pointer;
}
.season-box { color: var(--ink); }

/* Last year's numbers in a grade card. Hidden until the compare box is ticked. */
.letter-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.was, .was-line, .was-note { display: none; }
.comparing .was { display: grid; justify-items: end; text-align: right; gap: 1px; padding-bottom: 4px; }
.comparing .was b { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 0.9; letter-spacing: -0.04em; color: var(--muted); }
.comparing .was small { font-size: 12.5px; color: var(--muted); }
.grade dd small.was-line { display: none; }
.comparing .grade dd small.was-line { display: block; color: var(--ink); font-weight: 600; }
.comparing .was-note { display: block; }
.section > .note.was-note { margin-bottom: 0; }
.section > .note, .page-note { margin: 12px 6px 0; }

.grades { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .grades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grade { display: grid; gap: 16px; align-content: start; }
.grade .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.grade .unit { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.grade .letter { font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 0.86; letter-spacing: -0.05em; }
.grade.none .letter { color: var(--faint); }
.grade dl { display: grid; gap: 0; margin: 0; }
.grade dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.grade dt { color: var(--muted); }
.grade dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.grade dd small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }

.table-scroll { overflow-x: auto; }
.schedule { width: 100%; border-collapse: collapse; font-size: 15px; }
.schedule th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--muted); padding: 0 10px 10px 0; white-space: nowrap; }
.schedule td { padding: 12px 10px 12px 0; border-top: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.schedule td:last-child, .schedule th:last-child { padding-right: 0; text-align: right; }
.schedule .opp { font-weight: 600; }
.schedule .opp small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.schedule .score { font-variant-numeric: tabular-nums; }
.schedule .score b { display: inline-block; width: 1.3em; font-weight: 700; }
.schedule .muted { color: var(--muted); }
.gbadge { display: inline-grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 10px; background: var(--wash); font-family: var(--display); font-weight: 700; font-size: 15px; }
.gbadge.hi { background: var(--good-wash); color: var(--good); }
.gbadge.lo { background: var(--warn-wash); color: var(--warn); }

.predict { display: grid; gap: 4px 20px; align-items: center; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.predict .big { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 0.95; letter-spacing: -0.04em; }
.predict p { color: var(--muted); font-size: 15px; max-width: 52ch; }
.predict p b { color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .predict { grid-template-columns: auto 1fr; } }

.call-row { display: grid; gap: 4px 18px; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.call-row:first-of-type { border-top: 0; }
.call-row .label { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.call-row .label small { display: block; font-family: var(--body); font-weight: 400; font-size: 12.5px; letter-spacing: 0; color: var(--muted); }
.call-row .values { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.call-row .values span { display: inline-flex; align-items: center; gap: 7px; }
.split-wrap { position: relative; margin-top: 6px; }
.split { display: flex; gap: 2px; height: 12px; }
.split .run { background: var(--run); border-radius: 6px 2px 2px 6px; min-width: 4px; }
.split .pass { background: var(--pass); border-radius: 2px 6px 6px 2px; flex-grow: 1; min-width: 4px; }
.split-wrap .league { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.call-row .works { margin-top: 8px; font-size: 13px; color: var(--muted); }
@media (min-width: 700px) { .call-row { grid-template-columns: 150px minmax(0, 1fr); align-items: start; } }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.key span { display: inline-flex; align-items: center; gap: 7px; }
.key .k-league { display: inline-block; width: 3px; height: 13px; border-radius: 2px; background: var(--ink); }

/* ---------- Every-situation tables ---------- */
.page-head { padding: 18px 6px 4px; }
.page-head h1 { font-size: clamp(30px, 4.6vw, 42px); }
.page-head .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.seg a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.seg a.on { background: var(--raised); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 29, 0.12); }
.plain-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.plain-table th, .plain-table td { padding: 10px 12px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.plain-table thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: 12.5px; padding-top: 0; }
.plain-table th:first-child, .plain-table td:first-child { text-align: left; padding-left: 0; font-weight: 600; }
.plain-table th:last-child, .plain-table td:last-child { padding-right: 0; }
.plain-table tr.low td { color: var(--faint); }

/* ---------- Keys: stat-backed findings ---------- */
.finding { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.finding:first-of-type { border-top: 0; }
h3 + .finding { border-top: 0; padding-top: 8px; }
.finding .figure b { display: block; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -0.03em; }
.finding .figure span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.finding .claim-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.finding h4 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 16.5px; line-height: 1.2; letter-spacing: -0.015em; }
.finding .claim p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.finding .chip { min-height: 22px; padding: 1px 9px; font-size: 11.5px; }
.copy {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: 600 12.5px var(--body); cursor: pointer; white-space: nowrap;
}
.copy:hover { border-color: var(--ink); }
.copy.done { background: var(--good-wash); border-color: var(--good-wash); color: var(--good); }
.keys-grid { display: grid; gap: 14px; }
.keys-grid h3, .talk h3 { font-size: 17px; margin-bottom: 4px; }
@media (min-width: 900px) { .keys-grid { grid-template-columns: 1fr 1fr; } }
.keys-summary { display: grid; gap: 8px 20px; align-items: center; margin: 0 6px 16px; }
.keys-summary .big { font-family: var(--display); font-weight: 700; font-size: 60px; line-height: 0.95; letter-spacing: -0.04em; }
.keys-summary p { color: var(--on-bg-muted); font-size: 15px; max-width: 64ch; }
.keys-summary p b { color: var(--on-bg); font-weight: 600; }
.keys-summary .copy { justify-self: start; }
@media (min-width: 700px) { .keys-summary { grid-template-columns: auto 1fr auto; } }
.keys-more { margin-top: 12px; height: auto; min-height: 34px; padding: 6px 14px; white-space: normal; text-align: center; }
.talk .note { margin-top: 12px; }
@media (max-width: 560px) {
  .finding { grid-template-columns: 74px minmax(0, 1fr); }
  .finding .figure b { font-size: 22px; }
  .finding .copy { grid-column: 2; justify-self: start; }
}

/* ---------- Keys to the game ---------- */
.gamekeys .card-head { align-items: flex-start; }
.gamekeys .card-head h2 { margin-top: 2px; font-size: 26px; }
.winbar { display: flex; gap: 2px; height: 12px; }
.winbar .l { background: var(--team); border-radius: 6px 2px 2px 6px; min-width: 4px; }
.winbar .r { background: var(--opp); border-radius: 2px 6px 6px 2px; flex-grow: 1; min-width: 4px; }
.winbar-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.winbar-labels b { font-family: var(--display); font-size: 20px; color: var(--ink); letter-spacing: -0.02em; }
.needs { display: grid; gap: 4px 28px; margin-top: 20px; }
.need h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 2px; }
.need-pick { margin-top: 16px; }
.needs { align-items: start; }
.tape-title { margin: 22px 0 12px; font-size: 17px; }
.gamekeys .note { margin-top: 16px; }
/* In a row of cards the order property only works inside a flex or grid column. */
@media (min-width: 980px) {
  .col-main .a-field { order: 10; } .col-main .a-brief { order: 20; } .col-main .a-flow { order: 30; } .col-main .a-drives { order: 35; } .col-main .a-gamekeys { order: 25; } .col-main .a-log { order: 60; }
  /* The same two cards at the size of their neighbors in the right column. */
  .col-side .needs { grid-template-columns: 1fr; margin-top: 12px; }
  .col-side .gamekeys .card-head h2 { font-size: inherit; margin-top: 0; }
  .col-side .gamekeys .card-head { gap: 8px; margin-bottom: 12px; }
  .col-side .winbar { height: 8px; }
  .col-side .winbar-labels { font-size: 13px; }
  .col-side .winbar-labels b { font-size: 16px; }
  .col-side .need h3, .col-side .talk h3, .col-side .tape-title { font-size: 15px; }
  /* The number, with Copy tucked under it, beside the claim. */
  .col-side .finding { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; padding: 10px 0; }
  .col-side .finding .figure { grid-column: 1; grid-row: 1; }
  .col-side .finding .claim { grid-column: 2; grid-row: 1 / span 2; }
  .col-side .finding .figure b { font-size: 19px; }
  .col-side .finding .figure span { font-size: 11px; }
  .col-side .finding h4 { font-size: 14.5px; }
  .col-side .finding .claim p { font-size: 13px; line-height: 1.4; }
  .col-side .finding .copy { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; min-height: 26px; padding: 0 10px; font-size: 12px; }
  .col-side .gamekeys .stat-row { padding-top: 9px; }
  .col-side .gamekeys .stat-row .v { font-size: 17px; }
  .col-side .gamekeys .stat-row .name { font-size: 12.5px; line-height: 1.25; }
  /* The rank goes under its number on both sides. */
  .col-side .gamekeys .stat-row .values { align-items: start; }
  .col-side .gamekeys .stat-row .v { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
  .col-side .gamekeys .stat-row .v.r { flex-direction: column-reverse; align-items: flex-end; }
  .col-side .gamekeys .stat-row .v small { margin: 0; font-size: 11px; line-height: 1.2; }
  .col-side .gamekeys .stat-row .name { padding-top: 2px; }
  .col-side .gamekeys .note, .col-side .talk .note { font-size: 12.5px; }
}
.today { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.today h3 { display: flex; align-items: center; gap: 8px; }
.talk .season-title { margin-top: 12px; }

/* ---------- Projections ---------- */
.champ-card { display: grid; gap: 22px; padding: 24px; border-radius: var(--radius); background: var(--deep); color: #fff; }
.champ-card .eyebrow { color: rgba(255, 255, 255, 0.66); }
.champ-card .who { display: block; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 7vw, 64px); line-height: 1; letter-spacing: -0.035em; }
.champ-card .when { display: block; margin-top: 10px; color: rgba(255, 255, 255, 0.8); font-size: 15px; max-width: 44ch; }
.champ-odds { display: grid; gap: 9px; align-content: center; }
.champ-odds > div { display: grid; grid-template-columns: minmax(96px, 130px) 1fr 44px; gap: 12px; align-items: center; font-size: 14px; }
.champ-odds .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.champ-odds .bar i { display: block; height: 100%; border-radius: 3px; background: #fff; min-width: 3px; }
.champ-odds b { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 860px) { .champ-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 32px; } }

.whatif-lede { font-size: 15px; max-width: 70ch; margin-bottom: 14px; }
.chosen { margin-bottom: 14px; }
.chosen .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chosen .chip { text-decoration: none; }
.chosen .chip span { opacity: 0.7; font-size: 16px; line-height: 1; }
.picker { margin-top: 14px; }
.picker details { border-top: 1px solid var(--line-soft); }
.picker summary { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; }
.picker summary span { font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--muted); letter-spacing: 0; }
.pick-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 8px; align-items: center; padding-bottom: 8px; }
.pick-row .at { text-align: center; font-size: 12.5px; color: var(--muted); }
.pick-side { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; font-size: 14px; min-width: 0; }
.pick-side:hover { border-color: var(--ink); }
.pick-side .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-side small { color: var(--muted); font-size: 12px; }
.pick-side .pct { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pick-side.on { background: var(--ink); border-color: var(--ink); color: #fff; }
html.dark .pick-side.on { background: var(--raised); border-color: var(--ink); color: var(--ink); }
html.dark .pick-side.on small, html.dark .pick-side.on .pct { color: var(--ink); opacity: 0.8; }
.pick-side.on small, .pick-side.on .pct { color: rgba(255, 255, 255, 0.72); }
.pick-side .dot, .match-row .dot, .champs .dot, .crown .dot { box-shadow: 0 0 0 1.5px #fff; }
html.dark .pick-side .dot, html.dark .match-row .dot, html.dark .champs .dot, html.dark .crown .dot { box-shadow: none; }

.bracket { display: grid; gap: 22px; }
.round { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.round h3 { font-size: 15px; letter-spacing: -0.01em; color: var(--muted); font-family: var(--body); font-weight: 600; }
.match { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 8px; }
.match-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.match-head span:last-child { text-align: right; }
.match-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14.5px; color: var(--muted); }
.match-row .seed { width: 18px; font-size: 12px; font-variant-numeric: tabular-nums; }
.match-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row .name small { margin-left: 7px; font-size: 12px; color: var(--muted); font-weight: 400; }
.match-row .pct { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.match-row.won { color: var(--ink); font-weight: 700; }
.crown { margin-top: 4px; padding: 14px; border-radius: 14px; background: var(--wash); }
.crown b { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; }
.round-games { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 980px) {
  /* Each round's games spread out so a winner sits between the two games it came from. */
  .bracket { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .round-games { flex: 1; justify-content: space-around; }
}
.rank-table.short:not(.all) tr.more { display: none; }
#show-all { margin-top: 14px; }
.first-out { margin-top: 14px; max-width: none; }
.champs { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.champs b { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 16px; }
.champs small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.bowls { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bowl { padding: 16px 18px; border-radius: 18px; }
.bowl-head { display: grid; gap: 1px; margin-bottom: 8px; }
.bowl-head b { font-family: var(--display); font-size: 17px; letter-spacing: -0.015em; }
.bowl-head span { font-size: 12.5px; color: var(--muted); }
.bowl .pick-line { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.bowl .pick-line b { color: var(--ink); }
.find-row { margin-bottom: 14px; }
@media (max-width: 560px) {
  /* A game's two sides stack so team names stay readable. Road team on top. */
  .pick-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 10px; }
  .pick-row .at { display: none; }
  .pick-row .pick-side:first-child { border-radius: 12px 12px 0 0; }
  .pick-row .pick-side:last-child { border-radius: 0 0 12px 12px; margin-top: -1px; }
}

/* ---------- This week's games: a predicted score and stats for each ----------
   A grid of small cards. Opening one stretches it across the row for the full
   projection. It is a plain <details>, so it works with no script. */
.seg.wide { flex-wrap: wrap; border-radius: 20px; }
.helmet { flex: none; display: block; }
.helmet.flip { transform: scaleX(-1); }
.helmet .mask { fill: none; stroke: #8f959d; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.helmet .shell { stroke: rgba(22, 24, 29, 0.3); stroke-width: 1.2; stroke-linejoin: round; }
.helmet .ear { fill: rgba(0, 0, 0, 0.3); }
html.dark .helmet .mask { stroke: #c4c8ce; }
html.dark .helmet .shell { stroke: rgba(255, 255, 255, 0.42); }

.wk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 6px; }
.wk-record, .wk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk-record .chip b { margin-right: 4px; }
.wk-day { margin: 26px 6px 12px; color: var(--on-bg); }
.wk-bar + .wk-day { margin-top: 20px; }
.wk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); grid-auto-flow: row dense; align-items: start; }
.wk { padding: 0; }
.wk[open] { grid-column: 1 / -1; }
.wk summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 14px 16px 12px; cursor: pointer; list-style: none; border-radius: var(--radius); }
.wk summary::-webkit-details-marker { display: none; }
.wk summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wk-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.wk-labels { display: flex; gap: 0; }
.wk-labels i { width: 40px; text-align: right; font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10.5px; }
.wk-team { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 30px; color: var(--muted); font-size: 15px; }
.wk-team .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.wk-team .yds, .wk-team .pts { width: 40px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.wk-team .yds { font-size: 13px; }
.wk-team .pts { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.wk-team.fav { color: var(--ink); font-weight: 700; }
.wk-team.fav .pts { font-weight: 800; }
.wk-team.fav .yds { font-weight: 400; }
.wk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--muted); }
.wk-pick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-pick b { color: var(--ink); }
.wk-more { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.wk-more::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); }
.wk[open] .wk-more::after { margin-top: 3px; transform: rotate(225deg); }
.wk-result { flex: none; font-weight: 600; }
.wk-result.right { color: var(--good); }
.wk-result.wrong { color: var(--warn); }
.wk-result.live { color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-when { display: inline-flex; align-items: center; gap: 5px; }
.wk-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0433a; box-shadow: 0 0 0 3px rgba(224, 67, 58, 0.18); }
.wk.live .wk-head { color: var(--ink); font-weight: 600; }
.wk-check { margin-top: 18px; padding: 16px; border-radius: var(--radius-small); border: 1px solid var(--line); }
.wk-check h4 { margin: 0 0 12px; font-family: var(--display); font-size: 17px; letter-spacing: -0.015em; }
.wk-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wk-tiles div { padding: 10px 12px; border-radius: 12px; background: var(--wash); }
.wk-tiles b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wk-tiles span { font-size: 12.5px; color: var(--muted); }
.wk-tiles .right b { color: var(--good); }
.wk-tiles .wrong b { color: var(--warn); }
.wk-vs { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wk-vs th, .wk-vs td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line-soft); }
.wk-vs th:first-child { text-align: left; font-weight: 500; color: var(--muted); }
.wk-vs thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.wk-vs thead tr:first-child th { color: var(--ink); font-family: var(--display); font-size: 14px; }
.wk-open { display: flex; justify-content: flex-end; padding-top: 14px; }
@media (max-width: 759px) { .wk-open { justify-content: stretch; } .wk-open .btn { flex: 1; } }
.wk[open] summary { max-width: 420px; }

.wk-deep { padding: 6px 16px 18px; border-top: 1px solid var(--line-soft); }
.wk-face { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(10px, 3vw, 28px); align-items: center; padding: 22px 0 10px; }
.wk-side { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.wk-side b { font-family: var(--display); font-size: clamp(17px, 2.6vw, 24px); letter-spacing: -0.02em; line-height: 1.1; }
.wk-side span { font-size: 12.5px; color: var(--muted); }
/* The two projected scores, big, with a thin rule between them instead of "at" or "vs". */
.wk-score { display: flex; align-items: center; gap: clamp(16px, 4.5vw, 44px); font-family: var(--display); font-variant-numeric: tabular-nums; }
.wk-score b { min-width: 1.15em; text-align: center; font-size: clamp(52px, 11vw, 92px); font-weight: 500; line-height: 0.95; letter-spacing: -0.045em; color: var(--muted); }
.wk-score b.fav { font-weight: 800; color: var(--ink); }
/* On a phone the score gets its own row on top, with the two teams side by side under it. */
@media (max-width: 560px) {
  .wk-face { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .wk-score { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .wk-score b { font-size: clamp(56px, 18vw, 80px); }
}
.wk-score b + b { position: relative; }
.wk-score b + b::before { content: ""; position: absolute; left: calc(-0.5 * clamp(16px, 4.5vw, 44px) - 1px); top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: var(--line); }
.wk-line { margin: 10px auto 0; max-width: 70ch; text-align: center; font-size: 14px; color: var(--muted); }
.wk-units { display: grid; gap: 12px; margin-top: 16px; }
.wk-unit { padding: 14px 16px; border-radius: var(--radius-small); background: var(--wash); min-width: 0; }
.wk-unit h4 { margin: 0 0 10px; font-family: var(--display); font-size: 17px; letter-spacing: -0.015em; }
.wk-cols { display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.wk-list h5 { margin: 0; font: 600 11.5px var(--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.wk-list div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
.wk-list div:last-child { border-bottom: 0; }
.wk-list span { color: var(--muted); }
.wk-list b { font-variant-numeric: tabular-nums; }
.wk-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.wk-weeks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 22px 6px 0; font-size: 14px; color: var(--on-bg-muted); }
.wk-weeks a { color: var(--on-bg); font-weight: 600; }
.wk-waiting, .wk-method { margin: 14px 6px 0; }
.wk-method { margin-top: 22px; }
@media (min-width: 760px) {
  .wk-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-deep { padding: 6px 22px 22px; }
}

/* The picture page: choose games on one side, the picture on the other. */
.share { display: grid; gap: 16px; align-items: start; }
.share-list { list-style: none; margin: 12px 0 0; padding: 0; max-height: 520px; overflow-y: auto; }
.share-list label { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; cursor: pointer; }
.share-list input { width: 18px; height: 18px; flex: none; accent-color: var(--ink); }
.share-list small { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.share-list label.off { opacity: 0.45; cursor: default; }
.share-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.share-view { display: grid; gap: 14px; justify-items: start; }
.share-view img { display: block; width: 100%; max-width: 460px; height: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--wash); aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .share { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

/* ---------- Home: the front door ---------- */
/* The one piece of the site that is not a rounded card: the picture runs from the side menu (or the
   left edge on a phone) to the right edge of the window, shows the whole image, then fades into the page. */
body.home { overflow-x: clip; }
.home-hero {
  --bleed: calc(100vw - var(--bleed-left, 0px) - var(--rail, 0px));
  position: relative; isolation: isolate; display: flex; overflow: hidden;
  width: var(--bleed); margin-left: calc((100% - var(--bleed)) / 2);
  aspect-ratio: 16 / 9; min-height: 560px; background: #141a3c;
}
.home-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.home-art.drawn { object-position: 50% 100%; image-rendering: pixelated; }
/* A dark wash behind the words, so they read cleanly over the sky and the crowd. */
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 13, 34, 0.9) 0%, rgba(10, 13, 34, 0.74) 40%, rgba(10, 13, 34, 0) 64%); }
/* The bottom of the picture fades into the page, light or dark. */
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 68%, var(--bg) 100%); }
.home-copy { align-self: flex-start; max-width: 640px; padding: clamp(26px, 4vw, 56px) clamp(18px, 4vw, 56px); color: #ffffff; text-shadow: 0 1px 2px rgba(10, 13, 34, 0.55); }
.home-kicker { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.82); }
.home-copy h1 { margin-top: 10px; font-size: clamp(36px, 5.6vw, 66px); line-height: 0.98; letter-spacing: -0.04em; color: #ffffff; text-wrap: balance; }
.home-copy p { margin-top: 16px; max-width: 42ch; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; text-shadow: none; }
.btn.glass { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.home-hero + .section { position: relative; margin-top: -24px; }
@media (min-width: 900px) {
  .home-hero { min-height: 460px; }
  .home-art.drawn { object-position: 50% 100%; }
  .home-hero::before {
    background: linear-gradient(98deg, rgba(10, 13, 34, 0.92) 0%, rgba(10, 13, 34, 0.74) 34%, rgba(10, 13, 34, 0) 62%);
    /* The wash behind the words stays up top, so the bottom of the picture fades the same on the left as on the right. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 78%);
  }
}

.home-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 6px 14px; color: var(--on-bg); }
.home-head h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.03em; }
.home-head a { font-size: 14px; font-weight: 600; color: var(--on-bg); }
.home-games { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.home-game { display: grid; gap: 6px; padding: 18px 20px 16px; text-decoration: none; transition: transform 0.15s ease; }
.home-game:hover, .home-feature:hover { transform: translateY(-2px); }
.home-when { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.home-team { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--muted); font-size: 18px; }
.home-team .name { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); letter-spacing: -0.02em; }
.home-team .pts { font-family: var(--display); font-size: 34px; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.home-team.fav { color: var(--ink); }
.home-team.fav .name { font-weight: 700; }
.home-team.fav .pts { font-weight: 800; }
.home-pick { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 11px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.home-pick b { color: var(--ink); }
.home-game .more, .home-feature .more { font-weight: 600; color: var(--brand); white-space: nowrap; }
.home-game .more::after, .home-feature .more::after { content: " \2192"; }
.home-note { margin: 12px 6px 0; }
.home-features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.home-feature { display: flex; flex-direction: column; gap: 8px; padding: 20px; text-decoration: none; transition: transform 0.15s ease; }
.home-feature h3 { font-size: 20px; letter-spacing: -0.025em; }
.home-feature p { flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.home-feature .more { margin-top: 4px; font-size: 13.5px; }
.home-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.home-close h3 { font-size: 19px; letter-spacing: -0.02em; }
.home-close p { margin-top: 6px; max-width: 62ch; font-size: 14.5px; color: var(--muted); }
.home-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .home-game, .home-feature { transition: none; } .home-game:hover, .home-feature:hover { transform: none; } }

/* ---------- Rankings ---------- */
.find { min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 500 14px var(--body); color: var(--ink); min-width: 0; width: 220px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rank-table th, .rank-table td { padding: 10px 12px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.rank-table thead th { border-top: 0; padding-top: 0; color: var(--muted); font-weight: 500; font-size: 12.5px; white-space: normal; vertical-align: bottom; min-width: 84px; }
.rank-table thead th:nth-child(1), .rank-table thead th:nth-child(3) { min-width: 0; }
/* The team name stays put while the numbers scroll sideways on a phone. */
.rank-table th:nth-child(2), .rank-table td:nth-child(2) { position: sticky; left: 0; background: var(--card); }
.rank-table tr.mine td:nth-child(2) { background: color-mix(in srgb, var(--team) var(--mine, 9%), var(--card)); }
.rank-table th:nth-child(1), .rank-table td:nth-child(1) { text-align: left; padding-left: 0; width: 52px; }
.rank-table th:nth-child(2), .rank-table td:nth-child(2) { text-align: left; }
.rank-table th:last-child, .rank-table td:last-child { padding-right: 0; }
.rank-table .rk { font-family: var(--display); font-weight: 700; font-size: 16px; }
.rank-table .tm a { font-weight: 600; text-decoration: none; }
.rank-table .tm a:hover { text-decoration: underline; }
.rank-table .muted { color: var(--muted); }
.rank-table td small { display: inline-block; min-width: 44px; margin-left: 8px; color: var(--muted); font-size: 12.5px; text-align: left; }
.rank-table tr.mine td { background: color-mix(in srgb, var(--team) var(--mine, 9%), var(--card)); }
.rank-table tr.mine td:first-child { box-shadow: inset 4px 0 0 var(--team); padding-left: 12px; }
.empty-find { padding: 18px 0 4px; color: var(--muted); font-size: 14.5px; }

@media (max-width: 560px) {
  :root { --pad: 18px; --radius: 20px; }
  .find { width: 100%; }
  .rank-table th, .rank-table td { padding: 10px 7px; }
  .rank-table td small { min-width: 0; margin-left: 5px; }
  .score-top { padding: 16px 14px 14px; gap: 8px; }
  .side .has { font-size: 11.5px; }
  .side .who { gap: 6px; }
  .side .team { font-size: 18px; line-height: 1.05; overflow-wrap: break-word; }
  .side .ball { width: 22px; }
  .status { max-width: 108px; margin-top: 12px; padding: 8px 9px 7px; border-radius: 13px; gap: 4px; }
  .status .chip { min-height: 24px; padding: 2px 9px; font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; }
  .status .week { font-size: 11px; line-height: 1.25; }
  .score-rule { padding: 0 18px; }
  .score-rule .strip-toggle { margin-right: -10px; }
  .score-details { padding: 2px 18px 14px; }
  .score-details b { font-size: 18px; }
  .half-panel { padding: 0 18px 14px; }
  .half-stats b { font-size: 17px; }
  .flow-table { font-size: 13px; }
  .flow-table th, .flow-table td { padding: 7px 3px; }
  .field-card { padding: 8px 8px 6px; }
  .situation { font-size: 25px; }
  .odds-figures .value { font-size: 46px; }
  .grade .letter { font-size: 76px; }
  .log li { grid-template-columns: 60px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- About ---------- */
.page-head .jump { margin-top: 18px; }
.about-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-grid h3 { font-size: 17px; margin-bottom: 6px; }
.about-grid p { color: var(--muted); font-size: 14.5px; }
.about-text { max-width: 860px; }
.about-text p { max-width: 72ch; }
.about-text p + p, .about-text ul + p, .about-text p + ul { margin-top: 12px; }
.about-text ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 74ch; }
.about-text a { color: inherit; font-weight: 600; }
.about-list { display: grid; margin: 0; }
.about-list > div { display: grid; gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.about-list > div:first-child { border-top: 0; padding-top: 0; }
.about-list > div:last-child { padding-bottom: 0; }
.about-list dt { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.015em; }
.about-list dd { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 70ch; }
@media (min-width: 760px) { .about-list > div { grid-template-columns: 190px minmax(0, 1fr); } }
.section[id] > h2 { scroll-margin-top: 90px; }

/* ---------- Game page: a layout the viewer can arrange ----------
   layout.js adds three things to each box under the field: a caret in the
   corner that minimizes it, a one-line bar it shrinks to, and a row of
   controls that shows while "Customize layout" is on. */
.layout-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; margin: 10px 6px -4px; min-height: 28px; }
.layout-bar p { flex: 1 1 320px; color: var(--on-bg-muted); font-size: 13.5px; }
.live-note { color: var(--on-bg-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.live-refresh { margin-right: auto; text-decoration: underline; text-underline-offset: 3px; }
.live-refresh:disabled { opacity: 0.5; cursor: default; }
.layout-hidden { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.layout-hidden .chip { cursor: pointer; font-weight: 600; }
.layout-link { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 4px; border: 0; background: none; color: var(--on-bg-muted); font: 600 13px var(--body); cursor: pointer; border-radius: 8px; }
.layout-link:hover { color: var(--on-bg); }
.layout-link[aria-pressed="true"] { padding: 0 14px; min-height: 32px; background: var(--solid); color: var(--on-solid); border-radius: 999px; }
.layout-link[aria-pressed="true"] svg { display: none; }

.game-grid .card[data-card] { position: relative; }
.game-grid .card[data-card] > .card-head { padding-right: 30px; }
.card.user-hidden { display: none !important; }
.lay-min { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--faint); cursor: pointer; }
.lay-min svg { transform: rotate(180deg); }
.lay-min:hover { background: var(--wash); color: var(--ink); }

/* Minimized: only the bar is left, with the box's name and its latest line. */
.card.is-min > *:not(.lay-bar):not(.lay-tools) { display: none !important; }
.game-grid .card.is-min { padding: 4px 8px 4px var(--pad); }
.lay-bar { display: none; width: 100%; align-items: center; gap: 12px; min-height: 42px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.card.is-min > .lay-bar { display: flex; }
.lay-bar b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.015em; white-space: nowrap; }
.lay-line { flex: 1; min-width: 0; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-open { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--faint); flex: none; }
.lay-bar:hover .lay-open { background: var(--wash); color: var(--ink); }
.card.is-pinned { box-shadow: inset 0 3px 0 var(--team), var(--shadow); }
@media (max-width: 560px) {
  /* On a phone the line goes under the name, and may run to two lines. */
  .lay-bar { flex-wrap: wrap; gap: 0 12px; padding: 6px 0; }
  .lay-bar b { flex: 1; }
  .lay-line { order: 3; flex-basis: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 0 4px; }
}

/* The row of controls on each box while the layout is being changed. */
.lay-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 30px 14px 0; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.card.is-min > .lay-tools { margin: 8px 0 4px; }
.lay-tools button { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 12.5px var(--body); cursor: pointer; white-space: nowrap; }
.lay-tools button:hover:not(:disabled) { border-color: var(--ink); }
.lay-tools button:disabled { color: var(--faint); cursor: default; }
.lay-tools button[aria-pressed="true"] { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.game-grid.customizing .card[data-card] { border: 1px dashed var(--faint); }

/* ---------- Wide screens with a mouse: the header becomes a side menu ----------
   Brand, the team being followed (in its own color), the pages, then the
   dark mode switch at the foot. Phones and tablets keep the bar across the
   top, whatever their width, because they have no pointer that hovers. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  html { scroll-padding-top: 16px; }
  .topbar::before { display: none; }
  body { padding-left: var(--side-width); --bleed-left: var(--side-width); }
  .page { max-width: 1216px; padding: 26px 28px 56px; }
  .home-hero { margin-top: -26px; }
  .topbar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 6; width: var(--side-width);
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    margin: 0; padding: 20px 14px 14px;
    background: var(--side); border: 0; border-radius: 0; box-shadow: none;
    overflow-y: auto;
    /* The side menu is dark in light mode and in dark mode, so it carries its own colors. */
    --ink: #f3f1e8; --muted: #c9ccd1; --faint: #8d929a;
    --wash: rgba(255, 255, 255, 0.08); --card: rgba(255, 255, 255, 0.12); --line: rgba(255, 255, 255, 0.12);
    --pass: #74aeea; --brand: #6fcf9b;
    color: var(--ink); color-scheme: dark;
  }
  .topbar .brand { order: 1; padding: 0 6px; font-size: 17px; }

  /* The team being followed: a card in the team's color whose name is the menu to change it. */
  .pick {
    order: 2; position: relative; display: block; margin: 20px 0 0; padding: 12px 14px 20px;
    border-radius: 16px; background: var(--pick, var(--deep)); color: var(--pick-text, #fff);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  .pick label { position: static; display: block; font-size: 12px; font-weight: 500; color: inherit; opacity: 0.82; }
  .pick-box { position: relative; display: block; padding: 0; background: none; color: inherit; border-radius: 0; box-shadow: none; }
  .pick-box .dot { display: none; }
  .pick select, html.dark .pick select {
    display: block; width: 100%; max-width: none; min-height: 32px; padding: 0 22px 0 0;
    background-image: none; color: inherit;
    font: 700 21px/1.2 var(--display); letter-spacing: -0.02em;
  }
  .pick select option { color: #16181d; background: #fff; font: 400 15px var(--body); }
  .pick-box::after { content: ""; position: absolute; right: 3px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; }
  /* Hash marks along the foot of the card, like the ones painted on the field. */
  .pick::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 5px; opacity: 0.3; background: repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 9px); pointer-events: none; }

  .topbar nav { order: 3; flex: 1 0 auto; flex-direction: column; gap: 2px; margin: 18px 0 0; }
  .topbar nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; }
  .topbar nav a:hover { background: var(--wash); }
  .topbar nav a.on { background: var(--card); color: var(--ink); font-weight: 600; }
  .nav-icon { display: block; flex: none; color: var(--faint); }
  .topbar nav a:hover .nav-icon { color: var(--muted); }
  .topbar nav a.on .nav-icon { color: var(--brand-light); }

  .theme {
    order: 4; display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    width: auto; height: auto; margin: 12px 0 0; padding: 9px 10px; border-radius: 10px;
    font: 500 14.5px var(--body);
  }
  .theme svg { flex: none; }
  .theme-label { display: inline; }
  .theme[aria-pressed="true"] { background: var(--wash); color: var(--ink); }
  /* The ad square sits right under Compare and stays put, because the side menu never scrolls.
     Dark mode and the small links keep the foot of the menu. */
  .ad-side { order: 3; display: grid; margin: 18px auto 0; }
  .ad-side .ad-label { color: var(--faint); }
  .ad-side .ad-preview { border-color: rgba(255, 255, 255, 0.28); color: var(--muted); }
  .topbar:has(.ad-side) nav { flex: 0 0 auto; }
  .topbar:has(.ad-side) .theme { margin-top: auto; padding-top: 9px; }
  .topbar:has(.ad-side) .ad-side { margin-bottom: 12px; }
  /* A shorter window: a smaller square, and the two small links (also in the footer) step aside. */
  @media (max-height: 800px) {
    .ad-side .ad-box { width: 180px; height: 150px; }
    .topbar:has(.ad-side) .side-link { display: none; }
  }
  /* Too short even for that: the menu keeps its links and the square waits for a taller window. */
  @media (max-height: 640px) { .ad-side { display: none; } }
  /* On a computer: the banner at the bottom of the page, and no pinned strip. */
  .ad-foot { display: grid; margin: 44px auto 0; }
  .ad-bottom { display: none; }
  body.has-bottom-ad { padding-bottom: 0; }
  .side-link { order: 5; display: block; padding: 6px 10px; border-radius: 10px; color: var(--muted); font-size: 13.5px; text-decoration: none; }
  .side-link:hover { color: var(--ink); background: var(--wash); }

  /* The team's color now lives in the side menu, so a team page opens with a plain title. */
  .hero { padding-top: 4px; }
  .hero .team-panel, .page-head .team-panel { padding: 0; margin: 0; border-radius: 0; background: none; color: var(--on-bg); box-shadow: none; }
  html.dark .hero .team-panel, html.dark .page-head .team-panel { box-shadow: none; }
  .hero .team-panel h1, .page-head .team-panel h1 { font-size: 44px; }
  .hero .team-panel .eyebrow, .hero .team-panel .lede, .page-head .team-panel .eyebrow, .page-head .team-panel .lede { color: var(--on-bg-muted); opacity: 1; }
  .hero .team-panel .season-line > span, .page-head .team-panel .season-line > span { opacity: 1; }
  .hero .team-panel .lede, .page-head .team-panel .lede { margin-top: 8px; font-size: 16px; }
  .hero .team-panel .chips { margin-top: 14px; }
  .page-head { padding-top: 4px; }

}

/* ---------- Save as image ----------
   export.js copies a section into .export-frame off screen and turns it into a PNG. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-export] { position: relative; }
.export-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.export-btn svg { flex: none; }
.export-btn[disabled] { opacity: 0.6; cursor: progress; }
/* The icon in a box's corner. On the game page it sits beside the minimize arrow. */
.export-corner { position: absolute; top: 12px; right: 12px; z-index: 2; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--faint); }
.export-corner:hover { background: var(--wash); color: var(--ink); }
.card[data-card] > .export-corner { right: 44px; }
.scorecard > .export-corner { top: 10px; right: 10px; color: rgba(255, 255, 255, 0.75); }
.scorecard > .export-corner:hover { background: rgba(0, 0, 0, 0.18); color: #fff; }
.game-grid .card[data-card] > .card-head { padding-right: 64px; }
.export-frame { position: fixed; left: -100000px; top: 0; display: grid; gap: 18px; padding: 28px 32px 22px; background: var(--bg); color: var(--ink); font-family: var(--body); }
.export-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.export-brand { display: inline-flex; align-items: center; gap: 10px; font: 500 24px/1 var(--display); letter-spacing: -0.035em; color: var(--ink); }
.export-brand b { font-weight: 800; }
.export-title { display: grid; justify-items: end; gap: 3px; text-align: right; }
.export-title b { font: 700 18px/1.15 var(--display); letter-spacing: -0.02em; }
.export-title small { font: 500 13px/1.2 var(--body); color: var(--muted); }
.export-copy { margin: 0 !important; width: auto !important; max-width: none !important; }
.export-copy .bracket, .export-copy .table-scroll { overflow: visible !important; }
.export-copy .champ-odds { min-width: 0; }
.export-card { background: var(--card); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow); }
.export-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 2px; font-size: 12.5px; color: var(--muted); }
.export-foot b { color: var(--ink); font-weight: 700; letter-spacing: 0.01em; }
/* The preview shown on a phone, with the button that opens the share sheet. */
.export-sheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(10, 12, 16, 0.72); }
.export-panel { display: grid; gap: 12px; width: min(520px, 100%); max-height: 100%; padding: 14px; border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.export-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
.export-strip img { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; background: var(--bg); scroll-snap-align: center; }
.export-panel p { font-size: 13.5px; color: var(--muted); text-align: center; }
.export-row { display: flex; gap: 10px; }
.export-row .btn { flex: 1; }
.wk-open .export-btn { margin-right: 8px; }
@media (max-width: 759px) { .wk-open { gap: 8px; } .wk-open .export-btn { margin-right: 0; } }
/* The copy keeps none of its place in the page's own layout (order, grid spot, margins). */
.export-frame > .export-copy { order: 0 !important; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; width: auto !important; max-width: none !important; }
/* In a picture, sizes that follow the screen width are set to fixed ones. */
.export-copy .wk-face { gap: 20px; }
.export-copy .wk-score { gap: 34px; }
.export-copy .wk-score b { font-size: 84px; }
.export-copy .wk-score b + b::before { left: -18px; }
.export-copy .wk-side b { font-size: 22px; }
.export-copy.champ-card { grid-template-columns: 1fr; }
.export-copy.champ-card .who { font-size: 64px; }

/* A short notice at the foot of every page, above the footer, set with SITE_NOTICE (for example during launch). */
.site-notice { margin: 36px 6px 0; padding: 10px 14px; border-radius: 12px; background: var(--card); color: var(--muted); font-size: 13.5px; line-height: 1.45; box-shadow: 0 0 0 1px var(--line); }