/* Preserve the existing UI artwork; place it around a landscape play area. */
body{display:grid;place-items:center;background:#20262c}
.game-shell{width:100vw;max-width:none;height:100dvh;border:0;background:#6c655b}.hud{right:22px;left:22px}.hud .level{position:absolute;left:58px;top:0;font-size:22px;text-align:left}.hud .round-button{margin-left:auto}.stage-badge{top:92px;left:22px}.game-bottom{left:50%;right:auto;transform:translateX(-50%);width:min(640px,65vw);bottom:max(12px,env(safe-area-inset-bottom));gap:6px}.steps{gap:8px}.step{height:62px}.angle-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);white-space:nowrap}.angle-controls button{padding:6px 12px}#joystick{bottom:36px;left:28px;right:auto;width:126px;height:126px}.stick-arrows{line-height:36px}#joystick-knob{width:54px;height:54px}.first-person .fp-label{top:20px}.help{top:80px}.stage-badge{width:180px}#loading{background:#333d48;color:#fff0d8}#gate-hint{font-size:11px}.landscape-notice{display:none}
/* A single landscape layout is used on every screen. */
/* Fill wide phone screens; only the controls respect display cutouts. */
.game-shell{width:100%;max-width:none;height:100vh;height:100dvh;margin:0;border:0}
@media(max-height:500px),(max-width:950px){.hud{top:10px}.hud .level{font-size:18px}.brand-bubble{font-size:30px}.round-button{width:38px;height:38px;font-size:25px}.stage-badge{top:66px;left:16px;width:166px}.help{top:58px;right:22px}.game-bottom{width:55%;bottom:5px}.step{height:49px;border-radius:12px;font-size:9px;gap:1px}.step .tool-glyph{font-size:20px;line-height:24px}.angle-controls button{min-height:27px;padding:3px 10px}.angle-controls{bottom:calc(100% + 4px)}#joystick{width:112px;height:112px;left:20px;right:auto;bottom:25px}.stick-arrows{line-height:27px}#joystick-knob{width:48px;height:48px}.first-person .fp-label{top:10px}#advance{min-height:30px;padding:6px}#gate-hint{font-size:9px}}
.hud{left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top))}
.stage-badge{left:max(16px,env(safe-area-inset-left))}
.help{right:max(22px,env(safe-area-inset-right))}
#joystick{left:max(20px,env(safe-area-inset-left));right:auto;bottom:max(25px,env(safe-area-inset-bottom))}
.game-bottom{bottom:max(5px,env(safe-area-inset-bottom))}
/* No portrait game or second framebuffer: keep the hidden shell's logical
   dimensions landscape, and stop rendering until the user turns the phone. */
#landscape-notice{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:24px;padding:28px;background:linear-gradient(155deg,#164c78,#0c2b48);color:white;text-align:center}
#landscape-notice[hidden]{display:none}
#landscape-notice strong{font-size:24px;letter-spacing:1px}
#landscape-notice p{margin:0;color:#c8e7f8;font-size:14px;font-weight:500}
.rotate-phone{width:112px;height:64px;border:4px solid #d7f3ff;border-radius:13px;display:grid;place-items:center;font-size:44px;line-height:1;box-shadow:inset 0 0 0 5px #164c78;background:#2c739b}
@media(orientation:portrait){
 .game-shell{position:fixed;left:0;top:0;width:100dvh;height:100dvw;margin:0;visibility:hidden;pointer-events:none}
 #landscape-notice{display:flex}
 body.capture-mode #landscape-notice{display:flex!important}
 dialog[open]{visibility:hidden;pointer-events:none}
 dialog::backdrop{display:none}
}