/* ============================================================================
   FELICIA'S SWEET 17 — Magical Koala Invitation
   Elegant, dreamy, responsive stylesheet
   ========================================================================== */

:root {
  --euc-green: #7e9b76;
  --sage: #a9c2a0;
  --sage-soft: #c3d4bc;
  --cream: #faf6ec;
  --ivory: #fffcf5;
  --beige: #e9e0cf;
  --pink: #f3d9df;
  --pink-deep: #e7c5cd;
  --gold: #c1a44a;
  --gold-light: #ddc37e;
  --gold-glow: rgba(193, 164, 74, 0.55);
  --ink: #4a4441;
  --ink-soft: #6c645d;
  --twilight-1: #2c3a4a;
  --twilight-2: #4a5b63;
  --twilight-3: #7d8a72;

  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --script: "Cormorant Garamond", "Playfair Display", serif;
  --sans: "Quicksand", "Segoe UI", sans-serif;

  --shadow-soft: 0 18px 50px rgba(74, 68, 65, 0.18);
  --shadow-card: 0 12px 34px rgba(74, 68, 65, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* the [hidden] attribute must always win over component display rules */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#stage { position: fixed; inset: 0; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; }

/* ---------------------------------------------------------------- FX canvas */
#fx-canvas {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
}

/* ------------------------------------------------------------- ambient FX */
.ambient-sparkles { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.spark {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--gold-light) 45%, transparent 70%);
  opacity: 0; animation: sparkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: var(--peak, 0.9); transform: scale(1.15); }
}

/* --------------------------------------------------------- persistent UI */
.music-btn {
  position: fixed; top: env(safe-area-inset-top, 14px); right: 14px; z-index: 120;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 40px;
  background: rgba(255, 252, 245, 0.82); backdrop-filter: blur(8px);
  border: 1px solid var(--gold-light);
  box-shadow: 0 6px 18px rgba(74, 68, 65, 0.16);
  color: var(--ink); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
  margin-top: 10px;
}
.music-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(74,68,65,0.22); }
.music-btn .music-icon { font-size: 1rem; }
.music-btn.muted { opacity: 0.85; }

.journey-progress {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 110; display: flex; gap: 9px; padding: 7px 12px;
  background: rgba(255, 252, 245, 0.6); backdrop-filter: blur(6px);
  border-radius: 30px; opacity: 0; transition: opacity 0.5s;
}
.journey-progress.show { opacity: 1; }
.journey-progress .pdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage-soft); transition: all 0.4s var(--ease);
}
.journey-progress .pdot.active { background: var(--gold); transform: scale(1.35); box-shadow: 0 0 8px var(--gold-glow); }

/* ------------------------------------------------------------- scenes */
.scene {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: stretch;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.04);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), visibility 0.9s;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* the only in-flow child of each scene is its content wrapper (all decor is
   position:absolute), so margin:auto both centres it AND lets it scroll when
   the content is taller than the viewport — no clipping on small screens. */
.welcome-content, .kingdom-content, .finale-content { margin: auto; }
.scene.active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1);
  z-index: 5;
}
.scene.scrollable { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.soft-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--ivory) 0%, var(--cream) 40%, var(--sage-soft) 100%);
}
.soft-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(243,217,223,0.35), transparent 60%),
    radial-gradient(60% 50% at 85% 80%, rgba(169,194,160,0.4), transparent 60%);
}

/* ==================================================================
   SCENE 1 — CASTLE
   ================================================================== */
