/* V80: one responsive layout for touch devices and compact windows. */
html,body,#app,#app .game-shell{height:100dvh}
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app{--edge-top:max(8px,env(safe-area-inset-top));--edge-bottom:max(8px,env(safe-area-inset-bottom));--edge-left:max(12px,env(safe-area-inset-left));--edge-right:max(12px,env(safe-area-inset-right))}
 #app .menu-screen{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important}
 #app .menu-panel{position:absolute!important;inset:0!important;display:grid!important;direction:ltr;grid-template-columns:minmax(0,1.35fr) minmax(200px,1fr);grid-template-rows:minmax(0,1fr) auto auto;gap:8px 20px;padding:var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left)!important;overflow:auto!important;touch-action:pan-y;width:100%!important;height:100%!important;max-width:none!important;transform:none!important}
 #app .menu-panel .logo-zone,#app .menu-panel .menu-buttons,#app .menu-panel .menu-footer,#app .pilot-select{position:relative!important;inset:auto!important;transform:none!important;margin:0!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:0!important}
 #app .menu-panel .logo-zone{grid-column:2;grid-row:1;align-self:center;max-height:100%;justify-content:center!important}
 #app .menu-panel .logo-image{width:100%!important;height:clamp(52px,19dvh,110px)!important;max-height:100%!important;animation:none!important}
 #app .menu-panel .eyebrow{font-size:9px!important;letter-spacing:3px!important}
 #app .menu-panel .overlay-title,#app .menu-panel .overlay-text{display:none!important}
 #app .menu-panel .menu-buttons{grid-column:2;grid-row:2;display:grid!important;gap:7px!important;padding:0!important}
 #app .menu-buttons .menu-btn{width:100%!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0 12px!important;font-size:18px!important;border-radius:12px!important;gap:10px!important}
 #app .menu-buttons .btn-icon{font-size:20px!important}
 #app .menu-panel .menu-footer{grid-column:2;grid-row:3;display:flex!important;align-items:center!important;text-align:center!important;gap:4px!important;padding:0!important}
 #app .menu-panel .best-inline{font-size:12px!important;padding:3px 12px!important}
 #app .menu-panel .voice-hint{font-size:9px!important;line-height:1.3!important;white-space:normal!important}
 #app .pilot-select{grid-column:1;grid-row:1/4;align-self:stretch;height:100%!important;display:grid!important;grid-template-rows:24px minmax(0,1fr) 26px;gap:4px;padding:0!important}
 #app .pilot-heading{position:relative!important;inset:auto!important;margin:0!important;display:flex!important;width:100%!important;font-size:16px!important;line-height:24px!important;transform:none!important}
 #app .pilot-carousel{position:relative!important;inset:auto!important;grid-row:2;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
 #app .pilot-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;transform:none!important;overflow:hidden!important;animation:none!important}
 #app .pilot-stage[data-pilot] .pilot-ship{left:0!important;right:auto!important;top:0!important;bottom:auto!important;width:74%!important;height:calc(100% - 72px)!important;max-height:none!important;object-fit:contain!important;object-position:center!important;transform:none!important;animation:none!important}
 #app .pilot-stage .pilot-portrait{left:auto!important;right:2%!important;top:0!important;bottom:auto!important;width:34%!important;height:calc(100% - 72px)!important;max-height:none!important;object-fit:contain!important;object-position:bottom!important;transform:none!important;animation:none!important}
 #app .pilot-stage .pilot-info{position:absolute!important;display:flex!important;left:50%!important;right:auto!important;top:auto!important;bottom:0!important;transform:translateX(-50%)!important;width:calc(100% - 100px)!important;height:68px!important;min-height:0!important;margin:0!important;padding:5px 8px!important;gap:1px!important;align-items:center!important;justify-content:center!important;border-radius:12px!important}
 #app .pilot-number{font-size:10px!important;letter-spacing:2px!important;line-height:12px!important}
 #app .pilot-info strong{font-size:22px!important;line-height:25px!important}
 #app .pilot-info small{font-size:12px!important;line-height:16px!important}
 #app .pilot-arrow{top:auto!important;bottom:10px!important;width:44px!important;height:44px!important;transform:none!important;font-size:22px!important}
 #app .pilot-prev{left:0!important;right:auto!important} #app .pilot-next{right:0!important;left:auto!important}
 #app .pilot-dots{position:relative!important;inset:auto!important;display:flex!important;grid-row:3;justify-content:center!important;align-items:center!important;transform:none!important;width:100%!important;gap:8px!important;margin:0!important}
 #app .pilot-dots button{height:12px!important;width:12px!important} #app .pilot-dots button.active{width:28px!important}
 #app .trophy-shortcut{position:absolute!important;left:var(--edge-left)!important;right:auto!important;top:var(--edge-top)!important;bottom:auto!important;width:44px!important;height:44px!important;padding:4px!important;font-size:20px!important;z-index:4}
 #app .trophy-shortcut small{display:none!important}
 #app .settings-modal,#app .scores-modal,#app .world-modal,#app .victory-screen,#app .return-confirm{position:absolute!important;inset:0!important;padding:var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left)!important;overflow:auto!important;touch-action:pan-y;overscroll-behavior:contain}
 #app .settings-card,#app .scores-card,#app .victory-card,#app .return-confirm-panel{width:min(100%,720px)!important;max-width:100%!important;max-height:100%!important;min-height:0!important;overflow:auto!important;touch-action:pan-y;transform:none!important;flex-shrink:0;padding:14px!important;border-radius:18px!important}
 #app .settings-card{display:block!important}
 #app .settings-header{height:auto!important;min-height:44px!important;margin:0 0 8px!important;padding:0!important}
 #app .settings-header h2{font-size:24px!important} #app .settings-sub{font-size:10px!important}
 #app .settings-emblem{width:48px!important;height:44px!important} #app .settings-emblem img{width:100%!important;height:100%!important;object-fit:contain}
 #app .close-settings{width:44px!important;height:44px!important}
 #app .settings-grid,#app .settings-main{display:block!important;width:100%!important;min-width:0!important;gap:8px!important}
 #app .settings-section{margin:8px 0 0!important;padding:10px!important}
 #app .section-title{font-size:14px!important;margin-bottom:6px!important}
 #app .difficulty-options{display:flex!important;gap:8px!important;flex-wrap:nowrap!important}
 #app .difficulty-option{flex:1 1 0!important;min-width:0!important}
 #app .difficulty-option span{padding:8px!important;min-height:44px!important;font-size:15px!important}
 #app .audio-row{display:grid!important;grid-template-columns:110px minmax(50px,1fr) 42px!important;gap:8px!important;margin:4px 0!important;min-height:34px!important}
 #app .audio-label,#app .volume-value{font-size:12px!important} #app input[type=range]{width:100%!important;min-width:0!important}
 #app .toggle-grid{gap:8px!important;margin-top:8px!important} #app .toggle-card{padding:6px!important;min-height:44px!important} #app .toggle-title{font-size:12px!important}
 #app .settings-bottom-bar{margin-top:8px!important;padding:5px!important;font-size:11px!important}
 #app .world-screen{width:100%!important;height:100%!important;min-height:0!important;display:flex!important;gap:6px!important;padding:0!important;overflow:auto!important;touch-action:pan-y}
 #app .world-screen-head{grid-template-columns:44px 1fr 44px!important;gap:8px!important;padding:0!important;flex:none}
 #app .world-screen-head img{height:40px!important} #app .world-close{width:44px!important;height:44px!important;font-size:26px!important}
 #app .world-kicker{font-size:9px!important;letter-spacing:2px!important} #app .world-modal-title h2{font-size:24px!important;line-height:1.2!important}
 #app .world-help{font-size:11px!important;line-height:1.4!important;margin:0!important;max-width:100%!important;flex:none}
 #app .world-carousel-shell{grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px!important;flex:1 0 auto!important;min-height:0!important}
 #app .world-viewport{min-height:0!important;height:auto!important;overflow:visible!important}
 #app .world-track{padding:0!important}
 #app .world-slide{width:100%!important;min-height:0!important;padding:0!important}
 #app .world-slide-hero{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:14px;direction:ltr}
 #app .world-visual{height:clamp(100px,35dvh,230px)!important;aspect-ratio:auto!important;min-height:0!important}
 #app .world-image{border-radius:12px!important}
 #app .world-copy{margin:0!important;padding:0!important;direction:rtl;gap:4px!important}
 #app .world-slide .world-copy strong{font-size:22px!important;gap:7px!important;line-height:1.25!important}
 #app .world-slide .world-copy small{font-size:12px!important;line-height:1.5!important;margin-top:4px!important}
 #app .world-slide .world-status{font-size:11px!important;line-height:1.5!important;margin-top:4px!important}
 #app .world-order{min-width:30px!important;width:30px!important;height:30px!important;font-size:16px!important;flex-shrink:0}
 #app .world-nav{height:44px!important;font-size:24px!important}
 #app .world-dots{min-height:24px!important;gap:10px!important;flex:none}
 #app .world-dot{height:16px!important;width:16px!important} #app .world-dot.is-active{width:32px!important}
 #app .world-modal-actions-full{display:grid!important;grid-template-columns:1fr 2fr!important;gap:10px!important;flex:none;padding:0!important}
 #app .world-modal-actions-full button{width:100%!important;min-width:0!important;min-height:44px!important;padding:6px 10px!important;font-size:14px!important;border-radius:10px!important}
 #app .hud{top:var(--edge-top)!important;left:var(--edge-left)!important;right:var(--edge-right)!important;display:flex!important;justify-content:space-between!important;align-items:flex-start!important;transform:none!important}
 #app .hud-left{position:static!important;display:flex!important;gap:5px!important;transform:none!important;flex-wrap:nowrap!important}
 #app .hud-chip{position:static!important;font-size:11px!important;padding:5px 7px!important;line-height:20px!important;transform:none!important}
 #app .heart-icon,#app .heart-svg{width:16px!important;height:16px!important}
 #app .top-actions{top:var(--edge-top)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;gap:5px!important}
 #app .top-actions .icon-btn{width:44px!important;height:40px!important;font-size:20px!important}
 #app .support-meters{top:calc(var(--edge-top) + 44px)!important;left:var(--edge-left)!important;right:auto!important;width:auto!important;display:flex!important;flex-direction:row!important;gap:8px!important}
 #app .support-meters>div{width:42px!important;gap:2px!important}
 #app .support-meters [class$='meter-ring']{width:38px!important;height:38px!important}
 #app .support-meters [class$='meter-label']{min-width:32px!important;min-height:13px!important;font-size:9px!important;line-height:11px!important;padding:1px 3px!important}
 #app .touch-controls{left:var(--edge-left)!important;right:auto!important;bottom:var(--edge-bottom)!important;transform:none!important;justify-content:flex-start!important}
 #app .joystick-base{width:clamp(76px,23dvh,100px)!important;height:clamp(76px,23dvh,100px)!important}
 #app .joystick-thumb{width:36px!important;height:36px!important}
 #app .boss-hud{top:calc(var(--edge-top) + 45px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(26vw,180px)!important}
 #app .victory-card h2{font-size:24px!important;margin:8px 0!important} #app .victory-card p{font-size:14px!important;margin:6px 0!important}
 #app .victory-logo{max-height:48px!important;object-fit:contain!important} #app .victory-medal{display:none!important}
 #app .victory-score{padding:8px!important;font-size:14px!important} #app .victory-score strong{font-size:25px!important}
 #app .victory-actions{gap:8px!important;margin-top:10px!important} #app .victory-actions button{min-height:44px!important;padding:8px!important;font-size:14px!important}
 #app .victory-head{height:30px!important} #app .victory-head img{height:30px!important}
 #app .victory-footer{font-size:10px!important;margin-top:8px!important}
 #app .portrait-hint{display:none!important}
}
@media (orientation:portrait) and (max-width:1024px){
 #app .menu-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:90px minmax(210px,1fr) auto auto;gap:8px;padding-top:max(12px,env(safe-area-inset-top))!important}
 #app .menu-panel .logo-zone{grid-column:1;grid-row:1} #app .menu-panel .logo-image{height:72px!important;width:80%!important}
 #app .pilot-select{grid-column:1;grid-row:2}
 #app .menu-panel .menu-buttons{grid-column:1;grid-row:3;width:min(100%,380px)!important;justify-self:center}
 #app .menu-panel .menu-footer{grid-column:1;grid-row:4}
 #app .pilot-stage .pilot-info{width:calc(100% - 100px)!important}
 #app .world-slide-hero{grid-template-columns:minmax(0,1fr);gap:12px}
 #app .world-visual{height:clamp(140px,27dvh,300px)!important}
 #app .world-carousel-shell{grid-template-columns:36px minmax(0,1fr) 36px!important;gap:5px!important}
 #app .world-nav{height:44px!important} #app .world-slide .world-copy strong{font-size:20px!important}
 #app .world-modal-title h2{font-size:21px!important}
 #app #overlay[hidden]~.portrait-hint{display:flex!important;flex-direction:column;justify-content:center;align-items:center;pointer-events:auto;z-index:50}
}
@media (orientation:landscape) and (max-height:360px){
 #app .menu-panel{gap:5px 16px} #app .menu-buttons .menu-btn{height:40px!important;min-height:40px!important;font-size:16px!important}
 #app .world-help{display:none!important}
}
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .pilot-select{grid-template-columns:minmax(0,1fr)!important}
 #app .pilot-select>*{grid-column:1!important;min-width:0!important;margin:0!important}
 #app .pilot-carousel{display:block!important;align-self:stretch!important;justify-self:stretch!important;padding:0!important}
 #app .pilot-stage .pilot-portrait{border:0!important;border-radius:0!important;box-shadow:none!important}
 #app .pilot-number{white-space:nowrap!important}
 #app .world-slide-hero::before,#app .world-slide-hero::after{display:none!important;content:none!important}
 #app .world-slide{box-shadow:none!important;border-radius:0!important}
}
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .pilot-stage .pilot-portrait{background:none!important}
 #app .settings-title-stack{min-height:0!important}
 #app .settings-header{grid-template-columns:44px minmax(0,1fr) 48px!important}
 #app .audio-row{padding:3px 6px!important;grid-template-areas:none!important;grid-template-rows:auto!important}
 #app .audio-row>*{grid-area:auto!important;align-self:center!important;margin:0!important}
 #app .audio-label::before{display:none!important}
 #app .toggle-grid{grid-template-columns:1fr 1fr!important}
 #app .toggle-switch{transform:scale(.8)!important;transform-origin:center!important}
 #app .world-image{background-size:auto 100%,cover!important}
}
/* Allow native dialog scrolling; canvas and joystick keep their own touch lock. */
#app .game-shell{touch-action:auto}
/* V81: single-screen menu; actions left, pilot right in both orientations. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .menu-panel{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;grid-template-rows:minmax(0,1fr) auto auto!important;gap:8px 18px!important;overflow:hidden!important;padding-left:calc(var(--edge-left) + 44px)!important}
 #app .menu-panel .logo-zone{grid-column:1!important;grid-row:1!important}
 #app .menu-panel .menu-buttons{grid-column:1!important;grid-row:2!important}
 #app .menu-panel .menu-footer{grid-column:1!important;grid-row:3!important}
 #app .pilot-select{grid-column:2!important;grid-row:1/4!important;height:100%!important;min-height:0!important}
 #app .trophy-shortcut{left:var(--edge-left)!important;top:var(--edge-top)!important;width:38px!important;height:38px!important}
 #app .menu-panel .logo-image{width:100%!important;height:clamp(48px,20dvh,110px)!important}
 #app .pilot-info strong{font-size:clamp(16px,3vw,22px)!important}
 #app .pilot-info small{font-size:clamp(10px,1.8vw,12px)!important}
 #app .pilot-heading{font-size:clamp(12px,2.5vw,16px)!important}
}
@media (orientation:portrait) and (max-width:1024px){
 #app .menu-panel{grid-template-rows:minmax(0,1fr) auto auto!important;gap:6px 8px!important;padding-left:var(--edge-left)!important;padding-top:calc(var(--edge-top) + 46px)!important;align-content:center!important}
 #app .menu-panel .menu-buttons{align-self:start!important}
 #app .menu-buttons .menu-btn{height:40px!important;min-height:40px!important;font-size:clamp(12px,3.2vw,16px)!important;padding:0 5px!important;gap:4px!important}
 #app .menu-buttons .btn-icon{font-size:14px!important}
 #app .menu-panel .logo-zone{align-self:end!important;padding-bottom:18px!important}
 #app .menu-panel .logo-image{height:auto!important;max-height:100px!important}
 #app .menu-panel .eyebrow{font-size:7px!important;letter-spacing:1px!important}
 #app .menu-panel .best-inline{font-size:10px!important;padding:3px!important}
 #app .menu-panel .voice-hint{font-size:8px!important}
 #app .pilot-select{grid-template-rows:24px minmax(0,1fr) 24px!important;max-height:420px!important;align-self:center!important}
 #app .pilot-stage[data-pilot] .pilot-ship{width:100%!important;height:55%!important;top:0!important}
 #app .pilot-stage .pilot-portrait{width:50%!important;height:28%!important;top:43%!important;right:4%!important}
 #app .pilot-stage .pilot-info{width:100%!important;bottom:44px!important;height:64px!important;padding:3px!important}
 #app .pilot-info strong{font-size:17px!important}
 #app .pilot-info small{font-size:10px!important}
 #app .pilot-arrow{width:36px!important;height:36px!important;bottom:0!important;font-size:20px!important}
}
/* Text belongs to the image, with its own readable dark gradient. */
#app .world-slide-hero{position:relative!important;display:block!important;overflow:hidden!important;border-radius:16px!important}
#app .world-visual{height:clamp(220px,48dvh,500px)!important;aspect-ratio:auto!important}
#app .world-copy{position:absolute!important;inset:auto 0 0!important;z-index:3!important;margin:0!important;padding:38px 20px 16px!important;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.65) 35%,rgba(0,0,0,.86) 100%)!important;color:white!important;direction:rtl!important;text-align:right!important}
#app .world-slide .world-copy strong,#app .world-slide .world-copy small,#app .world-slide .world-status{color:#fff!important;text-shadow:0 1px 3px #000!important}
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .world-visual{height:clamp(140px,48dvh,380px)!important}
 #app .world-copy{padding:24px 12px 10px!important}
 #app .world-slide .world-copy strong{font-size:20px!important}
 #app .world-slide .world-copy small{font-size:12px!important;line-height:1.4!important}
 #app .world-slide .world-status{font-size:11px!important;line-height:1.4!important}
}
@media (orientation:portrait) and (max-width:1024px){
 #app .world-visual{height:clamp(250px,48dvh,450px)!important}
}

