/* Rotate the portal viewport, never a native canvas or its pointer coordinates. */
html[data-default-landscape-stage="course"] body.island-home[data-home-settings] .world-home { visibility:hidden; transform:none; }
@media (orientation:portrait) and (max-width:1024px) {
  html:not([data-landscape-upright="true"]) body.island-home[data-home-settings] { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  body.island-home[data-home-settings] .world-home {
    position:fixed; inset:auto; left:50%; top:50%; width:100vh; height:100vw; width:var(--endless-landscape-width,100vh); height:var(--endless-landscape-height,100vw); min-height:0;
    transform:translate(-50%,-50%) rotate(90deg); transform-origin:center; animation:none;
    display:grid; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:minmax(0,1fr); gap:4px; align-items:center; justify-items:center;
    padding:4px; padding:max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-top));
  }
  body.island-home[data-home-settings] .world-stage,
  html.home-immersive body.island-home[data-home-settings] .world-stage {
    grid-area:1/1; width:min(100%,1280px,calc((var(--endless-landscape-height,100dvw) - 8px - env(safe-area-inset-left) - env(safe-area-inset-right)) * 16 / 9));
    height:auto; aspect-ratio:16/9; transform:none; animation:none;
  }
  body.island-home[data-home-settings] .home-compact-controls { grid-area:1/2; flex-direction:column-reverse; width:44px; height:auto; min-height:0; gap:8px; }
  body.island-home[data-home-settings] .home-compact-controls button { box-sizing:border-box; width:44px; min-width:44px; min-height:44px; padding:5px 3px; }
  body.island-home[data-home-settings] .home-settings-open { flex-direction:column; gap:3px; font-size:12px; }
  body.island-home[data-home-settings] .home-feature-toggle { justify-content:center; }
  body.island-home[data-home-settings] .home-feature-toggle > span:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  body.island-home[data-home-settings] .home-drawer-arrow { font-size:22px; }
  body.island-home[data-home-settings] .home-feature-drawer { grid-area:2/1/3/3; width:min(100%,650px); max-height:calc(var(--endless-landscape-height,100dvw) * .46); }
  html[data-home-drawer-open="true"] body.island-home[data-home-settings] .world-home { grid-template-rows:minmax(0,1fr) auto; }
  html[data-home-drawer-open="true"] body.island-home[data-home-settings] .world-stage { width:min(100%,1280px,calc((var(--endless-landscape-height,100dvw) - 64px - env(safe-area-inset-left) - env(safe-area-inset-right)) * 16 / 9)); }
  html:not([data-landscape-upright="true"]) #app-stage-shell {
    position:fixed; inset:auto; left:50%; top:50%; width:var(--endless-landscape-width,100dvh); height:var(--endless-landscape-height,100dvw);
    transform:translate(-50%,-50%) rotate(90deg); transform-origin:center; display:flex; flex-direction:column; overflow:hidden;
  }
  html:not([data-landscape-upright="true"]) #app-stage-frame { flex:1 1 auto; width:100%; height:0; min-height:0; border:0; }
  html[data-landscape-upright="true"] #app-stage-shell { position:fixed; inset:0; width:100%; height:100dvh; transform:none; }
}
/* A populated drawer can have more than one row. Keep the picture and anchors
   in the same16:9 rectangle using the actual remaining, untransformed height. */
html[data-default-landscape] body.island-home[data-home-settings] .world-stage,
html[data-home-drawer-open="true"][data-default-landscape] body.island-home[data-home-settings] .world-stage {
  width:min(100%,1280px,calc(var(--endless-home-picture-height,100dvh) * 16 / 9)); height:auto; aspect-ratio:16/9;
}
/* These controls live outside the game viewport and remain readable in its upright fallback. */
#endless-landscape-retry { min-height:32px; border:1px solid #d6c799; border-radius:999px; padding:6px 12px; background:#fffdf5; color:#285f62; font:700 12px/1.2 system-ui,sans-serif; }
#endless-landscape-retry[hidden] { display:none!important; }
#endless-landscape-retry:focus-visible { outline:3px solid #dd9a2e; outline-offset:2px; }

/* Keep every mode top control row clear of the phone status area (battery /
   notch) when the phone is held in landscape. Only top and padding-top move;
   no game logic, artwork or relative layout is touched. */
.alphabet-ribbons-left, .ribbon-chinese { top: max(48px, env(safe-area-inset-top, 0px)) !important; }
#paperHeaderHome, #paperHeaderFullscreen { top: max(48px, env(safe-area-inset-top, 0px)) !important; }
.machine-hud { padding-top: max(48px, env(safe-area-inset-top, 0px)) !important; }
.top-controls { top: max(48px, env(safe-area-inset-top)) !important; }
#stage-shell > #endless-native-home { top: max(48px, env(safe-area-inset-top)) !important; }
/* The phone status/battery strip overlays the page in fullscreen, so the top
   rows also shift right off the corner. */
.alphabet-ribbons-left { left: max(28px, env(safe-area-inset-left, 0px)) !important; }
.machine-hud { padding-left: max(28px, env(safe-area-inset-left, 0px)) !important; }
/* A deferred tap is read as "needs several taps" on a phone. */
.alphabet-ribbons-left, .ribbon-chinese, #paperHeaderHome, #paperHeaderFullscreen,
.machine-hud .machine-button, .top-controls button, #stage-shell > #endless-native-home { touch-action: manipulation; }
/* Wordplay only: its tab sits slightly higher and further from the corner. */
.machine-hud { padding-top: max(28px, env(safe-area-inset-top, 0px)) !important; padding-left: max(64px, env(safe-area-inset-left, 0px)) !important; }