/* ============================================================
   SHIVA 360° TOUR — UI REVAMP
   Core Marzipano viewer logic untouched; this restyles the
   chrome (nav, controls, hotspots, overlays) and keeps every
   selector index.js relies on.
   ============================================================ */

:root {
  --accent: #f5c15a;
  --accent-2: #e8952e;
  --accent-grad: linear-gradient(135deg, #f5c15a 0%, #e8952e 100%);
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --glass: rgba(20, 22, 31, 0.55);
  --glass-strong: rgba(15, 17, 25, 0.86);
  --stroke: rgba(255, 255, 255, 0.14);
  --stroke-soft: rgba(255, 255, 255, 0.08);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --radius: 16px;
  --font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--font);
  font-size: 16px;
  background-color: #000;
  color: var(--ink);
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Title bar kept for JS but hidden */
#titleBar { display: none !important; }

/* Generic glass control button */
.ctrl-btn {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  border-radius: 13px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.ctrl-btn svg { width: 22px; height: 22px; display: block; }
.no-touch .ctrl-btn:hover { background: rgba(255, 255, 255, 0.10); color: var(--accent); }
.ctrl-btn:active { transform: scale(0.92); }

/* Clusters (glass pills) */
.control-cluster {
  position: absolute;
  z-index: 40;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.ui-ready .control-cluster { opacity: 1; transform: translateY(0); }

.control-cluster.top-right { top: 18px; right: 18px; }

.control-cluster.zoom-cluster {
  top: 50%;
  right: 18px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  transform: translateY(-50%) scale(0.96);
}
body.ui-ready .control-cluster.zoom-cluster { transform: translateY(-50%) scale(1); }
.zoom-divider { width: 60%; height: 1px; background: var(--stroke-soft); }

/* Autorotate / fullscreen icon on-off toggling (JS toggles .enabled) */
#autorotateToggle .icon.on,  #fullscreenToggle .icon.on  { display: none; }
#autorotateToggle .icon.off, #fullscreenToggle .icon.off { display: block; }
#autorotateToggle.enabled .icon.on,  #fullscreenToggle.enabled .icon.on  { display: block; }
#autorotateToggle.enabled .icon.off, #fullscreenToggle.enabled .icon.off { display: none; }
#autorotateToggle.enabled { color: var(--accent); }

/* Fullscreen toggle only shown when supported (JS adds body.fullscreen-enabled) */
#fullscreenToggle { display: none; }
body.fullscreen-enabled #fullscreenToggle { display: -webkit-box; display: flex; }

/* Reset Marzipano's default absolute positioning on the surfaced zoom buttons */
.zoom-cluster .viewControlButton {
  position: static;
  display: -webkit-box;
  display: flex;
  bottom: auto;
  left: auto;
  margin: 0;
  padding: 0;
  width: 46px;
  height: 46px;
  background: none;
}
@media (max-width: 600px) {
  .zoom-cluster .viewControlButton { display: -webkit-box; display: flex; }
}

/* Directional buttons kept in DOM but never shown */
.hidden-controls { position: absolute; width: 0; height: 0; overflow: hidden; }
.hidden-controls .viewControlButton { display: none; }

#sceneListToggle { display: none; }

/* ============ BRAND CHIP ============ */
#brandChip {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 40;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 8px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s;
}
body.ui-ready #brandChip { opacity: 1; transform: translateY(0); }
.brand-mark {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--accent-grad);
  color: #1a1206;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.3px;
}
.brand-text { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; font-weight: 600; letter-spacing: 0.2px; }
.brand-text span { font-size: 10.5px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }

/* ============ BOTTOM FLOOR DOCK ============ */
#sceneList {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  z-index: 40;
  max-width: calc(100% - 32px);
  opacity: 0;
  transition: opacity 0.6s ease 0.1s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
body.ui-ready #sceneList { opacity: 1; transform: translateX(-50%) translateY(0); }

.dock-inner {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow);
  padding: 8px;
}
.dock-label {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.dock-label svg { width: 14px; height: 14px; }

#sceneList .scenes {
  display: -webkit-box;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
#sceneList .scenes::-webkit-scrollbar { display: none; }

#sceneList .scene {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  gap: 6px;
  min-width: 82px;
  padding: 12px 10px 10px;
  border-radius: 13px;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.scene-icon {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.22s ease, color 0.22s ease;
}
.scene-icon svg { width: 19px; height: 19px; display: block; }
#sceneList .scene .text {
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

.no-touch #sceneList .scene:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}
.no-touch #sceneList .scene:hover .scene-icon { background: rgba(255, 255, 255, 0.12); }

#sceneList .scene.current {
  color: #1a1206;
  border-color: transparent;
}
#sceneList .scene.current .text { color: #1a1206; font-weight: 600; }
#sceneList .scene.current::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: var(--accent-grad);
  z-index: -1;
  box-shadow: 0 6px 18px rgba(232, 149, 46, 0.4);
}
#sceneList .scene.current .scene-icon {
  background: rgba(26, 18, 6, 0.16);
  color: #1a1206;
}

