/* Optional thumb steering shares the existing steering footprint. */
.touch-controls .steering-joystick{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:120px;height:60px;min-width:104px;flex-shrink:0;padding:7px 10px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:#102c25;border:1px solid #d9e6d5;border-radius:9px;color:#fffaf0;cursor:grab}
.touch-controls .steering-joystick.active{cursor:grabbing;background:#20483b}
.joystick-track{position:relative;display:block;width:94px;height:28px;border-radius:20px;background:#284b3d;border:1px solid #8ca88f}
.joystick-thumb{position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;background:#efc88b;border:2px solid #fff0d7;transform:translate(calc(-50% + var(--steer-offset,0px)),-50%);box-shadow:0 2px 5px #0005}
.joystick-caption{font-size:10px;line-height:1;letter-spacing:.4px;font-weight:600}
.touch-controls[data-touch-steering=joystick] .rider-steering>[data-touch]{display:none}
.steering-joystick:focus-visible{outline:3px solid #efc88b;outline-offset:4px}
.rider-setting select{min-width:126px}.rider-setting select:disabled{opacity:.7;cursor:default}
.rider-replay{border-top:1px solid #aebdaa;margin-top:20px}.rider-replay .button{margin-top:18px}.rider-replay-note{margin:10px 0 0}
#hud .rider-highlight{outline:3px solid #ffe0a4;outline-offset:4px;box-shadow:0 0 0 6px #102c25}
#hud .ride-hints .rider-highlight{outline-width:2px;outline-offset:1px;box-shadow:none;background:#efc88b;color:#173529}
.rider-tutorial{position:absolute;left:50%;top:calc(112px + var(--safe-top));transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:min(430px,calc(100% - 32px));padding:12px;background:#102c25;color:#fffaf0;border:1px solid #efd0a0;border-radius:9px;box-shadow:0 4px 18px #0005;pointer-events:none}
.rider-tutorial-title{display:block;font-size:13px;line-height:1.3;font-weight:650}.rider-tutorial-caption{margin:5px 0 0;font-size:12px;line-height:1.4;color:#f0f4e9}
#hud .rider-tutorial-skip{min-width:48px;min-height:44px;padding:0 9px;border:1px solid #acbdab;border-radius:5px;background:#244a3b;color:#fffaf0;font-size:12px;font-weight:600;pointer-events:auto}
.rider-tutorial-on .toast{display:none}
@media(max-width:900px),(any-pointer:coarse){
 .rider-tutorial{top:calc(188px + var(--safe-top));width:min(390px,calc(100% - 24px));padding:9px;gap:8px}
 #hud[data-rider-hand=left] .touch-controls{flex-direction:row-reverse}
 #hud[data-rider-hand=left] .ride-actions{margin-left:0;margin-right:auto}
 #hud[data-rider-hand=left] .touch-gears{left:auto;right:calc(12px + var(--safe-right))}
}
@media(max-width:359px){.touch-controls .steering-joystick{width:108px;min-width:108px;padding-inline:5px}.rider-setting{flex-wrap:wrap}.rider-setting select{max-width:100%;min-width:145px}.rider-setting>span{flex:1 1 150px}}
@media(max-height:600px) and (orientation:landscape){
 .touch-controls .steering-joystick{height:56px}
 .rider-tutorial{top:calc(66px + var(--safe-top));width:min(310px,calc(100% - 352px));min-width:204px;padding:8px;gap:6px}
 .rider-tutorial-title{font-size:12px}.rider-tutorial-caption{font-size:11px;line-height:1.3;margin-top:4px}
 #hud[data-rider-hand=left] .ride-actions{right:auto;left:calc(12px + var(--safe-left))}
}
/* At high browser zoom, reserve the middle strip for the lesson and keep all
   driving controls below it. The map and numeric telemetry return afterward. */
@media(max-width:500px) and (max-height:500px){
 .touch-controls .steering-joystick{height:56px}
 .rider-tutorial-on .ride-time,.rider-tutorial-on .map-box,.rider-tutorial-on .telemetry{visibility:hidden}
 .rider-tutorial{top:calc(54px + var(--safe-top));width:calc(100% - 24px);min-width:0;min-height:52px;padding:4px 6px;gap:6px}
 .rider-tutorial-title{font-size:11px;line-height:14px}.rider-tutorial-caption{font-size:11px;line-height:13px;margin-top:2px}
 .rider-tutorial-on .ride-actions,.rider-tutorial-on .touch-gears{bottom:calc(72px + var(--safe-bottom))}
 #hud[data-rider-hand=left] .ride-actions{right:auto;left:calc(12px + var(--safe-left))}
}