/* layout-modes.css
   Mobile and fullscreen layout overrides.
   Load after base.css: these override .unity-shell, .unity-canvas-wrap, and #unity-canvas. */

/* Mobile fullscreen styles - applied via JavaScript detection */
body.is-mobile {
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  gap: 0;
  min-height: calc(100vh + 1px);
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* Smooth transition to mask address bar hiding scroll */
  transition: transform 0.2s ease-out, min-height 0.2s ease-out;
}

body.is-mobile header {
  display: none;
}

/* Hide header in fullscreen mode (desktop) */
:fullscreen header,
body.in-fullscreen header {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -9999 !important;
}

/* Optimize layout in fullscreen mode */
:fullscreen body,
body.in-fullscreen {
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

:fullscreen .unity-shell,
body.in-fullscreen .unity-shell {
  max-width: 100% !important;
  width: 100% !important;
  height: 100vh !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

:fullscreen .unity-canvas-wrap,
body.in-fullscreen .unity-canvas-wrap {
  border-radius: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

:fullscreen #unity-canvas,
body.in-fullscreen #unity-canvas {
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body.is-mobile .unity-shell {
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none; /* Remove to allow position: fixed to work */
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  /* Smooth transition to mask address bar hiding */
  transition: height 0.2s ease-out, opacity 0.3s ease-in-out;
  opacity: 1;
}

/* Fade out/in during orientation change to mask address bar hiding */
body.is-mobile.orientation-changing .unity-shell {
  opacity: 0;
}

body.is-mobile .unity-canvas-wrap {
  border-radius: 0;
  height: 100%;
  width: 100%;
  contain: none; /* Remove to allow position: fixed to work */
}

body.is-mobile #unity-canvas {
  border-radius: 0;
  touch-action: none; /* Prevents default touch behaviors */
}