/*
 * MixKit viewport (Mobile & Tablet Fix Phase 1)
 *
 * The shared page frame for every game: a root that never scrolls or
 * rubber-bands, a 100dvh stage, the device safe-area insets as custom
 * properties, and overlay rules so a menu scrolls instead of clipping.
 *
 * Link it BEFORE the game's own styles and pair it with
 * `viewport-fit=cover` in the page's viewport meta:
 *
 *   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 *   <link rel="stylesheet" href="../src/kit/viewport.css">
 */

/* The page itself never scrolls (WEB-2); panels that need to scroll do it
   inside their own bounded container. */
html,
body {
  overflow: hidden;
}

/* No pull-to-refresh, no rubber-band, no scroll chaining out of the game. */
html {
  overscroll-behavior: none;
  /* Device safe areas. They resolve to 0 until the page opts in with
     viewport-fit=cover, so using them is always safe. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* The stage: exactly the visible screen. 100vh first for browsers without
   dynamic viewport units; 100dvh follows the browser toolbars. Its content
   box is the safe area, so a child that fills it never sits under a notch. */
.mixkit-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/*
 * Overlays (menus, title cards, dialogs). A flex container that scrolls, with
 * the child centered by auto margins: centered when it fits, and when it does
 * not, the margins collapse to zero and the overlay scrolls, so the first and
 * last controls are always reachable. Plain `align-items: center` would clip
 * the top of a tall child where scrolling cannot reach it.
 */
.mixkit-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    max(12px, var(--safe-top))
    max(12px, var(--safe-right))
    max(12px, var(--safe-bottom))
    max(12px, var(--safe-left));
}

.mixkit-overlay > * {
  margin: auto;
  max-width: 100%;
}