/* Keep the existing track dimensions; compact only the surrounding interface. */
header,.racing header{height:54px;padding:0 24px}
.brand{font-size:24px}.brand small{font-size:9px;margin-top:2px}.tag{font-size:9px}
main,.racing main{padding:14px 24px 10px}
.intro,.racing .intro{margin-bottom:12px;gap:12px;align-items:center}
h1{font-size:42px}.racing .intro h1{font-size:30px}
.eyebrow{font-size:9px;margin-bottom:5px}
.intro p:not(.eyebrow){font-size:12px;margin-top:7px}
.quiet{padding:8px 12px;font-size:12px}
.setup{padding:20px;gap:28px}
h2{font-size:20px;margin-bottom:6px}
.setup p{font-size:12px;line-height:1.45;margin:7px 0}
.speeds{margin:16px 0;gap:7px}.speeds button{padding:11px 10px;font-size:13px}.speeds small{margin-top:4px}
.yellow{padding:10px 16px;font-size:13px}
.setup-actions{gap:8px}.setup .hint{font-size:11px!important;margin-top:12px}
.route-heading{margin-bottom:8px}.route-heading h3{font-size:13px}
#routes{gap:5px}.route-option{min-height:34px;padding:5px 7px;font-size:11px;gap:6px}
footer{margin-top:14px;padding-top:10px;font-size:9px}
.dashboard{padding:4px 0 7px;gap:14px;font-size:10px;min-height:26px}
.sentence{padding:11px 14px}.sentence p{font-size:9px;margin-bottom:5px}.sentence h2{font-size:clamp(17px,2vw,23px);line-height:1.3}
.controls{padding:8px 0;gap:10px;align-items:stretch;flex-wrap:nowrap}
.steering{gap:7px;min-width:0}.steering button{min-width:0;padding:8px 12px;font-size:22px;gap:8px;flex:1}.steering button span{font-size:12px;line-height:1.2}
.controls .quiet{width:auto;padding:7px 12px;font-size:11px;flex-shrink:0}.controls small{font-size:9px;margin-top:3px}
.answer-panel{padding:11px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px}
.answer-panel>div:first-child{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.answer-panel p:first-child{font-size:10px;margin:0}
.answer-panel h3{font-size:17px;margin:0;line-height:1.25}
.answer-entry{grid-column:1/-1;flex-wrap:nowrap;gap:8px}.answer-entry input{font-size:16px;padding:8px 10px;width:auto}
#feedback{margin:0;font-size:14px;align-self:center;line-height:1.3}#feedback:empty{display:none}
#next{grid-column:2;align-self:center}
.at-finish .steering{display:none}.at-finish .controls{justify-content:flex-end;padding:5px 0}
.at-finish .controls .quiet{display:flex;align-items:center;gap:8px;padding:5px 10px}.at-finish .controls small{margin:0}
.at-result .answer-entry{display:none}
dialog{padding:16px;max-height:96dvh}.map-head h2{font-size:26px}.map-head .eyebrow{margin-bottom:3px}#map-note{font-size:11px;margin:7px 0}
.map-scroll{display:flex;justify-content:center}.map-scroll canvas{width:min(100%,calc((100dvh - 140px)*1.8354));height:auto;aspect-ratio:1450/790;flex-shrink:1;min-width:0}
@media(max-width:900px){
 header,.racing header{padding:0 16px;height:50px}main,.racing main{padding:10px 16px}
 .intro,.racing .intro{margin-bottom:10px}.intro .quiet{padding:7px 10px;font-size:11px}
 h1{font-size:36px}.racing .intro h1{font-size:28px}
 .setup{gap:16px;padding:16px}.speeds{margin:12px 0}.speeds button{padding:9px 8px}
 .controls .quiet{max-width:160px}.controls small{max-width:125px}
 .steering button{padding:7px 9px;gap:6px}.steering button span{font-size:11px}
 .at-finish .controls .quiet{max-width:none}.at-finish .controls small{max-width:none}
 .sentence{padding:9px 12px}.answer-panel{padding:9px 12px}.answer-panel h3{font-size:16px}
}
@media(max-width:520px){
 .brand{font-size:21px}.brand small{font-size:8px}
 h1{font-size:25px}.racing .intro h1{font-size:25px}.intro .quiet{font-size:10px;padding:6px 8px}
 .intro .eyebrow,.intro p:not(.eyebrow){display:none}
 .setup h2{font-size:18px}.setup p{font-size:11px;margin:5px 0}
 .speeds{margin:9px 0}.speeds button{font-size:12px;padding:9px 6px}.speeds small{display:none}
 .setup-actions .yellow,.setup-actions .quiet{font-size:12px;padding:8px 10px}
 .setup .hint{font-size:10px!important;margin-top:8px}
 .route-option{font-size:10px;line-height:1.2;padding:4px;gap:4px;min-height:32px}.route-option b{font-size:10px}.route-option input{margin:0;width:12px;flex-shrink:0}
 .intro p:not(.eyebrow){font-size:11px}.setup{padding:12px;gap:12px}
 .controls{gap:6px}.steering{gap:5px}.steering button{padding:6px;font-size:20px;gap:4px}.steering button span{font-size:10px}
 .controls .quiet{padding:6px;font-size:10px;max-width:114px}.controls small{font-size:8px}
 .answer-panel>div:first-child{display:block}.answer-panel p:first-child{margin-bottom:3px;font-size:9px}
 .answer-entry .yellow{padding:9px 10px;font-size:12px}.answer-entry input{font-size:15px}
 .map-head h2{font-size:20px}.map-head .quiet{padding:6px;font-size:10px}
}
@media(max-height:720px) and (min-width:901px){
 header,.racing header{height:44px}.racing main{padding-top:8px}.racing .intro{margin-bottom:5px}.racing .intro h1{font-size:27px}
 .sentence{padding:7px 12px}.sentence p{margin-bottom:3px}.sentence h2{font-size:19px}
 .answer-panel{padding:8px 12px}.controls{padding:6px 0}
}
