:root {
  --age-gold: #E5C158;
  --age-gold-soft: rgba(229, 193, 88, 0.35);
  --age-red: #D9534F;
  --age-red-glow: rgba(217, 83, 79, 0.4);
  
  --age-charcoal: #1c2328;
  --age-ivory: #E8E5DC;
  --age-silver: #9A9C9B;
  
  --font-display: 'Cormorant Garamond', serif;
  --font-ui: 'Montserrat', sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background-color: #000;
  color: var(--age-ivory);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; 
}

/* ---------- MAP VIEWPORT (SCROLLABLE ON MOBILE) ---------- */
.map-viewport {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  /* Hide scrollbar for a clean look */
  scrollbar-width: none; 
}
.map-viewport::-webkit-scrollbar { display: none; }

.map-wrapper {
  position: relative;
  height: 100vh;
  flex: 0 0 auto;
  margin: 0 auto; /* Centers on large desktop screens */
}

.map-img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- NODES ---------- */
.node {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
}
.node:focus-visible { outline: none; }

.node__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  animation: nodeBounce 3s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
  perspective: 200px; 
}

.node__icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: var(--age-gold);
  animation: nodeFlip 10s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
  transform-style: preserve-3d;
  transition: filter 0.3s var(--ease), color 0.3s var(--ease);
}

.node__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,0.95))
    drop-shadow(0 0 6px currentColor)
    drop-shadow(0 0 14px var(--age-gold-soft));
  transition: filter 0.3s var(--ease);
}
 .node__label {
   font-size: clamp(0.69rem, 0.8vw, 0.85rem);
   font-weight: 600;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: #f5fcff;
   white-space: nowrap;
   -webkit-text-stroke: 0.25px rgba(255,255,255,.55);
   text-shadow:
     0 1px 2px rgba(1,13,22,.98),
     0 2px 7px rgba(0,8,16,.96),
     0 0 4px rgba(255,255,255,.95),
     0 0 10px rgba(216,240,255,.75),
     0 0 22px rgba(117,205,255,.45);
   transition: color 0.3s, text-shadow 0.3s;
 }
/* Hover */
.node:hover .node__icon svg {
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,0.95))
    drop-shadow(0 0 10px currentColor)
    drop-shadow(0 0 22px currentColor);
}
.node:hover .node__label { color: #ffffff; }

/* Locked */
.node--locked .node__icon { color: var(--age-red); }
.node--locked .node__icon svg {
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,0.95))
    drop-shadow(0 0 6px var(--age-red))
    drop-shadow(0 0 14px var(--age-red-glow));
}
.node--locked:hover .node__icon svg {
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,0.95))
    drop-shadow(0 0 10px var(--age-red))
    drop-shadow(0 0 22px var(--age-red));
}

/* ---------- ANIMATIONS ---------- */
@keyframes nodeBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes nodeFlip {
  0%, 78%  { transform: rotateY(0deg); }
  100%     { transform: rotateY(360deg); }
}

/* ---------- HEADER ---------- */
.map-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.map-header__back {
  pointer-events: auto;
  color: var(--age-gold);
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--age-gold-soft);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease);
}
.map-header__back:hover {
  background: var(--age-gold);
  color: #000;
}

/* ---------- SNOW CANVAS ---------- */
.snow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 150;
}

/* ---------- PANEL ---------- */
.panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: end center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.panel.is-open { opacity: 1; pointer-events: auto; }

.panel__card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--age-charcoal), #000);
  border-top: 2px solid var(--age-gold);
  border-radius: 22px 22px 0 0;
  padding: 2.2rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  transform: translateY(28px);
  transition: transform 0.5s var(--ease);
}
.panel.is-open .panel__card { transform: translateY(0); }

@media (min-width: 640px) {
  .panel { place-items: center; }
  .panel__card {
    border: 1px solid var(--age-gold-soft);
    border-top: 2px solid var(--age-gold);
    border-radius: 20px;
    padding: 2.5rem 2rem;
  }
}

.panel__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--age-charcoal);
  border: 1px solid var(--age-gold-soft);
  border-radius: 50%;
  color: var(--age-gold);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.panel__close:hover {
  background: var(--age-gold);
  color: #000;
}

.panel__num {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: var(--age-gold);
  margin-bottom: 0.4rem;
}
.panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 600;
  color: var(--age-ivory);
  line-height: 1.1;
}
.panel__body { margin-top: 1.5rem; }
.panel__body p {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--age-silver);
}
.panel__body .tbc {
  color: var(--age-gold);
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #000;
  color: var(--age-red);
  border: 1px solid var(--age-red);
  padding: 1rem 2rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px var(--age-red-glow);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--ease);
  z-index: 2000;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- DEV BADGE ---------- */
