/* ═══════════════════════════════════════════════════════════
   her little forest 🌷 — one-screen tappable world (no editing needed)
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/Baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --peony: #ff8fbf;
  --peony-soft: #ffb7d5;
  --peony-pale: #ffe1ee;
  --peony-deep: #e0559a;
  --leaf: #6f9c5c;
  --leaf-dark: #5d8a4e;
  --matcha-dark: #567d43;
  --sunshine: #ffd98a;
  --wood: #b3865a;
  --wood-dark: #96703f;
  --plum: #5b4a63;
  --display: "Baloo 2", "Comic Sans MS", cursive;
  --body: "Quicksand", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--body);
  font-weight: 500;
  color: var(--plum);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: linear-gradient(180deg, #dff0cd 0%, #cfe9bd 30%, #c2e2ae 60%, #b0d79c 100%);
}

button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; padding: 0; }

/* ─────────────── boot bloom ─────────────── */
#boot {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center; align-content: center; gap: 14px;
  background: linear-gradient(180deg, #eaf6dd, #cfe9c0);
  transition: opacity .6s ease;
  text-align: center; padding: 24px;
}
#boot.fade { opacity: 0; pointer-events: none; }
.boot-flower { animation: bloomIn 1.1s cubic-bezier(.2,1.4,.4,1) both, gentleSpin 10s linear infinite; }
@keyframes bloomIn { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { opacity: 1; } }
@keyframes gentleSpin { to { transform: rotate(360deg); } }
.boot-name {
  font-family: var(--display); font-weight: 800; font-size: 24px;
  color: var(--matcha-dark); max-width: 30ch; line-height: 1.45;
  animation: fadeUp .8s .4s ease both;
}
.boot-name small { display: block; font-size: 14.5px; font-weight: 600; color: #7a8a68; margin-top: 8px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ─────────────── forest backdrop ─────────────── */
#bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.bg-glow {
  position: absolute; left: 50%; top: 52%;
  width: 130vmin; height: 100vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, #f6fad2cc 0%, #e4f2bb66 40%, transparent 70%);
  animation: glowPulse 7s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.bg-mist { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-canopy {
  position: absolute; top: 0; left: 0;
  width: 100%; height: clamp(60px, 11vh, 110px);
  animation: canopySway 9s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes canopySway { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.015); } }
.bg-tree { position: absolute; bottom: 0; height: 103vh; width: clamp(76px, 21vw, 150px); }
.bg-tree-l { left: max(-40px, calc(50vw - 340px)); }
.bg-tree-r { right: max(-40px, calc(50vw - 340px)); }
.bg-grass { position: absolute; bottom: 0; left: 0; width: 100%; height: clamp(50px, 9vh, 90px); }

/* ─────────────── the stage ─────────────── */
#stage {
  position: relative; z-index: 5;
  height: 100dvh;
  width: min(100vw, 480px);
  margin: 0 auto;
}
#stage > button, .shroom-btn {
  transition: transform .16s cubic-bezier(.2,1.6,.4,1);
}
#stage > button:active { transform: scale(.92); }

