:root { color-scheme: dark; --focus-color: #8fffea; --neon: #8ff6df; --neon-ink: #082d2c; --muted: #bebad1; }
body { margin: 0; color: #f6f4ff; background: #090d1e; background-image: radial-gradient(ellipse at 85% 10%, #46234255, transparent 55%), radial-gradient(ellipse at 5% 60%, #11354740, transparent 50%); }
body[data-difficulty="easy"] { --neon: #a7f8c5; --neon-ink: #103426; }
body[data-difficulty="hard"] { --neon: #ffb3db; --neon-ink: #3e1936; }
.sprint-shell { max-width: 1180px; margin: 10px auto 50px; padding: 0 24px; }
.sprint-heading { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 26px; }
.eyebrow { font-size: 11px; letter-spacing: 2px; font-weight: 750; color: #b6b0d1; margin: 0 0 10px; }
h1 { font-size: clamp(30px,4.5vw,50px); letter-spacing: -1.6px; margin: 0; font-weight: 850; line-height: 1.08; }
.heading-copy { margin: 12px 0 0; color: #c0b8d4; font-size: 14px; line-height: 1.6; }
.heading-mark { display: grid; place-items: center; width: 68px; height: 68px; color: var(--neon); font-size: 52px; font-weight: 250; border: 1px solid #565069; border-radius: 19px; background: linear-gradient(145deg,#34314b,#161d33); transform: rotate(-6deg); }
button { border: 1px solid #58516e; border-radius: 11px; background: #23243f; color: #f9f5ff; font-weight: 650; padding: 12px 16px; min-height: 44px; transition: color .16s, background-color .16s, border-color .16s; }
button:hover:not(:disabled) { background: #3b3657; color: #fff; border-color: #aca3c7; }
button:focus-visible, canvas:focus-visible, select:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.difficulty-panel { padding: 21px 24px 17px; margin-bottom: 24px; border: 1px solid #454055; border-radius: 18px; background: linear-gradient(120deg,#1b1d34,#171b31); }
.difficulty-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.difficulty-heading h2 { margin: 0; font-size: 16px; }
.difficulty-heading > span { color: #b5adc9; font-size: 12px; }
.difficulty-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.difficulty-options button { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 79px; padding: 14px; background: #11172b; text-align: left; border-color: #484258; }
.difficulty-options button > span:nth-child(2) { min-width: 0; }
.difficulty-options strong { display: block; font-size: 15px; margin-bottom: 6px; }
.difficulty-options small { display: block; color: #bdb4ce; font-size: 11px; line-height: 1.5; }
.difficulty-number { align-self: flex-start; font: 600 12px/1.4 ui-monospace,monospace; color: #ad9dbf; }
.difficulty-dot { margin-left: auto; font-size: 15px; }
.difficulty-options button[aria-pressed="true"] { border-color: var(--neon); color: var(--neon); background: #20333a; box-shadow: inset 0 0 0 1px #ffffff0a; }
.difficulty-options button[aria-pressed="true"] :is(small,.difficulty-number) { color: #d0e2df; }
.difficulty-options button[aria-pressed="true"]:disabled { opacity: 1; }
.difficulty-options button[aria-pressed="true"]:hover:not(:disabled) { background: #30464c; color: #e6fff9; }
#difficulty-description { min-height: 21px; margin: 13px 0 0; color: #cac3d9; font-size: 12px; line-height: 1.65; }
.sprint-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; align-items: start; }
.race-panel { min-width: 0; border: 1px solid #58506a; border-radius: 20px; overflow: hidden; background: #12172d; box-shadow: 0 30px 90px #0004; scroll-margin-top: 12px; }
.race-hud { padding: 18px 22px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #ffffff18; background: #151a30; }
.race-hud > div { display: grid; gap: 6px; }
.race-hud span { font-size: 11px; color: #c1bad5; }
.race-hud strong { font-size: 22px; font-variant-numeric: tabular-nums; }
#shield { color: var(--neon); font-size: 16px; letter-spacing: 2px; white-space: nowrap; }
#pause { margin-left: auto; font-size: 12px; padding: 9px 12px; }
.race-stage { position: relative; background: #090d20; isolation: isolate; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 720 / 660; touch-action: none; }
@media (min-width: 581px) { canvas { height: min(660px, calc(100svh - 255px)); min-height: 320px; aspect-ratio: auto; } }
.race-track-label { position: absolute; z-index: 1; top: 16px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; color: #e6def2; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; }
.race-track-label span:first-child { color: var(--neon); border: 1px solid #6c7c7955; border-radius: 6px; padding: 5px 8px; background: #0c1523ba; }
#speed-readout { font-family: ui-monospace,monospace; color: #e2d6ec; }
.race-overlay { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; background: #080b2178; padding: 22px; overflow-y: auto; }
.overlay-card { text-align: center; width: min(100%,390px); padding: 28px; border: 1px solid #9678b58f; background: linear-gradient(150deg,#252239f5,#111b30f5); border-radius: 22px; box-shadow: 0 24px 70px #0006; }
.overlay-icon { display: block; color: var(--neon); font-size: 48px; line-height: 1; margin: 0 0 16px; text-shadow: 0 0 25px #89ffd344; }
.overlay-card h2 { font-size: clamp(22px,2.6vw,30px); letter-spacing: -.6px; margin: 10px 0; line-height: 1.15; }
.overlay-card p:not(.eyebrow) { font-size: 14px; line-height: 1.65; color: #d1c8e0; margin: 12px 0 21px; }
.overlay-card .eyebrow { font-size: 10px; line-height: 1.6; }
.primary { background: var(--neon); color: var(--neon-ink); border: 1px solid var(--neon); width: 100%; min-height: 48px; box-shadow: 0 0 25px #76ffce18; }
.primary:hover:not(:disabled) { background: #d0fff0; color: #082b29; border-color: #d0fff0; }
.overlay-secondary { margin-top: 10px; background: #22283e; color: #ded5ed; width: 100%; font-size: 12px; padding: 10px; }
.run-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 16px 0 20px; }
.run-summary > div { min-width: 0; padding: 11px; display: grid; gap: 4px; background: #0b142799; border: 1px solid #756c8944; border-radius: 10px; }
.run-summary strong { font-size: 22px; color: var(--neon); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.run-summary span { font-size: 10px; line-height: 1.4; color: #c6bdd5; }
body[data-mode="over"] .overlay-icon { display: none; }
body[data-mode="over"] .overlay-card p:not(.eyebrow) { margin-bottom: 12px; }
.race-countdown { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0d10245e; pointer-events: none; }
.race-countdown > span { color: #e8dcf5; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; }
.race-countdown strong { font-size: 116px; font-weight: 800; line-height: 1.2; color: #a5ffe9; text-shadow: 0 0 40px #36e6c74d; font-variant-numeric: tabular-nums; }
.race-event { position: absolute; z-index: 2; top: 18%; left: 50%; transform: translateX(-50%); padding: 9px 16px; border: 1px solid #74ead089; border-radius: 20px; color: #b2ffeb; background: #0b2538df; font-size: 16px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.race-event[data-kind="hit"] { color: #ffd5e8; background: #4d1e38ea; border-color: #ff8abb; }
.race-event[data-kind="miss"] { color: #e9defa; background: #29233eeb; border-color: #978bbd; font-size: 13px; }
.race-controls { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; gap: 12px; border-top: 1px solid #4a415a; background: #151a30; }
.race-controls button { min-width: 78px; font-size: 25px; padding: 5px 18px; min-height: 48px; color: #b2ffec; background: #1d3541; border-color: #54867f; }
.race-controls button:hover:not(:disabled) { color: #0a2f2b; background: #a5ffe6; border-color: #a5ffe6; }
.race-controls p { font-size: 12px; line-height: 1.6; text-align: center; color: #cac1dc; margin: 0; }
.run-telemetry { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 15px 20px; gap: 15px; border-top: 1px solid #ffffff12; background: #10172a; }
.run-telemetry > div { min-width: 0; display: grid; gap: 7px; }
.run-telemetry > div > span { color: #aaa5c1; font-size: 11px; }
.run-telemetry strong { color: #eeebff; font-size: 19px; font-variant-numeric: tabular-nums; }
.run-telemetry small { color: #b2adc5; font-size: 11px; font-weight: 450; }
#multiplier { color: #c7b6f4; }
#multiplier.is-boosted { color: #abffe2; text-shadow: 0 0 20px #83ffbb5c; }
.record-card { padding: 24px; background: linear-gradient(140deg,#2c2647,#171f34); border: 1px solid #69546e; border-radius: 18px; }
.record-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.record-heading .eyebrow { margin: 0; font-size: 10px; letter-spacing: 1.5px; }
.mode-tag { padding: 4px 7px; border: 1px solid #b0a1cd44; border-radius: 5px; color: #e3d6f0; font-size: 10px; }
.record-card > strong { display: block; font-size: 52px; line-height: 1; margin: 24px 0 8px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--neon); overflow-wrap: anywhere; }
.record-card > span { font-size: 12px; color: #d2c9e5; }
.record-card p { color: #b3a9c7; font-size: 12px; line-height: 1.6; margin: 16px 0 0; }
.record-card #record-distance { color: #dbd1e9; padding-top: 16px; border-top: 1px solid #a28cb733; }
.record-card #storage-status.is-warning { color: #ffe2ad; }
.pace-card { padding: 20px; margin-top: 16px; border: 1px solid #45425e; border-radius: 15px; background: #171e33; }
.pace-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pace-card h2 { margin: 0; font-size: 13px; }
.pace-card > div > span { font-size: 11px; color: #c1aadf; }
.pace-card p { font-size: 12px; line-height: 1.6; color: #b4adc8; margin: 11px 0 0; }
.pace-card progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 10px; overflow: hidden; margin-top: 16px; background: #353349; }
.pace-card progress::-webkit-progress-bar { background: #353349; }
.pace-card progress::-webkit-progress-value { background: linear-gradient(90deg,#90f2df,#ec9cdd); border-radius: 10px; }
.pace-card progress::-moz-progress-bar { background: #a0f0db; }
.instructions { padding: 26px 3px 12px; }
.instructions h2 { font-size: 19px; margin: 0 0 20px; }
.rule { display: flex; gap: 13px; align-items: flex-start; margin: 15px 0; }
.rule p { font-size: 13px; color: #c4bdd5; line-height: 1.7; margin: 0; }
.rule-symbol { min-width: 22px; font-size: 24px; color: #c0a8ef; }
.cyan { color: #a4ffe8; }.pink { color: #ff9dcb; }
.keyboard-hint { border-top: 1px solid #ffffff20; padding-top: 18px; font-size: 12px; color: #aca5bf; line-height: 1.7; }
.city-label { display: flex; align-items: center; gap: 14px; color: #b2a4c7; font-size: 10px; letter-spacing: 1.4px; line-height: 1.8; }
.city-label > span:first-child { font-size: 26px; }
.sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.steering-copy { min-width: 0; text-align: center; }
#lane-status { display: block; margin-top: 4px; color: #a9ffe9; font-size: 11px; }
.goals-card { margin-bottom: 16px; padding: 22px; background: linear-gradient(135deg,#1a3440,#1b2039); border: 1px solid #527e82; border-radius: 18px; }
.goals-heading, .run-goal > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.goals-heading h2 { margin: 0; font-size: 16px; }
.goals-heading > strong { white-space: nowrap; color: #b3ffe5; font-size: 13px; }
.goals-card > p { font-size: 12px; color: #c0cdd7; line-height: 1.6; margin: 12px 0 20px; }
.run-goal + .run-goal { margin-top: 17px; }
.run-goal > div { font-size: 11px; line-height: 1.6; }
.run-goal strong { color: #d3c5f8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.run-goal.is-complete strong { color: #a9ffe1; }
.run-goal progress, .shield-charge progress { display: block; width: 100%; height: 5px; margin-top: 8px; border: 0; border-radius: 6px; overflow: hidden; background: #394154; }
.run-goal progress::-webkit-progress-bar, .shield-charge progress::-webkit-progress-bar { background: #394154; }
.run-goal progress::-webkit-progress-value, .shield-charge progress::-webkit-progress-value { background: #a5edda; border-radius: 6px; }
.run-goal progress::-moz-progress-bar, .shield-charge progress::-moz-progress-bar { background: #a5edda; }
.route-status { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 20px; border-top: 1px solid #465369; background: #162238; }
.route-status > div { min-width: 0; }
.route-status strong { display: block; color: #c8e4f2; font-size: 12px; line-height: 1.5; }
.route-status span { display: block; color: #b2c5d6; font-size: 11px; line-height: 1.6; }
#district-next { margin-top: 4px; }
.race-event[data-kind="repair"] { color: #ceffc1; border-color: #9fed96; background: #1b3b37ed; }
.race-event[data-kind="district"] { color: #eee0ff; border-color: #bda3e8; background: #302448ed; font-size: 13px; }
@media (max-width: 940px) {
    .sprint-layout { grid-template-columns: minmax(0,1fr); }
    .race-aside { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 18px; align-items: start; }
    .pace-card { grid-column: 1; margin: 0; }
    .instructions { grid-column: 2; grid-row: 2 / span 2; padding-top: 4px; }
    .goals-card { margin: 0; }
    .city-label { display: none; }
    .race-panel { max-width: 760px; width: 100%; margin: auto; }
    .difficulty-options button { gap: 8px; }
    .difficulty-dot { display: none; }
}
@media (max-width: 580px) {
    .sprint-shell { padding: 0 12px; margin-top: 0; }
    .sprint-heading { padding: 14px 4px 22px; gap: 14px; }
    .heading-mark { flex: 0 0 46px; width: 46px; height: 46px; font-size: 34px; border-radius: 12px; }
    .heading-copy { font-size: 12px; margin-top: 10px; }
    .sprint-heading .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
    .difficulty-panel { padding: 16px 12px 13px; margin-bottom: 16px; }
    .difficulty-heading { gap: 7px; margin-bottom: 13px; }
    .difficulty-heading h2 { font-size: 15px; }
    .difficulty-heading > span { font-size: 11px; }
    .difficulty-options { gap: 6px; }
    .difficulty-options button { display: grid; gap: 7px; padding: 10px 9px; min-height: 66px; }
    .difficulty-options small { display: none; }
    .difficulty-options strong { font-size: 13px; margin: 0; }
    .difficulty-number { font-size: 10px; }
    #difficulty-description { font-size: 11px; }
    .race-panel { border-radius: 15px; }
    .race-hud { padding: 12px; gap: 13px; flex-wrap: wrap; }
    .race-hud strong { font-size: 18px; }
    .race-hud span { font-size: 10px; }
    #shield { font-size: 13px; letter-spacing: 0; }
    #pause { padding: 9px; font-size: 11px; }
    canvas { aspect-ratio: 1 / 1.2; }
    .race-track-label { top: 12px; left: 12px; right: 12px; font-size: 10px; }
    .race-overlay { padding: 13px; }
    .overlay-card { padding: 20px; border-radius: 16px; }
    .overlay-icon { font-size: 32px; margin-bottom: 12px; }
    .overlay-card h2 { font-size: 24px; }
    .overlay-card p:not(.eyebrow) { font-size: 12px; line-height: 1.6; margin: 10px 0 16px; }
    .overlay-card .eyebrow { font-size: 9px; letter-spacing: 1.2px; }
    .race-controls { padding: 12px; gap: 10px; }
    .race-controls button { min-width: 64px; }
    .race-controls p { font-size: 11px; }
    .run-telemetry { padding: 15px 12px; gap: 9px; }
    .run-telemetry > div > span { font-size: 10px; }
    .run-telemetry small { display: none; }
    .race-aside { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .instructions { grid-row: auto; grid-column: auto; padding: 12px 8px; }
    .pace-card { grid-column: auto; }
    .route-status { grid-template-columns: 1fr; gap: 12px; padding: 14px 12px; }
    .record-card { padding: 20px; }
    .record-card > strong { margin-top: 16px; font-size: 42px; }
    body[data-mode="over"] .overlay-card { padding: 16px; }
    body[data-mode="over"] .overlay-card .eyebrow { display: none; }
    body[data-mode="over"] .overlay-card h2 { font-size: 21px; }
    body[data-mode="over"] .overlay-card p:not(.eyebrow) { margin: 8px 0; font-size: 11px; }
    .run-summary { gap: 6px; margin: 12px 0; }
    .run-summary > div { padding: 8px; }
    .run-summary strong { font-size: 20px; }
}
@media (max-width: 360px) {
    .race-hud { gap: 9px; }
    .race-hud strong { font-size: 16px; }
    #pause { min-width: 0; padding-inline: 7px; font-size: 10px; }
    .shield-hud { margin-right: auto; }
    .overlay-card { padding: 16px; }
    .overlay-card h2 { font-size: 21px; }
    .overlay-icon { margin-bottom: 8px; }
}
@media (max-height: 540px) and (min-width: 581px) {
    .race-panel { max-width: 650px; }
    canvas { height: 340px; aspect-ratio: auto; }
    .race-hud { padding: 10px 15px; }
    .overlay-icon { display: none; }
    .overlay-card { padding: 16px 24px; }
    .overlay-card h2 { font-size: 22px; }
    .overlay-card p:not(.eyebrow) { font-size: 12px; margin: 8px 0 12px; }
    .run-summary { margin: 10px 0; grid-template-columns: repeat(4,minmax(0,1fr)); }
    .run-summary strong { font-size: 18px; }
    .run-summary > div { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } .heading-mark { transform: none; } }