/* keep sensible stacking for the pseudo bg */
#sceneList .scene { z-index: 0; }
#sceneList .scene > * { position: relative; z-index: 1; }

body.single-scene #sceneList { display: none; }

/* ============ WELCOME / LOADING OVERLAY ============ */
#introOverlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(232, 149, 46, 0.18), transparent 60%),
    linear-gradient(160deg, #14161f 0%, #0a0b11 60%, #060709 100%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#introOverlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 193, 90, 0.16), transparent 70%);
  filter: blur(20px);
  animation: introFloat 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes introFloat {
  0%, 100% { transform: translateY(-8px) scale(1); opacity: 0.85; }
  50%      { transform: translateY(12px) scale(1.06); opacity: 1; }
}

.intro-card {
  position: relative;
  max-width: 560px;
  animation: introRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes introRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.intro-eyebrow {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 22px;
  padding: 7px 15px;
  border: 1px solid rgba(245, 193, 90, 0.28);
  border-radius: 100px;
  background: rgba(245, 193, 90, 0.06);
}
.intro-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(245, 193, 90, 0.6);
  animation: pulseDot 1.8s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(245, 193, 90, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(245, 193, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 193, 90, 0); }
}

.intro-title {
  font-size: clamp(38px, 8vw, 66px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -1.5px;
  margin: 0 0 16px;
}
.intro-title span {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}
.intro-sub {
  font-size: clamp(14px, 2.4vw, 17px);
  font-weight: 300;
  color: var(--muted);
  max-width: 420px;
  margin: 0 auto 34px;
  line-height: 1.6;
}

.intro-progress { max-width: 320px; margin: 0 auto 30px; }
.intro-progress-bar {
  width: 100%;
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.intro-progress-bar span {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: 100px;
  background: var(--accent-grad);
  transition: width 0.4s ease;
}
.intro-status {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

.intro-enter {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #1a1206;
  background: var(--accent-grad);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(232, 149, 46, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.intro-enter svg { width: 19px; height: 19px; }
.intro-enter.ready { opacity: 1; transform: translateY(0); pointer-events: auto; }
.intro-enter.ready:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(232, 149, 46, 0.5); }
.intro-enter.ready:active { transform: translateY(0) scale(0.97); }

.intro-controls-hint {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  gap: 26px;
  margin-top: 36px;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}
.intro-enter.ready ~ .intro-controls-hint { opacity: 1; }
.intro-controls-hint span {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.intro-controls-hint svg { width: 16px; height: 16px; }

/* ============ DRAG HINT TOAST ============ */
#dragHint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 45;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: 100px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
}
#dragHint svg { width: 20px; height: 20px; color: var(--accent); }
#dragHint.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* ============================================================
   HOTSPOTS (behavior preserved from original)
   ============================================================ */

/* Link hotspot — animated beacon navigation button */
.link-hotspot { cursor: pointer; }

.nav-inner {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 11px;
  /* anchor the beacon centre on the hotspot point, then grow with zoom */
  transform: translate(-22px, -22px) scale(var(--pano-scale, 1));
  transform-origin: 22px 22px;
}

.nav-beacon {
  position: relative;
  width: 44px;
  height: 44px;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}
.nav-core {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #1a1206;
  box-shadow: 0 6px 18px rgba(232, 149, 46, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  z-index: 2;
  transition: transform 0.25s ease;
}
.nav-core svg { width: 20px; height: 20px; display: block; }
.nav-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: navPing 2.4s ease-out infinite;
}
.nav-ring-2 { animation-delay: 1.2s; }
@keyframes navPing {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}

.nav-label {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  line-height: 1.15;
  padding: 7px 14px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  white-space: nowrap;
  pointer-events: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.nav-label-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
}
.nav-label-name { font-size: 14px; font-weight: 600; color: #fff; }

.no-touch .link-hotspot:hover .nav-core { transform: scale(1.12); }
.no-touch .link-hotspot:hover .nav-label { border-color: rgba(245, 193, 90, 0.6); transform: translateX(2px); }

/* ============ LIVE COMPASS ============ */
#compass {
  position: absolute;
  top: 88px;
  left: 18px;
  z-index: 40;
  width: 66px;
  height: 66px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
body.ui-ready #compass { opacity: 1; transform: translateY(0); }
#compass svg {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}
.cmp-ring { fill: rgba(15, 17, 25, 0.72); stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; }
.cmp-heading { fill: var(--accent); }
.cmp-tick { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; stroke-linecap: round; }
.cmp-north { fill: #e8543c; }
.cmp-south { fill: rgba(255, 255, 255, 0.5); }
.cmp-hub { fill: #fff; }
.cmp-label { fill: rgba(255, 255, 255, 0.85); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; font-family: var(--font); }
.cmp-label.cmp-n { fill: #ff6b52; }

/* ============ LEFT FEATURE TOOLBAR ============ */
.control-cluster.feature-dock {
  top: 50%;
  left: 18px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  transform: translateY(-50%) scale(0.96);
}
body.ui-ready .control-cluster.feature-dock { transform: translateY(-50%) scale(1); }
.feature-divider { width: 60%; height: 1px; background: var(--stroke-soft); margin: 1px 0; }

.feature-dock .ctrl-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.no-touch .feature-dock .ctrl-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.feature-dock .ctrl-btn.active,
body.touring #autoTourToggle {
  color: var(--accent);
  background: rgba(245, 193, 90, 0.14);
}

/* Auto-tour play / stop icon swap */
#autoTourToggle .tour-stop { display: none; }
#autoTourToggle .tour-play { display: block; }
body.touring #autoTourToggle .tour-play { display: none; }
body.touring #autoTourToggle .tour-stop { display: block; }

/* Day / Night icon swap (reflects current mode) */
#ambientToggle .amb-dusk, #ambientToggle .amb-night { display: none; }
#ambientToggle .amb-day { display: block; }
body.ambient-dusk #ambientToggle .amb-day { display: none; }
body.ambient-dusk #ambientToggle .amb-dusk { display: block; }
body.ambient-night #ambientToggle .amb-day { display: none; }
body.ambient-night #ambientToggle .amb-night { display: block; }
body.ambient-dusk #ambientToggle, body.ambient-night #ambientToggle { color: var(--accent); }

/* ============ DAY / DUSK / NIGHT AMBIENCE ============ */
#ambientTint {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease, background 0.8s ease;
}
#pano {
  -webkit-transition: -webkit-filter 0.8s ease;
  transition: filter 0.8s ease;
}
body.ambient-dusk #pano {
  -webkit-filter: brightness(0.96) saturate(1.28) sepia(0.24) hue-rotate(-10deg) contrast(1.04);
  filter: brightness(0.96) saturate(1.28) sepia(0.24) hue-rotate(-10deg) contrast(1.04);
}
body.ambient-night #pano {
  -webkit-filter: brightness(0.5) saturate(0.85) contrast(1.15) hue-rotate(6deg);
  filter: brightness(0.5) saturate(0.85) contrast(1.15) hue-rotate(6deg);
}
body.ambient-dusk #ambientTint {
  opacity: 1;
  background: linear-gradient(to top, rgba(255, 120, 35, 0.30), rgba(150, 50, 90, 0.14) 55%, rgba(60, 30, 80, 0.16));
}
body.ambient-night #ambientTint {
  opacity: 1;
  background: linear-gradient(to top, rgba(8, 18, 55, 0.55), rgba(6, 12, 38, 0.40) 55%, rgba(2, 5, 22, 0.55));
}

/* ============ MINI SITE MAP PANEL ============ */
#mapPanel {
  position: absolute;
  left: 90px;
  bottom: 116px;
  z-index: 55;
  width: 264px;
  max-width: calc(100% - 36px);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}
#mapPanel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.map-head {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke-soft);
}
.map-title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
}
.map-title svg { width: 16px; height: 16px; color: var(--accent); }
.map-close {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
}
.no-touch .map-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.map-close svg { width: 16px; height: 16px; }
.map-body { position: relative; padding: 12px; }
.map-body img { display: block; width: 100%; height: auto; border-radius: 10px; }
.map-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  transition: left 0.5s ease, top 0.5s ease;
}
.map-dot::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: navPing 2s ease-out infinite;
}
.map-dot-label {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

/* ============ TOAST ============ */
#toast {
  position: absolute;
  left: 50%;
  bottom: 122px;
  z-index: 60;
  transform: translateX(-50%) translateY(10px);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 100px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
#toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Info hotspot */
.info-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
}
.no-touch .info-hotspot:hover { opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.info-hotspot.visible { opacity: 1; }

.info-hotspot .info-hotspot-header {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--accent-grad);
  box-shadow: 0 6px 18px rgba(232, 149, 46, 0.4);
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s, border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s, border-radius 0.3s ease-in-out 0.5s;
}
.mobile .info-hotspot .info-hotspot-header { width: 50px; height: 50px; border-radius: 25px; }
.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
  width: 260px; border-radius: 8px;
  -webkit-transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}
