/* 10.2: the start map. The clock and the banner are large, and the labels grow on phones
   because the wide drawing scales down a lot. */
.start-map .clock { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.start-map .banner { font-size: 30px; font-weight: 800; }
@media (max-width: 860px) {
  .stage .start-map .lbl { font-size: 26px; }
  .stage .start-map .clock { font-size: 64px; }
  .stage .start-map .banner { font-size: 30px; }
}

/* Rudder: a wide slider, easy to grab on a phone. */
.roer input[type="range"] { height: 44px; accent-color: var(--muted); }
.roer .schaal { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin-top: -6px; }
.score:not([style*="none"]) { margin-top: 8px; }
.hint { margin: -4px 0 0; font-size: 0.85rem; color: var(--muted); }

/* 11.1: polar and VMG chart next to each other; on phones the switch shows one at a time. */
.pair { display: grid; grid-template-columns: 5fr 4fr; gap: 8px; align-items: start; }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } }