/* ==========================================================================
   Dan Buron Dynasty League — Tecmo Bowl / NES styling.

   Rules this sheet follows, so additions stay consistent:
     - No gradients, no border-radius, no blur, no skew. Hard edges only.
     - Colors come from the NES palette below. Do not invent new ones.
     - Borders are 3px solid. Depth is faked with a hard offset shadow.
     - Motion is on/off (a blinking cursor), never eased.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* NES palette, turf-green build. These are real hardware colors. */
  --black:    #07110b;   /* page ground, near-black with a hint of green */
  --panel:    #111613;   /* screen fill: neutral, so green reads as an accent */
  --panel-2:  #1b211d;   /* raised rows */
  --turf:     #00a800;   /* bright NES green, borders and accents */
  --turf-dk:  #2e3831;   /* quiet borders: grey with a trace of green */
  --white:    #fcfcfc;
  --chrome:   #bcbcbc;   /* NES light gray, body text */
  --muted:    #7c7c7c;   /* NES mid gray */
  --yellow:   #f8d800;   /* selection */
  --orange:   #f8b800;
  --red:      #f83800;   /* losses, alerts */
  --lime:     #b8f818;   /* wins — reads clearly against the turf greens */
  --pink:     #f878f8;   /* NES pink, used only for the Potential bar */

  --px: "Press Start 2P", "Courier New", monospace;  /* chrome: short text only */
  --term: "VT323", "Courier New", monospace;         /* prose: long text */
}

* { box-sizing: border-box; border-radius: 0 !important; }

html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--term);
  font-size: 19px;
  line-height: 1.35;
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
  padding-block: 16px 104px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: none;
}

/* CRT scanlines over the whole page. Decorative only — never eats clicks. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,0.10) 0 1px, transparent 1px 3px);
}

.wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 60; background: var(--yellow); color: var(--black); padding: 10px 12px; font-family: var(--px); font-size: 10px; }

/* --- Title bar --- */
.titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; border-bottom: 3px solid var(--turf); padding-bottom: 10px; }
.logo { margin: 0; line-height: 0; }
.wordmark { display: block; width: clamp(210px, 44vw, 430px); height: auto; }
.wordmark text { font-family: var(--px); text-anchor: middle; }
.wordmark .l1 { font-size: 24px; }
.wordmark .l2 { font-size: 30px; }
/* Line two is split around the football, so each half is placed from its left edge. */
.wordmark .l2a, .wordmark .l2b { text-anchor: start; }
/* Stacked layers build the Tecmo wordmark: hard shadow, heavy keyline,
   thin dark bevel, then the face. paint-order keeps strokes behind fills. */