.scene-castle { background: #141d27; overflow: hidden; }
.castle-camera { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 65%;
  will-change: transform, filter; }
.twilight {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 118%, #93a37f 0%, #64756a 24%, #445663 52%, #2c3a49 78%, #141d27 100%);
}
.stars { position: absolute; inset: 0; z-index: 1; }
.stars .star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: 0.7; animation: twinkle var(--d,3s) ease-in-out infinite;
  animation-delay: var(--delay,0s);
}
@keyframes twinkle { 0%,100%{opacity:0.15;} 50%{opacity:0.9;} }
.moon {
  position: absolute; top: 7%; right: 13%; z-index: 1;
  width: clamp(80px, 12vw, 140px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fffbe8, #f4ecd0 55%, #e6dcc0 100%);
  box-shadow: 0 0 70px 22px rgba(246, 236, 208, 0.4); opacity: 0.92;
}

.tree {
  position: absolute; bottom: 0; z-index: 2; width: 30vw; max-width: 400px; height: 82vh;
  pointer-events: none; opacity: 0.92;
}
.tree-left { left: -6vw; background:
  radial-gradient(closest-side at 60% 20%, #4f6b4a 0%, transparent 72%),
  radial-gradient(closest-side at 40% 40%, #3e5a3c 0%, transparent 70%),
  radial-gradient(closest-side at 70% 55%, #567a4f 0%, transparent 70%),
  radial-gradient(closest-side at 45% 72%, #405c3d 0%, transparent 72%);
  filter: blur(0.5px);
}
.tree-right { right: -6vw; transform: scaleX(-1); background:
  radial-gradient(closest-side at 60% 20%, #4f6b4a 0%, transparent 72%),
  radial-gradient(closest-side at 40% 40%, #3e5a3c 0%, transparent 70%),
  radial-gradient(closest-side at 70% 55%, #567a4f 0%, transparent 70%),
  radial-gradient(closest-side at 45% 72%, #405c3d 0%, transparent 72%);
  filter: blur(0.5px);
}

/* ---- the castle is now BIG and cinematic ---- */
.castle {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 3; height: min(88vh, 800px); aspect-ratio: 1.42 / 1; width: auto;
  display: flex; align-items: flex-end; justify-content: center;
}
.castle-turret {
  position: absolute; bottom: 0; width: 15%; height: 82%;
  background: linear-gradient(180deg, #74806d, #565f4d);
  border-radius: 10px 10px 0 0;
  box-shadow: inset -8px 0 16px rgba(0,0,0,0.18);
}
.castle-turret::before {
  content: ""; position: absolute; top: -8%; left: -16%; width: 132%; height: 14%;
  background: linear-gradient(180deg, #8fa585, var(--euc-green));
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.castle-turret::after {
  content: ""; position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 26%; border-radius: 50% 50% 6px 6px;
  background: radial-gradient(circle at 50% 40%, #ffe9a8, #b98f3f);
  box-shadow: 0 0 12px rgba(255,220,140,0.5);
}
.castle-turret.left { left: 3%; }
.castle-turret.right { right: 3%; }
.castle-turret.midleft { left: 19%; height: 92%; width: 14%; }
.castle-turret.midright { right: 19%; height: 92%; width: 14%; }
.castle-wall {
  position: relative; width: 60%; height: 88%;
  background: linear-gradient(180deg, #7c8975, #5b6553);
  border-radius: 18px 18px 0 0;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.28);
  display: flex; align-items: flex-end; justify-content: center;
}
.castle-wall::before { /* crenellations */
  content: ""; position: absolute; top: -14px; left: 4%; right: 4%; height: 16px;
  background: repeating-linear-gradient(90deg, #6b7663 0 7%, transparent 7% 12%);
}
.castle-window {
  position: absolute; top: 14%; width: 11%; aspect-ratio: 0.5; border-radius: 50% 50% 4px 4px;
  background: radial-gradient(circle at 50% 40%, #ffe9a8, #c89a45);
  box-shadow: 0 0 14px rgba(255,220,140,0.5), inset 0 0 0 3px #8f7638;
}
.castle-window.wl { left: 16%; } .castle-window.wr { right: 16%; }
.wall-flag { position: absolute; top: -8%; font-size: clamp(1rem, 2.6vw, 1.7rem); animation: sway 4s ease-in-out infinite; }
.wall-flag.left { left: 10%; } .wall-flag.right { right: 10%; animation-delay: 1s; }
@keyframes sway { 0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(8deg);} }

.castle-arch {
  position: relative; width: 66%; height: 84%;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background: #10181f; overflow: hidden;
  box-shadow: inset 0 0 0 clamp(6px,1.4vw,14px) #b89a52, inset 0 0 0 clamp(10px,2.1vw,20px) #8f7638;
  perspective: 1600px;
}
.door-interior {
  position: absolute; inset: clamp(10px,2vw,20px); border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background: radial-gradient(circle at 50% 62%, #fff7e6, #f3e6c4 38%, #d8c79a 72%, #b7a678 100%);
  display: flex; align-items: center; justify-content: center;
}
.interior-glow {
  width: 74%; height: 74%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,230,0.95), transparent 70%);
  animation: glowPulse 3.4s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:0.7; transform:scale(0.95);} 50%{opacity:1; transform:scale(1.08);} }

.door {
  position: absolute; top: clamp(10px,2vw,20px); bottom: clamp(10px,2vw,20px);
  /* half the arch MINUS the side inset, so the two panels meet exactly at
     the centre instead of overlapping (which was visible on small screens) */
  width: calc(50% - clamp(10px,2vw,20px));
  background: linear-gradient(180deg, #6b5a34, #4e4126);
  transition: transform 2.1s var(--ease); transform-style: preserve-3d;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}
.door-left { left: clamp(10px,2vw,20px); transform-origin: left center;
  border-radius: 50% 0 0 0 / 42% 0 0 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0,0,0,0.14) 24px 26px),
    linear-gradient(180deg, #6b5a34, #4e4126);
}
.door-right { right: clamp(10px,2vw,20px); transform-origin: right center;
  border-radius: 0 50% 0 0 / 0 42% 0 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0,0,0,0.14) 24px 26px),
    linear-gradient(180deg, #6b5a34, #4e4126);
}
.door-carving { position: absolute; inset: 14%; border: 2px solid rgba(193,164,74,0.5); border-radius: 40% 40% 8px 8px; }
.door-ring {
  position: absolute; top: 48%; width: clamp(18px,3vw,30px); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid var(--gold-light); box-shadow: 0 0 12px var(--gold-glow);
}
.door-left .door-ring { right: 12%; } .door-right .door-ring { left: 12%; }
.arch-keystone {
  position: absolute; top: -1%; left: 50%; transform: translateX(-50%);
  z-index: 4; font-size: clamp(1.4rem, 3.4vw, 2.4rem); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.fireflies { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.firefly {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #fff6c8, #f2d98a 40%, transparent 72%);
  box-shadow: 0 0 8px 2px rgba(242, 217, 138, 0.7);
  animation: floaty var(--d,7s) ease-in-out infinite alternate, glowf 2.4s ease-in-out infinite;
  animation-delay: var(--delay,0s);
}
@keyframes floaty { from { transform: translate(0,0); } to { transform: translate(var(--dx,20px), var(--dy,-30px)); } }
@keyframes glowf { 0%,100%{opacity:0.35;} 50%{opacity:1;} }

.castle-content {
  position: relative; z-index: 10; text-align: center; color: var(--ivory);
  padding: 0 22px; margin: auto auto 8vh; max-width: 720px;
  animation: riseIn 1.4s var(--ease) both;
}
.castle-eyebrow {
  font-family: var(--script); font-style: italic; font-size: clamp(0.95rem, 3.2vw, 1.4rem);
  color: var(--gold-light); letter-spacing: 0.12em; margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.castle-title {
  font-family: var(--serif); font-weight: 700; line-height: 0.96;
  font-size: clamp(2.8rem, 12vw, 6rem); color: #fff;
  text-shadow: 0 2px 30px rgba(246,236,208,0.5), 0 0 70px rgba(193,164,74,0.4);
}
.castle-title span {
  display: block; font-family: var(--script); font-weight: 500; font-style: italic;
  font-size: clamp(1.3rem, 5.5vw, 2.6rem); color: var(--gold-light);
  letter-spacing: 0.06em; margin-top: 8px;
}

/* ---------- CINEMATIC PORTAL FLY-THROUGH (triggered by .go) ---------- */
.portal-streaks { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; overflow: hidden; }
.streak {
  position: absolute; left: 50%; top: 65%; width: 3px; height: 60vh;
  transform-origin: top center; transform: translate(-50%, 0) rotate(var(--a)) scaleY(0);
  background: linear-gradient(to bottom, rgba(255,247,220,0.9), transparent 70%);
}
.portal-flash {
  position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 65%, #fffdf6 0%, #fffaf0 45%, #fff 100%);
}

.scene-castle.go .castle-content { animation: contentAway 1s var(--ease) forwards; pointer-events: none; }
@keyframes contentAway { to { opacity: 0; transform: translateY(-26px) scale(0.92); filter: blur(4px); } }

.scene-castle.go .door-left  { transform: rotateY(-118deg); transition: transform 2.1s var(--ease) 0.4s; }
.scene-castle.go .door-right { transform: rotateY(118deg);  transition: transform 2.1s var(--ease) 0.4s; }
.scene-castle.go .interior-glow { animation: glowExpand 2.8s ease 1.6s forwards; }
@keyframes glowExpand { 0% { opacity: 0.85; transform: scale(1); } 100% { opacity: 1; transform: scale(4.4); } }

.scene-castle.go .castle-camera { animation: cameraFly 3s cubic-bezier(0.55,0,0.75,0) 1.7s forwards; }
@keyframes cameraFly {
  0%   { transform: scale(1);   filter: brightness(1); }
  65%  { filter: brightness(1.18); }
  100% { transform: scale(8);   filter: brightness(1.8) blur(3px); }
}
.scene-castle.go .portal-streaks { animation: streaksShow 2.6s ease 1.9s forwards; }
@keyframes streaksShow { 0%{opacity:0;} 35%{opacity:0.85;} 100%{opacity:0;} }
.scene-castle.go .streak { animation: streakGrow 1.7s ease-in var(--sd) forwards; }
@keyframes streakGrow {
  0% { transform: translate(-50%,0) rotate(var(--a)) scaleY(0); }
  100% { transform: translate(-50%,0) rotate(var(--a)) scaleY(1.5); }
}
.scene-castle.go .portal-flash { animation: flashIn 1.3s ease 3.2s forwards; }
@keyframes flashIn { 0%{opacity:0;} 100%{opacity:1;} }

/* ============================= BUTTONS ============================= */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--sans); font-weight: 700; letter-spacing: 0.05em;
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  padding: 15px 30px; border-radius: 50px; color: var(--ink);
  transition: transform 0.25s var(--ease), box-shadow 0.3s, filter 0.3s;
  box-shadow: var(--shadow-card); overflow: hidden;
  min-height: 48px;
}
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); transition: left 0.7s var(--ease);
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(74,68,65,0.26); }
.btn:active { transform: translateY(-1px) scale(0.98); }
.btn-gold {
  background: linear-gradient(135deg, #e6cf8e, var(--gold) 55%, #a98a34);
  color: #43370f; border: 1px solid #f0e2b4;
  box-shadow: 0 10px 26px var(--gold-glow);
}
.btn-gold:hover { box-shadow: 0 16px 40px var(--gold-glow); }
.btn-sage {
  background: linear-gradient(135deg, var(--sage), var(--euc-green));
  color: #fff; border: 1px solid #bcd2b3;
}
.btn-outline {
  background: rgba(255,252,245,0.7); color: var(--euc-green);
  border: 1.5px solid var(--euc-green);
}
.enter-btn { margin-top: 26px; font-size: clamp(0.95rem, 3vw, 1.15rem); padding: 17px 38px;
  animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe {
  0%,100% { transform: scale(1); box-shadow: 0 10px 26px var(--gold-glow); }
  50% { transform: scale(1.04); box-shadow: 0 16px 42px var(--gold-glow); }
}
.mini-btn {
  display: inline-block; padding: 9px 18px; border-radius: 40px;
  background: var(--ivory); color: var(--euc-green); font-weight: 600; font-size: 0.85rem;
  border: 1px solid var(--sage-soft); box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s; text-decoration: none;
}
.mini-btn:hover { transform: translateY(-2px); }
.mini-btn.ghost { background: transparent; border: none; box-shadow: none; color: var(--ink-soft);
  text-decoration: underline; opacity: 0.7; margin-top: 14px; }

@keyframes riseIn { from { opacity:0; transform: translateY(30px);} to {opacity:1; transform:none;} }

/* ==================================================================
   SCENE 2 — WELCOME
   ================================================================== */
.welcome-content { position: relative; z-index: 5; text-align: center; padding: 30px 24px; max-width: 640px; }
.script-accent {
  font-family: var(--script); font-style: italic; font-size: clamp(1.6rem, 6vw, 2.6rem);
  color: var(--gold); letter-spacing: 0.03em;
}
.welcome-title {
  font-family: var(--serif); font-weight: 700; color: var(--euc-green);
  font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.05; margin: 6px 0 14px;
}
.welcome-title em { font-family: var(--script); font-style: italic; color: var(--gold); }
.welcome-sub {
  font-family: var(--script); font-size: clamp(1.05rem, 3.4vw, 1.4rem); font-style: italic;
  color: var(--ink-soft); max-width: 34ch; margin: 0 auto 8px; line-height: 1.5;
}
.welcome-koala { width: clamp(150px, 34vw, 230px); margin: 4px auto 10px; }
.welcome-cue {
  margin-top: 22px; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--euc-green); opacity: 0.8;
  animation: pulseHint 1.8s ease-in-out infinite;
}
@keyframes pulseHint { 0%,100%{opacity:0.4;} 50%{opacity:0.9;} }
.welcome-cue::after { content: ""; display: inline-block; width: 26px; vertical-align: middle;
  margin-left: 8px; border-top: 1px solid var(--sage); }

/* ==================================================================
   SCENE 3 — STORY / SCROLL
   ================================================================== */
.story-wrap {
  position: relative; z-index: 5; width: 100%; max-width: 760px;
  padding: 84px 16px 60px; margin: 0 auto;
}
.scroll { width: 100%; }
.scroll-rod {
  height: 26px; border-radius: 16px; margin: 0 -6px;
  background: linear-gradient(180deg, #d9c27e, #b6923f 60%, #8a6d2b);
  box-shadow: 0 6px 14px rgba(74,68,65,0.25); position: relative; z-index: 3;
}
.scroll-rod::before, .scroll-rod::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 20px; height: 34px; border-radius: 8px;
  background: linear-gradient(180deg, #e6cf8e, #a98a34);
}
.scroll-rod::before { left: -12px; } .scroll-rod::after { right: -12px; }

.scroll-body {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), transparent 6%, transparent 94%, rgba(0,0,0,0.04)),
    repeating-linear-gradient(180deg, rgba(180,150,90,0.03) 0 3px, transparent 3px 6px),
    var(--cream);
  border-left: 2px solid rgba(193,164,74,0.25);
  border-right: 2px solid rgba(193,164,74,0.25);
  box-shadow: var(--shadow-soft), inset 0 0 60px rgba(200,170,110,0.12);
  overflow: hidden;
  transform-origin: top center;
  animation: unroll 1.6s var(--ease) both;
}
@keyframes unroll {
  from { max-height: 0; opacity: 0.4; transform: scaleY(0.6); }
  to { max-height: 3000px; opacity: 1; transform: scaleY(1); }
}
.scroll-inner { padding: 26px clamp(16px, 4vw, 40px) 40px; position: relative; }
.scroll-inner::before, .scroll-inner::after {
  content: ""; position: absolute; left: 14px; right: 14px; height: 40px;
  background: radial-gradient(closest-side, rgba(126,155,118,0.18), transparent);
}
.scroll-inner::before { top: 0; } .scroll-inner::after { bottom: 0; }

/* host koala + speech bubble */
.host-row {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 8px;
}
.host-koala { width: clamp(120px, 28vw, 180px); flex: 0 0 auto; }
.speech-bubble {
  position: relative; flex: 1 1 260px; min-width: 220px; max-width: 420px;
  background: var(--ivory); border: 1.5px solid var(--sage-soft);
  border-radius: 20px; padding: 18px 22px; box-shadow: var(--shadow-card);
  font-family: var(--script); font-size: clamp(1.1rem, 3.3vw, 1.35rem);
  color: var(--ink); line-height: 1.45; min-height: 70px;
  display: flex; align-items: center;
  animation: popIn 0.5s var(--ease) both;
}
.speech-bubble::before {
  content: ""; position: absolute; left: -14px; top: 34px;
  border: 8px solid transparent; border-right-color: var(--sage-soft);
}
.speech-bubble .cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--gold);
  margin-left: 2px; vertical-align: text-bottom; animation: blinkC 0.8s steps(1) infinite; }
@keyframes blinkC { 50% { opacity: 0; } }
@keyframes popIn { from { opacity:0; transform: scale(0.9) translateY(8px);} to {opacity:1; transform:none;} }

/* reveal block */
.story-reveal { text-align: center; margin-top: 22px; }
.scroll-title {
  font-family: var(--serif); color: var(--euc-green); font-weight: 600;
  font-size: clamp(1.3rem, 4.5vw, 2rem);
}
.scroll-name {
  font-family: var(--script); font-style: italic; color: var(--gold);
  font-size: clamp(1.5rem, 5.5vw, 2.4rem); margin-top: 2px;
}
.scroll-divider { color: var(--sage); letter-spacing: 0.3em; margin: 12px 0 22px; opacity: 0.8; }

.detail-cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
.detail-card {
  background: linear-gradient(180deg, var(--ivory), var(--cream));
  border: 1px solid var(--sage-soft); border-radius: 20px;
  padding: 22px 20px; box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(24px);
}
.detail-card.in { opacity: 1; transform: none; animation: cardIn 0.7s var(--ease) both; }
@keyframes cardIn { to { opacity: 1; transform: none; } }
.detail-card::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(193,164,74,0.35);
  border-radius: 15px; pointer-events: none;
}
.detail-ico {
  font-size: 1.9rem; width: 56px; height: 56px; margin: 0 auto 8px;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--pink), var(--sage-soft));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
}
.detail-card h4 {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--gold); margin-bottom: 8px;
}
.detail-main {
  font-family: var(--serif); font-size: clamp(1.15rem, 4vw, 1.5rem); color: var(--euc-green);
  font-weight: 600; line-height: 1.25;
}
.detail-sub { font-family: var(--script); font-style: italic; color: var(--ink-soft); margin-top: 4px; font-size: 1.02rem; }
.map-preview {
  margin: 12px auto 10px; width: 100%; max-width: 320px; height: 120px; border-radius: 14px;
  background:
    linear-gradient(135deg, #d7e4cf, #eef2e2),
    repeating-linear-gradient(0deg, rgba(126,155,118,0.15) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(126,155,118,0.15) 0 1px, transparent 1px 28px);
  background-blend-mode: normal; position: relative; overflow: hidden;
  border: 1px solid var(--sage-soft);
}
.map-preview::after { content: "📍"; position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); font-size: 1.8rem;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25)); animation: pinBounce 1.8s ease-in-out infinite; }
@keyframes pinBounce { 0%,100%{transform:translate(-50%,-55%);} 50%{transform:translate(-50%,-45%);} }
#maps-btn { margin-top: 6px; }

.story-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* locked buttons — greyed out until the guest replies to the RSVP */
.btn.is-locked {
  filter: grayscale(0.85); opacity: 0.55; cursor: not-allowed;
  box-shadow: none;
}
.btn.is-locked:hover { transform: none; box-shadow: none; }
.btn.is-locked::after { display: none; }   /* no shine sweep while locked */
.btn.is-locked::before {
  content: "🔒"; margin-right: 4px; filter: none;
}
.gate-hint {
  flex-basis: 100%; text-align: center; margin-top: 2px;
  font-family: var(--script); font-style: italic;
  color: var(--ink-soft); font-size: 0.98rem;
}
.gate-hint[hidden] { display: none; }
.btn.gate-shake { animation: gateShake 0.4s var(--ease); }
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ==================================================================
   SCENE 4 — GAME
   ================================================================== */
.game-content { position: relative; z-index: 5; width: 100%; max-width: 640px; padding: 80px 16px 40px; text-align: center; }
.section-title {
  font-family: var(--serif); color: var(--euc-green); font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.6rem); margin-bottom: 4px;
}
.game-sub, .album-subtitle {
  font-family: var(--script); font-style: italic; color: var(--ink-soft);
  font-size: clamp(1rem, 3.4vw, 1.25rem); margin-bottom: 14px;
}
.game-hud { margin-bottom: 12px; }
.game-score-pill {
  display: inline-block; padding: 9px 18px; border-radius: 40px;
  background: var(--ivory); border: 1px solid var(--sage-soft); box-shadow: var(--shadow-card);
  font-weight: 600; color: var(--ink); font-size: 0.95rem;
}
.game-score-pill strong { color: var(--gold); }
.game-area {
  position: relative; width: 100%; height: min(56vh, 440px);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--ivory), var(--sage-soft) 100%);
  border: 2px solid var(--sage); border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-soft), inset 0 0 40px rgba(126,155,118,0.2);
  touch-action: manipulation;
}
.game-koala {
  position: absolute; top: 0; left: 0; width: 92px; height: auto; z-index: 1;
  transition: transform 1.3s var(--ease); pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(74,68,65,0.25));
}
.game-leaf {
  position: absolute; width: 54px; height: 54px; z-index: 2; padding: 0;
  background: none; border: none; transform: rotate(0deg);
  animation: leafPop 0.3s var(--ease), leafDrift 2.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 6px rgba(74,68,65,0.25));
  transition: transform 0.25s;
}
.game-leaf svg { width: 100%; height: 100%; }
.game-leaf:hover { transform: scale(1.12); }
.game-leaf.collected { animation: leafCollect 0.35s var(--ease) forwards; }
.game-leaf.fade-out { animation: fadeOut 0.4s ease forwards; }
@keyframes leafPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes leafDrift { from { transform: translateY(0) rotate(var(--spin,0deg)); } to { transform: translate(var(--drift,8px), -10px) rotate(0deg); } }
@keyframes leafCollect { to { transform: scale(1.8); opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; transform: scale(0.6); } }
.game-sparkle {
  position: absolute; z-index: 4; pointer-events: none; font-weight: 700; color: var(--gold);
  font-family: var(--serif); font-size: 1.3rem; transform: translate(-50%,-50%);
  animation: floatUp 0.7s ease forwards; text-shadow: 0 1px 2px #fff;
}
@keyframes floatUp { from { opacity: 1; transform: translate(-50%,-50%); } to { opacity: 0; transform: translate(-50%,-140%); } }