/* ── photo string ── */
.photo-line { position: absolute; top: calc(env(safe-area-inset-top) + 6px); left: 4%; width: 76%; height: 96px; z-index: 8; }
.line-rope { position: absolute; top: 12px; left: 0; width: 100%; height: 26px; }
.mini-photo {
  position: absolute; width: 17%; min-width: 56px;
  background: #fffdf7; padding: 4px 4px 8px; border-radius: 6px;
  box-shadow: 0 4px 9px rgba(60,90,40,.25);
  animation: hangSway 5.5s ease-in-out infinite;
  transform-origin: top center;
}
.mini-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; display: block; background: #eaf6dd; pointer-events: none; }
.mini-photo .pin {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 14px; border-radius: 4px;
  background: linear-gradient(180deg, #ffd98a, #f2b94d);
  box-shadow: 0 1px 3px rgba(90,70,40,.4);
}
.mp1 { left: 4%; top: 8px; }
.mp2 { left: 40%; top: 20px; animation-delay: 1.8s; }
.mp2 .pin { background: linear-gradient(180deg, #ffb7d5, #ee8bb8); }
.mp3 { left: 76%; top: 6px; animation-delay: 3.2s; }
.mp3 .pin { background: linear-gradient(180deg, #cdb9f0, #a88fd8); }
@keyframes hangSway { 0%,100% { transform: rotate(-2.4deg);} 50% { transform: rotate(2.4deg);} }

/* ── birds ── */
.bird {
  position: absolute; z-index: 9;
  animation: birdBob 3s ease-in-out infinite;
}
.bird.b1 { top: calc(env(safe-area-inset-top) + 2px); right: 1%; width: 13%; min-width: 46px; }
.bird.b2 { top: 11%; left: 1%; width: 11%; min-width: 40px; animation-delay: 1.2s; }
.bird.b3 { top: 33%; right: 9%; width: 9%; min-width: 34px; animation-delay: 2.1s; z-index: 7; }
@keyframes birdBob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-5px);} }
.bird.hop { animation: birdHop .55s ease; }
@keyframes birdHop { 0%,100% { transform: translateY(0);} 30% { transform: translateY(-16px) rotate(-6deg);} 60% { transform: translateY(-2px);} 80% { transform: translateY(-10px) rotate(5deg);} }
.bird-note {
  position: absolute; top: -12px; left: 2px;
  font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--peony-deep);
  opacity: 0; pointer-events: none;
}
.bird.hop .bird-note { animation: noteFloat 1s ease-out; }
@keyframes noteFloat { 0% { opacity: 0; transform: translateY(4px) scale(.6);} 25% { opacity: 1;} 100% { opacity: 0; transform: translateY(-26px) rotate(14deg);} }

/* ── butterflies ── */
.butterfly { position: absolute; z-index: 7; pointer-events: auto; cursor: pointer; }
.butterfly .wing { transform-origin: 20px 17px; }
.butterfly .wl { animation: flapL .34s ease-in-out infinite alternate; }
.butterfly .wr { animation: flapR .34s ease-in-out infinite alternate; }
@keyframes flapL { from { transform: scaleX(1);} to { transform: scaleX(.45);} }
@keyframes flapR { from { transform: scaleX(1);} to { transform: scaleX(.45);} }
.bf1 { left: 12%; top: 14%; animation: flutter1 18s ease-in-out infinite; }
.bf2 { right: 14%; top: 30%; animation: flutter2 23s ease-in-out infinite; }
@keyframes flutter1 {
  0%,100% { transform: translate(0,0) rotate(-8deg); }
  25% { transform: translate(28vw, 6vh) rotate(10deg); }
  50% { transform: translate(48vw, -2vh) rotate(-6deg); }
  75% { transform: translate(16vw, 10vh) rotate(8deg); }
}
@keyframes flutter2 {
  0%,100% { transform: translate(0,0) rotate(6deg); }
  30% { transform: translate(-30vw, 8vh) rotate(-10deg); }
  55% { transform: translate(-12vw, -6vh) rotate(6deg); }
  80% { transform: translate(-38vw, 2vh) rotate(-4deg); }
}
.butterfly.dart { animation-duration: 5s !important; }

/* ── placed objects ── */
#radioStump {
  position: absolute; left: 0%; top: 15%; width: 38%; z-index: 6;
  animation: idleBob 5s ease-in-out infinite;
}
.radio-body { transform-origin: 95px 100px; }
#radioStump.playing .radio-body { animation: radioDance .55s ease-in-out infinite; }
@keyframes radioDance { 0%,100% { transform: rotate(-2deg);} 50% { transform: rotate(2deg) translateY(-2px);} }
.bob-note {
  position: absolute; font-size: 18px; color: var(--peony-deep);
  opacity: 0; font-family: var(--display); font-weight: 700; pointer-events: none;
}
#radioStump.playing .bob-note { animation: bobNoteFloat 2.2s ease-out infinite; }
.n1 { left: 12px; top: 20px; }
.n2 { right: 16px; top: 8px; animation-delay: .8s !important; color: var(--matcha-dark); }
@keyframes bobNoteFloat { 0% { opacity: 0; transform: translateY(6px) scale(.6);} 25% { opacity: 1;} 100% { opacity: 0; transform: translateY(-30px) rotate(14deg);} }

