:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  color: #fff;
  background: #1e5377;
  font-synthesis: none;
  --ink: #152b50;
  --dark: #112b50;
  --yellow: #ffdb51;
  --pad: clamp(13px, 2vw, 32px);
  --route-width: clamp(248px, 24vw, 395px);
  --utility-width: 169px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overscroll-behavior: none; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 5px; }
button:disabled { cursor: default; }

#race { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; user-select: none; }
#world, #world canvas, .vignette, #effects, .overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#world canvas { display: block; }
#world {
  background: radial-gradient(ellipse at 80% 9%, #dffaff7a, transparent 35%),
    linear-gradient(180deg, #59b5f4, #a6e5ff 68%, #cff7ff);
}
.vignette {
  pointer-events: none;
  background: linear-gradient(180deg, #13254144 0%, transparent 18%, transparent 58%, #0a1a3880 100%);
}
#race:has(#start-screen:not([hidden])) #world {
  background: radial-gradient(ellipse at 51% 8%, #fef1ff8c, transparent 50%),
    linear-gradient(180deg, #6b61e6 0%, #8eabff 50%, #d2ecff 100%);
}
#race:has(#start-screen:not([hidden])) .vignette { background: linear-gradient(180deg, #3a288e27, transparent 38%, transparent 64%, #49418c6e); }
#effects { pointer-events: none; }

.hud { position: absolute; z-index: 4; top: var(--pad); inset-inline: var(--pad); display: flex; justify-content: space-between; gap: 16px; pointer-events: none; }
.route {
  width: var(--route-width); flex: 0 0 auto; padding: 15px 18px;
  background: linear-gradient(160deg, #203f69f5, #10294cf2);
  border: 2px solid #e1f6ff73; border-radius: 19px;
  box-shadow: 0 5px 0 #14315672, 0 8px 17px #1327463d;
}
.route-title { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.route-title strong { font-size: clamp(21px, 2.55vw, 31px); line-height: 1.13; }
.route-title span { color: #cbe6ff; font-size: clamp(13px, 1.3vw, 18px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.route-unit { color: #d5cfff; font-size: clamp(13px, 1.4vw, 18px); font-weight: 800; margin-top: 4px; }
.route-progress { display: flex; gap: 6px; margin-top: 9px; }
.route-progress i { flex: 1; height: 6px; border-radius: 6px; background: #b8d8ff3a; }
.route-progress .active { background: var(--yellow); }
.route-progress .passed { background: #79f4db; }
.run-stats { display: flex; justify-content: space-between; align-items: center; gap: 9px; margin-top: 12px; }
.health { display: flex; align-items: center; gap: clamp(3px, .44vw, 7px); flex: 1 1 auto; min-width: 0; }
.health-star {
  display: block;
  width: clamp(22px, 2.55vw, 39px);
  aspect-ratio: 1;
  background: linear-gradient(146deg, #fff9c5 14%, #ffe367 39%, #ffbe36 57%, #ed8f24 90%);
  clip-path: polygon(50% 2%, 64% 33%, 98% 37%, 73% 60%, 79% 94%, 50% 77%, 21% 94%, 27% 60%, 2% 37%, 36% 33%);
}
.health-star.is-spent { background: linear-gradient(145deg, #7694b8, #456382); opacity: .62; }
.distance { flex: 0 0 auto; white-space: nowrap; color: #ffdf61; font-variant-numeric: tabular-nums; }
.distance strong { font-size: clamp(25px, 3vw, 43px); line-height: 1.12; }
.distance span { margin-left: 4px; color: #d5e9ff; font-weight: 800; }
.utility { display: flex; gap: 8px; margin-left: auto; pointer-events: auto; }
#race:has(#finish-screen:not([hidden])) .utility { display: none; }
.icon-button { display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid #e1f6ff60; border-radius: 15px; background: #10294ceb; box-shadow: 0 4px 12px #13274632; }
.icon-button svg { width: 25px; height: 25px; }
#race:has(#start-screen[hidden]) .lobby-only { display: none; }
.icon-button.lobby-only {
  width: 57px; height: 57px; border: 2px solid #fff7da; border-bottom-width: 5px;
  box-shadow: 0 3px 0 #38267184, 0 6px 18px #35266a58;
}
.trophy-button { color: #754214; background: linear-gradient(#fff2a8, #ffbd43); border-bottom-color: #cc6c1a !important; }
.gear-button { color: #fff; background: linear-gradient(#a68af7, #7250d4); border-bottom-color: #4f30a4 !important; }
.icon-button.lobby-only:hover { filter: brightness(1.08); }
.sound-cross, #sound[aria-pressed="false"] .sound-wave { display: none; }
#sound[aria-pressed="false"] .sound-cross { display: initial; }

.overlay { display: grid; z-index: 3; }
.start-overlay {
  pointer-events: none;
  background: linear-gradient(155deg, #392a8b35, transparent 37%);
}
.unit-label { color: #bdefff; font-weight: 800; font-size: clamp(15px, 1.7vw, 23px); letter-spacing: .08em; }
h1, h2, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lobby-brand { position: absolute; left: max(26px, 4vw); top: max(23px, 4.2vh); pointer-events: auto; }
.lobby-brand h1 {
  font-size: clamp(48px, 6vw, 92px); line-height: 1.07; font-weight: 950;
  letter-spacing: -.075em; color: #fff08b;
  -webkit-text-stroke: .08em #51329f;
  paint-order: stroke fill;
  text-shadow: 0 .07em #ee9d35, 0 .13em #613aa9, 0 .17em #38246e;
  transform: rotate(-3deg); transform-origin: left center;
}
.lobby-subtitle {
  margin: 12px 0 15px; width: max-content; padding: 4px 13px 5px; border-radius: 8px;
  color: #fff1f8; background: #50329c;
  font-size: clamp(12px, 1.4vw, 18px); font-weight: 900; letter-spacing: .12em;
  box-shadow: 0 3px 0 #372170a3;
}
.player-field, .unit-picker { position: relative; display: flex; align-items: center; min-width: 0; border: 2px solid #eee3ff; background: #4c338fde; border-radius: 40px; box-shadow: 0 4px 0 #34226991; font-weight: 900; }
.player-field { max-width: 254px; padding-left: 5px; }
.player-egg { position: relative; flex: 0 0 35px; height: 35px; border-radius: 50%; background: #d8c4ff; box-shadow: inset 0 -3px 0 #aa8bf2; }
.player-egg::before { content: ""; position: absolute; inset: 6px 7px 5px; border-radius: 54% 54% 45% 45%; background: linear-gradient(#fff2a4, #ffc044); box-shadow: inset 0 -3px #ef9e2d; }
.player-egg::after { content: ""; position: absolute; width: 3px; height: 4px; left: 13px; top: 16px; border-radius: 50%; background: #59356a; box-shadow: 7px 0 #59356a; }
.player-field::after, .unit-picker::after {
  content: ""; pointer-events: none; position: absolute; right: 15px;
  width: 8px; height: 8px; border: solid #ffe891; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg);
}
.player-field select, .unit-picker select {
  flex: 1; width: 100%; min-width: 0; min-height: 46px; padding: 7px 35px 7px 8px;
  appearance: none; font: inherit; color: #fff; background: transparent; border: 0; border-radius: inherit; cursor: pointer;
}
.player-field option, .unit-picker option { color: #33215d; background: #f5ecff; }
.player-field select:focus-visible, .unit-picker select:focus-visible { outline: 3px solid #ffe778; outline-offset: 2px; }
.lobby-play { position: absolute; right: max(26px, 4vw); bottom: max(28px, 6.2vh); width: clamp(232px, 24vw, 370px); pointer-events: auto; }
.unit-picker { padding-left: 16px; gap: 10px; margin-bottom: 10px; }
.unit-picker > span { white-space: nowrap; color: #ded0ff; font-size: clamp(12px, 1.25vw, 16px); }
.unit-picker select { font-size: clamp(17px, 1.7vw, 25px); }
.primary-button.play-button { width: 100%; min-height: clamp(60px, 10vh, 94px); border-radius: 24px; letter-spacing: .04em; font-size: clamp(24px, 3vw, 47px); }
.start-help { color: #fff9fb; font-size: clamp(12px, 1.25vw, 16px); font-weight: 900; margin-top: 13px; text-align: center; text-shadow: 0 2px 4px #50369a, 0 0 7px #483273; }
.start-status { margin: 8px 0 0; padding: 9px 11px; border-radius: 10px; background: #331d5d; color: #fff0b9; font-size: 15px; line-height: 1.5; }

.lobby-podium { position: absolute; left: max(26px, 4vw); bottom: max(30px, 6vh); width: clamp(254px, 29vw, 408px); isolation: isolate; }
.lobby-podium h2 {
  position: relative; margin: 0 auto 6px; width: max-content; padding: 6px 19px 8px;
  transform: rotate(-2deg); border-radius: 10px; background: linear-gradient(#a486fc, #7750d8);
  border: 2px solid #eee0ff; color: #fff6af; font-size: clamp(16px, 1.9vw, 26px);
  text-shadow: 0 2px #684097; box-shadow: 0 4px 0 #4d30a3c2; font-weight: 950;
}
.podium-steps { display: grid; grid-template-columns: .98fr 1.13fr .98fr; align-items: end; gap: 4px; filter: drop-shadow(0 11px 12px #3f26795d); }
.podium-slot {
  --top: #ddf2ff; --light: #eef9ff; --mid: #a6c7ee; --bottom: #6487b4; --ink: #254a7b;
  min-width: 0; text-align: center;
}
.podium-slot.gold { --top: #fff0a0; --light: #fff4ad; --mid: #ffcb4d; --bottom: #dd891c; --ink: #693816; }
.podium-slot.bronze { --top: #ffe1bd; --light: #ffd9ad; --mid: #e8a87a; --bottom: #ac6241; --ink: #713923; }
.podium-crown {
  position: relative; width: 64%; max-width: 83px; height: clamp(39px, 6.7vh, 63px); margin: 0 auto 2px;
  background: linear-gradient(113deg, var(--bottom), var(--light) 32%, var(--mid) 55%, var(--light) 78%, var(--bottom) 94%);
  clip-path: polygon(4% 29%, 25% 49%, 48% 3%, 72% 48%, 97% 25%, 83% 89%, 76% 96%, 23% 96%, 16% 88%);
  box-shadow: inset 0 -9px 0 var(--bottom);
}
.podium-crown::before { content: ""; position: absolute; left: 42%; top: 49%; width: 17%; height: 25%; transform: rotate(45deg); background: #a27cf6; border: 2px solid #f9edff; border-radius: 3px; }
.podium-slot.silver .podium-crown::before { background: #70c9f8; }
.podium-slot.bronze .podium-crown::before { background: #f58c7f; }
.podium-slot.gold .podium-crown { height: clamp(47px, 8vh, 72px); }
.podium-block {
  position: relative; z-index: 0; display: grid; justify-items: center; align-content: start; min-width: 0;
  min-height: clamp(76px, 12vh, 120px); padding: 13px 4px 8px; border-radius: 10px 10px 12px 12px;
  background: linear-gradient(180deg, var(--light), var(--mid) 55%, var(--bottom));
  border: 2px solid var(--light); border-bottom: 5px solid var(--bottom); color: var(--ink);
}
.podium-slot.gold .podium-block { min-height: clamp(104px, 17vh, 156px); }
.podium-slot.bronze .podium-block { min-height: clamp(65px, 10.5vh, 105px); }
.podium-block::before { content: ""; position: absolute; z-index: -1; inset: -5px -2px auto; height: 12px; border-radius: 8px 8px 5px 5px; background: var(--top); border-bottom: 2px solid var(--bottom); }
.podium-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(13px, 1.5vw, 21px); font-weight: 950; }
.podium-score { min-height: 1.25em; font-size: clamp(11px, 1.15vw, 15px); font-weight: 850; font-variant-numeric: tabular-nums; }
.podium-place { position: absolute; left: 7px; bottom: 4px; font-size: clamp(17px, 2.15vw, 31px); line-height: 1; font-weight: 1000; opacity: .48; text-shadow: 0 1px var(--light); }
.podium-slot.vacant .podium-crown { opacity: .75; }
.primary-button, .secondary-button {
  min-height: 61px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  border-radius: 17px;
  padding: 10px 27px;
  font-size: clamp(20px, 2.35vw, 33px);
  line-height: 1.2;
  font-weight: 900;
}
.primary-button { background: linear-gradient(#ffe983, #ffc836); color: #382657; border: 2px solid #fff4b6; border-bottom-width: 5px; border-bottom-color: #e48b18; box-shadow: 0 7px 0 #72462683, 0 9px 22px #11224866; }
.primary-button kbd { font: inherit; font-size: .66em; padding: .16em .38em; border-radius: 6px; background: #7b472333; }
.secondary-button { background: #ffffff14; border: 2px solid #b8d8ff70; }
.primary-button:active, .secondary-button:active { transform: translateY(3px); }
.center-overlay { place-items: center; padding: var(--pad); background: #091b398c; }
.panel { max-width: min(680px, 100%); max-height: 100%; overflow: auto; text-align: center; padding: clamp(20px, 4vw, 46px); background: linear-gradient(#4b328d, #2f245f); border: 3px solid #ded1ff; border-radius: 28px; box-shadow: 0 9px 0 #2a1d68, 0 19px 55px #120f4273; }
.panel h2 { margin: 5px 0 20px; font-size: clamp(36px, 6vw, 69px); line-height: 1.12; color: #ffdf61; text-shadow: 0 4px #7a481c; }
.panel-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.panel-actions button { font-size: clamp(18px, 1.95vw, 28px); }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 15px; }
.results div { padding: 10px 6px; border-radius: 12px; background: #ffffff12; display: grid; gap: 3px; }
.results span { color: #c7e5ff; font-size: 14px; }
.results strong { font-size: clamp(19px, 2.7vw, 36px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.record-status { font-size: clamp(15px, 1.5vw, 20px); font-weight: 800; color: #8af1ce; margin-bottom: 9px; }
.finish-panel {
  width: min(750px, 100%); max-width: none; display: flex; flex-direction: column; gap: 5px;
  padding: clamp(14px, 2.6vw, 28px);
}
.finish-panel > :not(.finish-mistakes) { flex: none; }
.finish-panel h2 { margin: 0 0 7px; font-size: clamp(28px, 4.7vw, 52px); }
.finish-panel .results { margin: 0; }
.finish-panel .record-status { margin: 3px 0; }
.finish-note { margin: 0; color: #ffd9b4; font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; }
.finish-panel .panel-actions { margin-top: 10px; }
.finish-mistakes {
  min-height: 0; padding: 9px 12px 11px; overflow: auto; overscroll-behavior: contain;
  text-align: left; border-radius: 15px; background: #291d55; scrollbar-color: #c2a2fb #312560;
}
.finish-mistakes:focus-visible { outline: 2px solid #ffd986; outline-offset: 2px; }
.finish-mistakes h3 { margin: 1px 0 9px; color: #ffdf78; font-size: clamp(18px, 2vw, 26px); }
.finish-mistakes-empty { margin: 0; font-size: 16px; color: #d9fff0; }
.finish-mistake-list { display: grid; gap: 9px; margin: 0; padding-left: 1.45em; }
.finish-mistake { padding: 10px 12px; border-radius: 11px; background: #443579; overflow-wrap: anywhere; }
.finish-mistake::marker { font-weight: 900; color: #ffdf78; }
.mistake-question { margin: 0 0 8px; font-size: clamp(17px, 1.8vw, 24px); font-weight: 900; line-height: 1.35; }
.mistake-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.mistake-choices > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; padding: 5px 8px; border-radius: 7px; }
.mistake-choices dt { font-size: .86em; }
.mistake-choices dd { margin: 0; font-weight: 900; }
.mistake-wrong { background: #613554; color: #ffd3d5; }
.mistake-right { background: #23565c; color: #c2ffe1; }
.mistake-fact { margin: 7px 0 0; color: #f5eaff; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.42; }

.track-prompt {
  position: absolute; z-index: 2; isolation: isolate; top: clamp(10px, 1.9vh, 23px);
  left: max(calc(var(--pad) + var(--route-width) + 7px), calc(50% - 390px));
  right: max(calc(var(--pad) + var(--utility-width) + 7px), calc(50% - 390px));
  display: grid; place-content: center; gap: 3px; min-height: clamp(76px, 14.7vh, 142px);
  padding: clamp(14px, 2.55vh, 28px) clamp(34px, 5.3vw, 92px);
  color: #3b2554; text-align: center; pointer-events: none;
}
.track-prompt::before {
  content: ""; position: absolute; z-index: -1; inset: -18% 0;
  background: url("assets/question-sign.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 4px #32245a5c);
}
.prompt {
  margin: 0; font-weight: 900; line-height: 1.19; font-size: clamp(20px, min(2.33vw, 4.4vh), 36px);
  text-wrap: balance; overflow-wrap: anywhere;
}
.track-prompt[data-long="true"] { padding-block: clamp(17px, 3.3vh, 29px); }
.track-prompt[data-long="true"] .prompt { font-size: clamp(18px, min(2.09vw, 3.65vh), 32px); }
.prompt-action { margin: 0; color: #684776; font-size: clamp(13px, 1.38vw, 18px); font-weight: 800; }

.track-hint {
  position: absolute; z-index: 2; left: 50%; bottom: calc(max(15px, 2.5vh) + clamp(76px, 12vh, 105px) + 10px);
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px);
  margin: 0; padding: 8px 13px; border-radius: 10px; font-size: clamp(15px, 1.7vw, 23px); font-weight: 800;
  background: #10294cee; color: #a2ffdc; text-align: center; pointer-events: none;
}
.track-hint[data-tone="wrong"] { color: #ffd4b8; }
.controls {
  position: absolute; z-index: 2; left: 50%; bottom: max(15px, 2.5vh, env(safe-area-inset-bottom));
  transform: translateX(-50%); display: flex; gap: clamp(8px, 1.1vw, 14px); align-items: center;
  width: min(500px, calc(100% - 26px)); padding: 6px;
  border-radius: 23px; background: #10294c65; touch-action: none;
}
.drive {
  position: relative; flex: 1; display: flex; justify-content: center; align-items: center; gap: 6px;
  min-width: 0; height: clamp(70px, 11vh, 104px); padding: 5px;
  border: 2px solid #d5f6ffc9; border-bottom: 5px solid #1761a4; border-radius: 16px;
  background: linear-gradient(#3674aeec, #224776fa); box-shadow: 0 3px 7px #10214464;
  color: #f7fdff; touch-action: none; user-select: none;
}
.drive span { font-family: system-ui, sans-serif; font-size: clamp(27px, 4vw, 52px); font-weight: 900; line-height: 1; margin-top: -6px; }
.drive small { font-size: clamp(16px, 1.8vw, 23px); font-weight: 900; }
.drive kbd { position: absolute; right: 8px; bottom: 5px; opacity: .79; font: 800 clamp(11px, 1vw, 15px) system-ui, sans-serif; }
.drive.leap { flex: 1.22; color: #41304e; background: linear-gradient(#fff299, #ffc637); border-color: #fff3b7; border-bottom-color: #cc7d14; }
.drive.leap span { font-size: clamp(23px, 3.6vw, 41px); margin: 0; }
.drive:is(:active, .is-held, [data-held="true"]) { transform: translateY(3px); filter: brightness(1.16); border-bottom-width: 2px; }
#race[data-impact="true"]::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 20px #ff406585; }
.ready-count, .race-callout {
  pointer-events: none;
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-weight: 950; white-space: nowrap; text-align: center;
  text-shadow: 0 4px #4c3975, 0 9px 28px #10284b;
  color: #ffdf62;
}
.ready-count { z-index: 3; font-size: clamp(74px, 13vw, 174px); }
.race-callout { z-index: 2; opacity: 0; font-size: clamp(23px, 4.5vw, 65px); }
.race-callout.flash { animation: callout 1.2s both; }
.race-callout[data-tone="wrong"] { color: #ffe1bd; }
@keyframes callout {
  0% { opacity: 0; transform: translate(-50%, -36%) scale(.84); }
  17%, 62% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(.98); }
}
.particle { position: absolute; left: 50%; top: 41%; width: 10px; height: 16px; background: var(--color); border-radius: 2px; animation: confetti 1.5s ease-out both; }
@keyframes confetti { 0% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--turn)); } }

@media (hover: hover) {
  .drive:hover { filter: brightness(1.1); }
  .icon-button:hover, .secondary-button:hover { background: #2e5586; }
}
@media (max-width: 920px) and (orientation: portrait) {
  .track-prompt { top: calc(var(--pad) + 126px); left: var(--pad); right: var(--pad); }
}
@media (max-width: 620px) {
  :root {
    --utility-width: 148px;
    --route-width: min(clamp(173px, 43vw, 235px), calc(100vw - var(--utility-width) - 2 * var(--pad) - 9px));
  }
  .hud { gap: 8px; }
  .icon-button { width: 44px; height: 44px; border-radius: 12px; }
  .icon-button.lobby-only { width: 44px; height: 44px; }
  .icon-button svg { width: 22px; height: 22px; }
  .route { padding: 8px 9px; }
  .route-title { gap: 2px 7px; flex-wrap: wrap; }
  .route-title strong { font-size: 18px; }
  .route-title span { font-size: 11px; }
  .route-unit { font-size: 12px; }
  .run-stats { margin-top: 7px; gap: 4px; flex-wrap: wrap; }
  .health-star { width: clamp(13px, 4vw, 23px); }
  .distance strong { font-size: 22px; }
  .distance span { font-size: 12px; margin-left: 3px; }
  .track-prompt { top: calc(var(--pad) + 111px); min-height: clamp(76px, 11.2vh, 106px); padding-block: 17px; }
  .lobby-brand { left: 14px; top: 64px; }
  .lobby-brand h1 { font-size: clamp(39px, 9vw, 52px); }
  .lobby-subtitle { margin: 7px 0 9px; }
  .player-field { max-width: 212px; }
  .player-field select { min-height: 40px; font-size: 14px; }
  .player-egg { flex-basis: 31px; height: 31px; }
  .player-egg::after { left: 11px; top: 13px; }
  .lobby-play { left: 14px; right: 14px; width: auto; bottom: 13px; }
  .unit-picker { margin-bottom: 7px; }
  .unit-picker select { min-height: 40px; }
  .primary-button.play-button { min-height: 54px; }
  .start-help { margin-top: 6px; }
  .lobby-podium { left: 50%; bottom: 147px; width: min(280px, calc(100% - 28px)); transform: translateX(-50%); }
  .lobby-podium h2 { padding: 3px 13px 4px; margin-bottom: 2px; font-size: 15px; }
  .podium-crown, .podium-slot.gold .podium-crown { height: 34px; }
  .podium-block { min-height: 63px; padding-top: 8px; }
  .podium-slot.gold .podium-block { min-height: 77px; }
  .podium-slot.bronze .podium-block { min-height: 58px; }
  .podium-place { font-size: 18px; }
}
@media (max-width: 365px) and (orientation: portrait) {
  .run-stats { display: grid; grid-template-columns: 1fr; }
  .distance { justify-self: end; }
  .track-prompt { top: calc(var(--pad) + 134px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --route-width: clamp(168px, 22vw, 235px); --utility-width: 148px; }
  .lobby-brand { top: 14px; left: 18px; }
  .lobby-brand h1 { font-size: clamp(34px, 9.7vh, 48px); }
  .lobby-subtitle { margin: 5px 0 7px; padding-block: 3px; font-size: 12px; }
  .player-field select { min-height: 35px; }
  .lobby-podium { left: 18px; bottom: 12px; width: clamp(194px, 30vw, 270px); transform: none; }
  .lobby-podium h2 { padding: 3px 10px; margin-bottom: 2px; font-size: 14px; }
  .podium-crown, .podium-slot.gold .podium-crown { height: 32px; }
  .podium-block { min-height: 54px; padding-top: 7px; }
  .podium-slot.gold .podium-block { min-height: 70px; }
  .podium-slot.bronze .podium-block { min-height: 48px; }
  .podium-place { font-size: 17px; }
  .lobby-play { left: auto; right: 17px; bottom: 13px; width: clamp(180px, 27vw, 265px); }
  .unit-picker select { min-height: 36px; }
  .primary-button.play-button { min-height: 48px; }
  .start-help { margin-top: 6px; }
  .route { padding-block: 8px; }
  .route-title { gap: 4px 8px; flex-wrap: wrap; }
  .route-title strong { font-size: clamp(18px, 3.9vh, 26px); }
  .route-unit { margin-top: 2px; }
  .route-progress { margin-top: 6px; }
  .run-stats { margin-top: 7px; }
  .track-prompt {
    top: var(--pad); left: calc(var(--pad) + var(--route-width) + 5px);
    right: calc(var(--pad) + var(--utility-width) + 5px);
    min-height: 66px; padding: 12px clamp(26px, 4.9vw, 49px);
  }
  .icon-button { width: 44px; height: 44px; }
  .prompt { font-size: clamp(18px, 4.9vh, 25px); }
  .track-prompt[data-long="true"] .prompt { font-size: clamp(16px, 4.3vh, 22px); }
  .finish-panel { padding: 10px 15px; }
  .finish-panel .panel-actions { margin-top: 4px; }
  .finish-panel .panel-actions button { min-height: 42px; padding-block: 6px; }
  .finish-panel h2 { margin-bottom: 1px; }
  .finish-panel .results div { padding-block: 4px; }
  .finish-panel:has(.finish-mistake) {
    display: grid; height: 100%; align-items: start;
    grid-template-columns: minmax(205px, .8fr) minmax(0, 1.35fr);
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
    column-gap: 14px;
  }
  .finish-panel:has(.finish-mistake) > :not(.finish-mistakes) { grid-column: 1; }
  .finish-panel:has(.finish-mistake) .finish-mistakes { grid-area: 1 / 2 / 8 / 3; align-self: stretch; }
  .finish-panel:has(.finish-mistake) .panel-actions { grid-row: 7; flex-wrap: nowrap; gap: 7px; }
  .finish-panel:has(.finish-mistake) .panel-actions button {
    flex: 1; min-width: 0; padding-inline: 6px; font-size: clamp(14px, 2.12vw, 19px);
  }
  .finish-panel:has(.finish-mistake) .results strong { font-size: clamp(16px, 2.26vw, 23px); }
  .track-hint { bottom: 84px; }
  .controls { bottom: 8px; }
  .drive { height: 55px; }
}
@media (prefers-reduced-motion: reduce) {
  .race-callout.flash { animation: none; opacity: 1; }
  .particle { display: none; }
}