:root {
  color-scheme: dark;
  /* Sampled straight from the logo (static/logo.png): navy #08203c, gold
     #c19031, blue #3a8cd6. The base background is that navy, not a
     generic near-black -- last pass only used it as a faint corner glow,
     which still read as "dark mode" rather than "this brand's navy". */
  --bg: #163862;
  --bg-deep: #0f2748;
  --bg-glow: #2a5490;
  --bg-rgb: 22, 54, 98;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-border: rgba(255, 255, 255, 0.11);
  --pixel-border: rgba(255, 255, 255, 0.22);
  --text: #eef1f6;
  --text-dim: #97a3ba;
  --accent: #c9962f;
  --accent-blue: #3a8cd6;
  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  /* Display font ONLY -- headings, scores, badges. Long-form text (insights,
     injury descriptions, the disclaimer) stays in --font on purpose: this
     font is unreadable at paragraph sizes, and it has to stay understandable. */
  --font-pixel: "Press Start 2P", var(--font);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  /* Scanlines painted on top of the navy gradient -- these used to be set via
     a second `background-image` declaration, which silently replaced the
     gradient below instead of layering over it, leaving the page with no
     background-color and letting the browser's dark color-scheme default
     (near-black) show through everywhere. Multiple backgrounds in one
     declaration, first listed = frontmost. */
  background-image:
    repeating-linear-gradient(rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% -10%, var(--bg-glow) 0%, var(--bg) 65%, var(--bg-deep) 100%);
  background-attachment: fixed, fixed;
}

.topbar {
  padding: 18px 28px;
  border-bottom: 2px solid var(--pixel-border);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  display: grid;
  /* Two equal flexible tracks flanking a content-sized middle one --
     unlike flex's "nav absorbs the leftover space between two unequal
     ends" (which only centers the nav within that leftover strip, not on
     the page, whenever the logo and the actions column aren't the same
     width -- they never are), a 1fr/auto/1fr grid keeps the two outer
     columns symmetric no matter how wide either side's own content is, so
     the middle column always sits at the row's true center. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.brand { justify-self: start; }
.topbar-nav {
  display: flex; justify-self: center; justify-content: center;
  min-width: 0; gap: 34px; flex-wrap: wrap; row-gap: 10px;
}
.topbar-nav a {
  color: var(--text-dim); text-decoration: none; font-family: var(--font-pixel); font-size: 0.65rem;
  text-align: center; line-height: 1.6; transition: color .15s;
}
.topbar-nav a:hover { color: var(--accent-blue); }
/* Two-word labels (e.g. "Biggest <br>Decisions") stack on their own two
   lines on purpose -- see i18n.py -- rather than reading as one long run
   next to single-word labels like "Teams". Collapsed back to one line on
   phones, where the nav already gets its own compact wrapped row. */
@media (max-width: 600px) { .topbar-nav a br { display: none; } }

.topbar-actions { display: flex; justify-self: end; align-items: center; gap: 16px; flex-shrink: 0; }
.brand { display: inline-flex; text-decoration: none; }
.brand img {
  display: block;
  height: 46px;
  width: auto;
  border: 2px solid var(--pixel-border);
  clip-path: polygon(
    0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
  );
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }

.hero-logo { position: relative; display: flex; justify-content: center; margin: 4px 0 24px; }
.hero-logo img.hero-mascot {
  position: absolute;
  /* Half the logo's own 280px width, minus a few px so the mascot's own
     left edge (the flat "leaning" edge in the art itself) tucks slightly
     behind the logo's border instead of floating next to it. */
  left: calc(50% + 140px - 4px);
  bottom: 0;
  height: 150px;
  width: auto;
  border: none;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
@media (max-width: 600px) {
  /* Logo shrinks to 200px in this range (see .hero-logo img below) but the
     mascot's offset is tuned for the 280px desktop size -- simplest to just
     hide it here rather than track two width calcs. */
  .hero-logo img.hero-mascot { display: none; }
}
.hero-logo img {
  display: block;
  width: 280px;
  max-width: 70vw;
  height: auto;
  border: 2px solid var(--pixel-border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
}

.season-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.season-tab {
  color: var(--text-dim); text-decoration: none; font-family: var(--font-pixel); font-size: 0.7rem;
  padding: 8px 14px; border-radius: 0; border: 2px solid var(--pixel-border);
  transition: background .15s, color .15s, border-color .15s;
}
.season-tab:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.season-tab.active { color: var(--bg); background: var(--accent); border-color: var(--accent); }

.week-header { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 28px; }
.week-header h1 {
  font-family: var(--font-pixel); font-size: 1.1rem; margin: 0; font-weight: 400;
  letter-spacing: 0; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}
.nav-arrow {
  color: var(--text-dim); text-decoration: none; font-size: 1.4rem;
  padding: 6px 14px; border-radius: 0; border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.nav-arrow:hover { background: var(--panel); color: var(--text); border-color: var(--pixel-border); }

.week-picker {
  display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
  padding: 2px 2px 6px; margin-bottom: 22px; -webkit-overflow-scrolling: touch;
}
.week-picker::-webkit-scrollbar { height: 5px; }
.week-picker::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 0; }
.week-pill {
  flex: 0 0 auto; color: var(--text-dim); text-decoration: none; font-family: var(--font-pixel); font-size: 0.65rem;
  padding: 7px 11px; border-radius: 0; border: 2px solid var(--pixel-border);
  transition: background .15s, color .15s, border-color .15s;
}
.week-pill:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.week-pill.active { color: var(--bg); background: var(--accent); border-color: var(--accent); }

.recap-link-row { text-align: center; margin: -8px 0 22px; }
/* Used where a recap-link-row sits between two unrelated blocks (e.g.
   standings.html, between the division tables and the Playoff Picture
   header) instead of right under its own intro paragraph -- the base
   class's -8px pulls it up against whatever's above, which reads as
   "attached to the wrong section" in that context. */
.recap-link-row-spaced { margin-top: 20px; }
.recap-link { color: var(--accent-blue); text-decoration: none; font-size: 0.85rem; }
.recap-link:hover { text-decoration: underline; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.game-card {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--pixel-border);
  padding: 16px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.game-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--accent);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
}

.card-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 10px; }
.card-top-tags { display: flex; gap: 6px; }
.tag {
  background: rgba(201, 150, 47, 0.16); color: var(--accent); padding: 5px 8px;
  border: 1px solid var(--accent); border-radius: 0; font-family: var(--font-pixel); font-size: 0.62rem;
}
.tag-upset { background: rgba(239, 68, 68, 0.16); color: #ff8080; border-color: #ff8080; }

.matchup { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 14px; }
.team { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 0.95rem; }
.team img {
  width: 42px; height: 42px; object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 5px rgba(255,255,255,.5));
}
.team > span:not(.side-tag) { font-family: var(--font-pixel); font-size: 0.68rem; }
.at { color: var(--text-dim); font-size: 0.85rem; }

.side-tag {
  font-family: var(--font-pixel); font-size: 0.6rem; letter-spacing: 0;
  padding: 5px 8px; border-radius: 0; line-height: 1.6; border: 1px solid currentColor;
}
.home-tag { color: var(--accent); background: rgba(201, 150, 47, 0.16); }
.away-tag { color: var(--accent-blue); background: rgba(58, 140, 214, 0.14); }

.card-meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 8px; gap: 8px; }
.card-lines { display: flex; gap: 14px; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 12px; }
.weather-inline { white-space: nowrap; }

