/* Drawn vehicle controls share one visual language across both driving modes. */
.control-icon{display:inline-block;width:24px;height:24px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#turn-signals .control-icon{width:21px;height:21px}
.drive-actions .control-icon,.drive-toolbar .control-icon,#sound .control-icon{width:18px;height:18px;margin-right:6px}
#touch-controls button,#touch .tbtn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:14px;width:60px;height:66px;padding:7px;background:#142229df;border:1px solid #d5e5e65c;box-shadow:0 3px 12px #0003;color:#edf4f0;touch-action:none;-webkit-user-select:none;user-select:none;transition:background .1s,border-color .1s,transform .1s}
#touch-controls .control-label,#touch .control-label{font:600 9px Arial,sans-serif;letter-spacing:.2px;white-space:nowrap;text-transform:none}
#touch-controls button .control-icon,#touch .tbtn .control-icon{width:27px;height:27px}
#touch-controls button:last-child,#touch .tbtn[data-k=gas]{height:78px;background:#b4473bdc;border-color:#ff9a8480}
#touch-controls button.held,#touch .tbtn.held,#touch-controls button:active,#touch .tbtn:active{background:#506c65;border-color:#b9ffe1;transform:translateY(2px)}
#touch-controls button:focus-visible,#touch .tbtn:focus-visible{outline:2px solid #ffd491;outline-offset:3px}
@media(pointer:coarse),(max-width:900px){
 #touch-controls:not([hidden]),body:not(.dialog-open) #touch{display:flex;position:absolute;left:0;right:0;bottom:0;padding:10px max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:7px;align-items:flex-end;justify-content:space-between;pointer-events:none}
 #touch-controls button,#touch .tbtn{pointer-events:auto}
 #touch .tgroup{gap:7px}#touch-controls button:nth-child(3){margin-left:auto}
 #keyboard-help,#circuit-inputs,#speedbox>small,.concept-label{display:none!important}
 .speedometer{bottom:114px!important;right:14px!important;width:155px!important}
 #speedbox:has(#turn-signals){bottom:114px;left:12px;width:155px;padding:10px 13px}
 #practice-speed{font-size:39px}#practice-gear{font-size:23px;margin-top:10px}
 #speedbox #turn-signals small,.speedometer #turn-signals small{display:none}
 #turn-signals{margin-bottom:7px}#turn-signals .signal-button{min-height:44px;width:44px}
 #mapBox,.minimap{bottom:114px!important}#toast{bottom:280px!important;max-width:calc(100% - 24px)}
 #town-limit{bottom:280px!important;left:12px!important}
 .playing .header-right .preview{display:none}
 .drive-toolbar button,.drive-toolbar a{min-height:42px}
 #topbar{top:62px;padding:10px;gap:5px}#topbar .card{padding:9px}#instrTxt{font-size:16px}
 .drive-toolbar{top:max(10px,env(safe-area-inset-top));left:12px;right:12px}
}
@media(max-width:430px){
 #touch-controls button,#touch .tbtn{width:57px;height:64px}#touch-controls button:last-child,#touch .tbtn[data-k=gas]{height:76px}
 #touch-controls,#touch{gap:6px!important}#touch .tgroup{gap:6px}
 .drive-toolbar{gap:5px}.drive-toolbar button,.drive-toolbar a{padding:9px}
 .drive-toolbar .control-icon{margin-right:4px;width:16px;height:16px}
 .drive-actions .glass-button{font-size:0;min-width:44px;min-height:44px;padding:9px}.drive-actions .glass-button .control-icon{width:22px;height:22px;margin:0}.drive-actions .glass-button span{display:none}
}
@media(max-height:500px) and (orientation:landscape){
 #topbar{width:55%;left:65px;top:3px;padding:7px}#topbar .card{padding:6px 9px}#topbar .l,#instrSub{display:none}
 .drive-toolbar{top:9px}.drive-toolbar a{font-size:0}.drive-toolbar a::after{content:'Garage';font-size:11px}.drive-toolbar button{padding:9px}
 #speedbox:has(#turn-signals){left:auto;right:12px;bottom:112px;width:155px}
 #town-limit{bottom:114px!important;left:12px!important;transform:scale(.8);transform-origin:left bottom}
 #mapBox,.minimap{display:none}.route-panel{max-width:290px}.drive-prompt{display:none!important}
 #toast{bottom:115px!important;max-width:330px}#corner-guide{top:90px;transform:scale(.8);transform-origin:left top}
}
@media(prefers-reduced-motion:reduce){#touch-controls button,#touch .tbtn{transition:none}}

.touch-instructions{display:none}
@media(pointer:coarse),(max-width:900px){#sheet .keys{display:none}#sheet .touch-instructions{display:block;color:#bbc9c4;font:13px/1.6 Arial;margin:0 0 20px}}

@media(max-width:600px) and (orientation:portrait){
 #town-limit{top:145px;bottom:auto!important;left:12px!important;padding:8px;gap:0;background:#142229d9}
 #town-limit .town-rule-copy{display:none}
 #town-limit .limit-disc{width:44px;height:44px;border-width:5px}#town-limit .limit-disc b{font-size:24px}
}
@media(max-height:500px) and (orientation:landscape){
 body.playing header,body.playing footer{display:none}
 body.playing #stage{height:100dvh;min-height:0}
 .playing .drive-actions{top:8px;right:12px;flex-direction:row;gap:6px}
 .playing .drive-actions .glass-button{font-size:0;min-width:42px;min-height:42px;padding:9px}.playing .drive-actions .glass-button span{display:none}.playing .drive-actions .control-icon{width:22px;height:22px;margin:0}
 .playing .route-panel{top:8px;left:12px;padding:8px 12px}.playing .route-panel h2{font-size:15px;margin:3px 0 6px}.playing .route-panel .eyebrow{display:none}
 .playing #corner-guide{left:12px;top:90px;max-width:300px}
 .playing .speedometer{width:145px!important;bottom:110px!important}.playing .speedometer strong{font-size:40px}
}
/* Quiet, compact navigation chrome; the route remains the primary instruction. */
.drive-toolbar{gap:6px;padding:5px;border:1px solid #d6e7e52b;border-radius:15px;background:#142229e8;backdrop-filter:blur(12px);width:max-content;max-width:calc(100% - 24px)}
.drive-toolbar button,.drive-toolbar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:0;border-radius:10px;background:transparent;padding:8px 11px;white-space:nowrap}
.drive-toolbar a{margin-right:6px;border-right:1px solid #d6e7e526;border-radius:9px 0 0 9px;padding-right:16px}
.drive-toolbar .control-icon{margin:0;width:19px;height:19px}
.drive-toolbar button:hover,.drive-toolbar a:hover{background:#ffffff13}
.drive-toolbar button[aria-pressed=true]{color:#bdedcf}
@media(max-width:600px){
 .drive-toolbar{left:12px;right:12px;top:10px;width:auto;justify-content:space-between;padding:4px}
 .drive-toolbar button,.drive-toolbar a{min-width:44px;height:44px;padding:10px}
 .drive-toolbar button span{display:none}.drive-toolbar a{margin-right:auto;font-size:11px;padding-right:15px}
 #topbar{top:71px;padding:0 12px;gap:6px}#topbar .card{border-radius:11px;padding:10px}
 #instrTxt{font-size:15px}#instrSub{font-size:8px}#topbar #arrow{width:24px;margin-right:2px}
 #topbar #prog,#topbar #faults{min-width:52px}#topbar .v{font-size:19px}#topbar .l{font-size:7px;letter-spacing:1px}
 #town-limit{top:139px}
}
@media(max-height:500px) and (orientation:landscape){
 .drive-toolbar{left:auto;right:12px;top:8px;padding:3px}
 .drive-toolbar button,.drive-toolbar a{min-width:40px;min-height:40px;height:40px;padding:9px}
 .drive-toolbar button span,.drive-toolbar a span{display:none}.drive-toolbar a::after{content:none}
 .drive-toolbar a{margin:0;padding:9px}.drive-toolbar .control-icon{width:20px;height:20px}
 #topbar{left:0;top:8px;width:calc(100% - 255px);max-width:540px;padding:0 12px}
}
@media(min-width:901px) and (min-height:501px){#topbar{max-width:720px}}

#hint{width:max-content;max-width:calc(100% - 48px);box-sizing:border-box;font:13px/1.4 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;text-align:center;color:#edf5f1;border-radius:10px;padding:10px 14px;background:#142229e8}