/* ==========================================================================
   Marcus & Emmaline's Birthday Climb
   ========================================================================== */

:root {
  color-scheme: light;

  --ink: #3a2448;
  --ink-2: #6d5880;
  --paper: #fffdf8;
  --m: #f5b800;          /* Marcus: black & gold */
  --m-ink: #1f1f26;
  --e: #ff5c9a;          /* Emmaline: pink & lavender */
  --e-2: #8a63e6;
  --yes: #22b573;
  --no: #8f86a3;

  --font-display: 'Paytone One', 'Fredoka', ui-rounded, system-ui, sans-serif;
  --font-body: 'Fredoka', ui-rounded, 'Avenir Next', system-ui, sans-serif;

  /* climbing + cake geometry (JS reads --climber-h and --lane-inset) */
  --climber-h: 92px;
  --climber-w: calc(var(--climber-h) * 0.6667);
  --lane-inset: 10px;
  --lane: calc(var(--lane-inset) + var(--climber-w) / 2 + 4px);
  --top-h: 34px;
  --curve: 22px;
  --tier-min: 78svh;
  --cake-w: min(100vw - 12px, 760px);
}

@media (min-width: 700px) {
  :root {
    --climber-h: 136px;
    --lane-inset: 26px;
    --top-h: 56px;
    --curve: 40px;
    --tier-min: 82svh;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  background-color: #fff3e6;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 80%, rgba(255,92,154,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 60%, rgba(245,184,0,.18) 0 2px, transparent 3px),
    linear-gradient(180deg, #bfe6ff 0%, #e4f4ff 14%, #fff6ea 38%, #ffeede 70%, #ffe1ea 100%);
  background-size: 90px 90px, 130px 130px, 110px 110px, 100% 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--e-2);
  outline-offset: 3px;
  border-radius: 8px;
}

.small { font-size: .88em; }

/* ---------- confetti canvas ---------- */
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}