.card-pred { margin-top: 4px; }
.pred-bar { position: relative; height: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-bottom: 4px; }
.pred-fill { height: 100%; transition: width .5s ease; }
/* Segment overlay -- cuts the fill into blocks regardless of the dynamic
   per-team fill color, so this works without touching the Python side. */
.pred-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, var(--bg) 3px 4px);
}
.pred-label { font-size: 0.82rem; color: var(--text-dim); }
.pred-label em { font-style: normal; opacity: 0.75; }
.card-pred.unavailable { font-size: 0.78rem; color: var(--text-dim); font-style: italic; }

.card-result { margin-top: 4px; }
.result-score {
  font-family: var(--font-pixel); font-size: 0.95rem; margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.result-dash { color: var(--text-dim); margin: 0 4px; }
.result-grade { font-size: 0.78rem; display: block; }
.result-grade em { font-style: normal; color: var(--text-dim); opacity: 0.85; }
.result-grade.grade-right { color: #8fe3a3; }
.result-grade.grade-wrong { color: #ff8080; }

/* game detail page */
.back { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; display: inline-block; margin-bottom: 24px; }
.back:hover { color: var(--text); }

.matchup-header { display: flex; align-items: center; justify-content: center; gap: 36px; margin-bottom: 20px; flex-wrap: wrap; }
.team-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.team-block img {
  width: 84px; height: 84px; object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(255,255,255,.5));
}
.team-block h2 { margin: 0; font-family: var(--font-pixel); font-size: 0.85rem; font-weight: 400; text-align: center; line-height: 1.5; }
.coach-line { font-size: 0.76rem; color: var(--text-dim); }
.at-big { color: var(--text-dim); font-size: 1.4rem; }

.game-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 32px; text-align: center; }

.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.detail-main, .detail-side { min-width: 0; }

section {
  background: var(--panel);
  border: 2px solid var(--pixel-border);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
}
section h3 { margin: 0 0 16px; font-family: var(--font-pixel); font-size: 0.72rem; letter-spacing: .04em; color: var(--text-dim); }

.winprob-body { display: flex; align-items: center; gap: 18px; }
.wp-bars { flex: 1; min-width: 0; }
.wp-row { display: grid; grid-template-columns: 44px 1fr 48px; align-items: center; gap: 10px; margin-bottom: 8px; }
.wp-row:last-child { margin-bottom: 0; }
.wp-team { font-family: var(--font-pixel); font-size: 0.68rem; }
.wp-bar { position: relative; height: 10px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.wp-fill { height: 100%; transition: width .7s cubic-bezier(.16, 1, .3, 1); }
.wp-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, var(--bg) 4px 5px);
}
.wp-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.85rem; }

.weather-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding-left: 18px; border-left: 2px solid var(--pixel-border); min-width: 64px;
}
.weather-icon { font-size: 1.5rem; line-height: 1; }
.weather-label { font-family: var(--font-pixel); font-size: 0.62rem; color: var(--text-dim); letter-spacing: .02em; }

.confidence { margin: 14px 0 0; font-size: 0.9rem; }
.confidence-note { color: var(--text-dim); font-size: 0.78rem; display: block; margin-top: 4px; }
.confidence-note a { color: var(--accent-blue); }

.insights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.insights li { padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border-left: 4px solid var(--text-dim); font-size: 0.9rem; }
.insights li.favors-home { border-left-color: var(--home-color); }
.insights li.favors-away { border-left-color: var(--away-color); }
.insights li.muted { color: var(--text-dim); border-left-color: transparent; }

.score-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 16px; }
.score-team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.score-abbr { font-family: var(--font-pixel); font-size: 0.65rem; color: var(--text-dim); }
.score-num { font-family: var(--font-pixel); font-size: 2rem; font-variant-numeric: tabular-nums; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); }
.score-dash { color: var(--text-dim); font-size: 1.6rem; }
.score-facts { display: flex; justify-content: center; gap: 20px; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; }

.score-row.small { gap: 16px; margin-bottom: 10px; }
.score-row.small .score-num { font-size: 1.3rem; }
.score-row.small .score-dash { font-size: 1.2rem; }

.not-yet p.muted, p.unavailable { color: var(--text-dim); font-size: 0.88rem; line-height: 1.55; }
p.muted.small { font-size: 0.8rem; }
code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 2px; font-size: 0.85em; }