.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
  width: 260px; border-radius: 8px;
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}
.info-hotspot .info-hotspot-icon-wrapper { width: 150px; height: 150px; }
.mobile .info-hotspot .info-hotspot-icon-wrapper { width: 150px; height: 150px; }
.info-hotspot .info-hotspot-icon { width: 90%; height: 90%; margin: 5%; }

.info-hotspot .info-hotspot-title-wrapper {
  position: absolute; left: 40px; top: 0; width: 0; height: 40px; padding: 0; overflow: hidden;
  -webkit-transition: width 0s 0.4s, padding 0s 0.4s;
  transition: width 0s 0.4s, padding 0s 0.4s;
  color: #1a1206;
}
.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  width: 220px; padding: 0 5px;
  -webkit-transition: width 0s 0.4s, padding 0s 0.4s;
  transition: width 0s 0.4s, padding 0s 0.4s;
}
.info-hotspot .info-hotspot-title-wrapper:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
.info-hotspot .info-hotspot-title {
  display: inline-block; vertical-align: middle; font-weight: 600;
  -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text;
}

.info-hotspot .info-hotspot-close-wrapper {
  position: absolute; left: 260px; top: 0; height: 40px; width: 40px;
  border-top-right-radius: 8px; background-color: rgba(26, 18, 6, 0.22); visibility: hidden;
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0;
  -webkit-transition: -webkit-transform 0.3s 0.3s, transform 0.3s 0.3s, visibility 0s 0.6s;
  transition: transform 0.3s 0.3s, visibility 0s 0.6s;
}
.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
  visibility: visible;
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -webkit-transform 0.3s, transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
.info-hotspot .info-hotspot-close-icon { width: 70%; height: 70%; margin: 15%; }