@keyframes boing { 0% { transform: scale(1);} 35% { transform: scale(1.12, .86);} 70% { transform: scale(.94, 1.08);} 100% { transform: scale(1);} }

/* ── the picnic snacks ── */
.eat-spot { position: absolute; z-index: 6; animation: idleBob 5s ease-in-out infinite; }
.eat-spot.jiggle { animation: jiggle .45s ease-in-out; }
@keyframes jiggle { 0%,100% { transform: rotate(0);} 25% { transform: rotate(-4deg) scale(1.06);} 75% { transform: rotate(4deg) scale(1.06);} }
.es0 { left: 36%; top: 70.5%; width: 15%; animation-delay: .6s; }
.es1 { right: 7%; top: 57.5%; width: 18%; animation-delay: 1.4s; }
.es2 { left: 34%; top: 62%; width: 14%; animation-delay: 2.2s; }
.es3 { left: 51%; top: 60.5%; width: 17%; animation-delay: 3s; }

#peonyBig {
  position: absolute; left: 3%; top: 33%; width: 21%; z-index: 6;
  transform-origin: bottom center;
  animation: peonySway 6s ease-in-out infinite;
}
@keyframes peonySway { 0%,100% { transform: rotate(-2.5deg);} 50% { transform: rotate(2.5deg);} }
.peony-spin { animation: gentleSpin 26s linear infinite; transform-origin: 60px 60px; }
.peony-head { transform-origin: 60px 60px; }
#peonyBig.burst .peony-head { animation: peonyPop .6s cubic-bezier(.2,1.7,.4,1); }
@keyframes peonyPop { 0% { transform: scale(1);} 40% { transform: scale(1.25) rotate(8deg);} 100% { transform: scale(1);} }

#mapPost {
  position: absolute; right: 2%; top: 36%; width: 28%; z-index: 6;
  animation: idleBob 7s ease-in-out .5s infinite;
}
.post-board { transform-origin: 65px 14px; animation: signSwing 6s ease-in-out infinite; }
@keyframes signSwing { 0%,100% { transform: rotate(-1.6deg);} 50% { transform: rotate(1.6deg);} }

#latte {
  position: absolute; left: 33%; top: 34%; width: 17%; z-index: 6;
  animation: idleBob 5.5s ease-in-out .8s infinite;
}
.latte-steam { animation: steamWave 3s ease-in-out infinite; opacity: .8; }
@keyframes steamWave { 0%,100% { transform: translateY(0); opacity: .3;} 50% { transform: translateY(-4px); opacity: .9;} }
#latte.slurp { animation: boing .45s cubic-bezier(.2,1.8,.4,1); }
.lf { transition: opacity .25s; }
.lf.gone { opacity: 0; }

@keyframes idleBob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }

#matchaBowl {
  position: absolute; left: 6%; top: 61%; width: 26%; z-index: 6;
}
.sip-badge {
  position: absolute; top: 2px; right: -4px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 7px;
  display: grid; place-items: center;
  background: #fff; border: 2.5px solid var(--peony-soft);
  border-radius: 99px;
  font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--peony-deep);
  box-shadow: 0 2px 5px rgba(60,90,40,.25);
}
#matchaBowl.whisking .whisk { animation: whiskIt .5s ease-in-out; transform-origin: 60px 30px; }
@keyframes whiskIt { 0%,100% { transform: rotate(0);} 25% { transform: rotate(-16deg) translateX(-5px);} 75% { transform: rotate(16deg) translateX(5px);} }
#matchaBowl .steam { opacity: 0; }
#matchaBowl.whisking .steam { animation: steamUp 1s ease-out; }
@keyframes steamUp { 0% { opacity: 0; transform: translateY(4px);} 30% { opacity: .85;} 100% { opacity: 0; transform: translateY(-14px);} }
.matcha-float {
  position: absolute; left: 50%; top: 0;
  font-family: var(--display); font-weight: 800; color: var(--matcha-dark);
  animation: floatUp .9s ease-out both; pointer-events: none; z-index: 3;
}
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0);} to { opacity: 0; transform: translate(-50%, -46px) scale(1.3);} }