/* Single stacked column -- this section lives in the narrow sidebar now,
   not full width, so away/home side-by-side no longer fits comfortably. */
.injury-columns { display: flex; flex-direction: column; gap: 0; }
.injury-col + .injury-col { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--pixel-border); }
.injury-col h4 { margin: 0 0 10px; font-family: var(--font-pixel); font-size: 0.7rem; letter-spacing: .02em; }
.injury-row {
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px;
  padding: 8px 0; border-top: 1px solid var(--panel-border);
}
.injury-row:first-of-type { border-top: none; }
.injury-who { font-size: 0.87rem; }
.injury-who em { font-style: normal; color: var(--text-dim); margin-left: 4px; }
.injury-desc { grid-column: 1; font-size: 0.76rem; color: var(--text-dim); }
.injury-status {
  font-family: var(--font-pixel); font-size: 0.6rem;
  padding: 5px 8px; border-radius: 0; height: fit-content; white-space: nowrap; border: 1px solid currentColor;
}
.status-out { color: #ff8080; background: rgba(239, 68, 68, 0.16); }
.status-doubtful { color: #ffb066; background: rgba(245, 158, 11, 0.16); }
.status-questionable { color: #ffdd66; background: rgba(234, 179, 8, 0.16); }
.status-probable { color: #8fe3a3; background: rgba(34, 197, 94, 0.14); }
.status-note { color: var(--text-dim); background: rgba(255, 255, 255, 0.06); }

/* scoring summary -- a real box-score staple (built from play-by-play
   touchdown/field_goal_result/safety flags), not fabricated commentary. */
.scoring-summary { margin-top: 20px; }
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border-left: 4px solid var(--pixel-border);
}
.sp-qtr { font-family: var(--font-pixel); font-size: 0.6rem; color: var(--text-dim); }
.sp-kind { font-family: var(--font-pixel); font-size: 0.6rem; padding: 3px 6px; border: 1px solid currentColor; }
.sp-kind-td { color: var(--accent); background: rgba(201, 150, 47, 0.14); }
.sp-kind-fg { color: var(--accent-blue); background: rgba(58, 140, 214, 0.14); }
.sp-kind-saf { color: #ff8080; background: rgba(239, 68, 68, 0.14); }
.sp-team { font-weight: 700; }
.sp-desc { flex: 1 1 100%; font-size: 0.82rem; color: var(--text-dim); }
.sp-score { margin-left: auto; font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* fourth-down decisions -- full width, below the two-column detail grid,
   since a game can have several of these and the two-column layout above
   is sized for shorter side content. */
.fourth-down { margin-top: 20px; }
.fd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fd-item {
  padding: 12px 14px; background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid var(--text-dim);
}
.fd-item.fd-blunder { border-left-color: #ff8080; }
.fd-item.fd-clean { border-left-color: #8fe3a3; }
.fd-situation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 6px; }
.fd-qtr { font-family: var(--font-pixel); font-size: 0.62rem; color: var(--text-dim); }
.fd-team { font-weight: 700; }
.fd-endgame {
  font-family: var(--font-pixel); font-size: 0.58rem; color: var(--accent);
  border: 1px solid var(--accent); padding: 3px 6px; background: rgba(201, 150, 47, 0.14);
}
.fd-verdict { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; margin-bottom: 4px; }
.fd-actual { color: var(--text-dim); }
.fd-cost { color: #ff8080; font-weight: 600; }
.fd-agree { color: #8fe3a3; }
.fd-probs { display: flex; gap: 12px; font-size: 0.76rem; color: var(--text-dim); margin-bottom: 6px; }
.fd-desc { font-size: 0.78rem; color: var(--text-dim); margin: 0; }

/* track record page */
.track-record-page { max-width: 780px; margin: 0 auto; }
.tr-intro { color: var(--text-dim); text-align: center; margin: 0 0 24px; font-size: 0.92rem; }
.tr-intro-warn {
  font-size: 0.82rem; max-width: 620px; margin: -14px auto 24px;
  padding: 12px 16px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3);
}
.tr-intro-note { font-size: 0.82rem; color: var(--accent-blue); margin: -14px 0 24px; }

.tr-headline { display: flex; gap: 20px; flex-wrap: wrap; }
.tr-stat { flex: 1; min-width: 200px; text-align: center; }
.tr-stat-num {
  display: block; font-family: var(--font-pixel); font-size: 2.2rem;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); margin-bottom: 8px;
}
.tr-stat-baseline .tr-stat-num { color: var(--text-dim); font-size: 1.6rem; }
.tr-stat-label { font-size: 0.8rem; color: var(--text-dim); }

.tr-band-list { display: flex; flex-direction: column; gap: 18px; }
.tr-band { padding: 14px 16px; background: rgba(255, 255, 255, 0.03); border-left: 4px solid var(--pixel-border); }
.tr-band-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tr-band-name { font-family: var(--font-pixel); font-size: 0.72rem; text-transform: capitalize; }
.tr-band-range { font-size: 0.78rem; color: var(--text-dim); }
.tr-band .wp-row { grid-template-columns: 52px 1fr 48px; }
.tr-band-note { margin: 8px 0 0; font-size: 0.76rem; color: var(--text-dim); }

/* methodology page */
.methodology-page { max-width: 720px; margin: 0 auto; }
.methodology-section { margin-bottom: 34px; }
.methodology-section h2 {
  font-family: var(--font-pixel); font-size: 0.85rem; font-weight: 400;
  color: var(--accent); margin: 0 0 14px;
}
.methodology-body { color: var(--text); font-size: 0.9rem; line-height: 1.7; }
.methodology-body p { margin: 0 0 12px; }
.methodology-body p:last-child { margin-bottom: 0; }
.methodology-body ul { margin: 0; color: var(--text); }
.methodology-body li { margin-bottom: 6px; }
.methodology-score-table { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.methodology-score-row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px;
  padding: 10px 14px; background: rgba(255, 255, 255, 0.03); font-size: 0.85rem;
  align-items: center;
}
.methodology-score-head {
  background: none; font-family: var(--font-pixel); font-size: 0.62rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em;
}
.methodology-score-row span:not(:first-child) { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.methodology-score-head span:not(:first-child) { color: var(--text-dim); }

.tr-season-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tr-season {
  flex: 1; min-width: 100px; text-align: center; padding: 14px 10px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-border);
}
.tr-season-year { display: block; font-family: var(--font-pixel); font-size: 0.62rem; color: var(--text-dim); margin-bottom: 8px; }
.tr-season-acc { display: block; font-family: var(--font-pixel); font-size: 1.2rem; margin-bottom: 4px; }
.tr-season-n { font-size: 0.72rem; color: var(--text-dim); }

.tr-score-compare { display: flex; gap: 20px; margin-bottom: 12px; }
.tr-score-col { flex: 1; text-align: center; }
.tr-score-col h4 { margin: 0 0 8px; font-family: var(--font-pixel); font-size: 0.68rem; color: var(--text-dim); font-weight: 400; }
.tr-score-mae { font-family: var(--font-pixel); font-size: 1.6rem; margin: 0 0 4px; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); }
.tr-score-unit { font-size: 0.9rem; color: var(--text-dim); }
.tr-methodology { text-align: center; margin: 8px 0 0; }

/* week recap page */
.recap-page { max-width: 780px; margin: 0 auto; }
.recap-section:last-of-type { margin-bottom: 0; }
.recap-item {
  display: block; text-decoration: none; color: var(--text);
  padding: 12px 14px; background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid var(--pixel-border); margin-bottom: 10px;
  transition: background .12s ease;
}
.recap-item:last-child { margin-bottom: 0; }
.recap-item:hover { background: rgba(255, 255, 255, 0.06); }
.recap-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.recap-teams { font-family: var(--font-pixel); font-size: 0.78rem; }
.recap-sub { font-size: 0.78rem; color: var(--text-dim); }
.recap-note { font-size: 0.85rem; color: var(--text-dim); margin: 0; }
.recap-note strong { color: var(--text); }

/* power rankings page */
.rankings-page { max-width: 640px; margin: 0 auto; }
.pr-list { display: flex; flex-direction: column; gap: 2px; }
.pr-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  text-decoration: none; color: var(--text); background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid var(--team-color, var(--pixel-border));
  transition: background .12s ease;
}
.pr-row:hover { background: rgba(255, 255, 255, 0.07); }
.pr-rank {
  font-family: var(--font-pixel); font-size: 0.85rem; color: var(--text-dim);
  width: 28px; text-align: right; flex-shrink: 0;
}
.pr-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.4)); }
.pr-team { flex: 1; min-width: 0; font-weight: 700; font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-net { font-family: var(--font-pixel); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pr-net.pr-pos { color: #8fe3a3; }
.pr-net.pr-neg { color: #ff8080; }
.pr-breakdown { font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; display: none; }
@media (min-width: 480px) { .pr-breakdown { display: inline; } }

/* value picks page */
.value-page { max-width: 780px; margin: 0 auto; }
.value-list { display: flex; flex-direction: column; gap: 10px; }
.value-row {
  display: block; text-decoration: none; color: var(--text);
  padding: 12px 14px; background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid var(--team-color, var(--pixel-border));
  transition: background .12s ease;
}
.value-row:hover { background: rgba(255, 255, 255, 0.06); }
.value-teams { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.value-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.4)); }
.value-team-name { font-family: var(--font-pixel); font-size: 0.72rem; }
.value-compare { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.82rem; color: var(--text-dim); }
.value-edge { font-family: var(--font-pixel); font-size: 0.68rem; color: var(--accent); }

/* fourth-down analyzer page */
.fda-page { max-width: 780px; margin: 0 auto; }
.fda-list-wrap { display: flex; flex-direction: column; gap: 8px; }
.fda-game-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%;
  text-decoration: none; color: var(--text); padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: none; border-left: 4px solid var(--team-color, var(--pixel-border));
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .12s ease;
}
.fda-game-header:hover { background: rgba(255, 255, 255, 0.07); }
.fda-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.4)); }
.fda-game-team { font-family: var(--font-pixel); font-size: 0.68rem; }
.fda-count { font-size: 0.76rem; color: var(--text-dim); }
.fda-toggle-icon {
  margin-left: auto; padding-left: 8px; font-size: 0.7rem; color: var(--text-dim);
  flex-shrink: 0; transition: transform .15s ease;
}
.fda-toggle[aria-expanded="true"] .fda-toggle-icon { transform: rotate(180deg); }
.fda-panel { padding: 12px 14px 4px; }
.fda-game-link { display: block; margin-bottom: 10px; }
.fda-list { margin-bottom: 6px; }

