:root {
    --rt-ink: #17243b;
    --rt-cream: #fff4dc;
    --rt-yellow: #ffc94b;
    --rt-sky: #57b9e8;
    --rt-mint: #7bd6a1;
    --rt-coral: #f57465;
    --rt-shadow: 0 6px 0 rgba(16, 27, 43, .2), 0 12px 26px rgba(16, 27, 43, .18);
    --rt-ui-scale: 1;
    --rt-control-opacity: 1;
}

body.roadtrip-drive #drive-primary-ui, body.roadtrip-drive #drive-input-hint, body.roadtrip-drive #drive-start-prompt,
body.roadtrip-drive #speedometer, body.roadtrip-drive #challenge-hud, body.roadtrip-drive #drive-toolbar,
body.roadtrip-drive #mobile-drive-ui, body.roadtrip-drive #touch-controls, body.roadtrip-drive #drive-surface-feedback,
body.roadtrip-drive #pause-btn, body.roadtrip-drive #ds-toggle, body.roadtrip-drive #rv-pause-radial,
body.roadtrip-drive #hud, body.roadtrip-drive #rv-session-ribbon, body.roadtrip-drive #rv-compass,
body.roadtrip-drive #rv-toggles, body.roadtrip-drive #rv-rec-chip, body.roadtrip-drive #rv-quality-pill,
body.roadtrip-drive #drive-camera-hint, body.roadtrip-drive #drive-actions, body.roadtrip-drive #version-tag { display:none !important; }
body.roadtrip-drive #speedometer.collapsed { display:none !important; }

