/* Shared by the UI Kit's real-page specimen and every public route.
   The document owns scrolling; viewport units never cap its content height. */
@media (max-width: 760px) and (orientation: portrait) {
  :root {
    --mobile-dock-bottom:12px;
    --mobile-dock-space:calc(var(--mobile-dock-visible) + var(--mobile-dock-bottom));
  }
  html, body {
    height:auto;
    overflow-x:clip !important;
    overflow-y:visible;
  }
  body { display:block; min-height:100svh; }
  body > header { position:sticky; top:0; }
  /* The shared modal lock fixes body at the saved document offset. Keep its
     persistent header viewport-bound and reserve its measured flow height. */
  body.page-scroll-locked { padding-top:var(--site-header-height, 62px); }
  body.page-scroll-locked > header { position:fixed; inset-inline:0; }
  body > main {
    overflow:visible;
    overscroll-behavior:auto;
    padding-bottom:calc(var(--mobile-dock-space) + 18px);
  }
  html { scroll-padding-block:var(--site-header-height, 62px) calc(var(--mobile-dock-space) + 18px); }
  #site-footer { display:none; }
  .flavor-detail { padding-bottom:calc(var(--mobile-dock-space) + 18px); }
  html[data-active-page="menu-flavor"] body > main { padding-bottom:0; }

  /* This is only a logical group, not a viewport-sized fixed paint container.
     Safari samples fixed container edges for its chrome: a persistent full-
     screen host can retain the loader's tint and cover the scrolling underlay.
     Give the three controls their own fixed boxes and stable global layers.
     No transform/filter/paint containment may be added to their ancestors. */
  .mobile-viewport-chrome {
    --mobile-nav-overlay-layer:71;
    --mobile-nav-dock-layer:72;
    --mobile-nav-drawer-layer:73;
    display:contents;
  }
  .mobile-viewport-chrome > .overlay,
  .mobile-viewport-chrome > .mobile-menu,
  .mobile-viewport-chrome > .mobile-dock-layer { position:fixed; }
  .mobile-viewport-chrome > .overlay { z-index:var(--mobile-nav-overlay-layer); }
  .mobile-dock-layer--viewport { display:block; }
  .mobile-dock { display:grid; z-index:var(--mobile-nav-dock-layer); }
  .mobile-viewport-chrome > .mobile-menu { z-index:var(--mobile-nav-drawer-layer); }
  .mobile-menu {
    max-height:calc(100% - var(--mobile-dock-space) - var(--safe-area-top) - 36px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  #page-home .hero.has-game {
    height:max(320px, calc(var(--mobile-shell-viewport-height) - var(--site-header-height, 62px) - var(--mobile-dock-height)));
  }
}

/* Safari places fixed bottom:0 above its controls. Only standalone needs a
   home-indicator allowance; the painted capsule may extend into safe space
   while its icon/text and primary hit area remain above the gesture region. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone) {
  :root { --mobile-dock-bottom:max(10px, calc(var(--safe-area-bottom) - 14px)); }
}
@media (max-width:760px) and (orientation:portrait) {
  html.site-game-canvas-brown, html.site-game-canvas-brown body {
    background-color:#422817 !important;
  }
}