/* Self-hosted display face, SIL OFL 1.1. See public/fonts/OFL.txt.
   The fork asked for "Arial Narrow", which does not exist on Android at all,
   so every condensed numeral silently fell back to a normal-width face and
   the composition broke on roughly half the target audience. This is the
   fix, and it applies to the share card as well as the page. */
@font-face {
  font-family: "Haze Condensed";
  src: url("fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Haze Condensed";
  src: url("fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f5eee2;
  --muted: #c2b6a5;
  --black: #12110f;
  --black-rgb: 18, 17, 15;
  --orange: #ff5a22;
  --orange-bright: #ff7846;
  --amber: #d99042;
  --paper: #efe4d1;
  --rule: rgba(245, 238, 226, .25);
  --safe-top: max(1rem, env(safe-area-inset-top));
  --safe-bottom: max(1rem, env(safe-area-inset-bottom));
  font-synthesis: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-width: 320px; background: var(--black); -webkit-text-size-adjust: 100%; }
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--black);
  color: var(--ink);
  font-family: "Haze Condensed", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .075;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 .55px, transparent .8px),
    radial-gradient(circle at 75% 60%, #000 0 .65px, transparent .9px);
  background-size: 5px 5px, 7px 7px;
}

.experience { min-height: 100vh; min-height: 100svh; }
.act {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.act[hidden] { display: none; }

.brand {
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.masthead,
.race-topline,
.result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.air-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  max-width: 62%;
  color: var(--muted);
  font: 700 9.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-align: right;
  text-transform: uppercase;
}
.air-chip span {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(217, 144, 66, .14);
}
.air-chip[data-mode="live"] span { background: #74c698; }

.photo,
.race-art__photo,
.result-photo {
  background-image: url("assets/kl-haze-runner.jpg");
  background-repeat: no-repeat;
  background-color: #3b2d22;
}

/* ── setup ───────────────────────────────────────────────────────── */

.act--setup {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: var(--safe-top) 1rem var(--safe-bottom);
}

.photo--setup {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: 39% 50%;
  transform: scale(1.015);
}
.photo__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(18,17,15,.74) 0%, rgba(18,17,15,.12) 33%, rgba(18,17,15,.08) 49%, rgba(18,17,15,.88) 83%, #12110f 100%),
    linear-gradient(100deg, rgba(18,17,15,.28), transparent 60%);
}
.act--setup::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 74% 30%, rgba(255,90,34,.12), transparent 38%);
  pointer-events: none;
}

.masthead { position: relative; z-index: 2; }

