.spectate-button {
  background: var(--cyan);
}

.spectate-bar {
  position: absolute;
  z-index: 120;
  left: 50%;
  bottom: max(13.5px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 7.5px;
  transform: translateX(-50%) rotate(-1deg);
  pointer-events: auto;
}

.spectate-bar button,
.spectate-following {
  border: 3px solid var(--turn-outline);
  border-radius: 12px;
  background: var(--turn-surface-page);
  color: var(--turn-text);
  box-shadow: 3px 3px 0 var(--turn-shadow-color);
}

.spectate-bar button {
  min-height: 39px;
  padding: 6px 10.5px;
  font: inherit;
  text-transform: uppercase;
}

.spectate-close {
  width: 39px;
  padding: 0 !important;
  background: var(--turn-action-navigation) !important;
  font-size: max(var(--turn-text-floor, 11px), 1.0875rem) !important;
  line-height: 1;
}

.spectate-next {
  background: var(--yellow) !important;
}

.spectate-following {
  min-width: clamp(142.5px, 34vw, 277.5px);
  padding: 6px 12px 7.5px;
  text-align: center;
}

.spectate-following strong,
.spectate-following b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spectate-following strong {
  font-size: max(var(--turn-text-floor, 11px), clamp(0.645rem, 2.1vw, 0.9rem));
  line-height: 1.05;
}

.spectate-following b {
  margin-top: 3px;
  font-size: max(var(--turn-text-floor, 11px), clamp(0.75rem, 2.6vw, 1.125rem));
  line-height: 1;
  letter-spacing: -0.035em;
}

/* The perks the followed lap ran (#1219). */
.spectate-perks {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: max(var(--turn-text-floor, 11px), clamp(0.625rem, 2vw, 0.8125rem));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.spectate-perks[hidden] {
  display: none;
}

.turn-spectating .controls,
.turn-spectating .manual-steer,
.turn-spectating .boost-hud,
.turn-spectating .race-position-hud,
.turn-spectating #scoreFeedback {
  display: none !important;
}

/* The followed lap's controls (#1217): its drive pad, with the phone it was tilted on or
   the steering box it was steered on above it, on the side they were held. Pictures
   from HOW TO PLAY (ui/how-to-play-demos.js), played back by ui/spectate-controls.js.
   In landscape they stand beside the bar, which moves over to keep clear of them; in
   portrait, above it. The pad is 184.5px wide with room for its bubbles. */
:root {
  --spectate-controls-scale: 0.8;
  --spectate-controls-edge: max(16.5px, env(safe-area-inset-left), env(safe-area-inset-right));
  --spectate-controls-room: calc(184.5px * var(--spectate-controls-scale) + var(--spectate-controls-edge) + 12px);
}

.spectate-controls {
  position: absolute;
  z-index: 110;
  right: var(--spectate-controls-edge);
  bottom: max(13.5px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--turn-space-2);
  pointer-events: none;
  transform: scale(var(--spectate-controls-scale));
  transform-origin: right bottom;
}

.spectate-controls[data-hand="left"] {
  right: auto;
  left: var(--spectate-controls-edge);
  align-items: flex-start;
  transform-origin: left bottom;
}

.spectate-controls > .turn-demo {
  margin: 0;
}

/* Steering sits over the pad itself, not over its bubbles. */
.spectate-controls > :is(.spectate-controls-tilt, .spectate-controls-touch) {
  width: 142.5px;
}

.spectate-controls[data-steer="tilt"] > .spectate-controls-touch,
.spectate-controls[data-steer="touch"] > .spectate-controls-tilt {
  display: none;
}

@media (orientation: landscape) {
  body:has(> .spectate-controls:not([hidden])) .spectate-bar {
    left: calc(50% - var(--spectate-controls-room) / 2);
  }

  body:has(> .spectate-controls[data-hand="left"]:not([hidden])) .spectate-bar {
    left: calc(50% + var(--spectate-controls-room) / 2);
  }
}

@media (orientation: portrait) {
  :root {
    --spectate-controls-scale: 0.9;
  }

  .spectate-controls {
    bottom: calc(max(13.5px, env(safe-area-inset-bottom)) + 64px);
  }
}

@media (min-width: 700px) and (min-height: 700px) {
  :root {
    --spectate-controls-scale: 1.1;
  }
}

.turn-spectating .message {
  opacity: 0 !important;
}

@media (max-height: 322.5px) {
  :root {
    --spectate-controls-scale: 0.66;
  }

  .spectate-bar {
    bottom: 6px;
    gap: 5.25px;
  }

  .spectate-bar button {
    min-height: 34.5px;
    padding: 4.5px 7.5px;
  }

  .spectate-close {
    width: 34.5px;
  }

  .spectate-following {
    min-width: clamp(123.75px, 31vw, 221.25px);
    padding: 4.5px 7.5px 6px;
  }

  .spectate-following strong {
    font-size: max(var(--turn-text-floor, 11px), 0.6rem);
  }

  .spectate-following b {
    margin-top: 1.5px;
    font-size: max(var(--turn-text-floor, 11px), 0.75rem);
  }
}