/* head-to-head page */
.h2h-page { max-width: 900px; margin: 0 auto; }
.h2h-picker { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.h2h-picker select {
  color: var(--text); background: var(--bg); font-family: var(--font-pixel); font-size: 0.7rem;
  padding: 10px 12px; border-radius: 0; border: 2px solid var(--pixel-border);
  max-width: 220px;
}
.h2h-picker select:hover { border-color: rgba(255, 255, 255, 0.4); }
.h2h-vs { color: var(--text-dim); font-size: 0.85rem; }
.h2h-record {
  text-align: center; font-family: var(--font-pixel); font-size: 0.85rem;
  margin: 14px 0 24px;
}
.h2h-page .card-grid { margin-bottom: 30px; }
@media (max-width: 600px) {
  .h2h-picker select { max-width: 100%; flex: 1 1 140px; }
}

/* account pages (signup / login / dashboard) */
.account-page { max-width: 780px; margin: 0 auto; }
.account-page-narrow { max-width: 420px; }
.account-error { color: #ff8080; }
.account-msg { text-align: center; color: var(--accent); font-size: 0.85rem; margin: -8px 0 20px; }
.account-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.account-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: var(--text-dim); }
.account-field input {
  color: var(--text); background: var(--bg); font-family: inherit; font-size: 0.9rem;
  padding: 10px 12px; border-radius: 0; border: 2px solid var(--pixel-border);
}
.account-field input:focus { outline: none; border-color: var(--accent); }
.account-hint { margin: -8px 0 4px; font-size: 0.72rem; color: var(--text-dim); }
.account-subheading {
  font-family: var(--font-pixel); font-size: 0.7rem; color: var(--text);
  margin: 10px 0 4px;
}
.account-team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.account-team-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 2px solid var(--pixel-border);
  padding: 8px 10px; font-size: 0.8rem; transition: border-color .12s ease;
}
.account-team-check:has(input:checked) { border-color: var(--accent); background: rgba(201, 150, 47, 0.1); }
.account-team-check img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.4)); }
.account-team-check input { flex-shrink: 0; }
.account-checkbox-row {
  display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-dim);
  margin: 6px 0;
}
.account-lang-picker { display: flex; gap: 8px; }
.account-lang-picker .account-team-check { width: 64px; justify-content: center; font-family: var(--font-pixel); }
.account-submit {
  align-self: flex-start;
  color: var(--bg); background: var(--accent); font-family: var(--font-pixel); font-size: 0.65rem;
  padding: 12px 20px; border-radius: 0; border: 2px solid var(--accent); cursor: pointer;
  transition: opacity .15s;
}
.account-submit:hover { opacity: .85; }
.account-submit-danger { background: #ff8080; border-color: #ff8080; color: #2a1010; }
.account-section { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--pixel-border); }
.account-section h3 { margin: 0 0 12px; }
.account-verify-banner {
  margin-top: 0; padding: 16px 18px; border: 2px solid var(--accent);
  background: rgba(201, 150, 47, 0.08);
}
.account-verify-banner h3 { color: var(--accent); }
.account-danger { }
@media (max-width: 600px) {
  .account-team-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

.site-footer { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px; }
.site-footer p { color: var(--text-dim); font-size: 0.72rem; line-height: 1.6; text-align: center; margin: 0; }
.site-footer p.credit { margin-top: 12px; font-family: var(--font-pixel); font-size: 0.6rem; color: var(--accent); letter-spacing: .02em; }
.site-footer a { color: var(--accent-blue); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.subscribe-box { text-align: center; margin-bottom: 24px; }
.subscribe-heading {
  font-family: var(--font-pixel); font-size: 0.72rem; color: var(--text);
  margin: 0 0 14px !important; letter-spacing: .01em;
}
.subscribe-form { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.subscribe-form input {
  color: var(--text); background: var(--bg); font-family: inherit; font-size: 0.85rem;
  padding: 10px 12px; border-radius: 0; border: 2px solid var(--pixel-border);
  width: 220px; max-width: 60vw;
}
.subscribe-form input:focus { outline: none; border-color: var(--accent); }
.subscribe-form button {
  color: var(--bg); background: var(--accent); font-family: var(--font-pixel); font-size: 0.65rem;
  padding: 10px 16px; border-radius: 0; border: 2px solid var(--accent); cursor: pointer;
  transition: opacity .15s;
}
.subscribe-form button:hover { opacity: .85; }
.site-footer p.subscribe-msg { color: var(--accent); font-size: 0.85rem; }
.site-footer p.subscribe-msg.subscribe-msg-error { color: #ff8080; }
@media (max-width: 600px) {
  .subscribe-form input { max-width: 100%; flex: 1 1 180px; }
}
.footer-mascot {
  /* New standing-pose art is taller/narrower than the old crop -- sized by
     height instead of width so it keeps roughly the same footprint here. */
  display: block; height: 58px; width: auto; margin: 16px auto 0;
  image-rendering: pixelated; opacity: 0.85;
}
.social-links { display: flex; justify-content: center; gap: 14px; margin: 16px 0 4px; }
.social-links a {
  color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  padding: 7px; border-radius: 50%; text-decoration: none;
  transition: color .15s, background-color .15s, transform .15s;
}
.social-links a:hover, .social-links a:focus-visible {
  color: var(--accent); background: rgba(201, 150, 47, 0.2); text-decoration: none; transform: translateY(-2px);
}
.social-links svg { width: 22px; height: 22px; display: block; }

/* Same icons next to the header nav links, just sized down and less padded
   to fit the header -- same gold "about to be picked" highlight on hover. */
.topbar-social { justify-content: flex-start; gap: 4px; margin: 0; }
.topbar-social a { color: var(--text); padding: 5px; }
.topbar-social a:hover, .topbar-social a:focus-visible { transform: none; }
.topbar-social svg { width: 17px; height: 17px; }

/* Login/account icon in the header -- same compact treatment as the
   social icons right next to it, just its own link (not part of that
   social-links group semantically). */
/* Gold-filled, same "this one's active/important" treatment as the
   lang-switch's active state and the hero sign-up plaque -- deliberately
   NOT another plain circular icon like the social links next to it, so it
   reads as a button for you, not a 4th social link. */
.account-link {
  color: var(--bg); background: var(--accent); display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 0; border: 2px solid var(--accent); text-decoration: none;
  transition: opacity .15s;
}
.account-link:hover, .account-link:focus-visible { opacity: .8; }
.account-link svg { width: 19px; height: 19px; display: block; }

.lang-switch { display: flex; gap: 6px; font-family: var(--font-pixel); font-size: 0.6rem; }
.lang-switch a {
  color: var(--text-dim); text-decoration: none; padding: 5px 7px;
  border: 1px solid var(--pixel-border); transition: color .15s, border-color .15s;
}
.lang-switch a:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.lang-switch a.active { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* Nine nav items (up from eight, then seven, then six -- this has grown
   every time a new section got added) no longer fits even at ordinary
   laptop widths (1280/1366px) at the base desktop spacing, not just
   tablet widths -- so this breakpoint is wider than the "tablet" content
   tightening below it needs, and deliberately covers only the topbar,
   not main/card-grid/detail-grid (those are genuinely tablet-only
   concerns). Spanish's longer words (Clasificacion, Lesionados,
   Metodologia) eat into the margin more than English, so this is tighter
   than English strictly needs on its own -- still wraps as a clean
   whole-row fallback (not mid-word) on anything narrower than this if it
   ever comes to that. */
@media (max-width: 1400px) {
  .topbar { padding: 18px 14px; gap: 8px; }
  .topbar-nav { gap: 3px; }
  .topbar-nav a { font-size: 0.56rem; }
  .topbar-actions { gap: 6px; }
  .topbar-social { gap: 2px; }
  .topbar-social a { padding: 4px; }
  .account-link { padding: 4px; }
  .lang-switch { gap: 4px; }
  .lang-switch a { padding: 4px 6px; }
}
/* A second, narrower notch below the one above -- Spanish's longer nav
   words (Clasificacion, Lesionados, Metodologia) run out of room again
   around 1100px even after that tightening, well before the 600px phone
   layout takes over and stacks the nav onto its own row entirely. */
@media (max-width: 1120px) {
  .topbar { padding: 14px 10px; }
  .topbar-nav { gap: 2px; }
  .topbar-nav a { font-size: 0.48rem; }
  .topbar-actions { gap: 4px; }
  .lang-switch a { padding: 3px 4px; }
}

/* Tablet: 601-1024px. The card grid already reflows on its own
   (auto-fill/minmax), this is mainly about breathing room and not
   wasting width on the wide desktop max-width. */
@media (max-width: 1024px) {
  main { max-width: 100%; padding: 20px 18px 60px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .matchup-header { gap: 28px; }
  /* A 320px fixed sidebar eats too much of a tablet-width column -- stack
     side content below the main column instead of squeezing both. */
  .detail-grid { grid-template-columns: 1fr; }
}

/* Phone: <=600px. */
@media (max-width: 600px) {
  /* Grid areas replace the desktop 1fr/auto/1fr row -- three stacked full-
     width rows (brand, then nav, then the language/social actions) instead
     of one row three columns wide, same as the old flex-basis:100% +
     order approach did, just expressed the way grid does it. */
  .topbar {
    padding: 12px 16px; row-gap: 6px;
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "nav" "actions";
  }
  .brand { grid-area: brand; justify-self: start; }
  .brand img { height: 34px; }
  /* Nav links no longer fit next to the brand on one line -- give nav its
     own full-width centered row (wrapping internally too, just in case),
     and the language switcher + social icons the row below that, together
     (both compact enough to share one row). */
  .topbar-nav { grid-area: nav; justify-self: center; flex-wrap: wrap; row-gap: 6px; gap: 10px; }
  .topbar-nav a { font-size: 0.5rem; white-space: nowrap; }
  .topbar-actions { grid-area: actions; justify-self: center; gap: 20px; }
  main { padding: 16px 14px 50px; }

  .card-grid { grid-template-columns: 1fr; gap: 12px; }
  .game-card { padding: 14px; }

  .season-tabs { gap: 6px; }
  .week-header { gap: 14px; margin-bottom: 20px; }
  .week-header h1 { font-size: 0.8rem; }

  .matchup-header { gap: 16px; }
  .team-block img { width: 56px; height: 56px; }
  .team-block h2 { font-size: 0.62rem; }
  /* At this width the two team-blocks stack (each is wider than the row),
     but "@" is small enough to fit in the leftover space next to whichever
     block lands above it instead of wrapping to its own row -- stranding it
     off to the side rather than between the two teams. Forcing it to full
     width makes it wrap cleanly and center on its own line. */
  .at-big { width: 100%; text-align: center; }
  .game-facts { gap: 10px 14px; font-size: 0.78rem; margin-bottom: 22px; }

  section { padding: 16px 16px; }

  /* Side by side is too cramped under ~360px of usable width -- stack the
     weather badge above the bars instead of fighting for horizontal room. */
  .winprob-body { flex-direction: column; align-items: stretch; gap: 12px; }
  .weather-side {
    flex-direction: row; justify-content: center; gap: 8px;
    padding-left: 0; padding-bottom: 10px;
    border-left: none; border-bottom: 1px solid var(--panel-border);
  }
  .weather-icon { font-size: 1.2rem; }

  .score-num { font-size: 1.5rem; }
  .score-row { gap: 16px; }
  .hero-logo img { width: 200px; }
}

/* --- Admin: login + analytics dashboard --- */
.admin-login-wrap { display: flex; justify-content: center; padding: 40px 0; }
.admin-login-card { max-width: 360px; width: 100%; text-align: center; }
.admin-login-title { font-family: var(--font-pixel); font-size: 1rem; margin: 0 0 10px; }
.admin-login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; text-align: left; }
.admin-login-form label { font-size: 0.8rem; color: var(--text-dim); }
.admin-login-error { color: #e2664a; font-size: 0.85rem; margin-top: 14px; }

input[type="password"], input[type="text"] {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid var(--pixel-border);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: 0;
}
input[type="password"]:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--accent-blue);
}

button[type="submit"] {
  background: var(--accent);
  color: var(--bg);
  border: 2px solid var(--accent);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  padding: 12px;
  cursor: pointer;
  transition: opacity .15s;
}
button[type="submit"]:hover { opacity: 0.85; }

.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-tile {
  background: var(--panel); border: 2px solid var(--pixel-border);
  padding: 16px; text-align: center;
}
.stat-num { display: block; font-family: var(--font-pixel); font-size: 1.3rem; color: var(--accent); }
.stat-label { display: block; margin-top: 6px; font-size: 0.75rem; color: var(--text-dim); }

.day-chart { display: flex; align-items: flex-end; gap: 4px; height: 100px; }
.day-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.day-bar { width: 100%; background: var(--accent-blue); min-height: 2px; }
.day-label { font-size: 0.6rem; color: var(--text-dim); white-space: nowrap; }

.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--panel-border);
  font-size: 0.85rem;
}
.admin-list li:last-child { border-bottom: none; }
.admin-list-n { color: var(--text-dim); font-family: var(--font-pixel); font-size: 0.7rem; }

.device-split { height: 10px; background: var(--accent); overflow: hidden; margin-bottom: 8px; }
.device-fill { height: 100%; background: var(--accent-blue); }

.admin-recent { list-style: none; margin: 0; padding: 0; }
.admin-recent li { padding: 8px 0; border-bottom: 1px solid var(--panel-border); font-size: 0.82rem; }
.admin-recent li:last-child { border-bottom: none; }
.admin-recent-path { display: block; }
.admin-recent-meta { display: block; color: var(--text-dim); font-size: 0.72rem; margin-top: 2px; }

.admin-logout { text-align: center; margin-top: 4px; }
.admin-logout a { color: var(--text-dim); font-size: 0.8rem; }

@media (max-width: 600px) {
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* --- 404 page --- */
.notfound-wrap { text-align: center; padding: 60px 20px; }
.notfound-mascot { width: 90px; height: auto; image-rendering: pixelated; margin-bottom: 18px; }
.notfound-code {
  font-family: var(--font-pixel); font-size: 2.4rem; color: var(--accent);
  margin: 0; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.notfound-title { font-family: var(--font-pixel); font-size: 1rem; margin: 10px 0 14px; font-weight: 400; }
.notfound-home {
  display: inline-block; margin-top: 20px; color: var(--accent-blue);
  text-decoration: none; font-size: 0.9rem;
}
.notfound-home:hover { text-decoration: underline; }

/* --- Team page --- */
.team-header {
  display: flex; align-items: center; gap: 20px; margin-bottom: 20px;
  border-left: 4px solid var(--team-color); padding-left: 18px;
}
.team-header-logo {
  width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 0 6px rgba(255,255,255,.5));
}
.team-header h1 { margin: 0; font-family: var(--font-pixel); font-size: 1rem; }
.team-header-meta { margin: 6px 0 0; color: var(--text-dim); font-size: 0.85rem; }

.team-follow-cta { margin: 4px 0 10px; }
.team-follow-btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  color: var(--bg); background: var(--accent); font-family: var(--font-pixel); font-size: 0.68rem;
  padding: 12px 22px; border-radius: 0; border: 2px solid var(--accent);
  transition: opacity .15s, transform .12s;
}
.team-follow-btn:hover { opacity: .85; transform: translate(-1px, -1px); }
.team-follow-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-family: var(--font-pixel); font-size: 0.68rem;
  padding: 11px 18px; border: 2px solid var(--accent); background: rgba(201, 150, 47, 0.12);
}
.team-rank-section { margin-bottom: 24px; }
.team-rank-tiles.stat-tiles { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; }

