/* v15: fixed landscape frame plus hard screen isolation. */
html,body{width:100%;height:100%;min-height:100%;overflow:hidden;background:radial-gradient(circle at 22% 12%,rgba(255,196,76,.13),transparent 34%),linear-gradient(145deg,#100703,#050201 72%)}
body{display:grid;place-items:center;padding:0;margin:0}
.app-shell{width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));aspect-ratio:16/9;max-width:1366px;max-height:768px;position:relative;overflow:hidden;border-radius:clamp(0px,1.4vw,24px);box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,196,76,.22)}
.app-shell::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -30px 80px rgba(0,0,0,.18);z-index:100}

/* Critical: later CSS may style screen types, but only the active screen may ever be displayed/clickable. */
.screen{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:none!important;pointer-events:none!important;overflow:hidden}
.screen.screen-active{display:flex!important;pointer-events:auto!important;z-index:10!important}
.screen.screen-active.menu-screen{display:grid!important}
.screen.screen-active.level-map-screen{display:grid!important}
.screen.screen-active.game-screen{display:grid!important}
.screen.screen-active.admin-screen{display:flex!important}
.screen.screen-active.settings-screen,.screen.screen-active.howto-screen,.screen.screen-active.splash-screen{display:flex!important}

button,input,select,textarea{pointer-events:auto;touch-action:manipulation}

@media (min-width:1100px) and (min-height:720px){body{padding:18px}.app-shell{width:min(96vw,1366px);height:min(96vh,768px)}}
@media (orientation:portrait){body{align-items:start;padding-top:max(8px,env(safe-area-inset-top))}.app-shell{width:100vw;height:calc(100vw * 9 / 16);min-height:360px;border-radius:0}.app-shell:before{content:'Landscape-Frame aktiv';position:absolute;right:8px;top:8px;z-index:101;padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.48);border:1px solid rgba(255,196,76,.25);color:#ffd16a;font-size:10px;font-weight:900;pointer-events:none}}
@media (max-height:420px){.app-shell{height:100vh;width:calc(100vh * 16 / 9);max-width:100vw}.screen{padding:7px 9px!important}}