/* ── bottom-left bush ── */
#bushSpot { position: absolute; left: -4%; bottom: calc(env(safe-area-inset-bottom) + 0px); width: 46%; z-index: 7; pointer-events: none; }
.bush-svg { width: 100%; display: block; }

/* ── pond + gator ── */
#pond { position: absolute; right: -5%; bottom: calc(env(safe-area-inset-bottom) - 4px); width: 52%; z-index: 7; }
.ripple { animation: rippleWave 4s ease-in-out infinite; }
.r2 { animation-delay: 2s; }
@keyframes rippleWave { 0%,100% { opacity: .3; transform: scale(.7);} 50% { opacity: 1; transform: scale(1.1);} }
#gator { animation: gatorBob 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes gatorBob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(3.5px);} }
.gator-tail { transform-origin: 160px 62px; animation: tailWag 3.4s ease-in-out infinite; }
@keyframes tailWag { 0%,100% { transform: rotate(0);} 50% { transform: rotate(8deg);} }
.gator-head { transform-origin: 94px 60px; transition: transform .18s ease; }
#pond.chomp .gator-head { animation: chompIt .65s ease; }
@keyframes chompIt {
  0%,100% { transform: rotate(0); }
  30% { transform: rotate(-22deg); }
  45% { transform: rotate(2deg); }
  60% { transform: rotate(-14deg); }
  75% { transform: rotate(0); }
}
.gator-eye { animation: gatorBlink 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes gatorBlink { 0%, 92%, 100% { transform: scaleY(1);} 95% { transform: scaleY(.1);} }

/* ── bunny ── */
#bunny {
  position: absolute; left: 41%; bottom: calc(env(safe-area-inset-bottom) + 13%);
  width: 15%; z-index: 7;
}
.bunny-ear.e2 { transform-origin: 44px 30px; animation: earTwitch 4s ease-in-out infinite; }
@keyframes earTwitch { 0%, 88%, 100% { transform: rotate(14deg);} 92%, 96% { transform: rotate(2deg);} }
#bunny.hop { animation: bunnyHop .7s cubic-bezier(.3,1.6,.4,1); }
@keyframes bunnyHop {
  0%,100% { transform: translateY(0); }
  25% { transform: translateY(-22px) scale(1.04, .96); }
  50% { transform: translateY(0) scale(.96, 1.04); }
  70% { transform: translateY(-12px); }
}

/* ── snail ── */
#snail {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 2px);
  width: 13%; min-width: 46px; z-index: 8;
  left: -15%;
  animation: crawl 150s linear infinite;
}
@keyframes crawl { from { left: -15%; } to { left: 108%; } }
.snail-body, .snail-shell { transition: transform .3s ease; }
#snail.hide .snail-body { transform: scaleX(.35) translateX(40px); transform-origin: 55px 44px; }
#snail.hide .snail-shell { transform: scale(1.12); transform-origin: 44px 32px; }

/* ── mushroom friends ── */
.shroom-btn { position: absolute; z-index: 6; }
.sb1 { left: 31%; top: 57%; width: 10%; }
.sb2 { right: 36%; bottom: 4%; width: 12%; z-index: 7; }
.shroom-btn.boing { animation: boing .5s cubic-bezier(.2,1.8,.4,1); }

