/* A centered menu with one illustrated frame, including its red close key.
   The right corner slice contains the entire key, so it remains square when
   the central glass is stretched for a short landscape viewport. */
#app #mobile-menu-button,#app .mobile-menu-layer{display:none}
@media(max-aspect-ratio:1/1),(max-width:1100px) and (max-height:600px){
 #app.has-mobile-menu :is(#fullscreen-button,.utility-controls,#speed-button){display:none!important}
 #app.has-mobile-menu #sound-button{display:grid;place-items:center;left:.034%;right:auto;top:0;width:20%;height:14cqw;min-height:44px;min-width:44px;padding:0;border:0;background:none;transform:none}
 #app.has-mobile-menu #sound-button svg{position:static;width:clamp(23px,6.4cqw,32px);height:clamp(23px,6.4cqw,32px);transform:none}
 #app.has-mobile-menu #sound-button[aria-pressed=true]::after{content:'';position:absolute;left:50%;top:50%;width:clamp(25px,7cqw,35px);height:2px;background:currentColor;box-shadow:0 0 2px #06243b;transform:translate(-50%,-50%) rotate(-45deg);pointer-events:none}
 #app #mobile-menu-button{display:grid;position:absolute;place-items:center;left:79.967%;right:auto;top:0;width:20%;height:14cqw;min-height:44px;min-width:44px;padding:0;border:0;background:none;z-index:92;color:#9eeaff;transform:none;transition:color .14s,filter .14s;touch-action:manipulation}
 #app #mobile-menu-button svg{display:block;position:static;width:clamp(23px,6.4cqw,32px);height:clamp(23px,6.4cqw,32px);stroke-width:2.1;filter:drop-shadow(0 0 3px #21baff);transform:none}
 #app #mobile-menu-button[aria-expanded=true]{color:#fff0c2;filter:drop-shadow(0 0 4px #ffc168)}
 #app.mobile-menu-open #mobile-menu-button{z-index:89}
 #app #mobile-menu-button:focus-visible{outline:none;filter:drop-shadow(0 0 5px #a6eeff)}
 #app.startup-armed #mobile-menu-button{opacity:0;pointer-events:none}
 #app .mobile-menu-layer{display:block;position:absolute;inset:0;z-index:90;isolation:isolate}
 #app .mobile-menu-backdrop{position:absolute;inset:0;z-index:0;background:#010711d9;touch-action:none}
 #app .mobile-menu-panel{--menu-art-unit:1cqw;position:absolute;top:50%;left:50%;right:auto;width:min(520px,94%);height:min(650px,117.4581cqw,calc(100% - 24px));container-type:inline-size;translate:-50% -50%;z-index:1;isolation:isolate;background:none;filter:drop-shadow(0 8px 12px #000a);animation:mobileMenuOpen .15s ease-out both;transform-origin:center}
 #app .mobile-menu-panel::before{content:'';position:absolute;inset:5%;z-index:0;clip-path:polygon(5% 0,95% 0,100% 6%,100% 94%,95% 100%,5% 100%,0 94%,0 6%);background:#03152a;pointer-events:none}
 #app .mobile-menu-panel::after{content:'';position:absolute;inset:0;z-index:1;background:none;border-style:solid;border-color:transparent;border-width:calc(var(--menu-art-unit) * 19.607843) calc(var(--menu-art-unit) * 26.737968) calc(var(--menu-art-unit) * 12.477718) calc(var(--menu-art-unit) * 13.368984);border-image:url('../../public/assets/ui-v28-mobile/menu-panel.png') 220 300 140 150 fill / 1 stretch;pointer-events:none}
 #app .mobile-menu-content{position:absolute;inset:0;z-index:2;min-width:0}
 /* Glass bounds: x178–848, y108–187 in the 1122px source. The left edge
    stretches with the center slice; the right edge stays in the close-key slice. */
 #app #mobile-menu-title{position:absolute;left:calc(52.083333% - var(--menu-art-unit) * 6.361408);right:auto;top:calc(var(--menu-art-unit) * 13.146168);width:max-content;display:block;padding:0 0 0 .09em;margin:0;color:#e4f5ff;font-size:clamp(18px,5.2cqw,26px);line-height:1;letter-spacing:.09em;font-weight:800;text-align:center;text-box:trim-both cap alphabetic;text-shadow:0 2px 6px #000;transform:translate(calc(-50% + .5px),calc(-50% - .75px));white-space:nowrap}
 #app .mobile-menu-close{position:absolute;left:calc(100% - var(--menu-art-unit) * 17.557932);right:auto;top:calc(var(--menu-art-unit) * 10.784314);width:max(44px,calc(var(--menu-art-unit) * 10));height:max(44px,calc(var(--menu-art-unit) * 10));min-width:44px;min-height:44px;display:block;margin:0;padding:0;border:0;border-radius:0;transform:translate(-50%,-50%);z-index:3;background:none;color:transparent;font-size:0;line-height:0;box-shadow:none;filter:none}
 #app .mobile-menu-close::before{content:'';position:absolute;left:50%;top:50%;width:calc(var(--menu-art-unit) * 8);height:calc(var(--menu-art-unit) * 8);transform:translate(-50%,-50%);border:1px solid #ffe8cf;border-radius:3px;box-shadow:0 0 9px #ff6846;opacity:0;pointer-events:none}
 #app .mobile-menu-close:hover{filter:none}
 #app .mobile-menu-close:hover::before,#app .mobile-menu-close:focus-visible::before{opacity:1}
 #app .mobile-menu-close:active{transform:translate(-50%,-50%)}
 #app .mobile-menu-close:focus-visible{outline:none;filter:none}
 #app #mobile-flight-menu{position:absolute;left:calc(var(--menu-art-unit) * 16);right:calc(var(--menu-art-unit) * 16);top:calc(var(--menu-art-unit) * 19.607843 - 6px);bottom:calc(var(--menu-art-unit) * 12.477718 + 4px);display:grid;grid-template-rows:repeat(5,minmax(44px,1fr));gap:0}
 #app .mobile-menu-item{position:relative;inset:auto;display:flex;align-items:center;gap:12px;width:100%;height:100%;min-height:44px;padding:0 8px;margin:0;border:0;border-bottom:1px solid #5bc9e829;border-radius:0;background:none;color:#bfeaff;text-align:left;box-shadow:none;filter:none;transform:none;overflow:visible;touch-action:manipulation}
 #app .mobile-menu-item:last-child{border-bottom:0}
 #app .mobile-menu-item>svg{position:static;flex:0 0 clamp(26px,6.5cqw,32px);width:clamp(26px,6.5cqw,32px);height:clamp(26px,6.5cqw,32px);stroke-width:1.7;filter:drop-shadow(0 0 3px #37bdff66);transform:none}
 #app .mobile-menu-label{position:static;display:block;flex:1;min-width:0;font-size:clamp(18px,4.8cqw,23px);line-height:1;letter-spacing:.025em;font-weight:750;color:#e6f5ff;text-box:trim-both cap alphabetic;transform:none;white-space:nowrap}
 #app .mobile-menu-arrow{position:static;display:block;color:#82dfff;font-size:26px;line-height:1;transform:none}
 #app .mobile-menu-state{position:static;display:flex;align-items:center;justify-content:center;min-width:36px;height:23px;padding:0 5px;border:1px solid #5f9eb055;border-radius:3px;font-size:10px;line-height:1;font-weight:800;letter-spacing:.08em;color:#97b8c8;background:#041725;transform:none}
 #app .mobile-menu-item[aria-checked=true] .mobile-menu-state{color:#cdff97;border-color:#9eff6a88;background:#335b242b;box-shadow:0 0 8px #a7ff4d22}
 #app .mobile-menu-item:disabled{opacity:.42;cursor:default}
 #app .mobile-menu-item:hover:not(:disabled),#app .mobile-menu-item:focus-visible{background:linear-gradient(90deg,#1c91bc20,#43c6ff18,#1c91bc08);color:#fff;outline:none;box-shadow:inset 2px 0 #a0eaff;filter:none}
 #app .mobile-menu-item:active:not(:disabled){background:#80dfff20;transform:none}
 .reduced-motion #app .mobile-menu-panel{animation:none}
}
@media(min-aspect-ratio:10001/10000) and (max-width:1100px) and (max-height:600px){
 #app.has-mobile-menu #sound-button{top:2px;left:8px;right:auto;width:68px;height:44px;background-image:url('../../public/assets/ui-v28-mobile/mobile-cockpit.png');background-size:412.55814% 1323.880597%;background-repeat:no-repeat;background-position:left top}
 #app.has-mobile-menu #sound-button svg{position:absolute;left:42.56%;top:50.75%;width:23px;height:23px;transform:translate(-50%,-50%)}
 #app.has-mobile-menu #sound-button[aria-pressed=true]::after{left:42.56%;top:50.75%;width:25px}
 #app #mobile-menu-button{top:2px;left:auto;right:calc(var(--landscape-console) + 24px);width:68px;height:44px;background-image:url('../../public/assets/ui-v28-mobile/mobile-cockpit.png');background-size:412.55814% 1323.880597%;background-repeat:no-repeat;background-position:right top}
 #app #mobile-menu-button svg{position:absolute;left:58.84%;top:50.75%;width:23px;height:23px;transform:translate(-50%,-50%)}
 #app .mobile-menu-panel{--menu-art-unit:min(1cqw,3.6px);top:50%;left:50%;right:auto;width:min(640px,94%);height:min(410px,calc(100% - 24px))}
 #app #mobile-menu-title{font-size:20px}
 #app #mobile-flight-menu{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(44px,1fr));gap:4px 15px}
 #app .mobile-menu-item{min-height:44px;gap:9px;padding:0 6px}
 #app .mobile-menu-item:last-child{grid-column:1/-1;justify-self:center;width:65%}
 #app .mobile-menu-label{font-size:14px}
 #app .mobile-menu-item>svg{flex-basis:21px;width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){#app .mobile-menu-panel{animation:none}}
@keyframes mobileMenuOpen{from{opacity:0;transform:translateY(-7px) scaleY(.97)}to{opacity:1;transform:none}}