/* Harbor House — Museum Map (Stage 3) */

/* ── Intro + controls ─────────────────────────────────────────── */
.map-intro{padding:var(--sp-6) 0 var(--sp-3)}
.map-controls{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;margin:var(--sp-3) 0 var(--sp-4)}
.mode-toggle{display:inline-flex;background:#fff;border:2px solid var(--navy);border-radius:var(--radius-full);padding:4px;gap:4px;box-shadow:var(--shadow-sm)}
.mode-btn{min-height:48px;padding:var(--sp-2) var(--sp-5);border:0;border-radius:var(--radius-full);background:transparent;font-family:var(--font-display);font-size:var(--fs-base);font-weight:700;color:var(--navy);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.mode-btn[aria-pressed="true"]{background:var(--navy);color:#fff}
.mode-btn:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.calm-btn{min-height:48px}

/* ── Map stage ────────────────────────────────────────────────── */
.map-stage{position:relative;margin:0 0 var(--sp-5);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:3px solid #fff;background:#cdeffd}
.map-svg{display:block;width:100%;height:auto}
.map-svg text{font-family:var(--font-display)}
.svg-sign{fill:#fff8ec;font-weight:800;font-size:19px;letter-spacing:.14em}
.svg-land-label{fill:var(--navy);font-weight:800;font-size:21px;paint-order:stroke;stroke:#fff8ec;stroke-width:5px;stroke-linejoin:round}
.svg-label-light{fill:#fff;stroke:rgba(10,40,70,.45)}
.svg-chip{fill:var(--ink-soft);font-family:var(--font-body);font-weight:700;font-size:14.5px;paint-order:stroke;stroke:#fff8ec;stroke-width:4px;stroke-linejoin:round;opacity:0;transition:opacity var(--dur) var(--ease)}
.svg-chip-light{fill:#e8f6ff;stroke:rgba(10,40,70,.4)}
.map-stage[data-mode="plan"] .svg-chip{opacity:1}
.svg-x{font-family:var(--font-display);font-weight:800;font-size:26px}

/* ── Landmarks ────────────────────────────────────────────────── */
.lm{cursor:pointer;text-decoration:none}
.lm-halo{opacity:0;transition:opacity var(--dur) var(--ease)}
.lm:hover .lm-halo,.lm:focus-visible .lm-halo,.lm.active .lm-halo{opacity:.55}
.lm:focus{outline:none}
.lm:focus-visible .lm-halo{opacity:.8}
.lm-badge{display:none}
.lm-badge.earned{display:block}
.lm.in-day .lm-halo{opacity:.35}

/* ── Map animations ───────────────────────────────────────────── */
@keyframes mapDrift{from{transform:translate(-140px,34px)}to{transform:translate(1330px,34px)}}
@keyframes mapDriftB{from{transform:translate(1290px,86px)}to{transform:translate(-180px,86px)}}
.map-cloud{animation:mapDrift 95s linear infinite}
.cloud-b{animation-name:mapDriftB;animation-duration:130s}
@keyframes shimSlide{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(14px);opacity:.95}}
.shim{animation:shimSlide 4.5s ease-in-out infinite}
.shim-2{animation-delay:.7s}.shim-3{animation-delay:1.3s}.shim-4{animation-delay:.4s}.shim-5{animation-delay:1.8s}
@keyframes beaconSpin{to{transform:rotate(360deg)}}
.beacon-sweep{transform-origin:600px 88px;animation:beaconSpin 9s linear infinite}
@keyframes beaconPulse{0%,100%{opacity:1}50%{opacity:.45}}
.beacon-dot{animation:beaconPulse 2.2s ease-in-out infinite}
@keyframes daisySway{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-2.4deg)}60%{transform:rotate(1.6deg)}}
.map-daisy{transform-origin:160px 448px;animation:daisySway 7s ease-in-out infinite}
@keyframes vaporPuff{0%{transform:translateY(0) scale(.7);opacity:0}25%{opacity:.95}100%{transform:translateY(14px) scale(1.25);opacity:0}}
.rocket-vapor{transform-origin:1010px 188px;animation:vaporPuff 3.4s ease-out infinite}
@keyframes smokeRise{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:.9}100%{transform:translate(16px,-58px) scale(1.5);opacity:0}}
.factory-smoke .puff{transform-box:fill-box;transform-origin:center;animation:smokeRise 4.2s ease-out infinite}
.factory-smoke .puff-2{animation-delay:1.4s}
.factory-smoke .puff-3{animation-delay:2.8s}
@keyframes gearSpin{to{transform:rotate(360deg)}}
.factory-gear{transform-box:fill-box;transform-origin:center;animation:gearSpin 14s linear infinite}
@keyframes craneSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.2deg)}}
.crane-arm{transform-origin:286px 196px;animation:craneSway 6s ease-in-out infinite}
@keyframes tailBob{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(-3.5deg) translateY(3px)}}
.whale-tail{transform-origin:880px 712px;animation:tailBob 5.5s ease-in-out infinite}
@keyframes subBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.map-sub{animation:subBob 4.8s ease-in-out infinite}
@keyframes bubbleRise{0%{transform:translateY(0);opacity:0}25%{opacity:.95}100%{transform:translateY(-16px);opacity:0}}
.sub-bubbles circle{animation:bubbleRise 3s ease-in infinite}
.sub-bubbles circle:nth-child(2){animation-delay:1s}
.sub-bubbles circle:nth-child(3){animation-delay:2s}
@keyframes shipBob{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(-1.8deg) translateY(3px)}}
.pirate-ship{transform-origin:426px 756px;animation:shipBob 5s ease-in-out infinite}
@keyframes frondSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(3deg)}}
.palm-fronds{transform-box:fill-box;transform-origin:60% 70%;animation:frondSway 5s ease-in-out infinite}
@keyframes truckWiggle{0%,88%,100%{transform:translateX(0)}92%{transform:translateX(2px)}96%{transform:translateX(-2px)}}
.fire-truck{animation:truckWiggle 6s ease-in-out infinite}

