:root {
  color-scheme: light;
  --ink: #17344f;
  --ink-soft: #526b61;
  --cream: #f4ebdd;
  --paper: #fcf8f0;
  --coral: #4f7a45;
  --coral-dark: #345b37;
  --cyan: #3c7fa6;
  --violet: #8a6240;
  --line: rgba(37, 65, 54, 0.18);
  --shadow: 0 24px 70px rgba(47, 70, 55, 0.16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 1040px; background: var(--cream); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 4% 6%, rgba(60,127,166,.18), transparent 28rem), radial-gradient(circle at 96% 18%, rgba(79,122,69,.17), transparent 30rem), var(--cream); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.app-shell { width: min(1500px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; text-align: left; padding: 0; }
.wordmark-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--ink); color: #fff; font-weight: 900; letter-spacing: -.08em; box-shadow: 5px 5px 0 var(--coral); }
.wordmark strong, .wordmark small { display: block; }
.wordmark strong { font-size: 1.05rem; letter-spacing: -.02em; }
.wordmark small { margin-top: 2px; color: var(--ink-soft); font-size: .72rem; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.theme-picker { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.theme-picker select { min-height: 38px; max-width: 158px; padding: 0 30px 0 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.72); color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: normal; text-transform: none; cursor: pointer; }
.text-button, .icon-button, .inline-button { border: 0; background: transparent; font-weight: 750; }
.text-button { padding: 12px; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.54); }
.icon-button[aria-pressed="true"] { background: var(--ink); color: white; }
.inline-button { padding: 0; color: var(--coral-dark); text-decoration: underline; text-underline-offset: 3px; }
main { flex: 1; display: grid; }
.screen { display: none; width: 100%; animation: enter .35s ease both; }
.screen.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }
.hero-screen.active { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 740px; align-items: center; gap: 56px; }
.eyebrow { margin: 0 0 14px; color: var(--coral-dark); font-size: .76rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 24px; font-size: clamp(4rem, 6vw, 7.8rem); line-height: .87; letter-spacing: -.075em; }
h2 { margin-bottom: 10px; font-size: clamp(2.8rem, 4vw, 5rem); line-height: .95; letter-spacing: -.055em; }
h3 { letter-spacing: -.025em; }
.hero-deck { max-width: 580px; margin-bottom: 38px; color: var(--ink-soft); font-size: 1.18rem; line-height: 1.65; }
.name-form { max-width: 650px; }
.name-form > label, .editor-panel > label, .difficulty-control { display: grid; gap: 8px; color: var(--ink-soft); font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.input-action { display: flex; padding: 7px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.76); box-shadow: var(--shadow); }
.input-action input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 16px; font-size: 1.05rem; outline: 0; }
.primary, .secondary, .danger, .file-label { min-height: 48px; border-radius: 13px; padding: 0 20px; border: 1px solid transparent; font-weight: 850; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.primary { background: var(--coral); color: #fff; box-shadow: 0 9px 24px rgba(52,91,55,.24); }
.primary:hover { background: var(--coral-dark); transform: translateY(-2px); }
.primary span { margin-left: 18px; }
.primary.large { min-width: 210px; min-height: 62px; font-size: 1.05rem; }
.secondary, .file-label { background: rgba(255,255,255,.64); border-color: var(--line); }
.secondary:hover, .file-label:hover { background: white; transform: translateY(-1px); }
.danger { border-color: rgba(212,46,64,.25); background: #fff1f1; color: #b42537; }
.compact { min-height: 40px; padding: 0 14px; font-size: .86rem; }
.hero-art { position: relative; min-height: 620px; overflow: hidden; border-radius: 42px 42px 160px 42px; background: linear-gradient(145deg, #a9d3df, #d9d5a8 56%, #88a776); box-shadow: var(--shadow); }
.hero-art::before { content: ""; position: absolute; inset: auto -12% 0; height: 37%; background: repeating-linear-gradient(0deg, #6f4e36 0 2px, #9a7553 2px 56px); transform: skewY(-3deg); }
.hero-art::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 26%; height: 8px; background: rgba(255,255,255,.92); transform: skewY(-3deg); box-shadow: 0 62px 0 rgba(255,255,255,.92), 0 124px 0 rgba(255,255,255,.92); }
.hero-art img { position: absolute; z-index: 2; right: 4%; bottom: 7%; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(16,26,53,.2)); }
.sun { position: absolute; top: 9%; right: 10%; width: 142px; height: 142px; border-radius: 50%; background: #f7e7ad; box-shadow: 0 0 70px #f7e7ad; }
.speed-line { position: absolute; height: 8px; border-radius: 99px; background: rgba(255,255,255,.68); transform: rotate(-3deg); }
.line-one { top: 27%; left: 7%; width: 34%; }.line-two { top: 39%; left: 18%; width: 20%; }.line-three { top: 51%; left: 5%; width: 26%; }
.hero-stat { position: absolute; z-index: 4; left: 28px; bottom: 30px; padding: 15px 18px; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(16,26,53,.18); }
.hero-stat strong, .hero-stat span { display: block; }.hero-stat span { color: var(--ink-soft); font-size: .76rem; }
.test-screen, .dashboard-screen, .race-screen, .results-screen, .library-screen { padding: 54px 0 64px; }
.section-heading, .dashboard-head, .race-topline { display: flex; justify-content: space-between; gap: 28px; align-items: flex-start; margin-bottom: 34px; }
.section-heading > div > p:not(.eyebrow), .dashboard-head > div > p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.05rem; }
.timer-orb { display: grid; place-items: center; align-content: center; width: 126px; height: 126px; flex: 0 0 auto; border: 7px solid var(--coral); border-radius: 50%; background: white; box-shadow: var(--shadow); }
.timer-orb strong { font-size: 2.3rem; line-height: 1; }.timer-orb span { color: var(--ink-soft); font-size: .72rem; }
.typing-card { position: relative; min-height: 330px; margin-bottom: 24px; padding: 34px 40px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.8); box-shadow: var(--shadow); overflow: hidden; }
.typing-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cyan); }
.typing-meta { display: flex; justify-content: space-between; margin-bottom: 34px; color: var(--ink-soft); font-size: .82rem; font-weight: 750; }
.typing-meta strong { color: var(--ink); font-size: 1.25rem; }
.typing-copy { margin: 0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: clamp(1.55rem, 2.25vw, 2.45rem); line-height: 1.72; letter-spacing: .01em; white-space: normal; }
.typing-word { display: inline-block; white-space: pre; }.typing-char { display: inline; }.typing-copy .typed { color: var(--ink); }.typing-copy .remaining { color: #82958d; }.typing-copy .current { box-shadow: inset 3px 0 var(--coral); animation: blink .8s step-end infinite; }.typing-copy .error { color: #fff; background: #9b3f35; text-decoration: underline; box-shadow: none; animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.baseline-card { min-width: 230px; padding: 20px 24px; border-radius: 20px; color: white; background: var(--ink); box-shadow: var(--shadow); }
.baseline-card span, .baseline-card strong, .baseline-card small { display: block; }.baseline-card span { color: #bfd1c6; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }.baseline-card strong { margin: 5px 0; font-size: 1.45rem; }.baseline-card small { color: #d0ddd5; }.baseline-card .inline-button { margin-top: 10px; color: #8fc9e5; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.setup-panel { padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.6); }
.panel-title { display: flex; gap: 13px; margin-bottom: 20px; }.panel-title > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--ink); color: white; font-size: .74rem; font-weight: 900; }.panel-title h3 { margin: 0 0 3px; }.panel-title p { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.mode-cards { display: grid; gap: 10px; }
.mode-card { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; min-height: 80px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.74); text-align: left; }
.mode-card .mode-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e5ece8; font-size: 1.35rem; font-weight: 900; }.mode-card strong { align-self: end; }.mode-card small { color: var(--ink-soft); }.mode-card.selected { border-color: var(--coral); background: #eef4e9; box-shadow: inset 0 0 0 1px var(--coral); }.mode-card.selected .mode-icon { background: var(--coral); color: #fff; }
.difficulty-control { margin-top: 16px; }.difficulty-control select, .editor-panel input, .editor-panel textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 12px 14px; text-transform: none; letter-spacing: normal; }
.character-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.character-card { position: relative; overflow: hidden; min-height: 205px; padding: 0; border: 1px solid var(--line); border-radius: 15px; background: #e6eeed; }
.character-card img { width: 100%; height: 165px; padding: 4px; object-fit: contain; transform: none; }.character-card span { display: block; padding: 10px 4px; border-top: 1px solid var(--line); background: white; font-size: .78rem; font-weight: 850; }.character-card.selected { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral); }
.launch-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 18px 20px 18px 26px; border-radius: 20px; background: var(--ink); color: white; box-shadow: var(--shadow); }.launch-bar span, .launch-bar strong { display: block; }.launch-bar > div > span { color: #b8c9c0; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }.launch-bar strong { margin: 3px 0; font-size: 1.1rem; }.launch-bar .inline-button { color: #8fc9e5; font-size: .78rem; }
.race-topline { align-items: center; margin-bottom: 18px; }.race-topline h2 { margin: 0; font-size: 2.35rem; }.race-topline .eyebrow { margin-bottom: 7px; }
.race-stats { display: flex; align-items: center; gap: 10px; }.race-stats > div { min-width: 88px; padding: 10px 14px; border-left: 1px solid var(--line); }.race-stats span, .race-stats strong { display: block; }.race-stats span { color: var(--ink-soft); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }.race-stats strong { margin-top: 2px; font-size: 1.18rem; }
.race-canvas-wrap { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow); background: #f4bd8d; }.race-canvas-wrap canvas { display: block; width: 100%; height: min(45vh, 520px); min-height: 410px; }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; color: white; background: rgba(16,26,53,.28); font-size: 9rem; font-weight: 950; text-shadow: 0 6px 28px rgba(16,26,53,.4); }.countdown.hidden { display: none; }
.pause-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; background: rgba(16,26,53,.87); color: white; }.pause-overlay strong { font-size: 2.8rem; }.pause-overlay p { color: #d7ddeb; }
.race-typing { min-height: 210px; margin-top: 16px; margin-bottom: 0; padding: 22px 30px; }.race-typing .typing-meta { margin-bottom: 14px; }.race-typing .typing-copy { font-size: clamp(1.15rem, 1.6vw, 1.65rem); line-height: 1.55; }
.results-screen { max-width: 1050px; margin: auto; text-align: center; }.results-screen h2 { max-width: 1150px; margin-left: auto; margin-right: auto; font-size: clamp(3.4rem, 5.5vw, 6rem); }.results-summary { color: var(--ink-soft); font-size: 1.12rem; }.result-place { display: inline-flex; align-items: center; gap: 16px; margin: 20px 0 28px; text-align: left; }.result-place > span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--coral); color: white; font-size: 2.5rem; font-weight: 950; box-shadow: 7px 7px 0 #b99a70; }.result-place small, .result-place strong { display: block; }.result-place small { color: var(--ink-soft); }.result-place strong { font-size: 1.4rem; }
.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.75); box-shadow: var(--shadow); }.result-grid > div { padding: 22px 12px; border-right: 1px solid var(--line); }.result-grid > div:last-child { border: 0; }.result-grid span, .result-grid strong { display: block; }.result-grid span { color: var(--ink-soft); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }.result-grid strong { margin-top: 7px; font-size: 1.35rem; }.results-actions { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.library-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }.passage-list-panel, .editor-panel { min-height: 570px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: var(--shadow); }.library-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }.file-label { display: inline-grid; place-items: center; }.file-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }.passage-list { display: grid; gap: 8px; max-height: 500px; overflow: auto; }.passage-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: white; text-align: left; }.passage-row.selected { border-color: var(--coral); background: #eef4e9; }.passage-row strong { align-self: end; }.passage-row small { color: var(--ink-soft); }.passage-row .row-actions { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 5px; }.mini-button { border: 0; border-radius: 8px; padding: 7px 9px; background: #e5ece8; font-size: .72rem; font-weight: 800; }
.passage-section + .passage-section { margin-top: 20px; }.passage-section-title { margin: 0 0 8px; padding: 0 4px; color: var(--ink-soft); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.passage-section-count { float: right; color: var(--cyan); }
.editor-panel { display: grid; align-content: start; gap: 18px; }.editor-panel textarea { resize: vertical; min-height: 250px; font-family: "SFMono-Regular", Consolas, monospace; line-height: 1.55; }.editor-details, .editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.check-label { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }.check-label input { accent-color: var(--coral); }.editor-details span { color: var(--ink-soft); font-size: .8rem; }.form-error { min-height: 1.2em; margin: 0; color: #b42537; font-weight: 700; }
dialog { width: min(720px, 80vw); padding: 34px; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 30px 100px rgba(16,26,53,.3); } dialog::backdrop { background: rgba(16,26,53,.6); }.dialog-close { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #edf0f8; font-size: 1.5rem; } dialog h3 { font-size: 2rem; } dialog #previewText { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.7; }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 20; transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 99px; background: var(--ink); color: white; font-weight: 750; opacity: 0; pointer-events: none; transition: .2s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
footer { min-height: 64px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .74rem; }
.hidden { display: none !important; }
body.high-contrast { --ink: #000; --ink-soft: #202020; --cream: #fff; --paper: #fff; --coral: #c90022; --coral-dark: #a8001c; --cyan: #007d92; --line: rgba(0,0,0,.4); }.high-contrast .typing-copy .remaining { color: #555; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
@media (max-height: 850px) { .hero-screen.active { min-height: 640px; }.hero-art { min-height: 540px; }.test-screen, .dashboard-screen, .race-screen, .results-screen, .library-screen { padding-top: 32px; } }

.calibration-modes { display: flex; gap: 10px; margin: -10px 0 10px; }
.calibration-mode { min-width: 235px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.65); text-align: left; }.calibration-mode strong, .calibration-mode span { display: block; }.calibration-mode span { margin-top: 3px; color: var(--ink-soft); font-size: .75rem; }.calibration-mode.selected { border-color: var(--coral); background: #eef4e9; box-shadow: inset 0 0 0 1px var(--coral); }
.manual-pace-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 14px; margin: 0 0 14px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.64); }
.manual-pace-form > div strong, .manual-pace-form > div span { display: block; }
.manual-pace-form > div span { margin-top: 2px; color: var(--ink-soft); font-size: .75rem; }
.manual-pace-form > label > span:first-child { display: block; margin-bottom: 3px; color: var(--ink-soft); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.manual-pace-input { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; }
.manual-pace-input input { width: 72px; min-height: 36px; border: 0; padding: 0 8px; background: transparent; font-weight: 850; }
.manual-pace-input b { padding-right: 10px; color: var(--ink-soft); font-size: .7rem; }
.replay-usage { width: fit-content; margin: 18px auto -14px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.7); color: var(--ink-soft); font-size: .76rem; font-weight: 800; }

.typing-viewport { height: 230px; overflow: hidden; }
.typing-copy { --typing-shift: 0px; transform: translateY(var(--typing-shift)); transition: transform 180ms ease; }
.race-typing .typing-viewport { height: 112px; }
.finish-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; color: white; background: radial-gradient(circle, rgba(79,122,69,.94), rgba(23,52,79,.5) 58%, transparent 75%); text-shadow: 0 8px 30px rgba(23,52,79,.55); pointer-events: none; animation: finish-pop .35s ease both; }
.finish-overlay strong { font-size: 10rem; line-height: .8; }.finish-overlay span { margin-top: 22px; font-size: 1.5rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
@keyframes finish-pop { from { opacity: 0; transform: scale(.8); } }
.series-progress { display: inline-block; margin: 0 0 22px; padding: 8px 14px; border-radius: 99px; background: #e5ece8; color: var(--coral-dark); font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.series-standings { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 18px; }.series-standings > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.72); text-align: left; }.series-standings > div.is-player { border-color: var(--coral); background: #eef4e9; }.series-standings span { grid-row: 1 / 3; align-self: center; color: var(--cyan); font-size: 1.35rem; font-weight: 950; }.series-standings strong, .series-standings small { display: block; }.series-standings small { color: var(--ink-soft); }
.podium-screen { max-width: 1180px; margin: auto; padding: clamp(12px, 2vh, 24px) 0 22px; text-align: center; }.podium-screen h2 { margin-bottom: 5px; font-size: clamp(2.7rem, 5vw, 5rem); }.podium-summary { margin-bottom: 0; color: var(--ink-soft); font-size: .96rem; }
.podium-stage { position: relative; height: clamp(350px, 46dvh, 430px); min-height: 0; margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background-color: #dce9e8; background-position: center; background-size: cover; box-shadow: var(--shadow); }
.podium-winner { --step: 70px; position: absolute; bottom: 0; z-index: 2; width: 31%; height: 100%; }.podium-winner::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: 0; z-index: 0; height: var(--step); border-radius: 18px 18px 0 0; background: linear-gradient(#9b7958, #6f4e36); box-shadow: inset 0 5px rgba(255,255,255,.24); }
.podium-first { --step: 128px; left: 34.5%; }.podium-second { --step: 88px; left: 2%; }.podium-third { --step: 62px; right: 2%; }
.podium-winner img { position: absolute; left: 50%; bottom: calc(var(--step) - 40px); z-index: 2; width: 230px; height: 280px; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 18px 14px rgba(23,52,79,.2)); }.podium-first img { width: 270px; height: 330px; }
.podium-winner > div { position: absolute; left: 12%; right: 12%; bottom: 14px; z-index: 3; color: white; }.podium-winner > div span, .podium-winner > div strong, .podium-winner > div small { display: block; }.podium-winner > div span { font-size: .72rem; font-weight: 900; text-transform: uppercase; }.podium-winner > div strong { font-size: 1.25rem; }.podium-winner > div small { opacity: .82; }
.podium-winner.is-player::after { background: linear-gradient(#5f8a53, #345b37); }.podium-stage.has-custom-art .podium-winner::after { display: none; }
.podium-actions { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.championship-config { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.66); box-shadow: var(--shadow); }.championship-config > div:first-child span, .championship-config > div:first-child strong, .championship-config > div:first-child small { display: block; }.championship-config > div:first-child span { color: var(--ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.championship-config > div:first-child strong { margin: 4px 0; font-size: 1.3rem; }.championship-config > div:first-child small { color: var(--ink-soft); }
.order-options { display: flex; gap: 8px; }.order-option { min-width: 205px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 13px; background: white; text-align: left; }.order-option strong, .order-option span { display: block; }.order-option span { margin-top: 2px; color: var(--ink-soft); font-size: .7rem; }.order-option.selected { border-color: var(--coral); background: #eef4e9; box-shadow: inset 0 0 0 1px var(--coral); }

.mistake-dialog { width: min(820px, 88vw); max-height: 82vh; overflow: auto; text-align: left; }
.mistake-dialog h3 { margin: 4px 0 8px; }
.mistake-dialog h4 { margin: 25px 0 10px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.mistake-summary, .mistake-empty { color: var(--ink-soft); }
.mistake-chart { display: grid; gap: 9px; }
.mistake-bar { display: grid; grid-template-columns: 76px 1fr 30px; align-items: center; gap: 10px; }
.mistake-bar > div { height: 13px; overflow: hidden; border-radius: 99px; background: #e5ece8; }
.mistake-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), #9b7958); }
.mistake-bar strong { text-align: right; }
.key-cap, kbd { display: inline-grid; place-items: center; min-width: 34px; min-height: 28px; padding: 3px 8px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 7px; background: white; color: var(--ink); font: 800 .78rem/1 system-ui, sans-serif; }
.mistake-confusions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mistake-confusions > div { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px; background: #eef4e9; }
.mistake-confusions span { color: var(--ink-soft); font-size: .76rem; }
.mistake-contexts { display: grid; gap: 8px; }
.mistake-contexts > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-left: 4px solid var(--coral); border-radius: 8px; background: rgba(255,255,255,.76); }
.mistake-contexts code { overflow-wrap: anywhere; }
.mistake-contexts > div > span { flex: 0 0 auto; color: var(--ink-soft); font-size: .74rem; }
.ready-profile { display: flex; align-items: end; gap: 8px; max-width: 560px; margin-top: 18px; }
.ready-profile label { display: grid; gap: 6px; flex: 1; color: var(--ink-soft); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ready-profile input { min-height: 40px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.78); padding: 0 12px; font-size: .95rem; text-transform: none; letter-spacing: normal; }
.baseline-card .inline-button + .inline-button { margin-left: 12px; }
.mistake-scope { display: flex; gap: 8px; margin: 18px 0 4px; }
.mistake-scope .selected { border-color: var(--coral); background: #eef4e9; box-shadow: inset 0 0 0 1px var(--coral); }
.pause-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.debug-finish-button { border-color: rgba(249,87,56,.5); background: rgba(249,87,56,.16); color: #fff; }
.pause-overlay .secondary { color: var(--ink); background: rgba(255,255,255,.92); }
.pause-overlay .debug-finish-button { border-color: rgba(249,87,56,.7); background: #f95738; color: #fff; }
.finish-overlay.is-perfect { background: radial-gradient(circle, rgba(79,122,69,.97), rgba(23,52,79,.82) 62%, rgba(23,52,79,.3)); }
.perfect-celebration { width: min(560px, 48vw); max-height: 155px; margin-top: 22px; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0,0,0,.28)); animation: perfect-pop .55s cubic-bezier(.2,1.55,.45,1) both; }
@keyframes perfect-pop { from { opacity: 0; transform: scale(.5) rotate(-3deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
/* Focused race controls */
.race-controls-grid { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); }
.ai-pace-control { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.78); }
.ai-pace-readout { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ai-pace-readout span, .ai-pace-readout strong { display: block; }
.ai-pace-readout span { color: var(--ink-soft); font-size: .69rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.ai-pace-readout strong { margin-top: 3px; font-size: 1.35rem; }
.ai-pace-readout output { min-width: 76px; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 1.2rem; font-weight: 900; text-align: center; }
.ai-pace-control input[type="range"] { width: 100%; height: 8px; margin: 26px 0 10px; border-radius: 99px; background: linear-gradient(90deg, #8a6240, #4f7a45 50%, #3c7fa6); appearance: none; cursor: pointer; }
.ai-pace-control input[type="range"]::-webkit-slider-thumb { width: 25px; height: 25px; border: 4px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 8px rgba(23,52,79,.32); appearance: none; }
.ai-pace-control input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 4px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 8px rgba(23,52,79,.32); }
.ai-pace-scale { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .68rem; font-weight: 750; }
.ai-pace-range { margin: 20px 0 4px; color: var(--ink); font-weight: 900; }
.ai-pace-control > small { color: var(--ink-soft); line-height: 1.45; }
.runner-control-panel { display: flex; flex-direction: column; }
.runner-summary { display: flex; align-items: center; gap: 18px; min-height: 142px; padding: 12px 18px; overflow: visible; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.78); }
.runner-summary img { width: 124px; height: 124px; flex: 0 0 auto; object-fit: contain; transform: none; }
.runner-summary span, .runner-summary strong, .runner-summary small { display: block; }
.runner-summary span { color: var(--ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.runner-summary strong { margin: 4px 0; font-size: 1.5rem; }
.runner-summary small, .runner-note, .runner-dialog-copy { color: var(--ink-soft); }
.runner-more-button { align-self: flex-start; margin-top: 12px; }
.runner-note { margin: 12px 0 0; font-size: .75rem; line-height: 1.45; }
.runner-dialog { width: min(1050px, 88vw); max-height: 82vh; overflow: auto; }
.runner-dialog h3 { margin: 3px 0 4px; }
.runner-dialog .character-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); margin-top: 24px; }
.launch-actions { display: flex; align-items: center; gap: 10px; }
.launch-bar .launch-actions .secondary { color: var(--ink); background: #f4ebdd; }
@media (max-width: 900px) { .race-controls-grid { grid-template-columns: 1fr; } .launch-bar { align-items: flex-start; gap: 18px; } .launch-actions { flex-wrap: wrap; justify-content: flex-end; } }
/* Ten-level championship and clearer race results */
.championship-map { margin-top: 22px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.68); box-shadow: var(--shadow); }
.championship-map-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.championship-map-head span { color: var(--ink-soft); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.championship-map-head h3 { margin: 3px 0 0; }
.championship-map-head small { color: var(--ink-soft); font-weight: 800; }
.level-buttons { display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 10px; scrollbar-width: thin; }
.level-button { min-width: 126px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); text-align: left; }
.level-button span, .level-button small { display: block; }
.level-button span { font-weight: 900; }
.level-button small { margin-top: 3px; color: var(--ink-soft); font-size: .67rem; }
.level-button.completed { background: #eef4e9; }
.level-button.selected { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral); }
.level-button:disabled { opacity: .42; cursor: not-allowed; }
.replay-rules { display: flex; align-items: center; gap: 20px; min-height: 45px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .76rem; }
.replay-rules > label:first-child { display: flex; align-items: center; gap: 8px; font-weight: 850; }
.replay-rules input[type="number"] { width: 64px; min-height: 36px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font: inherit; }
.replay-rules > span { margin-left: auto; color: var(--ink); font-weight: 850; }
.results-screen { max-width: 1180px; }
.results-screen #resultsTitle { margin: 3px auto 4px; color: var(--ink); font-size: clamp(5rem, 9vw, 9rem); line-height: .95; }
.results-summary { margin: 10px 0 0; color: var(--ink); font-size: 1.25rem; font-weight: 850; }
.results-quip { margin: 7px 0 18px; color: var(--ink-soft); font-size: .92rem; font-style: italic; }`r`n.perfect-result-badge { display: inline-flex; align-items: center; justify-content: center; margin: 10px auto 4px; padding: 10px 22px; border: 3px solid var(--gold); border-radius: 999px; background: var(--coral); color: #fff; font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 950; text-transform: uppercase; box-shadow: 6px 6px 0 rgba(13,59,102,.22); }
.next-race-callout { display: inline-flex; align-items: center; gap: 13px; margin: 8px auto 18px; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #fff; text-align: left; }
.next-race-callout span, .next-race-callout strong { display: block; }
.next-race-callout span { color: #b8c9c0; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.next-race-callout strong { font-size: 1.02rem; }
.next-race-callout.podium-next { background: var(--coral-dark); }
.series-race-nav { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.series-race-button { min-width: 105px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.7); color: var(--ink); }
.series-race-button span, .series-race-button small { display: block; }
.series-race-button span { font-weight: 900; }
.series-race-button small { color: var(--ink-soft); font-size: .68rem; }
.series-race-button.completed { background: #eef4e9; }
.series-race-button.selected { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.series-race-button:disabled { opacity: .48; }
.results-details { display: grid; grid-template-columns: minmax(0, 1fr) 245px; align-items: stretch; gap: 14px; }
.results-details .result-grid { grid-template-columns: repeat(3, 1fr); }
.results-details .result-grid > div:nth-child(3) { border-right: 0; }
.results-details .result-grid > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.standings-panel { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); text-align: left; box-shadow: var(--shadow); }
.standings-panel > span { color: var(--ink-soft); font-size: .66rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.standings-panel .series-standings { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 7px; }
.standings-panel .series-standings > div { display: grid; grid-template-columns: 20px 1fr auto; gap: 5px; align-items: center; padding: 4px 6px; border: 0; border-radius: 7px; background: transparent; }
.standings-panel .series-standings > div.is-player { background: #eef4e9; }
.standings-panel .series-standings span { grid-row: auto; font-size: .78rem; }
.standings-panel .series-standings strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.standings-panel .series-standings small { color: var(--ink); font-size: .7rem; font-weight: 900; }
@media (max-width: 900px) { .replay-rules { align-items: flex-start; flex-direction: column; gap: 10px; } .replay-rules > span { margin-left: 0; } .results-details { grid-template-columns: 1fr; } .series-race-nav { overflow-x: auto; justify-content: flex-start; } }
/* Native 1823x863 race composition: never stretch stages or runners */
.race-screen { padding-top: 14px; }
.race-topline { min-height: 54px; margin-bottom: 7px; padding: 4px 8px; }
.race-topline h2 { font-size: 1.55rem; line-height: 1.05; }
.race-topline .eyebrow { margin-bottom: 3px; font-size: .62rem; }
.race-stats { gap: 5px; }
.race-stats > div { min-width: 70px; padding: 5px 9px; }
.race-stats span { font-size: .58rem; }
.race-stats strong { font-size: 1rem; }
.race-canvas-wrap canvas { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 1823 / 863; object-fit: contain; }
.race-typing { min-height: 172px; margin-top: 9px; padding-top: 16px; padding-bottom: 16px; }
.race-typing .typing-viewport { height: 92px; }
/* Fluid HD-to-4K scaling and focused-key coaching */
:root {
  --focus-key-bg: #ffd45e;
  --focus-key-ink: #142f28;
  --focus-key-ring: #8a6240;
  font-size: clamp(16px, calc(9px + .36vw), 23px);
}
.app-shell { width: min(2560px, calc(100% - clamp(40px, 4vw, 144px))); }
.race-topline, .race-canvas-wrap, .race-typing { width: min(100%, 140vh); margin-left: auto; margin-right: auto; }
.race-canvas-wrap canvas { display: block; }
.typing-copy .typing-char.focus-key { color: inherit; background: transparent; border-radius: 0; box-shadow: none; font-weight: 950; }
.typing-copy .typing-char.focus-key.current { box-shadow: inset 3px 0 var(--coral); }
.typing-copy .typing-char.focus-key.error { color: #fff; background: #9b3f35; box-shadow: none; }
@media (min-width: 2200px) {
  .topbar { height: clamp(88px, 5vw, 120px); }
  .setup-grid { gap: clamp(22px, 1.4vw, 38px); }
  .setup-panel { padding: clamp(26px, 1.5vw, 42px); }
  .typing-card { border-radius: clamp(24px, 1.4vw, 36px); }
}
@media (max-height: 900px) {
  .race-screen { padding-top: 6px; padding-bottom: 20px; }
  .race-topline { min-height: 44px; }
  .race-typing { min-height: 145px; padding-top: 11px; padding-bottom: 11px; }
  .race-typing .typing-viewport { height: 72px; }
}
/* Viewport-fitted race workspace.
   The HUD overlays the native 1823:863 track, leaving vertical space for the
   typing panel even in Chrome's 850-930px-tall usable area on a 1080p display. */
body[data-screen="race"] {
  overflow: hidden;
}
body[data-screen="race"] .app-shell {
  width: min(3600px, calc(100% - clamp(28px, 3vw, 112px)));
  height: 100dvh;
  min-height: 0;
}
body[data-screen="race"] .topbar,
body[data-screen="race"] footer {
  display: none;
}
body[data-screen="race"] main {
  min-height: 0;
}
.race-screen.active {
  --race-typing-height: clamp(118px, 15dvh, 150px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--race-typing-height);
  gap: 8px;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 8px 0 10px;
}
.race-screen.active .race-topline,
.race-screen.active .race-canvas-wrap,
.race-screen.active .race-typing {
  width: min(100%, calc(179.55dvh - 55px));
  margin: 0 auto;
}
.race-screen.active .race-canvas-wrap {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  aspect-ratio: 1823 / 863;
  max-height: 100%;
}
.race-screen.active .race-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1823 / 863;
  object-fit: contain;
}
.race-screen.active .race-topline {
  grid-column: 1;
  grid-row: 1;
  z-index: 6;
  align-self: start;
  min-height: 0;
  margin-top: 0;
  padding: 7px 12px;
  border: 1px solid rgba(37,65,54,.2);
  border-radius: 20px 20px 13px 13px;
  background: rgba(252,248,240,.92);
  box-shadow: 0 8px 24px rgba(23,52,79,.12);
  backdrop-filter: blur(10px);
}
.race-screen.active .race-topline h2 {
  overflow: hidden;
  margin: 0;
  font-size: clamp(1.12rem, 2.35dvh, 1.5rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-screen.active .race-topline .eyebrow {
  margin-bottom: 2px;
  font-size: clamp(.48rem, .9dvh, .6rem);
  white-space: nowrap;
}
.race-screen.active .race-stats {
  gap: 3px;
}
.race-screen.active .race-stats > div {
  min-width: clamp(54px, 4.2vw, 72px);
  padding: 2px clamp(5px, .6vw, 9px);
}
.race-screen.active .race-stats span {
  font-size: clamp(.46rem, .82dvh, .56rem);
}
.race-screen.active .race-stats strong {
  font-size: clamp(.82rem, 1.55dvh, .98rem);
}
.race-screen.active .race-stats .compact {
  min-height: clamp(32px, 3.8dvh, 38px);
  padding: 0 clamp(8px, .7vw, 12px);
  font-size: clamp(.72rem, 1.35dvh, .84rem);
}
.race-screen.active .race-typing {
  grid-column: 1;
  grid-row: 2;
  height: 100%;
  min-height: 0;
  padding: clamp(9px, 1.2dvh, 14px) clamp(20px, 1.8vw, 32px);
}
.race-screen.active .race-typing .typing-meta {
  margin-bottom: clamp(5px, .7dvh, 8px);
}
.race-screen.active .race-typing .typing-viewport {
  height: calc(100% - clamp(25px, 2.8dvh, 33px));
}
.race-screen.active .race-typing .typing-copy {
  font-size: clamp(1.02rem, 2dvh, 1.48rem);
  line-height: 1.38;
}

@media (max-height: 760px) {
  .race-screen.active {
    --race-typing-height: 108px;
  }
  .race-screen.active .race-topline .eyebrow {
    display: none;
  }
  .race-screen.active .race-topline {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
/* Viewport-fitted Ready / Race Control screen */
body[data-screen="dashboard"] { overflow: hidden; }
body[data-screen="dashboard"] .app-shell { height: 100dvh; min-height: 0; }
body[data-screen="dashboard"] .topbar { height: clamp(54px, 6.5dvh, 68px); flex: 0 0 auto; }
body[data-screen="dashboard"] footer { display: none; }
body[data-screen="dashboard"] main { min-height: 0; }
.dashboard-screen.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(8px, 1dvh, 12px);
  height: 100%;
  min-height: 0;
  padding: clamp(8px, 1dvh, 12px) 0;
  overflow: hidden;
}
.dashboard-screen.active .dashboard-head { align-items: center; margin: 0; }
.dashboard-screen.active .dashboard-head .eyebrow { margin-bottom: 3px; font-size: .62rem; }
.dashboard-screen.active .dashboard-head h2 { margin-bottom: 2px; font-size: clamp(2rem, 4.4dvh, 3rem); }
.dashboard-screen.active .dashboard-head > div > p:not(.eyebrow) { margin-bottom: 4px; font-size: .82rem; }
.dashboard-screen.active .ready-profile { align-items: center; max-width: 520px; margin-top: 5px; }
.dashboard-screen.active .ready-profile label { grid-template-columns: auto minmax(170px, 260px); align-items: center; gap: 8px; }
.dashboard-screen.active .ready-profile input { min-height: 34px; }
.dashboard-screen.active .ready-profile .compact { min-height: 34px; }
.dashboard-screen.active .baseline-card { min-width: 230px; padding: 10px 16px; border-radius: 15px; }
.dashboard-screen.active .baseline-card strong { margin: 2px 0; font-size: 1.2rem; }
.dashboard-screen.active .baseline-card .inline-button { margin-top: 4px; }
.dashboard-screen.active .setup-grid { min-height: 0; gap: 12px; }
.dashboard-screen.active .setup-panel { min-height: 0; padding: clamp(11px, 1.25dvh, 16px); border-radius: 18px; }
.dashboard-screen.active .panel-title { margin-bottom: 8px; }
.dashboard-screen.active .panel-title > span { width: 28px; height: 28px; }
.dashboard-screen.active .panel-title h3 { font-size: 1rem; }
.dashboard-screen.active .panel-title p { font-size: .7rem; }
.dashboard-screen.active .ai-pace-control { padding: clamp(9px, 1.1dvh, 13px); }
.dashboard-screen.active .ai-pace-readout strong { font-size: 1.05rem; }
.dashboard-screen.active .ai-pace-readout output { min-width: 62px; padding: 5px 9px; font-size: 1rem; }
.dashboard-screen.active .ai-pace-control input[type="range"] { margin: clamp(13px, 1.7dvh, 19px) 0 7px; }
.dashboard-screen.active .ai-pace-range { margin: 9px 0 2px; }
.dashboard-screen.active .runner-summary { min-height: 168px; padding: 8px 18px; }
.dashboard-screen.active .runner-summary img { width: 164px; height: 164px; }
.dashboard-screen.active .runner-summary strong { font-size: 1.45rem; }
.dashboard-screen.active .runner-more-button { min-height: 38px; margin-top: 8px; padding: 0 16px; }
.dashboard-screen.active .runner-note { display: none; }
.dashboard-screen.active .championship-map { margin: 0; padding: 9px 14px; border-radius: 16px; }
.dashboard-screen.active .championship-map-head { align-items: center; margin-bottom: 5px; }
.dashboard-screen.active .championship-map-head h3 { font-size: 1rem; }
.dashboard-screen.active .level-buttons { gap: 5px; padding: 2px 2px 5px; overflow: hidden; }
.dashboard-screen.active .level-button { min-width: 0; flex: 1 1 0; padding: 7px 8px; border-radius: 10px; }
.dashboard-screen.active .level-button span { font-size: .76rem; }
.dashboard-screen.active .level-button small { margin-top: 1px; font-size: .56rem; }
.dashboard-screen.active .replay-rules { min-height: 32px; margin-top: 3px; padding-top: 6px; gap: 12px; font-size: .65rem; }
.dashboard-screen.active .replay-rules input[type="number"] { width: 54px; min-height: 28px; padding: 3px 6px; }
.dashboard-screen.active .launch-bar { min-height: 58px; margin: 0; padding: 8px 10px 8px 18px; border-radius: 15px; }
.dashboard-screen.active .launch-bar strong { margin: 1px 0; font-size: .9rem; }
.dashboard-screen.active .launch-bar .primary.large,
.dashboard-screen.active .launch-bar .secondary.large { min-width: 170px; min-height: 44px; font-size: .88rem; }
@media (max-height: 760px) {
  .dashboard-screen.active .dashboard-head > div > p:not(.eyebrow),
  .dashboard-screen.active .panel-title p,
  .dashboard-screen.active .ai-pace-control > small { display: none; }
  .dashboard-screen.active .baseline-card small { display: none; }
  .dashboard-screen.active .championship-map-head > div > span { display: none; }
}
/* Regal navy, lemon, gold, sand, and tomato visual system */
:root {
  --regal-navy: #0d3b66;
  --lemon-chiffon: #faf0ca;
  --royal-gold: #f4d35e;
  --sandy-brown: #ee964b;
  --tomato: #f95738;
  --ink: var(--regal-navy);
  --ink-soft: #496778;
  --cream: var(--lemon-chiffon);
  --paper: #fffaf0;
  --coral: var(--sandy-brown);
  --coral-dark: var(--tomato);
  --cyan: var(--royal-gold);
  --violet: var(--sandy-brown);
  --line: rgba(13,59,102,.2);
  --shadow: 0 20px 60px rgba(13,59,102,.14);
}
body { background: radial-gradient(circle at 3% 8%, rgba(244,211,94,.34), transparent 28rem), radial-gradient(circle at 96% 14%, rgba(238,150,75,.22), transparent 30rem), var(--lemon-chiffon); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline-color: var(--tomato); }
.wordmark-icon { background: var(--regal-navy); box-shadow: 5px 5px 0 var(--royal-gold); }
.primary { color: var(--regal-navy); background: var(--royal-gold); box-shadow: 0 9px 24px rgba(13,59,102,.18); }
.primary:hover { color: var(--regal-navy); background: var(--sandy-brown); }
.baseline-card, .launch-bar, .ai-pace-readout output { background: var(--regal-navy); }
.baseline-card span, .baseline-card small, .launch-bar > div > span { color: var(--lemon-chiffon); }
.baseline-card .inline-button, .launch-bar .inline-button { color: var(--royal-gold); }
.setup-panel, .championship-map { background: rgba(255,250,240,.9); }
.ai-pace-control, .runner-summary { background: rgba(255,255,255,.76); }
.ai-pace-control input[type="range"] { background: linear-gradient(90deg, var(--regal-navy), var(--royal-gold) 48%, var(--sandy-brown) 72%, var(--tomato)); }
.mode-card.selected, .calibration-mode.selected, .passage-row.selected, .mistake-scope .selected, .standings-panel .series-standings > div.is-player { border-color: var(--tomato); background: #fff3c7; }
.level-button.completed, .series-race-button.completed { background: #fff3c7; }
.level-button.selected, .series-race-button.selected, .character-card.selected { border-color: var(--tomato); box-shadow: 0 0 0 2px var(--tomato); }
.panel-title > span { background: var(--regal-navy); }
.typing-card::before { background: var(--royal-gold); }

/* Additional saved color schemes. Add one data-theme block for each new option in THEMES. */
body[data-theme="stormy-teal"] {
  --graphite: #353535;
  --stormy-teal: #3c6e71;
  --white: #ffffff;
  --alabaster-grey: #d9d9d9;
  --yale-blue: #284b63;
  --regal-navy: var(--yale-blue);
  --lemon-chiffon: var(--white);
  --royal-gold: var(--stormy-teal);
  --sandy-brown: var(--alabaster-grey);
  --tomato: var(--graphite);
  --ink: var(--graphite);
  --ink-soft: #526b6d;
  --cream: var(--white);
  --paper: var(--white);
  --coral: var(--stormy-teal);
  --coral-dark: var(--yale-blue);
  --cyan: var(--stormy-teal);
  --violet: var(--yale-blue);
  --line: rgba(40,75,99,.24);
  --shadow: 0 20px 60px rgba(40,75,99,.16);
  background: radial-gradient(circle at 3% 8%, rgba(60,110,113,.18), transparent 28rem), radial-gradient(circle at 96% 14%, rgba(40,75,99,.15), transparent 30rem), var(--white);
}
body[data-theme="stormy-teal"] .wordmark-icon { background: var(--yale-blue); box-shadow-color: var(--stormy-teal); }
body[data-theme="stormy-teal"] .primary { color: var(--white); background: var(--stormy-teal); box-shadow: 0 9px 24px rgba(40,75,99,.2); }
body[data-theme="stormy-teal"] .primary:hover { color: var(--white); background: var(--yale-blue); }
body[data-theme="stormy-teal"] .baseline-card,
body[data-theme="stormy-teal"] .launch-bar,
body[data-theme="stormy-teal"] .ai-pace-readout output { background: var(--yale-blue); }
body[data-theme="stormy-teal"] .baseline-card span,
body[data-theme="stormy-teal"] .baseline-card small,
body[data-theme="stormy-teal"] .launch-bar > div > span { color: var(--alabaster-grey); }
body[data-theme="stormy-teal"] .baseline-card .inline-button,
body[data-theme="stormy-teal"] .launch-bar .inline-button { color: var(--white); }
body[data-theme="stormy-teal"] .setup-panel,
body[data-theme="stormy-teal"] .championship-map { background: rgba(255,255,255,.92); }
body[data-theme="stormy-teal"] .ai-pace-control,
body[data-theme="stormy-teal"] .runner-summary { background: rgba(217,217,217,.34); }
body[data-theme="stormy-teal"] .ai-pace-control input[type="range"] { background: linear-gradient(90deg, var(--graphite), var(--stormy-teal) 52%, var(--yale-blue)); }
body[data-theme="stormy-teal"] .mode-card.selected,
body[data-theme="stormy-teal"] .calibration-mode.selected,
body[data-theme="stormy-teal"] .passage-row.selected,
body[data-theme="stormy-teal"] .mistake-scope .selected,
body[data-theme="stormy-teal"] .standings-panel .series-standings > div.is-player,
body[data-theme="stormy-teal"] .level-button.completed,
body[data-theme="stormy-teal"] .series-race-button.completed { border-color: var(--stormy-teal); background: #edf4f4; }
body[data-theme="stormy-teal"] .level-button.selected,
body[data-theme="stormy-teal"] .series-race-button.selected,
body[data-theme="stormy-teal"] .character-card.selected { border-color: var(--yale-blue); box-shadow: 0 0 0 2px var(--yale-blue); }
body[data-theme="stormy-teal"] .panel-title > span { background: var(--yale-blue); }
body[data-theme="stormy-teal"] .typing-card::before { background: var(--stormy-teal); }

body[data-theme="coral-slate"] {
  --jet-black: #2d3142;
  --silver: #bfc0c0;
  --white: #ffffff;
  --coral-glow: #ef8354;
  --blue-slate: #4f5d75;
  --regal-navy: var(--jet-black);
  --lemon-chiffon: var(--white);
  --royal-gold: var(--coral-glow);
  --sandy-brown: var(--silver);
  --tomato: var(--coral-glow);
  --ink: var(--jet-black);
  --ink-soft: var(--blue-slate);
  --cream: #f4f4f3;
  --paper: var(--white);
  --coral: var(--coral-glow);
  --coral-dark: #cf653b;
  --cyan: var(--blue-slate);
  --violet: var(--jet-black);
  --line: rgba(45,49,66,.22);
  --shadow: 0 20px 60px rgba(45,49,66,.16);
  background: radial-gradient(circle at 3% 8%, rgba(239,131,84,.18), transparent 28rem), radial-gradient(circle at 96% 14%, rgba(79,93,117,.17), transparent 30rem), var(--cream);
}
body[data-theme="coral-slate"] .wordmark-icon { background: var(--jet-black); box-shadow-color: var(--coral-glow); }
body[data-theme="coral-slate"] .primary { color: var(--white); background: var(--coral-glow); box-shadow: 0 9px 24px rgba(45,49,66,.2); }
body[data-theme="coral-slate"] .primary:hover { color: var(--white); background: #cf653b; }
body[data-theme="coral-slate"] .baseline-card,
body[data-theme="coral-slate"] .launch-bar,
body[data-theme="coral-slate"] .ai-pace-readout output { background: var(--jet-black); }
body[data-theme="coral-slate"] .baseline-card span,
body[data-theme="coral-slate"] .baseline-card small,
body[data-theme="coral-slate"] .launch-bar > div > span { color: var(--silver); }
body[data-theme="coral-slate"] .baseline-card .inline-button,
body[data-theme="coral-slate"] .launch-bar .inline-button { color: var(--coral-glow); }
body[data-theme="coral-slate"] .setup-panel,
body[data-theme="coral-slate"] .championship-map { background: rgba(255,255,255,.92); }
body[data-theme="coral-slate"] .ai-pace-control,
body[data-theme="coral-slate"] .runner-summary { background: rgba(191,192,192,.22); }
body[data-theme="coral-slate"] .ai-pace-control input[type="range"] { background: linear-gradient(90deg, var(--jet-black), var(--blue-slate) 52%, var(--coral-glow)); }
body[data-theme="coral-slate"] .mode-card.selected,
body[data-theme="coral-slate"] .calibration-mode.selected,
body[data-theme="coral-slate"] .passage-row.selected,
body[data-theme="coral-slate"] .mistake-scope .selected,
body[data-theme="coral-slate"] .standings-panel .series-standings > div.is-player,
body[data-theme="coral-slate"] .level-button.completed,
body[data-theme="coral-slate"] .series-race-button.completed { border-color: var(--coral-glow); background: #fff1eb; }
body[data-theme="coral-slate"] .level-button.selected,
body[data-theme="coral-slate"] .series-race-button.selected,
body[data-theme="coral-slate"] .character-card.selected { border-color: var(--coral-glow); box-shadow: 0 0 0 2px var(--coral-glow); }
body[data-theme="coral-slate"] .panel-title > span { background: var(--jet-black); }
body[data-theme="coral-slate"] .typing-card::before { background: var(--coral-glow); }

body[data-theme="solar-rally"] {
  --deep-space-blue: #003049;
  --flag-red: #d62828;
  --vivid-tangerine: #f77f00;
  --sunflower-gold: #fcbf49;
  --vanilla-custard: #eae2b7;
  --regal-navy: var(--deep-space-blue);
  --lemon-chiffon: var(--vanilla-custard);
  --royal-gold: var(--sunflower-gold);
  --sandy-brown: var(--vivid-tangerine);
  --tomato: var(--flag-red);
  --ink: var(--deep-space-blue);
  --ink-soft: #526b68;
  --cream: var(--vanilla-custard);
  --paper: #fffaf0;
  --coral: var(--vivid-tangerine);
  --coral-dark: var(--flag-red);
  --cyan: var(--sunflower-gold);
  --violet: var(--flag-red);
  --line: rgba(0,48,73,.22);
  --shadow: 0 20px 60px rgba(0,48,73,.17);
  background: radial-gradient(circle at 3% 8%, rgba(252,191,73,.32), transparent 28rem), radial-gradient(circle at 96% 14%, rgba(247,127,0,.18), transparent 30rem), var(--vanilla-custard);
}
body[data-theme="solar-rally"] .wordmark-icon { background: var(--deep-space-blue); box-shadow-color: var(--sunflower-gold); }
body[data-theme="solar-rally"] .primary { color: var(--deep-space-blue); background: var(--sunflower-gold); box-shadow: 0 9px 24px rgba(0,48,73,.2); }
body[data-theme="solar-rally"] .primary:hover { color: var(--white, #fff); background: var(--vivid-tangerine); }
body[data-theme="solar-rally"] .baseline-card,
body[data-theme="solar-rally"] .launch-bar,
body[data-theme="solar-rally"] .ai-pace-readout output { background: var(--deep-space-blue); }
body[data-theme="solar-rally"] .baseline-card span,
body[data-theme="solar-rally"] .baseline-card small,
body[data-theme="solar-rally"] .launch-bar > div > span { color: var(--vanilla-custard); }
body[data-theme="solar-rally"] .baseline-card .inline-button,
body[data-theme="solar-rally"] .launch-bar .inline-button { color: var(--sunflower-gold); }
body[data-theme="solar-rally"] .setup-panel,
body[data-theme="solar-rally"] .championship-map { background: rgba(255,250,240,.92); }
body[data-theme="solar-rally"] .ai-pace-control,
body[data-theme="solar-rally"] .runner-summary { background: rgba(255,255,255,.68); }
body[data-theme="solar-rally"] .ai-pace-control input[type="range"] { background: linear-gradient(90deg, var(--deep-space-blue), var(--sunflower-gold) 48%, var(--vivid-tangerine) 72%, var(--flag-red)); }
body[data-theme="solar-rally"] .mode-card.selected,
body[data-theme="solar-rally"] .calibration-mode.selected,
body[data-theme="solar-rally"] .passage-row.selected,
body[data-theme="solar-rally"] .mistake-scope .selected,
body[data-theme="solar-rally"] .standings-panel .series-standings > div.is-player,
body[data-theme="solar-rally"] .level-button.completed,
body[data-theme="solar-rally"] .series-race-button.completed { border-color: var(--flag-red); background: #fff2cf; }
body[data-theme="solar-rally"] .level-button.selected,
body[data-theme="solar-rally"] .series-race-button.selected,
body[data-theme="solar-rally"] .character-card.selected { border-color: var(--flag-red); box-shadow: 0 0 0 2px var(--flag-red); }
body[data-theme="solar-rally"] .panel-title > span { background: var(--deep-space-blue); }
body[data-theme="solar-rally"] .typing-card::before { background: var(--sunflower-gold); }

body[data-theme="pumpkin-coast"] {
  --pumpkin-spice: #ff6700;
  --platinum: #ebebeb;
  --silver: #c0c0c0;
  --cornflower-ocean: #3a6ea5;
  --steel-azure: #004e98;
  --regal-navy: var(--steel-azure);
  --lemon-chiffon: var(--platinum);
  --royal-gold: var(--pumpkin-spice);
  --sandy-brown: var(--silver);
  --tomato: var(--pumpkin-spice);
  --ink: #17354f;
  --ink-soft: #53697d;
  --cream: var(--platinum);
  --paper: #ffffff;
  --coral: var(--pumpkin-spice);
  --coral-dark: var(--steel-azure);
  --cyan: var(--cornflower-ocean);
  --violet: var(--steel-azure);
  --line: rgba(0,78,152,.21);
  --shadow: 0 20px 60px rgba(0,78,152,.15);
  background: radial-gradient(circle at 3% 8%, rgba(255,103,0,.17), transparent 28rem), radial-gradient(circle at 96% 14%, rgba(58,110,165,.18), transparent 30rem), var(--platinum);
}
body[data-theme="pumpkin-coast"] .wordmark-icon { background: var(--steel-azure); box-shadow-color: var(--pumpkin-spice); }
body[data-theme="pumpkin-coast"] .primary { color: #fff; background: var(--pumpkin-spice); box-shadow: 0 9px 24px rgba(0,78,152,.2); }
body[data-theme="pumpkin-coast"] .primary:hover { color: #fff; background: var(--steel-azure); }
body[data-theme="pumpkin-coast"] .baseline-card,
body[data-theme="pumpkin-coast"] .launch-bar,
body[data-theme="pumpkin-coast"] .ai-pace-readout output { background: var(--steel-azure); }
body[data-theme="pumpkin-coast"] .baseline-card span,
body[data-theme="pumpkin-coast"] .baseline-card small,
body[data-theme="pumpkin-coast"] .launch-bar > div > span { color: var(--platinum); }
body[data-theme="pumpkin-coast"] .baseline-card .inline-button,
body[data-theme="pumpkin-coast"] .launch-bar .inline-button { color: #fff; }
body[data-theme="pumpkin-coast"] .setup-panel,
body[data-theme="pumpkin-coast"] .championship-map { background: rgba(255,255,255,.9); }
body[data-theme="pumpkin-coast"] .ai-pace-control,
body[data-theme="pumpkin-coast"] .runner-summary { background: rgba(192,192,192,.2); }
body[data-theme="pumpkin-coast"] .ai-pace-control input[type="range"] { background: linear-gradient(90deg, var(--steel-azure), var(--cornflower-ocean) 52%, var(--pumpkin-spice)); }
body[data-theme="pumpkin-coast"] .mode-card.selected,
body[data-theme="pumpkin-coast"] .calibration-mode.selected,
body[data-theme="pumpkin-coast"] .passage-row.selected,
body[data-theme="pumpkin-coast"] .mistake-scope .selected,
body[data-theme="pumpkin-coast"] .standings-panel .series-standings > div.is-player,
body[data-theme="pumpkin-coast"] .level-button.completed,
body[data-theme="pumpkin-coast"] .series-race-button.completed { border-color: var(--pumpkin-spice); background: #fff0e6; }
body[data-theme="pumpkin-coast"] .level-button.selected,
body[data-theme="pumpkin-coast"] .series-race-button.selected,
body[data-theme="pumpkin-coast"] .character-card.selected { border-color: var(--pumpkin-spice); box-shadow: 0 0 0 2px var(--pumpkin-spice); }
body[data-theme="pumpkin-coast"] .panel-title > span { background: var(--steel-azure); }
body[data-theme="pumpkin-coast"] .typing-card::before { background: var(--pumpkin-spice); }

body[data-theme="forest-trail"] {
  --dust-grey: #dad7cd;
  --dry-sage: #a3b18a;
  --fern: #588157;
  --hunter-green: #3a5a40;
  --pine-teal: #344e41;
  --regal-navy: var(--pine-teal);
  --lemon-chiffon: var(--dust-grey);
  --royal-gold: var(--dry-sage);
  --sandy-brown: var(--fern);
  --tomato: var(--hunter-green);
  --ink: var(--pine-teal);
  --ink-soft: #5b6d61;
  --cream: var(--dust-grey);
  --paper: #f7f6f1;
  --coral: var(--fern);
  --coral-dark: var(--hunter-green);
  --cyan: var(--dry-sage);
  --violet: var(--pine-teal);
  --line: rgba(52,78,65,.22);
  --shadow: 0 20px 60px rgba(52,78,65,.15);
  background: radial-gradient(circle at 3% 8%, rgba(163,177,138,.32), transparent 28rem), radial-gradient(circle at 96% 14%, rgba(88,129,87,.16), transparent 30rem), var(--dust-grey);
}
body[data-theme="forest-trail"] .wordmark-icon { background: var(--pine-teal); box-shadow-color: var(--dry-sage); }
body[data-theme="forest-trail"] .primary { color: #fff; background: var(--fern); box-shadow: 0 9px 24px rgba(52,78,65,.2); }
body[data-theme="forest-trail"] .primary:hover { color: #fff; background: var(--hunter-green); }
body[data-theme="forest-trail"] .baseline-card,
body[data-theme="forest-trail"] .launch-bar,
body[data-theme="forest-trail"] .ai-pace-readout output { background: var(--pine-teal); }
body[data-theme="forest-trail"] .baseline-card span,
body[data-theme="forest-trail"] .baseline-card small,
body[data-theme="forest-trail"] .launch-bar > div > span { color: var(--dust-grey); }
body[data-theme="forest-trail"] .baseline-card .inline-button,
body[data-theme="forest-trail"] .launch-bar .inline-button { color: var(--dry-sage); }
body[data-theme="forest-trail"] .setup-panel,
body[data-theme="forest-trail"] .championship-map { background: rgba(247,246,241,.9); }
body[data-theme="forest-trail"] .ai-pace-control,
body[data-theme="forest-trail"] .runner-summary { background: rgba(255,255,255,.57); }
body[data-theme="forest-trail"] .ai-pace-control input[type="range"] { background: linear-gradient(90deg, var(--pine-teal), var(--fern) 52%, var(--dry-sage)); }
body[data-theme="forest-trail"] .mode-card.selected,
body[data-theme="forest-trail"] .calibration-mode.selected,
body[data-theme="forest-trail"] .passage-row.selected,
body[data-theme="forest-trail"] .mistake-scope .selected,
body[data-theme="forest-trail"] .standings-panel .series-standings > div.is-player,
body[data-theme="forest-trail"] .level-button.completed,
body[data-theme="forest-trail"] .series-race-button.completed { border-color: var(--fern); background: #edf1e7; }
body[data-theme="forest-trail"] .level-button.selected,
body[data-theme="forest-trail"] .series-race-button.selected,
body[data-theme="forest-trail"] .character-card.selected { border-color: var(--hunter-green); box-shadow: 0 0 0 2px var(--hunter-green); }
body[data-theme="forest-trail"] .panel-title > span { background: var(--pine-teal); }
body[data-theme="forest-trail"] .typing-card::before { background: var(--dry-sage); }





/* Ready-screen player form and large character showcase */
.dashboard-screen.active .ready-profile {
  display: grid;
  grid-template-columns: minmax(250px, 370px) auto;
  align-items: end;
  gap: 8px;
  max-width: 500px;
  margin-top: 5px;
}
.dashboard-screen.active .ready-profile label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 3px;
  width: 100%;
}
.dashboard-screen.active .ready-profile input { width: 100%; }
.dashboard-screen.active .ready-profile .compact { min-width: 82px; white-space: nowrap; }
.dashboard-screen.active .setup-panel:first-child { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dashboard-screen.active .setup-panel:first-child .ai-pace-control { display: grid; align-content: center; }
.dashboard-screen.active .runner-control-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
}
.dashboard-screen.active .runner-control-panel .runner-summary {
  justify-content: center;
  min-height: 0;
  height: 100%;
  padding: 4px clamp(16px, 2vw, 34px);
}
.dashboard-screen.active .runner-summary img {
  width: clamp(170px, 15vw, 270px);
  height: clamp(170px, 24dvh, 270px);
  transform: none;
}
.dashboard-screen.active .runner-summary strong { font-size: clamp(1.25rem, 2.4dvh, 1.75rem); }
.dashboard-screen.active .runner-summary small { font-size: .75rem; }
.dashboard-screen.active .runner-more-button { justify-self: start; margin-top: 7px; }
@media (max-height: 760px) {
  .dashboard-screen.active .runner-summary img { width: 164px; height: 164px; }
}
/* Passage groups and profile-ready layout */
.passage-group-picker { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; color: #b8c9c0; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.passage-group-picker select { min-height: 34px; max-width: 230px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; padding: 0 28px 0 10px; background: rgba(255,255,255,.95); color: var(--ink); font-size: .8rem; font-weight: 850; letter-spacing: 0; text-transform: none; }
.passage-section-title { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.72); color: var(--ink-soft); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.section-caret { display: inline-block; color: var(--cyan); transition: transform .16s ease; }
.passage-section:not(.collapsed) .section-caret { transform: rotate(90deg); }
.passage-section.collapsed .passage-section-items { display: none; }
.passage-section-count { justify-self: end; min-width: 30px; color: var(--cyan); text-align: right; }
.dashboard-screen.active .ready-profile { grid-template-columns: auto minmax(180px, 260px) auto; align-items: center; max-width: 560px; gap: 8px; }
.dashboard-screen.active .ready-profile label { display: contents; }
.dashboard-screen.active .ready-profile label::before { content: "Player name"; color: var(--ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-screen.active .ready-profile input { min-height: 36px; }
.dashboard-screen.active .ready-profile label { display: block; width: auto; }
.dashboard-screen.active .ready-profile label::before { content: none; }

/* Race challenge layout: game first, compact info strip second, typing third. */
.race-screen.active {
  --race-typing-height: clamp(112px, 14dvh, 142px);
  --race-hud-height: clamp(46px, 5.6dvh, 58px);
  grid-template-rows: minmax(0, 1fr) var(--race-hud-height) var(--race-typing-height);
  gap: 6px;
  padding: 6px 0 8px;
}
.race-screen.active .race-canvas-wrap,
.race-screen.active .race-topline,
.race-screen.active .race-typing {
  width: min(100%, calc(179.55dvh - 390px));
}
.race-screen.active .race-canvas-wrap {
  grid-row: 1;
  align-self: end;
  max-height: 100%;
}
.race-screen.active .race-topline {
  grid-row: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 12px;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(23,52,79,.09);
  backdrop-filter: none;
}
.race-screen.active .race-topline h2 { font-size: clamp(1rem, 2.05dvh, 1.36rem); }
.race-screen.active .race-topline .eyebrow { margin-bottom: 1px; }
.race-screen.active .race-stats > div { padding-top: 0; padding-bottom: 0; }
.race-screen.active .race-stats .compact { min-height: 34px; }
.race-screen.active .race-typing {
  grid-row: 3;
  padding-top: 9px;
  padding-bottom: 9px;
}
@media (max-height: 760px) {
  .race-screen.active {
    --race-typing-height: 104px;
    --race-hud-height: 40px;
    gap: 5px;
  }
  .race-screen.active .race-canvas-wrap,
  .race-screen.active .race-topline,
  .race-screen.active .race-typing {
    width: min(100%, calc(179.55dvh - 330px));
  }
}

/* Top-pack the challenge so browser chrome does not force scrolling. */
.race-screen.active {
  grid-template-rows: auto var(--race-hud-height) var(--race-typing-height);
  align-content: start;
}
.race-screen.active .race-canvas-wrap {
  align-self: start;
}

.helper-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.helper-toggle select { min-height: 34px; min-width: 122px; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 0 10px; color: var(--ink); font-size: .8rem; font-weight: 850; letter-spacing: 0; text-transform: none; }