/* ---------- Main area ---------- */

.stage__main {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 0;
  padding: 4px 26px 10px;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.stage__main > * {
  pointer-events: auto;
}

/* ---------- Stage overlay: scoreboard and view menus on the pitch ---------- */

.stage__overlay {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
  padding-top: 4px;
}

/* On phones the overlay sits on a soft scrim, and on windowless pages the
   pitch itself drops below it so plotted data never hides behind the menus. */
@media (max-width: 49.999rem) {
  .stage__overlay {
    margin-inline: -16px;
    padding: 10px 16px 26px;
    position: relative;
  }

  .stage__overlay::before {
    background: linear-gradient(180deg, rgb(6 20 11 / 0.88) 0%, rgb(6 20 11 / 0.8) 52%, rgb(6 20 11 / 0.34) 82%, rgb(6 20 11 / 0) 100%);
    content: "";
    inset: -90px 0 -18px;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }

  .stage:has(.stage__overlay):not(:has(.pitch-window)) .stage__pitch {
    top: clamp(200px, 30vh, 300px);
  }
}

.stage-scoreboard {
  color: var(--ps-cream);
  text-align: center;
}

.stage-scoreboard__meta {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.stage-scoreboard__line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.stage-scoreboard__team {
  align-items: center;
  display: flex;
  gap: 10px;
}

.stage-scoreboard__team-link {
  color: var(--ps-cream);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.stage-scoreboard__team-link:hover {
  color: var(--ps-yellow);
}

.stage-scoreboard__score {
  color: var(--ps-cream);
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Each side's playing style for the match, under its name. */
.stage-scoreboard__styles {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 8px 0 0;
}

.stage-scoreboard__style {
  color: var(--ps-cream-soft);
  flex: 1 1 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: end;
  text-transform: uppercase;
}

.stage-scoreboard__style--away {
  text-align: start;
}

.stage-scoreboard__style:empty {
  visibility: hidden;
}

/* A page that wants the screen for its window says the fixture in a smaller
   voice and sits closer to the top. The editorial match page is the one. */
.stage-scoreboard--compact .stage-scoreboard__meta {
  font-size: 10px;
  margin-bottom: 2px;
}

.stage-scoreboard--compact .stage-scoreboard__line {
  gap: 10px;
}

.stage-scoreboard--compact .stage-scoreboard__team {
  gap: 7px;
}

.stage-scoreboard--compact .stage-scoreboard__team-link {
  font-size: clamp(15px, 1.3vw, 20px);
}

.stage-scoreboard--compact .stage-scoreboard__score {
  font-size: clamp(17px, 1.5vw, 24px);
}

.stage__overlay:has(.stage-scoreboard--compact) {
  gap: 6px;
  padding-top: 0;
}

.stage-scoreboard__title {
  color: var(--ps-cream);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

/* The view links live as a list in the top-left corner of the pitch. Floating
   there it can land on the window's paper, so it carries its own chrome. */
.stage-sidenav {
  display: flex;
  flex-direction: column;
  gap: 7px;
  left: clamp(18px, 3.4vw, 48px);
  pointer-events: auto;
  position: absolute;
  top: 14px;
  z-index: 3;
}

@media (min-width: 75rem) {
  .stage-sidenav {
    backdrop-filter: blur(6px);
    background: var(--ps-chrome);
    border: 2px solid var(--ps-ink);
    border-radius: 10px;
    box-shadow: var(--ps-chrome-shadow);
    padding: 10px 14px;
  }
}

.stage-sidenav__links {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.stage-sidenav__link {
  border-bottom: 1px solid transparent;
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  width: fit-content;
}

.stage-sidenav__link:hover {
  color: var(--ps-cream);
}

.stage-sidenav__link.is-active {
  border-bottom-color: var(--ps-yellow);
  color: var(--ps-yellow);
}

@media (max-width: 74.999rem) {
  .stage-sidenav {
    align-items: center;
    gap: 10px;
    left: auto;
    max-width: 100%;
    position: static;
    top: auto;
  }

  .stage-sidenav__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: center;
  }
}

/* On phones the view links scroll sideways under the toggles. */
@media (max-width: 49.999rem) {
  .stage-sidenav__links {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-color: var(--ps-yellow) rgb(255 251 240 / 0.18);
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .stage-sidenav__links::-webkit-scrollbar {
    height: 4px;
  }

  .stage-sidenav__links::-webkit-scrollbar-track {
    background: rgb(255 251 240 / 0.18);
    border-radius: 4px;
  }

  .stage-sidenav__links::-webkit-scrollbar-thumb {
    background: var(--ps-yellow);
    border-radius: 4px;
  }

  .stage-sidenav__links.is-scrollable:not(.is-at-end) {
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }

  .stage-sidenav__links.is-scrollable:not(.is-at-start):not(.is-at-end) {
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 34px), transparent 100%);
  }

  .stage-sidenav__links.is-scrollable:not(.is-at-start).is-at-end {
    mask-image: linear-gradient(to right, transparent 0, #000 24px);
  }

  .stage-sidenav__link {
    flex: none;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* Stat panels sit directly on the turf next to a player view's layer. */
.stage-statpanel {
  backdrop-filter: blur(6px);
  background: var(--ps-chrome);
  border: 2px solid var(--ps-ink);
  border-radius: 12px;
  box-shadow: var(--ps-chrome-shadow);
  color: var(--ps-cream);
  min-width: 230px;
  padding: 16px 20px;
  pointer-events: auto;
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  z-index: 2;
}

.stage-statpanel--left {
  left: clamp(220px, 16vw, 300px);
}

.stage-statpanel--right {
  right: clamp(220px, 16vw, 300px);
}

.stage-statpanel--chart {
  max-width: 480px;
  min-width: 320px;
}

.stage-statpanel--spider {
  max-width: 360px;
}

.stage-statpanel--spider .spider-plot__ring {
  fill: rgb(255 251 240 / 0.04);
  stroke: rgb(255 251 240 / 0.25);
}

.stage-statpanel--spider .spider-plot__axis-line {
  stroke: rgb(255 251 240 / 0.25);
}

.stage-statpanel--spider .spider-plot__label {
  fill: var(--ps-cream-soft);
}

.stage-statpanel--spider .spider-plot__series polygon {
  fill: var(--ps-yellow);
  fill-opacity: 0.2;
  stroke: var(--ps-yellow);
}

.stage-statpanel--spider .spider-plot__series circle {
  fill: var(--ps-yellow);
}

.stage-statpanel--spider .spider-plot__series--median polygon {
  fill: rgb(255 251 240 / 0.1);
  stroke: rgb(255 251 240 / 0.4);
}

.stage-statpanel__title {
  color: var(--ps-yellow);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.stage-scoreboard__meta a,
.stage-statpanel__title a,
.stage-statpanel__rows a {
  border-bottom: 1px solid rgb(255 251 240 / 0.35);
  color: inherit;
  text-decoration: none;
}

.stage-scoreboard__meta a:hover,
.stage-statpanel__title a:hover,
.stage-statpanel__rows a:hover {
  border-bottom-color: var(--ps-yellow);
  color: var(--ps-yellow);
}

/* The competition toggle sits at the top of the sidenav, above Overview. */
.stage-competitions {
  margin: 0 0 8px;
  position: relative;
  width: fit-content;
}

.stage-competitions summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  list-style: none;
  user-select: none;
}

.stage-competitions summary::-webkit-details-marker {
  display: none;
}

.stage-competitions--single {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stage-competitions__label {
  color: var(--ps-yellow);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stage-competitions__current {
  color: var(--ps-cream);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.stage-competitions__current::after {
  color: var(--ps-yellow);
  content: " ▾";
  font-size: 10px;
}

.stage-competitions[open] .stage-competitions__current::after {
  content: " ▴";
}

.stage-competitions summary:hover .stage-competitions__current {
  color: var(--ps-yellow);
}

.stage-competitions__current--static::after {
  content: none;
}

.stage-competitions__menu {
  backdrop-filter: blur(6px);
  background: var(--ps-chrome);
  border: 2px solid var(--ps-ink);
  border-radius: 8px;
  box-shadow: var(--ps-chrome-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: -10px;
  min-width: max-content;
  padding: 10px 14px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 4;
}

.stage-competitions__menu-heading {
  color: var(--ps-yellow);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 4px;
  text-transform: uppercase;
}

.stage-competitions__menu {
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

.stage-competitions__option {
  color: var(--ps-cream-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
}

.stage-competitions__option:hover {
  color: var(--ps-cream);
}

.stage-competitions__option.is-active {
  color: var(--ps-yellow);
}

.stage-statpanel__empty {
  color: var(--ps-cream-soft);
  font-size: 13px;
  margin: 0;
  max-width: 24em;
}

.stage-statpanel__hint {
  border-top: 1px solid rgb(255 251 240 / 0.15);
  color: var(--ps-cream-soft);
  font-size: 11.5px;
  line-height: 1.5;
  margin: 12px 0 0;
  max-width: 30ch;
  padding-top: 10px;
}

.stage-statpanel .locked-value {
  color: var(--ps-cream-soft);
}

.stage-statpanel__rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.stage-statpanel__row {
  align-items: baseline;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.stage-statpanel__row dt {
  color: var(--ps-cream-soft);
  font-size: 13px;
}

.stage-statpanel__row dd {
  color: var(--ps-cream);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.stage-statpanel__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stage-statpanel__line {
  align-items: baseline;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.stage-statpanel__label {
  color: var(--ps-cream-soft);
  font-size: 13px;
}

.stage-statpanel__value {
  color: var(--ps-cream);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}

/* How the value ranks inside the league's dataset. */
.stage-statpanel__track {
  background: rgb(255 251 240 / 0.14);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.stage-statpanel__fill {
  background: var(--ps-yellow);
  border-radius: 999px;
  height: 100%;
  width: calc(var(--percentile) * 1%);
}

@media (max-width: 74.999rem) {
  .stage-statpanel {
    position: static;
    transform: none;
  }
}

/* Without a window (a pitch view) the overlay hugs the top of the stage,
   clear of the stat panels that sit mid-pitch. */
.stage__main:not(:has(.pitch-window)) .stage__overlay {
  margin-bottom: auto;
}

/* ---------- Content window ---------- */

.pitch-window {
  animation: pitch-site-pop 0.18s ease-out;
  background: var(--ps-paper);
  border: 2px solid var(--ps-ink);
  border-radius: 14px;
  box-shadow: 10px 10px 0 rgba(6, 20, 11, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 60rem;
  z-index: 1;
}

.pitch-window__bar {
  align-items: center;
  background: var(--ps-paper-deep);
  border-bottom: 2px solid var(--ps-ink);
  display: flex;
  flex: none;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 8px 10px 8px 16px;
}

.pitch-window__path {
  align-items: baseline;
  color: var(--ps-ink-soft);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 3px;
  letter-spacing: 0.03em;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.pitch-window__path-link {
  color: inherit;
  text-decoration: none;
}

.pitch-window__path-link:hover {
  color: var(--ps-red-deep);
  text-decoration: underline;
}

.pitch-window__controls {
  display: flex;
  gap: 6px;
}

.pitch-window__control {
  align-items: center;
  background: var(--ps-paper);
  border: 2px solid var(--ps-ink);
  border-radius: 6px;
  color: var(--ps-ink);
  cursor: pointer;
  display: flex;
  height: 26px;
  justify-content: center;
  padding: 0;
  width: 26px;
}

.pitch-window__control svg {
  height: 12px;
  width: 12px;
}

.pitch-window__control:hover {
  background: var(--ps-red);
  color: var(--ps-cream);
}

.pitch-window__body {
  min-height: 0;
  overscroll-behavior: contain;
  padding-block: clamp(18px, 3vh, 32px);
}

/* Below the full stage the window grows with its content and the page scrolls. */
@media (max-width: 74.999rem) {
  .stage__main {
    flex: 1 0 auto;
    min-height: auto;
  }

  .pitch-window {
    flex: none;
    overflow: visible;
  }

  /* With nothing clipped, the bar's own background would show square corners
     inside the window's rounded border, so it takes the inner radius itself. */
  .pitch-window__bar {
    border-radius: 12px 12px 0 0;
  }
}

@media (min-width: 75rem) {
  .pitch-window {
    flex: 0 1 auto;
    min-height: 0;
  }

  .pitch-window__body {
    overflow-y: auto;
  }

  .pitch-window--peek {
    margin-top: auto;
    max-width: 420px;
  }

  .pitch-window--peek .pitch-window__bar {
    border-bottom: none;
    cursor: pointer;
  }

  .pitch-window--peek .pitch-window__body {
    display: none;
  }

  /* A minimized window rests on the bench instead of sharing the free space with it. */
  .stage__main:has(.pitch-window--peek) .stage-bench {
    margin-top: 0;
  }

  /* While the window is minimized on a page with nothing of its own on the
     pitch, the home stage shows through behind it. */
  .stage__main:has(.pitch-window--peek) .stage__backdrop {
    display: flex;
  }
}

.stage__backdrop {
  align-items: center;
  display: none;
  inset: 0;
  justify-content: center;
  padding: 4px 26px 10px;
  position: absolute;
}

@media (max-width: 49.999rem) {
  .pitch-window__control--minimize {
    display: none;
  }
}

/* ---------- Bench: the substitutes along the bottom of a lineup page ---------- */

.stage-bench {
  display: flex;
  flex: none;
  gap: 16px 32px;
  justify-content: space-between;
  margin-top: auto;
  order: 10;
  padding-top: 8px;
  pointer-events: auto;
  width: 100%;
}

.stage-bench__side {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.stage-bench__side--away {
  align-items: flex-end;
  text-align: right;
}

.stage-bench__title {
  align-items: center;
  color: var(--ps-cream);
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.stage-bench__formation {
  color: var(--ps-cream-soft);
  font-weight: 500;
}

.stage-bench__players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stage-bench__side--away .stage-bench__players {
  justify-content: flex-end;
}

.stage-bench__player {
  align-items: center;
  color: var(--ps-cream-soft);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 10px;
  gap: 3px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  width: 56px;
}

.stage-bench__dot {
  align-items: center;
  background: var(--ps-cream);
  border: 2px solid var(--ps-ink);
  border-radius: 50%;
  color: var(--ps-ink);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  position: relative;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
  width: 28px;
}

.stage-bench__side--home .stage-bench__dot {
  background: var(--ps-red);
  color: var(--ps-cream);
}

.stage-bench__player:not(.stage-bench__player--used) .stage-bench__dot {
  opacity: 0.55;
}

.stage-bench__player:hover .stage-bench__dot,
.stage-bench__player:focus-visible .stage-bench__dot,
.stage-bench__player.is-selected .stage-bench__dot {
  box-shadow: 0 0 0 3px var(--ps-yellow);
  opacity: 1;
}

.stage-bench__player:hover,
.stage-bench__player.is-selected {
  color: var(--ps-cream);
}

/* A substitute who came on carries a badge with the minute. */
.stage-bench__badge {
  background: var(--ps-live);
  border: 1px solid var(--ps-ink);
  border-radius: 50%;
  color: var(--ps-ink);
  height: 13px;
  position: absolute;
  right: -6px;
  top: -6px;
  width: 13px;
}

.stage-bench__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-bench__minute {
  color: var(--ps-live);
}

/* Below the full stage each bench becomes one row that scrolls sideways and
   waits below the first screen, so the whole pitch shows before the visitor
   scrolls down to the benches on their scrim. */
@media (max-width: 74.999rem) {
  .stage {
    --stage-bench-room: 112px;
  }

  .stage__main:has(.stage-bench):not(:has(.pitch-window)) {
    min-height: calc(100dvh + var(--stage-bench-room));
  }

  .stage-bench {
    padding-top: 12px;
    position: relative;
  }

  .stage-bench::before {
    background: linear-gradient(180deg, rgb(6 20 11 / 0) 0%, rgb(6 20 11 / 0.9) 22%, rgb(6 20 11 / 0.96) 100%);
    content: "";
    inset: -64px -26px -240px;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }

  .stage-bench__side--away {
    align-items: flex-start;
    text-align: left;
  }

  .stage-bench__players {
    flex-wrap: nowrap;
    margin-inline: -4px;
    overflow-x: auto;
    padding: 4px 4px 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    width: calc(100% + 8px);
  }

  .stage-bench__side--away .stage-bench__players {
    justify-content: flex-start;
  }

  .stage-bench__players > li {
    flex: none;
    scroll-snap-align: start;
  }
}

@media (max-width: 49.999rem) {
  .stage {
    --stage-bench-room: 216px;
  }

  .stage-bench::before {
    inset: -64px -16px -240px;
  }

  .stage-bench {
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
  }
}

/* ---------- Compact window (one player's match card) ---------- */

.pitch-window--compact {
  max-width: 34rem;
}

/* ---------- Auth window (signup, sign-in, site password) ---------- */

.pitch-window--auth {
  max-width: 36rem;
}

.stage-auth-card {
  padding: clamp(20px, 3vh, 32px);
}

.pitch-site .auth-input {
  background: var(--ps-paper-raised);
  border: 2px solid var(--ps-ink);
  border-radius: 8px;
}

.pitch-site .signup-plan-card {
  background: var(--ps-paper-raised);
  border: 2px solid var(--ps-ink);
  border-radius: 10px;
}

.stage-sport-picker {
  border: none;
  margin: 0;
  padding: 0;
}

.stage-sport-picker__option {
  align-items: center;
  background: var(--ps-paper-raised);
  border: 2px solid var(--ps-ink);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  padding: 9px 14px;
}

.stage-sport-picker__option:has(input:checked) {
  background: var(--ps-yellow);
}

.stage-sport-picker__option input {
  accent-color: var(--ps-ink);
}

.stage-interest-picker {
  border: none;
  padding: 0;
}

.stage-interest-option {
  align-items: flex-start;
  display: flex;
}

.stage-interest-option input {
  margin-block-start: 0.2em;
}

.pitch-window__body > .container,
.pitch-window__body > .container-large,
.pitch-window__body > .container-small {
  padding-inline: clamp(16px, 3vw, 32px);
}

/* ---------- Brutalist re-skin of shared components inside the window ---------- */

.pitch-site .btn {
  border: 2px solid var(--ps-ink);
  border-radius: 9px;
  box-shadow: 3px 3px 0 rgba(14, 17, 17, 0.8);
  font-weight: 700;
}

.pitch-site .btn:hover {
  box-shadow: 1px 1px 0 rgba(14, 17, 17, 0.8);
  translate: 2px 2px;
}

.pitch-site .btn--primary {
  background: var(--ps-red);
  color: var(--ps-cream);
}

.pitch-site .btn--reversed {
  background: var(--ps-paper);
  color: var(--ps-ink);
}

.pitch-site .btn--ghost {
  background: transparent;
  box-shadow: none;
  color: var(--ps-ink);
}

.pitch-site .btn--ghost:hover {
  background: var(--ps-paper-deep);
  translate: none;
}

.pitch-site .btn--sun {
  background: var(--ps-yellow);
  color: var(--ps-ink);
}

.pitch-site .btn--plain,
.pitch-site .btn--link {
  border: none;
  box-shadow: none;
}

.pitch-site .card,
.pitch-site .box {
  background: var(--ps-paper-raised);
  border: 2px solid var(--ps-ink);
  border-radius: 10px;
  box-shadow: var(--ps-hard-shadow);
}

.pitch-site .chip {
  border: 1.5px solid var(--ps-ink);
}

.pitch-site .pricing-tier--featured {
  background: var(--ps-turf-deep);
  color: var(--ps-cream);
}

.pitch-site .pricing-tier--featured .section-label {
  color: var(--ps-yellow);
}

.pitch-site .section-label {
  color: var(--ps-red-deep);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pitch-site .match-tabs-nav__link {
  border: 2px solid var(--ps-ink);
  border-radius: 99rem;
  background: var(--ps-paper-raised);
  color: var(--ps-ink);
  font-weight: 600;
}

.pitch-site .match-tabs-nav__link.is-active {
  background: var(--ps-red);
  border-color: var(--ps-ink);
  color: var(--ps-cream);
}

.pitch-site .breadcrumbs,
.pitch-site .breadcrumbs a {
  color: var(--ps-ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.pitch-site table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pitch-site .match-tabs-nav a.match-tabs-nav__link--pitch.is-active {
  background: var(--ps-yellow);
  border-color: var(--ps-ink);
  color: var(--ps-ink);
}

/* ---------- Small screens ---------- */

@media (max-width: 49.999rem) {
  .stage__main {
    align-items: stretch;
    justify-content: flex-start;
    padding: 6px 16px 14px;
  }

  .pitch-window__path {
    font-size: 12px;
  }

  .pitch-window__body > .container,
  .pitch-window__body > .container-large,
  .pitch-window__body > .container-small {
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pitch-window {
    animation: none;
  }
}

/* Schedule: round picker, days and fixture rows inside the window, on both sites. */
.pitch-site .schedule-rounds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.pitch-site .schedule-day {
  color: var(--color-ink-dark);
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0;
  text-transform: capitalize;
}

.pitch-site .schedule-day__fixtures {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pitch-site .fixture {
  align-items: center;
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: 4rem minmax(0, 1fr) auto minmax(0, 1fr) 6rem;
  padding: 0.45rem 0.6rem;
  text-decoration: none;
}

.pitch-site .fixture:hover {
  background: var(--color-surface);
}

.pitch-site .fixture__time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.pitch-site .fixture__team {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.pitch-site .fixture__team--home {
  justify-content: flex-end;
  text-align: end;
}

.pitch-site .fixture__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pitch-site .fixture__score {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 3rem;
  text-align: center;
}

.pitch-site .fixture__status {
  text-align: end;
}

.pitch-site .fixture__badge {
  border: 1px solid currentColor;
  border-radius: 99rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.5rem;
  text-transform: uppercase;
}

.pitch-site .fixture--postponed .fixture__time,
.pitch-site .fixture--canceled .fixture__time,
.pitch-site .fixture--canceled .fixture__name {
  text-decoration: line-through;
}

.pitch-site .fixture--canceled {
  opacity: 0.6;
}

@media (max-width: 40rem) {
  .pitch-site .fixture {
    grid-template-columns: 3.2rem minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .pitch-site .fixture__status {
    display: none;
  }
}