:root {
  --charcoal: #0f1518;
  --teal-wall: #0d5965;
  --orange-wall: #e99412;
  --orange-dim: #7b520d;
  --floor: #eee8db;
  --beige: #f5f1ea;
  --cream: #fff7da;
  --ink: #171717;
  --rose: #ef6f9a;
  --peacock: #047486;
  --cyan: #4fcad7;
  --gold: #f0bd2a;
  --wood: #9b5a2e;
  --wood-dark: #4b2617;
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", monospace;
  --font-passport: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--charcoal);
  overflow: hidden;
}
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
[hidden] { display: none !important; }

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.fade {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.fade.visible { opacity: 1; }
.confetti {
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: none;
}

.primary-btn {
  min-width: 180px;
  padding: 15px 26px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--rose), #d94b76);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  transition: transform .18s ease, filter .18s ease;
}
.primary-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.primary-btn:active { transform: scale(.98); }

.mascot {
  position: absolute;
  z-index: 8;
}
.mascot img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .28));
  transform-origin: 50% 100%;
  animation: mascot-breathe 3s ease-in-out infinite;
}
.mascot[data-mode="wave"] img { animation: mascot-breathe 3s ease-in-out infinite, mascot-wave 1.8s ease-in-out infinite; }
.mascot[data-mode="give"] img { animation: mascot-give 1.2s ease-in-out infinite; }
@keyframes mascot-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.01); }
}
@keyframes mascot-wave {
  0%, 100% { rotate: 0deg; }
  50% { rotate: -1.2deg; }
}
@keyframes mascot-give {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(7px) translateY(-5px); }
}
.speech {
  position: absolute;
  z-index: 2;
  max-width: 260px;
  padding: 13px 17px;
  border: 3px solid #552818;
  border-radius: 24px;
  background: #fffbd8;
  color: #27150f;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transition: opacity .25s ease, transform .25s ease;
}
.speech::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 38px;
  width: 24px;
  height: 24px;
  background: #fffbd8;
  border-right: 3px solid #552818;
  border-bottom: 3px solid #552818;
  transform: rotate(45deg);
}
.speech.visible { opacity: 1; transform: translateY(0) scale(1); }

/* Screen 1 */
.scene-countdown {
  background:
    radial-gradient(circle at 35% 35%, rgba(71, 206, 217, .22), transparent 26%),
    linear-gradient(135deg, #0a3037 0%, #073943 46%, #051a20 100%);
}
.scene-countdown::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .32;
}
.countdown-layout {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(240px, 38vw) minmax(330px, 1fr);
  align-items: center;
  gap: 5vw;
  padding: 5vw 9vw;
}
.mascot-left {
  position: relative;
  width: min(330px, 35vw);
  align-self: center;
  justify-self: end;
}
.mascot-left .speech {
  right: -42px;
  top: -16px;
}
.countdown-panel {
  position: relative;
  z-index: 1;
  color: white;
}
.calendar-icon {
  position: relative;
  width: 185px;
  height: 150px;
  margin-bottom: 24px;
  border: 9px solid rgba(255,255,255,.95);
  border-top-width: 26px;
}
.calendar-icon span {
  position: absolute;
  top: -39px;
  width: 9px;
  height: 36px;
  background: rgba(255,255,255,.95);
}
.calendar-icon span:nth-child(1) { left: 25px; }
.calendar-icon span:nth-child(2) { left: 63px; }
.calendar-icon span:nth-child(3) { left: 101px; }
.calendar-icon span:nth-child(4) { left: 139px; }
.calendar-icon::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 25px;
  width: 82px;
  height: 58px;
  background:
    linear-gradient(90deg, white 17px, transparent 17px 31px, white 31px 48px, transparent 48px 62px, white 62px 79px),
    linear-gradient(white 17px, transparent 17px 33px, white 33px 50px);
}
.calendar-icon strong {
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 86px;
  height: 86px;
  border: 8px solid white;
  border-radius: 50%;
}
.calendar-icon strong::before {
  content: "";
  position: absolute;
  left: 38px;
  top: 18px;
  width: 8px;
  height: 33px;
  background: white;
  border-radius: 4px;
}
.calendar-icon strong::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 47px;
  width: 28px;
  height: 8px;
  background: white;
  border-radius: 4px;
  transform: rotate(34deg);
  transform-origin: left center;
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
}
.countdown-panel h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 54px);
  line-height: 1;
}
.countdown-panel h1 span { color: var(--gold); font-size: .55em; }
.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.countdown div {
  min-width: 76px;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  text-align: center;
  box-shadow: 0 0 22px rgba(79, 202, 215, .18);
}
.countdown strong {
  display: block;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 30px;
}
.countdown small {
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .12em;
}