.game-win { margin-top: 22px; animation: popIn 0.6s var(--ease) both; }
.win-title { font-family: var(--serif); color: var(--gold); font-size: clamp(1.6rem,6vw,2.4rem); }
.game-win p { font-family: var(--script); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); margin: 8px 0 18px; }

/* ==================================================================
   SCENE 5 — ALBUM
   ================================================================== */
.album-content { position: relative; z-index: 5; width: 100%; max-width: 620px; padding: 80px 16px 40px; text-align: center; }
#album-root { margin: 10px 0 22px; }
.album-book {
  position: relative; margin: 0 auto; width: 100%; max-width: 460px;
  perspective: 1600px;
}
.album-spine {
  position: absolute; left: 50%; top: -6px; bottom: -6px; width: 14px; transform: translateX(-50%);
  background: linear-gradient(90deg, #8a6d2b, #d9c27e, #8a6d2b); border-radius: 6px; z-index: 0; display: none;
}
.album-leaf {
  position: relative; z-index: 1; background: linear-gradient(180deg, var(--ivory), var(--cream));
  border: 1px solid var(--sage-soft); border-radius: 18px; padding: 18px 18px 14px;
  box-shadow: var(--shadow-soft); transform-origin: left center;
}
.album-leaf.flip-next { animation: flipNext 0.6s var(--ease); }
.album-leaf.flip-prev { animation: flipPrev 0.6s var(--ease); }
@keyframes flipNext { 0% { transform: rotateY(-22deg); opacity: 0.4; } 100% { transform: rotateY(0); opacity: 1; } }
@keyframes flipPrev { 0% { transform: rotateY(22deg); opacity: 0.4; } 100% { transform: rotateY(0); opacity: 1; } }
.album-frame {
  position: relative; background: #fff; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--beige);
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px var(--sage-soft);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.album-frame img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in;
  background: #f3efe6;
}
.album-corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--gold); }
.album-corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.album-corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.album-corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.album-corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.album-caption {
  font-family: var(--script); font-style: italic; font-size: clamp(1.1rem,3.6vw,1.4rem);
  color: var(--euc-green); margin-top: 12px; min-height: 1.4em;
}
.album-page-num { display: block; font-size: 0.78rem; letter-spacing: 0.15em; color: var(--ink-soft); margin-top: 4px; }
.album-nav {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; line-height: 1;
  background: var(--ivory); color: var(--euc-green); border: 1px solid var(--sage-soft);
  box-shadow: var(--shadow-card); transition: transform 0.2s;
}
.album-nav:hover { transform: translateY(-50%) scale(1.1); }
.album-nav.prev { left: -10px; } .album-nav.next { right: -10px; }
.album-dots { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.album-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sage-soft); transition: all 0.3s; }
.album-dot.active { background: var(--gold); transform: scale(1.3); }
.album-hint { font-size: 0.78rem; color: var(--ink-soft); opacity: 0.7; margin-top: 10px; }
.album-zoom {
  position: fixed; inset: 0; z-index: 200; background: rgba(28,39,51,0.82);
  display: grid; place-items: center; padding: 24px; backdrop-filter: blur(4px);
  animation: popIn 0.3s ease;
}
.album-zoom img { max-width: 92vw; max-height: 82vh; border-radius: 12px; border: 6px solid #fff; box-shadow: var(--shadow-soft); }
.album-zoom-close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--ivory); color: var(--ink); font-size: 1.2rem; box-shadow: var(--shadow-card); }