.wm-shadow { fill: #000; stroke: #000; stroke-width: 13; stroke-linejoin: round; paint-order: stroke; }
.wm-key    { fill: var(--turf-dk); stroke: var(--turf-dk); stroke-width: 13; stroke-linejoin: round; paint-order: stroke; }
.wm-bevel  { fill: #000; stroke: #000; stroke-width: 6; stroke-linejoin: round; paint-order: stroke; }
.wm-face-1 { fill: var(--white); }
.wm-face-2 { fill: var(--yellow); }
/* Screen-reader name for the wordmark. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.status { font-family: var(--px); font-size: 9px; line-height: 1.8; text-transform: uppercase; color: var(--chrome); display: flex; gap: 14px; flex-wrap: wrap; }
.status b { color: var(--yellow); font-weight: 400; }

/* --- Main grid --- */
.main { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 800px) { .main { grid-template-columns: minmax(0, 1fr); } }

/* --- Menu rail: a Tecmo play-select list --- */
.menu { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: var(--px); font-size: 10px; line-height: 1.5; text-transform: uppercase;
  color: var(--chrome); background: var(--panel);
  border: 3px solid var(--turf-dk);
  padding: 9px 10px 9px 8px;
}
/* The cursor column is always reserved so nothing shifts when selection moves. */
.menu button::before {
  content: "\25BA"; width: 10px; flex: 0 0 10px;
  color: transparent; font-size: 9px;
}
.menu button small { margin-left: auto; font-size: 8px; color: var(--muted); white-space: nowrap; }
.menu button:hover:not([disabled]), .menu button:focus-visible { color: var(--white); border-color: var(--turf); }
.menu button:hover:not([disabled])::before { color: var(--turf); }
.menu button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.menu button[aria-current="true"] {
  color: var(--black); background: var(--yellow); border-color: var(--white);
}
.menu button[aria-current="true"]::before { color: var(--black); animation: blink 0.9s steps(1) infinite; }
.menu button[aria-current="true"] small { color: #5a4a00; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 800px) {
  .menu { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  .menu button small { display: none; }
  .menu button::before { display: none; }
}

/* --- Screen panel --- */
.screen {
  min-width: 0; background: var(--panel);
  border: 3px solid var(--turf);
  box-shadow: 6px 6px 0 var(--turf-dk);   /* hard drop shadow, NES dialog style */
  padding: 18px clamp(12px, 2.6vw, 24px) 24px;
}
.screen h2 { font-family: var(--px); font-size: clamp(13px, 2.4vw, 20px); line-height: 1.4; text-transform: uppercase; margin: 0 0 10px; color: var(--white); }
.eyebrow { font-family: var(--px); font-size: 8px; line-height: 1.8; text-transform: uppercase; color: var(--yellow); margin: 0 0 6px; }
.sub { color: var(--chrome); margin: 0 0 16px; font-family: var(--term); font-size: 18px; }
.panel-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.block { display: grid; gap: 9px; min-width: 0; align-content: start; }
.block.full { grid-column: 1 / -1; }
.block-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 3px solid var(--turf-dk); padding-bottom: 6px; }
.block-h h3 { font-family: var(--px); font-size: 10px; line-height: 1.5; text-transform: uppercase; margin: 0; color: var(--white); }
.linkbtn { all: unset; cursor: pointer; font-family: var(--px); font-size: 8px; text-transform: uppercase; color: var(--yellow); }
.linkbtn:hover { color: var(--white); }
.linkbtn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.linkbtn[disabled] { color: var(--muted); cursor: default; }

/* --- Newsletter feature card --- */
.issue { background: var(--black); border: 3px solid var(--turf-dk); border-left-width: 8px; border-left-color: var(--yellow); padding: 12px 14px; display: grid; gap: 8px; }
.issue .kicker { font-family: var(--px); font-size: 8px; line-height: 1.7; text-transform: uppercase; color: var(--muted); }
.issue h4 { font-family: var(--px); font-size: 11px; line-height: 1.6; margin: 0; text-transform: uppercase; color: var(--white); }
.issue p { margin: 0; color: var(--chrome); max-width: 60ch; }

/* --- Matchups: blocky scoreboard rows --- */
.games { display: grid; gap: 8px; }
.game { display: grid; grid-template-columns: minmax(0,1fr) auto; background: var(--panel-2); border: 3px solid var(--turf-dk); }
.side { display: contents; }
.game .t { padding: 7px 9px; font-family: var(--px); font-size: 9px; line-height: 1.5; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.game .s { padding: 7px 10px; font-family: var(--px); font-size: 12px; display: flex; align-items: center; justify-content: flex-end; min-width: 84px; }
.game .w .t, .game .w .s { color: var(--white); }
.game .l .t, .game .l .s { color: var(--muted); }
.game .w .s { color: var(--yellow); }
.game .w .t::after { content: "\25C4"; color: var(--yellow); font-size: 8px; }
.game .l .t img { opacity: .5; }
.games.big { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.gmargin { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--muted); padding: 4px 10px 0 0; text-align: right; }
.av { width: 18px; height: 18px; flex: 0 0 18px; background: var(--panel); object-fit: cover; image-rendering: pixelated; }

/* --- Week / season navigation --- */
.navrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.navrow .spacer { margin-left: auto; }
.chip { all: unset; cursor: pointer; font-family: var(--px); font-size: 9px; text-transform: uppercase; padding: 8px 12px; background: var(--panel-2); color: var(--chrome); border: 3px solid var(--turf-dk); }
.chip:hover:not([disabled]) { color: var(--white); border-color: var(--turf); }
.chip[aria-pressed="true"] { background: var(--yellow); color: var(--black); border-color: var(--white); }
.chip[disabled] { opacity: .35; cursor: default; }
.chip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.wklabel { font-family: var(--px); font-size: 13px; text-transform: uppercase; min-width: 7ch; text-align: center; color: var(--white); }

/* --- Standings table --- */
.tablewrap { overflow-x: auto; border: 3px solid var(--turf-dk); }
table { width: 100%; border-collapse: collapse; min-width: 540px; background: var(--panel); }
caption { text-align: left; font-family: var(--px); font-size: 8px; text-transform: uppercase; color: var(--muted); padding: 6px; }
/* Dark header bars with yellow lettering: the solid green strips were the loudest
   green on the site. A green rule underneath keeps the accent. */
th { font-family: var(--px); font-size: 8px; line-height: 1.6; text-transform: uppercase; color: var(--yellow); background: #0b100c; border-bottom: 3px solid var(--turf); text-align: right; padding: 8px 7px; white-space: nowrap; }
th:nth-child(1), th:nth-child(2) { text-align: left; }
td { padding: 7px; text-align: right; font-family: var(--px); font-size: 9px; line-height: 1.6; border-bottom: 2px solid var(--turf-dk); color: var(--chrome); }
td.rk { text-align: left; font-size: 10px; color: var(--muted); width: 34px; }
td.tm { text-align: left; color: var(--white); white-space: nowrap; }
td.tm span { display: inline-flex; align-items: center; gap: 7px; }
td.tm .mgr { color: var(--muted); font-size: 7px; }
tr.cut td { border-bottom: 3px solid var(--yellow); }
tr.in td.rk { color: var(--yellow); }
tr.me td { background: var(--panel-2); }
.streak.w { color: var(--lime); } .streak.l { color: var(--red); }
.legend { font-family: var(--px); font-size: 8px; line-height: 1.9; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.legend b { color: var(--yellow); font-weight: 400; }

/* --- Newsletter archive --- */
.issues { display: grid; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); }
.issues button { all: unset; cursor: pointer; box-sizing: border-box; display: grid; gap: 5px; padding: 10px; background: var(--panel-2); border: 3px solid var(--turf-dk); }
.issues button:hover, .issues button:focus-visible { border-color: var(--turf); }
.issues button[aria-current="true"] { background: var(--yellow); border-color: var(--white); }
.issues button[aria-current="true"] .wk { color: var(--black); }
.issues button[aria-current="true"] .meta { color: #5a4a00; }
.issues button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.issues .wk { font-family: var(--px); font-size: 10px; line-height: 1.4; text-transform: uppercase; color: var(--white); }
.issues .meta { font-family: var(--px); font-size: 7px; line-height: 1.6; text-transform: uppercase; color: var(--muted); }

/* --- Reader: the long-form screen, where legibility beats novelty --- */
.reader { background: var(--black); border: 3px solid var(--turf-dk); padding: 16px clamp(14px, 2.6vw, 22px) 22px; display: grid; gap: 12px; margin-top: 6px; }
.reader h3 { margin: 0; font-family: var(--px); font-size: clamp(12px, 2.2vw, 16px); line-height: 1.5; text-transform: uppercase; color: var(--white); }
.prose { display: grid; gap: 10px; max-width: 64ch; }
.prose p { margin: 0; font-size: 20px; line-height: 1.4; color: var(--chrome); }
.prose strong { color: var(--white); font-weight: 400; }
.prose em { color: var(--white); }
.prose h4 { margin: 14px 0 2px; font-family: var(--px); font-size: 10px; line-height: 1.6; text-transform: uppercase; color: var(--yellow); }
.prose ol, .prose ul { margin: 0; padding-left: 1.5em; display: grid; gap: 3px; }
.prose li { font-size: 20px; line-height: 1.35; color: var(--chrome); }
.prose li::marker { color: var(--yellow); }
.prose a { color: var(--yellow); }
.prose .shot { margin: 8px 0; max-width: 460px; }
.prose .shot img { display: block; width: 100%; height: auto; border: 3px solid var(--turf-dk); background: var(--panel-2); }
.docnote { font-family: var(--px); font-size: 8px; line-height: 1.9; text-transform: uppercase; color: var(--muted); border-top: 3px solid var(--turf-dk); padding-top: 10px; }
.docnote a { color: var(--yellow); }

/* --- Coming soon --- */
.locked { display: grid; gap: 12px; place-items: start; padding: 20px 0; }
.locked .big { font-family: var(--px); font-size: clamp(16px, 3.4vw, 26px); line-height: 1.4; text-transform: uppercase; color: var(--turf); text-shadow: 3px 3px 0 var(--turf-dk); }
.locked ul { margin: 0; padding-left: 1.3em; color: var(--chrome); display: grid; gap: 4px; max-width: 54ch; font-size: 20px; }
.locked li::marker { color: var(--yellow); }

/* --- Loading / error --- */
.loading { font-family: var(--px); font-size: 9px; line-height: 1.8; text-transform: uppercase; color: var(--muted); padding: 14px 0; }
.loading::after { content: "\25A0"; color: var(--yellow); margin-left: 4px; animation: blink 0.6s steps(1) infinite; }
.errbox { color: var(--chrome); border: 3px solid var(--red); padding: 12px 14px; background: var(--panel); font-size: 19px; }
.errbox b { color: var(--red); font-family: var(--px); font-size: 9px; text-transform: uppercase; display: block; margin-bottom: 8px; font-weight: 400; }
.skel { background: var(--panel-2); border: 3px solid var(--turf-dk); height: 34px; animation: blink 1s steps(1) infinite; }

/* --- Controller hint footer --- */
.hints {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--black); border-top: 3px solid var(--turf);
  font-family: var(--px); font-size: 8px; line-height: 1.8; text-transform: uppercase; color: var(--chrome);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.hintrow {
  display: flex; gap: 16px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  padding: 7px max(14px, env(safe-area-inset-right, 0px)) 7px max(14px, env(safe-area-inset-left, 0px));
}

/* --- Scrolling score ticker ---
   The track holds two identical runs of items and slides left by half its own
   width, so the wrap point is invisible. Duration is set in JS from the
   measured width, so a long week scrolls at the same speed as a short one. */
.ticker { overflow: hidden; border-bottom: 3px solid var(--turf-dk); background: #020a05; }
.ticker-track { display: flex; width: max-content; white-space: nowrap; align-items: center; }
.ticker-track.rolling { animation: roll linear infinite; }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tk-label { padding: 8px 12px; background: var(--turf); color: var(--black); font-size: 8px; }
.tk-game { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-right: 2px solid var(--turf-dk); }
.tk-tm { color: var(--chrome); font-size: 8px; }
.tk-tm.up { color: var(--white); }
.tk-tm.dn { color: var(--muted); }
.tk-sc { color: var(--chrome); font-size: 9px; }
.tk-sc.up { color: var(--yellow); }
.tk-at { color: var(--turf); font-size: 8px; }
.tk-note { display: inline-flex; align-items: center; padding: 8px 14px; border-right: 2px solid var(--turf-dk); color: var(--lime); font-size: 8px; }

.btn-glyph { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 8px; color: var(--white); margin-right: 6px; border: 2px solid var(--white); }
.ga { background: var(--red); } .gb { background: var(--turf-dk); } .gx { background: var(--lime); }
.hints .tick { margin-right: auto; color: var(--yellow); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 1 1 220px; }
@media (max-width: 620px) {
  /* The A/B/X hints are keyboard help; on a phone the strip would just sit
     empty, so drop it and let the ticker stand alone. */
  .hints .glyphs, .hintrow { display: none; }

  /* On phones the ticker goes to the TOP. Newer iPhone Safari floats its
     address bar over the bottom of the page and lets content run underneath,
     so a bottom bar ends up hanging mid-screen with the page scrolling past
     below it. Nothing like that happens at the top. The padding keeps the
     ticker clear of the clock and battery, and its background covers that
     strip so page text never scrolls through behind the status bar. */
  .hints {
    top: 0; bottom: auto;
    border-top: 0; border-bottom: 3px solid var(--turf);
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: 0;
  }
  .ticker { border-bottom: 0; }
  body {
    padding-top: calc(52px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* In-page jumps ("Read issue") stop below the ticker, not under it. */
  html { scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
}


/* NES screens cut, they do not slide. */
@media (prefers-reduced-motion: reduce) {
  .menu button[aria-current="true"]::before, .loading::after, .skel { animation: none; }
}
@media print {
  body::after, .menu, .hints, .navrow, .issues { display: none !important; }
  body { background: #fff; color: #000; }
  .screen, .reader { border: 0; box-shadow: none; background: #fff; }
  .prose p, .prose li { color: #000; }
}


/* ==========================================================================
   Record Book / Hall of Shame / Rivalries
   ========================================================================== */

.rec-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rec { background: var(--black); border: 3px solid var(--turf-dk); padding: 12px 14px 14px; min-width: 0; }
.rec.bad { border-color: #5a1400; }
.rec h3 { font-family: var(--px); font-size: 10px; line-height: 1.5; text-transform: uppercase; margin: 0 0 4px; color: var(--yellow); }
.rec.bad h3 { color: var(--red); }
.rec-note { margin: 0 0 10px; font-size: 17px; color: var(--muted); line-height: 1.25; }
.rec-empty { margin: 6px 0 0; font-size: 18px; color: var(--muted); }
.rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rec-list li { display: grid; grid-template-columns: 18px 84px minmax(0, 1fr); gap: 9px; align-items: baseline; }
.rec-rk { font-family: var(--px); font-size: 9px; color: var(--muted); }
.rec-val { font-family: var(--px); font-size: 11px; color: var(--white); text-align: right; }
.rec.bad .rec-val { color: var(--red); }
.rec-who { min-width: 0; display: grid; gap: 1px; }
.rec-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rec-line .rec-team { overflow: hidden; text-overflow: ellipsis; }
.rec-team { font-family: var(--px); font-size: 8px; line-height: 1.5; color: var(--white); text-transform: uppercase; }
.rec-sub { font-size: 16px; color: var(--muted); line-height: 1.2; }

/* Champions strip */
.champs { margin-bottom: 18px; }
.champs h3 { font-family: var(--px); font-size: 10px; text-transform: uppercase; margin: 0 0 8px; color: var(--yellow); }
.champ-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
.champ { background: var(--panel-2); border: 3px solid var(--yellow); padding: 11px 13px 13px; display: grid; gap: 4px; }
.champ-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.champ-yr { font-family: var(--px); font-size: 14px; color: var(--yellow); }
.champ-id { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.champ .av { width: 20px; height: 20px; flex: 0 0 20px; }
.champ-tm { font-family: var(--px); font-size: 9px; line-height: 1.5; text-transform: uppercase; color: var(--white); }
.champ-sub { font-size: 16px; color: var(--muted); }

/* --- Championship line-up sprites ---
   Stored small and blown up with nearest-neighbour, which is what turns a
   photo into blocks. The bob is two frames with no easing, like a sprite
   idling in an 8-bit game. */
.champ-squad { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 10px; padding-top: 11px; border-top: 2px solid rgba(248,216,0,0.35); }
.sprite-fig { margin: 0; width: 64px; display: grid; justify-items: center; gap: 0; }
.sprite-wrap { display: block; height: 80px; animation: bob 0.86s steps(1, end) infinite; }
@keyframes bob { 0%, 49.9% { transform: translateY(0); } 50%, 100% { transform: translateY(-4px); } }
.sprite { display: block; width: 60px; height: 80px; image-rendering: pixelated; image-rendering: crisp-edges; }
.sprite-missing { display: grid; place-items: center; width: 60px; height: 80px; background: var(--panel); color: var(--muted); font-family: var(--px); font-size: 14px; }
/* A plinth so each sprite reads as standing on something, not floating. */
.sprite-plinth { display: block; width: 40px; height: 4px; background: var(--turf-dk); margin-top: 2px; }
.sprite-fig figcaption { display: grid; justify-items: center; gap: 1px; margin-top: 5px; text-align: center; }
.sp-name { font-family: var(--px); font-size: 6px; line-height: 1.5; text-transform: uppercase; color: var(--white); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-stat { font-family: var(--px); font-size: 6px; color: var(--yellow); }
.sp-kit { font-family: var(--px); font-size: 6px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sprite-wrap { animation: none; } }

/* Rivalries */
.rival-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.rival { background: var(--black); border: 3px solid var(--turf-dk); padding: 12px 14px 14px; min-width: 0; }
.rival-head { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: center; }
.rival-side { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rival-side.right { justify-content: flex-end; text-align: right; }
.rival-tm { font-family: var(--px); font-size: 8px; line-height: 1.5; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.rival-side.up .rival-tm { color: var(--white); }
.rival-score { display: grid; gap: 2px; justify-items: center; }
.rival-rec { font-family: var(--px); font-size: 14px; color: var(--yellow); white-space: nowrap; }
.rival-rec .dash { color: var(--muted); margin: 0 2px; }
.rival-lbl { font-family: var(--px); font-size: 6px; text-transform: uppercase; color: var(--muted); }
.rival-stats { display: grid; gap: 3px; margin-top: 10px; padding-top: 9px; border-top: 2px solid var(--turf-dk); font-size: 16px; color: var(--muted); }
.rival-stats b { color: var(--chrome); font-weight: 400; }
.rival-log { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 3px; }
.rival-log li { display: grid; grid-template-columns: 112px minmax(0, 170px); gap: 12px; font-size: 16px; color: var(--muted); }
.rival-log .rl-score { text-align: right; }
.rl-score { font-family: var(--px); font-size: 8px; color: var(--chrome); }
.rl-score.a, .rl-score.b { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .ticker-track.rolling { animation: none; }
  .ticker { overflow-x: auto; }
}

/* ==========================================================================
   Game of the Week, and the Did You Know panel
   ========================================================================== */

.gotw { gap: 8px; }
.versus {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 10px; align-items: center;
  background: var(--black); border: 3px solid var(--turf-dk); padding: 14px 12px;
}
.vs-side { display: grid; justify-items: center; gap: 5px; min-width: 0; text-align: center; }
.vs-av { width: 36px; height: 36px; flex: 0 0 36px; background: var(--panel-2); object-fit: cover; image-rendering: pixelated; }
.vs-tm { font-family: var(--px); font-size: 9px; line-height: 1.5; text-transform: uppercase; color: var(--white); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vs-rec { font-family: var(--px); font-size: 7px; color: var(--muted); }
.vs-score { font-family: var(--px); font-size: 13px; color: var(--chrome); }
.vs-side.won .vs-tm, .vs-side.won .vs-score { color: var(--yellow); }
.vs-side.lost .vs-tm, .vs-side.lost .vs-score { color: var(--muted); }
.vs-side.lost .vs-av { opacity: .5; }
.vs-pick { font-family: var(--px); font-size: 6px; line-height: 1.6; text-transform: uppercase; color: var(--black); background: var(--yellow); padding: 3px 6px; }

.vs-mid { display: grid; justify-items: center; gap: 4px; padding: 0 4px; }
.vs-word { font-family: var(--px); font-size: 16px; color: var(--red); }
.vs-week { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.vs-verdict { font-family: var(--px); font-size: 6px; line-height: 1.6; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.vs-verdict.right { color: var(--lime); }
.vs-verdict.wrong { color: var(--red); }

@media (max-width: 520px) {
  .versus { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 6px; padding: 12px 8px; }
  .vs-av { width: 30px; height: 30px; }
  .vs-tm { font-size: 7px; }
  .vs-word { font-size: 13px; }
}

.didyou { background: var(--black); border: 3px solid var(--turf-dk); border-left-width: 8px; border-left-color: var(--lime); padding: 11px 14px; display: grid; gap: 6px; justify-items: start; }
.dyk-label { font-family: var(--px); font-size: 8px; text-transform: uppercase; color: var(--lime); }
.dyk-text { margin: 0; font-size: 19px; line-height: 1.35; color: var(--chrome); max-width: 66ch; }

/* ==========================================================================
   Week in Review — the results sequence
   ========================================================================== */

.reel { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.replay {
  background: var(--black); border: 3px solid var(--turf-dk); padding: 12px 14px 14px;
  display: grid; gap: 7px; min-width: 0; opacity: .45;
}
/* A card wakes up when its turn comes, and settles once the count lands. */
.replay.live { opacity: 1; border-color: var(--turf); }
.replay.done { opacity: 1; border-color: var(--turf); }
.rp-label { margin: 0; font-family: var(--px); font-size: 9px; line-height: 1.5; text-transform: uppercase; color: var(--yellow); }
.rp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); padding: 6px 9px; }
.rp-tm { display: flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--px); font-size: 8px; line-height: 1.5; text-transform: uppercase; color: var(--chrome); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-sc { font-family: var(--px); font-size: 12px; color: var(--chrome); font-variant-numeric: tabular-nums; }
.replay .rp-row.w .rp-tm, .replay .rp-row.w .rp-sc { color: var(--white); }
.replay.done .rp-row.w .rp-sc { color: var(--yellow); }
.replay .rp-row.l .rp-tm, .replay .rp-row.l .rp-sc { color: var(--muted); }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-note { font-family: var(--px); font-size: 7px; line-height: 1.7; text-transform: uppercase; color: var(--muted); }
.rp-stamp {
  font-family: var(--px); font-size: 8px; text-transform: uppercase;
  color: var(--black); background: var(--red); padding: 3px 7px;
  opacity: 0; transform: scale(1.6);
}
/* The stamp lands in one step — no easing, like a graphic slammed on screen. */
.replay.done .rp-stamp { opacity: 1; transform: none; transition: opacity .01s steps(1) .05s, transform .01s steps(1) .05s; }
.rp-star { margin: 0; font-size: 17px; color: var(--muted); }
.rp-star b { color: var(--lime); font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .replay { opacity: 1; }
  .replay .rp-stamp { opacity: 1; transform: none; }
}

/* ==========================================================================
   Form guide (main menu)
   ========================================================================== */

.form-calls { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.form-call { background: var(--black); border: 3px solid var(--turf-dk); border-left-width: 8px; padding: 7px 9px; display: grid; gap: 4px; min-width: 0; }
.form-call.hot  { border-left-color: var(--lime); }
.form-call.cold { border-left-color: var(--red); }
.fc-tag { font-family: var(--px); font-size: 7px; text-transform: uppercase; }
.form-call.hot .fc-tag { color: var(--lime); }
.form-call.cold .fc-tag { color: var(--red); }
.fc-tm { display: flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--px); font-size: 8px; line-height: 1.5; text-transform: uppercase; color: var(--white); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-why { font-size: 16px; color: var(--muted); }

.form-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 6px; background: var(--panel-2); }
.form-row.me { outline: 2px solid var(--yellow); outline-offset: -2px; }
.form-tm { display: flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--px); font-size: 7px; line-height: 1.5; text-transform: uppercase; color: var(--chrome); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.form-tm .av { width: 14px; height: 14px; flex: 0 0 14px; }
.form-blocks { display: flex; gap: 3px; }
.fb { display: grid; place-items: center; width: 15px; height: 15px; font-family: var(--px); font-size: 7px; color: var(--black); cursor: default; }
.fb.w { background: var(--lime); }
.fb.l { background: var(--red); color: var(--white); }
.fb.t { background: var(--muted); }

/* Left column of the main menu: newsletter teaser with Did You Know beneath.
   The fact panel stretches to the bottom of the column, so it lines up with
   the Form Guide alongside it however long the current fact is. */
.block.stack { display: flex; flex-direction: column; gap: 16px; }
#fact-slot { flex: 1; display: flex; }
#fact-slot .didyou { flex: 1; align-content: start; }

/* ==========================================================================
   Franchise pages
   ========================================================================== */

/* Team names that open a franchise page. Looks like text, behaves like a link. */
.tm-link { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.tm-link:hover { color: var(--yellow); }
.tm-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.linkbtn.plain { color: var(--white); }
.linkbtn.plain:hover { color: var(--yellow); }

.team-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  background: var(--black); border: 3px solid var(--turf); padding: 14px 16px; margin-bottom: 16px;
}
.team-logo { width: 72px; height: 72px; background: var(--panel-2); object-fit: cover; image-rendering: pixelated; border: 3px solid var(--turf-dk); }
.team-id h2 { margin: 0 0 6px; }
.team-sub { margin: 0 0 3px; font-size: 18px; color: var(--chrome); }
.team-sub b { color: var(--white); font-weight: 400; }
.tbadges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tbadge { font-family: var(--px); font-size: 7px; text-transform: uppercase; padding: 4px 7px; background: var(--panel-2); color: var(--chrome); border: 2px solid var(--turf-dk); }
.tbadge.gold { background: var(--yellow); color: var(--black); border-color: var(--white); }
.team-nums { display: grid; gap: 8px; margin: 0; }
.team-nums div { display: grid; gap: 2px; text-align: right; }
.team-nums dt { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--muted); }
.team-nums dd { margin: 0; font-family: var(--px); font-size: 11px; color: var(--yellow); }
@media (max-width: 640px) {
  .team-head { grid-template-columns: auto minmax(0, 1fr); }
  .team-nums { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .team-nums div { text-align: left; }
  .team-logo { width: 56px; height: 56px; }
}

/* Season table extras. */
/* Not "champ-row": that name already lays out the Record Book's champions strip. */
tr.title-yr td { background: rgba(248, 216, 0, 0.08); }
table.season-tbl td { white-space: nowrap; }
table.season-tbl td.po { white-space: normal; }
td.po { text-align: left; font-size: 8px; white-space: normal; min-width: 120px; }
td.po.gold { color: var(--yellow); }
td.po.red { color: var(--red); }
table.h2h td.up { color: var(--lime); }
table.h2h td.dn { color: var(--red); }
table.h2h { min-width: 0; }

/* Long lists scroll inside their panel rather than stretching the page. */
.scroll { max-height: 560px; overflow-y: auto; scrollbar-color: var(--turf) var(--black); }

/* Timeline. */
.tl { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 14px; }
.tl-year { margin: 0 0 6px; font-family: var(--px); font-size: 9px; line-height: 1.6; text-transform: uppercase; color: var(--yellow); position: sticky; top: 0; background: var(--panel); padding: 4px 0; }
.tl-year span { color: var(--muted); font-size: 7px; margin-left: 6px; }
.tl-season.prev-era .tl-ev { opacity: .72; }
.tl-season.prev-era .tl-year { color: var(--chrome); }
.tl-events { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 3px solid var(--turf-dk); display: grid; gap: 7px; }
.tl-ev { display: grid; grid-template-columns: 104px 96px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.tl-date { font-size: 15px; color: var(--muted); }
.tl-kind { font-family: var(--px); font-size: 6px; line-height: 1.6; text-transform: uppercase; padding: 2px 4px; justify-self: start; }
.k-gold { background: var(--yellow); color: var(--black); }
.k-lime { background: var(--lime); color: var(--black); }
.k-red { background: var(--red); color: var(--white); }
.k-chrome { background: var(--chrome); color: var(--black); }
.k-muted { background: var(--panel-2); color: var(--chrome); }
.tl-body { font-size: 17px; line-height: 1.3; color: var(--chrome); }
.tl-body b { color: var(--white); font-weight: 400; }
.tl-body span { color: var(--muted); }
@media (max-width: 640px) {
  .tl-ev { grid-template-columns: 1fr; gap: 2px; }
}

/* Trade log. */
.trades { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 8px; }
.trade { background: var(--black); border: 3px solid var(--turf-dk); padding: 9px 11px; }
.tr-head { margin: 0 0 7px; font-size: 17px; color: var(--chrome); }
.tr-head span { color: var(--muted); margin-right: 6px; }
.tr-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-label { margin: 0 0 4px; font-family: var(--px); font-size: 7px; text-transform: uppercase; }
.tr-label.got { color: var(--lime); }
.tr-label.gave { color: var(--red); }
.tr-sides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 17px; color: var(--white); }
.tr-pos { font-family: var(--px); font-size: 6px; color: var(--muted); margin-left: 3px; }
.tr-pick { color: var(--yellow) !important; }
.tr-faab { color: var(--lime) !important; }
.tr-none { margin: 0; font-size: 16px; color: var(--muted); }

/* Legends, splits, newsletter, roster. */
.legends { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.legends li { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 9px; align-items: baseline; }
.lg-name { font-size: 18px; color: var(--white); }
.lg-pts { font-family: var(--px); font-size: 10px; color: var(--yellow); text-align: right; display: grid; }
.lg-pts small { font-family: var(--term); font-size: 14px; color: var(--muted); }
.splits { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin: 0 0 8px; }
.splits div { background: var(--black); border: 2px solid var(--turf-dk); padding: 6px 7px; }
.splits dt { font-family: var(--px); font-size: 6px; text-transform: uppercase; color: var(--muted); }
.splits dd { margin: 3px 0 0; font-family: var(--px); font-size: 10px; color: var(--white); }
.split-game { margin: 4px 0 0; font-size: 17px; color: var(--chrome); }
.split-game b { font-family: var(--px); font-size: 7px; font-weight: 400; color: var(--yellow); margin-right: 6px; text-transform: uppercase; }
.split-game span { color: var(--muted); }
.news { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.news li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.news .linkbtn span { color: var(--muted); }
.news .nm { font-size: 15px; color: var(--muted); white-space: nowrap; }
.cm-line { margin: 0; font-size: 18px; line-height: 1.35; color: var(--chrome); }
.cm-line b { color: var(--yellow); font-weight: 400; }
.roster { margin: 0; display: grid; gap: 8px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ro-grp dt { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--yellow); }
.ro-grp dd { margin: 3px 0 0; font-size: 17px; line-height: 1.35; color: var(--chrome); }


/* ==========================================================================
   Ratings card (franchise page) — modelled on Tecmo's player data screen
   ========================================================================== */

.tcard { background: var(--black); border: 3px solid var(--turf); box-shadow: 6px 6px 0 var(--turf-dk); padding: 14px 16px 14px; margin-bottom: 18px; }
.tc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-top h2 { margin: 0; }
.tc-label { font-family: var(--px); font-size: 10px; text-transform: uppercase; color: var(--yellow); }
.tc-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 26px; }
@media (max-width: 760px) { .tc-main { grid-template-columns: minmax(0, 1fr); } }

.tc-id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.tc-mgr { margin: 0 0 4px; font-family: var(--px); font-size: 10px; text-transform: uppercase; color: var(--white); }
.tc-note { margin: 0 0 3px; font-size: 16px; color: var(--muted); }
.tc-cond { margin: 6px 0 0; font-family: var(--px); font-size: 7px; line-height: 1.8; text-transform: uppercase; color: var(--chrome); }
.tc-cond b { font-weight: 400; }
.cond-excellent { color: var(--lime); }
.cond-good { color: var(--white); }
.cond-average { color: var(--orange); }
.cond-bad { color: var(--red); }
.tcard .tbadges { margin: 10px 0 0; }

/* The two stat boxes, like PASSING / RUSHING on the original. */
.tc-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tc-boxes h4, .tc-ab {
  margin: 0 0 7px; font-family: var(--px); font-size: 9px; font-weight: 400; text-transform: uppercase;
  color: var(--white); display: inline-block; border-bottom: 3px solid var(--pink); padding-bottom: 2px;
}
.tc-boxes dl { margin: 0; display: grid; gap: 4px; }
.tc-boxes dl div { display: flex; justify-content: space-between; gap: 8px; }
.tc-boxes dt { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--yellow); border-bottom: 2px solid var(--pink); align-self: start; }
.tc-boxes dd { margin: 0; font-family: var(--px); font-size: 10px; color: var(--white); }

/* Ability bars. */
.tc-right { min-width: 0; }
.tc-ab { display: block; width: max-content; margin: 0 auto 10px; border-bottom-color: var(--lime); }
.ab { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ab li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 30px; gap: 10px; align-items: center; }
.ab-name { font-family: var(--px); font-size: 8px; text-transform: uppercase; color: var(--white); }
.ab-bar { display: block; height: 12px; border: 2px solid var(--white); background: var(--black); }
/* Width and solid colour are set per bar from the rating (see team.js). */
.ab-bar i { display: block; height: 100%; }
.ab li.ovr { margin-top: 5px; padding-top: 8px; border-top: 2px solid var(--turf-dk); }
.ab li.ovr .ab-name, .ab li.ovr .ab-val { color: var(--yellow); }
.ab-val { font-family: var(--px); font-size: 10px; color: var(--white); text-align: right; }
.tc-ranks { margin: 10px 0 0; font-size: 16px; color: var(--muted); }
.tc-keys { list-style: none; margin: 14px 0 0; padding: 10px 0 0; border-top: 2px solid var(--turf-dk); display: grid; gap: 3px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); font-size: 16px; color: var(--chrome); }
.tc-keys span { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--yellow); margin-right: 6px; }

/* League ratings table. */
.ratings-tbl { min-width: 620px; }
.ratings-tbl th { text-align: center; }
.ratings-tbl th:nth-child(1), .ratings-tbl th:nth-child(2) { text-align: left; }
.sortbtn { all: unset; cursor: pointer; }
.sortbtn { color: var(--yellow); }
.sortbtn.on, .sortbtn:hover { color: var(--white); }
.sortbtn:focus-visible { outline: 2px solid var(--white); }
td.rt { text-align: center; font-size: 10px; }
td.rt.on { background: rgba(255, 255, 255, 0.05); }
td.rt.t-elite { color: var(--yellow); }
td.rt.t-good { color: var(--white); }
td.rt.t-mid { color: var(--chrome); }
td.rt.t-low { color: var(--muted); }

/* The all-star line-up that defines a 99. */
.allstar { margin-top: 16px; background: var(--black); border: 3px solid var(--turf-dk); padding: 11px 14px; }
.allstar h3 { margin: 0 0 8px; font-family: var(--px); font-size: 9px; text-transform: uppercase; color: var(--yellow); }
.allstar dl { margin: 0; display: grid; gap: 4px; }
.allstar dl div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.allstar dt { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--lime); }
.allstar dd { margin: 0; font-size: 17px; color: var(--chrome); }

.as-note { color: var(--muted); }

/* Pixel trophies beside a franchise's name, one per title. */
.trophies { display: inline-flex; gap: 6px; margin-left: 12px; vertical-align: 2px; }
.trophy { width: 22px; height: 20px; display: block; image-rendering: pixelated; }

/* Manager style on the card (replaces physical condition). */
.ms-style { color: var(--yellow); font-weight: 400; }
.ms-lean { font-weight: 400; }
.ms-lean.buyer { color: var(--orange); }
.ms-lean.seller { color: var(--lime); }

/* Ratings screen: one card at a time, flipped with arrows like a player-select screen. */
.cardnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.cardnav select {
  font-family: var(--px); font-size: 9px; text-transform: uppercase; color: var(--white);
  background: var(--panel-2); border: 3px solid var(--turf-dk); padding: 7px 8px; min-width: 0; max-width: 100%;
}
.cardnav select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.cn-hint { font-size: 15px; color: var(--muted); }
@media (max-width: 640px) { .cn-hint { display: none; } }
.rt-head { margin-top: 6px; }
.ratings-tbl tr.sel td { background: rgba(248, 216, 0, 0.10); }
.tc-link { margin: 10px 0 0; text-align: right; }

/* ==========================================================================
   Database: Title Race chart
   ========================================================================== */

.tr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.tr-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-cap { margin: 0; font-size: 17px; color: var(--chrome); }
.tr-frame { background: var(--black); border: 3px solid var(--turf-dk); padding: 6px 0 2px; overflow: hidden; position: relative; }
.tr-chart { touch-action: pan-y; }
.tr-chart .tr-cross { stroke: var(--white); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.tr-tip { position: absolute; top: 10px; z-index: 2; min-width: 170px; max-width: 240px; padding: 6px 8px;
  background: rgba(0, 0, 0, 0.92); border: 2px solid var(--white); pointer-events: none; }
.tr-tip p { margin: 0; }
.tr-tip-wk { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px !important; }
.tr-tip-row { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.15; color: var(--chrome); }
.tr-tip-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr-tip-pct { color: var(--white); }
.tr-tip-out { font-size: 14px; color: var(--red); margin-top: 3px !important; }
.tr-chart { display: block; }
.tr-chart .tr-grid { stroke: rgba(188, 188, 188, 0.14); stroke-width: 1; }
.tr-chart .tr-band { fill: rgba(248, 216, 0, 0.06); }
.tr-chart .tr-po { fill: var(--yellow); }
.tr-chart .tr-ylab, .tr-chart .tr-xlab { font-family: var(--term); font-size: 16px; fill: var(--muted); }
.tr-chart .tr-axis { font-family: var(--px); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.tr-chart .tr-name { font-family: var(--px); font-size: 8px; text-transform: uppercase; }
.tr-chart .tr-pct { font-family: var(--term); font-size: 17px; fill: var(--white); }
.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-chip {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; background: var(--panel-2); border: 3px solid var(--turf-dk);
}
.tr-chip:hover { border-color: var(--turf); }
.tr-chip[aria-pressed="true"] { border-color: var(--white); }
.tr-chip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tr-dash { width: 14px; height: 4px; flex: 0 0 14px; }
.tr-chip-name { font-family: var(--px); font-size: 7px; text-transform: uppercase; color: var(--white); }
.tr-chip-pct { font-size: 16px; color: var(--muted); }
.tr-how { margin-top: 14px; border-top: 3px solid var(--turf-dk); padding-top: 10px; }
.tr-how summary { cursor: pointer; font-family: var(--px); font-size: 8px; text-transform: uppercase; color: var(--yellow); }
.tr-how p { margin: 8px 0 0; font-size: 18px; line-height: 1.4; color: var(--chrome); max-width: 70ch; }
.tr-chip.is-out { opacity: .55; }
.db-h { margin-top: 28px; }
.luck-toggle { margin-bottom: 10px; }
table.luck-tbl { min-width: 0; }
table.luck-tbl th:nth-child(2) { text-align: right; }
table.luck-tbl td { white-space: nowrap; }
table.luck-tbl td.tm { white-space: normal; }
/* Weekly scores and Schedule ahead: grids of coloured cells. The team column
   stays put while the weeks scroll sideways on a phone. */
table.hm-tbl { min-width: 0; width: 100%; }
table.hm-tbl th, table.hm-tbl td { padding: 5px 2px; text-align: center; }
table.hm-tbl td.tm { text-align: left; padding: 5px 8px 5px 6px; }
table.hm-tbl th:nth-child(2), table.hm-tbl th:first-child { text-align: left; }
table.hm-tbl td.tm, table.hm-tbl th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); white-space: nowrap; }
table.hm-tbl thead th:first-child { background: #0b100c; }
table.hm-tbl tr.me td.tm { background: var(--panel-2); }
table.hm-tbl td.hm-cell { min-width: 30px; color: #000; font-size: 8px; border: 1px solid rgba(0, 0, 0, 0.55); }
table.hm-tbl td.hm-top { background: #5a1e9e; color: var(--white); }
table.hm-tbl td.hm-avg { color: var(--white); text-align: right; padding-left: 8px; padding-right: 6px; }
table.sos-tbl th:first-child { position: static; }
table.sos-tbl th:nth-child(2) { position: sticky; left: 0; z-index: 1; background: #0b100c; text-align: left; }
table.sos-tbl th:nth-child(3), table.sos-tbl th:nth-child(4), table.sos-tbl td:nth-child(3), table.sos-tbl td:nth-child(4) { text-align: right; }
table.sos-tbl td.sos-ahead { color: var(--white); }
table.sos-tbl td.sos-cell { min-width: 34px; font-size: 8px; }
@media (max-width: 520px) {
  .luck-w { display: none; }
  table.luck-tbl td, table.luck-tbl th { padding-left: 5px; padding-right: 5px; }
}
td.luck.up { color: var(--lime); }
td.luck.dn { color: var(--red); }
td.luck { color: var(--muted); }
.tr-chip.is-out .tr-chip-pct { color: var(--red); }
.tr-how p + p { margin-top: 8px; }
.tr-how b { color: var(--white); font-weight: 400; }
.sub .hm-key { color: #b57bff; font-weight: 400; }