.info-hotspot .info-hotspot-text {
  position: absolute; width: 300px; height: auto; max-height: 200px; top: 40px; left: 0; padding: 12px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;
  overflow-y: auto; visibility: hidden;
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform-origin: 50% 0 0; transform-origin: 50% 0 0;
  -webkit-transition: -webkit-transform 0.3s, transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
  -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text;
}
.desktop .info-hotspot.visible .info-hotspot-text {
  visibility: visible;
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -webkit-transform 0.3s 0.3s, transform 0.3s 0.3s, visibility 0s 0s;
  transition: transform 0.3s 0.3s, visibility 0s 0s;
}

/* Info hotspot modal (mobile / image popups) */
.desktop .info-hotspot-modal { display: none; }
.info-hotspot-modal {
  top: 0; left: 0; position: absolute; width: 100%; height: 100%; overflow: hidden;
  z-index: 11000 !important; background-color: rgba(0, 0, 0, .5); line-height: 1.2em;
  opacity: 0; visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s, visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s, visibility 0s 0.7s;
}
.info-hotspot-modal.visible {
  opacity: 1; visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out, visibility 0s 0s;
  transition: opacity 0.2s ease-in-out, visibility 0s 0s;
}
.info-hotspot-modal .info-hotspot-header {
  position: absolute; top: 60px; left: 10px; right: 10px; width: auto; height: 50px;
  background: var(--accent-grad); opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s; transition: opacity 0.3s ease-in-out 0.2s;
}
.info-hotspot-modal.visible .info-hotspot-header { opacity: 1; }
.info-hotspot-modal .info-hotspot-icon-wrapper { width: 50px; height: 50px; }
.info-hotspot-modal .info-hotspot-icon { width: 90%; height: 90%; margin: 5%; }
.info-hotspot-modal .info-hotspot-title-wrapper {
  position: absolute; top: 0; left: 50px; right: 50px; width: auto; height: 50px; padding: 0 10px; color: #1a1206;
}
.info-hotspot-modal .info-hotspot-title-wrapper:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
.info-hotspot-modal .info-hotspot-title { display: inline-block; vertical-align: middle; font-weight: 600; -webkit-user-select: text; user-select: text; }
.info-hotspot-modal .info-hotspot-close-wrapper {
  position: absolute; top: 0; right: 0; width: 50px; height: 50px; background-color: rgba(26, 18, 6, 0.3); cursor: pointer;
}
.info-hotspot-modal .info-hotspot-close-icon { width: 70%; height: 70%; margin: 15%; }
.info-hotspot-modal .info-hotspot-text {
  position: absolute; top: 110px; bottom: 10px; left: 10px; right: 10px; padding: 12px;
  background: var(--glass-strong); border: 1px solid var(--stroke); overflow-y: auto; opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
  -webkit-user-select: text; user-select: text;
}
.info-hotspot-modal.visible .info-hotspot-text { opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.4s; transition: opacity 0.3s ease-in-out 0.4s; }

