/* 3D tour page: a full-screen canvas with a few floating controls. */
.tour-body { margin: 0; background: #1d2530; overflow: hidden; overscroll-behavior: none; }
.tour { position: fixed; inset: 0; color: #fff; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.tour-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: grab; }
.tour-canvas.dragging { cursor: grabbing; }
.tour svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[dir="ltr"] .tour-back svg { transform: scaleX(1); }
[dir="rtl"] .tour-back svg { transform: scaleX(-1); }

.tour-bar {
  position: absolute; inset-inline: 0; top: 0; display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 26px;
  background: linear-gradient(rgba(15, 20, 28, .62), rgba(15, 20, 28, 0)); pointer-events: none;
}
.tour-bar > * { pointer-events: auto; }
.tour-title { min-width: 0; flex: 1; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.tour-title b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-title small { font-size: 12px; opacity: .8; }
.tour-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; flex: none;
  background: rgba(20, 27, 36, .55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer;
}
.tour-btn:hover { background: rgba(20, 27, 36, .75); }

.tour-room {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 58px); left: 50%; transform: translate(-50%, -6px);
  padding: 6px 14px; border-radius: 999px; background: rgba(20, 27, 36, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 14px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none;
}
.tour-room.on { opacity: 1; transform: translate(-50%, 0); }
.tour-room small { font-weight: 400; opacity: .8; margin-inline-start: 6px; }

.tour-mini {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 58px); inset-inline-end: 12px;
  width: 120px; height: 120px; border-radius: 14px; background: rgba(20, 27, 36, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none;
}

.tour-hint {
  position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); transform: translateX(-50%);
  margin: 0; max-width: min(92vw, 520px); padding: 8px 14px; border-radius: 12px; text-align: center;
  background: rgba(20, 27, 36, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px; line-height: 1.5; transition: opacity .6s; pointer-events: none;
}
.tour-hint.off { opacity: 0; }

.tour-dock {
  position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 10px; justify-items: center;
  padding: 30px 12px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(15, 20, 28, 0), rgba(15, 20, 28, .55)); pointer-events: none;
}
.tour-dock > * { pointer-events: auto; }
.tour-rooms { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.tour-rooms::-webkit-scrollbar { display: none; }
.tour-rooms button {
  flex: none; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; color: #fff; cursor: pointer;
  background: rgba(20, 27, 36, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tour-rooms button i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; vertical-align: 0; }
.tour-rooms button.here { background: #fff; color: var(--ink); }
.tour-modes { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(20, 27, 36, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tour-modes button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 9px 16px;
  font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: transparent; cursor: pointer; transition: background .25s, color .25s;
}
.tour-modes button[aria-pressed="true"] { background: var(--brand); }

.tour-pano {
  position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35); animation: tour-pop .35s ease-out;
}
.tour-pano svg { color: var(--brand); }
.tour-pano.back { background: rgba(20, 27, 36, .75); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tour-pano.back svg { color: #fff; }
.tour-pano[hidden] { display: none; }
@keyframes tour-pop { from { opacity: 0; transform: translate(-50%, 8px); } }
.tour-rooms button small { opacity: .75; font-size: 11px; }
@media (pointer: coarse) { .tour-pano { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 236px); } }
.tour-stick {
  position: absolute; inset-inline-start: 22px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 108px);
  width: 112px; height: 112px; border-radius: 50%; touch-action: none;
  background: rgba(20, 27, 36, .35); border: 2px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tour-stick span {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transition: transform .15s;
}
.tour-stick.active span { transition: none; }

.tour-fade { position: absolute; inset: 0; background: #1d2530; opacity: 0; pointer-events: none; transition: opacity .22s; }
.tour-fade.on { opacity: 1; }
.tour-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #1d2530; font-size: 15px; transition: opacity .5s; }
.tour-loading.done { opacity: 0; pointer-events: none; }
.tour-error { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; padding: 24px; text-align: center; background: #1d2530; }
.tour-error[hidden] { display: none; }

@media (max-width: 560px) {
  .tour-modes button { padding: 8px 12px; font-size: 13px; }
  .tour-mini { width: 96px; height: 96px; }
  .tour-hint { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 100px); }
}
/* the joystick sits above the hint on phones */
@media (pointer: coarse) {
  .tour-hint { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 292px); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-room, .tour-fade, .tour-hint, .tour-loading { transition: none; }
}