.setup-copy {
  align-self: end;
  max-width: 42rem;
  padding-bottom: clamp(2rem, 7vh, 5rem);
  text-shadow: 0 2px 22px rgba(0,0,0,.55);
}
.kicker {
  margin-bottom: .35rem;
  color: var(--orange-bright);
  font-size: clamp(12px, 3.3vw, 15px);
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.setup-copy h1 {
  max-width: 10ch;
  font-size: clamp(42px, 12vw, 86px);
  font-weight: 950;
  line-height: .88;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-transform: uppercase;
}

.distance-picker {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .75rem;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}
.distance-picker fieldset { border: 0; }
.distance-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.distance-options label { min-width: 0; }
.distance-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.distance-options span {
  display: flex;
  min-height: 68px;
  align-items: baseline;
  justify-content: center;
  gap: .17rem;
  padding: .75rem .2rem;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(13,12,10,.62);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.distance-options b {
  font-size: clamp(27px, 8vw, 42px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.06em;
}
.distance-options small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.distance-options input:checked + span {
  border-color: var(--orange);
  background: var(--orange);
  color: #160f0b;
  transform: translateY(-4px);
  box-shadow: 0 9px 25px rgba(255,90,34,.24);
}
.distance-options input:checked + span small { color: #160f0b; }
.distance-options input:focus-visible + span {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

.action {
  min-height: 56px;
  border: 0;
  border-radius: 0;
  padding: .9rem 1rem;
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .095em;
  text-transform: uppercase;
  transition: transform .14s ease, filter .14s ease;
}
.action:active { transform: scale(.985); }
.action:focus-visible,
.skip:focus-visible,
.text-action:focus-visible,
.meaning summary:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}
.action--primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--orange);
  color: #160f0b;
  box-shadow: 0 12px 35px rgba(255,90,34,.23);
}
.action--primary i { font-size: 21px; font-style: normal; }
.action--quiet {
  border: 1px solid var(--rule);
  background: rgba(255,255,255,.04);
  color: var(--ink);
}
.micro {
  margin-top: .6rem;
  color: rgba(245,238,226,.68);
  font: 600 9.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .035em;
  text-align: center;
}

/* ── race ────────────────────────────────────────────────────────── */

.act--race { background: #17130f; }
.race-art,
.race-art__photo,
.race-art__haze { position: absolute; inset: 0; }
.race-art { overflow: hidden; }
.race-art__photo {
  background-size: cover;
  background-position: 38% 52%;
  filter: contrast(1.07) saturate(.82) brightness(.7);
  transform: scale(1.04);
}
.race-art__haze {
  background:
    linear-gradient(to bottom, rgba(12,11,9,.72), transparent 33%, rgba(12,11,9,.08) 62%, rgba(12,11,9,.82)),
    radial-gradient(circle at 70% 35%, rgba(234,151,66,.22), transparent 35%);
}

.race-topline {
  position: absolute;
  z-index: 4;
  top: var(--safe-top);
  left: 1rem;
  right: 1rem;
}
.race-distance {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  color: var(--orange-bright);
  font-variant-numeric: tabular-nums;
}
.race-distance span { font-size: 30px; font-weight: 950; line-height: .8; letter-spacing: -.05em; }
.race-distance small { color: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: .12em; }

.course {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 16%;
  height: 120px;
}
.course__base,
.course__route {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 28px;
  height: 3px;
  transform-origin: left center;
}
.course__base { background: rgba(245,238,226,.33); }
.course__route {
  background: linear-gradient(90deg, var(--orange), #f1b269 55%, rgba(245,238,226,.72));
  transform: scaleX(0);
  box-shadow: 0 0 18px rgba(255,90,34,.4);
}
.finish {
  position: absolute;
  left: 31%;
  bottom: 28px;
  width: 2px;
  height: 78px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 6px, transparent 6px 11px);
  opacity: .85;
}
.finish span {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink);
  font: 900 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.figure {
  position: absolute;
  left: 5%;
  bottom: 18px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  will-change: transform;
}
.figure__body {
  display: block;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-12deg);
}
.figure--runner { z-index: 3; color: var(--orange); filter: drop-shadow(0 0 10px rgba(255,90,34,.55)); }
.figure--ghost {
  z-index: 2;
  color: rgba(245,238,226,.72);
  opacity: .82;
  filter: blur(.3px) drop-shadow(0 0 8px rgba(245,238,226,.35));
}
.figure--ghost .figure__body { -webkit-text-stroke: 1px var(--ink); color: transparent; }
.figure.is-running .figure__body { animation: drive .22s infinite alternate ease-in-out; }
@keyframes drive { from { transform: rotate(-14deg) translateY(0); } to { transform: rotate(-9deg) translateY(-5px); } }

.particle-trail {
  position: absolute;
  left: 7%;
  bottom: 30px;
  width: 0;
  height: 50px;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255,120,70,.95) 0 1px, transparent 1.5px) 0 0/13px 11px,
    radial-gradient(circle, rgba(245,238,226,.65) 0 1px, transparent 1.5px) 4px 3px/17px 15px;
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 80%, transparent);
  transform: translateY(50%);
}

.race-message {
  position: absolute;
  z-index: 5;
  top: 18%;
  left: 1rem;
  max-width: 8ch;
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0,0,0,.55);
}
.race-message p,
.race-message strong {
  display: block;
  font-size: clamp(36px, 12vw, 80px);
  font-weight: 950;
  line-height: .88;
  letter-spacing: -.055em;
}
.race-message p { color: var(--muted); }
.race-message strong { color: var(--ink); }
.race-message[data-phase="finish"] p { color: var(--orange-bright); }
.race-message[data-phase="ghost"] strong { color: var(--orange-bright); }

.ghost-counter {
  position: absolute;
  z-index: 5;
  /* Was jammed against the edge with a 150px numeral beside a flipped post
     label. Both needed room. */
  right: clamp(1rem, 4vw, 4rem);
  bottom: 33%;
  text-align: right;
  display: flex;
  align-items: baseline;
  gap: .15rem;
  opacity: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 18px rgba(0,0,0,.55);
}
.ghost-counter span { font-size: clamp(56px, 15vw, 116px); font-weight: 950; line-height: .75; letter-spacing: -.07em; }
.ghost-counter small { color: var(--orange-bright); font-size: 17px; font-weight: 900; }