/* V82: explicit image boxes avoid percentage-height/background cascade failures. */
#app .world-image{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;background:none!important;mask-image:none!important;-webkit-mask-image:none!important}
#app .world-image img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;opacity:1!important;visibility:visible!important;object-fit:fill!important}
#app .world-sky-img{z-index:0!important}
#app .world-land-img{z-index:1!important}
@media(pointer:coarse){
 #app *,#app *::before,#app *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 #app .hud *,#app .pilot-ship,#app .pilot-portrait,#app .world-slide{filter:none!important}
 #app .hud *,#app .hud *::before,#app .hud *::after{animation:none!important}
}
/* Clean mobile viewport: no bars, no resized shell, no browser-height overflow. */
@media (pointer:coarse) and (orientation:landscape){
 html,body,#app,#app .game-shell{height:100svh!important;min-height:100svh!important;max-height:100svh!important}
 #app .game-shell{width:100vw!important;overflow:hidden!important}
 #app .game-shell>canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important}
}

/* Portrait is a hard rotation gate: no menu or gameplay may be visible. */
@media (pointer:coarse) and (orientation:portrait){
  html.install-flow #app .portrait-hint{display:none!important}
  #app .portrait-hint{
    position:fixed!important;
    inset:0!important;
    z-index:99999!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:16px!important;
    padding:28px!important;
    box-sizing:border-box!important;
    background:#020609!important;
    color:#fff!important;
    text-align:center!important;
    pointer-events:auto!important;
  }
  #app .portrait-hint div{
    font-size:72px!important;
    line-height:1!important;
    color:#75d7ff!important;
    animation:rotate-device 1.5s ease-in-out infinite!important;
  }
  #app .portrait-hint strong{
    max-width:300px!important;
    font-size:clamp(20px,6vw,28px)!important;
    line-height:1.45!important;
  }
  #app .portrait-hint small{font-size:15px!important;color:#aec9da!important}
}

