/* Safari can expose the document canvas behind its browser controls.
   Paint the same current scene there; the interactive stage still uses dvh.
   A stable large background avoids rescaling when the address bar/keyboard moves.
   Installed Home Screen mode keeps its already-tested viewport contract. */
@media (display-mode:browser) {
  @media (max-width:600px), (hover:none) and (pointer:coarse) {
    html.game-document {
      --browser-background-height:100vh;
      width:100%;height:var(--browser-background-height);min-height:var(--browser-background-height);
      background:var(--browser-shade,linear-gradient(transparent,transparent)),var(--browser-scene,var(--page-scene,none));
      background-position:center;background-size:cover;background-repeat:no-repeat;
      background-color:var(--scene-edge-color,#514138);
    }
    @supports(height:100lvh) {html.game-document{--browser-background-height:100lvh}}
    html.game-document:has(.interface-device){--browser-shade:linear-gradient(180deg,transparent 52%,#211a2499 85%,#201720c9)}
    html.game-document:has(.interface-device:not([data-route=home]):not([data-route=face])){--browser-shade:linear-gradient(#241c27df,#241c27df)}
    html.game-document:has(#scenePage:not(.hidden)){--browser-shade:linear-gradient(#0000,#0001)}
    html.game-document:has(#phonePage:not(.hidden)){--browser-shade:linear-gradient(#110d1099,#110d1099)}
    /* Both root surfaces supply the actual scene and its sampled edge color.
       A transparent body can make Safari fall back to the old dark canvas. */
    html.game-document body {display:block;width:100%;height:100%;min-height:100%;background:inherit}
    html.game-document .device {
      /* Avoid Safari solid edge extension from viewport-constrained layers (WebKit 301756). */
      position:relative;left:0;top:var(--viewport-offset,0px);transform:none;width:100%;max-width:none;
      height:var(--viewport-height,100dvh);border-radius:0;box-shadow:none;
      --stage-height:var(--viewport-height,100dvh);
      --scene-height:var(--scene-viewport-height,var(--viewport-height,100dvh));
    }
    html.game-document .interface-device {background:transparent!important}
    html.game-document #worldBackground,
    html.game-document #sceneBackground,
    html.game-document #phoneBackground,
    html.game-document .portrait-shade {height:var(--browser-background-height);bottom:auto}
    html.game-document .interface-top {
      padding-left:max(12px,env(safe-area-inset-left,0px));
      padding-right:max(12px,env(safe-area-inset-right,0px));
    }
    html.game-document .interface-nav {
      padding-left:max(8px,env(safe-area-inset-left,0px));
      padding-right:max(8px,env(safe-area-inset-right,0px));
    }
  }
}

/* The interactive game remains a dvh-high overlay; only its existing scene
   layers enter a taller document painting plane. Unlike a sticky game stage,
   browser-toolbar changes do not resize or reposition the portrait. */
@media (display-mode:browser) {
  @media (max-width:600px) {
    html.game-document.browser-art-mode {
      --browser-photo-height:100lvh;
      width:100%;height:auto;min-height:160lvh;overflow:visible;
    }
    @supports (height:100svh) {
      html.game-document.browser-art-mode {
        /* Large and small viewports stay stable as Safari's toolbar moves. */
        --browser-photo-height:calc(100lvh + 100lvh - 100svh + 100lvh - 100svh);
      }
    }
    html.game-document.browser-art-mode body {
      display:block;width:100%;height:auto;min-height:160lvh;overflow:visible;
      background:transparent;
    }
    html.game-document.browser-art-mode #browserArt {
      position:relative;z-index:0;width:100%;height:160lvh;overflow:visible;
      pointer-events:none;
      --scene-height:var(--browser-photo-height);
      --portrait-top:calc(86px + var(--ui-top-inset,env(safe-area-inset-top,0px)));
    }
    html.game-document.browser-art-mode #browserArt #worldBackground,
    html.game-document.browser-art-mode #browserArt .portrait-shade,
    html.game-document.browser-art-mode #browserArt .character-layer {
      position:absolute;inset:0 0 auto;height:var(--browser-photo-height);
    }
    html.game-document.browser-art-mode #browserArt #worldBackground {z-index:0;overflow:hidden}
    html.game-document.browser-art-mode #browserArt .world-image {width:100%;height:100%;object-fit:cover}
    html.game-document.browser-art-mode #browserArt .portrait-shade {z-index:1}
    html.game-document.browser-art-mode:has(.interface-device:not([data-route=home]):not([data-route=face])) #browserArt .portrait-shade {background:#241c27df}
    html.game-document.browser-art-mode #browserArt .character-layer {z-index:2;overflow:hidden}
    /* Safari samples the scrollable document below the dvh-high controls.
       Continue the visible nav tint in that document without moving its icons. */
    html.game-document.browser-art-mode:has(body:not(.keyboard-open) .interface-nav:not([hidden]):not(.home-meeting-nav)) #browserArt::after {
      content:"";position:absolute;z-index:3;pointer-events:none;
      top:calc(var(--viewport-offset,0px) + var(--viewport-height,100dvh) - 1px);
      right:0;bottom:0;left:0;background:#221b2478;
    }
    html.game-document.browser-art-mode:has(body:not(.keyboard-open) .interface-nav.face-nav:not([hidden])) #browserArt::after {background:#261d27c9}
    html.game-document.browser-art-mode .device {
      position:absolute;z-index:3;left:0;top:var(--viewport-offset,0px);
      width:100%;height:var(--viewport-height,100dvh);transform:none;
      overflow:clip;background:transparent!important;
    }
  }
}