.race-app {
  max-width:1180px;
  padding:16px 20px 26px;
}

.race-topbar {
  min-height:36px;
  margin:0;
  padding-bottom:9px;
  border-bottom:1px solid rgba(21,58,91,.12);
  gap:12px;
}

.back-link {
  flex:0 0 auto;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.race-nav {
  display:flex;
  gap:5px;
}

.race-nav a {
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:7px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}

.race-nav a:hover {
  border-color:var(--line);
  color:var(--navy);
  background:var(--paper);
}

.race-topbar .eyebrow {
  margin-left:auto;
  white-space:nowrap;
}

.race-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:9px 0 11px;
}

.race-heading h1 {
  margin:0;
  font-size:clamp(32px,4vw,47px);
  line-height:1;
}

.race-emblem {
  width:52px;
  height:52px;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:3px double var(--gold);
  border-radius:50%;
  color:var(--gold);
  background:var(--navy);
  font:700 23px Fraunces,Georgia,serif;
  transform:rotate(7deg);
}

.race-emblem span {
  font:6px 'DM Mono',monospace;
  letter-spacing:.06em;
}

.race-workspace {
  display:grid;
  grid-template-columns:minmax(360px,1.18fr) minmax(300px,.82fr);
  gap:12px;
  align-items:start;
}

.race-workspace .card {
  border-radius:14px;
  box-shadow:0 8px 24px #153a5b08;
}

.race-course {
  padding:14px;
  overflow:hidden;
}

.arena-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.arena-top p {
  margin:0 0 9px;
}

.ghost-label {
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.track {
  position:relative;
  height:176px;
  overflow:hidden;
  border-radius:11px;
  background:linear-gradient(#e3eef2 0 42%,#d3dcc7 42% 48%,#214d65 48%);
}

.track-sky {
  position:absolute;
  inset:0 0 54%;
}

.city-block {
  position:absolute;
  bottom:0;
  width:58px;
  height:27px;
  background:#b7cbd1;
}

.b1 { left:9%; height:35px; }
.b2 { left:22%; width:85px; }

.capitol {
  position:absolute;
  right:8%;
  bottom:-2px;
  width:94px;
  height:72px;
  color:#6e8e9a;
}

.lane {
  position:absolute;
  left:0;
  right:0;
  height:39px;
  border-bottom:1px dashed #bed2dc70;
}

.lane span {
  position:absolute;
  top:12px;
  left:10px;
  color:#d1e0e9;
  font:8px 'DM Mono',monospace;
  letter-spacing:.1em;
}

.lane-ghost { top:84px; }
.lane-you { top:124px; }

.finish-line {
  position:absolute;
  top:84px;
  right:35px;
  bottom:7px;
  width:11px;
  background:repeating-conic-gradient(#fffcf0 0% 25%,#17394c 0% 50%) 0 0/11px 11px;
}

.finish-flag {
  position:absolute;
  top:67px;
  right:17px;
  padding:3px 6px;
  color:#203e4e;
  background:var(--gold);
  font:700 9px 'DM Mono',monospace;
}

.racer {
  --progress:0;
  position:absolute;
  left:calc(29px + (100% - 70px) * var(--progress));
  z-index:2;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:var(--gold);
  transform:translateX(-50%);
  transition:left .35s ease;
}

.racer-you { top:122px; }

.racer-ghost {
  top:82px;
  color:#c9e1eb;
  opacity:.48;
  transition:none;
}

.runner-icon {
  width:40px;
  height:40px;
  color:inherit;
  filter:drop-shadow(1px 2px 0 #102d4080);
}

.race-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:11px 0 8px;
}

.race-stats span {
  display:block;
  color:var(--muted);
  font:9px 'DM Mono',monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.race-stats strong {
  display:block;
  color:var(--navy);
  font:700 clamp(19px,2.5vw,27px) Fraunces,Georgia,serif;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.race-progress {
  height:5px;
  margin:7px 0 0;
  overflow:hidden;
  border-radius:5px;
  background:#e8e5dc;
}

.race-progress span {
  display:block;
  width:0;
  height:100%;
  background:var(--gold);
  transition:width .35s;
}

.race-side {
  display:grid;
  gap:12px;
}

.setup {
  padding:14px 16px;
}

.race-controls {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.race-controls label:first-child {
  grid-column:1 / -1;
}

.race-controls label {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.race-controls select {
  width:100%;
  min-width:0;
  display:block;
  margin-top:3px;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--navy);
  background:white;
  font-size:12px;
}

.setup-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

.setup-footer p {
  margin:0;
  line-height:1.35;
}

.setup-footer button {
  flex:0 0 auto;
  padding:8px 11px;
  font-size:12px;
}

.race-action {
  min-height:216px;
  padding:15px 16px;
}

#ready .eyebrow,
#paused .eyebrow {
  margin-bottom:4px;
}

#ready h2,
#paused h2 {
  margin:0 0 7px;
  font-size:27px;
}

#ready p:last-child,
#paused p {
  margin-bottom:0;
  font-size:13px;
  line-height:1.5;
}

#raceQuestion {
  min-height:0;
  margin:6px 0;
  font-size:clamp(19px,2.2vw,25px);
  line-height:1.25;
}

#raceOptions {
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:9px 0;
}

#raceOptions button {
  min-height:48px;
  padding:7px 9px;
  font-size:12px;
  line-height:1.3;
}

