/* Motion is layered onto the complete, readable static recap. */
:root { --nav-height: 56px; --motion-ease: cubic-bezier(.2,.7,.2,1); }
html { scroll-padding-top: calc(var(--nav-height) + 24px); }
.recap-nav { background: rgba(245,246,240,.94); }
.recap-nav a { position: relative; transition: color 180ms ease; }
.recap-nav a::after {
  content: ''; position: absolute; bottom: 8px; height: 2px; left: 0; right: 0;
  background: #47722e; transform: scaleX(0); transform-origin: left;
  transition: transform 250ms var(--motion-ease);
}
.recap-nav a[aria-current="location"] { color: #47722e; }
.recap-nav a[aria-current="location"]::after { transform: scaleX(1); }
.reading-track { position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; pointer-events: none; }
.reading-progress { display: block; height: 100%; background: #6c9639; transform: scaleX(0); transform-origin: left; }
.hero-title { transform-origin: left center; }
.hero-title .hero-line { display: block; }
.hero-title .hero-primary { color: var(--ink); }
.hero-title .hero-accent { color: #47722e; }
.quick-scores strong, .bounty-stat strong, .shot-feature strong { font-variant-numeric: tabular-nums; }
.matchups-section { display: grid; grid-template-columns: minmax(210px,.38fr) minmax(0,1fr); column-gap: 52px; align-items: start; }
.matchup-intro { position: sticky; top: calc(var(--nav-height) + 36px); }
.matchup-intro h2 { font-size: clamp(36px,4vw,52px); }
.matchup-position { display: flex; align-items: baseline; gap: 5px; margin-top: 28px; color: var(--muted); font-size: 13px; letter-spacing: .05em; }
.matchup-position[hidden], .matchup-progress[hidden] { display: none; }
.matchup-current { font-size: 36px; font-weight: 850; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.matchup-position-label { margin-right: 7px; font-size: 12px; font-weight: 750; letter-spacing: .1em; }
.matchup-progress { display: block; height: 3px; max-width: 160px; margin-top: 15px; background: var(--line); overflow: hidden; }
.matchup-progress-fill { display: block; height: 100%; background: #47722e; transform: scaleX(.166667); transform-origin: left; transition: transform 350ms var(--motion-ease); }
.matchups { display: block; --card-gap: 42px; padding-bottom: 20px; }
.matchup + .matchup { margin-top: var(--card-gap); }
.matchup {
  position: relative; border-top: 3px solid var(--matchup-color, var(--line)); border-radius: 12px;
  padding: 28px; background: #fcfdf7; box-shadow: 0 12px 36px -24px #10211d44;
  transform-origin: center top;
}
.stack-enabled .matchup {
  position: sticky; top: calc(var(--nav-height) + 28px + var(--card-index,0) * 7px);
  z-index: calc(1 + var(--card-index,0)); transform: scale(var(--card-scale,1));
}
.matchup .scoreline { margin-bottom: 18px; }
.matchup .scoreline .team-name { font-size: 16px; }
.matchup .scoreline strong { font-size: 28px; }
.matchup p { font-size: 17px; line-height: 1.8; }
.odds-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.odds-track { display: block; width: 52px; height: 3px; border-radius: 2px; background: #ffffff18; overflow: hidden; }
.odds-fill { display: block; width: var(--odds-value); height: 100%; background: #a6bc98; transform-origin: left; }
.in .odds-fill { background: var(--lime); }
.bounty { box-shadow: 0 12px 40px -28px #10211d44; }
.shot-feature strong { text-shadow: 0 0 45px #edc37014; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .award, .shot-row { transition: transform 220ms var(--motion-ease), border-color 220ms ease, box-shadow 220ms ease; }
  .award:hover { transform: translateY(-4px); border-color: #9bae86; box-shadow: 0 14px 26px -22px #10211d66; }
  .shot-row:hover { transform: translateY(-2px); border-color: #b59860; }
}
@media (max-width: 900px) {
  .matchups-section { column-gap: 28px; grid-template-columns: minmax(165px,.32fr) minmax(0,1fr); }
  .matchup { padding: 23px; }
}
@media (max-width: 760px) {
  .matchups-section { display: block; }
  .matchup-intro { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
  .matchup-intro .section-heading { margin-bottom: 0; }
  .matchup-intro h2 { font-size: 36px; }
  .matchup-position { margin-top: 0; }
  .matchup-position-label { display: none; }
  .matchup-current { font-size: 27px; }
  .matchup-progress { display: none; }
  .matchups { --card-gap: 30px; }
  .matchup { padding: 20px; }
  .matchup .scoreline .team-name { font-size: 14px; }
  .matchup .scoreline strong { font-size: 23px; }
  .matchup p { font-size: 16px; line-height: 1.75; }
  .stack-enabled .matchup { top: calc(var(--nav-height) + 20px + var(--card-index,0) * 5px); }
}
@media (max-width: 360px) { .matchup { padding: 15px; }.matchup .scoreline strong { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title, .stack-enabled .matchup { transform: none !important; }
  .stack-enabled .matchup, .matchup-intro { position: relative; top: auto; }
  .recap-nav a, .recap-nav a::after, .matchup-progress-fill, .award, .shot-row { transition: none; }
}
@media print {
  .recap-nav, .matchup-position, .matchup-progress { display: none; }
  .matchup-intro, .stack-enabled .matchup { position: static; transform: none !important; }
  .matchup { break-inside: avoid; }
}