#world-view {position:relative;isolation:isolate}
html.game-landscape-rotated {overflow:hidden;height:100%}
/* Rotate the complete school UI, just as the trailer rotates its complete player.
   The logical game remains wide; the browser can keep its native portrait screen. */
body.game-landscape-rotated:not(.signed-out):has(#world-view:not([hidden])) {
  position:fixed;inset:0 auto auto 0;width:100dvh;height:100dvw;
  transform-origin:0 0;transform:translateX(100dvw) rotate(90deg);
}
html.game-fullscreen body:not(.mobile-gameplay) .topbar,
html.game-fullscreen body:not(.mobile-gameplay) .member-bottom-nav {display:none!important}
/* Keep the drawer available from the bottom menu without reserving header space. */
body.mobile-gameplay > .topbar {display:contents}
body.mobile-gameplay > .topbar > :not(.site-menu) {display:none}
body.mobile-gameplay > .member-bottom-nav {display:grid;position:static;flex:none}
body.mobile-gameplay .site-menu {
  position:fixed;inset:0 0 var(--member-nav-height,63px);z-index:40;max-height:none;
}
/* Touch controls stay available at both native and CSS-rotated landscape widths. */
.mobile-game .world-viewport .touch-pad {
  display:grid;position:absolute;left:12px;bottom:12px;z-index:13;
  grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px;
}
.mobile-game .touch-pad button {background:#15252ae6;border:1px solid #cfb98199;border-radius:5px;color:#fff;touch-action:none}
.mobile-game .touch-pad button:first-child {grid-column:2}
.mobile-game .touch-pad button:nth-child(2) {grid-column:1;grid-row:2}
.mobile-game .touch-pad button:nth-child(3) {grid-column:2;grid-row:2}
.mobile-game .touch-pad button:nth-child(4) {grid-column:3;grid-row:2}
.mobile-game .world-viewport .room-chat {left:168px;right:12px;bottom:12px;width:auto;transform:none}
.mobile-game .world-viewport .world-corner {top:12px;right:12px;bottom:auto}
.mobile-game .world-viewport .library-tools {top:68px;right:12px}