/* ==================================================================
   SCENE 6 — FINALE
   ================================================================== */
.finale-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff6df 0%, var(--pink) 30%, var(--sage) 75%, var(--euc-green) 100%);
}
.finale-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,0.5), transparent 70%);
}
.floating-leaves, .balloons { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.float-leaf { position: absolute; font-size: 1.4rem; animation: leafFall var(--d,9s) linear infinite; animation-delay: var(--delay,0s); opacity: 0.85; }
@keyframes leafFall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.4; }
}
.balloon {
  position: absolute; bottom: -20vh; width: 46px; height: 58px; border-radius: 50% 50% 48% 48%;
  animation: balloonRise var(--d,12s) ease-in infinite; animation-delay: var(--delay,0s);
  box-shadow: inset -6px -8px 10px rgba(0,0,0,0.12);
}
.balloon::after { content: ""; position: absolute; bottom: -40px; left: 50%; width: 1px; height: 40px; background: rgba(255,255,255,0.6); }
@keyframes balloonRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translateY(-130vh) translateX(var(--sway,20px)); opacity: 0.7; }
}

.finale-content { position: relative; z-index: 6; text-align: center; padding: 84px 22px 60px; max-width: 640px; }
.finale-koala { width: clamp(150px, 36vw, 220px); margin: 0 auto 14px; }
.finale-title {
  font-family: var(--serif); font-weight: 700; color: #fff;
  font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.05;
  text-shadow: 0 2px 20px rgba(126,155,118,0.5), 0 0 40px rgba(255,255,255,0.4);
}
.finale-thanks {
  font-family: var(--script); font-style: italic; font-size: clamp(1.2rem, 4vw, 1.6rem);
  color: var(--ink); margin-top: 10px;
}
.finale-speech {
  font-family: var(--script); font-size: 1.2rem; color: var(--euc-green); font-weight: 600;
  margin: 10px auto 22px; min-height: 1.4em;
}
.finale-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ==================================================================
   KOALA MASCOT ANIMATIONS
   ================================================================== */
