/* Mobile flight controls and the cinematic edition interface. */
.control-pill{position:absolute;left:4.3%;top:calc(21% + 390px);display:flex;align-items:center;gap:10px;background:#12211bd9;border:1px solid #d8ff7055;border-radius:30px;padding:10px 16px;color:#d8ff70;font-size:8px;letter-spacing:1.3px;pointer-events:auto}.control-pill svg{width:20px;height:20px}.control-pill b{font-size:7px;margin-left:12px;color:#d5dfcf;font-weight:400}.setting-button{background:#d8ff7012;border:1px solid #d8ff7044;color:#d8ff70;border-radius:4px;padding:9px 12px;white-space:nowrap;font-size:10px}.range-setting{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.range-setting input{width:100px!important;height:15px!important;margin:0}.range-setting output{font-size:9px;color:var(--acid)}.motion-panel{width:min(510px,calc(100% - 28px));text-align:center;padding:32px}.motion-panel>.eyebrow{justify-content:center;font-size:8px}.motion-panel h2{font-size:43px;margin:22px 0 14px;letter-spacing:-2px}.motion-panel>p{font-size:12px;max-width:360px;margin:0 auto;line-height:1.7}.motion-panel strong{color:var(--acid)}.tilt-demo{height:174px;position:relative;margin:20px auto 10px;max-width:330px;perspective:600px}.phone-model{width:66px;height:118px;border:2px solid #d8ff70;border-radius:11px;position:absolute;left:calc(50% - 33px);top:10px;box-shadow:0 0 35px #d8ff7016,inset 0 0 18px #d8ff7010;transform:rotateZ(0deg);animation:tilt-example 3.5s ease-in-out infinite;transition:transform .08s}.phone-model.live{animation:none}.phone-model>span{position:absolute;bottom:5px;left:23px;width:16px;border-top:2px solid #d8ff70;border-radius:5px}.phone-screen{position:absolute;inset:7px 5px 13px;border-radius:6px;background:linear-gradient(#32604e,#162f27);overflow:hidden}.phone-screen:before{content:'';position:absolute;left:10px;right:10px;top:30px;height:115px;background:#b5d5b81a;transform:perspective(100px) rotateX(42deg);border:1px solid #d8ff7044}.phone-screen i{position:absolute;left:23px;width:2px;height:10px;background:#c6e6c94d}.phone-screen i:nth-child(1){top:28px}.phone-screen i:nth-child(2){top:48px}.phone-screen i:nth-child(3){top:68px}.phone-screen b{position:absolute;left:16px;bottom:5px;color:var(--acid);font-size:26px;text-shadow:0 0 12px #d8ff70}.tilt-arrow{position:absolute;top:45px;font-size:27px;color:#d8ff7077}.tilt-arrow.left{left:50px}.tilt-arrow.right{right:50px}.tilt-arc{position:absolute;width:150px;height:80px;left:calc(50% - 75px);top:30px;border-top:1px dashed #d8ff7033;border-radius:50%}.demo-line{position:absolute;bottom:28px;left:30px;right:30px;border-top:1px solid #d8ff7022}.demo-labels{position:absolute;bottom:5px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.5px;color:#8ba894}.motion-status{border:1px solid #d8ff7029;background:#d8ff7006;padding:12px 15px;font-size:11px;color:#afc4b3;line-height:1.6;border-radius:3px;min-height:43px}.motion-status.ready{color:var(--acid);border-color:#d8ff7066}.motion-status.error{color:#ffbc9e;border-color:#ffbc9e55}.motion-panel .launch{width:100%;margin-top:18px;font-size:11px;gap:12px;min-width:0}.motion-panel .secondary{font-size:11px;padding:12px}.motion-panel .motion-foot{margin-top:17px;font-size:9px;line-height:1.6;color:#8da797}.motion-meter{display:flex;align-items:center;gap:14px;margin:17px auto 0;font-size:7px;letter-spacing:1px;color:#9db5a5;width:85%}.motion-meter>div{height:3px;flex:1;background:#d8ff7022;position:relative}.motion-meter>div:before,.tilt-track:before{content:'';position:absolute;height:9px;left:50%;top:-3px;border-left:1px solid #d8ff7066}.motion-meter i,.tilt-track i{position:absolute;top:-3px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--acid);transform:translateX(-50%);box-shadow:0 0 10px #d8ff7055}.tilt-indicator{display:none;width:132px;pointer-events:auto}.tilt-indicator>span{display:block;font-size:7px;letter-spacing:1.5px;color:#d8ff70;text-align:center;margin-bottom:11px}.tilt-track{height:3px;position:relative;background:#d8ff7033;margin:0 12px 12px}.tilt-indicator #recenter{display:block;width:100%;height:29px;background:#143323a8;border:1px solid #d8ff7055;color:#d8ff70;font-size:8px;letter-spacing:1px;border-radius:4px}.tilt-indicator #switchTouch{display:block;width:100%;background:none;border:0;color:#b4c4b4;font-size:8px;margin:5px 0 2px;padding:0;height:15px}.motion-enabled .steering>[data-control="left"],.motion-enabled .steering>[data-control="right"]{display:none}.motion-enabled .tilt-indicator:not([hidden]){display:block}.motion-enabled .steering{gap:5px}.motion-enabled .brake-control{height:24px}.hud:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #08171526}.hud>*{z-index:1}.flight-buttons .lift-control{box-shadow:inset 0 0 20px #d8ff700a,0 6px 20px #0002}.instruments{text-shadow:0 2px 9px #000a}.hud .flight-hint{background:#071a1777;padding:6px 10px;border-left:2px solid #d8ff7066;border-radius:0 3px 3px 0}.hud .flight-hint:empty{display:none}@keyframes tilt-example{0%,100%{transform:rotateZ(-14deg)}50%{transform:rotateZ(14deg)}}
@media(min-width:801px){.control-pill{top:auto;bottom:25px;left:50%;transform:translateX(-50%);padding:6px 12px}.control-pill svg{height:16px;width:16px}.control-pill span,.control-pill b{font-size:7px}.control-pill b{margin-left:0}}
@media(max-width:800px){.control-pill{top:auto;bottom:calc(255px + env(safe-area-inset-bottom));left:6%;padding:9px 13px;font-size:7px;gap:8px;background:#10251dbf;backdrop-filter:blur(12px)}.control-pill b{font-size:6px;margin-left:7px}.control-pill svg{height:18px;width:18px}.hero-annotation{display:none}.motion-panel{padding:25px}.motion-panel h2{font-size:35px}.motion-panel .tilt-demo{height:160px;margin:16px auto 8px}.motion-panel .motion-foot{font-size:8px}.motion-panel>.eyebrow{font-size:7px}.setting .range-setting input{width:90px!important}.motion-status{font-size:10px}.flight-hint{max-width:55%;line-height:1.5;font-size:9px}}
@media(max-height:680px) and (max-width:800px){.control-pill{bottom:calc(224px + env(safe-area-inset-bottom));padding:6px 11px}.motion-panel{padding:20px}.motion-panel h2{font-size:30px;margin:16px 0 12px}.motion-panel .tilt-demo{height:130px;margin:12px auto 0}.phone-model{width:50px;height:89px;left:calc(50% - 25px);top:0}.phone-model>span{left:16px;bottom:4px}.phone-screen{inset:5px 4px 11px}.phone-screen b{font-size:21px;left:9px}.phone-screen i{left:17px}.phone-screen:before{left:4px;right:4px;top:20px}.tilt-arrow{top:23px}.motion-panel>p{font-size:11px}.motion-panel .launch{height:47px;margin-top:13px}.motion-panel .motion-foot{margin-top:12px}.motion-meter{margin-top:12px}}
@media(max-height:500px) and (orientation:landscape){.control-pill{bottom:10px;left:45%;padding:4px 10px}.control-pill b{display:none}.control-pill svg{height:15px;width:15px}.motion-panel{max-width:640px;width:90%;padding:24px 28px}.motion-panel h2 br{display:none}.motion-panel h2{font-size:30px;margin:12px 0}.motion-panel .tilt-demo{display:none}.motion-panel>p{max-width:none}.motion-status{margin-top:15px}.motion-panel .launch{height:42px}.motion-panel .motion-foot{margin-top:10px}.motion-enabled .steering{width:116px}.tilt-indicator{width:112px}.tilt-indicator #recenter{height:25px;font-size:7px}.tilt-indicator>span{font-size:6px;margin-bottom:9px}.tilt-indicator #switchTouch{font-size:7px;height:12px}.motion-enabled .brake-control{height:22px}}
@media(prefers-reduced-motion:reduce){.phone-model{animation:none}}

/* Recovery and fallback controls remain thumb-sized even in short landscape. */
@media(pointer:coarse){#touchControls #recenter,#touchControls #switchTouch{height:44px;min-height:44px;font-size:9px;line-height:1.3}#touchControls #switchTouch{margin:6px 0 0;border:1px solid #c7dfb845;border-radius:4px;background:#143323a8}#settingsTilt,#mobileSetup,#enableTilt,#calibrateTilt,#useTouch{min-height:44px}.panel>.close{width:44px;height:44px;display:grid;place-items:center;padding:0}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){#touchControls #boostButton,#touchControls #stuntButton{width:58px;height:58px}#touchControls .lift-control{width:74px;height:106px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:350px){#touchControls #boostButton,#touchControls #stuntButton{width:56px;height:56px}#touchControls .lift-control{width:70px;height:100px}}

/* Keep pressure text/bar clear of the 136px action cluster on narrow landscape. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:350px) and (max-width:640px){.instruments{right:calc(4% + 148px)}}