/* One viewport owns the entrance, persistent header, sections, and canvas.
   Keep the existing artwork and panel rules; only constrain their layout. */
:root {
  --twin-viewport-height: 100vh;
  --twin-header-height: calc(55px + env(safe-area-inset-top));
}
@supports (height: 100dvh) {
  :root { --twin-viewport-height: 100dvh; }
}
html {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--twin-viewport-height);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
#twin-world {
  position: absolute;
  inset: 0;
  height: var(--twin-viewport-height);
  min-height: 0;
}
#entrance {
  position: absolute;
  height: var(--twin-viewport-height);
  min-height: 0;
}
#twin-sections {
  position: absolute;
  inset: var(--twin-header-height) 0 0;
  height: calc(var(--twin-viewport-height) - var(--twin-header-height));
  min-height: 0;
}
#shop-section {
  position: absolute;
  inset: 0;
  height: calc(var(--twin-viewport-height) - var(--twin-header-height));
  min-height: 0;
}
#shop-main, .station {
  height: calc(var(--twin-viewport-height) - var(--twin-header-height));
  min-height: 0;
}
/* Use a definite viewport length all the way down the positioned hierarchy.
   The canvas drawing-buffer attributes must never determine its CSS height. */
#scene {
  position: absolute;
  inset: calc(0px - var(--twin-header-height)) 0 0;
  width: 100%;
  height: var(--twin-viewport-height);
}
/* Shared behind all sections, outside their transition/hide containers. */
.shop-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.placeholder-station .station-content {
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
}
/* Dialogs may scroll internally, but stay inside the same visible viewport. */
dialog {
  position: fixed;
  top: calc((var(--twin-viewport-height) + env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2);
  bottom: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  max-width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
  max-height: calc(var(--twin-viewport-height) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  touch-action: pan-y;
}
.details-content {
  max-height: calc(var(--twin-viewport-height) - var(--twin-header-height) - 130px - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}