/* Race replay: the course map on the felt, the riders as their own photos,
   the standings beside the map, and the podium to finish. Colours and type
   come from the deck tokens in deck.css. */

.race-replay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--pc-felt-deep, #0b2119);
  color: var(--pc-stock, #f7f2e7);
}

.race-replay[hidden] {
  display: none;
}

.replay-frame {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.replay-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
}

.replay-title {
  margin: 0;
  font-family: var(--pc-display) !important;
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: 0;
  color: var(--pc-stock) !important;
}

/* The race is picked in the title: the select reads as the race's name. */
.replay-pick {
  position: relative;
  display: inline-block;
}

.replay-pick::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--pc-gilt);
  border-bottom: 2px solid var(--pc-gilt);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.replay-pick select {
  appearance: none;
  -webkit-appearance: none;
  padding: 2px 26px 2px 8px;
  font: inherit;
  color: var(--pc-stock);
  background: rgba(247, 242, 231, 0.08);
  border: 1px solid rgba(200, 162, 74, 0.55);
  border-radius: 6px;
  cursor: pointer;
}

.replay-pick select option {
  font-family: var(--pc-data);
  font-style: normal;
  color: #111823;
  background: #fff;
}

.replay-pick select:focus {
  outline: none;
}

.replay-pick select:focus-visible {
  outline: 2px solid var(--pc-gilt);
  outline-offset: 2px;
}

.replay-title-rest {
  margin-left: 4px;
}

/* The race's lap record, beside the title. */
.replay-record {
  margin-left: 14px;
  padding: 3px 10px;
  font-family: var(--pc-data);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;
  color: var(--pc-stock);
  background: rgba(200, 162, 74, 0.2);
  border: 1px solid rgba(200, 162, 74, 0.55);
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.replay-record b {
  font-family: var(--pc-numeral);
  font-weight: 800;
  color: #ffd75a;
}

.replay-clock {
  margin: 0 0 0 auto;
  font-family: var(--pc-data);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pc-gilt);
}

.replay-time {
  display: inline-block;
  min-width: 4.5ch;
  margin-left: 6px;
  color: var(--pc-stock);
}

.replay-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pc-gilt);
  font-size: 2.1rem;
  line-height: 1;
  cursor: pointer;
}

.replay-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  min-height: 0;
}

.replay-stage {
  position: relative;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(200, 162, 74, 0.5),
    0 18px 34px -18px rgba(0, 0, 0, 0.9);
}

.replay-map {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pc-felt-deep, #0b2119);
}

.replay-dim {
  fill: rgba(6, 10, 16, 0.42);
}