.dev-badge {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 3000;
  background: #000;
  color: var(--age-gold);
  border: 1px solid var(--age-gold);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.dev-badge.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .node__inner, .node__icon { animation: none; }
  .panel, .panel__card, .toast, .node__icon svg { transition: none; }
}

/* Swipe hint: visible only when horizontal map scrolling is possible */
.swipe-hint{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:180;display:flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid rgba(213,238,249,.4);border-radius:999px;background:rgba(9,21,29,.83);backdrop-filter:blur(12px);color:#f0faff;font:600 11px/1.2 var(--font-ui);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;box-shadow:0 0 20px rgba(116,213,255,.2);pointer-events:none;transition:opacity .5s ease;}
.swipe-hint svg{width:25px;height:20px;stroke:#b5eaff;fill:none;stroke-width:2;animation:swipeArrow 1.7s ease-in-out infinite;}
.swipe-hint.is-hidden{opacity:0;}
@keyframes swipeArrow{0%,100%{transform:translateX(-4px);opacity:.55}50%{transform:translateX(5px);opacity:1}}
@media(prefers-reduced-motion:reduce){.swipe-hint svg{animation:none}}
/* Muted burgundy accents in information panels */
.panel{--age-gold:#96334b;--age-gold-soft:rgba(150,51,75,.4)}
.panel [style*="#E5C158"]{color:#96334b!important;border-color:#96334b!important}



/* Distinctive clickable markers: silver by default, gold and blue for key destinations. */
.node:not(.node--locked) .node__icon{color:#d9e1e9!important}
.node[data-node="experience"] .node__icon,.node[data-node="tickets"] .node__icon{color:#ffd15b!important}
.node[data-node="location"] .node__icon{color:#54baff!important}
/* The shine is synchronized to the final 22% of the ten-second spin cycle. */
.node:not(.node--locked) .node__icon svg{
  filter:none!important;
  animation: iconSpinShine 10s ease-in-out infinite;
  animation-delay:var(--anim-delay,0s);
}
@keyframes iconSpinShine{
  0%,77%,100%{filter:none}
  82%,93%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 13px currentColor) brightness(1.35)}
}
.node:hover .node__icon svg,.node:focus-visible .node__icon svg{filter:drop-shadow(0 0 8px currentColor)!important}
@media(prefers-reduced-motion:reduce){.node:not(.node--locked) .node__icon svg{animation:none!important;filter:none!important}}

/* Burgundy emphasis for uppercase words in Story and Expectation. */
.panel__body .age-emphasis{color:#b34560;font-weight:700;letter-spacing:.015em}
/* AGE navigation and branding */
.map-header{justify-content:space-between;align-items:flex-start}
.menu-toggle{pointer-events:auto;min-width:58px;height:35px;padding:0 17px;border:1px solid var(--age-gold-soft);border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;z-index:220;color:var(--age-gold);transition:all .3s var(--ease)}
.menu-toggle:hover{background:var(--age-gold);color:#000}
.menu-toggle span{width:18px;height:1.5px;background:currentColor;border-radius:2px}
.menu-shade{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:260;opacity:0;pointer-events:none;transition:opacity .3s}
.side-menu{position:fixed;right:0;top:0;bottom:0;width:min(340px,85vw);z-index:270;padding:30px 26px;background:linear-gradient(150deg,#1b222a,#090b10 80%);border-left:1px solid rgba(185,195,208,.4);box-shadow:-20px 0 70px #0008;transform:translateX(102%);transition:transform .35s ease;display:flex;flex-direction:column;gap:10px}
.side-menu.is-open{transform:translateX(0)}.menu-shade.is-open{opacity:1;pointer-events:auto}
.side-menu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}
.side-menu__top img{width:110px;max-height:60px;object-fit:contain}
.side-menu__top button{background:transparent;color:#e5e7eb;border:1px solid #6b7280;border-radius:50%;height:38px;width:38px;cursor:pointer}
.side-menu>a,.side-menu>button{display:block;text-align:left;font:600 13px/1.5 var(--font-ui);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;color:#e9edf3;background:none;border:0;border-bottom:1px solid #ffffff20;padding:17px 4px;cursor:pointer}
.side-menu>a:hover,.side-menu>button:hover{color:#e5a9b7}
.map-footer{position:fixed;bottom:0;left:0;right:0;z-index:160;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px max(18px,env(safe-area-inset-right));background:linear-gradient(0deg,rgba(0,0,0,.84),rgba(0,0,0,.0));pointer-events:none}
.map-footer a{pointer-events:auto;display:inline-flex}.map-footer img{height:36px;width:auto;max-width:115px;object-fit:contain}
.map-footer span{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#bfc5ce;text-shadow:0 1px 6px #000}
.node[data-node="instagram"] .node__icon{width:35px;height:35px;color:#bd83f5!important;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.node[data-node="instagram"] .node__label{font-size:10px}
/* Countdown stays under the Escape node without moving any existing marker. */
.escape-countdown{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);width:max-content;max-width:180px;text-align:center;color:#e7e0e3;font:600 11px/1.4 var(--font-ui);letter-spacing:.055em;text-shadow:0 1px 6px #000,0 0 10px rgba(125,42,63,.55);pointer-events:none;white-space:nowrap}
.escape-countdown__time{display:block;color:#e6b7c4;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.escape-countdown__caption{display:block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#d0c7ca}
@media(max-width:640px){.escape-countdown{font-size:10px}.escape-countdown__time{font-size:11px}.map-footer img{height:27px}.map-footer span{font-size:8px}.swipe-hint{bottom:65px}}
@media(prefers-reduced-motion:reduce){.side-menu,.menu-shade{transition:none}}

/* Clearer, burgundy-red countdown glow without an extra label */
.escape-countdown{filter:drop-shadow(0 0 5px rgba(160,20,53,.82)) drop-shadow(0 0 12px rgba(128,8,42,.58));}
.escape-countdown__time{color:#ffe1e7;font-weight:800;font-size:14px;text-shadow:0 0 4px #b72849,0 0 11px #a21d3f,0 0 22px rgba(143,16,49,.9);}
@media(max-width:640px){.escape-countdown__time{font-size:12px}}

/* Background music toggle */
.music-control{position:fixed;right:18px;bottom:20px;z-index:9999;display:flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid rgba(180,180,190,.55);border-radius:999px;background:rgba(12,14,20,.77);backdrop-filter:blur(12px);color:#e6e3e7;font:600 12px/1.2 Montserrat,Arial,sans-serif;cursor:pointer;box-shadow:0 2px 18px rgba(0,0,0,.35)}
.music-control[hidden]{display:none!important}.music-control:hover,.music-control:focus-visible{border-color:#b48b9d;outline:2px solid transparent;box-shadow:0 0 0 2px rgba(135,53,77,.35)}
@media(max-width:600px){.music-control{right:12px;bottom:14px;padding:10px 12px}}

/* Compact silver music toggle; raised clear of the map footer. */
.music-control{position:fixed;right:clamp(14px,2.5vw,28px);bottom:calc(82px + env(safe-area-inset-bottom,0px));width:43px;height:43px;min-width:43px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(18,22,30,.42);border:1px solid rgba(217,221,230,.65);color:#e9eaf0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 16px rgba(0,0,0,.24);backdrop-filter:blur(15px) saturate(115%);-webkit-backdrop-filter:blur(15px) saturate(115%);z-index:9999;cursor:pointer}
.music-control[hidden]{display:none!important}
.music-control__icon{width:21px;height:21px;display:block;flex:none}
.music-control__slash{stroke:#e9eaf0;stroke-width:2.3;filter:drop-shadow(0 0 2px rgba(255,255,255,.35))}
.music-control:hover,.music-control:focus-visible{border-color:#f0f0f4;box-shadow:0 0 0 2px rgba(217,221,230,.18),0 3px 16px rgba(0,0,0,.24)}
@media(max-width:600px){.music-control{right:14px;bottom:calc(90px + env(safe-area-inset-bottom,0px));width:40px;height:40px;min-width:40px}}

/* The swipe instruction is a hint, not a button. */
.swipe-hint{padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* Smaller music toggle: keep it discreet and clear of footer text. */
.music-control{width:32px;height:32px;min-width:32px;padding:0}
.music-control__icon{width:16px;height:16px}
@media(max-width:600px){.music-control{width:30px;height:30px;min-width:30px}.music-control__icon{width:15px;height:15px}}

/* AGE ticket tiers and future purchase CTA */
.panel__body .ticket-tier{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:.75rem 0;border-bottom:1px solid rgba(160,160,160,.2);color:#e4e2e2}
.panel__body .ticket-tier strong{color:#b34560;white-space:nowrap;font-weight:750}
.panel__body .ticket-buy{display:block;margin-top:1.4rem;padding:.8rem 1.4rem;border-radius:999px;background:#70253a;border:1px solid #9a3c56;color:#fff;font:inherit;font-weight:700;opacity:.65;cursor:not-allowed}
@media(max-width:480px){.panel__body .ticket-tier{gap:.65rem;font-size:.91rem}}