/* ── cats ── */
.cat {
  position: absolute; z-index: 9;
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(70,90,50,.25));
}
.cat svg { overflow: visible; display: block; width: 100%; }
.cat.flip svg { transform: scaleX(-1); }
.cat .tail { transform-origin: 16px 40px; animation: tailSway 2.4s ease-in-out infinite; }
@keyframes tailSway { 0%,100% { transform: rotate(0);} 50% { transform: rotate(14deg);} }
.cat .eyes-closed { display: none; }
.cat.sleeping .eyes-closed { display: block; }
.cat.sleeping .eyes-open { display: none; }
.cat.sleeping .body { animation: catBreathe 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes catBreathe { 0%,100% { transform: scaleY(1);} 50% { transform: scaleY(.96);} }
.cat.walking .body { animation: catBob .5s ease-in-out infinite; }
@keyframes catBob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-3px);} }
.cat .zzz { position: absolute; top: -12px; right: 4px; display: none; color: #8fa5d8; font-family: var(--display); font-weight: 700; font-size: 14px; }
.cat .zzz span { display: inline-block; animation: zFloat 2s ease-in-out infinite; }
.cat .zzz span:nth-child(2) { animation-delay: .5s; font-size: .8em; }
.cat.sleeping .zzz { display: block; }
@keyframes zFloat { 0% { opacity: 0; transform: translate(0,0);} 40% { opacity: 1;} 100% { opacity: 0; transform: translate(8px,-14px);} }
.cat-bubble {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%) scale(0);
  background: #fff; border: 2.5px solid var(--peony-soft);
  border-radius: 14px; padding: 3px 11px;
  font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--peony-deep);
  white-space: nowrap; box-shadow: 0 3px 8px rgba(60,90,40,.25);
  transition: transform .25s cubic-bezier(.2,1.6,.4,1);
  pointer-events: none; z-index: 12;
}
.cat-bubble.show { transform: translateX(-50%) scale(1); }

/* generic critter chat bubbles */
.chat-bubble {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%) scale(0);
  background: #fff; border: 2.5px solid var(--peony-soft);
  border-radius: 14px; padding: 3px 11px;
  font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--peony-deep);
  white-space: nowrap; box-shadow: 0 3px 8px rgba(60,90,40,.25);
  transition: transform .25s cubic-bezier(.2,1.6,.4,1);
  pointer-events: none; z-index: 30;
}
.chat-bubble.show { transform: translateX(-50%) scale(1); }
#pond .chat-bubble.gator-bubble { top: 6px; left: 34%; }
.bird.b1 .chat-bubble { left: 30%; }
.eat-spot .chat-bubble { top: -30px; }

#nugget {
  position: absolute; z-index: 8; width: 42px; height: 36px;
  cursor: pointer; animation: nuggetDrop .6s cubic-bezier(.2,1.5,.4,1) both;
  filter: drop-shadow(0 3px 5px rgba(70,90,50,.3));
}
@keyframes nuggetDrop { from { transform: translateY(-60px) scale(.4) rotate(-30deg); opacity: 0;} to { transform: none; opacity: 1;} }