#raceFeedback {
  min-height:44px;
  margin:9px 0;
  padding:8px 10px;
  font-size:12px;
  line-height:1.4;
}

.race-actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.race-actions button {
  padding:7px 9px;
  font-size:11px;
}

.finish-burst {
  position:absolute;
  top:22px;
  left:50%;
  z-index:3;
  padding:6px 15px;
  border:3px double var(--navy);
  color:var(--navy);
  background:var(--gold);
  box-shadow:4px 5px 0 #153a5b30;
  font:700 20px Fraunces,serif;
  transform:translateX(-50%) rotate(-6deg);
}

.result-time {
  margin:6px 0;
  color:var(--navy);
  font:700 40px Fraunces,serif;
}

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

.missed-words li {
  padding:3px 9px;
  border:1px solid var(--line);
  border-radius:20px;
  font-size:11px;
}

.storage-note {
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
}

.race-workspace:has(#paused:not([hidden])) .track {
  filter:saturate(.4);
}

.race-app footer {
  margin-top:10px;
  font-size:12px;
}

.race-app footer summary {
  width:fit-content;
}

.race-app footer p {
  max-width:820px;
  margin:8px 0;
  line-height:1.5;
}

@media (max-width:760px) {
  .race-app { padding:12px 14px 24px; }
  .race-topbar .eyebrow { display:none; }
  .race-heading { margin-top:8px; }
  .race-workspace { grid-template-columns:minmax(330px,1.1fr) minmax(280px,.9fr); }
  .race-course { padding:11px; }
  .race-action { padding:13px; }
}

@media (max-width:680px) {
  .race-topbar { align-items:flex-start; flex-wrap:wrap; }
  .race-nav { width:100%; overflow-x:auto; }
  .race-heading h1 { font-size:34px; }
  .race-emblem { width:46px; height:46px; }
  .race-workspace { grid-template-columns:1fr; }
  .race-side { order:-1; }
  .track { height:164px; }
  .lane-ghost { top:77px; }
  .lane-you { top:116px; }
  .finish-line { top:77px; }
  .finish-flag { top:60px; }
  .racer-ghost { top:75px; }
  .racer-you { top:114px; }
}

@media (max-width:430px) {
  .race-app { padding-inline:10px; }
  .race-controls { grid-template-columns:1fr; }
  .race-controls label:first-child { grid-column:auto; }
  .setup-footer { align-items:stretch; flex-direction:column; }
  .setup-footer button { width:100%; }
  .race-stats { grid-template-columns:1fr 1fr; }
  .race-stats strong { font-size:23px; }
  #raceOptions { grid-template-columns:1fr; }
  #raceOptions button { min-height:43px; }
  .race-action { min-height:0; }
  .lane span { display:none; }
}

@media (min-width:681px) and (max-height:700px) {
  .race-app { padding-top:10px; }
  .race-heading { margin:6px 0 8px; }
  .race-heading h1 { font-size:34px; }
  .race-emblem { width:44px; height:44px; font-size:20px; }
  .track { height:156px; }
  .lane-ghost { top:74px; }
  .lane-you { top:112px; }
  .finish-line { top:74px; }
  .finish-flag { top:57px; }
  .racer-ghost { top:72px; }
  .racer-you { top:110px; }
  .race-action { min-height:200px; }
}

@media (prefers-reduced-motion:reduce) {
  .racer,.race-progress span { transition:none; }
  .racer-ghost { opacity:.5; }
}