@media (max-width: 760px) {
  .site-nav { grid-template-columns: none; grid-auto-flow: column; }
  .site-nav__link { padding: 0 2px; font-size: 0.9375rem; }
}

.hero-score { margin-block: var(--space-2) var(--space-1); }
@media (max-width: 1339px) {
  .hero-score.scoreline { column-gap: var(--space-5); }
  .hero-score .scoreline__score { font-size: clamp(3.25rem, 1.5rem + 5vw, 5rem); }
  .hero-score .scoreline__team { font-size: clamp(1rem, 0.4rem + 1.4vw, 1.5rem); }
  .hero .hero__meta { font-size: var(--text-sm); }
}
@media (max-width: 1180px) { .hero .hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .hero-score.scoreline { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-2); }
  .hero-score .scoreline__team { justify-content: flex-start; text-align: left; font-size: 1.125rem; }
  .hero-score .scoreline__team--away { flex-direction: row-reverse; justify-content: flex-end; }
  .hero-score .scoreline__score { order: -1; }
}
.hero__aside { display: flex; flex-direction: column; gap: var(--space-4); }

.moment { color: var(--color-link); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; font-weight: 500; }
.moment:hover { text-decoration: underline; }
.moment__out::after { content: "\2197"; margin-left: 0.2em; font-size: 0.85em; opacity: 0.8; }
.moment[hidden] { display: none; }

.plain-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-2); }
.how { align-items: center; }
.how .lead { margin: 0; }

.flow { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.flow__svg { width: 100%; height: clamp(170px, 26vw, 300px); display: block; }
.flow__axis { display: grid; grid-template-columns: repeat(var(--periods, 3), minmax(0, 1fr)); margin-top: var(--space-2);
  color: var(--color-text-muted); font-size: var(--text-caption); font-family: var(--font-condensed); text-align: center; }
.flow__line { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.flow__line--home { stroke: var(--team-home-on-dark); }
.flow__line--away { stroke: var(--team-away-on-dark); stroke-dasharray: 10 6; }
.flow__grid { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flow__period { stroke: var(--color-border-strong); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.flow__tick--home { stroke: var(--team-home-on-dark); stroke-width: 6; vector-effect: non-scaling-stroke; }
.flow__tick--away { stroke: var(--team-away-on-dark); stroke-width: 6; vector-effect: non-scaling-stroke; }
.flow__dot--home { fill: var(--team-home); stroke: var(--team-home-edge); stroke-width: 2; vector-effect: non-scaling-stroke; }
.flow__dot--away { fill: var(--team-away); stroke: var(--team-away-edge); stroke-width: 2; vector-effect: non-scaling-stroke; }
.flow__legend { margin-bottom: var(--space-3); }
.swatch--line-home { width: 1.6rem; height: 3px; border-radius: 2px; background: var(--team-home-on-dark); }
.swatch--line-away { width: 1.6rem; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--team-away-on-dark) 0 7px, transparent 7px 11px); }

.periods { display: flex; flex-direction: column; gap: var(--space-5); }
.period { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.period__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
.period__head h3 { margin: 0; }
.period__facts { color: var(--color-text-2); font-size: var(--text-sm); }
.pstrip { display: block; width: 100%; height: 34px; border-radius: 6px; overflow: hidden; background: var(--color-surface-inset); }
.pstrip__play { fill: var(--seq-1); }
.pstrip__goal--home { stroke: var(--team-home-on-dark); stroke-width: 3; vector-effect: non-scaling-stroke; }
.pstrip__goal--away { stroke: var(--team-away-on-dark); stroke-width: 3; vector-effect: non-scaling-stroke; }
.pstrip__pen { fill: var(--color-brand); }
.pstrip__ends { display: flex; justify-content: space-between; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-caption); }
.swatch--play { background: var(--seq-1); }
.swatch--stop { background: var(--color-surface-inset); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.swatch--goal-home { width: 3px; height: 1rem; border-radius: 1px; background: var(--team-home-on-dark); }
.swatch--goal-away { width: 3px; height: 1rem; border-radius: 1px; background: var(--team-away-on-dark); }
.swatch--pen { width: 0.9rem; height: 0.45rem; background: var(--color-brand); }
.intermission { color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }

details.more { margin-top: var(--space-3); }
details.more > summary { cursor: pointer; color: var(--color-link); font-size: var(--text-sm); font-weight: 500; }
details.more > summary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 4px; }
details.more[open] > summary { margin-bottom: var(--space-3); }

.ev-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface); }
.ev { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.ev:last-child { border-bottom: 0; }
.ev__n { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-text-2); }
.ev__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.ev__score { font-variant-numeric: tabular-nums; font-weight: 700; }
.ev__sub { grid-column: 2 / -1; color: var(--color-text-2); font-size: var(--text-caption); }
.ev__official { grid-column: 2 / -1; color: var(--color-text-2); font-size: var(--text-caption); }
.ev__official .pill { font-size: 0.8125rem; }
.ev__side { justify-self: end; }
@media (max-width: 480px) {
  .ev { grid-template-columns: 3.2rem minmax(0, 1fr); padding: var(--space-3); }
  .ev__side { grid-column: 2 / -1; justify-self: start; }
}