/* ═══════════ popups ═══════════ */
.popup[hidden] { display: none; }
.popup {
  position: fixed; inset: 0; z-index: 800;
  display: grid; place-items: center; padding: 18px;
  background: rgba(58, 82, 44, .5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.pop-card {
  position: relative;
  width: min(94vw, 420px);
  max-height: min(86dvh, 640px);
  overflow-y: auto;
  background: #fffdf7;
  border: 3px solid #fff;
  border-radius: 24px;
  padding: 20px 18px 18px;
  box-shadow: 0 18px 44px rgba(30, 50, 20, .35);
  animation: popIn .32s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes popIn { from { transform: scale(.7) translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.pop-close {
  position: sticky; top: 0; float: right; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  margin: -6px -4px 4px 8px;
  background: linear-gradient(180deg, #ff9db0, #f2607e);
  border: 2.5px solid #fff;
  color: #fff; font-size: 15px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(200,60,100,.4);
  transition: transform .15s;
}
.pop-close:hover { transform: scale(1.1) rotate(90deg); }

/* tucked-away Spotify player (the radio controls it) */
#spotifyDock {
  position: fixed; left: 8px; bottom: 8px; z-index: 700;
  width: 250px; height: 80px;
  opacity: 0; pointer-events: none;
}
#spotifyDock iframe { border: 0; border-radius: 12px; }

/* gallery popup */
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; clear: both; }
.polaroid {
  background: #fffdf7; padding: 6px 6px 7px;
  border-radius: 7px;
  border: 2px solid #f3e8d2;
  box-shadow: 0 5px 12px rgba(90,110,60,.2);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,1.6,.4,1);
}
.gallery-grid .polaroid:nth-child(2n) { transform: rotate(1.6deg); }
.gallery-grid .polaroid:nth-child(2n+1) { transform: rotate(-1.6deg); }
.gallery-grid .polaroid:hover { transform: rotate(0) scale(1.05); }
.polaroid img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: 4px; display: block; background: #eaf6dd; }
.polaroid figcaption {
  font-family: var(--display); font-weight: 600; font-size: 11.5px;
  color: var(--plum); text-align: center; padding-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#lightbox {
  position: fixed; inset: 0; z-index: 970;
  background: rgba(40, 60, 30, .6); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
  cursor: pointer;
}
#lightbox .polaroid { max-width: min(88vw, 420px); padding: 10px 10px 12px; animation: popIn .3s cubic-bezier(.2,1.5,.4,1) both; }
#lightbox .polaroid img { aspect-ratio: auto; max-height: 60vh; object-fit: contain; }
#lightbox .polaroid figcaption { font-size: 15px; white-space: normal; }

/* map popup */
.map-frame {
  border-radius: 18px; overflow: hidden;
  border: 6px solid var(--wood);
  outline: 3px solid var(--wood-dark);
  background: linear-gradient(180deg, #d9edfb, #cfe6f8);
  clear: both;
}
.map-frame svg { display: block; width: 100%; height: auto; }
.map-pin { cursor: pointer; }
.map-pin .pin-inner { transition: transform .18s cubic-bezier(.2,1.6,.4,1); transform-box: fill-box; transform-origin: center; }
.map-pin:hover .pin-inner { transform: scale(1.25); }
.map-pin.active .pin-inner { transform: scale(1.35); }
.map-pin .pin-pulse { animation: pinPulse 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; opacity: .5; }
@keyframes pinPulse { from { transform: scale(.5); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
.map-word {
  margin-top: 12px; min-height: 52px;
  display: grid; place-items: center;
  background: #f6fbef; border: 2.5px dashed #cde2b4;
  border-radius: 16px;
  font-family: var(--display); font-weight: 800; font-size: 24px;
  color: var(--plum);
}
.map-word.pop { animation: notePop .35s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes notePop { from { transform: translateY(10px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ─────────────── petals + trail ─────────────── */
#petals, #trail { position: fixed; inset: 0; pointer-events: none; z-index: 990; overflow: hidden; }
.petal { position: absolute; top: -30px; animation: petalFall linear both; will-change: transform; }
@keyframes petalFall {
  from { transform: translate(0, -4vh) rotate(0deg); opacity: 0; }
  8% { opacity: .9; }
  to { transform: translate(var(--sway), 108vh) rotate(300deg); opacity: .5; }
}
.trail-bit { position: absolute; font-size: 14px; animation: trailFade .9s ease-out both; will-change: transform, opacity; }
@keyframes trailFade {
  from { opacity: .95; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  to { opacity: 0; transform: translate(-50%, -200%) scale(.4) rotate(30deg); }
}

/* ─────────────── short screens ─────────────── */
@media (max-height: 640px) {
  .photo-line { height: 80px; }
  #radioStump { top: 13%; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .petal { display: none; }
  #snail { left: 30%; }
}