/* 视口只负责取景，所有绘制与命中仍属于原有 scene。 */
.scene-viewport { position: absolute; inset: 0; z-index: -3; }
.scene-viewport .scene { z-index: 0; }
.hero:has(#water:focus-visible) .scene-objects-hint { opacity: 0; }
.hero:has(#scene-objects button:focus-visible) .scene-objects-hint { opacity: 1; }
.hero:has(#scene-objects button:focus-visible) .island-whisper { opacity: 0; transition: none; }
.view-toggle { left: auto; right: max(20px, env(safe-area-inset-right)); letter-spacing: .08em; }
body.is-exploring .site-header { display: none; }

@media (max-width: 1200px) {
  .scene-viewport { position: relative; inset: auto; aspect-ratio: 1.56; width: 100%; }
  body.is-exploring .hero {
    position: fixed;
    inset: 0;
    z-index: 11;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100svh;
    min-height: 0;
    max-height: none;
    border: 0;
  }
  .hero.is-exploring .scene-viewport {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
  }
  .hero.is-exploring .scene { position: relative; width: 100%; height: 100%; aspect-ratio: auto; }
  /* 静态镜头直接作用于原画和灯层，避免整层缩放产生额外滚动边界。 */
  .hero.is-exploring[data-renderer="static"] .scene { transform: none; }
  .hero.is-exploring[data-renderer="static"] :is(.scene-backdrop, .scene-lighting) { --scene-zoom: 1.1832; }
  .hero.is-exploring .hero-bottom { color: #f9f4dc; bottom: max(16px, env(safe-area-inset-bottom)); }
  .hero.is-exploring .scene-control:hover { color: #fff9e4; }
  .hero.is-exploring .scene-controls { background: rgb(40 37 35 / .68); padding-inline: 12px; }
  .hero.is-exploring .water-hint { color: #f9f4dc; text-shadow: 0 1px 4px #27242b; }
  .hero.is-exploring .island-whisper {
    bottom: 18%;
    color: #f5f2df;
    text-shadow: 0 1px 8px #27242b;
    font-size: clamp(16px, 2.8vw, 22px);
  }
  .hero.is-exploring .keyboard-hint { bottom: 72px; }
}

@media (max-width: 1200px) and (orientation: portrait) {
  .hero[data-detail-view="true"] .scene-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x pinch-zoom;
    scrollbar-width: thin;
    scrollbar-color: #a89888 #514b45;
  }
  .hero[data-detail-view="true"] .scene-viewport::-webkit-scrollbar { height: 4px; }
  .hero[data-detail-view="true"] .scene { width: calc(100svh * 1.56); min-width: 100%; height: 100%; }
  .hero[data-detail-view="true"] :is(#water, .window-light-button, .door-button, .pier-lamp-button) { touch-action: pan-x pinch-zoom; }
  .hero[data-overview="true"] .scene-viewport { display: flex; align-items: center; }
  .hero[data-overview="true"] .scene { flex: none; width: 100%; height: auto; aspect-ratio: 1.56; }
  .hero[data-overview="true"] .island-whisper { bottom: calc((100svh - 100vw / 1.56) / 2 + 16px); }
  .hero[data-overview="true"] .hero-bottom { color: var(--ink); }
  .hero[data-overview="true"] .scene-controls { background: none; padding: 0; }
  .hero[data-overview="true"] .scene-control:hover { color: var(--ink); }
}

@media (max-width: 1200px) and (orientation: landscape) {
  .hero.is-exploring .scene-viewport { display: flex; justify-content: center; }
  .hero.is-exploring .scene { flex: none; width: min(100%, calc(100svh * 1.56)); height: 100%; }
}

@media (max-width: 640px) {
  /* 标题按实际内容占高，中英文都不再用大块固定上内边距垫出空白。 */
  .hero:not(.is-exploring), :lang(en) .hero:not(.is-exploring) { display: flex; flex-direction: column; padding-top: 0; padding-bottom: 68px; }
  .hero:not(.is-exploring) .hero-copy, :lang(en) .hero:not(.is-exploring) .hero-copy { position: relative; order: -1; inset: auto; margin: 24px 20px 30px; }
  .hero:not(.is-exploring) .scene-viewport { flex: none; }
  .hero:not(.is-exploring) .explore-button { position: static; margin-top: 22px; }
  :root:lang(zh) .hero:not(.is-exploring) .explore-button { position: absolute; margin-top: 0; right: 0; bottom: 0; }
  :root:lang(zh) .hero:not(.is-exploring) .hero-description { max-width: calc(100% - 148px); }
  :lang(en) .hero:not(.is-exploring) { padding-bottom: 84px; }
  :lang(en) .hero.is-exploring .hero-bottom { flex-direction: row; align-items: center; }
  .hero.is-exploring .return-button { top: max(16px, env(safe-area-inset-top)); }
  .hero.is-exploring .view-toggle { left: auto; right: max(16px, env(safe-area-inset-right)); }
}