/* The game owns landscape. This applies before scripts or the SDK load. */
#app {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  transform: translate(-50%, -50%);
  transform-origin: center;
  container: game / size;
}

@media (orientation: portrait) {
  #app {
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
    --safe-top: env(safe-area-inset-right);
    --safe-right: env(safe-area-inset-bottom);
    --safe-bottom: env(safe-area-inset-left);
    --safe-left: env(safe-area-inset-top);
  }
}

/* Phaser must not fit against a transformed (portrait) bounding rectangle. */
#game canvas { width: 100% !important; height: 100% !important; margin: 0 !important; }