/* Preserve the 16:9 world inside the currently visible browser area, including notches. */
html,body{height:100%;height:100dvh;width:100%;overflow:hidden}
body{--usable-w:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));--usable-h:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));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)}
#stage{width:min(var(--usable-w),calc(var(--usable-h) * 1.77777778));height:min(var(--usable-h),calc(var(--usable-w) * .5625))}
#rotateNotice{display:none;position:fixed;inset:0;z-index:30;padding:36px;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse at 50% 30%,#283b69,#09172a 75%);gap:16px}
#rotateNotice strong{font-size:28px;color:#ffbdd8}#rotateNotice p{font-size:17px;line-height:1.8;color:#c0d9ed;margin:0}
.turnPhone{width:66px;height:116px;border:4px solid #a2e3f4;border-radius:16px;position:relative;margin:25px;box-shadow:0 0 45px #69cfe633;animation:turnPhone 3.6s ease-in-out infinite}
.turnPhone::after{content:'';position:absolute;width:20px;height:4px;border-radius:3px;background:#f3beda;left:19px;bottom:7px}
@keyframes turnPhone{0%,20%{transform:rotate(0)}55%,85%{transform:rotate(90deg)}100%{transform:rotate(0)}}
.mobile-portrait #rotateNotice{display:flex}.mobile-portrait #stage{visibility:hidden}
@media(prefers-reduced-motion:reduce){.turnPhone{animation:none;transform:rotate(90deg)}}
@media(max-height:420px) and (orientation:landscape){.menu{top:7%;left:6%;width:68%}.menu h1{margin:8px 0;font-size:clamp(22px,4vw,38px)}.menu .eyebrow{font-size:10px;letter-spacing:2px}.menu .row{gap:7px}.menu p{margin:8px 0;line-height:1.6}.menuFoot{bottom:3%}.menuFoot button{min-height:44px}.dialog{bottom:3%;padding:12px;gap:10px}.dialog p{font-size:14px}.portrait{width:48px;height:60px}.panel{max-height:94%;padding:15px 20px}}