/* View control buttons — base (only zoom ones are surfaced above) */
.viewControlButton { position: absolute; bottom: 0; left: 50%; width: 40px; height: 40px; padding: 5px; }
.viewControlButton-1 { margin-left: -145px; }
.viewControlButton-2 { margin-left: -95px; }
.viewControlButton-3 { margin-left: -45px; }
.viewControlButton-4 { margin-left: 5px; }
.viewControlButton-5 { margin-left: 55px; }
.viewControlButton-6 { margin-left: 105px; }

/* ============================================================
   CUSTOM HOTSPOTS — jumping character & floor-plan trigger
   (preserved from original, tuned to new palette)
   ============================================================ */

@keyframes jump-loop {
  0%, 100% { transform: translateY(0) scale(var(--pano-scale, 1)); }
  50%      { transform: translateY(-20px) scale(var(--pano-scale, 1)); }
}

.info-hotspot.my-character {
  width: 100px !important; height: 100px !important;
  margin-left: -50px !important; margin-top: -50px !important;
  background: none !important; border: none !important; opacity: 1 !important;
  pointer-events: none !important;
}
.info-hotspot.my-character .info-hotspot-header {
  width: 100% !important; height: 100% !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; transition: none !important; overflow: visible !important;
}
.info-hotspot.my-character .info-hotspot-icon {
  width: 100% !important; height: 100% !important; margin: 0 !important;
  object-fit: contain !important;
  animation: jump-loop 1.5s infinite ease-in-out;
  -webkit-filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.4));
}
.info-hotspot.my-character .info-hotspot-close-wrapper,
.info-hotspot.my-character .info-hotspot-title-wrapper { display: none !important; }

