:root { --stage-width:100vw; --stage-height:100dvh; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; }
.landscape-stage { position:fixed; top:0; left:0; width:var(--stage-width); height:var(--stage-height); overflow:clip; transform-origin:0 0; container:stage / size; }
body.is-portrait .landscape-stage { left:100%; transform:rotate(90deg); }
#play-stage { display:flex; flex-direction:column; background:#0b2028; }
body.is-portrait dialog { position:fixed; inset:auto; left:50%; top:50%; margin:0; width:min(540px,calc(var(--stage-width) - 24px)); max-width:none; max-height:calc(var(--stage-height) - 24px); transform:translate(-50%,-50%) rotate(90deg); }
body.is-portrait .noscript { transform:rotate(90deg); }
@media(orientation:portrait) {
  body:not(.orientation-ready) .landscape-stage { left:100%; width:100dvh; height:100vw; transform:rotate(90deg); }
}