.replay-course {
  fill: none;
  stroke: rgba(240, 232, 60, 0.85);
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The start and finish line: a checkered bar across the course. */
.replay-line rect {
  fill: #fff;
  stroke: #111823;
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.replay-rider {
  transition: opacity 0.6s ease;
}

.replay-rider.is-gone {
  opacity: 0;
  pointer-events: none;
}

.replay-ring {
  fill: var(--pc-stock);
  stroke: #111823;
  stroke-width: 2;
}

.replay-rider.is-leader .replay-ring {
  fill: var(--pc-gilt);
  stroke: var(--pc-gilt);
  stroke-width: 4;
}

.replay-tag {
  fill: #fff;
  stroke: rgba(17, 24, 35, 0.4);
}

/* A rider with no photo rides as their number. */
.replay-noface {
  fill: #fff;
}

.replay-noface-bib {
  font-family: var(--pc-numeral);
  font-size: 19px;
  font-weight: 800;
  text-anchor: middle;
  fill: #111823;
}

.replay-row-noface {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(247, 242, 231, 0.85);
  color: #111823;
  font-family: var(--pc-numeral);
  font-weight: 800;
}

.replay-zoom img[hidden] {
  display: none;
}

.podium-nophoto {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 210px;
  aspect-ratio: 3 / 4;
  background: #fff;
  border: 6px solid var(--pc-stock);
  border-radius: 3px;
  color: #111823;
  font-family: var(--pc-numeral);
  font-size: 3.4rem;
  font-weight: 800;
}

.replay-bib {
  font-family: var(--pc-numeral);
  font-size: 14px;
  font-weight: 800;
  text-anchor: middle;
  fill: #111823;
}

.replay-standings {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.replay-row {
  border-bottom: 1px solid rgba(247, 242, 231, 0.1);
}

/* The whole row is a button: picking it follows that rider. */
.replay-follow {
  display: grid;
  grid-template-columns: 1.6em 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-family: var(--pc-data);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}

.replay-follow:hover {
  background: rgba(247, 242, 231, 0.07);
}

.replay-row:first-child .replay-follow {
  background: rgba(200, 162, 74, 0.16);
}

.replay-pos {
  font-family: var(--pc-numeral);
  font-weight: 800;
  color: var(--pc-gilt);
}

.replay-row img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* The rider's name, then their bib and lap, on one line. */
.replay-row-who {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  line-height: 1.15;
}

.replay-row-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.replay-row-sub {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 7px;
}

.replay-row-bib {
  font-family: var(--pc-numeral);
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(247, 242, 231, 0.7);
}

.replay-row-lap {
  font-size: 0.86rem;
  color: rgba(247, 242, 231, 0.6);
  white-space: nowrap;
}

.replay-gap {
  justify-self: end;
  font-size: 0.92rem;
  color: rgba(247, 242, 231, 0.75);
}

.replay-row.is-finished .replay-gap::before {
  content: '\2691';
  margin-right: 5px;
  color: var(--pc-gilt);
}

.replay-row.is-out {
  opacity: 0.45;
}

/* The followed rider: a gilt edge on their row, a halo on the map. */
.replay-row.is-followed .replay-follow {
  box-shadow: inset 0 0 0 2px var(--pc-gilt);
  background: rgba(200, 162, 74, 0.22);
}

/* Drawn 25% larger, on a gold disc with a bright ring, with two waves
   spreading out from it, so the eye finds them in a pack. */
.replay-glow,
.replay-halo {
  opacity: 0;
}

.replay-rider.is-followed .replay-glow {
  opacity: 1;
  fill: rgba(255, 214, 90, 0.5);
  stroke: #ffd75a;
  stroke-width: 5;
}

.replay-rider.is-followed {
  filter: drop-shadow(0 0 7px rgba(255, 214, 90, 0.95));
}

.replay-rider.is-followed .replay-ring {
  fill: #ffd75a;
  stroke: #fff;
  stroke-width: 3;
}

.replay-halo {
  fill: none;
  stroke: #ffe08a;
  stroke-width: 7;
}

.replay-rider.is-followed .replay-halo {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: replay-halo 1.6s ease-out infinite;
}

.replay-rider.is-followed .replay-halo-late {
  animation-delay: 0.8s;
}

.replay-rider.is-followed.is-gone {
  opacity: 0.6;
}

@keyframes replay-halo {
  0% {
    stroke-opacity: 1;
    transform: scale(1);
  }
  100% {
    stroke-opacity: 0;
    transform: scale(2.1);
  }
}

/* The records, pinned in the map's lower corner: the race's, then the
   course's. Each plays its lap. */
.replay-records {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: none;
}

.replay-trophy {
  display: flex;
  border: 0;
  cursor: pointer;
  text-align: left;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 6px;
  font-family: var(--pc-data);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.15;
  color: #111823;
  background: linear-gradient(135deg, #ffe28a, var(--pc-gilt, #c8a24a));
  border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.9);
  pointer-events: auto;
  transition: transform 0.3s ease;
}

.replay-trophy-cup {
  font-size: 1.15rem;
  line-height: 1;
  transform-origin: 50% 90%;
}

.replay-trophy b {
  font-family: var(--pc-numeral);
  font-weight: 800;
}

.replay-trophy-who {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
}

.replay-trophy.is-race {
  background: linear-gradient(135deg, #ffffff, #cfd6e0);
}

.replay-trophy:hover {
  transform: translateY(-2px);
}

.replay-trophy.is-lit {
  transform: scale(1.12);
}

.replay-trophy.is-lit .replay-trophy-cup {
  animation: replay-cup 0.5s ease-in-out 4;
}

/* The moment the record is set: a gold burst across the middle of the map. */
.replay-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 3;
  padding: 10px 22px;
  font-family: var(--pc-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
  color: #111823;
  background: radial-gradient(circle at 50% 40%, #fff3c2, #ffd75a 60%, var(--pc-gilt, #c8a24a));
  border-radius: 999px;
  box-shadow:
    0 0 0 4px rgba(255, 215, 90, 0.35),
    0 0 40px 10px rgba(255, 215, 90, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.replay-burst[hidden] {
  display: none;
}

/* A race's fastest lap in silver-white; the winner on the felt. */
.replay-burst[data-kind='lap'] {
  background: radial-gradient(circle at 50% 40%, #ffffff, #e8ecf2 60%, #b9c3d1);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.35),
    0 0 40px 10px rgba(255, 255, 255, 0.35);
}

.replay-burst[data-kind='win'] {
  color: var(--pc-stock, #f7f2e7);
  background: radial-gradient(circle at 50% 40%, #2a6b52, var(--pc-felt, #14392c) 70%);
  box-shadow:
    0 0 0 3px #ffd75a,
    0 0 40px 10px rgba(255, 215, 90, 0.4);
}

.replay-burst.is-on {
  animation: replay-burst 3.2s cubic-bezier(0.16, 0.9, 0.24, 1) both;
}

@keyframes replay-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-8deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(2deg);
  }
  20%,
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}

@keyframes replay-cup {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-16deg);
  }
  75% {
    transform: rotate(16deg);
  }
}

/* The followed rider's laps, a card in the map's top corner. */
.replay-info {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 8px 10px 6px;
  overflow-x: auto;
  background: rgba(247, 242, 231, 0.95);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #ffd75a,
    0 14px 26px -12px rgba(0, 0, 0, 0.95);
  color: #111823;
}

.replay-info[hidden] {
  display: none;
}

/* The podium has the screen to itself. */
.replay-frame:has(.replay-podium:not([hidden])) .replay-info,
.replay-frame:has(.replay-podium:not([hidden])) .replay-records {
  display: none;
}

.replay-info-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-family: var(--pc-data);
}

.replay-info-head img,
.replay-info-head .replay-row-noface {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.replay-info-num {
  font-family: var(--pc-numeral);
  font-size: 0.82rem;
  font-weight: 800;
  color: rgba(17, 24, 35, 0.55);
}

.replay-info-head > * {
  flex: none;
  white-space: nowrap;
}

.replay-info-bib {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
  flex: 0 1 auto !important;
  font-family: var(--pc-numeral);
  font-size: 1.1rem;
  font-weight: 800;
}

.replay-info-status {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(17, 24, 35, 0.7);
}

.replay-info-team {
  font-size: 0.82rem;
  color: rgba(17, 24, 35, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18ch;
}

.replay-info-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: #111823;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.replay-info-table {
  border-collapse: collapse;
  font-family: var(--pc-data);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.replay-info-table th,
.replay-info-table td {
  min-width: 2.6em;
  padding: 2px 5px;
  text-align: center;
  white-space: nowrap;
}

.replay-info-table th[scope='row'] {
  min-width: 0;
  padding-left: 0;
  text-align: left;
  color: rgba(17, 24, 35, 0.6);
}

.replay-info-table thead th {
  font-weight: 600;
  color: rgba(17, 24, 35, 0.6);
}

.replay-info-table td {
  font-weight: 700;
}

.replay-info-table .is-now {
  background: rgba(200, 162, 74, 0.3);
}

.replay-info-star {
  margin-left: 2px;
  color: var(--pc-blood, #b3261e);
}

/* Paused, a rider can be picked out: their row and marker light up and their
   photo comes up large. */
.race-replay.is-paused .replay-rider {
  cursor: zoom-in;
}

.replay-rider {
  cursor: pointer;
}

.replay-row.is-zoomed .replay-follow {
  background: rgba(247, 242, 231, 0.1);
}

.replay-rider.is-zoomed .replay-ring {
  stroke: var(--pc-gilt);
  stroke-width: 5;
}

.replay-zoom {
  position: absolute;
  z-index: 2;
  width: 190px;
  padding: 7px 7px 9px;
  background: var(--pc-stock);
  border-radius: 4px;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.95);
  color: #111823;
  pointer-events: none;
  animation: replay-zoom-in 0.18s ease-out;
}

.replay-zoom[hidden] {
  display: none;
}

.replay-zoom img {
  display: block;
  width: 176px;
  height: 176px;
  object-fit: cover;
  border-radius: 2px;
}

.replay-zoom p {
  margin: 7px 2px 0;
  font-family: var(--pc-data);
  font-size: 0.9rem;
  line-height: 1.25;
}

.replay-zoom-team {
  margin-top: 2px !important;
  font-size: 0.8rem !important;
  color: rgba(17, 24, 35, 0.65);
}

.replay-zoom-team:empty {
  display: none;
}

.replay-zoom-bib {
  margin-right: 4px;
  font-family: var(--pc-numeral);
  font-size: 1.15rem;
  font-weight: 800;
}

@keyframes replay-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.replay-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
}

.replay-play {
  flex: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--pc-gilt);
  color: #111823;
  font-size: 1.1rem;
  cursor: pointer;
}

.replay-scrub {
  flex: 1;
  min-width: 0;
  accent-color: var(--pc-gilt);
}

.replay-speed {
  display: flex;
  flex: none;
  gap: 4px;
}

.replay-speed button {
  padding: 6px 9px;
  border: 1px solid rgba(247, 242, 231, 0.3);
  border-radius: 999px;
  background: none;
  color: var(--pc-stock);
  font-family: var(--pc-data);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.replay-speed button[aria-pressed='true'] {
  background: var(--pc-stock);
  color: #111823;
  border-color: var(--pc-stock);
}

.race-replay button:focus {
  outline: none;
  box-shadow: none;
}

.race-replay button:focus-visible,
.replay-scrub:focus-visible {
  outline: 2px solid var(--pc-gilt);
  outline-offset: 2px;
}

/* The podium: second, first, third on rising steps. */
.replay-podium {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 16px;
  background: rgba(11, 33, 25, 0.96);
}

.replay-podium[hidden] {
  display: none;
}

.podium-close {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pc-gilt);
  font-size: 2.1rem;
  line-height: 1;
  cursor: pointer;
}

.podium-title {
  margin: 0;
  font-family: var(--pc-display) !important;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 600 !important;
  color: var(--pc-stock) !important;
}

.podium-steps {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 720px;
}

.podium-step {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  margin: 0;
  animation: podium-rise 0.7s cubic-bezier(0.16, 0.9, 0.24, 1) both;
}

.podium-1 {
  animation-delay: 0.5s;
}

.podium-3 {
  animation-delay: 0.25s;
}

.podium-step img {
  width: 100%;
  max-width: 210px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 6px solid var(--pc-stock);
  border-radius: 3px;
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.95);
}

.podium-step figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 8px;
  margin: 8px 0 6px;
  text-align: center;
  font-family: var(--pc-data);
  font-variant-numeric: tabular-nums;
}

.podium-bib {
  font-family: var(--pc-data);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
}

.podium-time {
  color: var(--pc-gilt);
  font-weight: 700;
}

.podium-team {
  margin: -2px 0 6px;
  max-width: 100%;
  font-family: var(--pc-data);
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
  color: rgba(247, 242, 231, 0.75);
}

.podium-block {
  display: grid;
  place-items: center;
  width: 100%;
  background: var(--pc-stock);
  border-radius: 3px 3px 0 0;
  color: #111823;
  font-family: var(--pc-numeral);
  font-size: 2rem;
  font-weight: 800;
}

.podium-1 .podium-block {
  height: 96px;
  background: var(--pc-gilt);
}

.podium-2 .podium-block {
  height: 66px;
}

.podium-3 .podium-block {
  height: 44px;
}

.podium-again {
  padding: 10px 22px;
  border: 2px solid var(--pc-gilt);
  border-radius: 999px;
  background: none;
  color: var(--pc-stock);
  font-family: var(--pc-data);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

@keyframes podium-rise {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .replay-frame {
    padding-inline: 10px;
  }

  .replay-title {
    font-size: 1.1rem;
  }

  /* On a phone the picker is the title, and the lap record goes. */
  .replay-title-rest,
  .replay-record {
    display: none;
  }

  .replay-clock {
    font-size: 0.95rem;
  }

  /* The map takes the width at its own shape; the standings scroll in what
     is left. */
  .replay-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
  }

  .replay-map {
    height: auto;
    max-height: 56vh;
  }

  .replay-follow {
    padding-block: 3px;
  }

  .replay-speed button {
    padding: 6px 7px;
  }

  .replay-info {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    padding: 6px 8px 4px;
  }

  .replay-info-table {
    font-size: 0.74rem;
  }

  .replay-info-team {
    display: none;
  }

  .replay-records {
    right: 6px;
    bottom: 6px;
  }

  .replay-trophy {
    font-size: 0.74rem;
  }

  .replay-trophy-who {
    display: none;
  }

  .replay-burst {
    font-size: 1.05rem;
    padding: 8px 14px;
  }

  .replay-info-table th,
  .replay-info-table td {
    min-width: 2.3em;
    padding: 1px 3px;
  }

  .replay-zoom {
    width: 150px;
  }

  .replay-zoom img {
    width: 136px;
    height: 136px;
  }

  .podium-steps {
    gap: 8px;
  }

  .podium-bib {
    font-size: 0.95rem;
  }

  .podium-time {
    font-size: 0.85rem;
  }
}

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

  .replay-rider {
    transition: none;
  }

  .replay-zoom,
  .replay-rider.is-followed .replay-halo,
  .replay-burst.is-on,
  .replay-trophy.is-lit .replay-trophy-cup {
    animation: none;
  }
}