/* ---------- top pills ---------- */
.top-pills {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  z-index: 50;
  display: flex;
  gap: 8px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 0 rgba(58,36,72,.12), 0 8px 18px rgba(58,36,72,.12);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.pill-rsvp { background: var(--e); color: #fff; }
.pill[aria-pressed="true"] { background: #fff; }

/* ---------- sky + balloons ---------- */
.sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: 135svh;
  overflow: hidden;
  z-index: 0;
}
.cloud {
  position: absolute;
  width: 160px;
  height: 52px;
  background: #fff;
  border-radius: 999px;
  opacity: .85;
  filter: blur(.3px);
  animation: drift 60s linear infinite;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 70px; height: 70px; left: 24px; top: -34px; }
.cloud::after  { width: 52px; height: 52px; left: 80px; top: -22px; }
.cloud.c1 { top: 9%;  left: -10%; animation-duration: 70s; }
.cloud.c2 { top: 26%; left: 60%; transform: scale(.7); animation-duration: 90s; animation-delay: -30s; }
.cloud.c3 { top: 48%; left: 20%; transform: scale(.55); animation-duration: 80s; animation-delay: -55s; opacity: .7; }
@keyframes drift {
  from { translate: -20vw 0; }
  to   { translate: 120vw 0; }
}

.balloons { position: absolute; inset: 0; }
.balloon {
  position: absolute;
  bottom: -140px;
  width: var(--bw, 56px);
  height: calc(var(--bw, 56px) * 1.2);
  pointer-events: auto;
  cursor: pointer;
  animation: rise var(--dur, 18s) linear var(--delay, 0s) infinite;
  touch-action: manipulation;
}
.balloon .b-sway {
  position: absolute;
  inset: 0;
  animation: sway 3.4s ease-in-out infinite alternate;
}
.balloon .b-body {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 48% 52% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0 8%, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 60% 70%, rgba(0,0,0,.12), rgba(0,0,0,0) 60%),
    var(--bc, #ff5c9a);
  box-shadow: inset -6px -8px 0 rgba(0,0,0,.08);
}
.balloon .b-body::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 9px;
  margin-left: -6px;
  background: var(--bc, #ff5c9a);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: brightness(.88);
}
.balloon .b-string {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 70px;
  margin-top: 6px;
  background: linear-gradient(rgba(58,36,72,.35), rgba(58,36,72,0));
  transform-origin: top;
  animation: sway 2.6s ease-in-out infinite alternate-reverse;
}
.balloon.popped { animation-play-state: paused; }
.balloon.popped .b-sway { animation: pop .22s ease-out forwards; }
@keyframes rise {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-135svh - 200px)); }
}
@keyframes sway {
  from { rotate: -5deg; }
  to   { rotate: 5deg; }
}
@keyframes pop {
  0%   { scale: 1; opacity: 1; }
  60%  { scale: 1.35; opacity: .6; }
  100% { scale: 1.6; opacity: 0; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: calc(66px + env(safe-area-inset-top)) 16px 0;
  margin-bottom: 128px;               /* room for the candles */
  pointer-events: none;               /* let taps reach the balloons */
}
.hello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(58,36,72,.1), 0 10px 24px rgba(58,36,72,.12);
  font-weight: 600;
  font-size: 18px;
  pointer-events: auto;
  animation: hello-in .7s cubic-bezier(.2,1.6,.4,1) both .2s;
}
.hello.loading #helloText {
  color: transparent;
  background: linear-gradient(90deg, #eee 0%, #f7f7f7 50%, #eee 100%) 0 0 / 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.wave-hand { display: inline-block; transform-origin: 70% 80%; animation: wave 2.2s ease-in-out infinite; }
@keyframes wave {
  0%, 60%, 100% { rotate: 0deg; }
  10%, 30% { rotate: 16deg; }
  20%, 40% { rotate: -8deg; }
}
@keyframes hello-in {
  from { opacity: 0; transform: translateY(-14px) scale(.8); }
  to   { opacity: 1; transform: none; }
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .5px;
}
.title > span { display: block; }
.title-small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .2px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.title-names {
  font-size: clamp(30px, 8.4vw, 64px);
  text-shadow: 0 3px 0 #fff, 0 7px 14px rgba(58,36,72,.18);
}
.nm-m { color: var(--m-ink); }
.nm-m { text-shadow: 0 3px 0 var(--m), 0 7px 14px rgba(58,36,72,.18); }
.nm-e { color: var(--e); }
.amp { color: var(--e-2); font-size: .8em; }
.title-big {
  margin-top: 6px;
  font-size: clamp(42px, 12.5vw, 96px);
  text-shadow: 0 4px 0 #fff, 0 10px 20px rgba(58,36,72,.18);
}
.title-big .ltr {
  display: inline-block;
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

/* ---------- climb zone + cake ---------- */
.climb-zone {
  position: relative;
  z-index: 1;
  padding-bottom: 40px;
}
.route-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.cake {
  position: relative;
  z-index: 1;
  width: var(--cake-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tier {
  --w: 92%;
  position: relative;
  width: var(--w);
  min-height: var(--tier-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--top-h) + 64px) 0 calc(var(--curve) + 56px);
  border-radius: 0 0 50% 50% / 0 0 var(--curve) var(--curve);
  background-color: var(--base);
  background-image:
    var(--sprinkles, none),
    linear-gradient(180deg, var(--base-hi) 0%, var(--base) 22%, var(--base) 80%, var(--base-lo) 100%);
  background-size: 260px 260px, 100% 100%;
}
.tier::before {                         /* the frosted top surface */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top-h) / -2);
  height: var(--top-h);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    var(--frost);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.05);
  z-index: 1;
}
.tier::after {                          /* cylinder shading */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(40,10,40,.22) 0%,
    rgba(40,10,40,0) 13%,
    rgba(255,255,255,.22) 25%,
    rgba(255,255,255,0) 40%,
    rgba(40,10,40,0) 78%,
    rgba(40,10,40,.24) 100%);
  z-index: 2;
}
.tier .drips {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.tier > .plaque, .tier > .top-body { position: relative; z-index: 3; }
.tier > .scroll-hint { z-index: 3; }

/* stacking: upper tiers sit on top of lower ones */
.tier:nth-child(1) { z-index: 16; --w: 80%; }
.tier:nth-child(2) { z-index: 15; --w: 90%; }
.tier:nth-child(3) { z-index: 14; --w: 92%; }
.tier:nth-child(4) { z-index: 13; --w: 94%; }
.tier:nth-child(5) { z-index: 12; --w: 97%; }
.tier:nth-child(6) { z-index: 11; --w: 100%; }
@media (min-width: 700px) {
  .tier:nth-child(1) { --w: 56%; }
  .tier:nth-child(2) { --w: 70%; }
  .tier:nth-child(3) { --w: 78%; }
  .tier:nth-child(4) { --w: 86%; }
  .tier:nth-child(5) { --w: 93%; }
  .tier:nth-child(6) { --w: 100%; }
}

/* flavors */
[data-flavor="strawberry"] { --base: #f7a3c2; --base-hi: #ffc4d9; --base-lo: #e584a8; --frost: #fff2f7; --accent: #e0457f; }
[data-flavor="chocolate"]  { --base: #8a5636; --base-hi: #a26a46; --base-lo: #6c3f24; --frost: #fff6ee; --accent: #7a4527; }
[data-flavor="lemon"]      { --base: #ffdf7e; --base-hi: #fff0b8; --base-lo: #f2c24d; --frost: #ffffff; --accent: #c98a00; }
[data-flavor="mint"]       { --base: #9de5cd; --base-hi: #c9f5e6; --base-lo: #6fcfb0; --frost: #6b3f27; --accent: #1f8f6f; }
[data-flavor="blueberry"]  { --base: #b6a4f6; --base-hi: #d6ccff; --base-lo: #937de8; --frost: #ffffff; --accent: #6a4fd6; }
[data-flavor="funfetti"]   { --base: #fff1dc; --base-hi: #ffffff; --base-lo: #f4ddbb; --frost: #ffb3cf; --accent: #e0457f; }

/* ---------- top tier + candles ---------- */
.tier-top {
  min-height: 0;
  padding-top: calc(var(--top-h) + 40px);
  padding-bottom: calc(var(--curve) + 96px);
}
.candles {                      /* spread across the top: 9 at Marcus's end, 6 at Emmaline's */
  position: absolute;
  z-index: 4;
  left: 13%;
  right: 13%;
  bottom: calc(100% - 6px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  --lean: 0deg;
  --hs: 1;
}
.candle.xtra { display: none; }
.candle {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.candle.twist {
  width: 13px;
  height: calc(var(--h, 66px) * var(--hs));
  border-radius: 4px 4px 2px 2px;
  background: repeating-linear-gradient(135deg, var(--c1) 0 7px, #fff 7px 12px);
  box-shadow: inset -3px 0 0 rgba(0,0,0,.1);
}
.t-gold   { --c1: #f5b800; }
.t-mint   { --c1: #3cc79a; }
.t-purple { --c1: #8a63e6; }
.t-pink   { --c1: #ff5c9a; }
.t-blue   { --c1: #4fb4ff; }
.t-orange { --c1: #ff8a3d; }
.candle.num { width: 56px; height: 86px; }
.digit {
  display: block;
  font-family: var(--font-display);
  font-size: 88px;
  line-height: .86;
  background: repeating-linear-gradient(160deg, var(--c1) 0 9px, var(--c2) 9px 15px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #fff;
  filter: drop-shadow(0 4px 0 rgba(58,36,72,.18));
}
.num-m { --c1: var(--m); --c2: #2a2a33; }
.num-e { --c1: var(--e); --c2: #ffd6e6; }
.wick {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 3px;
  height: 11px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #3a2a22;
}
.candle.num .wick { bottom: calc(100% - 4px); }
.flame {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 16px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 78%, #fff 0 16%, #fff38a 30%, #ffb627 58%, #ff6a1f 88%);
  box-shadow: 0 0 14px 6px rgba(255,190,60,.55), 0 0 44px 16px rgba(255,160,40,.22);
  transform-origin: 50% 100%;
  rotate: var(--lean);
  animation: flicker 1.1s ease-in-out infinite alternate;
  transition: opacity .25s, scale .25s;
}
.candle.num .flame { bottom: calc(100% + 4px); }
.candle .flame { animation-delay: var(--fd, 0s); }
.candle:nth-child(even) .flame { animation-duration: 1.3s; }
.candle:nth-child(3n) .flame { animation-duration: .95s; }
@keyframes flicker {
  0%   { transform: scale(1, 1)       skewX(-2deg); }
  30%  { transform: scale(1.06, .93)  skewX(3deg); }
  55%  { transform: scale(.95, 1.08)  skewX(-1deg); }
  80%  { transform: scale(1.03, .97)  skewX(2deg); }
  100% { transform: scale(1, 1.04)    skewX(-3deg); }
}
.candle.out .flame { opacity: 0; scale: .2; animation-play-state: paused; }
.candle.relit .flame { animation: relight .5s cubic-bezier(.2,1.8,.4,1), flicker 1.1s ease-in-out .5s infinite alternate; }
@keyframes relight { from { transform: scale(0); } to { transform: scale(1); } }
.smoke {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: rgba(150,140,160,.55);
  pointer-events: none;
  animation: smoke 1.6s ease-out forwards;
}
@keyframes smoke {
  from { transform: translate(0,0) scale(.6); opacity: .8; }
  to   { transform: translate(var(--sx, 8px), -70px) scale(2.6); opacity: 0; }
}

.wish {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: -150px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 50px);
  color: var(--e-2);
  text-shadow: 0 3px 0 #fff, 0 8px 18px rgba(58,36,72,.2);
  pointer-events: none;
  opacity: 0;
}
.wish.show { animation: wish 3.2s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes wish {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(.6); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  25%  { transform: translate(-50%, 0) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -20px) scale(1); }
}

.top-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: calc(100% - 2 * var(--lane));
}
.turning {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 6.4vw, 40px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 0 var(--accent), 0 8px 16px rgba(120,20,60,.25);
}
.turning .b-m { color: var(--m); text-shadow: 0 3px 0 var(--m-ink); font-weight: 400; }
.turning .b-e { color: #fff; text-shadow: 0 3px 0 var(--e-2); font-weight: 400; }
.blow-hint { margin: 0; font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(120,20,60,.4); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--curve) + 14px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(120,20,60,.45);
  white-space: nowrap;
  transition: opacity .4s;
}
.scroll-hint.gone { opacity: 0; pointer-events: none; }
.scroll-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  font-size: 18px;
  text-shadow: none;
  box-shadow: 0 4px 0 rgba(0,0,0,.08);
  animation: nudge 1.4s ease-in-out infinite;
}
@keyframes nudge { 50% { transform: translateY(6px); } }

/* ---------- buttons ---------- */
.btn {
  --bb: #fff;
  --bt: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border: 0;
  border-radius: 16px;
  background: var(--bb);
  color: var(--bt);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(58,36,72,.18), 0 10px 20px rgba(58,36,72,.12);
  transition: transform .12s, box-shadow .12s;
  touch-action: manipulation;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(58,36,72,.18), 0 4px 10px rgba(58,36,72,.12); }
.btn-small { min-height: 42px; padding: 8px 14px; font-size: 15px; border-radius: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.btn-blow {
  position: relative;
  overflow: hidden;
  --bb: #fff;
  --bt: var(--accent);
  font-size: 15px;
  padding: 10px 16px;
}
.btn-blow.listening { --bb: #fff6c9; }
.mic-meter {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: rgba(0,0,0,.06);
}
.mic-meter i {
  display: block;
  height: 100%;
  width: calc(var(--level, 0) * 100%);
  background: linear-gradient(90deg, #ffb627, #ff6a1f);
  transition: width .08s;
}

/* ---------- plaques ---------- */
.plaque {
  width: min(100% - 2 * var(--lane), 560px);
  padding: 26px 20px 24px;
  border-radius: 28px;
  background: var(--paper);
  text-align: center;
  box-shadow: 0 8px 0 rgba(58,36,72,.12), 0 22px 40px rgba(58,36,72,.18);
  transform: rotate(var(--tilt, 0deg));
}
.plaque::before {                       /* piped-icing border */
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 21px;
  border: 3px dotted color-mix(in srgb, var(--accent) 45%, transparent);
  pointer-events: none;
}
[data-tier="who"]  .plaque { --tilt: -1.2deg; }
[data-tier="when"] .plaque { --tilt: 1deg; }
[data-tier="where"] .plaque { --tilt: -.8deg; }
[data-tier="plan"] .plaque { --tilt: 1.2deg; }
[data-tier="prep"] .plaque { --tilt: -.6deg; }

.plaque.reveal { opacity: 0; transform: translateY(40px) scale(.94) rotate(var(--tilt, 0deg)); }
.plaque.reveal.in {
  opacity: 1;
  transform: rotate(var(--tilt, 0deg));
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,1.5,.4,1);
}

.chip {
  display: inline-block;
  margin: 0 0 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.plaque h2, .rsvp h2 {
  margin: 4px 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 6.6vw, 40px);
  line-height: 1.05;
  color: var(--accent);
}
.plaque-note { margin: 14px 0 0; font-weight: 500; color: var(--ink-2); }
.plaque-note.small { font-size: 14px; }
.you-names { color: var(--e); font-weight: 700; }

/* who */
.stars { display: flex; justify-content: center; gap: 12px; }
.star-card {
  flex: 1 1 0;
  max-width: 190px;
  padding: 12px 8px 10px;
  border-radius: 20px;
  background: var(--sc-bg);
}
.sc-m { --sc-bg: #fff5d1; --sc-ink: var(--m-ink); --sc-hi: var(--m); }
.sc-e { --sc-bg: #ffe4ef; --sc-ink: var(--e); --sc-hi: var(--e-2); }
.face {
  width: 100px;
  height: 100px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--sc-hi);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.face svg, .face img { width: 100%; height: 100%; object-fit: cover; }
.star-name { margin: 0; font-family: var(--font-display); font-size: 23px; line-height: 1; color: var(--sc-ink); }
.star-age { margin: 2px 0 0; font-weight: 600; color: var(--ink-2); }
.star-bday { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-2); opacity: .85; }
.star-age b {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--sc-hi);
  vertical-align: -6px;
}

/* when */
.date-line { margin-bottom: 4px !important; }
.big-time {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 32px);
  color: var(--ink);
}
.countdown { display: flex; justify-content: center; gap: 8px; }
.cd {
  min-width: 58px;
  padding: 8px 4px 6px;
  border-radius: 14px;
  background: #fff4c4;
  box-shadow: inset 0 -3px 0 rgba(201,138,0,.25);
}
.cd b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cd span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-2); }
.cd.tick b { animation: tick .35s ease-out; }
@keyframes tick { 0% { transform: translateY(-4px); opacity: .4; } 100% { transform: none; opacity: 1; } }

/* where */
.address { margin: 0 0 14px; font-size: 19px; font-weight: 600; }
.fact { margin: 16px 0 0; font-weight: 600; }

/* plan */
.timeline { list-style: none; margin: 4px 0 0; padding: 0; text-align: left; }
.timeline li {
  display: grid;
  grid-template-columns: 50px 38px 1fr;
  align-items: start;
  gap: 4px;
  padding: 10px 0;
}
.timeline li + li { border-top: 2px dashed #e6defa; }
.tl-time { font-family: var(--font-display); font-size: 19px; color: var(--accent); padding-top: 3px; }
.tl-dot { font-size: 24px; text-align: center; }
.tl-what b { display: block; font-size: 17px; }
.tl-what small { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.3; }

/* prep */
.checklist { list-style: none; margin: 0; padding: 0; text-align: left; }
.checklist li { display: grid; grid-template-columns: 32px 1fr; gap: 6px; padding: 8px 0; font-size: 15.5px; line-height: 1.38; }
.checklist .ck { font-size: 22px; }
.checklist a { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* ---------- cake board ---------- */
.cake-board {
  position: relative;
  z-index: 0;
  width: calc(var(--cake-w) + 30px);
  height: calc(var(--top-h) * 1.5 + 18px);
  margin: calc(var(--curve) * -1 - 24px) auto 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ffe48a, #f2b81e 70%, #d99a06);
  box-shadow: 0 10px 0 #c58a00, 0 22px 30px rgba(58,36,72,.22);
}

/* ---------- RSVP ---------- */
.rsvp { position: relative; z-index: 2; padding: 48px 12px 0; }
.rsvp-card {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 28px 18px 26px;
  border-radius: 32px;
  background: var(--paper);
  box-shadow: 0 8px 0 rgba(58,36,72,.12), 0 26px 50px rgba(58,36,72,.2);
  --accent: var(--e);
}
@media (min-width: 700px) { .rsvp-card { padding: 34px 34px 30px; } }
.rsvp-head { text-align: center; }
.chip-rsvp { background: var(--e); }
.rsvp-sub { margin: -2px 0 0; color: var(--ink-2); font-weight: 500; }
.prior {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #eafaf2;
  color: #17734b;
  font-weight: 600;
  font-size: 15px;
}

.rsvp-form { margin-top: 20px; }
.kid-list { display: grid; gap: 14px; }
.kid-row {
  margin: 0;
  padding: 14px 14px 16px;
  border: 0;
  border-radius: 22px;
  background: #fff1f6;
  min-width: 0;
}
.kid-row:nth-child(3n+2) { background: #f1edff; }
.kid-row:nth-child(3n+3) { background: #fff6d6; }
.kid-row legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  text-align: center;
}
.kid-row legend .q { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink-2); display: block; margin-top: 4px; }
.kid-name-input {
  width: 100%;
  margin-bottom: 10px;
}
.kid-name-wrap { position: relative; clear: both; }
.kid-remove {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 20px;
  cursor: pointer;
}
.choices { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; }
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 60px;
  padding: 8px 10px;
  border-radius: 16px;
  background: #fff;
  border: 3px solid #e7def0;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2,1.6,.4,1), background .15s, border-color .15s, color .15s;
  user-select: none;
}
.choice input:focus-visible + span { outline: 3px solid var(--e-2); outline-offset: 2px; }
.choice.yes input:checked + span { background: var(--yes); border-color: var(--yes); color: #fff; transform: scale(1.04) rotate(-1deg); box-shadow: 0 5px 0 #188a56; }
.choice.no input:checked + span  { background: var(--no);  border-color: var(--no);  color: #fff; transform: scale(1.02) rotate(1deg); box-shadow: 0 5px 0 #6f6784; }
.kid-row.missing { box-shadow: 0 0 0 3px #ff8a8a; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

.link-btn {
  display: block;
  margin: 12px auto 0;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--e-2);
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.grown-up { margin-top: 22px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 600; font-size: 15px; }
.field small { font-weight: 500; color: var(--ink-2); }
input, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 3px solid #e7def0;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 16px;               /* stops iOS zoom-on-focus */
  color: var(--ink);
  transition: border-color .15s;
}
input:focus, textarea:focus { outline: none; border-color: var(--e-2); }
input.invalid { border-color: #ff8a8a; }
textarea { resize: vertical; min-height: 70px; }
.field-stepper { grid-template-columns: 1fr auto; align-items: center; }
.stepper { display: flex; align-items: center; gap: 6px; background: #f6f1fb; border-radius: 999px; padding: 4px; }
.step {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(58,36,72,.12);
}
.stepper output { min-width: 26px; text-align: center; font-family: var(--font-display); font-size: 26px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #ffecec;
  color: #b3261e;
  font-weight: 600;
  font-size: 15px;
}
.btn-send {
  width: 100%;
  margin-top: 20px;
  min-height: 62px;
  border-radius: 20px;
  --bb: var(--e);
  --bt: #fff;
  font-size: 20px;
  box-shadow: 0 6px 0 #d63c78, 0 14px 26px rgba(255,92,154,.35);
}
.btn-send:active { box-shadow: 0 2px 0 #d63c78; }
.btn-send[disabled] { opacity: .75; cursor: progress; }
.btn-send .spin {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* done */
.done { text-align: center; padding-top: 8px; outline: none; }
.done-emoji { font-size: 64px; line-height: 1; animation: pop-in .6s cubic-bezier(.2,1.8,.4,1); }
@keyframes pop-in { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
.done h3 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.05;
  color: var(--yes);
}
.done.declined h3 { color: var(--e-2); }
.done p { margin: 0 auto; max-width: 440px; }
.cal { margin-top: 20px; padding: 18px 12px; border-radius: 22px; background: #f1edff; }
.cal-label { margin: 0 0 12px !important; font-weight: 700; }
.btn-cal { --bb: #fff; font-size: 15px; }
.cal-waiver { margin-top: 14px !important; font-size: 15px; font-weight: 600; }
.cal-waiver a { color: var(--e-2); }

/* ---------- climbers ---------- */
.climber {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: var(--climber-w);
  height: var(--climber-h);
  will-change: transform;
  cursor: pointer;
  touch-action: manipulation;
}
.climber-body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 68%;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 6px 5px rgba(58,36,72,.28));
}
.climber-body svg, .climber-body img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.climber-body img { opacity: 0; }
.climber-body.flip img { transform: scaleX(-1); }
.climber-body img.on { opacity: 1; }
.climber.boing .climber-body { animation: boing .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes boing {
  0% { scale: 1; }
  30% { scale: 1.18 .86; }
  60% { scale: .94 1.1; }
  100% { scale: 1; }
}

.bubble {
  position: absolute;
  bottom: calc(100% - 6px);
  width: max-content;
  max-width: 132px;
  padding: 6px 10px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.2;
  box-shadow: 0 4px 0 rgba(58,36,72,.12), 0 10px 20px rgba(58,36,72,.16);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(.7);
  transition: opacity .2s, transform .3s cubic-bezier(.2,1.6,.4,1);
}
.bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 14px;
  height: 10px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 30% 100%);
}
[data-kid="marcus"] .bubble { left: 55%; transform-origin: 0 100%; border: 3px solid var(--m); }
[data-kid="marcus"] .bubble::after { left: 10px; }
[data-kid="emmaline"] .bubble { right: 55%; transform-origin: 100% 100%; border: 3px solid var(--e); }
[data-kid="emmaline"] .bubble::after { right: 10px; clip-path: polygon(0 0, 100% 0, 70% 100%); }
.bubble.show { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.footer {
  position: relative;
  z-index: 1;
  padding: 36px 16px calc(40px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--ink-2);
  font-weight: 500;
}
.footer p { margin: 4px 0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .balloons, .cloud { display: none; }
  .flame { animation: none !important; }
}

/* ---------- utilities ---------- */
[hidden] { display: none !important; }
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cd-msg { margin: 0; font-family: var(--font-display); font-size: 30px; color: var(--accent); }

@media (min-width: 700px) {
  .bubble { max-width: 180px; font-size: 15px; padding: 8px 12px; }
}

@media (min-width: 700px) {
  .hero { margin-bottom: 168px; }
  .candles { left: 14.5%; right: 14.5%; --hs: 1.25; }
  .candle.xtra { display: block; }
  .candle.twist { width: 15px; }
  .candle.num { width: 70px; height: 106px; }
  .digit { font-size: 110px; }
  .wish { top: -200px; }
}

.nw { white-space: nowrap; }

.copy-note { color: var(--ink-2); font-weight: 600; font-size: 14px; }