/* V0.24: iPhone PWA shell with stable visual-viewport and CSS landscape fallback handling. */
:root{
  color-scheme:dark;
  --pwa-safe-top:env(safe-area-inset-top,0px);
  --pwa-safe-right:env(safe-area-inset-right,0px);
  --pwa-safe-bottom:env(safe-area-inset-bottom,0px);
  --pwa-safe-left:env(safe-area-inset-left,0px);
  --app-landscape-width:100dvw;
  --app-landscape-height:100dvh
}
html{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#120806
}
html,body{
  min-width:100%;
  min-height:100%;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none
}
body{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#120806;
  -webkit-touch-callout:none;
  transform-origin:top left
}
#viewport{
  width:100vw;
  width:100dvw;
  height:100vh;
  height:100dvh;
  padding-top:max(0px,var(--pwa-safe-top));
  padding-right:max(0px,var(--pwa-safe-right));
  padding-bottom:max(0px,var(--pwa-safe-bottom));
  padding-left:max(0px,var(--pwa-safe-left))
}
.rotate{display:none!important}

/* When iOS keeps a web app in portrait, rotate the whole logical game surface.
   Holding the phone horizontally now shows a full-size landscape game instead of a tiny letterboxed stage. */
html[data-force-landscape="true"] body{
  position:absolute;
  width:var(--app-landscape-width);
  height:var(--app-landscape-height);
  min-width:0;
  min-height:0;
  transform:rotate(90deg) translateY(-100%)
}
html[data-force-landscape="true"] #viewport{
  width:100%;
  height:100%;
  padding-top:max(0px,var(--pwa-safe-right));
  padding-right:max(0px,var(--pwa-safe-bottom));
  padding-bottom:max(0px,var(--pwa-safe-left));
  padding-left:max(0px,var(--pwa-safe-top))
}
html[data-force-landscape="true"] .tutorial-path{display:none!important}

@media (display-mode:fullscreen),(display-mode:standalone){
  html,body,#viewport{background:#0b0504}
  #viewport{
    padding-right:max(4px,var(--pwa-safe-right));
    padding-left:max(4px,var(--pwa-safe-left))
  }
}
@media (orientation:landscape) and (max-height:500px){
  #viewport{align-items:center;justify-content:center}
}