/* The stage fills the browser's visible viewport. Only real cutouts reserve space. */
html,body{position:fixed;inset:0;width:100%;height:100%;overscroll-behavior:none}
#viewport{position:fixed;inset:0 auto auto 0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#101110;touch-action:none}
#viewport:fullscreen{background:#101110}
#landscape{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
.safe-area-probe{position:absolute;width:0;height:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#landscape #safe-top{position:absolute;inset:0 0 auto;height:var(--safe-top);background:#101110}
#landscape #frame{position:absolute;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);width:auto;height:auto;aspect-ratio:auto;max-width:none;max-height:none;margin:0}
#rotate{display:none!important}
#world,#world canvas{touch-action:none}
#frame .home-copy h1{font-size:clamp(30px,4.9cqw,76px)}
#frame .home-copy h2{font-size:clamp(18px,2.4cqw,29px)}
#frame .account-overlay{max-width:100%;max-height:100%;overflow:auto;touch-action:pan-y}
#frame .account-panel{max-height:100%;overflow:auto;overscroll-behavior:contain}
#modal{max-height:100%;touch-action:pan-y}
#modal .modal-card{max-height:100%;min-height:0}
#modal-body{overscroll-behavior:contain}
@container(max-height:420px){
  #frame .account-panel{max-width:480px;border-width:14px;border-image-width:14px;padding:0 12px 2px;font-size:12px;line-height:1.35}
  #frame .account-panel h2{font-size:20px;margin:0 0 3px}
  #frame .account-panel p{margin:3px 0}
  #frame .account-panel form{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  #frame .account-panel form label{margin:0}
  #frame .account-panel form button,#frame .account-panel form [role=status]{grid-column:1/-1}
  #frame .account-panel button{min-height:34px;margin-top:3px}
  #frame .account-panel input{height:32px;margin:2px 0;font-size:16px}
}
#viewport[data-text-mode=true] #frame .account-overlay{align-items:center;padding:8px}
#viewport[data-text-mode=true] #frame .account-panel{width:min(420px,100%);font-size:12px;line-height:1.35;border-width:14px;border-image-width:14px;padding:2px 10px}
#viewport[data-text-mode=true] #frame .account-panel h2{font-size:20px;margin:2px 0}
#viewport[data-text-mode=true] #frame .account-panel p{margin:4px 0}
#viewport[data-text-mode=true] #frame .account-panel form{display:flex;flex-direction:column;gap:3px}
#viewport[data-text-mode=true] #frame .account-panel label{margin:0}
#viewport[data-text-mode=true] #frame .account-panel input{font-size:16px;min-height:34px;margin:2px 0}
#viewport[data-text-mode=true] #frame .account-panel button{min-height:34px;margin-top:3px}
#viewport[data-text-mode=true] #modal{height:100%;padding:6px;align-items:center}
#viewport[data-text-mode=true] #modal .modal-card{width:min(560px,100%);border-width:15px;border-image-width:15px;padding:2px 6px}
#viewport[data-text-mode=true] #modal h2{font-size:20px;margin:3px 0}
#viewport[data-text-mode=true] #modal-body{max-height:none;flex:1;overflow:auto}
#viewport[data-text-mode=true] #modal textarea{font-size:16px;min-height:65px}
#viewport[data-text-mode=true] #modal-actions{flex-shrink:0}