/* Floor plan popup */
.info-hotspot-modal.image-modal {
  display: -webkit-box; display: flex;
  -webkit-box-align: center; align-items: center;
  -webkit-box-pack: center; justify-content: center;
  background-color: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.popup-image-content {
  max-width: 90%; max-height: 90%;
  border: 1px solid var(--stroke);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.info-hotspot-modal.image-modal .info-hotspot-close-wrapper {
  position: absolute; top: 20px; right: 20px; width: 48px; height: 48px;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--stroke);
  border-radius: 50%; z-index: 100;
  visibility: visible !important; transform: none !important;
  transition: background 0.2s ease;
}
.info-hotspot-modal.image-modal .info-hotspot-close-wrapper:hover { background-color: rgba(232, 76, 60, 0.85); }

/* Invisible floor-plan trigger */
.info-hotspot.floor-plan-trigger {
  width: 500px !important; height: 400px !important;
  margin-left: -250px !important; margin-top: -200px !important;
  background: none !important; border: none !important;
}
.info-hotspot.floor-plan-trigger .info-hotspot-icon-wrapper,
.info-hotspot.floor-plan-trigger .info-hotspot-icon { display: none !important; }
.info-hotspot.floor-plan-trigger .info-hotspot-header {
  width: 100% !important; height: 100% !important;
  background: rgba(255, 0, 0, 0.0) !important; border-radius: 0 !important; box-shadow: none !important;
}
.info-hotspot.floor-plan-trigger .info-hotspot-title-wrapper {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto !important; padding: 14px 26px !important;
  background: var(--glass-strong) !important;
  border: 1px solid rgba(245, 193, 90, 0.45) !important;
  border-radius: 100px !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  color: #fff !important; pointer-events: none;
  opacity: 1 !important; visibility: visible !important;
  animation: triggerPulse 2.2s ease-in-out infinite;
}
@keyframes triggerPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 0 rgba(245,193,90,0.4); }
  50%      { box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 12px rgba(245,193,90,0); }
}
.info-hotspot.floor-plan-trigger .info-hotspot-title {
  display: -webkit-inline-box !important; display: inline-flex !important;
  -webkit-box-align: center; align-items: center; gap: 8px;
  font-size: 15px !important; font-weight: 600; letter-spacing: 0.3px;
}
.info-hotspot.floor-plan-trigger .info-hotspot-title:before {
  content: "";
  width: 18px; height: 18px;
  background: var(--accent-grad);
  border-radius: 5px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E") center/70% no-repeat;
  flex: 0 0 auto;
}

/* ============ NEARBY POI MARKERS (flag / banner style) ============ */
.poi-hotspot { position: relative; width: 0; height: 0; }

.poi-marker {
  position: absolute;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  transform: translateX(-50%) scale(clamp(0.8, var(--pano-scale, 1), 1.35));
  transform-origin: bottom center;
}

