/* Fullscreen and viewport safety layer. Loaded last. */
:root {
  --app-width: 100vw;
  --app-height: 100dvh;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #030703;
}

body {
  position: fixed;
  inset: 0;
  touch-action: manipulation;
}

.stage {
  width: var(--app-width, 100vw) !important;
  height: var(--app-height, 100dvh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
}

html.is-fullscreen,
html:fullscreen,
html:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #030703;
}

html.is-fullscreen body,
html:fullscreen body,
html:-webkit-full-screen body {
  width: 100vw;
  height: 100dvh;
}

html.is-fullscreen .stage,
html:fullscreen .stage,
html:-webkit-full-screen .stage {
  inset: 0 !important;
}

@media (orientation: portrait) and (max-width: 1180px) {
  .stage {
    width: var(--app-width, 100vw) !important;
    height: var(--app-height, 100dvh) !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
}