/* Thumb controls stay clear of the racing line and respect phone safe areas. */
.touch-controls { display: none; }
body.touch-driving { --touch-bottom: max(22px, env(safe-area-inset-bottom)); --touch-left: max(18px, env(safe-area-inset-left)); --touch-right: max(18px, env(safe-area-inset-right)); }
body.touch-driving:not(.intro):not(.inspect):not(.race-finished) .touch-controls { display: block; }
.touch-controls { position: fixed; inset: 0; z-index: 4; pointer-events: none; user-select: none; -webkit-user-select: none; }
.touch-controls button, .steering-wheel { touch-action: none; -webkit-touch-callout: none; pointer-events: auto; }
.steering-cluster { position: absolute; left: var(--touch-left); bottom: var(--touch-bottom); width: 136px; text-align: center; }
.steering-wheel { position: relative; width: 136px; height: 136px; border-radius: 50%; background: radial-gradient(circle, #162f3999 20%, #243d4299 58%, #12222ee0); border: 1px solid #f1ffe55c; box-shadow: 0 5px 22px #00151d40, inset 0 1px 2px #ffffff35; }
.wheel-rotor { position: absolute; inset: 12px; border: 9px solid #dcebcaaa; border-radius: 50%; box-shadow: inset 0 0 0 2px #152932, 0 0 0 2px #152932; transition: transform .16s ease-out; pointer-events: none; }
.held .wheel-rotor { transition: none; border-color: #dcf597; }
.wheel-rotor::before { content: ''; position: absolute; left: calc(50% - 3px); top: -9px; width: 6px; height: 13px; background: #e6ffa3; border-radius: 2px; }
.wheel-spoke { position: absolute; width: 38px; height: 8px; background: #dcebcaaa; left: 50%; top: calc(50% - 4px); transform-origin: 0 50%; }
.wheel-spoke:nth-child(1) { transform: rotate(0deg); }.wheel-spoke:nth-child(2) { transform: rotate(90deg); }.wheel-spoke:nth-child(3) { transform: rotate(180deg); }
.wheel-hub { position: absolute; inset: 31px; border-radius: 50%; display: grid; place-items: center; background: #263d43; border: 1px solid #e8f5d45c; font-size: 10px; letter-spacing: 1px; }
.wheel-caption { display: block; margin-top: 8px; font-size: 10px; color: #ecf1e3bf; text-shadow: 0 1px 4px #102520; }
.auto-throttle { min-height: 44px; padding: 6px 11px; margin-bottom: 9px; border-radius: 24px; background: #182c32c9; font-size: 10px; }.auto-throttle strong { color: #dbf692; margin-left: 7px; }.auto-throttle[aria-pressed="false"] strong { color: #d5dfe4; }
.touch-pedals { position: absolute; right: var(--touch-right); bottom: var(--touch-bottom); display: flex; gap: 7px; align-items: flex-end; }
.touch-pedals button { width: 51px; height: 68px; padding: 0; border-radius: 17px; background: linear-gradient(155deg, #324c4bdd, #13272ae8); border: 1px solid #d9e7c77a; box-shadow: inset 0 1px 2px #ffffff38, 0 4px 14px #0f25274d; font-size: 12px; font-weight: 700; }.touch-pedals button small { display: block; font-size: 8px; font-weight: 400; opacity: .66; margin-top: 6px; }
.touch-pedals [data-drive="drift"] { height: 82px; width: 62px; color: #e6f7ae; border-color: #d1ec99a1; }.touch-pedals button.held { background: #d5ef94; color: #143532; border-color: #efffc9; transform: translateY(2px); }
body.touch-driving .controls, body.touch-driving .bottom-note, body.touch-driving .leaderboard { display: none; }body.touch-driving #game { touch-action: none; }
body.touch-driving .boost-controls { bottom: calc(var(--touch-bottom) + 102px); right: var(--touch-right); gap: 14px; z-index: 5; touch-action: none; user-select: none; -webkit-user-select: none; }
body.touch-driving .boost-controls > button { width: 72px; height: 72px; touch-action: none; }body.touch-driving .boost-controls #miniBoost { width: 62px; height: 62px; }
body.touch-driving .boost-controls kbd, body.touch-driving .boost-controls > small { display: none; }body.touch-driving .boost-controls button b { font-size: 23px; }body.touch-driving .boost-controls #miniBoost b { font-size: 17px; }
body.touch-driving .dash { bottom: calc(var(--touch-bottom) + 235px); left: 50%; transform: translateX(-50%); width: 156px; pointer-events: none; }body.touch-driving #speed { font-size: 48px; letter-spacing: -3px; }body.touch-driving .unit { font-size: 9px; }body.touch-driving .unit small, body.touch-driving #state { display: none; }body.touch-driving .nitro { margin-top: 3px; }body.touch-driving #miniHint { font-size: 9px; white-space: nowrap; margin-top: 6px; }
body.touch-driving #notice { max-width: 90%; padding: 10px 14px; text-align: center; font-size: 11px; z-index: 6; }body.race-finished .boost-controls { display: none; }
body.touch-driving header { top: max(12px, env(safe-area-inset-top)); left: var(--touch-left); right: var(--touch-right); gap: 8px; }body.touch-driving nav { gap: 4px; }body.touch-driving nav button { min-height: 44px; padding: 7px; font-size: 10px; }
body.touch-driving nav kbd, body.touch-driving .brandmark, body.touch-driving .brand small, body.touch-driving #view { display: none; }body.touch-driving .brand b { font-size: 12px; letter-spacing: 1px; }
body.touch-driving .session { top: calc(max(12px, env(safe-area-inset-top)) + 52px); left: var(--touch-left); font-size: 9px; }body.touch-driving .race-info { top: calc(max(12px, env(safe-area-inset-top)) + 103px); left: var(--touch-left); transform: none; }
body.touch-driving .map-panel { top: calc(max(12px, env(safe-area-inset-top)) + 62px); right: var(--touch-right); width: 132px; }body.touch-driving .map-panel canvas { width: 120px; height: 54px; }
body.touch-driving #welcome small { line-height: 1.8; opacity: .9; }
@media (max-width: 370px) {
  body.touch-driving { --touch-left: max(10px, env(safe-area-inset-left)); --touch-right: max(10px, env(safe-area-inset-right)); }
  .steering-cluster, .steering-wheel { width: 126px; }.steering-wheel { height: 126px; }.wheel-hub { inset: 27px; }
  .touch-pedals { gap: 5px; }.touch-pedals button { width: 47px; }.touch-pedals [data-drive="drift"] { width: 57px; }body.touch-driving .session #cameraLabel { display: none; }
}
@media (orientation: landscape) and (max-height: 600px) {
  body.touch-driving { --touch-bottom: max(14px, env(safe-area-inset-bottom)); }
  body.touch-driving .dash { bottom: calc(var(--touch-bottom) + 10px); width: 156px; }
  body.touch-driving .race-info { top: max(12px, env(safe-area-inset-top)); left: 45%; transform: translateX(-50%); }
  body.touch-driving .race-info > div:first-child > b { font-size: 28px; }body.touch-driving .race-lap strong { font-size: 12px; }
  body.touch-driving .map-panel { display: none; }body.touch-driving .session { top: calc(max(12px, env(safe-area-inset-top)) + 49px); }body.touch-driving #notice { top: 22%; }
  body.touch-driving #welcome { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 350px; max-width: 90%; padding: 16px 22px; }body.touch-driving #countdown { font-size: 78px; }
}
@media (prefers-reduced-motion: reduce) { .wheel-rotor { transition: none; } }