.koala-svg { width: 100%; height: auto; overflow: visible; display: block;
  transform-origin: center bottom; animation: kFloat 4.5s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px rgba(74,68,65,0.18)); }
@keyframes kFloat { 0%,100%{transform: translateY(0);} 50%{transform: translateY(-6px);} }

.koala-svg .k-head { transform-origin: 120px 118px; animation: kSway 5s ease-in-out infinite; }
@keyframes kSway { 0%,100%{transform: rotate(-2deg);} 50%{transform: rotate(2deg);} }
.koala-svg .k-ears { transform-origin: 120px 74px; animation: kEars 4.2s ease-in-out infinite; }
@keyframes kEars { 0%,100%{transform: rotate(0) scale(1);} 25%{transform: rotate(-1.6deg) scale(1.02);} 75%{transform: rotate(1.6deg) scale(1.02);} }

/* blink — squash the eye dots vertically */
.koala-svg .k-eye { transition: transform 0.08s ease; }
.koala-svg .k-eye-l { transform-origin: 91px 98px; }
.koala-svg .k-eye-r { transform-origin: 149px 98px; }
.k-blink .k-eye { transform: scaleY(0.12); }

/* speaking mouth appears + moves */
.koala-svg .k-mouth { opacity: 0; transform-origin: 120px 168px; transition: opacity 0.2s; }
.k-speaking .k-mouth { opacity: 1; animation: kTalk 0.28s ease-in-out infinite; }
@keyframes kTalk { 0%,100%{ transform: scaleY(0.7);} 50%{ transform: scaleY(1.5) translateY(2px);} }

/* waving arm */
.koala-svg .k-arm-right { transform-origin: 182px 165px; }
.k-waving .k-arm-right { animation: kWave 0.42s ease-in-out 4; }
@keyframes kWave { 0%,100%{transform: rotate(0);} 50%{transform: rotate(-22deg);} }

/* happy jump */
.k-jump { animation: kJump 0.9s var(--ease); }
@keyframes kJump { 0%,100%{transform: translateY(0);} 30%{transform: translateY(-24px) scale(1.03);} 55%{transform: translateY(0);} 72%{transform: translateY(-9px);} }

/* ==================================================================
   MAGICAL KINGDOM MAP
   ================================================================== */
.kingdom-content { position: relative; z-index: 5; width: 100%; max-width: 900px; padding: 74px 14px 36px; text-align: center; }
.kingdom-sub { font-family: var(--script); font-style: italic; color: var(--ink-soft);
  font-size: clamp(1rem, 3.4vw, 1.25rem); margin-bottom: 14px; }
.kingdom-map {
  position: relative; width: 100%; max-width: 820px; margin: 0 auto; aspect-ratio: 800 / 600;
  border-radius: 22px; overflow: hidden; background: #e9e2ef;
  border: 3px solid #e6d9b0; box-shadow: var(--shadow-soft), inset 0 0 40px rgba(126,155,118,0.12);
}
.kingdom-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-cloud { animation: kcloud 26s ease-in-out infinite alternate; animation-delay: var(--cd, 0s); }
@keyframes kcloud { from { transform: translateX(0); } to { transform: translateX(34px); } }
.k-path { animation: dashmove 6s linear infinite; }
@keyframes dashmove { to { stroke-dashoffset: -180; } }

