#rotatePhone{display:none}#touchControls{position:absolute;inset:0;pointer-events:none;z-index:5;-webkit-user-select:none;user-select:none}#touchControls button{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;background:#142822bd;border:1px solid #bad1b575;color:#f2f3df;box-shadow:0 4px 12px #0004;min-height:42px}#touchControls button.held{background:#e8ce58dd;color:#182820;border-color:#f9e68c;transform:scale(.97)}.touch-steering,.touch-pedals{position:absolute;display:flex;gap:12px;bottom:max(12px,env(safe-area-inset-bottom))}.touch-steering{left:max(12px,env(safe-area-inset-left))}.touch-pedals{right:max(12px,env(safe-area-inset-right))}.touch-steering button{width:64px;height:64px;border-radius:50%;font-size:24px;padding:0}.touch-pedals button{width:66px;height:74px;border-radius:15px;padding:8px 3px}.touch-pedals span{display:block;font-size:28px;line-height:32px}.touch-pedals small{font-size:8px;letter-spacing:.3px}.touch-pedals .touch-gas{background:#c9b650b0;border-color:#f3da65}#touchHandbrake{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:100px;font-size:8px;padding:8px 10px;min-height:36px!important;border-radius:15px}#touchReverse{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:88px;padding:8px 13px;font-size:9px;min-height:34px!important;border-radius:15px}.touch-toolbar{position:absolute;display:flex;gap:6px;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%)}.touch-toolbar button{font-size:9px;padding:7px 10px;border-radius:12px}.touch-toolbar .tour-badge{font-size:8px;padding:6px 8px}
.touch-device{overscroll-behavior:none;-webkit-user-select:none;user-select:none}.touch-device footer,.touch-device #cameraTools{display:none}.touch-device #menu{padding:16px max(24px,env(safe-area-inset-left))}.touch-device #menu article{width:300px;margin-block:auto}.touch-device #menu .opening-brand{width:220px;margin:0 0 8px}.touch-device .opening-brand figcaption{font-size:10px;line-height:1.4;margin-top:-7px}.touch-device #menu article>small,.touch-device #menu article>a{display:none}.touch-device #menu button{font-size:11px;padding:11px;margin:7px 0}.touch-device header{top:12px;left:max(12px,env(safe-area-inset-left));right:12px}.touch-device .wordmark{font-size:16px}.touch-device .wordmark span{font-size:7px;letter-spacing:1px}.touch-device .session{display:none}.touch-device #mapcard{left:12px;top:58px;width:108px;border-radius:7px}.touch-device #map{height:100px}.touch-device .maplabel,.touch-device .maptitle{display:none}.touch-device #timing{right:12px;top:10px;min-width:114px;padding:8px 10px}.touch-device #timing>div{font-size:8px;letter-spacing:1px}.touch-device #timing>div b{font-size:11px}.touch-device #timer{font-size:17px;margin:5px 0}.touch-device #timing>span{font-size:7px}.touch-device #valid{display:none}.touch-device #fuelGauge{top:98px;right:12px;width:114px;padding:8px 10px}.touch-device #fuelVolume{font-size:15px}.touch-device #fuelStatus{font-size:7px;letter-spacing:0}.touch-device #fuelBar{margin:4px 0;height:10px}.touch-device #telemetry{right:158px;bottom:100px;width:100px;padding:9px;border-radius:7px}.touch-device .speed strong{font-size:31px;letter-spacing:-1px}.touch-device .speed span{font-size:7px}.touch-device .speed b{font-size:12px;padding:4px 5px}.touch-device #telemetry .sensors,.touch-device #surface{display:none}.touch-device #telemetry .bar{margin:7px 0 0}.touch-device #status{top:48px;max-width:55vw;font-size:9px;text-align:center;padding:7px 12px}.touch-device #immersiveHud{left:128px;top:60px;bottom:auto;width:126px;padding:8px}.touch-device .imm-brand{font-size:8px;letter-spacing:0}.touch-device .imm-brand span{font-size:7px;letter-spacing:.5px}.touch-device .imm-meters{gap:7px;margin-top:8px}.touch-device .imm-meters span{font-size:6px}.touch-device .imm-meters b{font-size:12px}.touch-device #immAlert:not(:empty){font-size:8px;line-height:1.4}.touch-device #immersivePanel{left:50%;right:auto;top:58px;bottom:auto;transform:translateX(-50%);width:min(340px,calc(100vw - 290px));max-height:calc(100dvh - 155px);padding:14px;border-radius:12px}.touch-device #immersivePanel h2{font-size:22px;margin:8px 0}.touch-device #immersivePanel p{font-size:11px;line-height:1.45;margin:8px 0}.touch-device #immersivePanel button{font-size:11px;padding:10px;margin:7px 0}.touch-device #immersivePanel .imm-eyebrow{font-size:8px}.touch-device #immersivePanel small{font-size:9px}.touch-device #immersivePanel .imm-cash{font-size:27px}.touch-device #immersivePanel.social-explore{left:auto;right:12px;transform:none;width:260px;max-height:calc(100dvh - 145px)}.touch-device #immersivePanel.social-dialogue{transform:none;width:290px;max-width:calc(100vw - 180px);max-height:calc(100dvh - 145px);padding:12px}.touch-device .social-person{margin-bottom:12px;gap:8px}.touch-device .social-avatar{width:30px;height:30px;font-size:18px}.touch-device #immersivePanel .social-person h2{font-size:15px}.touch-device .speech-bubble{padding:12px;font-size:11px}.touch-device .social-prompt{margin:13px 0 8px}.touch-device #immersivePanel .social-choices button{padding:8px}.touch-device #immersivePanel .social-choices small{font-size:10px;-webkit-line-clamp:2}.touch-device #settings{max-height:96dvh;width:94vw}.touch-device .settings-shell{max-height:94dvh}.touch-device .settings-header{padding:12px 20px}.touch-device .settings-header h2{font-size:23px}.touch-device .settings-mark{width:42px;height:42px;font-size:26px}.touch-device .settings-body{min-height:0;grid-template-columns:150px 1fr}.touch-device .settings-tabs{padding:14px 10px}.touch-device .settings-tabs p{display:none}.touch-device .settings-content{padding:18px 22px}.touch-device .settings-footer{padding:10px 20px}.touch-device .settings-footer button{padding:10px 15px}.touch-device #dqScreen>div{max-width:46vw;left:5vw}.touch-device #dqScreen h2{font-size:30px;letter-spacing:-1px;margin:10px 0}.touch-device #dqScreen p{font-size:23px;margin:10px 0}.touch-device #dqScreen small{font-size:10px;margin:12px 0}.touch-device.disqualified-scene #touchControls{display:none!important}
@media(orientation:portrait){.touch-device #rotatePhone{display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;flex-direction:column;background:#0a201b;color:#f1d35e;text-align:center;padding:30px}.touch-device #rotatePhone h2{font-size:28px;margin:30px 0 4px}.touch-device #rotatePhone p{font-size:14px;color:#b8cfbf}.phone-outline{width:105px;height:60px;border:3px solid #dfc25b;border-radius:12px;font-size:43px;line-height:52px}.touch-device #touchControls{visibility:hidden}}
@media(max-width:740px) and (orientation:landscape){.touch-device #immersiveHud{display:none}.touch-device #telemetry{right:12px;bottom:145px}.touch-toolbar{gap:4px}.touch-toolbar button{font-size:8px;padding:6px}.touch-device #touchFullscreen{display:none}.touch-device #immersivePanel{width:calc(100vw - 275px)}.touch-device #immersivePanel.social-explore{width:235px}.touch-device #settings .settings-body{display:grid;grid-template-columns:120px 1fr}.touch-device #settings .settings-tabs{display:block}.touch-device #settings .settings-tabs button{justify-content:flex-start;margin-bottom:7px}.touch-device #settings .settings-content{padding:15px}.touch-device #settings .choices{flex-direction:row}.touch-device .settings-content h3{font-size:20px}}

.touch-guide{display:none}.touch-device .touch-guide{display:block}.touch-device #settings-controls .key-guide,.touch-device #settings-controls>.settings-note{display:none}.touch-device #menu{background-image:linear-gradient(90deg,#060f0ff7,#060f0fde 26%,#060f0f48 48%,transparent 68%),url("./assets/abertura/abertura_stevan_opala99.jpg?v=20261002-omp-q6");background-size:cover;background-position:center}

html,body{width:100%;height:100%;overflow:hidden}#view{position:fixed;inset:0;width:100%;height:100%}#dqScreen,#touchControls{position:fixed}.touch-device{-webkit-text-size-adjust:100%;text-size-adjust:100%}.touch-device.podium-scene #immersivePanel{left:auto;right:12px;top:55px;bottom:12px;transform:none;width:260px;max-height:calc(100dvh - 67px)}

/* Left thumb steers; right thumb uses vertically stacked pedals and auxiliary controls. */
/* Where the pads sit (players' report: curling a thumb toward the palm, steering left or braking, hurt after an hour): the steering a little in from the left edge, the pedals a little up and in (as in a player's mockup). The ✥ lets each player drag them (mobile-controls.js arrange): its places come inline on #touchControls. */
.touch-device #touchControls{--steer-left:calc(max(32px,env(safe-area-inset-left)) + 28px);--steer-bottom:max(28px,env(safe-area-inset-bottom),min(26dvh,calc(100dvh - 268px)));--pedal-right:calc(max(32px,env(safe-area-inset-right)) + 16px);--pedal-bottom:calc(max(28px,env(safe-area-inset-bottom)) + 24px)}
@supports not (height:1dvh){.touch-device #touchControls{--steer-bottom:max(28px,min(26vh,calc(100vh - 268px)))}}
.touch-device .touch-pedals{left:auto;right:var(--pedal-right);bottom:var(--pedal-bottom);width:84px;height:148px}
.touch-device .touch-steering{left:var(--steer-left);right:auto;bottom:var(--steer-bottom)}
/* No handbrake (nor a RÉ button: the brake backs up) on the phone, except in the Arena de Drift, where it starts the drifts. */
.touch-device #touchHandbrake{left:auto;right:calc(var(--pedal-right) + 96px);width:90px;height:68px;bottom:calc(var(--pedal-bottom) + 80px)}
.touch-device:not(.arena-mode) #touchHandbrake{display:none}
.touch-device #telemetry{left:12px;right:auto;bottom:147px;width:100px}.touch-device #fuelGauge{top:118px}.touch-device #timing .position-row{margin-top:8px}.touch-device #valid:not([hidden]){display:block;font-size:8px;max-width:114px}.touch-device #immAlert{display:none}.touch-device #immersiveHud{top:60px;left:128px;right:auto;width:114px}.touch-device #immersiveHud .imm-meters{gap:10px}.touch-device #immersiveHud .imm-meters b{font-size:12px}
.touch-device.tow-scene #immersivePanel{left:auto;right:12px;top:36px;bottom:auto;transform:none;width:190px;max-height:calc(100dvh - max(28px,env(safe-area-inset-bottom)) - 220px);padding:12px}.touch-device.tow-scene #immersivePanel h2{font-size:17px;margin:5px 0}.touch-device.tow-scene #immersivePanel p{font-size:10px;line-height:1.35;margin:6px 0}.touch-device.tow-scene #immersiveHud,.touch-device.tow-scene #fuelGauge,.touch-device.tow-scene #timing{display:none!important}.touch-device.tow-scene #immersivePanel .imm-eyebrow{font-size:7px}.touch-device #settings .settings-footer>span{display:none}.touch-device #settings .settings-footer{justify-content:flex-end;gap:8px}.touch-device #settings .settings-footer button{font-size:10px;padding:9px}

.touch-device #touchHandbrake{width:90px;padding:5px 7px;line-height:1.3}

#startFullscreen[hidden]{display:none!important}


.touch-device .touch-steering{width:min(210px,calc(50vw - 120px));height:70px}#touchSteering{position:relative;width:100%;height:100%;border:1px solid #d0dca380;border-radius:35px;background:#1428224d;pointer-events:auto;touch-action:none;box-shadow:0 2px 8px #0003;overflow:hidden}
#touchSteering .steer-track{position:absolute;left:22px;right:22px;height:4px;top:33px;background:#e6ecd0a8;border-radius:4px;box-shadow:0 1px 2px #0006}
#touchSteering .steer-track:after{content:'';position:absolute;left:50%;top:-10px;height:24px;width:1px;background:#eef1d8b0}
#steeringThumb{position:absolute;left:50%;top:13px;width:42px;height:42px;transform:translateX(-50%);border-radius:50%;background:#e8ce58;color:#21362b;display:grid;place-items:center;border:2px solid #fff1a5;box-shadow:0 2px 8px #0005}
#steeringThumb svg{width:28px;height:28px;display:block}
#touchSteering.active{border-color:#f5db72;background:#203c3073}

#touchPedals{position:relative;width:100%;height:100%;pointer-events:auto;touch-action:none;border:1px solid #d0dca380;border-radius:20px;background:#1428224d;box-shadow:0 2px 8px #0003;overflow:hidden}
#touchPedals small{position:absolute;left:7px;font-size:8px;font-weight:700;letter-spacing:0;pointer-events:none;text-shadow:0 1px 2px #000c}#touchGasLabel{top:13px;color:#f1dc78}/* FREAR where the red stretch starts (70% of the travel), RÉ at the very bottom: held there through a stop the brake backs up (players' request). */
#touchBrakeLabel{top:calc(22px + (100% - 44px)*.7 - 4px);color:#efb29b}
#touchReverseLabel{bottom:13px;color:#f08f74}
#touchReverseLabel[hidden],#touchReverseDigital[hidden]{display:none}#touchPedals .pedal-track{position:absolute;top:22px;bottom:22px;right:18px;width:5px;border-radius:4px;background:linear-gradient(to bottom,#e8ce5880 0% 60%,#eff2c5 60% 70%,#e7886b99 70% 100%)}#pedalThumb{position:absolute;right:7px;top:89.6px;width:27px;height:30px;transform:translateY(-50%);border-radius:10px;background:#e8ce58;border:1px solid #fff1a5;color:#21362b;font-size:10px;line-height:28px;text-align:center;font-weight:900;pointer-events:none;box-shadow:0 2px 8px #0005}#touchPedals.active{border-color:#f5db72;background:#203c3073}#touchPedals.braking #pedalThumb{background:#efb29b;border-color:#ffd4ba}

/* The horn, held, in the bottom left corner: a short reach down for the steering thumb, under the pad's touch margin and
   left of the bottom bar (which night and rain widen with Faróis and Limpador); not on foot. */
#touchHorn{display:none}.touch-device #touchHorn{display:block;position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));min-width:64px;padding:6px 10px;font-size:8px;border-radius:15px}.touch-device #touchHorn[hidden]{display:none}
/* Held look-back above the handbrake, in the cockpit camera only (main.js sets can-look-back). */
#touchLookBack{display:none}.touch-device.can-look-back #touchLookBack{display:block;position:absolute;right:calc(var(--pedal-right) + 96px);bottom:calc(var(--pedal-bottom) + 160px);width:90px;height:44px;min-height:44px;padding:5px 7px;font-size:8px;border-radius:15px}
@media(max-width:740px) and (orientation:landscape){.touch-device #settings .settings-tabs button{gap:8px;padding-inline:10px}.touch-device #settings .tab-long{display:none}.touch-device #settings .tab-short{display:inline}}
/* Registration with the team at the stand: taller than a supporter's chat (it stays clear of the pedals and the toolbar), compact rows. */
.touch-device #immersivePanel.desk-dialogue{top:36px;max-height:calc(100dvh - 100px)}.touch-device #immersivePanel.desk-dialogue .speech-bubble{display:none}.touch-device #immersivePanel.desk-dialogue .desk-fuel-hint{font-size:9px;margin:2px 0 4px}.touch-device #immersivePanel.desk-dialogue .social-person{margin-bottom:8px}.touch-device #immersivePanel.desk-dialogue .desk-choices{display:grid;grid-template-columns:1fr 1fr;gap:6px}.touch-device #immersivePanel.desk-dialogue .desk-choices button{padding:8px;margin:0;text-align:center;line-height:1.25}.touch-device .imm-budget{font-size:10px;gap:2px 8px;padding:7px 10px;margin:7px 0}.touch-device .imm-budget .imm-budget-cash{font-size:12px}.touch-device .imm-budget .imm-budget-total{padding-top:4px}.touch-device .imm-desk-hint{padding:7px}
/* Engine start in the cockpit: a compact card (steps side by side, a smaller dial). */
.touch-device #immersivePanel.start-panel{top:36px;max-height:calc(100dvh - 100px);padding:10px 12px}.touch-device #immersivePanel.start-panel .imm-eyebrow{display:none}.touch-device #immersivePanel.start-panel h2{font-size:15px;margin:0 0 5px}.touch-device #immersivePanel.start-panel{display:grid;grid-template-columns:140px 1fr;column-gap:10px;align-items:start}.touch-device #immersivePanel.start-panel h2,.touch-device #immersivePanel.start-panel .start-tip{grid-column:1/-1}.touch-device .start-panel .start-gauge{grid-column:1;grid-row:2/5}.touch-device .start-panel .start-steps{grid-column:2;grid-row:2;gap:3px}.touch-device .start-panel .start-meters{grid-column:2;grid-row:3}.touch-device .start-panel .start-buttons{grid-column:2;grid-row:4;margin-top:4px}.touch-device .start-steps li{font-size:9px;padding:4px 5px;gap:4px;line-height:1.2}.touch-device .start-steps li:before{width:14px;height:14px;font-size:8px}.touch-device .start-gauge{max-width:150px;margin-top:2px}.touch-device .start-readout b{font-size:12px}.touch-device .start-readout span{font-size:8px}.touch-device .start-meters{margin:4px 0 2px}.touch-device .start-meters>span{font-size:8px}.touch-device #immersivePanel .start-buttons button{padding:7px 6px;font-size:11px}.touch-device #immersivePanel .start-tip{font-size:9px;margin-top:4px;min-height:0}
/* No pinch or double-tap zoom anywhere on touch devices (panels still scroll); the pads, buttons and the view keep touch-action:none (id rules). */
html:has(body.touch-device),.touch-device,.touch-device *{touch-action:pan-x pan-y}.touch-device input[type=range]{touch-action:none}
/* Narrow phones: the recon badge floats just above the toolbar so the toolbar stays clear of the steering and the RÉ button. */
@media(max-width:740px) and (orientation:landscape){.touch-toolbar .tour-badge{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%)}}

/* Phones (players' request): no track name at the top; the map, the speedometer and the steering pad climb to where the left thumb rests. The map takes the top corner, the speedometer sits under it and the pad under that, at about two thirds of the screen height (never over the speedometer on short screens). */
.touch-device header{display:none}
.touch-device #mapcard{top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}
.touch-device #telemetry{top:calc(max(10px,env(safe-area-inset-top)) + 110px);bottom:auto;left:max(12px,env(safe-area-inset-left))}
.touch-device #status{top:12px}
.touch-device #immersiveHud,.touch-device.immersive-mode.cockpit-mode #immersiveHud{top:max(10px,env(safe-area-inset-top));left:128px;bottom:auto}

/* Leonardo's coffee on phones: both answers fit without scrolling (no prompt line or subtitles). */
.touch-device #immersivePanel.leo-dialogue .social-prompt,.touch-device #immersivePanel.leo-dialogue .social-choices small{display:none}
.touch-device #immersivePanel.leo-dialogue .speech-bubble{padding:9px 12px}
.touch-device #immersivePanel.leo-dialogue .social-choices button{margin:5px 0}
/* The Tia's menu in the paddock: as the team's panel, taller and without the speech bubble or the notes under the items (the prompt says what is in hand). */
.touch-device #immersivePanel.cafe-dialogue{top:36px;max-height:calc(100dvh - 100px)}.touch-device #immersivePanel.cafe-dialogue .speech-bubble{display:none}.touch-device #immersivePanel.cafe-dialogue .social-person{margin-bottom:8px}.touch-device #immersivePanel.cafe-dialogue .social-prompt{margin:6px 0}.touch-device #immersivePanel.cafe-dialogue .social-choices button{margin:5px 0}.touch-device #immersivePanel.cafe-dialogue .social-choices small{display:none}
/* The ghost line on a phone: one short row (its lap on the right, the gap beside it), so the timing panel keeps clear of the fuel gauge. */
.touch-device #ghostInfo{margin-top:5px;font-size:7px;letter-spacing:1px}.touch-device #ghostInfo b{font-size:8px}.touch-device #ghostGap{float:right;clear:none;display:inline;margin:-1px 5px 0 0;font-size:9px;line-height:1}
/* Modo História career cards on a phone: across the middle, over the touch pads, short enough for a landscape screen. */
.touch-device #immersivePanel.career-scene{z-index:6;left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:12px 16px}
.touch-device #immersivePanel.career-scene h2{font-size:17px;margin:4px 0 8px}.touch-device #immersivePanel.career-scene .speech-bubble{padding:9px 12px;font-size:12px}.touch-device #immersivePanel.career-scene p{margin:6px 0}.touch-device #immersivePanel.career-scene button{margin:6px 0}.touch-device #immersivePanel.career-scene small{margin-top:4px}.touch-device #immersivePanel.career-scene .social-choices small{display:none}
.touch-device #immersivePanel.social-explore .career-mini{margin:8px 0;padding:8px 10px}.touch-device #immersivePanel.social-explore .career-goal{display:none}
.touch-device #immersivePanel.social-explore .career-bar{grid-template-columns:46px 1fr 30px;margin:2px 0;font-size:9px}.touch-device #immersivePanel.social-explore .career-wallet b{font-size:15px}
.touch-device #immersivePanel.career-cutscene{z-index:6;left:50%;right:auto;top:auto;bottom:calc(7vh + 50px);transform:translateX(-50%);height:auto;max-height:none;padding:8px 14px 10px;width:min(620px,calc(100vw - 24px))}
/* Over the scene only the menu stays on the touch toolbar, under the subtitle. */
.touch-device.story-cutscene #touchCamera,.touch-device.story-cutscene #touchSkin,.touch-device.story-cutscene #touchGhost,.touch-device.story-cutscene #touchLine,.touch-device.story-cutscene #touchLights,.touch-device.story-cutscene #touchWipers,.touch-device.story-cutscene #touchHorn,.touch-device.story-cutscene #touchReset,.touch-device.story-cutscene #touchArrange,.touch-device.story-cutscene #touchFullscreen{display:none!important}.touch-device #immersivePanel.career-cutscene p{font-size:14px;margin:3px 0 7px}.touch-device #immersivePanel.career-cutscene .cutscene-buttons button{padding:6px 14px;font-size:12px}
.touch-device .map-round{padding:5px 8px 7px;font-size:7px}.touch-device .map-round b{font-size:7px;letter-spacing:.6px}
/* Faróis (headlights.js): only when the weather wants lights (dusk, night, rain: body.lights-weather); lit = active. */
#touchLights{display:none}.touch-device.lights-weather #touchLights{display:inline-block}#touchLights.active{background:#f3e7a6;color:#13201d}
#touchWipers{display:none}.touch-device.rain-weather #touchWipers{display:inline-block}#touchWipers.active{background:#f3e7a6;color:#13201d}


/* Each pad answers a little past its edges (players missed them by a little): an invisible margin on its zone. */
.touch-device .touch-steering,.touch-device .touch-pedals{pointer-events:auto;touch-action:none}
.touch-steering:before,.touch-pedals:before{content:'';position:absolute;pointer-events:auto;border-radius:26px}
.touch-steering:before{inset:-34px -30px}
.touch-pedals:before{inset:-26px -30px}

/* The ✥ that opens the arranging sits on the toolbar beside ⚙ (the user: by the steering, players would tap it by mistake). */
#touchArrange svg{width:14px;height:14px;display:block}
.touch-toolbar button{white-space:nowrap}

/* Arranging: the race waits, the rest of the screen fades under a veil, each pad shows its reach and moves with the finger; the card at the top says what to do. */
#touchControls.arranging{pointer-events:auto;background:#060d0b8c}
.touch-arranging #mapcard,.touch-arranging #telemetry,.touch-arranging #timing,.touch-arranging #fuelGauge,.touch-arranging #immersiveHud,.touch-arranging #status,.touch-arranging #lapBanner,.touch-arranging #raceAction{opacity:.25}
#touchControls.arranging .touch-toolbar,#touchControls.arranging #touchLookBack,#touchControls.arranging #touchHorn,#touchControls.arranging #touchHandbrake,#touchControls.arranging #miniWheel,#touchControls.arranging #miniPedals{opacity:.2;pointer-events:none}
#touchControls.arranging .touch-steering:before,#touchControls.arranging .touch-pedals:before{border:2px dashed #f5db72b8;background:#f5db7214}
#touchControls.arranging .dragging:before{border-style:solid;background:#f5db7226}
#touchControls.arranging #touchSteering,#touchControls.arranging #touchPedals{border-color:#f5db72;box-shadow:0 0 0 1px #f5db7255,0 4px 18px #0007}
#touchArrangePanel{position:absolute;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);width:min(400px,calc(100vw - 300px));min-width:250px;pointer-events:auto;padding:9px 14px 10px;border:1px solid #f5db7290;border-radius:14px;background:#10231ef0;box-shadow:0 8px 30px #0008;text-align:center;color:#f2f3df}
#touchArrangePanel[hidden]{display:none}
#touchArrangePanel b{display:block;font-size:14px;letter-spacing:.3px;color:#f5db72}
#touchArrangePanel p{margin:3px 0 6px;font-size:11px;line-height:1.4;color:#dfe5cf}
#touchArrangePanel div{display:flex;gap:8px;justify-content:center}
#touchControls #touchArrangePanel button{flex:1;min-height:34px;padding:6px 8px;font-size:11px;border-radius:11px}
#touchArrangePanel .arrange-mode{align-items:center;gap:6px;margin-bottom:4px}
#touchArrangePanel .arrange-mode span{font-size:11px;color:#dfe5cf;margin-right:2px;min-width:8.9em;text-align:right;white-space:nowrap}
#touchControls #touchArrangePanel .arrange-mode button{flex:0 0 auto;min-height:28px;padding:4px 12px;border-radius:14px}
#touchControls #touchArrangePanel .arrange-mode button[aria-checked=true]{background:#f5db72;color:#182820;border-color:#f9e68c;font-weight:800}
#touchArrangePanel small{display:block;margin:2px 0 8px;font-size:10px;color:#b9c6b4}
#touchControls #touchArrangePanel #touchArrangeDone{background:#e8ce58;color:#182820;border-color:#f9e68c;font-weight:800}

/* The mini steering wheel by the map (players' request): the car's wheel as turned, the yellow mark at the top when it is straight, the small notch above for the middle. */
#miniWheel{position:absolute;top:max(10px,env(safe-area-inset-top));left:calc(max(12px,env(safe-area-inset-left)) + 114px);width:56px;height:56px;padding:4px;border:1px solid #fff2;border-radius:7px;background:var(--glass);pointer-events:none}
#miniWheel[hidden]{display:none}
#miniWheel svg{display:block;width:100%;height:100%;overflow:visible}
#miniWheel .mini-ref{fill:#ffffffb0}
#miniWheel .mini-rim{fill:none;stroke:#e9edd6;stroke-width:8}
#miniWheel .mini-spokes{fill:none;stroke:#e9edd6;stroke-width:7;stroke-linecap:round}
#miniWheel .mini-hub{fill:#1d2f27;stroke:#e9edd6;stroke-width:4}
#miniWheel .mini-mark{stroke:#f3cf3a;stroke-width:9}
/* (the story's meters move over to make room for it) */
.touch-device #immersiveHud,.touch-device.immersive-mode.cockpit-mode #immersiveHud{left:calc(max(12px,env(safe-area-inset-left)) + 176px)}

/* Its mirror for the pedal, left of the timing (players' request): the pedal's track in small, the thumb where the pedal's sits and the stretch from the coasting zone lit, red while braking (and backing up on the brake). The tow's panel takes that corner. */
#miniPedals{position:absolute;top:max(10px,env(safe-area-inset-top));right:132px;width:34px;height:56px;border:1px solid #fff2;border-radius:7px;background:var(--glass);pointer-events:none}
#miniPedals[hidden],.touch-device.tow-scene #miniPedals{display:none}
#miniPedals .mini-pedal-track{position:absolute;left:50%;top:7px;height:40px;width:5px;margin-left:-2.5px;border-radius:3px;background:linear-gradient(to bottom,#e8ce5866 0% 60%,#eff2c5 60% 70%,#e7886b80 70% 100%)}
#miniPedalFill{position:absolute;left:50%;top:33px;height:0;width:5px;margin-left:-2.5px;border-radius:3px;background:#f3cf3a}
#miniPedals.braking #miniPedalFill{background:#ef8a6c}
#miniPedalThumb{position:absolute;left:50%;top:33px;width:18px;height:9px;margin:-4.5px 0 0 -9px;border-radius:3px;background:#e8ce58;border:1px solid #fff1a5;box-shadow:0 1px 3px #0006}
#miniPedals.braking #miniPedalThumb{background:#efb29b;border-color:#ffd4ba}

/* Digital pedal (chosen in the arranging): two buttons in the pedal's place, ACELERAR above and FREAR below, all or nothing; the pad's own frame steps aside. */
#touchPedals .pedal-digital{display:none}
#touchPedals.digital,#touchPedals.digital.active{background:transparent;border-color:transparent;box-shadow:none}
#touchPedals.digital>small,#touchPedals.digital .pedal-track,#touchPedals.digital #pedalThumb{display:none}
#touchPedals.digital .pedal-digital{display:flex;flex-direction:column;gap:8px;height:100%}
#touchPedals .pedal-digital b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #d0dca380;border-radius:18px;background:#1428224d;box-shadow:0 2px 8px #0003;font-size:9px;font-weight:800;letter-spacing:.3px;color:#f1dc78;text-shadow:0 1px 2px #000c;pointer-events:none}
#touchPedals .pedal-digital b+b{color:#efb29b}
#touchPedals .pedal-digital span{display:inline;font-size:inherit;line-height:1.2}
#touchPedals .pedal-digital small{position:static;font-size:7px;letter-spacing:.3px;opacity:.85}
#touchPedals.gas-held .pedal-digital b:first-child{background:#e8ce58dd;border-color:#f9e68c;color:#182820;text-shadow:none}
#touchPedals.brake-held .pedal-digital b:last-child{background:#efb29bdd;border-color:#ffd4ba;color:#2a1610;text-shadow:none}
#touchControls.arranging #touchPedals.digital .pedal-digital b{border-color:#f5db72}

/* Digital steering (chosen in the arranging; the user, 2026-10-20): two buttons in the steering's place, left and right, all or nothing as the keyboard's arrows; the pad's own frame steps aside. */
#touchSteering .steer-digital{display:none}
#touchSteering.digital,#touchSteering.digital.active{background:transparent;border-color:transparent;box-shadow:none}
#touchSteering.digital .steer-track,#touchSteering.digital #steeringThumb{display:none}
#touchSteering.digital .steer-digital{display:flex;gap:8px;height:100%}
#touchSteering .steer-digital b{flex:1;display:grid;place-items:center;border:1px solid #d0dca380;border-radius:35px;background:#1428224d;box-shadow:0 2px 8px #0003;color:#f1dc78;pointer-events:none}
#touchSteering .steer-digital svg{display:block;width:24px;height:24px;filter:drop-shadow(0 1px 2px #000c)}
#touchSteering.left-held .steer-digital b:first-child,#touchSteering.right-held .steer-digital b:last-child{background:#e8ce58dd;border-color:#f9e68c;color:#182820}
#touchControls.arranging #touchSteering.digital .steer-digital b{border-color:#f5db72}