/* The install guide is deliberately a portrait-first screen, outside game layout. */
html.install-flow .pwa-install-screen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  min-height:100svh!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  padding:max(20px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom))!important;
}
html.install-flow .pwa-install-card{
  width:min(430px,100%)!important;
  margin:auto!important;
}

/* Desktop never receives the mobile orientation or mandatory-install flow. */
@media (pointer:fine){#app .portrait-hint{display:none!important}}
@keyframes rotate-device{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-90deg)}}

/* V96: one pre-composed image per world avoids Safari layer-compositing failures. */
#app .world-image .world-card-img{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  opacity:1!important;
  visibility:visible!important;
  object-fit:cover!important;
  object-position:center!important;
}
#app .world-image{
  background-image:var(--world-card)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
}

/* V101: native image element and lightweight mission-orb layout for iPhone/Android. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .world-slide{width:100%!important;max-width:100%!important}
 #app .world-slide-hero{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(130px,.8fr)!important;align-items:center!important;gap:14px!important;overflow:visible!important;border-radius:0!important;background:transparent!important}
 #app .world-copy{position:relative!important;inset:auto!important;margin:0!important;padding:8px 4px!important;background:none!important;z-index:1!important}
 #app .world-copy::before{font-size:8px!important;margin-bottom:3px!important;letter-spacing:1px!important;color:var(--world-accent)!important}
 #app .world-slide .world-copy strong{font-size:clamp(18px,3.8vw,25px)!important;line-height:1.15!important}
 #app .world-slide .world-copy small{font-size:clamp(10px,1.8vw,13px)!important;line-height:1.5!important;margin-top:5px!important}
 #app .world-status{font-size:clamp(9px,1.45vw,11px)!important;line-height:1.35!important;margin-top:6px!important;color:var(--world-accent)!important}
 #app .world-visual{display:grid!important;place-items:center!important;width:100%!important;height:auto!important;aspect-ratio:1!important;min-height:0!important;overflow:visible!important}
 #app .world-orb{position:relative!important;display:block!important;width:min(100%,min(31dvh,245px))!important;aspect-ratio:1!important;border-radius:50%!important;overflow:hidden!important;background:#09223c!important;border:4px solid var(--world-accent)!important;box-shadow:0 0 0 5px rgba(255,255,255,.10),0 0 15px var(--world-accent),0 13px 22px rgba(0,0,0,.32)!important}
 #app .world-orb::before{content:''!important;position:absolute!important;inset:7px!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:50%!important;z-index:2!important;pointer-events:none!important}
 #app .world-orb::after{content:''!important;position:absolute!important;inset:-9px!important;border:1px solid var(--world-accent)!important;border-radius:50%!important;z-index:3!important;pointer-events:none!important}
 #app .world-orb-image{display:block!important;position:relative!important;inset:auto!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;opacity:1!important;visibility:visible!important;object-fit:cover!important;object-position:center!important;transform:none!important}
 #app .world-image,#app .world-card-img{display:none!important}
}

/* V102: let the mission image use almost all available landscape height. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .world-modal{background:rgba(0,0,0,.74)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 #app .world-screen{background:transparent!important}
 #app .world-screen-head{grid-template-columns:60px 1fr 74px!important;border-bottom:0!important;padding-bottom:0!important}
 #app .world-screen-head img{height:66px!important}
 #app .world-modal-title h2{font-size:clamp(26px,5.1vw,34px)!important;line-height:1.1!important}
 #app .world-kicker{font-size:10px!important}
 #app .world-help{font-size:12px!important;line-height:1.35!important}
 #app .world-slide-hero{grid-template-columns:minmax(0,1fr) minmax(150px,1fr)!important;gap:10px!important}
 #app .world-copy{padding:8px 0!important;background:linear-gradient(90deg,rgba(0,0,0,.42),transparent)!important}
 #app .world-slide .world-copy strong{font-size:clamp(20px,4.35vw,29px)!important}
 #app .world-slide .world-copy small{font-size:clamp(11px,2.05vw,15px)!important;line-height:1.56!important}
 #app .world-status{font-size:clamp(10px,1.7vw,13px)!important}
 #app .world-orb{width:min(100%,min(45dvh,330px))!important;border-width:4px!important}
}

/* V103: a strict one-screen world selector. The orb gets all remaining room, never pushes actions below view. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .world-screen{height:100svh!important;min-height:100svh!important;max-height:100svh!important;display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto auto!important;gap:4px!important;overflow:hidden!important;touch-action:none!important}
 #app .world-screen-head{min-height:52px!important;grid-template-columns:52px 1fr 64px!important;align-items:center!important}
 #app .world-screen-head img{height:58px!important}
 #app .world-modal-title h2{font-size:clamp(23px,4.6vw,31px)!important}
 #app .world-kicker{font-size:9px!important;line-height:1!important}
 #app .world-help{margin:0!important;min-height:0!important;font-size:10px!important;line-height:1.25!important;overflow:hidden!important}
 #app .world-carousel-shell{min-height:0!important;height:100%!important;grid-template-columns:34px minmax(0,1fr) 34px!important;gap:4px!important;overflow:hidden!important}
 #app .world-viewport{height:100%!important;min-height:0!important;overflow:hidden!important}
 #app .world-track{height:100%!important;display:flex!important;align-items:center!important}
 #app .world-slide{height:auto!important;min-height:0!important}
 #app .world-slide-hero{grid-template-columns:minmax(0,1fr) minmax(132px,.92fr)!important;gap:7px!important}
 #app .world-copy{padding:2px 0!important;max-height:100%!important;overflow:hidden!important}
 #app .world-copy::before{display:none!important}
 #app .world-slide .world-copy strong{font-size:clamp(18px,3.9vw,26px)!important}
 #app .world-slide .world-copy small{font-size:clamp(10px,1.7vw,12px)!important;line-height:1.42!important;margin-top:3px!important}
 #app .world-status{font-size:clamp(9px,1.3vw,10px)!important;margin-top:4px!important}
 #app .world-visual{height:auto!important;aspect-ratio:1!important}
 #app .world-orb{width:min(100%,min(42svh,calc(100svh - 205px)))!important;max-width:none!important}
 #app .world-dots{min-height:16px!important;height:16px!important;align-self:center!important}
 #app .world-dot{height:11px!important;width:11px!important} #app .world-dot.is-active{width:26px!important}
 #app .world-modal-actions-full{min-height:42px!important;height:42px!important;gap:8px!important}
 #app .world-modal-actions-full button{min-height:42px!important;height:42px!important;font-size:12px!important;padding:4px 8px!important}
}

/* V104: use the screen for the actual mission, not empty margins. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .world-screen{padding:12px max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;grid-template-rows:64px minmax(0,1fr) 16px 44px!important;gap:6px!important;align-content:stretch!important}
 #app .world-screen-head{height:64px!important;min-height:64px!important;grid-template-columns:54px 1fr 68px!important;padding-top:5px!important}
 #app .world-screen-head img{height:60px!important}
 #app .world-close{width:48px!important;height:48px!important;border:1px solid rgba(162,218,255,.72)!important;background:linear-gradient(180deg,#398bc8,#123f75)!important;font-size:27px!important;line-height:1!important}
 #app .world-modal-title{padding-top:8px!important}
 #app .world-modal-title h2{font-size:clamp(25px,5vw,34px)!important;line-height:1.08!important}
 #app .world-kicker{font-size:10px!important;letter-spacing:2px!important}
 #app .world-help{display:none!important}
 #app .world-carousel-shell{grid-row:2!important;grid-template-columns:38px minmax(0,1fr) 38px!important;gap:5px!important}
 #app .world-viewport{overflow:visible!important}
 #app .world-track{overflow:visible!important}
 #app .world-slide{width:100%!important;overflow:visible!important}
 #app .world-slide-hero{grid-template-columns:minmax(0,.82fr) minmax(188px,1.18fr)!important;gap:10px!important}
 #app .world-copy{padding:6px 0!important;background:linear-gradient(90deg,rgba(0,0,0,.52),transparent)!important}
 #app .world-slide .world-copy strong{font-size:clamp(21px,4.45vw,30px)!important;line-height:1.17!important}
 #app .world-slide .world-copy small{font-size:clamp(11px,2vw,15px)!important;line-height:1.56!important;margin-top:7px!important}
 #app .world-status{font-size:clamp(10px,1.55vw,12px)!important;margin-top:7px!important}
 #app .world-visual{justify-self:center!important}
 #app .world-orb{width:min(100%,min(64svh,calc(100svh - 150px)))!important;border-width:5px!important;box-shadow:0 0 0 6px rgba(255,255,255,.10),0 0 21px var(--world-accent),0 18px 30px rgba(0,0,0,.35)!important}
 #app .world-dots{grid-row:3!important;min-height:16px!important;height:16px!important}
 #app .world-modal-actions-full{grid-row:4!important;align-self:center!important;min-height:44px!important;height:44px!important;margin:0 8px!important}
 #app .world-modal-actions-full button{min-height:44px!important;height:44px!important;font-size:13px!important;border-radius:12px!important}
}

/* V105: focused black surface, single lower back action, and breathing room above the orb. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .world-modal,#app .world-screen{background:#030507!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 #app .world-screen,#app .world-screen *{font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif!important}
 #app .world-screen-head{grid-template-columns:1fr 68px!important;padding-top:8px!important}
 #app .world-screen-head img{height:58px!important}
 #app .world-modal-title{padding-top:12px!important}
 #app .world-slide-hero{grid-template-columns:minmax(0,.9fr) minmax(180px,1.1fr)!important}
 #app .world-orb{width:min(100%,min(57svh,calc(100svh - 175px)))!important;margin-top:10px!important}
}

/* V107 — keep the new cinematic backdrop visible on phones and tablets. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .world-modal{background:rgba(0,5,16,.22)!important}
 #app .world-screen{
   background:linear-gradient(180deg,rgba(0,6,20,.12),rgba(0,6,20,.28)),url('assets/world-selection-background.webp') center center / cover no-repeat!important;
 }
 #app .world-screen::before{display:none!important}
}

/* V125 — selector-only craft alignment. These override the touch layout's shared 0/0 position. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
 #app .menu-screen .pilot-stage[data-pilot="duke"] .pilot-ship{left:3%!important;top:0!important}
 #app .menu-screen .pilot-stage[data-pilot="koji"] .pilot-ship{left:7%!important;top:0!important}
 #app .menu-screen .pilot-stage[data-pilot="hikaru"] .pilot-ship{left:0!important;top:9%!important}
 #app .menu-screen .pilot-stage[data-pilot="maria"] .pilot-ship{left:0!important;top:9%!important}
}

/* V157: keep mobile control choice compact in landscape. */
@media (orientation:landscape) and (max-height:450px){
 #app .mobile-control-panel{padding:6px 10px!important}
 #app .mobile-control-choices{gap:7px}
 #app .mobile-control-choice span{min-height:32px;font-size:12px;padding:4px 6px}
 #app .mobile-control-help{font-size:10px;margin-top:3px}
}