.land { position: absolute; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; }
.land-medallion {
  position: relative; width: clamp(50px, 11vw, 78px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(1.4rem, 4.5vw, 2rem);
  background: radial-gradient(circle at 40% 34%, #fff7e6, #f0dda0 60%, #d8bf78);
  border: 3px solid #fff; box-shadow: 0 8px 20px rgba(74,68,65,0.28), 0 0 0 3px rgba(193,164,74,0.4);
  animation: landPulse 2.2s ease-in-out infinite; transition: transform 0.2s;
}
@keyframes landPulse {
  0%,100% { box-shadow: 0 8px 20px rgba(74,68,65,0.28), 0 0 0 3px rgba(193,164,74,0.35); }
  50% { box-shadow: 0 8px 26px rgba(74,68,65,0.3), 0 0 16px 6px rgba(221,195,126,0.65); }
}
.land:hover .land-medallion { transform: scale(1.08); }
.land:active .land-medallion { transform: scale(0.95); }
.land-label {
  font-family: var(--sans); font-weight: 700; font-size: clamp(0.6rem, 2.1vw, 0.8rem);
  color: var(--ink); background: rgba(255,252,245,0.92); padding: 3px 9px; border-radius: 20px;
  box-shadow: var(--shadow-card); white-space: nowrap;
}
.land-check, .land-lock {
  position: absolute; bottom: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.78rem; box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.land-check { background: #7ba572; color: #fff; opacity: 0; transform: scale(0); transition: all 0.35s var(--ease); }
.land.done .land-check { opacity: 1; transform: scale(1); }
.land.done .land-medallion { animation: none; box-shadow: 0 8px 20px rgba(74,68,65,0.25), 0 0 0 3px #7ba572; }
.land-lock { background: #b9a06a; color: #fff; }
.land-trophy .land-medallion {
  background: radial-gradient(circle at 40% 34%, #f2f2f2, #cfd3d4 60%, #a9adae);
  filter: grayscale(0.5) brightness(0.92); animation: none;
}
.land-trophy.unlocked .land-medallion {
  background: radial-gradient(circle at 40% 34%, #fff7e6, #f0dda0 60%, #d8bf78);
  filter: none; animation: landPulse 1.3s ease-in-out infinite;
}
.land-trophy.unlocked .land-lock { display: none; }
.land-trophy.locked { cursor: not-allowed; }
.land-trophy.unlocked { cursor: pointer; }
.map-koala { position: absolute; left: 3%; bottom: 3%; width: clamp(58px, 13vw, 92px); z-index: 4; pointer-events: none; }
.kingdom-progress { font-family: var(--sans); font-weight: 600; color: var(--euc-green); margin: 14px 0 6px; font-size: clamp(0.85rem, 2.6vw, 1rem); }

/* ==================================================================
   GAME MODAL + MINI-GAMES
   ================================================================== */
.game-modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 12px;
  background: rgba(24,34,45,0.55); backdrop-filter: blur(5px); }
.game-modal.open { animation: popIn 0.3s ease; }
.game-panel { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--ivory), var(--cream)); border-radius: 22px;
  box-shadow: var(--shadow-soft); border: 2px solid var(--sage-soft); }
.game-panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; padding: 13px 16px; border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, var(--euc-green), #6d8a66); color: #fff; }
.game-panel-head h4 { font-family: var(--serif); font-size: clamp(1.1rem, 4vw, 1.45rem); }
.game-close { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.22); color: #fff; font-size: 1.1rem; }
.game-close:hover { background: rgba(255,255,255,0.35); }
.game-body { padding: 16px 14px 20px; text-align: center; }
.mg-instructions { font-family: var(--script); font-style: italic; color: var(--ink-soft);
  font-size: clamp(1rem, 3.6vw, 1.22rem); margin-bottom: 10px; }
.mg-hud { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.mg-pill { background: var(--ivory); border: 1px solid var(--sage-soft); border-radius: 30px;
  padding: 7px 15px; font-weight: 600; font-size: 0.92rem; box-shadow: var(--shadow-card); }
.mg-pill strong { color: var(--gold); }
.mg-area { position: relative; width: 100%; height: min(52vh, 380px);
  background: radial-gradient(120% 90% at 50% 0%, var(--ivory), var(--sage-soft));
  border: 2px solid var(--sage); border-radius: 18px; overflow: hidden; touch-action: manipulation; }

/* eucalyptus hunt */
.euc-koala { position: absolute; top: 0; left: 0; width: clamp(54px, 16vw, 78px); z-index: 1;
  transition: transform 1.2s var(--ease); pointer-events: none; filter: drop-shadow(0 6px 8px rgba(74,68,65,0.25)); }
.mg-leaf { position: absolute; width: 52px; height: 52px; padding: 0; z-index: 2; background: none;
  transform: rotate(var(--r,0deg)); animation: leafPop 0.3s var(--ease);
  filter: drop-shadow(0 4px 6px rgba(74,68,65,0.25)); transition: transform 0.2s; }
.mg-leaf svg { width: 100%; height: 100%; }
.mg-leaf:hover { transform: rotate(var(--r,0deg)) scale(1.12); }
.mg-leaf.pop { animation: leafCollect 0.32s var(--ease) forwards; }
.mg-leaf.gone { animation: fadeOut 0.35s ease forwards; }
@keyframes leafPop { from { transform: rotate(var(--r,0deg)) scale(0); } to { transform: rotate(var(--r,0deg)) scale(1); } }
@keyframes leafCollect { to { transform: rotate(var(--r,0deg)) scale(1.9); opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; transform: scale(0.6); } }
.mg-pip { position: absolute; transform: translate(-50%,-50%); color: var(--gold);
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem; text-shadow: 0 1px 2px #fff;
  pointer-events: none; animation: floatUp 0.7s ease forwards; }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%,-50%); } to { opacity: 0; transform: translate(-50%,-150%); } }

/* memory match */
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 380px; margin: 0 auto; }
.mm-card { position: relative; aspect-ratio: 3/4; border-radius: 12px; background: none; }
.mm-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px;
  backface-visibility: hidden; transition: transform 0.4s var(--ease); font-size: clamp(1.4rem, 6vw, 2rem); }
.mm-back { background: linear-gradient(150deg, var(--sage), var(--euc-green)); color: #fff7e0; box-shadow: var(--shadow-card); }
.mm-front { background: var(--ivory); border: 2px solid var(--gold-light); transform: rotateY(180deg); }
.mm-card.flipped .mm-back { transform: rotateY(180deg); }
.mm-card.flipped .mm-front { transform: rotateY(360deg); }
.mm-card.done { animation: matchPulse 0.5s var(--ease); }
.mm-card.done .mm-front { border-color: #7ba572; box-shadow: 0 0 0 3px rgba(123,165,114,0.4); }
@keyframes matchPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* balloon pop */
.bp-balloon { position: absolute; bottom: -74px; border-radius: 50% 50% 48% 48%; padding: 0; border: none;
  box-shadow: inset -5px -7px 9px rgba(0,0,0,0.12); opacity: 1;
  animation: balloonUp var(--dur,4s) linear forwards; transition: opacity 0.22s ease; will-change: transform; }
.bp-balloon::after { content: ""; position: absolute; bottom: -9px; left: 50%; width: 2px; height: 11px;
  background: rgba(120,120,120,0.5); transform: translateX(-50%); }
.bp-balloon.popped { opacity: 0; }
@keyframes balloonUp { 0% { transform: translate(0,0); } 100% { transform: translate(var(--sway,0), calc(-1 * (min(52vh,380px) + 100px))); } }
.bp-burst { position: absolute; transform: translate(-50%,-50%); color: var(--gold); font-size: 1.7rem;
  pointer-events: none; animation: floatUp 0.55s ease forwards; }

/* shared win banner */
.mg-win { margin-top: 16px; animation: popIn 0.5s var(--ease) both; }
.mg-win-star { font-size: 2.6rem; animation: kJump 0.9s var(--ease); }
.mg-win h4 { font-family: var(--serif); color: var(--gold); font-size: clamp(1.3rem, 5vw, 1.8rem); margin: 4px 0 14px; }

/* ==================================================================
   LOCATION LINK ("Black Owl" — tap to open the map)
   ================================================================== */
.location-link {
  display: inline-block; background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--euc-green); font-family: var(--serif);
  font-size: clamp(1.15rem, 4vw, 1.5rem); font-weight: 600; line-height: 1.25;
  text-decoration: underline; text-decoration-color: var(--gold-light);
  text-underline-offset: 4px; transition: color 0.2s, transform 0.2s;
}
.location-link::after { content: " 📍"; text-decoration: none; }
.location-link:hover { color: var(--gold); transform: translateY(-1px); }
.location-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ==================================================================
   RSVP — reply wall
   ================================================================== */
.rsvp { text-align: center; margin-top: 30px; }
.rsvp-divider { color: var(--sage); letter-spacing: 0.3em; margin: 6px 0 16px; opacity: 0.8; }
.rsvp-heading {
  font-family: var(--serif); color: var(--euc-green); font-weight: 600;
  font-size: clamp(1.3rem, 4.5vw, 2rem);
}
.rsvp-prompt {
  font-family: var(--script); font-style: italic; color: var(--ink-soft);
  font-size: clamp(1rem, 3.2vw, 1.25rem); margin: 4px auto 16px; max-width: 40ch;
}
.rsvp-count {
  margin: 16px 0 6px; font-size: 0.82rem; letter-spacing: 0.06em;
  color: var(--ink-soft); font-weight: 600;
}
.rsvp-list {
  list-style: none; display: grid; gap: 10px; max-width: 460px;
  margin: 10px auto 0; padding: 0;
}
.rsvp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, var(--ivory), var(--cream));
  border: 1px solid var(--sage-soft); border-radius: 14px;
  padding: 11px 16px; box-shadow: var(--shadow-card);
  animation: cardIn 0.5s var(--ease) both; text-align: left;
}
.rsvp-item .rsvp-name {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 1.05rem; overflow-wrap: anywhere; min-width: 0;
}
.rsvp-badge {
  flex: 0 0 auto; font-family: var(--sans); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 40px;
  white-space: nowrap;
}
.rsvp-item.is-yes .rsvp-badge { background: var(--sage-soft); color: #33502c; }
.rsvp-item.is-no .rsvp-badge { background: var(--pink); color: #8a4a58; }

/* ---- RSVP tabs (Attending / Not attending switcher) ---- */
.rsvp-tabs {
  display: flex; gap: 8px; max-width: 460px; margin: 14px auto 4px;
  background: var(--cream); border: 1px solid var(--sage-soft);
  border-radius: 40px; padding: 5px; box-shadow: var(--shadow-card);
}
.rsvp-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; cursor: pointer; border: 0; background: transparent;
  font-family: var(--sans); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.03em; color: var(--ink-soft);
  padding: 9px 12px; border-radius: 40px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.rsvp-tab:hover { color: var(--ink); }
.rsvp-tab .rsvp-tab-count {
  font-size: 0.72rem; min-width: 22px; padding: 1px 7px; border-radius: 40px;
  background: rgba(0,0,0,0.06); color: inherit; font-weight: 700;
}
.rsvp-tab.is-active {
  background: linear-gradient(180deg, var(--ivory), #fff);
  color: var(--euc-green); box-shadow: var(--shadow-card);
}
.rsvp-tab#rsvp-tab-yes.is-active { color: #33502c; }
.rsvp-tab#rsvp-tab-yes.is-active .rsvp-tab-count { background: var(--sage-soft); }
.rsvp-tab#rsvp-tab-no.is-active { color: #8a4a58; }
.rsvp-tab#rsvp-tab-no.is-active .rsvp-tab-count { background: var(--pink); }
.rsvp-empty {
  list-style: none; text-align: center; color: var(--ink-soft);
  font-family: var(--script); font-style: italic;
  font-size: 1.02rem; padding: 14px 8px;
}

/* ---- hidden admin: the middle ✦ is a secret triple-tap trigger ---- */
.rsvp-admin-dot { cursor: default; -webkit-user-select: none; user-select: none; }
.rsvp.rsvp-admin-on .rsvp-admin-dot { color: var(--gold, #c1a44a); text-shadow: 0 0 8px rgba(193,164,74,0.6); }
.rsvp.rsvp-admin-on .rsvp-heading::after {
  content: " · admin"; font-size: 0.5em; letter-spacing: 0.12em;
  color: var(--gold, #c1a44a); vertical-align: middle;
}
.rsvp-del {
  flex: 0 0 auto; cursor: pointer; border: 0; margin-left: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pink); color: #8a4a58; font-weight: 700; font-size: 0.9rem;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s var(--ease), background 0.2s var(--ease);
}
.rsvp-del:hover { background: #e7a9b4; transform: scale(1.1); }

/* ---- "tap here!" attention effect around the RSVP button ---- */
.rsvp-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin-top: 14px;
}

/* hint above + tapping hand below — both in normal flow (never clipped) */
.rsvp-cta-hint {
  font-family: var(--script); font-style: italic; color: var(--euc-green);
  font-size: 1.05rem; white-space: nowrap; line-height: 1; pointer-events: none;
  margin-bottom: 10px;
  text-shadow: 0 1px 6px rgba(255,255,255,0.8);
  animation: rsvpBob 2.4s var(--ease) infinite;
}
/* the hand overlays IN FRONT of the button's lower-right, tapping onto it */
.rsvp-cta-hand {
  position: absolute; left: 50%; top: calc(100% + 2px); z-index: 4;
  font-size: 2rem; line-height: 1; pointer-events: none;
  transform-origin: 50% 0;
  filter: drop-shadow(0 3px 4px rgba(74,68,65,0.4));
  animation: rsvpTap 1s ease-in-out infinite;
}
@keyframes rsvpTap {
  0%   { transform: translateX(-50%) translateY(0)     scale(1)    rotate(0deg);  }
  40%  { transform: translateX(-50%) translateY(-12px) scale(0.82) rotate(-8deg); }
  55%  { transform: translateX(-50%) translateY(-12px) scale(0.82) rotate(-8deg); }
  100% { transform: translateX(-50%) translateY(0)     scale(1)    rotate(0deg);  }
}

/* the button + its halo + stars live in a relative wrapper */
.rsvp-cta-btnwrap { position: relative; display: inline-block; }
.rsvp-cta-btnwrap .btn { position: relative; z-index: 1; }

/* (golden halo removed) */

/* gentle bob + soft glowing aura + a light-sweep (not just on hover) */
.rsvp-attention {
  animation: rsvpBob 2.4s var(--ease) infinite, rsvpAura 2.2s ease-in-out infinite;
}
.rsvp-attention::after {
  animation: rsvpSweep 2.6s var(--ease) infinite;
  left: -120%;
}
@keyframes rsvpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes rsvpAura {
  0%, 100% { box-shadow: 0 10px 26px var(--gold-glow), 0 0 0 0 rgba(255, 226, 150, 0); }
  50%      { box-shadow: 0 10px 26px var(--gold-glow), 0 0 20px 5px rgba(255, 226, 150, 0.65); }
}
@keyframes rsvpSweep {
  0%   { left: -120%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* twinkling stars around the four corners of the button */
.rsvp-spark {
  position: absolute; font-size: 0.95rem; z-index: 2; pointer-events: none;
  animation: rsvpTwinkle 1.7s ease-in-out infinite;
}
.rsvp-spark.s1 { top: -12px;   left: -10px;  animation-delay: 0s;   }
.rsvp-spark.s2 { top: -8px;    right: -12px; animation-delay: .45s; }
.rsvp-spark.s3 { bottom: -12px; left: 4px;   animation-delay: .9s;  }
.rsvp-spark.s4 { bottom: -14px; right: -6px; animation-delay: 1.3s; }
@keyframes rsvpTwinkle {
  0%, 100% { opacity: .25; transform: scale(.7) rotate(-8deg); }
  50%      { opacity: 1;   transform: scale(1.18) rotate(16deg); }
}

/* desktop: hide the stars + tapping hand (kept on phones only) */
@media (min-width: 481px) {
  .rsvp-spark, .rsvp-cta-hand { display: none; }
}

/* once tapped (or already replied), stop nagging */
.rsvp-cta.cta-done .rsvp-cta-hint,
.rsvp-cta.cta-done .rsvp-cta-hand { display: none; }
.rsvp-cta.cta-done .rsvp-cta-btnwrap::before,
.rsvp-cta.cta-done .rsvp-cta-btnwrap::after,
.rsvp-cta.cta-done .rsvp-spark { display: none; }
.rsvp-cta.cta-done .rsvp-attention,
.rsvp-cta.cta-done .rsvp-attention::after { animation: none; }

/* respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .rsvp-cta-btnwrap::before, .rsvp-cta-btnwrap::after,
  .rsvp-attention, .rsvp-attention::after,
  .rsvp-cta-hand, .rsvp-cta-hint, .rsvp-spark { animation: none !important; }
}

/* ---- RSVP modal (mini pop-out) ---- */
.rsvp-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.rsvp-modal-backdrop { position: absolute; inset: 0; background: rgba(44,58,74,0.55); backdrop-filter: blur(3px); }
.rsvp-card {
  position: relative; z-index: 1; width: min(94vw, 400px);
  background: linear-gradient(180deg, var(--ivory), var(--cream));
  border: 1px solid var(--sage-soft); border-radius: 22px;
  padding: 26px 24px 24px; box-shadow: var(--shadow-soft);
  text-align: center; animation: popIn 0.4s var(--ease) both;
  max-height: 90vh; overflow-y: auto;
}
.rsvp-close {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px;
  border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--ink-soft);
  background: rgba(255,255,255,0.6);
}
.rsvp-close:hover { color: var(--ink); background: #fff; }
.rsvp-koala { font-size: 2.6rem; }
.rsvp-modal-title {
  font-family: var(--serif); color: var(--euc-green); font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.7rem); margin: 2px 0 16px;
}
.rsvp-field-label {
  display: block; text-align: left; font-family: var(--sans); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 6px;
}
.rsvp-input {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--sage-soft);
  background: #fff; margin-bottom: 16px;
}
.rsvp-input:focus { outline: none; border-color: var(--euc-green); box-shadow: 0 0 0 3px rgba(126,155,118,0.2); }
/* honeypot: visually + audibly hidden, but present in the DOM for bots */
.rsvp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rsvp-choices { border: none; display: grid; gap: 10px; margin-bottom: 8px; }
.rsvp-choice {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--sage-soft);
  background: #fff; font-family: var(--sans); font-weight: 600; color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.rsvp-choice:hover { border-color: var(--euc-green); }
.rsvp-choice input { accent-color: var(--euc-green); width: 18px; height: 18px; }
.rsvp-choice:has(input:checked) { border-color: var(--euc-green); background: rgba(169,194,160,0.18); }
.rsvp-error { color: #a3384a; font-weight: 600; font-size: 0.9rem; margin: 6px 0 0; }
.rsvp-submit { width: 100%; margin-top: 16px; }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (min-width: 720px) {
  .detail-cards { grid-template-columns: repeat(3, 1fr); }
  .host-row { flex-wrap: nowrap; }
  .moon { width: 110px; height: 110px; }
}
@media (max-width: 600px) {
  /* stack the koala host above its speech bubble so text never clips */
  .host-row { flex-direction: column; align-items: center; text-align: center; }
  .host-koala { width: 150px; }
  .speech-bubble { flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; }
  .speech-bubble::before {
    left: 50%; top: -14px; transform: translateX(-50%);
    border: 8px solid transparent; border-right-color: transparent; border-bottom-color: var(--sage-soft);
  }
}
@media (min-width: 720px) {
  .kingdom-map { max-width: 860px; }
}
/* ---- phones & portrait tablets: fit the whole castle to the screen ---- */
@media (max-width: 820px) {
  .castle { height: auto; width: min(96vw, 460px); aspect-ratio: 1.4 / 1; }
  /* the doorway now sits lower on screen, so aim the fly-through there */
  .castle-camera { transform-origin: 50% 85%; }
  .portal-flash { background: radial-gradient(circle at 50% 85%, #fffdf6 0%, #fffaf0 45%, #fff 100%); }
  .streak { top: 85%; }
  .castle-content { margin: auto auto 30vh; }
}
@media (max-width: 560px) {
  .land-label { font-size: 0.56rem; padding: 2px 7px; }
  .land-medallion { border-width: 2px; }
  .mm-grid { gap: 6px; }
  .game-body { padding: 14px 10px 18px; }
}
@media (max-width: 480px) {
  .music-btn .music-label { display: none; }
  .music-btn { padding: 10px; }
  .story-actions .btn, .finale-actions .btn { width: 100%; max-width: 340px; }
}
@media (max-height: 640px) {
  .welcome-koala { width: 118px; margin: 4px auto 8px; }
  .castle-content { margin-bottom: 4vh; }
}

/* ---- RSVP block on phones ---- */
@media (max-width: 480px) {
  .rsvp { margin-top: 22px; }
  .rsvp-tabs { width: 100%; gap: 5px; padding: 4px; }
  .rsvp-tab { font-size: 0.72rem; padding: 9px 6px; gap: 5px; }
  .rsvp-tab .rsvp-tab-count { font-size: 0.66rem; min-width: 18px; padding: 1px 5px; }

  .rsvp-list { width: 100%; }
  .rsvp-item { padding: 10px 12px; gap: 8px; }
  .rsvp-item .rsvp-name { font-size: 0.98rem; }
  .rsvp-badge { font-size: 0.64rem; padding: 4px 8px; }

  /* the long RSVP button label wraps neatly instead of overflowing */
  .rsvp-cta-btnwrap { width: 100%; }
  .rsvp-cta-btnwrap .btn { width: 100%; white-space: normal; line-height: 1.3; }
  .rsvp-cta-hint { font-size: 0.92rem; }
  .rsvp-cta-hand { font-size: 1.75rem; }
  .rsvp-spark { font-size: 0.8rem; }
}
@media (max-width: 360px) {
  .rsvp-tab { font-size: 0.66rem; padding: 8px 4px; }
  .rsvp-badge { display: none; }   /* the tab already says attending/not */
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.2s !important; }
  .scene { transition: opacity 0.3s; transform: none; }
}