.rally-page { --gold:#f6e579; --mint:#9ce7c7; margin:0; padding:14px; background:#070b0a; color:#fff; font-family:Inter,Arial,sans-serif; color-scheme:dark; }
.rally-page *, .rally-page *::before, .rally-page *::after { box-sizing:border-box; }
.rally-page [hidden] { display:none !important; }
.rally-page button, .rally-page a { -webkit-tap-highlight-color:transparent; }
.rally-page button { font:inherit; cursor:pointer; }
.rally-page button:disabled { cursor:default; }
.rally-page a { color:inherit; text-decoration:none; }
.rally-page :focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.rally-card { max-width:1680px; margin:auto; padding:22px 30px 14px; min-height:calc(100dvh - 28px); background:#101715; border:1px solid #26302a; border-radius:24px; }
.rally-header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.back-link { font-size:11px; font-weight:800; letter-spacing:.12em; }
.rally-page .home-link { font-size:clamp(18px,2.5vw,30px); white-space:nowrap; }
.rally-heading { display:flex; justify-content:space-between; align-items:end; margin:21px 0 19px; gap:12px; }
.rally-heading h1 { font-size:clamp(31px,4.2vw,60px); line-height:.9; letter-spacing:-.065em; margin:0; font-weight:900; }
.title-dot { color:var(--gold); }
.rally-heading .edition { font-size:9px; color:var(--mint); font-weight:800; letter-spacing:.22em; margin:0 0 9px; }
.circuit-label { color:#9aafa3; font-size:9px; letter-spacing:.12em; font-weight:800; margin:0; }
.circuit-label span { display:inline-block; margin-left:12px; border:1px solid #526b5b; padding:4px 7px; color:#fff; }
.race-shell { border:1px solid #3a4d41; border-radius:9px; overflow:hidden; }
.race-hud { display:flex; align-items:center; gap:24px; padding:11px 20px; background:#17231e; border-bottom:1px solid #3a4d41; }
.hud-stat { display:flex; flex-direction:column; min-width:62px; gap:3px; }
.hud-stat > span, .item-button small { color:#a9bbaf; font-size:8px; font-weight:800; letter-spacing:.12em; }
.hud-stat > strong { font-size:25px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
.hud-stat strong span { color:#8ba092; font-size:13px; font-weight:600; }
.time-stat { flex:1; }
.time-stat strong { font-size:23px; }
.score-stat { color:var(--gold); min-width:95px; }
.hud-actions { display:flex; gap:18px; }
.item-button { display:flex; align-items:center; gap:12px; color:white; background:#29382b; border:1px solid #52654a; border-radius:5px; padding:7px 12px; min-width:174px; text-align:left; }
.item-button:disabled { opacity:.55; }
.item-button:not(:disabled) { border-color:var(--gold); box-shadow:0 0 16px #f6e57918; }
.item-button > span:first-child { color:var(--gold); font-size:28px; line-height:1; }
.item-button small { display:block; font-size:8px; }
.item-button b { display:block; font-size:13px; padding-top:3px; }
.rally-page kbd { display:inline-block; font-family:inherit; font-size:.8em; border:1px solid #829579; border-bottom-width:2px; border-radius:3px; padding:1px 5px; line-height:1.3; }
.icon-button { border:0; background:none; color:#dbe6da; padding:8px 0; font-size:11px !important; font-weight:700 !important; white-space:nowrap; }
.icon-button:disabled { opacity:.4; }
.prompt-panel { --accent:#3a8060; position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:106px; padding:15px 22px 18px; background:#f1f2df; color:#18281f; border-left:5px solid var(--accent); }
.prompt-panel[data-kind="article"] { --accent:#8b55af; background:#f0e9f8; }
.prompt-panel[data-kind="conjugation"] { --accent:#237894; background:#e3f2f7; }
.prompt-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.eyebrow { font-size:9px; font-weight:800; letter-spacing:.12em; line-height:1.5; }
.prompt-copy .eyebrow { color:var(--accent); }
#german-prompt { font-size:clamp(21px,2.1vw,30px); font-weight:850; line-height:1.2; letter-spacing:-.025em; }
#prompt-context { font-size:11px; color:#516359; line-height:1.4; }
.road-hint { display:flex; align-items:center; gap:12px; font-size:10px; font-weight:800; letter-spacing:.06em; }
.road-hint small { display:block; font-weight:500; letter-spacing:0; margin-top:6px; }
.tiny-checker { display:inline-block; flex-shrink:0; width:24px; height:24px; background:conic-gradient(currentColor 25%,transparent 0 50%,currentColor 0 75%,transparent 0) 0 0/12px 12px; }
.answer-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:55%; gap:9px; }
.answer-choice { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:9px 6px; border:1px solid #75877860; border-bottom:3px solid #75877860; border-radius:5px; background:#ffffff94; text-align:center; min-width:0; }
.answer-choice.is-selected { border-color:var(--accent); background:#fff; box-shadow:0 0 0 1px var(--accent); }
.answer-choice small { font-size:8px; letter-spacing:.1em; color:#516359; font-weight:800; }
.answer-choice strong { font-size:clamp(14px,1.35vw,20px); line-height:1.2; font-weight:800; overflow-wrap:anywhere; }
.approach-bar { position:absolute; height:3px; bottom:0; left:0; right:0; background:#192d2015; }
.approach-bar span { display:block; background:var(--accent); width:0; height:100%; }
.race-strip { display:flex; align-items:center; gap:18px; padding:8px 20px; min-height:35px; background:#1e3027; color:#bdd2c1; }
.combo { position:relative; display:flex; align-items:center; gap:6px; min-width:124px; font-size:9px; letter-spacing:.05em; }
#multiplier { border-radius:4px; background:var(--gold); color:#21392b; font-size:12px; font-weight:900; padding:2px 6px; }
#streak-count { color:#fff4ab; font-size:14px; }
#combo-fill { position:absolute; bottom:-5px; left:0; height:2px; background:var(--gold); max-width:100%; }
.gate-progress { display:flex; flex:1; gap:4px; height:6px; }
.gate-progress i { flex:1; background:#516753; border-radius:2px; }
.gate-progress i[data-status="correct"] { background:var(--mint); }
.gate-progress i[data-status="incorrect"] { background:#eea388; }
.gate-progress i[data-status="skipped"] { background:#b0a0bc; }
.gate-progress i.is-next { outline:1px solid var(--gold); outline-offset:2px; }
#gate-count { font-variant-numeric:tabular-nums; font-size:10px; font-weight:800; white-space:nowrap; }
.rally-arena { position:relative; height:clamp(500px,calc(100dvh - 407px),800px); min-height:500px; overflow:hidden; background:#91b79a; isolation:isolate; }
#rally-world { width:100%; height:100%; display:block; }
.track-labels { position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.box-label { position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; color:#18271e; font-size:clamp(12px,1.15vw,15px); line-height:1.2; font-weight:800; text-align:center; }
.box-label span { max-width:100%; overflow-wrap:anywhere; background:#fff9d9; border:2px solid #2b4535; box-shadow:0 3px 0 #263d3540; padding:5px 6px; border-radius:4px; }
.box-label[data-kind="article"] span { background:#eee1ff; }
.box-label[data-kind="conjugation"] span { background:#d7f3ff; }
.box-label::after { content:""; width:2px; height:13px; background:#2b4535; }
.race-feedback { position:absolute; z-index:4; left:50%; top:14px; transform:translateX(-50%); padding:9px 16px; width:max-content; max-width:65%; text-align:center; font-size:12px; font-weight:800; line-height:1.5; background:#182b24f2; color:#f9f7e8; border:1px solid #b6cdb1; border-radius:7px; pointer-events:none; box-shadow:0 5px 20px #162d2430; }
.race-feedback:empty { display:none; }
.race-feedback[data-kind="correct"] { background:#f5e777; color:#233c2b; border-color:#fff4a3; }
.race-feedback[data-kind="incorrect"],.race-feedback[data-kind="skipped"] { border-color:#ffc7aa; }
.countdown { position:absolute; z-index:5; left:50%; top:43%; transform:translate(-50%,-50%); color:#fff9d9; font-size:100px; line-height:1; font-weight:950; text-shadow:0 6px 0 #253e32,0 0 40px #253e3240; }
.lap-banner { position:absolute; z-index:3; top:36%; left:50%; transform:translate(-50%,-50%) rotate(-3deg); padding:14px 26px; min-width:225px; color:#223c2d; background:var(--gold); box-shadow:5px 5px 0 #203d32; text-align:center; pointer-events:none; }
.lap-banner small { display:block; font-size:8px; font-weight:800; letter-spacing:.16em; }
.lap-banner strong { display:block; font-size:30px; font-weight:900; letter-spacing:-.06em; }
.track-caption { position:absolute; bottom:15px; left:16px; display:flex; align-items:center; gap:7px; color:#fffde5; background:#193329db; padding:7px 9px; border-radius:3px; font-size:8px; font-weight:800; letter-spacing:.07em; max-width:calc(100% - 122px); }
.live-dot { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--gold); }
.speed-display { position:absolute; right:19px; bottom:15px; color:#fffdeb; text-align:right; filter:drop-shadow(0 2px 2px #183327); }
.speed-display strong { font-size:39px; font-weight:900; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.speed-display > span { font-size:8px; font-weight:800; letter-spacing:.08em; margin-left:4px; }
.speed-track { width:90px; height:3px; background:#ffffff50; margin:5px 0 0 auto; }
.speed-track i { display:block; background:var(--gold); height:100%; width:0; }
.draft-meter { position:absolute; bottom:53px; left:17px; color:#e3ffff; font-size:8px; letter-spacing:.1em; font-weight:800; }
.draft-meter > i { display:block; width:115px; height:4px; margin-top:5px; background:#163c47; }
.draft-meter b { display:block; height:100%; background:#99eaff; }
.rally-overlay { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:18px; overflow:auto; background:#0b201a30; backdrop-filter:blur(3px); }
.brief-card { position:relative; width:500px; max-width:100%; margin:auto; padding:26px 30px 20px; background:#142a24f7; border:1px solid #91b59c; border-radius:9px; box-shadow:0 18px 70px #11261c66; color:#faf9e7; }
.brief-card .eyebrow { margin:0 0 13px; color:#bfe2cc; display:flex; align-items:center; gap:10px; font-size:8px; }
.brief-card .tiny-checker { width:16px; height:16px; background-size:8px 8px; }
.brief-card h2 { font-size:clamp(30px,4vw,49px); line-height:.97; letter-spacing:-.06em; margin:0 0 13px; font-weight:900; }
.brief-card h2 em { color:var(--gold); font-style:normal; }
.brief-copy { font-size:12px; line-height:1.65; color:#c5d9c8; margin:0 0 15px; }
.race-features { display:flex; gap:16px; padding:10px 0 15px; }
.race-features span { font-size:9px; color:#bdcfbf; }
.race-features b { color:var(--mint); font-size:17px; display:block; margin-bottom:4px; }
.control-guide { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; padding:12px 0; margin-bottom:14px; border-top:1px solid #516b54; border-bottom:1px solid #516b54; }
.control-guide > div { display:flex; flex-direction:column; gap:6px; font-size:10px; }
.control-guide > div > span { height:20px; white-space:nowrap; }
.control-guide kbd { margin-right:2px; border-color:#90a283; color:#f8f6df; font-size:10px; }
.control-guide b { color:#b7c6ac; font-weight:500; }
.primary-button { width:100%; border:1px solid var(--gold); border-radius:4px; background:var(--gold); color:#203327; padding:13px 18px; min-height:44px; font-size:13px !important; font-weight:850 !important; text-align:center; }
.primary-button:hover { background:#fff29b; }
.primary-button:disabled { opacity:.6; }
.brief-footnote { color:#afc3ad; font-size:9px; text-align:center; line-height:1.8; margin:11px 0 0; }
.personal-best { border-top:1px solid #46644e; color:var(--mint); font-size:9px; text-align:center; line-height:1.6; margin:13px 0 0; padding-top:11px; }
#load-status { font-size:12px; margin:6px 0 0; }
#load-status:empty { display:none; }
.secondary-button { width:100%; margin-top:10px; padding:11px 15px; min-height:44px; border:1px solid #64765d; color:#e2e9d7; background:transparent; border-radius:4px; font-size:12px !important; }
.exit-link { display:block; text-align:center; margin-top:13px; font-size:11px; color:#c4d7b9 !important; text-decoration:underline !important; text-underline-offset:3px; }
.result-card { width:650px; padding:0; max-height:100%; display:flex; flex-direction:column; overflow:hidden; margin:auto; }
.result-content { min-height:0; overflow-y:auto; padding:22px 28px 0; scrollbar-width:thin; }
.result-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result-heading h2 { font-size:36px; }
#result-stars { color:var(--gold); font-size:28px; white-space:nowrap; letter-spacing:3px; }
.result-scoreline { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; color:var(--gold); }
.result-scoreline strong { font-size:39px; line-height:1; font-weight:900; letter-spacing:-.05em; }
.result-scoreline span { font-size:8px; font-weight:800; letter-spacing:.1em; }
.result-scoreline b { margin-left:auto; color:#a2efc4; font-size:8px; }
.result-numbers { display:grid; grid-template-columns:1.25fr 1.25fr 1fr .7fr; gap:12px; border-top:1px solid #506449; border-bottom:1px solid #506449; padding:12px 0; margin:14px 0; }
.result-numbers div { display:flex; flex-direction:column; gap:5px; }
.result-numbers span { font-size:8px; letter-spacing:.06em; color:#afc19f; font-weight:750; }
.result-numbers strong { font-size:23px; font-weight:850; letter-spacing:-.035em; }
.result-objectives { display:flex; gap:8px; margin-bottom:13px; }
.result-objectives span { flex:1; font-size:9px; line-height:1.5; color:#a8b8a9; border:1px solid #425c47; border-radius:4px; padding:7px; }
.result-objectives span[data-done="true"] { color:#f6e579; border-color:#b7b66b; background:#f6e5790a; }
.result-skills { display:flex; gap:8px; margin-bottom:17px; }
.result-skills div { flex:1; font-size:10px; color:#c5d9c8; }
.result-skills b { float:right; color:#fff4b8; }
.result-skills i { display:block; margin-top:6px; height:3px; background:#38503e; }
.result-skills i span { display:block; height:100%; background:var(--mint); }
.result-driving { font-size:10px; color:#b4c8ae; margin:0 0 17px; }
.word-review { margin:0 0 14px; }
.word-review h3 { font-size:9px; letter-spacing:.1em; color:#cfe1be; margin:0 0 5px; }
.word-review > p { font-size:10px; color:#aac0ab; margin:0 0 8px; }
.word-review ul { margin:0; padding:0; list-style:none; }
.word-review li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:7px 0; font-size:12px; border-bottom:1px solid #36503f; }
.word-review li button { border:0; background:none; color:#e4ecd7; text-align:left; padding:2px 0; line-height:1.5; font-size:12px; }
.word-review li button:disabled { opacity:1; }
.word-review li small { font-size:9px; color:#b9c7ae; white-space:nowrap; }
.result-actions { flex-shrink:0; padding:14px 28px 18px; background:#142a24; border-top:1px solid #46604c; }
.race-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; background:#1b2a20; padding:10px 18px; }
.race-footer p { font-size:8px; color:#b0c4af; font-weight:750; letter-spacing:.06em; margin:0; display:flex; gap:10px; align-items:center; }
.player-swatch { width:7px; height:7px; background:var(--gold); }
.footer-separator { color:#52614e; }
#drive-tip span { margin:0 3px; }
.audio-note { color:#819181; font-size:9px; margin:9px 0 0; text-align:right; }
.touch-controls { display:none; grid-template-columns:1fr 1fr 1.3fr 1.35fr .7fr; gap:8px; padding:9px; background:#16251c; }
.touch-controls button { min-width:0; min-height:47px; border:1px solid #698061; border-radius:5px; color:#f4f4d7; background:#2c412f; font-size:12px; font-weight:800; touch-action:none; user-select:none; }
.touch-controls button[data-control="item"] { color:var(--gold); border-color:#a39f5b; }
.touch-controls button:disabled { opacity:.45; }
.touch-controls button.active { color:#253121; background:var(--gold); }
/* Keep the driving surface and controls on screen throughout a race. */
.rally-page.is-racing { height:100dvh; padding:10px; overflow:hidden; }
.is-racing .rally-card { height:100%; min-height:0; padding:14px 20px 10px; display:flex; flex-direction:column; }
.is-racing .rally-card > main { display:flex; flex:1; min-height:0; flex-direction:column; }
.is-racing .rally-heading { margin:12px 0; }
.is-racing .rally-heading h1 { font-size:36px; }
.is-racing .rally-heading .edition { display:none; }
.is-racing .race-shell { display:flex; flex:1; min-height:0; flex-direction:column; }
.is-racing .race-hud,.is-racing .prompt-panel,.is-racing .race-strip,.is-racing .touch-controls,.is-racing .race-footer { flex-shrink:0; }
.is-racing .rally-arena { flex:1; height:auto; min-height:100px; }
.is-racing .audio-note { display:none; }
.is-finished .race-hud,.is-finished .prompt-panel,.is-finished .race-strip,.is-finished .touch-controls,.is-finished .race-footer { display:none; }
@media (pointer:coarse) { .touch-controls { display:grid; } #drive-tip { display:none; } }
@media (max-width:760px) {
  .touch-controls { display:grid; }
  .rally-page { padding:7px; } .rally-card { border-radius:17px; padding:18px 12px 12px; }
  .rally-heading { margin:23px 0 16px; } .circuit-label { font-size:7px; } .circuit-label span { display:none; }
  .race-hud { padding:9px 11px; gap:12px; flex-wrap:wrap; }
  .hud-stat { min-width:38px; } .hud-stat > strong { font-size:21px; } .hud-stat > span { font-size:7px; }
  .time-stat strong { font-size:18px; } .score-stat { min-width:67px; }
  .item-button { min-width:141px; padding:6px 9px; gap:8px; } .item-button b { font-size:11px; } .item-button > span:first-child { font-size:22px; }
  .hud-actions { margin-left:auto; gap:19px; }
  .prompt-panel { padding:10px 11px 12px; min-height:143px; flex-wrap:wrap; gap:8px; border-left-width:4px; }
  .prompt-copy { width:100%; } #german-prompt { font-size:25px; } #prompt-context { font-size:10px; }
  .prompt-copy .eyebrow { font-size:8px; } .road-hint { font-size:8px; }
  .road-hint .tiny-checker { width:15px; height:15px; background-size:8px 8px; }
  .answer-choices { width:100%; gap:6px; } .answer-choice { padding:6px 3px; } .answer-choice strong { font-size:15px; }
  .race-strip { gap:12px; padding:8px 12px; } .combo { min-width:103px; font-size:8px; } .gate-progress { gap:3px; } #gate-count { font-size:9px; }
  .rally-arena { height:555px; min-height:555px; } .rally-overlay { padding:12px; }
  .brief-card { padding:23px 19px 18px; } .brief-card h2 { font-size:38px; } .brief-copy { font-size:12px; }
  .control-guide { gap:6px; } .control-guide kbd { font-size:9px; padding:1px 4px; }
  .race-features { gap:14px; } .race-features span { font-size:8px; }
  .race-footer { padding:10px; } #drive-tip { display:none; }
  .track-caption { left:10px; bottom:12px; font-size:7px; max-width:calc(100% - 102px); }
  .speed-display { right:11px; bottom:12px; } .speed-display strong { font-size:31px; } .speed-track { width:65px; }
  .box-label { font-size:12px; } .box-label span { padding:4px 6px; }
  .race-feedback { font-size:11px; max-width:94%; top:10px; padding:7px 11px; }
  .draft-meter { left:11px; }
  .rally-page.is-racing { padding:5px; padding-bottom:max(5px,env(safe-area-inset-bottom)); }
  .is-racing .rally-card { padding:0; border-radius:5px; }
  .is-racing .rally-header,.is-racing .rally-heading,.is-racing .race-footer { display:none; }
  .result-card { padding:0; } .result-content { padding:21px 18px 0; } .result-actions { padding:12px 18px 17px; }
  .result-heading h2 { font-size:30px; } #result-stars { font-size:23px; letter-spacing:0; }
  .result-numbers { gap:7px; } .result-numbers strong { font-size:20px; } .result-numbers span { font-size:7px; }
  .result-objectives { gap:6px; } .result-objectives span { font-size:8px; padding:6px; }
}
@media (max-width:370px) {
  .rally-card { padding:15px 8px 10px; } .circuit-label { display:none; }
  .race-hud { gap:10px; padding:8px; } .hud-stat > span { font-size:6px; } .hud-stat > strong { font-size:19px; }
  .item-button { min-width:141px; } .hud-actions { gap:14px; } .icon-button { font-size:10px !important; }
  .brief-card { padding:20px 13px; } .brief-card h2 { font-size:34px; } .control-guide { gap:3px; }
  .control-guide kbd { font-size:8px; } .control-guide b { font-size:9px; }
  .race-strip { gap:8px; padding:7px 8px; } .combo { min-width:86px; } .streak-label { font-size:7px; }
  .gate-progress { gap:2px; } .touch-controls { gap:5px; padding:7px; } .touch-controls button { font-size:10px; }
  .result-card { padding:0; } .result-content { padding:18px 13px 0; } .result-actions { padding:12px 13px; }
  .result-heading h2 { font-size:26px; } #result-stars { font-size:20px; } .result-skills div { font-size:9px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .rally-page.is-racing { padding:4px; }
  .is-racing .rally-card { padding:0; border-radius:4px; }
  .is-racing .rally-header,.is-racing .rally-heading,.is-racing .race-footer { display:none; }
  .is-racing .race-hud { padding:5px 12px; gap:19px; flex-wrap:nowrap; }
  .is-racing .hud-stat > strong { font-size:18px; } .is-racing .hud-stat > span { font-size:7px; }
  .is-racing .item-button { padding:4px 10px; min-width:153px; } .is-racing .item-button b { font-size:10px; }
  .is-racing .prompt-panel { min-height:73px; padding:7px 13px 10px; flex-wrap:nowrap; gap:14px; }
  .is-racing .prompt-copy { width:40%; } .is-racing #german-prompt { font-size:21px; } .is-racing #prompt-context { font-size:9px; }
  .is-racing .answer-choices { width:60%; } .is-racing .answer-choice { padding:5px; }
  .is-racing .race-strip { padding:5px 14px; min-height:27px; }
  .is-racing .touch-controls { display:grid; padding:5px; } .is-racing .touch-controls button { min-height:42px; }
  .result-card { width:720px; } .result-content { padding:16px 24px 0; } .result-actions { padding:10px 24px; display:flex; align-items:center; gap:24px; }
  .result-actions .primary-button { width:65%; } .result-actions .exit-link { margin:0; }
  .race-feedback { top:7px; font-size:10px; padding:5px 10px; }
}
@media (prefers-reduced-motion:reduce) { .rally-page * { scroll-behavior:auto !important; } }