.team-block + .team-block { margin-top: var(--space-7); }
.team-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.team-head h3 { margin: 0; }
.team-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-5); align-items: start; margin-bottom: var(--space-5); }
@media (max-width: 960px) { .team-sum { grid-template-columns: minmax(0, 1fr); } }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); }
.pl { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; }
.pl__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pl__name { font-weight: 700; line-height: 1.25; min-width: 0; }
.pl__role { margin-left: auto; }
.pl__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.pl__stats div { display: flex; flex-direction: column; min-width: 0; }
.pl__stats dt { color: var(--color-text-muted); font-size: var(--text-caption); line-height: 1.3; }
.pl__stats dd { margin: 0; font-family: var(--font-condensed); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl__note { color: var(--color-text-muted); font-size: var(--text-caption); }
.pl .jersey { flex: none; }

.court { display: block; width: 100%; height: auto; }
.court__floor { fill: var(--color-surface-inset); }
.court__line { fill: none; stroke: var(--color-border-strong); stroke-width: 0.12; }
.court__board { fill: none; stroke: var(--color-text-muted); stroke-width: 0.18; }
.court__dot { fill: var(--color-border-strong); }
.court-cap { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: var(--text-caption); margin-top: var(--space-1); }
.heat--home-1 { fill: var(--heat-home-1); } .heat--home-2 { fill: var(--heat-home-2); }
.heat--home-3 { fill: var(--heat-home-3); } .heat--home-4 { fill: var(--heat-home-4); }
.heat--away-1 { fill: var(--heat-away-1); } .heat--away-2 { fill: var(--heat-away-2); }
.heat--away-3 { fill: var(--heat-away-3); } .heat--away-4 { fill: var(--heat-away-4); }
.heat--t0-1 { fill: var(--heat-0-1); } .heat--t0-2 { fill: var(--heat-0-2); } .heat--t0-3 { fill: var(--heat-0-3); } .heat--t0-4 { fill: var(--heat-0-4); }
.heat--t1-1 { fill: var(--heat-1-1); } .heat--t1-2 { fill: var(--heat-1-2); } .heat--t1-3 { fill: var(--heat-1-3); } .heat--t1-4 { fill: var(--heat-1-4); }

.bars { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.bar { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.bar__track { height: 10px; border-radius: 5px; background: var(--color-surface-inset); overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--seq-2); border-radius: 5px; }
.bar__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-2); }

.check-table td:last-child { white-space: nowrap; }
.official-tag { margin-right: var(--space-2); }

.hl-top.section { padding-block: var(--space-5) var(--space-6); }
.stage__side h2 { font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); margin: 0; }
.hl-meta { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; color: var(--color-text-2); font-size: var(--text-sm); }
.hl-meta li:first-child { color: var(--color-text); font-size: var(--text-body); font-weight: 700; }
.hl-line { color: var(--color-text-2); font-size: var(--text-sm); line-height: 1.5; margin: 0; }
.hl-nav { margin-top: auto; padding-top: var(--space-2); }
.hl-nav .btn { flex: 1 1 0; }
.hl-groups { display: flex; flex-direction: column; gap: var(--space-7); }
.stage video { width: 100%; height: 100%; background: #000; }