.skip {
  position: absolute;
  z-index: 6;
  right: 1rem;
  bottom: var(--safe-bottom);
  min-height: 44px;
  border: 0;
  background: transparent;
  color: rgba(245,238,226,.68);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── result ──────────────────────────────────────────────────────── */

.act--result {
  display: grid;
  align-items: center;
  gap: 1rem;
  padding: var(--safe-top) 1rem var(--safe-bottom);
  background: #0f0e0d;
}
.result-poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 430px);
  min-height: min(70svh, 675px);
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.18);
  background: #3b2b21;
  box-shadow: 0 24px 80px rgba(0,0,0,.52);
}
.result-photo,
.result-shade { position: absolute; inset: 0; z-index: -2; }
.result-photo {
  background-size: cover;
  background-position: 39% 50%;
  filter: contrast(1.08) saturate(.82) brightness(.68);
  transform: scale(1.02);
}
.result-shade {
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10,9,8,.84), rgba(10,9,8,.12) 33%, rgba(10,9,8,.1) 57%, rgba(10,9,8,.94) 88%),
    linear-gradient(92deg, rgba(10,9,8,.44), transparent 68%);
}
.result-head { position: relative; }
.result-meta {
  max-width: 60%;
  color: var(--muted);
  font: 700 8.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-align: right;
  text-transform: uppercase;
}

.result-equation {
  align-self: center;
  display: grid;
  justify-items: start;
  padding-top: 1.5rem;
  text-shadow: 0 4px 22px rgba(0,0,0,.55);
}
.route-number,
.total-number {
  display: flex;
  align-items: flex-start;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.route-number span {
  font-size: clamp(76px, 25vw, 128px);
  font-weight: 950;
  line-height: .68;
  letter-spacing: -.075em;
}
.route-number small,
.total-number small {
  max-width: 9ch;
  margin-left: .55rem;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: .1em;
}
.arrow-line {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem;
  margin: .45rem 0 .55rem;
  color: var(--orange);
}
.arrow-line span { height: 4px; background: var(--orange); box-shadow: 0 0 16px rgba(255,90,34,.5); }
.arrow-line i { font-size: 30px; font-style: normal; line-height: .5; }
.total-number sup { margin: .1rem .25rem 0 0; color: var(--orange-bright); font-size: 24px; font-weight: 900; }
.total-number span {
  color: var(--orange-bright);
  font-size: clamp(100px, 35vw, 170px);
  font-weight: 950;
  line-height: .62;
  letter-spacing: -.09em;
}
.total-number small { color: var(--ink); }
.tax-badge {
  justify-self: end;
  margin-top: 1.1rem;
  padding: .48rem .65rem;
  background: var(--orange);
  color: #160f0b;
  font: 950 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .075em;
  transform: rotate(-2deg);
}

.exposure-strip {
  position: relative;
  height: 44px;
  margin: .45rem 0 .75rem;
}
.exposure-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 23px;
  height: 2px;
  background: rgba(245,238,226,.35);
}
.exposure-strip__runner,
.exposure-strip__ghost {
  position: absolute;
  top: 10px;
  z-index: 2;
  font-size: 22px;
  line-height: 1;
}
.exposure-strip__runner { left: 28%; color: var(--orange); }
.exposure-strip__ghost { right: 2%; color: var(--ink); }
.exposure-strip__finish {
  position: absolute;
  left: 31%;
  top: 0;
  width: 2px;
  height: 42px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 5px, transparent 5px 9px);
}
.exposure-strip__trail {
  position: absolute;
  left: 31%;
  right: 3%;
  top: 22px;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), rgba(245,238,226,.75));
  box-shadow: 0 0 13px rgba(255,90,34,.45);
}