/* pause everything when calm / offscreen / reduced-motion */
body.hh-calm .map-svg *,body.hh-calm .map-pip-svg *,
.map-stage.is-offscreen .map-svg *, .map-stage.is-offscreen .map-pip-svg *{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){
  .map-svg *,.map-pip-svg *{animation-play-state:paused!important}
}

/* ── Pip on the map ───────────────────────────────────────────── */
.map-pip{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;align-items:flex-end;gap:var(--sp-2);width:max-content;max-width:min(460px,92%);z-index:3;pointer-events:none}
.map-pip-svg{width:74px;height:auto;flex:0 0 auto;filter:drop-shadow(0 4px 8px rgba(15,35,64,.25))}
@keyframes pipBeaconPulse{0%,100%{opacity:1}50%{opacity:.4}}
.pip-beacon{animation:pipBeaconPulse 2.4s ease-in-out infinite}
@keyframes pipWave{0%,70%,100%{transform:rotate(0deg)}80%{transform:rotate(-14deg)}90%{transform:rotate(8deg)}}
.pip-flipper{transform-origin:82px 56px;animation:pipWave 5s ease-in-out infinite}
.map-pip-bubble{background:#fff;border:2px solid var(--navy);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);font-weight:700;font-size:var(--fs-sm);color:var(--navy);box-shadow:var(--shadow);position:relative;margin-bottom:20px}
.map-pip-bubble::before{content:"";position:absolute;left:-11px;bottom:16px;border:6px solid transparent;border-right-color:var(--navy)}
.map-pip-bubble::after{content:"";position:absolute;left:-6px;bottom:17.5px;border:5px solid transparent;border-right-color:#fff}

/* ── Popover ──────────────────────────────────────────────────── */
.map-pop{position:absolute;z-index:5;width:min(348px,calc(100% - 20px));background:#fff;border:3px solid var(--wc,var(--navy));border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.map-pop[hidden]{display:none}
.pop-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:#f1f4f8;font-size:1rem;cursor:pointer;color:var(--navy)}
.pop-close:hover{background:#e2e8f0}
.pop-head{display:flex;gap:var(--sp-3);align-items:center;padding-right:40px}
.pop-emoji{font-size:2.4rem;line-height:1}
.pop-head h2{font-size:var(--fs-xl);margin:0}
.pop-badge{margin:2px 0 0;font-size:var(--fs-sm);font-weight:800;color:var(--sun-dark)}
.pop-badge.earned{color:var(--w-dino-2)}
.pop-tagline{font-weight:700;color:var(--ink);margin:var(--sp-3) 0 var(--sp-1)}
.pop-fact{margin:0 0 var(--sp-3);color:var(--ink-soft);font-size:var(--fs-sm)}
.pop-pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3)}
.pop-pills .pill{background:#eef4fb;color:var(--navy)}
.pop-parent{font-size:var(--fs-sm);color:var(--ink-soft);margin:0 0 var(--sp-4);display:none}
.pop-parent.show{display:block}
.pop-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pop-actions .btn{min-height:48px}
.pop-actions [hidden]{display:none!important} /* .btn's inline-flex would otherwise override the hidden attribute */

/* ── Itinerary tray ───────────────────────────────────────────── */
.itin-tray{background:#fff;border:2px solid var(--navy);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--sp-5);margin:0 0 var(--sp-6)}
.itin-tray[hidden]{display:none}
.itin-head{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:baseline;justify-content:space-between}
.itin-head h2{margin:0;font-size:var(--fs-xl)}
.itin-total{font-weight:800;color:var(--teal-dark);margin:0}
.itin-stops{list-style:none;margin:var(--sp-4) 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.itin-stops li{display:inline-flex;align-items:center;gap:var(--sp-2);background:#eef4fb;border-radius:var(--radius-full);padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);font-weight:700;color:var(--navy)}
.itin-stops li .stop-min{font-weight:600;color:var(--ink-soft);font-size:var(--fs-sm)}
.stop-remove{width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--coral-dark);font-size:.95rem;cursor:pointer;box-shadow:var(--shadow-sm)}
.itin-empty{color:var(--ink-soft);margin:var(--sp-3) 0}
.itin-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}

/* ── Accessible list ──────────────────────────────────────────── */
.map-list{margin:var(--sp-6) 0}
.map-list-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.world-list-card{border-top:6px solid var(--wc,var(--navy))}
.world-list-card h3{margin-top:0}
.world-list-card h3 a{color:var(--navy);text-decoration:none}
.world-list-card h3 a:hover{text-decoration:underline}
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-4)}
.pills .pill{background:#eef4fb;color:var(--navy);text-transform:none;letter-spacing:0;font-size:var(--fs-sm)}

/* ── Footer nav ───────────────────────────────────────────────── */
.map-foot-nav{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;margin:0 0 var(--sp-8)}
.map-foot-nav .btn{min-height:48px}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width:719px){
  .map-controls{flex-direction:column;align-items:stretch}
  .mode-toggle{display:flex}
  .mode-btn{flex:1;padding:var(--sp-2) var(--sp-2);font-size:var(--fs-sm)}
  .map-pip{max-width:94%}
  .map-pip-svg{width:52px}
  .map-pip-bubble{font-size:var(--fs-xs);margin-bottom:12px}
  .map-pop.docked{left:10px!important;right:10px;top:auto!important;bottom:10px;width:auto;max-height:62%;overflow:auto}
  .svg-land-label{font-size:23px}
}