/* Default: just the icon pin (no banner). The banner opens on focus. */
.poi-flag {
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.poi-hotspot.looking .poi-flag,
.poi-hotspot.tapped .poi-flag,
.no-touch .poi-hotspot:hover .poi-flag {
  background: var(--glass-strong);
  border-color: rgba(245, 193, 90, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(245, 193, 90, 0.14);
}
.poi-flag-head {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 7px;
  padding: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: padding 0.25s ease;
}
.poi-hotspot.looking .poi-flag-head,
.poi-hotspot.tapped .poi-flag-head,
.no-touch .poi-hotspot:hover .poi-flag-head { padding: 6px 12px 6px 7px; }
.poi-flag-icon {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--accent-grad);
  color: #1a1206;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}
.poi-flag-icon svg { width: 15px; height: 15px; display: block; }
.poi-flag-name { font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: 0.2px; display: none; }
.poi-hotspot.looking .poi-flag-name,
.poi-hotspot.tapped .poi-flag-name,
.no-touch .poi-hotspot:hover .poi-flag-name { display: block; }

/* Detail is fully removed from layout when collapsed, so the flag shrinks to
   exactly the icon and the icon stays centred on its pole/dot. */
.poi-flag-detail {
  display: none;
  padding: 0 12px 11px;
}
.poi-hotspot.looking .poi-flag-detail,
.poi-hotspot.tapped .poi-flag-detail,
.no-touch .poi-hotspot:hover .poi-flag-detail {
  display: block;
}
.poi-meta { display: -webkit-box; display: flex; gap: 6px; flex-wrap: wrap; }
.poi-chip {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--stroke-soft);
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.poi-chip svg { width: 13px; height: 13px; color: var(--accent); }
.poi-directions {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1a1206;
  background: var(--accent-grad);
  border-radius: 9px;
}
.poi-directions svg { width: 14px; height: 14px; }
.no-touch .poi-directions:hover { -webkit-filter: brightness(1.06); filter: brightness(1.06); }

/* Pole connecting the flag down to the exact ground point */
.poi-pole { width: 2px; background: linear-gradient(to bottom, var(--accent), rgba(245, 193, 90, 0.25)); }
.poi-level-0 .poi-pole { height: 40px; }
.poi-level-1 .poi-pole { height: 76px; }
.poi-level-2 .poi-pole { height: 112px; }

.poi-dot-sm {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-grad);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
.poi-dot-sm::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: navPing 2.2s ease-out infinite;
}

/* ============ IMMERSIVE MODE (UI slides away while exploring) ============ */
/* Note: #brandChip (site logo) and #compass intentionally stay visible. */
body.ui-hidden .control-cluster.top-right {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}
body.ui-hidden .control-cluster.feature-dock {
  opacity: 0;
  transform: translateY(-50%) translateX(-30px);
  pointer-events: none;
}
body.ui-hidden .control-cluster.zoom-cluster {
  opacity: 0;
  transform: translateY(-50%) translateX(30px);
  pointer-events: none;
}
body.ui-hidden #sceneList {
  opacity: 0;
  transform: translateX(-50%) translateY(30px);
  pointer-events: none;
}
body.ui-hidden #mapPanel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
}

/* ============ VR MODE + GAZE RETICLE ============ */
/* In VR keep only the panorama, compass, logo, reticle and exit visible. */
body.vr-mode .control-cluster.feature-dock,
body.vr-mode .control-cluster.zoom-cluster,
body.vr-mode .control-cluster.top-right,
body.vr-mode #sceneList,
body.vr-mode #mapPanel,
body.vr-mode #dragHint {
  opacity: 0 !important;
  pointer-events: none !important;
}

#gazeReticle {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  z-index: 9000;
  pointer-events: none;
}
body.vr-mode #gazeReticle { display: block; }
#gazeReticle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gaze-bg { fill: rgba(0, 0, 0, 0.22); stroke: rgba(255, 255, 255, 0.5); stroke-width: 3; }
.gaze-prog { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity 0.2s ease; }
.gaze-dot { fill: rgba(255, 255, 255, 0.85); transition: fill 0.2s ease; }
#gazeReticle.gazing .gaze-prog { opacity: 1; }
#gazeReticle.gazing .gaze-dot { fill: var(--accent); }
#gazeReticle.fired { animation: gazeFire 0.35s ease; }
@keyframes gazeFire {
  0%   { transform: translate(-50%, -50%) scale(1); }
  45%  { transform: translate(-50%, -50%) scale(1.4); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

#vrExit {
  display: none;
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9001;
  -webkit-box-align: center;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: 100px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  cursor: pointer;
}
body.vr-mode #vrExit { display: -webkit-box; display: flex; }
#vrExit svg { width: 18px; height: 18px; }

/* ============ COMING SOON POPUP ============ */
.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 8, 13, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cs-overlay.open { opacity: 1; visibility: visible; }
.cs-card {
  width: min(340px, calc(100% - 40px));
  text-align: center;
  padding: 30px 26px 26px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow);
  transform: translateY(14px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-overlay.open .cs-card { transform: translateY(0) scale(1); }
.cs-badge {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--accent-grad);
  color: #1a1206;
  box-shadow: 0 10px 28px rgba(232, 149, 46, 0.4);
}
.cs-badge svg { width: 32px; height: 32px; }
.cs-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 8px; }
.cs-text { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.5; margin-bottom: 22px; }
.cs-btn {
  font-family: var(--font);
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1206;
  background: var(--accent-grad);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(232, 149, 46, 0.35);
  transition: transform 0.2s ease;
}
.cs-btn:active { transform: scale(0.96); }

