#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. */
.touch-device .touch-pedals{left:auto;right:max(32px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));width:84px;height:148px}.touch-device .touch-steering{left:max(32px,env(safe-area-inset-left));right:auto;bottom:max(28px,env(safe-area-inset-bottom))}.touch-device #touchHandbrake,.touch-device #touchReverse{left:auto;right:calc(max(32px,env(safe-area-inset-right)) + 96px);width:90px;height:68px}.touch-device #touchHandbrake{bottom:calc(max(28px,env(safe-area-inset-bottom)) + 80px)}.touch-device #touchReverse{bottom:max(28px,env(safe-area-inset-bottom))}
.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)) - 196px);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 #d0dca36b;border-radius:35px;background:#142822c9;pointer-events:auto;touch-action:none;box-shadow:0 4px 15px #0004;overflow:hidden}#touchSteering .steer-track{position:absolute;left:22px;right:22px;height:4px;top:33px;background:#d9e1bf70;border-radius:4px}#touchSteering .steer-track:after{content:'';position:absolute;left:50%;top:-10px;height:24px;width:1px;background:#e4e8c582}#touchSteering .steer-left,#touchSteering .steer-right{position:absolute;top:5px;font-size:9px;color:#e2e7c3}#touchSteering .steer-left{left:18px}#touchSteering .steer-right{right:18px}#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;font-size:15px;font-weight:900;font-style:italic;border:2px solid #fff1a5;box-shadow:0 2px 8px #0005}#touchSteering.active{border-color:#f5db72;background:#203c30dd}

#touchPedals{position:relative;width:100%;height:100%;pointer-events:auto;touch-action:none;border:1px solid #d0dca36b;border-radius:20px;background:#142822c9;box-shadow:0 4px 15px #0004;overflow:hidden}#touchPedals small{position:absolute;left:7px;font-size:8px;font-weight:700;letter-spacing:0;pointer-events:none}#touchGasLabel{top:13px;color:#f1dc78}#touchBrakeLabel{bottom:13px;color:#efb29b}#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:#203c30dd}#touchPedals.braking #pedalThumb{background:#efb29b;border-color:#ffd4ba}

/* 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(max(32px,env(safe-area-inset-right)) + 96px);bottom:calc(max(28px,env(safe-area-inset-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 .touch-steering{bottom:max(28px,min(26vh,calc(100vh - 268px)));bottom:max(28px,env(safe-area-inset-bottom),min(26dvh,calc(100dvh - 268px)))}
.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 #touchLights,.touch-device.story-cutscene #touchWipers,.touch-device.story-cutscene #touchReset,.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}