#roadtrip-hud { position:fixed; inset:0; z-index:700; pointer-events:none; color:var(--rt-ink); font-family:Inter, ui-sans-serif, system-ui, sans-serif; touch-action:none; user-select:none; -webkit-user-select:none; }
#roadtrip-hud button, #roadtrip-hud a, #roadtrip-hud input { pointer-events:auto; touch-action:none; }
.roadtrip-drive #map-minimap { position:static!important; inset:auto!important; width:100%!important; height:100%!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.rt-top-hud { position:absolute; inset: max(12px, var(--zone-safe-top, env(safe-area-inset-top))) max(12px, var(--zone-safe-right, env(safe-area-inset-right))) auto max(12px, var(--zone-safe-left, env(safe-area-inset-left))); display:grid; grid-template-columns:84px minmax(0, 1fr) 114px; gap:8px; align-items:start; transform:scale(var(--rt-ui-scale)); transform-origin:top left; }
.rt-speedo,.rt-route-sign,.rt-map-button,.rt-pause-button { border:2px solid var(--rt-ink); background:var(--rt-cream); box-shadow:var(--rt-shadow); color:var(--rt-ink); }
.rt-speedo { width:84px; height:74px; border-radius:22px 16px 19px 17px; display:grid; grid-template-columns:1fr auto; grid-template-rows:40px 18px; align-items:end; padding:7px 9px; text-align:left; }
.rt-speed-value { font:900 34px/.9 ui-rounded,Inter,sans-serif; letter-spacing:-.08em; color:var(--rt-sky); text-shadow:1px 1px 0 var(--rt-ink); }
.rt-speed-unit { font-size:9px; font-weight:900; align-self:end; margin-bottom:5px; }
.rt-speed-meta { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(23,36,59,.2); padding-top:3px; font-size:10px; font-weight:800; }
.rt-gear { display:grid; place-items:center; min-width:30px; height:14px; padding:0 4px; border-radius:5px; color:var(--rt-cream); background:var(--rt-ink); font-size:7px; letter-spacing:.02em; }
.rt-route-sign { justify-self:center; max-width:65vw; min-width:0; min-height:54px; padding:8px 11px; border-radius:10px 12px 10px 7px; display:flex; align-items:center; gap:8px; text-align:left; transition:transform 190ms ease, max-width 190ms ease, min-height 190ms ease; }
.rt-route-sign::before { content:''; position:absolute; left:14px; bottom:-8px; width:12px; height:12px; background:var(--rt-cream); border-right:2px solid var(--rt-ink); border-bottom:2px solid var(--rt-ink); transform:rotate(45deg); }
.rt-route-arrow svg { width:20px; fill:none; stroke:var(--rt-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.rt-route-copy { min-width:0; display:grid; gap:3px; }.rt-route-name { font-size:14px; line-height:1.1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.rt-route-meta { font-size:12px; font-weight:700; color:#466078; }.rt-route-sign.is-collapsed { min-height:35px; padding:6px 10px; max-width:52vw; }.rt-route-sign.is-collapsed .rt-route-meta { display:none; }.rt-route-sign.is-collapsed::before { display:none; }
.rt-map-actions { display:flex; justify-content:end; gap:6px; }.rt-map-button { position:relative; display:grid; width:78px; height:78px; padding:0; overflow:hidden; border-radius:24px 18px 22px 17px; }.rt-map-host { position:absolute; inset:3px; overflow:hidden; border-radius:18px 14px 18px 13px; background:#b5d49d; }.rt-map-host canvas { width:100%!important; height:100%!important; display:block; }.rt-map-button>svg { position:absolute; right:3px; bottom:3px; width:18px; padding:3px; fill:var(--rt-cream); stroke:var(--rt-ink); stroke-width:2; background:var(--rt-ink); border-radius:7px; }.rt-pause-button { display:grid; place-items:center; width:46px; height:46px; border-radius:15px 13px 14px 12px; padding:0; }.rt-pause-button svg { width:19px; fill:none; stroke:var(--rt-ink); stroke-width:3; stroke-linecap:round; }
.rt-controls { position:absolute; inset:auto max(12px, var(--zone-safe-right, env(safe-area-inset-right))) max(14px, var(--zone-safe-bottom, env(safe-area-inset-bottom))) max(12px, var(--zone-safe-left, env(safe-area-inset-left))); display:flex; justify-content:space-between; align-items:end; opacity:var(--rt-control-opacity); }.rt-steering-hit { width:124px; height:124px; padding:12px; border-radius:50%; pointer-events:auto; touch-action:none; }.rt-steering-base { position:relative; width:100%; height:100%; box-sizing:border-box; border-radius:50%; border:3px solid var(--rt-ink); background:radial-gradient(circle at 36% 30%,#fef9e8 0 16%,var(--rt-yellow) 17% 100%); box-shadow:var(--rt-shadow), inset 0 -8px 0 rgba(150,94,0,.14); }.rt-steering-base::before { content:''; position:absolute; inset:19px; border:3px solid var(--rt-ink); border-radius:50%; }.rt-steering-base i { position:absolute; width:3px; height:23px; border-radius:3px; background:var(--rt-ink); left:calc(50% - 1px); top:10px; transform-origin:50% 44px; }.rt-steering-base i:nth-of-type(2){ transform:rotate(120deg);}.rt-steering-base i:nth-of-type(3){transform:rotate(240deg);}.rt-steering-puck { position:absolute; z-index:2; inset:38px; border:3px solid var(--rt-ink); border-radius:50%; background:var(--rt-cream); box-shadow:0 3px 0 rgba(23,36,59,.24); transition:transform 100ms cubic-bezier(.2,.9,.2,1); }.rt-steering-hit.is-active .rt-steering-puck { transition:none; }.rt-steering-hit.is-active .rt-steering-base { box-shadow:0 3px 0 rgba(16,27,43,.22), inset 0 -6px 0 rgba(150,94,0,.18); }
.rt-left-handed .rt-controls { flex-direction:row-reverse; }.rt-left-handed .rt-pedals { transform:scaleX(-1); }.rt-left-handed .rt-pedals > * { transform:scaleX(-1); }.rt-left-handed .rt-pedals > *.is-active { transform:translateY(5px) scale(.97) scaleX(-1); }
.rt-pedals { width:165px; min-height:156px; position:relative; pointer-events:none; }.rt-control { position:absolute; display:grid; place-items:center; border:2px solid var(--rt-ink); color:var(--rt-ink); font-family:inherit; font-weight:900; box-shadow:var(--rt-shadow); transition:transform 80ms ease, filter 160ms ease, opacity 160ms ease; }.rt-control.is-active { transform:translateY(5px) scale(.97); box-shadow:0 2px 0 rgba(16,27,43,.2); }.rt-drive { right:0; bottom:0; width:92px; height:94px; border-radius:28px 22px 25px 20px; background:var(--rt-sky); font-size:17px; overflow:hidden; }.rt-drive i { position:absolute; inset:auto 13px 11px; height:4px; border-radius:4px; background:rgba(23,36,59,.3); }.rt-drive::after { content:''; position:absolute; inset:5px 8px auto; height:14px; border-radius:12px; background:rgba(255,255,255,.32); }.rt-brake { right:96px; bottom:0; width:70px; height:72px; border-radius:20px 17px 19px 14px; background:var(--rt-coral); font-size:11px; }.rt-brake small { font-size:8px; }.rt-drift { right:104px; bottom:80px; width:60px; height:56px; border-radius:17px 20px 15px 18px; background:var(--rt-cream); font-size:10px; }.rt-drift.is-ready { background:var(--rt-mint); }.rt-boost { right:35px; bottom:100px; width:60px; height:58px; border-radius:50% 46% 50% 44%; background:var(--rt-cream); font-size:9px; overflow:hidden; }.rt-boost-ring { position:absolute; inset:3px; border:4px solid rgba(87,185,232,.22); border-top-color:var(--rt-sky); border-radius:inherit; transform:rotate(calc(var(--rt-speed) * 360deg)); }.rt-boost.is-ready { background:var(--rt-yellow); }.rt-is-boosting .rt-boost { background:var(--rt-sky); animation:rt-boost-stretch 180ms ease-out; }.rt-auto-accelerate .rt-drive { opacity:.48; pointer-events:none; }.rt-auto-accelerate .rt-drive span::after { content:'AUTO'; display:block; font-size:9px; }.rt-world-feedback { position:fixed; z-index:705; padding:5px 9px; border:2px solid var(--rt-ink); border-radius:12px 10px 12px 8px; background:var(--rt-cream); box-shadow:0 4px 0 rgba(16,27,43,.18); color:var(--rt-ink); font-weight:900; font-size:11px; opacity:0; transition:opacity 160ms ease; pointer-events:none; white-space:nowrap; }.rt-world-feedback.is-visible { opacity:1; }.rt-world-feedback[data-kind="warning"] { background:var(--rt-coral); }.rt-world-feedback[data-kind="celebrate"] { background:var(--rt-mint); }
.rt-map-sheet,.rt-pause-sheet,.rt-settings-sheet,.rt-completion-sheet { position:fixed; inset:0; z-index:720; display:none; place-items:center; padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:rgba(15,27,47,.38); backdrop-filter:blur(5px); pointer-events:auto; }.rt-map-sheet.is-open,.rt-pause-sheet.is-open,.rt-settings-sheet.is-open,.rt-completion-sheet.is-open { display:grid; }.rt-map-sheet { grid-template-rows:auto minmax(0,1fr) auto; background:rgba(255,244,220,.94); }.rt-map-sheet header,.rt-settings-sheet header { width:min(100%,450px); display:flex; align-items:center; justify-content:space-between; }.rt-map-sheet header b { font-size:20px; }.rt-map-sheet button,.rt-settings-sheet [data-rt-close] { width:44px;height:44px;border:2px solid var(--rt-ink);border-radius:14px;background:var(--rt-yellow); }.rt-map-sheet button svg,.rt-settings-sheet button svg {width:19px;fill:none;stroke:var(--rt-ink);stroke-width:3;}.rt-large-map-host { width:min(100%,460px); aspect-ratio:1; margin:auto; overflow:hidden; border:3px solid var(--rt-ink); border-radius:26px 20px 24px 19px; box-shadow:var(--rt-shadow); background:#b5d49d; }.rt-large-map-host canvas { width:100%!important; height:100%!important; display:block; }.rt-map-landmark { font-weight:800; }.rt-sheet-card { width:min(100%,390px); box-sizing:border-box; padding:24px; border:3px solid var(--rt-ink); border-radius:28px 21px 25px 18px; background:var(--rt-cream); box-shadow:0 10px 0 rgba(16,27,43,.24),0 24px 40px rgba(16,27,43,.25); }.rt-sheet-card h2 { margin:7px 0; font:900 28px/1 ui-rounded,Inter,sans-serif; }.rt-sheet-card p { margin:0 0 22px; color:#516278; }.rt-sticker { display:inline-block; padding:5px 8px; border:2px solid var(--rt-ink); border-radius:7px 9px 6px 8px; background:var(--rt-yellow); font-size:10px; font-weight:900; transform:rotate(-3deg); }.rt-sheet-card > button:not([data-rt-close]),.rt-sheet-card>a { display:flex; width:100%; box-sizing:border-box; min-height:48px; align-items:center; justify-content:center; margin-top:9px; border:2px solid var(--rt-ink); border-radius:15px 12px 14px 10px; background:var(--rt-cream); color:var(--rt-ink); font:800 14px/1 inherit; text-decoration:none; }.rt-sheet-card .rt-resume,.rt-completion-choose { background:var(--rt-sky)!important; }.rt-completion-sheet { z-index:730; background:rgba(23,36,59,.5); }.rt-completion-gift { background:var(--rt-yellow)!important; }.rt-settings-sheet .rt-sheet-card { max-height:min(78dvh,670px); overflow:auto; }.rt-settings-sheet label:not(.rt-switch) { display:grid; grid-template-columns:1fr 150px; gap:12px; align-items:center; min-height:50px; font-size:13px; font-weight:800; }.rt-settings-sheet input[type="range"] { accent-color:var(--rt-sky); }.rt-switch { display:grid; grid-template-columns:1fr 46px; align-items:center; min-height:52px; font-size:13px; font-weight:800; }.rt-switch input { opacity:0; position:absolute; }.rt-switch i { width:42px;height:24px;border:2px solid var(--rt-ink);border-radius:99px;background:#d6dce0;position:relative; }.rt-switch i::after { content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border:2px solid var(--rt-ink);border-radius:50%;background:var(--rt-cream);transition:transform 160ms ease; }.rt-switch input:checked+i{background:var(--rt-mint)}.rt-switch input:checked+i::after{transform:translateX(17px)}
@keyframes rt-boost-stretch { 50% { transform:scale(1.1, .9); } }
@media (max-width:374px) { .rt-top-hud{grid-template-columns:72px minmax(0,1fr) 102px;gap:5px}.rt-speedo{width:72px;height:66px}.rt-speed-value{font-size:29px}.rt-map-button{width:70px;height:70px}.rt-pause-button{width:40px;height:40px}.rt-steering-hit{width:108px;height:108px}.rt-pedals{width:150px;transform:scale(.9);transform-origin:bottom right}.rt-route-name{font-size:12px}.rt-route-meta{font-size:11px} }
@media (orientation:landscape) and (max-height:600px) { .rt-top-hud{grid-template-columns:76px minmax(0,1fr) 108px}.rt-speedo{height:64px}.rt-map-button{width:64px;height:64px}.rt-controls{bottom:max(6px,var(--zone-safe-bottom,env(safe-area-inset-bottom)))}.rt-steering-hit{width:96px;height:96px}.rt-pedals{transform:scale(.82);transform-origin:bottom right}.rt-route-sign{min-height:38px}.rt-route-sign:not(.is-collapsed) .rt-route-meta{display:none} }
@media (min-width:901px) { .rt-top-hud{grid-template-columns:90px minmax(240px,420px) 142px;max-width:740px}.rt-route-sign{justify-self:start}.rt-controls{max-width:680px}.rt-steering-hit{width:132px;height:132px}.rt-pedals{width:176px}.rt-map-button{width:84px;height:84px} }
@media (prefers-reduced-motion: reduce) { #roadtrip-hud *, #roadtrip-hud *::before, #roadtrip-hud *::after { animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; scroll-behavior:auto!important; } }
.rt-reduced-motion *, .rt-reduced-motion *::before,.rt-reduced-motion *::after { animation-duration:1ms!important; transition-duration:1ms!important; scroll-behavior:auto!important; }

/* Gameplay-first Roadtrip Rally: compact physical instruments deliberately
   leave the middle of a phone open for the road, racer, and landmarks. */
.rt-top-hud { inset:max(10px,var(--zone-safe-top,env(safe-area-inset-top))) max(10px,var(--zone-safe-right,env(safe-area-inset-right))) auto max(10px,var(--zone-safe-left,env(safe-area-inset-left))); grid-template-columns:76px minmax(0,1fr) 122px; gap:7px; }
.rt-speedo { position:relative; width:76px; height:76px; padding:4px; border-radius:50%; display:grid; place-items:center; background:var(--rt-ink); }
.rt-speed-dial { position:relative; display:grid; width:64px; height:64px; place-items:center; align-content:center; gap:0; border:2px solid var(--rt-cream); border-radius:50%; background:conic-gradient(from 220deg,var(--rt-yellow) 0deg 54deg,var(--rt-coral) 54deg 94deg,rgba(255,244,220,.28) 94deg 230deg,transparent 230deg); overflow:hidden; }
.rt-speed-dial::before { content:''; position:absolute; inset:7px; border-radius:50%; background:var(--rt-ink); }.rt-speed-value,.rt-speed-unit { position:relative; z-index:1; }.rt-speed-value { font-size:29px; color:var(--rt-cream); }.rt-speed-unit { font-size:8px; color:var(--rt-cream); margin:0; }.rt-speed-meta { position:absolute; top:56px; left:5px; right:5px; padding:0; border:0; color:var(--rt-cream); font-size:8px; }.rt-surface { display:none; }.rt-gear { min-width:29px; height:13px; padding:0 3px; border:1px solid var(--rt-cream); border-radius:4px; color:var(--rt-ink); background:var(--rt-cream); font-size:6px; letter-spacing:.02em; }
.rt-route-sign { position:relative; width:min(100%,224px); min-height:46px; padding:7px 9px; gap:7px; }.rt-route-sign::before { bottom:-7px; width:10px; height:10px; }.rt-route-arrow svg { width:18px; }.rt-route-copy { gap:2px; }.rt-route-name { font-size:13px; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.rt-route-meta { font-size:10px; }.rt-route-sign.is-collapsed { min-height:31px; width:auto; padding:5px 8px; }.rt-route-sign.is-collapsed .rt-route-name { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.rt-map-actions { gap:5px; }.rt-map-button { width:66px; height:66px; border-radius:20px 16px 19px 15px; }.rt-map-host { border-radius:15px 12px 15px 11px; }.rt-map-button>svg { right:2px; bottom:2px; width:16px; }.rt-pause-button { width:44px; height:44px; }.rt-pause-button svg { width:18px; }
.rt-controls { inset:auto max(9px,var(--zone-safe-right,env(safe-area-inset-right))) max(9px,var(--zone-safe-bottom,env(safe-area-inset-bottom))) max(9px,var(--zone-safe-left,env(safe-area-inset-left))); }.rt-steering-hit { width:116px; height:116px; padding:10px; }.rt-steering-base::before { inset:18px; }.rt-steering-base i { height:21px; top:9px; transform-origin:50% 40px; }.rt-steering-puck { inset:35px; }
.rt-pedals { width:154px; min-height:142px; }.rt-drive { width:88px; height:88px; font-size:16px; }.rt-brake { right:91px; width:64px; height:68px; font-size:10px; }.rt-drift { right:94px; bottom:75px; width:56px; height:52px; font-size:9px; }.rt-boost { right:29px; bottom:90px; width:54px; height:53px; font-size:8px; }.rt-boost-ring { border:0; background:conic-gradient(var(--rt-sky) calc(var(--rt-boost-charge,1) * 1turn),rgba(23,36,59,.14) 0); -webkit-mask:radial-gradient(transparent 57%,#000 59%); mask:radial-gradient(transparent 57%,#000 59%); transform:rotate(-90deg); }.rt-boost.is-empty { filter:saturate(.35); opacity:.67; }.rt-is-boosting .rt-boost-ring { background:conic-gradient(var(--rt-cream) calc(var(--rt-boost-charge,1) * 1turn),rgba(23,36,59,.2) 0); }

/* First-drive coaching is a roadside caption. The route sign already names
   the destination, so this only needs to teach the immediate action. */
.rt-coach { position:fixed; z-index:706; top:calc(max(10px,var(--zone-safe-top,env(safe-area-inset-top))) + 82px); left:50%; display:grid; grid-template-columns:auto minmax(0,1fr) 44px; align-items:center; gap:1px 5px; width:min(232px,calc(100vw - 44px)); box-sizing:border-box; padding:3px 4px; border:2px solid var(--rt-ink); border-radius:12px 9px 13px 8px; background:var(--rt-cream); box-shadow:0 3px 0 rgba(16,27,43,.17),0 7px 14px rgba(16,27,43,.1); color:var(--rt-ink); transform:translateX(-50%); pointer-events:auto; }
.rt-coach[hidden] { display:none; }.rt-coach-step { grid-row:1/3; align-self:center; padding:3px; border-radius:5px 4px 5px 4px; background:var(--rt-yellow); font-size:8px; font-weight:900; white-space:nowrap; }.rt-coach-title { min-width:0; font-size:11px; line-height:1.05; }.rt-coach-copy { min-width:0; color:#516278; font-size:9px; line-height:1.1; }.rt-coach-skip { grid-row:1/3; grid-column:3; display:grid; width:44px; min-height:44px; place-items:center; padding:0; border:1px solid var(--rt-ink); border-radius:7px 5px 7px 5px; background:transparent; color:var(--rt-ink); }.rt-coach-skip svg { width:13px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
@media (max-width:374px) { .rt-coach { top:calc(max(8px,var(--zone-safe-top,env(safe-area-inset-top))) + 82px); width:min(254px,calc(100vw - 36px)); padding:7px; } }
@media (orientation:landscape) and (max-height:600px) { .rt-coach { top:auto; bottom:8px; left:50%; width:250px; transform:translateX(-50%); } }
/* Expanded map is a destination, not a translucent blank modal. */
.rt-map-sheet { padding:clamp(18px,4vh,34px) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:#fff4dc; backdrop-filter:none; }
.rt-map-sheet::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.28; background:radial-gradient(circle at 12% 8%,#ffc94b 0 2px,transparent 3px) 0 0/31px 31px,linear-gradient(145deg,rgba(87,185,232,.12),transparent 42%); }
.rt-map-sheet header,.rt-map-sheet .rt-large-map-host,.rt-map-sheet .rt-map-landmark { position:relative; z-index:1; width:min(100%,620px); }
.rt-map-sheet header { margin:auto; padding:0 0 14px; }.rt-map-sheet header div { display:grid; gap:2px; }.rt-map-sheet header b { font-size:clamp(24px,6vw,34px); letter-spacing:-.04em; }.rt-map-kicker { color:#466078; font-size:10px; font-weight:900; letter-spacing:.13em; }
.rt-large-map-host { width:min(100%,620px); aspect-ratio:1; background:#b9d99c; border-radius:28px 22px 30px 20px; box-shadow:0 9px 0 rgba(23,36,59,.18),0 24px 42px rgba(23,36,59,.18); }
.rt-large-map { width:100%; height:100%; display:block; }.rt-map-you { position:absolute; left:50%; top:50%; transform:translate(-50%,24px); padding:3px 6px; border:1px solid var(--rt-ink); border-radius:7px; background:var(--rt-cream); color:var(--rt-ink); font-size:9px; font-weight:900; box-shadow:0 2px 0 rgba(23,36,59,.16); pointer-events:none; }
.rt-map-landmark { margin:14px auto 0; color:#466078; font-size:14px; text-align:center; }
@media (max-width:600px) { .rt-map-sheet { align-content:start; grid-template-rows:auto auto auto; }.rt-large-map-host { margin:0 auto; width:calc(100vw - 42px); max-height:none; aspect-ratio:1; height:auto; }.rt-map-sheet header b { font-size:28px; }.rt-map-landmark { min-height:20px; margin-top:10px; } }
@media (max-width:374px) { .rt-top-hud { grid-template-columns:68px minmax(0,1fr) 106px; gap:4px; }.rt-speedo { width:68px; height:68px; }.rt-speed-dial { width:57px; height:57px; }.rt-speed-value { font-size:26px; }.rt-map-button { width:62px; height:62px; }.rt-pause-button { width:40px; height:40px; }.rt-steering-hit { width:106px; height:106px; }.rt-pedals { transform:scale(.88); transform-origin:bottom right; } }

/* Desktop is a keyboard/controller drive surface, not an enlarged phone. */
.rt-desktop-keys { display:none; }
@media (min-width:901px) {
    .rt-controls { display:none; }
    .rt-desktop-keys { position:absolute; right:24px; bottom:20px; display:flex; align-items:center; gap:6px; max-width:360px; flex-wrap:wrap; justify-content:flex-end; color:var(--rt-cream); font-size:10px; font-weight:900; text-shadow:0 1px 2px rgba(15,27,47,.45); pointer-events:none; }
    .rt-keycap { display:grid; min-width:22px; height:22px; box-sizing:border-box; place-items:center; padding:0 5px; border:1px solid rgba(255,244,220,.78); border-bottom-width:3px; border-radius:6px 5px 7px 5px; background:rgba(23,36,59,.72); box-shadow:0 2px 8px rgba(15,27,47,.2); letter-spacing:.02em; }
    .rt-keycap-wide { margin-right:5px; border-color:transparent; border-bottom-width:1px; background:transparent; box-shadow:none; color:rgba(255,244,220,.92); font-size:9px; }
}

/* Resting controls should preserve their generous invisible touch zones
   without forming a second dark foreground scene. Reserve the deeper press
   treatment for active input, readiness, and boost fire. */
.rt-control { box-shadow:0 3px 0 rgba(16,27,43,.18),0 7px 14px rgba(16,27,43,.12); }
.rt-steering-base { box-shadow:0 4px 0 rgba(16,27,43,.18),0 8px 16px rgba(16,27,43,.12),inset 0 -6px 0 rgba(150,94,0,.12); }
.rt-speedo,.rt-route-sign,.rt-map-button,.rt-pause-button { box-shadow:0 3px 0 rgba(16,27,43,.18),0 7px 14px rgba(16,27,43,.11); }
.rt-drift:not(.is-ready),.rt-boost:not(.is-ready):not(.is-empty) { background:#fff8e7; color:rgba(23,36,59,.84); }
.rt-drift:not(.is-ready),.rt-boost:not(.is-ready) { box-shadow:0 2px 0 rgba(16,27,43,.15),0 5px 10px rgba(16,27,43,.1); }