/* ============ MOBILE REVEAL TOGGLES ============ */
.edge-toggle {
  display: none; /* shown only on mobile */
  position: fixed;
  z-index: 46;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}
#panelToggle {
  left: 12px;
  top: 134px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
#panelToggle .et-icon { width: 22px; height: 22px; }
.dock-toggle {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 9px 17px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.dock-toggle .et-chevron { width: 17px; height: 17px; transition: transform 0.3s ease; }
body.dock-open .dock-toggle .et-chevron { transform: rotate(180deg); }
body.panel-open #panelToggle { color: var(--accent); background: rgba(245, 193, 90, 0.16); }
body.dock-open .dock-toggle { color: var(--accent); }
body.ui-hidden .edge-toggle,
body.vr-mode .edge-toggle { opacity: 0 !important; pointer-events: none !important; }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
  #brandChip { padding: 6px 13px 6px 6px; gap: 9px; }
  .brand-mark { width: 34px; height: 34px; font-size: 12px; }
  .brand-text strong { font-size: 13px; }
  .brand-text span { font-size: 9px; letter-spacing: 1px; }

  .control-cluster.top-right { top: 14px; right: 14px; }
  .ctrl-btn { width: 42px; height: 42px; }

  .control-cluster.zoom-cluster { display: none; }

  #compass { top: 74px; left: 14px; width: 52px; height: 52px; }

  /* Reveal toggles are visible on phones */
  .edge-toggle { display: -webkit-box; display: flex; }

  /* ---- Tools panel: drops straight down from the toggle button ---- */
  .control-cluster.feature-dock {
    top: 186px;
    left: 12px;
    bottom: auto;
    gap: 4px;
    padding: 5px;
    transform-origin: top center;
  }
  body.ui-ready .control-cluster.feature-dock {
    transform: translateY(-8px) scale(0.97) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.ui-ready.panel-open .control-cluster.feature-dock {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .feature-dock .ctrl-btn { width: 40px; height: 40px; }
  .feature-dock .ctrl-btn::after { display: none; } /* no hover tooltips on touch */

  /* ---- Floor dock: collapsed, slides up above the bottom toggle ---- */
  #sceneList {
    bottom: 66px;
    max-width: calc(100% - 20px);
  }
  .dock-inner { padding: 6px; border-radius: 18px; }
  .dock-label { display: none; }
  #sceneList .scene { min-width: 70px; padding: 9px 8px; }
  .scene-icon { width: 30px; height: 30px; }
  .scene-icon svg { width: 17px; height: 17px; }
  #sceneList .scene .text { font-size: 10.5px; }

  body.ui-ready #sceneList {
    transform: translateX(-50%) translateY(160%);
    opacity: 0;
    pointer-events: none;
  }
  body.ui-ready.dock-open #sceneList {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  #mapPanel { left: 50%; right: auto; bottom: 120px; width: min(300px, calc(100% - 24px)); transform: translateX(-50%) translateY(12px) scale(0.98); }
  #mapPanel.open { transform: translateX(-50%) translateY(0) scale(1); }

  #toast { bottom: 120px; }

  /* Nearby markers are icon-only until focused — handled in the base styles. */

  .intro-controls-hint { gap: 18px; flex-wrap: wrap; }
}


@media (max-width: 380px) {
  #brandChip .brand-text { display: none; }
  #brandChip { padding: 6px; }
}