@media (max-width: 600px) {
  .team-header { gap: 14px; padding-left: 12px; }
  .team-header-logo { width: 48px; height: 48px; }
}

.team-block h2 a { color: inherit; text-decoration: none; }
.team-block h2 a:hover { text-decoration: underline; }

/* --- Team page: power ranking trend chart --- */
.rank-trend-wrap { margin-top: 18px; }
.rank-trend-caption { margin: 0 0 8px; }
.rank-trend-svg { width: 100%; height: 140px; display: block; }
.rank-trend-labels {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 0.6rem; color: var(--text-dim);
}
@media (max-width: 600px) {
  /* Up to 18 week labels crammed into a phone-width row just run together
     illegibly -- keep the two that matter (the range) and let the shape of
     the line itself carry the rest of the story. visibility (not display)
     so the two survivors stay pinned to the true start/end of the row. */
  .rank-trend-labels span:not(.trend-label-edge) { visibility: hidden; }
}

/* --- Teams index --- */
/* Every other section page (Track Record, Biggest Decisions, Power
   Rankings) narrows itself to a centered reading column instead of using
   the full main width -- this one was the odd one out, stretching edge to
   edge and reading lopsided next to left-aligned division headings. */
.teams-page { max-width: 900px; margin: 0 auto; }
.teams-conf-heading {
  font-family: var(--font-pixel); font-size: 0.85rem; margin: 28px 0 14px;
  color: var(--accent); letter-spacing: .04em;
}
.teams-conf-heading:first-of-type { margin-top: 8px; }
.teams-div-heading {
  font-size: 0.85rem; margin: 0 0 10px; color: var(--text-dim); font-weight: 600;
}
.teams-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.teams-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 2px solid var(--pixel-border);
  border-left: 4px solid var(--team-color);
  padding: 12px 14px; text-decoration: none; color: var(--text);
  font-size: 0.85rem; transition: border-color .12s ease, transform .12s ease;
}
.teams-card:hover { border-color: var(--accent); transform: translate(-1px, -1px); }
.teams-card img {
  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.4));
}

