/* Soccer additions inherit the site's grayscale design tokens and Overpass font. */
[hidden] { display: none !important; }
.scoreboard { width: min(100%, 42rem); }
/* Each town name is centered over its own half of the field, just above the sideline. */
.team-labels { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: .75rem; }
.team-name { font-weight: 600; font-size: clamp(.875rem, 2.5vw, 1.25rem); overflow-wrap: anywhere; text-align: center; padding: 0 .75rem; }
.field { position: relative; }
.pitch { display: block; width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: .35; }
.pitch-spot { fill: var(--ink); stroke: none; }
.field-score { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.home-score { left: 31%; }
.away-score { left: 69%; }
.match-clock { margin-top: 1.5rem; font-size: clamp(2rem, 7vw, 3.5rem); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.15; }
.match-clock-label { margin-top: 1.25rem; text-align: center; font-size: .8125rem; color: var(--road-major); }
.scoreboard .match-clock-label + .match-clock { margin-top: .125rem; }
.match-stage, .match-notice { text-align: center; margin-top: .5rem; }
.match-location { text-align: center; margin-top: .125rem; color: var(--road-major); font-size: .875rem; overflow-wrap: anywhere; }
/* The OpenStreetMap credit is only needed while the map is on screen. */
body:has(.map[hidden]) .map-credit { display: none; }
.match-stage { color: var(--road-major); }
.match-notice { color: var(--road-major); font-size: .8125rem; min-height: 1.25rem; }
@media (max-height: 500px) and (min-width: 650px) {
  .scoreboard { width: min(100%, 25rem); }
  .match-clock { margin-top: .5rem; font-size: 2rem; }
  .match-clock-label { margin-top: .5rem; }
}