/* Screen 2 */
.scene-gift {
  display: grid;
  place-items: center;
  background: linear-gradient(#e99412 0 82%, var(--floor) 82%);
}
.mascot-gift {
  position: relative;
  width: min(330px, 48vw);
  margin-top: 5vh;
}
.held-bouquet {
  position: absolute;
  right: -82px;
  top: 80px;
  width: 150px;
  height: 155px;
  z-index: 4;
  transform: rotate(15deg);
  animation: bouquet-offer 1.2s ease-in-out infinite;
}
@keyframes bouquet-offer {
  0%, 100% { transform: translateX(0) rotate(15deg); }
  50% { transform: translateX(18px) rotate(10deg); }
}
.reward {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  text-align: center;
}
.reward.visible {
  animation: reward-in 1.1s cubic-bezier(.2,1.25,.32,1) forwards;
}
@keyframes reward-in {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-8deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
.reward p {
  margin: 16px 0 0;
  color: white;
  -webkit-text-stroke: 1px rgba(0,0,0,.2);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  text-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.reward-burst {
  position: absolute;
  inset: -80px;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.86) 0 9deg, rgba(255,216,84,.9) 9deg 18deg);
  clip-path: circle(45%);
  animation: spin 12s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* Bouquet CSS drawing */
.bouquet,
.held-bouquet {
  background:
    radial-gradient(circle at 43% 30%, #7d3b22 0 8px, #f8d268 9px 23px, transparent 24px),
    radial-gradient(circle at 62% 42%, #7d3b22 0 8px, #f8d268 9px 23px, transparent 24px),
    radial-gradient(circle at 34% 51%, #7d3b22 0 8px, #f8d268 9px 23px, transparent 24px),
    linear-gradient(45deg, transparent 42%, #2c9a58 43% 47%, transparent 48%),
    linear-gradient(-42deg, transparent 42%, #2c9a58 43% 47%, transparent 48%),
    linear-gradient(160deg, #d79771 0 50%, transparent 51%),
    linear-gradient(200deg, #ebb28d 0 50%, transparent 51%);
  border-radius: 18px;
}
.bouquet::before,
.held-bouquet::before {
  content: "";
  position: absolute;
  left: 44%;
  top: 54%;
  width: 18px;
  height: 78px;
  background: #fff1d8;
  border-radius: 10px;
  transform: rotate(28deg);
  box-shadow: -20px 6px 0 #fff1d8, 18px 4px 0 #fff1d8;
}
.bouquet::after,
.held-bouquet::after {
  content: "";
  position: absolute;
  left: 39%;
  top: 63%;
  width: 58px;
  height: 18px;
  border-radius: 50%;
  background: #fff5df;
  transform: rotate(-16deg);
}
.bouquet-xl { position: relative; width: 210px; height: 210px; margin: 0 auto; }
.bouquet-large { position: relative; width: 190px; height: 190px; }

/* Door room */
.scene-door {
  background: linear-gradient(var(--orange-wall) 0 82%, var(--floor) 82%);
}
.door-room { position: absolute; inset: 0; }
.door-sign {
  position: absolute;
  left: 50%;
  top: 3.5vh;
  transform: translateX(-50%);
  z-index: 5;
  padding: 10px 28px;
  border: 5px solid #5a2f1a;
  border-radius: 10px;
  color: #fff0c9;
  background: #6f3b1e;
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 34px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.1), 0 8px 0 rgba(0,0,0,.18);
}
.double-door {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(390px, 42vw);
  height: min(72vh, 560px);
  transform: translateX(-50%);
  background: transparent;
  perspective: 1000px;
}
.door-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 8px solid #3a1c0e;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px) 0 0 / 16px 100%,
    linear-gradient(90deg, #7b421f, #a86a3d 45%, #6b351b);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.2);
  transition: transform 1.1s cubic-bezier(.64,0,.2,1);
}
.door-panel::before {
  content: "";
  position: absolute;
  inset: 42px 30px;
  border: 6px double rgba(44,19,9,.75);
  background:
    radial-gradient(ellipse at center, rgba(221,158,87,.55) 0 22%, transparent 24%),
    linear-gradient(90deg, transparent 48%, rgba(42,21,11,.6) 49% 51%, transparent 52%),
    linear-gradient(transparent 48%, rgba(42,21,11,.6) 49% 51%, transparent 52%);
}
.door-left { left: 0; transform-origin: left center; }
.door-right { right: 0; transform-origin: right center; }
.door-shadow {
  position: absolute;
  inset: 0;
  background: #050505;
  opacity: 0;
  z-index: -1;
  transition: opacity .5s ease;
}
.double-door.open .door-left { transform: rotateY(-108deg); }
.double-door.open .door-right { transform: rotateY(108deg); }
.double-door.open .door-shadow { opacity: 1; }
.double-door::before,
.double-door::after {
  content: "";
  position: absolute;
  top: 55%;
  z-index: 4;
  width: 37px;
  height: 10px;
  border-radius: 999px;
  background: #d8d9d8;
  box-shadow: 0 8px 0 #9a9d9b;
}
.double-door::before { left: calc(50% - 48px); }
.double-door::after { right: calc(50% - 48px); }
.mascot-door {
  right: 4vw;
  bottom: 2.2vh;
  width: min(185px, 20vw);
}
.mascot-door .speech {
  right: 54%;
  top: -58px;
}
.bag-button {
  position: absolute;
  right: 3.2vw;
  top: 3.2vh;
  z-index: 20;
  width: 58px;
  height: 58px;
  background: transparent;
}
.bag-icon,
.bag-icon::before,
.bag-icon::after {
  display: block;
  position: absolute;
}
.bag-icon {
  left: 8px;
  bottom: 7px;
  width: 42px;
  height: 33px;
  border-radius: 5px;
  background: #030303;
}
.bag-icon::before {
  content: "";
  left: 11px;
  top: -12px;
  width: 20px;
  height: 13px;
  border: 5px solid #030303;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.bag-icon::after {
  content: "";
  left: 0;
  right: 0;
  top: 13px;
  height: 2px;
  background: var(--gold);
  box-shadow: 20px -1px 0 -5px transparent;
}
.hint-note {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 18;
  transform: translateX(-50%);
  width: min(92vw, 640px);
  padding: 13px 20px;
  border-radius: 13px;
  color: #fff7d7;
  background: rgba(0,0,0,.54);
  font-family: var(--font-display);
  font-size: 20px;
  text-align: center;
}

.keypad-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 15;
  width: min(330px, 72vw);
  padding: 28px 30px 32px;
  border-radius: 34px;
  background: linear-gradient(145deg, #9c9c9c, #6f6f6f);
  box-shadow: inset 8px 8px 14px rgba(255,255,255,.28), inset -9px -9px 16px rgba(0,0,0,.24), 0 24px 40px rgba(0,0,0,.35);
  transform: translate(-50%, -50%) scale(.92);
  opacity: 0;
}
.keypad-panel.visible { animation: keypad-in .24s ease forwards; }
.keypad-panel.leaving { animation: panel-out .45s ease forwards; }
@keyframes keypad-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes panel-out { to { opacity: 0; transform: translate(-50%, -150%) scale(.86); } }
.keypad-panel h2 {
  margin: 0 0 14px;
  color: #101010;
  font-size: 17px;
  line-height: 1.2;
  text-align: center;
  font-weight: 800;
}
.code-display {
  height: 66px;
  margin-bottom: 20px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #050505;
  background: #dce2ea;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.45);
  font-family: var(--font-mono);
  font-size: 42px;
  letter-spacing: .12em;
}
.key-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
.key-grid button {
  aspect-ratio: 1;
  border-radius: 50%;
  color: #101010;
  background: linear-gradient(#989898, #7f7f7f);
  box-shadow: inset 3px 4px 7px rgba(255,255,255,.22), inset -4px -5px 8px rgba(0,0,0,.25), 0 4px 4px rgba(0,0,0,.28);
  font-family: var(--font-mono);
  font-size: 19px;
}
.keypad-panel.error .code-display { color: #8b0000; background: #ffd4d4; font-size: 27px; letter-spacing: 0; }
.keypad-panel.success .code-display { color: #0a6d25; background: #dcffe5; font-size: 23px; letter-spacing: 0; }

.bag-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: min(640px, 80vw);
  min-height: 320px;
  padding: 30px 42px 36px;
  transform: translate(-50%, -50%);
  border-right: 5px solid #20435a;
  border-bottom: 5px solid #20435a;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.58), transparent 42%),
    linear-gradient(145deg, #fff9d6, #fbefbc);
  box-shadow: 18px 18px 0 rgba(36, 54, 57, .24), 0 18px 32px rgba(0,0,0,.28);
}
.bag-panel::before,
.bag-panel::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #08a5a4;
}
.bag-panel::before { left: 20px; }
.bag-panel::after { right: 20px; }
.bag-panel h2, .bag-panel h3 {
  margin: 0;
  text-decoration: underline;
  font-family: var(--font-display);
  font-size: 30px;
}
.bag-panel h2 { padding-left: 26px; }
.bag-panel h3 {
  position: absolute;
  right: 74px;
  top: 55px;
  font-size: 24px;
}
.close-btn {
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: #161616;
  font-weight: 800;
}
.bag-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 30px;
  margin-top: 28px;
}
.flower-clues {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 18px;
  padding-top: 24px;
}
.flower-row {
  min-height: 86px;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.42);
}
.flower {
  grid-row: span 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, #443 0 7px, var(--petal) 8px 20px, transparent 21px);
  box-shadow: 15px 0 0 -6px var(--petal), -15px 0 0 -6px var(--petal), 0 15px 0 -6px var(--petal), 0 -15px 0 -6px var(--petal);
}
.flower-l { --petal: #91cbea; opacity: .25; }
.flower-o { --petal: #f0d73f; }
.flower-v { --petal: #7daee8; }
.flower-e { --petal: #77bf5a; }
.flower-row strong { font-size: 26px; }
.flower-row em { font-style: normal; font-family: var(--font-mono); color: #7b360f; }

/* Lights and party room */
.scene-lights {
  display: grid;
  place-items: center;
  background: #000;
}
.light-btn {
  background: linear-gradient(135deg, var(--gold), #e98520);
  color: #231408;
}

.scene-party {
  background: linear-gradient(#f7f3ed 0 70%, #d8b783 70%);
}
.party-wall {
  position: absolute;
  inset: 0 0 29vh;
  background:
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 74px 100%,
    #f7f3ed;
}
.party-floor {
  position: absolute;
  inset: 66vh 0 0;
  background:
    repeating-linear-gradient(105deg, rgba(92,52,17,.18) 0 2px, transparent 2px 42px),
    repeating-linear-gradient(0deg, rgba(92,52,17,.16) 0 1px, transparent 1px 34px),
    #d7b67d;
}
.string-flags {
  position: absolute;
  left: 4vw;
  right: 4vw;
  top: 0;
  height: 70px;
  background: repeating-linear-gradient(115deg, #7f2bd0 0 18px, #fff 18px 22px, #d71935 22px 40px, #fff 40px 44px, #0777a8 44px 62px, #fff 62px 66px, #e0a20a 66px 84px);
  clip-path: polygon(0 0, 100% 0, 98% 55%, 96% 0, 94% 55%, 92% 0, 90% 55%, 88% 0, 86% 55%, 84% 0, 82% 55%, 80% 0, 78% 55%, 76% 0, 74% 55%, 72% 0, 70% 55%, 68% 0, 66% 55%, 64% 0, 62% 55%, 60% 0, 58% 55%, 56% 0, 54% 55%, 52% 0, 50% 55%, 48% 0, 46% 55%, 44% 0, 42% 55%, 40% 0, 38% 55%, 36% 0, 34% 55%, 32% 0, 30% 55%, 28% 0, 26% 55%, 24% 0, 22% 55%, 20% 0, 18% 55%, 16% 0, 14% 55%, 12% 0, 10% 55%, 8% 0, 6% 55%, 4% 0, 2% 55%);
}
.card-banner {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 8px;
  justify-content: center;
  transform: translateX(-50%);
}
.card-banner.blue { top: 13vh; }
.card-banner.pink { top: 24vh; }
.banner-card {
  position: relative;
  width: 34px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 4px 4px 8px 8px;
  color: white;
  background: var(--card-color);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
  transform: rotate(var(--tilt));
}
.banner-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 1px;
  height: 12px;
  background: #111;
}
.banner-space { width: 18px; }
.banner-card.drop { animation: drop-card .9s cubic-bezier(.55,0,.9,.35) forwards; }
.banner-card.reveal { animation: reveal-card .5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes drop-card { to { transform: translateY(95vh) rotate(260deg); opacity: .35; } }
@keyframes reveal-card { from { opacity: 0; transform: scale(.5) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(4deg); } }

.balloon-cluster {
  position: absolute;
  width: 150px;
  height: 210px;
  animation: wobble 2.8s ease-in-out infinite;
}
.cluster-left { left: 4vw; top: 32vh; }
.cluster-right { right: 4vw; top: 12vh; animation-delay: .4s; }
.balloon-cluster::before,
.balloon-cluster::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 76px;
  border-radius: 50% 50% 45% 45%;
  background: #ffb070;
  box-shadow: 60px -24px 0 #f49cae, 35px -58px 0 #72cfdf;
}
.balloon-cluster::after {
  left: 26px;
  top: 70px;
  width: 1px;
  height: 92px;
  background: #777;
  box-shadow: 60px -24px 0 #777, 35px -58px 0 #777;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-7px); }
}
.party-table {
  position: absolute;
  left: 50%;
  bottom: 10vh;
  width: min(310px, 35vw);
  height: 150px;
  transform: translateX(-50%);
}
.table-top {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
  height: 55px;
  border-radius: 8px;
  background: linear-gradient(90deg, #a87337, #c79250, #a87337);
  box-shadow: inset 0 9px 0 rgba(255,255,255,.14);
}
.table-leg {
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 76px;
  background: #9a6933;
}
.table-leg.left { left: 12%; }
.table-leg.right { right: 12%; }
.cake-front {
  position: absolute;
  left: 50%;
  bottom: 100px;
  width: 120px;
  height: 130px;
  transform: translateX(-50%);
}
.tier {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  border-radius: 12px 12px 20px 20px;
  background: linear-gradient(#7d5037, #4b2819);
  box-shadow: inset 0 -16px 0 rgba(55,25,12,.45);
}
.tier-top { bottom: 58px; width: 70px; height: 62px; }
.tier-bottom { bottom: 0; width: 118px; height: 72px; }
.tier::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 15px;
  height: 14px;
  border-bottom: 4px dotted #f6dfcf;
  border-radius: 50%;
}
.kids {
  position: absolute;
  bottom: 10vh;
  display: flex;
  gap: 20px;
}
.kids-left { left: 8vw; }
.kids-right { right: 14vw; }
.kid {
  position: relative;
  width: 74px;
  height: 150px;
  animation: kid-hop 1.25s ease-in-out infinite;
}
.kid:nth-child(2) { animation-delay: .2s; }
.kid:nth-child(3) { animation-delay: .4s; }
@keyframes kid-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.kid::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 28px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f1b181;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.1);
}
.kid::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 70px;
  width: 50px;
  height: 58px;
  border-radius: 14px 14px 9px 9px;
  background: var(--outfit);
}
.hat {
  position: absolute;
  left: 17px;
  top: 0;
  width: 46px;
  height: 45px;
  background: repeating-linear-gradient(135deg, #ffca38 0 9px, #ef5787 9px 18px, #4fcad7 18px 27px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 2;
}
.mascot-party {
  right: 4vw;
  bottom: -1vh;
  width: min(160px, 18vw);
}
.mascot-party .speech {
  right: 38%;
  top: -60px;
  width: 230px;
}
.cut-btn {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  z-index: 10;
  transform: translateX(-50%);
}

/* Cake cutting */
.scene-cutting {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.22) 0 2px, transparent 2px 80px),
    linear-gradient(90deg, #241c18, #171313);
}
.slice-hint {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  color: #fff6e8;
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
}
.cake-stage { position: relative; width: min(78vh, 82vw, 560px); }
#cake-svg {
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}
.wood-table { fill: #bd7637; }
.cake-top { fill: #6a3c25; stroke: #3c1e12; stroke-width: 5; }
.cut-line {
  stroke: rgba(255,255,255,.58);
  stroke-width: 3;
  stroke-dasharray: 8 9;
}
.cut-line.cut {
  stroke: var(--gold);
  stroke-dasharray: 0;
}
.envelope {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 76px;
  border-radius: 6px;
  background: var(--gold);
  border: 3px solid #6b4308;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,1.3,.42,1), opacity .2s ease;
}
.envelope::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(34deg, transparent 49%, #6b4308 50% 52%, transparent 53%),
    linear-gradient(-34deg, transparent 49%, #6b4308 50% 52%, transparent 53%);
}
.envelope.visible { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: wobble 2s ease-in-out infinite; }

/* Modals */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1001;
  transform: translate(-50%, -50%);
  width: min(92vw, 520px);
  border-radius: 22px;
  background: var(--cream);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.video-modal {
  width: min(92vw, 760px);
  padding: 16px;
  background: #060606;
}
.video-modal video {
  display: block;
  width: 100%;
  min-height: 240px;
  border-radius: 14px;
  background: #111;
}
.address-modal {
  padding: 30px;
}
.address-modal h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
}
.address-modal p {
  margin: 0 0 18px;
  color: #665943;
  line-height: 1.45;
}
.address-modal form { display: grid; gap: 9px; }
.address-modal label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.address-modal input,
.address-modal textarea {
  width: 100%;
  border: 2px solid #dec999;
  border-radius: 12px;
  background: #fffdf3;
  padding: 12px 13px;
  color: var(--ink);
}
.address-modal textarea { min-height: 96px; resize: vertical; }
.address-modal .primary-btn { justify-self: start; margin-top: 12px; }

.passport-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(0,0,0,.62), #000);
  padding: 20px;
}
.passport {
  position: relative;
  width: min(92vw, 430px);
  padding: 34px 28px 30px;
  border: 2px solid var(--gold);
  border-radius: 18px;
  color: #fff5dc;
  background: linear-gradient(145deg, #0c4c56, #073239);
  box-shadow: inset 0 0 0 7px rgba(240,189,42,.12), 0 32px 72px rgba(0,0,0,.45);
  animation: passport-in .5s cubic-bezier(.2,1.25,.4,1) both;
}
@keyframes passport-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
.passport p {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
}
.passport h2 {
  margin: 7px 0 20px;
  font-family: var(--font-passport);
  font-size: 34px;
  font-style: italic;
}
.passport-stamp {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 4px solid var(--rose);
  border-radius: 50%;
  color: var(--rose);
  font-family: var(--font-mono);
  font-size: 22px;
  transform: rotate(13deg);
}
.passport-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.24);
}
.passport-row span {
  color: #bee2e4;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
}
.passport-row strong { text-align: right; }
.passport .primary-btn {
  width: 100%;
  margin-top: 28px;
}

@media (max-width: 760px) {
  body { overflow-y: auto; }
  .countdown-layout {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 20px;
    padding: 22px;
  }
  .mascot-left {
    width: min(250px, 68vw);
    justify-self: center;
  }
  .mascot-left .speech { right: -8px; top: -18px; }
  .calendar-icon { width: 132px; height: 112px; transform: scale(.86); transform-origin: left top; margin-bottom: 0; }
  .double-door { width: 58vw; height: 66vh; }
  .mascot-door { width: 112px; right: 1vw; }
  .mascot-door .speech { right: 16px; top: -74px; font-size: 14px; width: 180px; }
  .door-sign { top: 2vh; font-size: 18px; padding: 8px 16px; }
  .bag-panel { width: 92vw; padding: 28px 18px; }
  .bag-content { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  .bag-panel h3 { position: static; margin-top: 12px; padding-left: 26px; }
  .flower-clues { width: 100%; grid-template-columns: repeat(2, 1fr); padding-top: 0; }
  .card-banner { gap: 4px; }
  .banner-card { width: 23px; height: 30px; font-size: 13px; }
  .kids { gap: 5px; }
  .kid { width: 46px; height: 110px; }
  .kid::before { left: 10px; width: 30px; height: 30px; }
  .kid::after { left: 8px; top: 58px; width: 34px; height: 42px; }
  .hat { left: 9px; width: 32px; height: 34px; }
  .kids-left { left: 2vw; }
  .kids-right { right: 16vw; }
  .mascot-party { width: 98px; right: 0; }
  .mascot-party .speech { width: 170px; font-size: 14px; top: -78px; right: 0; }
  .party-table { width: 210px; }
  .cluster-left { left: -6vw; }
  .cluster-right { right: -7vw; }
}

/* =============================================================
   Revision pass: intro, richer bouquet, stronger party room
============================================================= */
.scene-intro {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 220, 92, .2), transparent 30%),
    linear-gradient(135deg, #0a3037, #06242a 56%, #041419);
}
.intro-card {
  position: relative;
  width: min(92vw, 760px);
  height: min(78vh, 560px);
  display: grid;
  place-items: center;
}
.mascot-intro {
  position: relative;
  width: min(330px, 58vw);
}
.mascot-intro .speech {
  left: 58%;
  top: -36px;
  min-width: 260px;
}
#intro-next {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}

.countdown-layout {
  grid-template-columns: minmax(260px, 38vw) minmax(420px, 1fr);
  gap: 6vw;
}
.countdown-panel {
  align-self: center;
}
.surprise-title {
  margin: 0 0 34px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(38px, 6.6vw, 82px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: .02em;
  text-shadow:
    0 5px 0 #a66a08,
    0 12px 26px rgba(0,0,0,.38),
    2px 0 #fff4bd,
    -2px 0 #fff4bd,
    0 2px #fff4bd;
}
.calendar-icon { display: none; }
.mascot-left {
  width: min(360px, 37vw);
}
.mascot-left .speech {
  left: 56%;
  right: auto;
  top: -30px;
  min-width: 230px;
}

/* More illustrated bouquet inspired by digital bouquet builders. */
.bouquet,
.held-bouquet {
  background:
    radial-gradient(circle at 48% 20%, #3d2015 0 6px, #ffd657 7px 18px, #f29b2f 19px 25px, transparent 26px),
    radial-gradient(circle at 33% 33%, #5c2a45 0 6px, #d983ce 7px 18px, #8d59c9 19px 25px, transparent 26px),
    radial-gradient(circle at 63% 33%, #503018 0 7px, #fff3ad 8px 19px, #f2c83a 20px 28px, transparent 29px),
    radial-gradient(circle at 24% 54%, #553019 0 6px, #ff93a3 7px 18px, #d95779 19px 25px, transparent 26px),
    radial-gradient(circle at 73% 55%, #393421 0 6px, #b4e27a 7px 19px, #62a94d 20px 27px, transparent 28px),
    radial-gradient(circle at 47% 50%, #522316 0 7px, #f9b066 8px 20px, #da6f46 21px 30px, transparent 31px),
    linear-gradient(36deg, transparent 42%, #2f9a57 43% 47%, transparent 48%),
    linear-gradient(-38deg, transparent 42%, #267f4b 43% 47%, transparent 48%),
    linear-gradient(16deg, transparent 42%, #3ea866 43% 47%, transparent 48%),
    linear-gradient(154deg, #df9f7d 0 42%, transparent 43%),
    linear-gradient(205deg, #f2bd94 0 45%, transparent 46%);
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.22));
}
.bouquet::before,
.held-bouquet::before {
  left: 43%;
  top: 56%;
  height: 86px;
  background: #fff0d6;
  box-shadow: -18px 10px 0 #fff6e6, 18px 8px 0 #ffe5bf, -8px -6px 0 #f8dfbe;
}
.bouquet::after,
.held-bouquet::after {
  left: 35%;
  top: 66%;
  width: 70px;
  height: 21px;
  background: linear-gradient(90deg, #fff6e2, #ffd7a8);
}
.held-bouquet {
  right: -100px;
  top: 54px;
  width: 190px;
  height: 190px;
  transform-origin: 10% 84%;
}
.mascot-gift .speech {
  left: 58%;
  top: -54px;
  min-width: 250px;
}
.mascot-gift {
  width: min(380px, 50vw);
}

.door-sign {
  top: 2.5vh;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: clamp(24px, 4.5vw, 46px);
  white-space: nowrap;
  text-shadow: none;
}
.door-sign::before {
  content: "Diya's Birthday Party";
  display: block;
  padding: 11px 26px 16px;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  text-shadow: 0 3px 0 rgba(0,0,0,.22);
  background:
    linear-gradient(135deg, #ef6f9a 0 20%, #f0bd2a 20% 40%, #4fcad7 40% 60%, #047486 60% 80%, #ef6f9a 80%);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 88% 78%, 80% 100%, 72% 78%, 64% 100%, 56% 78%, 48% 100%, 40% 78%, 32% 100%, 24% 78%, 16% 100%, 8% 78%, 0 100%);
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.22));
}
.double-door {
  width: min(470px, 48vw);
  height: min(79vh, 650px);
}
.mascot-door {
  width: min(245px, 24vw);
  right: 3vw;
}

.bag-panel {
  width: min(760px, 84vw);
}
.bag-content {
  grid-template-columns: 0.82fr 1.18fr;
  gap: 42px;
}
.bag-content::before {
  content: "";
  position: absolute;
  left: 42%;
  top: 78px;
  bottom: 30px;
  width: 3px;
  border-radius: 3px;
  background: rgba(32, 67, 90, .42);
}
.bag-panel .bouquet-large {
  width: 235px;
  height: 235px;
}
.flower-clues {
  display: block;
  padding-top: 18px;
}
.flower-bank {
  display: grid;
  grid-template-columns: repeat(5, minmax(46px, 1fr));
  gap: 16px 14px;
  align-items: center;
}
.real-flower {
  position: relative;
  width: 52px;
  height: 52px;
  justify-self: center;
  border-radius: 50%;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.18));
}
.real-flower::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--center, #5b331c);
  box-shadow:
    0 -16px 0 0 var(--petal),
    13px -10px 0 0 var(--petal),
    16px 5px 0 0 var(--petal),
    7px 17px 0 0 var(--petal),
    -8px 16px 0 0 var(--petal),
    -17px 4px 0 0 var(--petal),
    -12px -11px 0 0 var(--petal);
}
.real-flower::after {
  content: attr(data-tag);
  position: absolute;
  right: -7px;
  top: -8px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #161616;
  font-family: var(--font-mono);
  font-size: 12px;
}
.real-flower:not(.tagged)::after { display: none; }
.lily { --petal: #f3f0db; --center: #d4a019; }
.rose { --petal: #e35678; --center: #923149; }
.daisy { --petal: #fff5a7; --center: #d18a1f; }
.orchid { --petal: #c277e8; --center: #6e3084; }
.violet { --petal: #6d77d8; --center: #373c8c; }
.eucalyptus { --petal: #85bd65; --center: #315f36; }
.tulip { --petal: #ff9f6e; --center: #b64f35; }
.peony { --petal: #ffb2c8; --center: #ce6384; }
.sunflower { --petal: #ffd64e; --center: #68401e; }

.keypad-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.35), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #b8b8b8, #737373 58%, #5e5e5e);
  border: 2px solid rgba(255,255,255,.28);
}
.code-display {
  border: 4px solid #505761;
  background:
    linear-gradient(#eef5ff, #c5d0dc);
  text-shadow: 0 2px 0 rgba(255,255,255,.55);
}
.key-grid button {
  border: 1px solid rgba(255,255,255,.25);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.4), transparent 22%),
    linear-gradient(#aaa, #777);
}

.scene-party {
  background: linear-gradient(#fbf7ef 0 67%, #c89255 67%);
}
.party-wall {
  inset: 0 0 30vh;
  background:
    radial-gradient(circle at 14% 26%, rgba(255, 111, 145, .1), transparent 14%),
    radial-gradient(circle at 83% 25%, rgba(79, 202, 215, .13), transparent 14%),
    #fbf7ef;
}
.string-flags {
  height: 96px;
}
.card-banner {
  gap: 11px;
}
.card-banner.blue { top: 12vh; }
.card-banner.pink { top: 24vh; }
.banner-card {
  width: 48px;
  height: 56px;
  font-size: 28px;
}
.banner-space { width: 28px; }
.party-floor {
  inset: 66vh 0 0;
}
.party-table {
  left: 50%;
  bottom: 3vh;
  width: min(620px, 55vw);
  height: auto;
  transform: translateX(-50%);
}
.party-table img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.22));
}
.kids {
  bottom: 9.5vh;
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 1vw, 14px);
}
.kid-photo {
  width: min(118px, 10.6vw);
  height: min(236px, 21.2vw);
  display: block;
  background-image: url("assets/party-kids.png");
  background-repeat: no-repeat;
  background-size: 236% 100%;
  filter: drop-shadow(0 12px 12px rgba(0,0,0,.16));
  animation: kid-hop 1.35s ease-in-out infinite;
}
.kid-photo:nth-child(2) { animation-delay: .18s; }
.kid-photo:nth-child(3) { animation-delay: .36s; }
.kid-photo.girl { background-position: 0% 50%; }
.kid-photo.boy { background-position: 100% 50%; }
.kids-left { left: 3vw; }
.kids-right { right: 7vw; }
.mascot-party {
  width: min(220px, 21vw);
  right: 1.6vw;
  bottom: -1vh;
}
.mascot-party .speech {
  right: 30%;
  top: -74px;
  width: 290px;
}
.cut-btn {
  bottom: 3.5vh;
  z-index: 30;
}

.mascot-cutting {
  right: 3vw;
  bottom: 0;
  width: min(190px, 19vw);
}
.mascot-cutting .speech {
  right: 42%;
  top: -72px;
  width: 250px;
}

@media (max-width: 760px) {
  .intro-card { height: 78vh; }
  .mascot-intro .speech { left: 20%; top: -72px; min-width: 210px; font-size: 14px; }
  .countdown-layout {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .surprise-title {
    margin-bottom: 20px;
    text-align: center;
  }
  .mascot-left {
    width: min(245px, 66vw);
  }
  .double-door {
    width: 68vw;
    height: 73vh;
  }
  .mascot-door {
    width: 130px;
  }
  .bag-content::before { display: none; }
  .flower-bank { grid-template-columns: repeat(4, 1fr); }
  .banner-card {
    width: 28px;
    height: 36px;
    font-size: 17px;
  }
  .party-table {
    width: 80vw;
    bottom: 2vh;
  }
  .kid-photo {
    width: 19vw;
    height: 38vw;
  }
  .kids-left { left: 1vw; bottom: 24vh; }
  .kids-right { right: 1vw; bottom: 24vh; }
  .mascot-party { width: 115px; }
  .mascot-cutting { width: 100px; }
}