@media (max-width: 600px) {
  .teams-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* --- Homepage spotlight: Biggest Game of the Week --- */
.spotlight-card {
  display: block; text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, rgba(201, 150, 47, 0.14), var(--panel));
  border: 2px solid var(--accent);
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
  transition: transform .12s ease, box-shadow .12s ease;
}
.spotlight-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.45); }
.spotlight-eyebrow {
  text-align: center; font-family: var(--font-pixel); font-size: 0.65rem;
  color: var(--accent); letter-spacing: .04em; margin-bottom: 18px;
}
.spotlight-matchup { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 14px; }
.spotlight-team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spotlight-team img {
  width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 0 6px rgba(255,255,255,.5));
}
.spotlight-team-name { font-family: var(--font-pixel); font-size: 0.85rem; }
.spotlight-rank { font-size: 0.72rem; color: var(--accent); }
.spotlight-at { color: var(--text-dim); font-size: 1.1rem; }
.spotlight-reason { text-align: center; color: var(--text-dim); font-size: 0.85rem; max-width: 560px; margin: 0 auto 16px; }
.spotlight-meta {
  display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-dim);
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--panel-border);
}

@media (max-width: 600px) {
  .spotlight-card { padding: 18px; }
  .spotlight-matchup { gap: 16px; }
  .spotlight-team img { width: 48px; height: 48px; }
  .spotlight-team-name { font-size: 0.68rem; }
}

