.site-game-preloader__viewport { display:contents; }

/* Browser surface contract: paint can extend behind browser controls, while
   interactive content is laid out in the unobscured viewport. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:browser) {
  .site-game-preloader {
    position:absolute;
    bottom:0;
    min-height:100lvh;
    align-items:start;
  }
  .site-game-preloader__viewport {
    display:grid;
    place-items:center;
    height:100svh;
    width:100%;
    position:relative;
  }
  html.site-game-canvas-brown body > header {
    position:static;
    visibility:hidden;
    background-color:#422817;
  }
  html.site-game-canvas-brown body > main.mobile-menu-content { background-color:transparent; }
}

/* ALTRO filters main itself in both modes; its header sibling stays sharp. */

/* Loading edge contract validated in the UI Kit real-page specimen. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:browser) {
  /* Keep the document edge brown while the orange pattern moves below it. */
  .site-game-preloader::after {
    content:'';
    position:absolute;
    inset:0 0 auto;
    height:clamp(48px, 8svh, 72px);
    background:linear-gradient(to bottom, #422817 12px, #42281700);
    pointer-events:none;
  }
}
/* Reserve the dock once in both modes; the map section supplies its 24px gap. */
@media (max-width:760px) and (orientation:portrait) {
  html[data-active-page="dove-siamo"] body {
    display:grid;
    grid-template-rows:auto minmax(0, 1fr);
    height:100dvh;
    min-height:0;
  }
  html[data-active-page="dove-siamo"] body > main {
    min-height:0;
    padding-bottom:var(--mobile-dock-space);
  }
  #page-dove-siamo.active,
  #page-dove-siamo .location-page-section { height:100%; }
}