/* Fit the complete authored plate beneath the header. Images, hotspots and
   elevator doors share the same proportional box at every window size. */
:root { --environment-header-height: 72px; }
html.room-preparing :is(.atrium,.floor-scene,.shop-scene,.rooftop-scene) { background:#080a0f; }
html.room-preparing :is(.atrium,.floor-scene,.shop-scene,.rooftop-scene) > :not(.room-loading-notice):not(.elevator-transition) { visibility:hidden; }
.room-loading-notice { position:absolute; z-index:9; inset:0; display:grid; place-content:center; gap:12px; padding:24px; background:#080a0f; color:#c9d6ed; font:500 12px/1.5 'DM Sans',sans-serif; text-align:center; }
.room-loading-notice button { padding:12px 20px; border:1px solid #1959e2; color:#fff; background:#1959e2; font:inherit; cursor:pointer; }

.mq-skip-link { position:fixed; left:18px; top:10px; z-index:10000; padding:14px 20px; background:#f0eadf; color:#15130f; font:700 13px/1.4 "DM Sans",sans-serif; transform:translateY(-200%); }
.mq-skip-link:focus { transform:translateY(0); outline:2px solid #d2a459; outline-offset:3px; }
.mq-route-status { position:fixed; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
main [id] { scroll-margin-top:calc(var(--environment-header-height) + 20px); }
main:focus { outline:none; }

.environment-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

main > .floor-page {
  min-height: 0;
  padding-top: var(--environment-header-height);
  overflow: hidden;
}

.floor-page .floor-scene {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: var(--environment-aspect, 16 / 9);
}

.audio-floor,
.cast-floor { --environment-aspect: 3842 / 2160; }
.forensics-floor,
.contact-floor { --environment-aspect: 1774 / 887; }
.news-floor { --environment-aspect: 1692 / 930; }
.vip-floor { --environment-aspect: 1795 / 876; }

.floor-page .floor-scene > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main > .atrium {
  --environment-aspect: 2152 / 1208;
  width: 100%;
  min-height: 0;
  margin-top: var(--environment-header-height);
  padding: 0;
  aspect-ratio: 2152 / 1208;
}

.atrium .atrium__image,
.atrium .atrium__shade,
.atrium .screen-menu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.atrium .atrium__image { object-fit: cover; }

main > .shop-floor {
  display: block;
  min-height: 0;
  padding-top: var(--environment-header-height);
}

.shop-floor .shop-scene {
  --environment-aspect: 1672 / 941;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1672 / 941;
}

.rooftop-page .rooftop-scene {
  --environment-aspect: 16 / 9;
  height: auto;
  aspect-ratio: var(--environment-aspect);
}

main > .atrium,
.floor-page .floor-scene,
.shop-floor .shop-scene,
.rooftop-page .rooftop-scene {
  max-width: max(1px, calc((100svh - var(--environment-header-height)) * var(--environment-aspect, 16 / 9)));
  margin-inline: auto;
}

main :is(.atrium,.floor-scene,.shop-scene,.rooftop-scene) > .elevator-transition {
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 650px) {
  :root { --environment-header-height: 64px; }
}
.studio-preview-notice { position:relative; z-index:50; background:#1266df; color:#fff; padding:12px 24px; font:700 12px/1.5 'DM Sans',sans-serif; text-align:center; }