/* --- Injuries directory --- */
.injuries-page { max-width: 900px; margin: 0 auto; }
.injuries-grid { column-count: 2; column-gap: 14px; margin-bottom: 20px; }
.injuries-card {
  display: block; break-inside: avoid; margin-bottom: 14px;
  background: var(--panel); border: 2px solid var(--pixel-border);
  border-left: 4px solid var(--team-color);
  padding: 14px 16px; text-decoration: none; color: var(--text);
  transition: border-color .12s ease, transform .12s ease;
}
.injuries-card:hover { border-color: var(--accent); transform: translate(-1px, -1px); }
.injuries-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 0.85rem; }
.injuries-card-head img {
  width: 26px; height: 26px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.4));
}
.injuries-card-head span:nth-child(2) { flex: 1; }
.injuries-count {
  font-family: var(--font-pixel); font-size: 0.62rem; color: var(--accent);
  background: rgba(201, 150, 47, 0.16); border: 1px solid var(--accent);
  padding: 3px 6px; flex: 0 0 auto !important;
}
.injuries-card .injury-col { margin-top: 10px; }
.injuries-card p.unavailable { margin-top: 8px; }

@media (max-width: 600px) {
  .injuries-grid { column-count: 1; }
}

/* --- Standings & playoff picture --- */
.standings-page { max-width: 900px; margin: 0 auto; }
.standings-legend {
  text-align: center; font-size: 0.72rem; color: var(--text-dim);
  margin: -10px 0 18px;
}
.standings-head abbr {
  text-decoration: none; border-bottom: 1px dotted var(--text-dim); cursor: help;
}
.standings-table { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.standings-head, .standings-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.standings-head {
  font-family: var(--font-pixel); font-size: 0.52rem; color: var(--text-dim);
  letter-spacing: .03em; padding-bottom: 6px;
}
.standings-row {
  text-decoration: none; color: var(--text); background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid var(--team-color, var(--pixel-border));
  transition: background .12s ease;
}
.standings-row:hover { background: rgba(255, 255, 255, 0.07); }
.standings-logo {
  width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.4));
}
.standings-head-spacer { width: 24px; flex-shrink: 0; }
.standings-team, .standings-head-team {
  flex: 1; min-width: 0; font-weight: 700; font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.standings-head-team { font-weight: 400; }
.standings-row > span:not(.standings-team):not(.standings-extra) {
  width: 18px; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.85rem;
}
.standings-head > span:not(.standings-head-team):not(.standings-head-extra):not(.standings-head-spacer) {
  width: 18px; text-align: center;
}
.standings-extra, .standings-head-extra {
  width: 46px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 0.78rem; color: var(--text-dim); display: none;
}
.standings-extra.pr-pos { color: #8fe3a3; }
.standings-extra.pr-neg { color: #ff8080; }
@media (min-width: 560px) { .standings-extra, .standings-head-extra { display: inline-block; } }

.playoff-conf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; }
.playoff-wildcard-label {
  font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .04em; margin: 10px 0 4px; padding-top: 8px; border-top: 1px dashed var(--panel-border);
}
.playoff-row { gap: 10px; }
.playoff-seed {
  font-family: var(--font-pixel); font-size: 0.7rem; color: var(--accent);
  width: 26px; flex-shrink: 0; text-align: center;
}
.playoff-record {
  font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--text-dim);
  white-space: nowrap; flex-shrink: 0;
}

@media (max-width: 600px) {
  .playoff-conf-grid { grid-template-columns: 1fr; }
}

/* playoff/super bowl odds page */
.podds-page { max-width: 780px; margin: 0 auto; }
.podds-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.podds-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  text-decoration: none; color: var(--text); background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid var(--team-color, var(--pixel-border));
  transition: background .12s ease;
}
.podds-row:hover { background: rgba(255, 255, 255, 0.07); }
.podds-head {
  font-family: var(--font-pixel); font-size: 0.5rem; color: var(--text-dim);
  letter-spacing: .02em; background: none; border-left-color: transparent; padding-bottom: 4px;
}
.podds-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.4)); }
.podds-head-spacer { width: 24px; flex-shrink: 0; }
.podds-team, .podds-head-team {
  flex: 1; min-width: 0; font-weight: 700; font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podds-head-team { font-weight: 400; }
.podds-pct {
  width: 74px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 0.88rem; font-weight: 700; color: var(--text-dim); flex-shrink: 0;
}
.podds-pct-accent { color: var(--accent); }
.podds-head-pct { width: 74px; text-align: center; flex-shrink: 0; }
.podds-record {
  width: 54px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 0.78rem; color: var(--text-dim); flex-shrink: 0; display: none;
}
.podds-head-record { width: 54px; text-align: center; flex-shrink: 0; display: none; }
@media (min-width: 480px) { .podds-record, .podds-head-record { display: block; } }

.podds-matchups { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.podds-matchup-row {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--pixel-border);
}
.podds-matchup-team { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 0.82rem; }
.podds-matchup-team:last-child { justify-content: flex-end; text-align: right; }
.podds-matchup-pct {
  font-family: var(--font-pixel); font-size: 0.72rem; color: var(--accent); flex-shrink: 0;
}
.podds-pff-head, .podds-pff-row { padding: 8px 14px; }
.podds-pff-row .podds-pct, .podds-pff-head .podds-head-pct { width: 60px; }
@media (max-width: 480px) {
  .podds-matchup-team { font-size: 0.7rem; }
}