.result-foot {
  padding-top: .65rem;
  border-top: 1px solid rgba(245,238,226,.26);
  color: rgba(245,238,226,.78);
  font: 600 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.result-source { margin-top: .3rem; color: var(--orange-bright); text-transform: uppercase; letter-spacing: .055em; }

.result-actions {
  width: min(100%, 430px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.result-actions .action--primary { grid-column: 1 / -1; }
.text-action {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.meaning {
  width: min(100%, 430px);
  margin-inline: auto;
  border-top: 1px solid var(--rule);
}
.meaning summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.meaning summary::-webkit-details-marker { display: none; }
.meaning summary::after { content: "+"; color: var(--orange); font-size: 20px; }
.meaning[open] summary::after { content: "−"; }
.meaning__body {
  display: grid;
  gap: .8rem;
  padding: .25rem 0 1rem;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.meaning-visual {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  align-items: center;
  gap: .35rem;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.meaning-visual__factor,
.meaning-visual__total { color: var(--orange-bright); }

@media (min-width: 720px) {
  .act--setup { padding: 1.5rem 2rem 2rem; }
  .photo--setup { background-position: center 54%; }
  .setup-copy { align-self: center; padding: 5rem 0 2rem; }
  .distance-picker { grid-template-columns: 1.25fr .75fr; align-items: stretch; }
  .distance-options span { min-height: 74px; }
  .action--primary { min-height: 74px; }
  .micro { grid-column: 1 / -1; }
  .race-message { left: 6vw; top: 17%; }
  .race-topline { left: 3rem; right: 3rem; top: 2rem; }
  .course { bottom: 13%; }
  .ghost-counter { right: 5vw; bottom: 30%; }
  /* The result stays SINGLE COLUMN here. Two columns start at 960px, below. */
}

/*
 * Two-column result. 960px, not 720px.
 *
 * At 720px the grid asked for minmax(360px,460px) + minmax(260px,350px) plus a
 * 2rem gap and 2rem padding: 716px of minimums into a 720px viewport. The
 * poster therefore sat at its 360px floor while its own contents needed
 * 395-427px, and .result-poster hides overflow, so the verdict, the badge, the
 * equation and the footer were CLIPPED at the right edge on tablets, small
 * laptops and any split-screen window. Lost content, not tight spacing.
 *
 * New minimums: 430 + 340 + 32 + 64 = 866px, comfortably inside 960px.
 * Re-check at 720, 768, 820, 960, 1024 and 1440 after touching these numbers.
 */
@media (min-width: 960px) {
  .act--result {
    grid-template-columns: minmax(430px, 520px) minmax(340px, 400px);
    grid-template-rows: auto auto;
    justify-content: center;
    column-gap: 2rem;
    padding: 2rem;
  }
  .result-poster { grid-row: 1 / 3; min-height: min(88svh, 760px); width: 100%; }
  .result-actions, .meaning { width: 100%; margin: 0; }
  .result-actions { align-self: end; }
  .meaning { align-self: start; }
}

@media (max-height: 700px) and (max-width: 719px) {
  .setup-copy { padding-bottom: 1.25rem; }
  .setup-copy h1 { font-size: clamp(34px, 10.5vw, 50px); }
  .distance-options span { min-height: 57px; padding-block: .55rem; }
  .distance-options b { font-size: 25px; }
  .action { min-height: 50px; }
  .result-poster { min-height: 68svh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .grain, .photo, .race-art, .result-photo, .result-shade { display: none; }
  .act, .result-poster { background: Canvas; color: CanvasText; }
  .action, .distance-options span { border: 2px solid ButtonBorder; }
}

/* ── the course: one runner, two finish posts ──────────────────────────
   The camera is a transform on .world. Phase one is zoomed in so YOUR
   distance fills the frame. After the finish the scale animates out to 1,
   which drags your post leftward and brings the clean-air post into view
   from somewhere off in the haze. That pull-back IS the point being made. */

.course {
  position: absolute; left: 0; right: 0; bottom: 22%;
  height: 200px; overflow: hidden;
}
.world {
  position: absolute; left: 6%; bottom: 60px; width: 88%; height: 140px;
  transform-origin: 0 100%;
  will-change: transform;
}
.world__road {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: rgba(245, 238, 226, .34);
}
/* The stretch of road you never ran but paid for anyway. */
.world__road--debt {
  height: 5px; bottom: -1px; background: var(--blaze, #ff5a22);
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  left: 0; width: 100%;
}

.post {
  position: absolute; bottom: 0; display: flex; flex-direction: column;
  gap: 2px; padding-left: 10px; white-space: nowrap;
  border-left: 3px solid currentColor; height: 96px;
  transform: translateX(-1.5px);
}
.post--you { color: var(--blaze, #ff5a22); }
.post--clean {
  color: rgba(245, 238, 226, .92);
  border-left-style: dashed; opacity: 0;
  transition: opacity .5s ease;
}
.post--clean[data-visible="true"] { opacity: 1; }
.post__label {
  font: 700 10px/1.25 ui-sans-serif, sans-serif;
  letter-spacing: .13em; text-transform: uppercase; opacity: .8;
  max-width: 128px; white-space: normal;
}
.post__km {
  font-family: "Haze Condensed", "Roboto Condensed", Arial, sans-serif;
  font-weight: 800; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.figure {
  position: absolute; bottom: 4px; left: 0;
  font-size: 34px; line-height: 1; color: var(--blaze, #ff5a22);
  transform: translateX(-50%); will-change: transform;
}
.figure__body { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .figure[data-running="true"] .figure__body {
    animation: stride-bob .3s ease-in-out infinite alternate;
  }
}
@keyframes stride-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }

@media (max-width: 640px) {
  .course { bottom: 26%; height: 170px; }
  .world { left: 8%; width: 84%; }
  .post__km { font-size: 24px; }
  .post__label { font-size: 9px; max-width: 96px; }
}

/* ── the verdict ───────────────────────────────────────────────────── */

.verdict-said { font-size: clamp(15px, 4vw, 19px); opacity: .82; }
.verdict-said b { font-weight: 800; }
.verdict-did {
  font: 700 11px/1 ui-sans-serif, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; opacity: .6;
  margin-top: .5rem;
}
.verdict-name {
  font-family: "Haze Condensed", "Roboto Condensed", Arial, sans-serif;
  font-weight: 800; font-size: clamp(34px, 11vw, 62px); line-height: .96;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--blaze, #ff5a22); margin-top: .1rem;
}
.verdict-maths {
  font-size: 13px; opacity: .72; margin-top: .7rem;
  font-variant-numeric: tabular-nums;
}
.verdict-maths b { font-weight: 700; opacity: 1; }

/* ── station picker ────────────────────────────────────────────────── */

.air-control { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.station-picker select {
  appearance: none;
  background: rgba(12, 11, 9, .72);
  color: #f5eee2;
  border: 1px solid rgba(245, 238, 226, .3);
  border-radius: 2px;
  padding: 7px 30px 7px 11px;
  font: 700 11px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  min-height: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #f5eee2 50%),
                    linear-gradient(135deg, #f5eee2 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.station-picker select:focus-visible { outline: 3px solid var(--blaze, #ff5a22); outline-offset: 2px; }
@media (max-width: 640px) {
  .air-control { align-items: stretch; }
  .station-picker select { width: 100%; }
}

/* ── share feedback ────────────────────────────────────────────────── */
/* Every branch of the old ladder ended in a screen-reader-only announcement,
   so a sighted user tapped Share and saw literally nothing happen. */

.share-status {
  min-height: 1.4em; font-size: 13px; opacity: 0;
  transition: opacity .2s ease; text-align: left;
}
.share-status[data-shown="true"] { opacity: .9; }
.share-status[data-tone="ok"] { color: #7ddba0; }
.share-status[data-tone="warn"] { color: #ffb27a; }

/* The race caption was sized for two short words. Give it real room and stop
   it setting one word per line, which is exactly the cramping problem. */
.race-message { max-width: min(46ch, 46vw); }
.race-message p, .race-message strong { font-size: clamp(28px, 5.2vw, 62px); line-height: 1.02; }
.race-message p, .race-message strong { text-wrap: balance; hyphens: none; }
@media (max-width: 900px) {
  .race-message { max-width: min(30ch, 78vw); }
}

/* When the clean-air post sits near the right edge, its label hangs off the
   left of the marker instead of running out of the viewport. */
.post--clean[data-flip="true"] {
  border-left: 0; border-right: 3px dashed currentColor;
  padding-left: 0; padding-right: 10px;
  align-items: flex-end; text-align: right;
  /* Hang the whole box to the LEFT of the marker. Without this the box still
     grew rightward from the line and ran off the screen; text-align only
     moved the glyphs inside a box that was already in the wrong place. */
  transform: translateX(calc(-100% + 1.5px));
}
.post--clean[data-flip="true"] .post__label { text-align: right; }

/* Kilometre ticks. Spacing is set from JS in view-relative units, so the road
   compresses as the camera pulls back and a long route visibly passes more
   markers than a short one. */
.world__road {
  background-image: repeating-linear-gradient(
    to right,
    rgba(245, 238, 226, .34) 0 1px,
    transparent 1px var(--tick, 10%)
  );
  height: 3px;
}
.world__road::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(245, 238, 226, .18);
}

/* The recipient of a shared scenario needs to know what they were handed
   before they are asked to do anything with it. */
.shared-note {
  align-self: flex-start;
  max-width: min(46ch, 92vw);
  margin-bottom: .4rem;
  padding: .6rem .8rem;
  border-left: 3px solid var(--orange-bright, #ff5a22);
  background: rgba(12, 11, 9, .55);
  font: 600 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #f5eee2;
}

/* The clean-air post is the payoff, so it gets breathing room rather than
   being squeezed against the viewport edge. */
.post--clean { max-width: 42vw; }
.post--clean .post__label { max-width: 190px; opacity: .95; }
.post--clean .post__km { font-size: clamp(26px, 6vw, 40px); }
@media (max-width: 760px) {
  .post--clean { max-width: 52vw; }
  .post--clean .post__label { max-width: 150px; font-size: 9.5px; }
}