/* ---------- Stage ---------- */

.stage {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: 16px;
  position: relative;
}

/* Below the full stage the pitch panels stack and the page scrolls; the
   no-scroll stage starts where the side panels have room to float. */
@media (min-width: 75rem) {
  .stage {
    height: 100dvh;
    padding-bottom: 0;
  }
}

/* ---------- Pitch background ---------- */

.stage__pitch {
  inset: 0;
  position: fixed;
  z-index: 0;
}

.stage__pitch-svg {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.stage__pitch-svg--portrait {
  display: none;
}

@media (orientation: portrait) {
  .stage__pitch-svg--landscape {
    display: none;
  }

  .stage__pitch-svg--portrait {
    display: block;
  }
}

.stage-pitch__turf {
  fill: var(--ps-turf);
}

.stage-pitch__stripe {
  fill: var(--ps-turf-stripe);
}

.stage-pitch__marking {
  fill: none;
  stroke: var(--ps-line);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.stage-pitch__spot {
  fill: rgba(255, 255, 255, 0.22);
}

.stage__vignette {
  background:
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 4px 4px,
    radial-gradient(120% 90% at 50% 40%, rgba(7, 26, 14, 0) 30%, rgba(5, 18, 10, 0.72) 100%);
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.stage__pitch .chart-tooltip {
  z-index: 5;
}

/* ---------- Hockey: the stage becomes an ice rink ---------- */

.pitch-site--hockey .stage__vignette {
  background:
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 4px 4px,
    radial-gradient(120% 90% at 50% 40%, rgba(10, 30, 44, 0) 30%, rgba(6, 18, 28, 0.75) 100%);
}

.stage-rink__board {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.stage-rink__blue {
  fill: none;
  stroke: rgba(86, 140, 226, 0.5);
  stroke-width: 5px;
  vector-effect: non-scaling-stroke;
}

.stage-rink__red--centre {
  fill: none;
  stroke: rgba(226, 58, 52, 0.55);
  stroke-width: 4px;
  vector-effect: non-scaling-stroke;
}

.stage-rink__red--goal {
  fill: none;
  stroke: rgba(226, 58, 52, 0.45);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.stage-rink__faceoff {
  fill: none;
  stroke: rgba(226, 58, 52, 0.4);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.stage-rink__dot {
  fill: rgba(226, 58, 52, 0.6);
}

/* ---------- Pitch layers: shots ---------- */

.stage-shots__shot {
  fill: rgba(245, 242, 234, 0.55);
  stroke: var(--ps-ink);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.stage-shots__shot--home {
  fill: var(--theme-home);
}

.stage-shots__shot--away {
  fill: color-mix(in srgb, var(--theme-away-turf) 85%, transparent);
}

.stage-shots__shot--goal {
  fill: var(--ps-yellow);
}

/* ---------- Pitch layers: lineups ---------- */

.stage-lineup__player {
  cursor: pointer;
  outline: none;
}

.stage-lineup__dot {
  stroke: var(--ps-ink);
  stroke-width: 2px;
  transition: stroke 0.15s ease;
  vector-effect: non-scaling-stroke;
}

.stage-lineup__side--home .stage-lineup__dot {
  fill: var(--theme-home);
}

.stage-lineup__side--away .stage-lineup__dot {
  fill: var(--theme-away-turf);
}

.stage-lineup__player:hover .stage-lineup__dot,
.stage-lineup__player:focus-visible .stage-lineup__dot,
.stage-lineup__player.is-selected .stage-lineup__dot {
  stroke: var(--ps-yellow);
  stroke-width: 4px;
}

.stage-lineup__number {
  dominant-baseline: central;
  fill: var(--ps-cream);
  font-family: var(--font-mono);
  font-size: 1.7px;
  font-weight: 600;
  pointer-events: none;
  text-anchor: middle;
}

.stage-lineup__side--away .stage-lineup__number {
  fill: var(--ps-ink);
}

.stage-lineup__name {
  dominant-baseline: central;
  fill: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 1.3px;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(7, 26, 14, 0.75);
  stroke-width: 0.4px;
  text-anchor: middle;
}

.stage-lineup__player:hover .stage-lineup__name,
.stage-lineup__player.is-selected .stage-lineup__name {
  fill: var(--ps-cream);
}

/* A starter who was taken off carries a badge with the minute. */
.stage-lineup__badge circle {
  fill: var(--ps-red-deep);
  stroke: var(--ps-ink);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.stage-lineup__badge path {
  fill: none;
  stroke: var(--ps-cream);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.28px;
}

.stage-lineup__minute {
  dominant-baseline: central;
  fill: var(--ps-cream);
  font-family: var(--font-mono);
  font-size: 1.15px;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(7, 26, 14, 0.75);
  stroke-width: 0.4px;
  text-anchor: start;
}

/* ---------- Pitch layers: heatmap, attack sides, networks, positions ---------- */

.stage-heat__cell--home {
  fill: var(--theme-home);
}

.stage-attacks__shaft {
  fill: none;
  stroke-linecap: round;
}

.stage-attacks--home .stage-attacks__shaft {
  stroke: color-mix(in srgb, var(--theme-home) 80%, transparent);
}

.stage-attacks--away .stage-attacks__shaft {
  stroke: color-mix(in srgb, var(--theme-away-turf) 75%, transparent);
}

.stage-attacks--home .stage-attacks__head {
  fill: color-mix(in srgb, var(--theme-home) 90%, transparent);
}

.stage-attacks--away .stage-attacks__head {
  fill: color-mix(in srgb, var(--theme-away-turf) 85%, transparent);
}

.stage-attacks__label {
  fill: var(--ps-cream);
  font-family: var(--font-mono);
  font-size: 2.2px;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(7, 26, 14, 0.7);
  stroke-width: 0.5px;
  text-anchor: middle;
}

.stage-network__edge {
  fill: none;
  stroke-linecap: round;
}

.stage-network--home .stage-network__edge {
  stroke: color-mix(in srgb, var(--theme-home) 55%, transparent);
}

.stage-network--away .stage-network__edge {
  stroke: color-mix(in srgb, var(--theme-away-turf) 45%, transparent);
}

.stage-network__node {
  stroke: var(--ps-ink);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.stage-network--home .stage-network__node {
  fill: var(--theme-home);
}

.stage-network--away .stage-network__node {
  fill: var(--theme-away-turf);
}

.stage-network__number {
  dominant-baseline: central;
  fill: var(--ps-cream);
  font-family: var(--font-mono);
  font-size: 1.4px;
  font-weight: 600;
  text-anchor: middle;
}

.stage-network--away .stage-network__number {
  fill: var(--ps-ink);
}

/* Hovering a pass-network player fades the other side. */
.stage-network__team {
  transition: opacity 0.2s ease;
}

.stage-network__team.is-dimmed {
  opacity: 0.22;
}