/* Terminal states stay usable even when motion is reduced or unavailable. */
html { overflow-x: clip; }
.tour-mode [data-tour-direction] {
  visibility: hidden;
  translate: var(--tour-out-x, 0px) var(--tour-out-y, 0px);
  pointer-events: none !important;
}
.tour-mode [data-tour-direction="fade"] { opacity: 0; }
.tour-mode #main { pointer-events: none; }
.tour-mode .header a,
.tour-mode .header button { pointer-events: none; }
.tour-mode .tour-aside { pointer-events: none; }
.tour-transitioning { overflow-x: clip; }
/* A missing optional motion script must still reveal the panorama. */
.tour-mode:not(.tour-motion-ready) .header,
.tour-mode:not(.tour-motion-ready) #main,
.tour-mode:not(.tour-motion-ready) .sidebar,
.tour-mode:not(.tour-motion-ready) .foliage-edges,
.tour-mode:not(.tour-motion-ready) .foliage-corners,
.tour-mode:not(.tour-motion-ready) .decorations,
.tour-mode:not(.tour-motion-ready) .panorama-shade { visibility: hidden; }
.tour-bar:not([hidden]), .tour-hint:not([hidden]) { visibility: visible; }
body:not(.tour-mode) .tour-bar,
body:not(.tour-mode) .tour-hint { visibility: hidden; pointer-events: none; }
.tour-logo {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  min-height: 44px;
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  width: clamp(180px, 15vw, 240px);
  aspect-ratio: 3684 / 1434;
  overflow: hidden;
  z-index: 31;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 3px 5px #14381433);
}
.tour-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The shared WAAPI manager owns the fade; these are immediate, reduced-motion
   and no-motion-script fallback states, so no CSS transition can outlive exit. */
.tour-mode .tour-logo { visibility: visible; opacity: 1; pointer-events: auto; }
.tour-logo:focus-visible { outline: 3px solid #67bd06; outline-offset: 4px; border-radius: 12px; }
/* Home keeps the same map node dormant; only the external tour slot reveals it.
   This also prevents a flash with stale markup or a missing motion script. */
.tour-aside > .mini-map,
body:not(.tour-mode):not(.tour-transitioning) .tour-map-slot { display: none; }
.tour-map-slot {
  position: fixed;
  right: calc(54 * var(--u));
  bottom: calc(35 * var(--u));
  width: var(--rail-width);
  z-index: 32;
}
.tour-map-slot .mini-map { margin: 0; }
@media (max-width: 1024px), (max-width: 1100px) and (max-height: 550px) {
  .tour-logo {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    width: min(144px, 35vw);
  }
  .tour-transitioning.tour-from-menu .sidebar { display: flex; }
  .tour-map-slot {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    width: min(240px, 54vw);
    max-height: calc(100dvh - 160px);
    overflow: auto;
    border-radius: 24px;
  }
  .tour-map-slot .mini-map { padding: 10px; border-radius: 24px; }
  .tour-map-slot .mini-map h2 { font-size: 13px; line-height: 1.25; margin: 0 2px 5px; }
  .tour-map-slot .floor-tabs { gap: 4px; margin: 0; }
  .tour-map-slot .floor-tabs button { min-height: 44px; padding: 6px 10px; font-size: 12px; }
  .tour-map-slot .map-canvas { width: 100%; }
  .tour-map-slot .map-expand { min-height: 44px; padding: 5px; font-size: 11px; }
  .tour-bar .round-button { min-width: 44px; min-height: 44px; }
}
@media (max-height: 550px) and (max-width: 1100px) {
  .tour-map-slot { width: 190px; }
  .tour-map-slot .mini-map h2 { display: none; }
  .tour-map-slot .map-canvas { width: min(100%, 135px); margin: 0 auto; }
}