/* V170 — the portrait rotation gate also offers the (read-only) leaderboard.
   Playing still requires landscape; opening scores temporarily dismisses that gate. */
#app .portrait-hint .portrait-scores-btn{
  display:none!important;min-height:45px;border:1px solid #f7de86;border-radius:12px;
  padding:9px 20px;margin-top:8px;background:linear-gradient(#ffe18a,#dba83b);color:#21304a;
  font:900 16px Tajawal,Tahoma,Arial,sans-serif;cursor:pointer;
}
@media (pointer:coarse) and (orientation:portrait){
  #app .game-shell:has(#overlay:not([hidden]) .menu-screen:not([hidden])) .portrait-hint .portrait-scores-btn{display:block!important}
  #app .game-shell.scores-open .portrait-hint{display:none!important;pointer-events:none!important}
}
/* Ensure the full leaderboard, not the old 720px-wide card, fits small phones. */
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
  #app .scores-card{width:min(100%,620px)!important;max-width:620px!important}
  #app .scores-card .best-scores{overflow-y:auto!important;touch-action:pan-y!important}
}

/* V175 installed-PWA shell: native-like full viewport, no browser bounce/selection. */
html.installed-pwa,html.installed-pwa body{width:100%;height:100%;min-height:100dvh;overflow:hidden;overscroll-behavior:none;background:#07131e}
html.installed-pwa body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.installed-pwa #app{width:100%;height:100dvh;min-height:100dvh;overflow:hidden}