/* Only the installed app changes layout; the existing browser version stays intact. */
body.native-app {
  --app-top: env(safe-area-inset-top, 0px);
  --app-left: env(safe-area-inset-left, 0px);
  --app-right: env(safe-area-inset-right, 0px);
  --app-bottom: env(safe-area-inset-bottom, 0px);
  --app-toolbar: 48px;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (orientation: landscape) {
body.native-app header {
  height: calc(var(--app-toolbar) + var(--app-top));
  padding: calc(4px + var(--app-top)) max(12px, var(--app-right)) 4px max(12px, var(--app-left));
}
body.native-app main { height: calc(100dvh - var(--app-toolbar) - var(--app-top)); }
body.native-app .game { padding: 0 var(--app-right) var(--app-bottom) var(--app-left); }
body.native-app .scene {
  width: min(calc(100vw - var(--app-left) - var(--app-right)), calc((100dvh - var(--app-toolbar) - var(--app-top) - var(--app-bottom))*16/9));
}
body.native-app .controls { display: flex !important; bottom: calc(var(--app-bottom) + 28px); }
body.native-app .controls .jump { order: 0; width: 96px; height: 96px; flex-shrink: 0; }
body.native-app .controls .dpad { order: 2; margin-left: auto; grid-template-columns: 48px 48px 48px; grid-template-rows: 44px 44px; }
body.native-app .skill-controls { display: flex !important; right: auto; left: max(14px, var(--app-left)); bottom: 110px; }
}
body.native-app dialog { max-height: calc(100dvh - var(--app-top) - var(--app-bottom) - 16px); }
body.native-app :is(.maze-dialog, .mini-dialog, .restaurant-dialog) {
  max-width: calc(100vw - var(--app-left) - var(--app-right) - 48px);
  max-height: min(88dvh, calc(100dvh - var(--app-top) - var(--app-bottom) - 40px));
}
@media (orientation: portrait) {
  body.native-app { --app-toolbar: 56px; }
}
#mobileBoot { position: fixed; inset: 0; z-index: 100000; display: grid; place-content: center; padding: 24px; text-align: center; background: #0c1b2d; color: white; }
#mobileBoot button { padding: 14px 20px; border-radius: 12px; background: #ffdc62; color: #142f52; }