/* Pixel phone prompt stays above game panels and absorbs every touch. */
#rotatePhone{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;box-sizing:border-box;padding:calc(env(safe-area-inset-top) + 24px) calc(env(safe-area-inset-right) + 24px) calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 24px);background:#07050c;color:#f3e6c8;touch-action:none;font:18px/1.7 var(--font-px);text-align:center}
#rotatePhone[hidden]{display:none}
.rotate-card{max-width:320px;border:4px solid #b8a07a;box-shadow:0 0 0 4px #221d2e,inset 0 0 0 4px #221d2e;padding:32px 24px;background:#15101e}
.rotate-card p{margin:20px 0 0}
.rotate-icon{height:104px;display:grid;place-items:center}
.rotate-device{width:44px;height:76px;border:4px solid #f3e6c8;box-shadow:4px 4px 0 #07050c;background:#221d2e;position:relative;animation:rotate-phone 2.4s steps(8,end) infinite}
.rotate-device:before{content:'';position:absolute;inset:8px 4px 16px;background:#6ad19a;box-shadow:inset 4px 4px 0 #39795b}
.rotate-device i{position:absolute;width:8px;height:4px;bottom:4px;left:18px;background:#f3e6c8}
@keyframes rotate-phone{0%,15%{transform:rotate(0deg)}55%,85%{transform:rotate(90deg)}100%{transform:rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.rotate-device{animation:none;transform:rotate(90deg)}}
/* The world canvas already fills the viewport. Only UI stays inside the safe rectangle. */
.mobile-landscape .screen{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.mobile-landscape #inv{right:calc(env(safe-area-inset-right) + 10px)}
.mobile-landscape #phone{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mobile-landscape #keyhelp{right:calc(env(safe-area-inset-right) + 12px);top:calc(env(safe-area-inset-top) + 56px)}