/* ==========================================================
   Happy Birthday Windo 💖 — style.css
   Cute + Romantic + Elegant Birthday Celebration
   Mobile-first, responsive, flower garden experience.
   ========================================================== */

:root {
  --pink: #FF69B4;
  --soft-pink: #FFD1E3;
  --hot-pink: #FF2E9E;
  --yellow: #FFD93D;
  --soft-yellow: #FFF3B0;
  --white: #FFFFFF;
  --gold: #F4C542;
  --peach: #FFC2A1;
  --deep-pink: #d63384;
  --success: #2ecc71;
  --text: #7a3b5c;
  --text-light: #b06a8f;
  --safe-top: max(20px, env(safe-area-inset-top));
  --safe-right: max(20px, env(safe-area-inset-right));
  --safe-bottom: max(20px, env(safe-area-inset-bottom));
  --safe-left: max(20px, env(safe-area-inset-left));
}

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

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Quicksand', system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, #FFE4F0, #FFF6DE);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(255, 105, 180, .3); }

button { font-family: inherit; cursor: pointer; }
button:focus-visible,
input:focus-visible,
.drag-arrow:focus-visible {
  outline: 3px solid rgba(255, 105, 180, .55);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

/* ---------- Screens (smooth cross-fade transitions) ---------- */
.screen {
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.screen:not(.hidden) {
  transition: opacity .9s ease, visibility 0s linear 0s;
}
.screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fixed-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow: hidden;
}

/* ---------- Glassmorphism card ---------- */
.glass {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, .75);
  box-shadow: 0 24px 60px rgba(255, 105, 180, .22);
  border-radius: 26px;
}

/* ==========================================================
   OPENING — DRAG ARROW TO LOVE
   ========================================================== */
#opening-screen {
  z-index: 90;
  background: linear-gradient(150deg, #FFB6D9 0%, #FFD9EC 35%, #FFF0F7 60%, #FFF6DE 82%, #FFE9C4 100%);
  background-size: 220% 220%;
  animation: bgShift 10s ease-in-out infinite;
  user-select: none;
}

.opening-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 18% 12%, rgba(255, 105, 180, .25), transparent 65%),
    radial-gradient(44vw 44vw at 85% 18%, rgba(255, 217, 61, .3), transparent 65%),
    radial-gradient(46vw 46vw at 78% 86%, rgba(255, 194, 161, .32), transparent 65%),
    radial-gradient(36vw 36vw at 10% 88%, rgba(255, 105, 180, .2), transparent 65%);
  transition: opacity 1.2s ease;
}

#opening-screen.love-done .opening-bg,
.opening-bg.bright {
  background:
    radial-gradient(46vw 46vw at 18% 12%, rgba(255, 105, 180, .5), transparent 65%),
    radial-gradient(50vw 50vw at 85% 18%, rgba(255, 217, 61, .55), transparent 65%),
    radial-gradient(52vw 52vw at 78% 86%, rgba(255, 194, 161, .5), transparent 65%),
    radial-gradient(42vw 42vw at 10% 88%, rgba(255, 105, 180, .42), transparent 65%);
}

.opening-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vw, 30px);
  text-align: center;
}

.opening-hint {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.3rem);
  color: var(--deep-pink);
  letter-spacing: .02em;
}
.arrow-hint {
  display: inline-block;
  font-size: 1.1em;
  color: var(--hot-pink);
  animation: arrowNudge 1.6s ease-in-out infinite;
}

.love-track {
  position: relative;
  width: min(92vw, 520px);
  height: 92px;
  border-radius: 60px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 18px 44px rgba(255, 105, 180, .25);
  transition: border-color .3s, box-shadow .3s;
}
#opening-screen.dragging .love-track {
  border-color: rgba(255, 46, 158, .6);
  box-shadow: 0 0 34px rgba(255, 46, 158, .35), 0 18px 44px rgba(255, 105, 180, .3);
}

.drag-arrow {
  position: absolute;
  left: 8px;
  top: 50%;
  margin-top: -31px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  background: linear-gradient(135deg, var(--hot-pink), var(--pink));
  box-shadow: 0 10px 22px rgba(255, 46, 158, .5), 0 0 0 6px rgba(255, 255, 255, .4);
  z-index: 2;
  will-change: transform;
}
.drag-arrow:active { cursor: grabbing; }

.arrow-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 158, .5), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
#opening-screen.dragging .arrow-glow,
#opening-screen.love-done .arrow-glow { opacity: 1; }

.arrow-icon {
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  animation: floatY 2.4s ease-in-out infinite;
  transition: transform .25s;
}
#opening-screen.dragging .arrow-icon { transform: scale(1.15); }

.love-target {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  z-index: 1;
}
.love-emoji {
  font-size: clamp(30px, 9vw, 42px);
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(255, 46, 158, .5));
  animation: heartPulse 1.3s ease-in-out infinite;
  transition: transform .3s;
}
#opening-screen.love-done .love-emoji {
  animation: heartPop .9s cubic-bezier(.3, 1.4, .5, 1) both;
}
.love-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: .32em;
  font-size: .7rem;
  color: var(--deep-pink);
}

.opening-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(.9rem, 3.6vw, 1.1rem);
  color: var(--text-light);
}

/* ==========================================================
   PASSWORD SCREEN
   ========================================================== */
.password-card {
  width: 100%;
  max-width: 440px;
  padding: 38px clamp(20px, 6vw, 30px) 34px;
  text-align: center;
  animation: scaleIn .9s cubic-bezier(.34, 1.3, .64, 1) both;
  transition: box-shadow .6s ease;
}
.password-card.glow {
  box-shadow: 0 24px 60px rgba(255, 105, 180, .4), 0 0 70px rgba(255, 217, 61, .45);
}

.password-emoji {
  font-size: 46px;
  margin-bottom: 10px;
  animation: floatY 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(255, 105, 180, .4));
}

.password-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 5vw, 1.55rem);
  line-height: 1.35;
  color: var(--deep-pink);
  margin-bottom: 12px;
}
.password-title .emoji {
  flex: 0 0 auto;
  font-size: .55em;
  line-height: 1;
}
.password-title-text { flex: 0 1 auto; text-wrap: balance; }

.password-subtitle {
  font-size: clamp(.9rem, 3.5vw, .98rem);
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 22px;
}

.pwd-input-wrap { position: relative; }

#password-input {
  width: 100%;
  padding: 15px 18px;
  border-radius: 16px;
  border: 2px solid rgba(255, 105, 180, .35);
  background: rgba(255, 255, 255, .85);
  font-family: inherit;
  font-size: 1.1rem;
  letter-spacing: .35em;
  text-align: center;
  color: var(--deep-pink);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
#password-input::placeholder { letter-spacing: .08em; color: rgba(122, 59, 92, .35); }
#password-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 105, 180, .18);
}
#password-input.shake { animation: shake .5s ease; }
#password-input.error {
  border-color: #e0396b;
  box-shadow: 0 0 0 4px rgba(224, 57, 107, .16);
}
#password-input.success {
  border-color: var(--success);
  background: rgba(240, 255, 244, .9);
  box-shadow: 0 0 0 4px rgba(46, 204, 113, .18);
}

.pwd-check {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--success);
  pointer-events: none;
  transition: transform .4s cubic-bezier(.34, 1.4, .64, 1);
}
.pwd-check.show { transform: translateY(-50%) scale(1); }

.unlock-btn {
  width: 100%;
  margin-top: 16px;
  padding: 15px 20px;
  border: none;
  border-radius: 16px;
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 1.05rem);
  color: #fff;
  background: linear-gradient(120deg, var(--hot-pink), var(--pink) 45%, var(--gold));
  background-size: 180% 180%;
  box-shadow: 0 12px 26px rgba(255, 105, 180, .4);
  transition: transform .25s, box-shadow .25s, background-position .45s;
}
.unlock-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(255, 105, 180, .5);
  background-position: 100% 0;
}
.unlock-btn:active {
  transform: translateY(0) scale(.97);
}

.error-msg {
  display: none;
  margin-top: 14px;
  font-weight: 600;
  font-size: .92rem;
  color: #e0396b;
}
.error-msg.show {
  display: block;
  animation: fadeUp .4s ease both;
}

/* ==========================================================
   GIFT OPENING SCREEN
   ========================================================== */
#gift-screen {
  background: linear-gradient(135deg, #FFD9EC 0%, #FFF0F7 45%, #FFF7D6 100%);
  background-size: 200% 200%;
  animation: bgShift 8s ease-in-out infinite;
}

.gift-wrap { text-align: center; }

.gift {
  position: relative;
  width: 200px;
  height: 210px;
  margin: 0 auto 30px;
  animation: popIn 1s cubic-bezier(.5, 1.5, .5, 1) both;
}

.gift-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 217, 61, .55) 0%, rgba(255, 105, 180, .3) 45%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1s ease;
  animation: glowPulse 2.2s ease-in-out infinite;
}

.gift-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 164px;
  height: 136px;
  border-radius: 16px 16px 18px 18px;
  background: linear-gradient(160deg, #FF9ECF 0%, var(--pink) 60%, #F24E96 100%);
  box-shadow: 0 22px 40px rgba(255, 105, 180, .4), inset 0 -14px 26px rgba(214, 51, 132, .35);
}

.ribbon-v {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 100%;
  background: linear-gradient(90deg, #FFE17D, var(--yellow) 55%, var(--gold));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35);
}

.gift-lid {
  position: absolute;
  bottom: 136px;
  left: 50%;
  transform: translateX(-50%);
  width: 188px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(160deg, #FFB0DA, var(--pink));
  box-shadow: 0 10px 22px rgba(255, 105, 180, .35);
  z-index: 2;
  transition: transform 1s cubic-bezier(.5, 0, .3, 1.15), opacity .8s ease;
}

.ribbon-h {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 28px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #FFE17D, var(--yellow) 55%, var(--gold));
}

.gift-bow {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 40px;
}
.gift-bow::before,
.gift-bow::after {
  content: '';
  position: absolute;
  top: 0;
  width: 36px;
  height: 32px;
  border-radius: 60% 60% 60% 60% / 50% 70% 30% 50%;
  background: linear-gradient(135deg, #FFE17D, var(--yellow));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.gift-bow::before { left: 0; transform: rotate(-18deg); }
.gift-bow::after { right: 0; transform: rotate(18deg); }
.bow-knot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 24px;
  background: var(--gold);
  border-radius: 9px;
  z-index: 2;
}

.gift.opened .gift-lid {
  transform: translate(-50%, -100px) rotate(-7deg);
  opacity: 0;
}
.gift.opened .gift-glow { opacity: 1; }
.gift.opened .gift-box { animation: boxShine 1.4s ease; }

.gift-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  color: var(--deep-pink);
  opacity: 0;
}
.gift-text.show { animation: fadeUp .9s ease .3s both; }

/* ==========================================================
   MAIN BIRTHDAY SCREEN — background & layers
   ========================================================== */
#birthday-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 1;
}

.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #FFD9EC 0%, #FFF0F7 28%, #FFF8DE 62%, #FFE9C4 100%);
  background-size: 300% 300%;
  animation: bgShift 18s ease-in-out infinite;
  filter: brightness(.72) saturate(.9);
  transition: filter 3s ease;
}
#birthday-screen.bright .bg-gradient {
  filter: brightness(1) saturate(1);
}
.bg-gradient::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(42vw 42vw at 12% 8%, rgba(255, 105, 180, .22), transparent 65%),
    radial-gradient(48vw 48vw at 88% 12%, rgba(255, 217, 61, .28), transparent 65%),
    radial-gradient(50vw 50vw at 80% 88%, rgba(255, 194, 161, .3), transparent 65%),
    radial-gradient(38vw 38vw at 8% 90%, rgba(255, 105, 180, .16), transparent 65%);
  transition: opacity 1.2s ease;
}

body.glow-boost .bg-gradient::after {
  background:
    radial-gradient(46vw 46vw at 12% 8%, rgba(255, 105, 180, .42), transparent 65%),
    radial-gradient(52vw 52vw at 88% 12%, rgba(255, 217, 61, .5), transparent 65%),
    radial-gradient(54vw 54vw at 80% 88%, rgba(255, 194, 161, .45), transparent 65%),
    radial-gradient(42vw 42vw at 8% 90%, rgba(255, 105, 180, .34), transparent 65%);
}

.fx-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#bg-flowers-layer { z-index: 0; }
#stars-layer { z-index: 0; }
#flowers-layer { z-index: 1; }
#petals-layer { z-index: 2; }
#hearts-layer { z-index: 3; }
#sparkles-layer { z-index: 4; }
#fireflies-layer { z-index: 4; }

#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 150;
  pointer-events: none;
}

/* ---------- Stars ---------- */
.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8);
  animation: twinkle var(--tw, 3s) ease-in-out var(--td, 0s) infinite;
}

/* ---------- Sparkles ---------- */
.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ffffff, #FFE9A8 55%, transparent 75%);
  transform: rotate(45deg);
  border-radius: 2px;
  animation: sparkle 2.6s ease-in-out var(--sd, 0s) infinite;
}
.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, .9);
  border-radius: 2px;
}
.sparkle::before {
  left: 50%;
  top: -7px;
  bottom: -7px;
  width: 2px;
  transform: translateX(-50%);
}
.sparkle::after {
  top: 50%;
  left: -7px;
  right: -7px;
  height: 2px;
  transform: translateY(-50%);
}

/* ---------- Fireflies ---------- */
.firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFE9A8;
  box-shadow: 0 0 10px 3px rgba(255, 217, 61, .6);
  opacity: 0;
  animation: fireflyFloat var(--ff-dur, 10s) ease-in-out var(--ff-delay, 0s) infinite;
}

/* ---------- Flowers ---------- */
.flower {
  position: absolute;
  transform-origin: 50% 100%;
  animation: flowerGrow 1.7s cubic-bezier(.34, 1.4, .64, 1) both;
  will-change: transform;
}
.flower-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 100%;
  animation: sway var(--sway-dur, 5.5s) ease-in-out var(--sway-delay, 0s) infinite;
}
.bloom { position: relative; animation: bloomSway 7s ease-in-out infinite; }
.bloom-glow {
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(255, 217, 61, .4), rgba(255, 105, 180, .18) 45%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 2.8s ease-in-out infinite;
}
.petal {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: var(--petal-shape, 50% 50% 50% 50% / 60% 60% 40% 40%);
  background: radial-gradient(circle at 50% 32%, var(--petal-light), var(--petal-dark));
  box-shadow: inset 0 -3px 6px rgba(214, 51, 132, .18), 0 2px 6px rgba(0, 0, 0, .06);
  animation: petalOpen 1.5s cubic-bezier(.3, .7, .4, 1) both;
}
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 217, 61, .85), inset 0 -4px 8px rgba(0, 0, 0, .14);
  animation: glowPulse 2.6s ease-in-out infinite;
  z-index: 2;
}
.stem {
  position: relative;
  width: 7px;
  margin-top: 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, #8fd98f, #4fae62);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .16);
}
.stem::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 26%;
  width: 22px;
  height: 12px;
  background: linear-gradient(90deg, #7ccf86, #a9e6ad);
  border-radius: 50% 0 50% 0;
  transform: translateX(-50%) rotate(26deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

/* Background blurred flowers */
.flower.bg-flower {
  filter: blur(3px);
  opacity: .35;
}
.flower.bg-flower .bloom { animation: bloomSway 12s ease-in-out infinite; }

/* ---------- Falling petals ---------- */
.petal-fx {
  position: absolute;
  top: -32px;
  border-radius: 60% 40% 60% 40%;
  opacity: 0;
  animation: petalFall linear forwards;
  will-change: transform, opacity;
}

/* ---------- Floating hearts ---------- */
.heart-fx {
  position: absolute;
  bottom: -50px;
  animation: heartFloat linear forwards;
  will-change: transform, opacity;
}

/* ---------- Easter egg burst hearts ---------- */
.heart-burst {
  position: fixed;
  z-index: 160;
  pointer-events: none;
  font-size: 26px;
  animation: heartBurst 1.3s ease-out forwards;
}

/* ==========================================================
   MAIN CONTENT
   ========================================================== */
.content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding:
    calc(var(--safe-top) + 74px)
    max(16px, var(--safe-right))
    calc(var(--safe-bottom) + 84px)
    max(16px, var(--safe-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vw, 34px);
  text-align: center;
}

/* ---------- Countdown ---------- */
.countdown-section {
  width: 100%;
  animation: fadeUp .9s ease calc(var(--bloom-base, 3s) + .05s) both;
}
.countdown-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(.95rem, 3.6vw, 1.2rem);
  color: var(--deep-pink);
  margin-bottom: 12px;
}
.countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(7px, 2.4vw, 12px);
}
.cd-box {
  min-width: clamp(52px, 16vw, 64px);
  padding: 10px 8px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 10px 24px rgba(255, 105, 180, .18);
}
.cd-num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 5.6vw, 2.1rem);
  color: var(--hot-pink);
  line-height: 1.1;
}
.cd-unit {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: .04em;
}

/* ---------- Hero & typography ---------- */
.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.5vw, 12px);
}

.birthday-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.2rem, 2vw, .55rem);
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: clamp(2.1rem, 8.5vw, 4.5rem);
  line-height: 1.25;
  text-wrap: balance;
  color: var(--deep-pink);
  text-shadow: 0 4px 24px rgba(255, 105, 180, .45);
  cursor: pointer;
  user-select: none;
  animation: titlePop 1s cubic-bezier(.3, 1.2, .4, 1) calc(var(--bloom-base, 3s) + .1s) both;
}
.birthday-title .emoji {
  flex: 0 0 auto;
  font-size: .5em;
  line-height: 1;
}
.birthday-title .title-text {
  flex: 1 1 auto;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.name-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .14em;
  flex-wrap: nowrap;
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: clamp(2.7rem, 11.5vw, 5.6rem);
  line-height: 1.18;
  margin-top: 2px;
  animation: namePop 1.2s cubic-bezier(.3, 1.25, .4, 1) calc(var(--bloom-base, 3s) + .7s) both;
}
.name-title .name-text {
  flex: 0 1 auto;
  overflow-wrap: break-word;
  background: linear-gradient(100deg, var(--hot-pink), var(--deep-pink) 55%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(255, 105, 180, .3));
}
.name-title .heart {
  flex: 0 0 auto;
  font-size: .5em;
  line-height: 1;
  animation: heartPulse 1.4s ease-in-out infinite;
}

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(.95rem, 3.6vw, 1.4rem);
  color: var(--deep-pink);
  opacity: .9;
  margin-top: 6px;
  animation: fadeUp 1s ease calc(var(--bloom-base, 3s) + 1.3s) both;
}
.tagline .tagline-text { text-wrap: balance; }
.tagline .emoji { font-size: .8em; line-height: 1; }

/* ---------- Photo ---------- */
.photo-wrap {
  margin-top: 10px;
  animation: fadeUp 1s ease calc(var(--bloom-base, 3s) + 1.6s) both;
}
.photo {
  width: clamp(140px, 34vw, 210px);
  height: clamp(140px, 34vw, 210px);
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow:
    0 0 0 4px rgba(255, 105, 180, .18),
    0 14px 34px rgba(255, 105, 180, .35);
  animation: floatY 4.5s ease-in-out infinite;
}

/* ---------- Typing ---------- */
.typing-section {
  min-height: 110px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: fadeUp .9s ease calc(var(--bloom-base, 3s) + 2s) both;
}
.typing-lead {
  font-weight: 600;
  font-size: clamp(.9rem, 3.4vw, 1.1rem);
  color: var(--text-light);
  opacity: 0;
}
.typing-lead.show { animation: fadeUp .8s ease both; }
.typing-line {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 4.4vw, 1.5rem);
  color: var(--deep-pink);
  min-height: 1.7em;
}
.caret {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  margin-left: 3px;
  vertical-align: -0.15em;
  background: var(--hot-pink);
  border-radius: 2px;
  animation: caretBlink .85s steps(2, start) infinite;
}
.typing-line.typed .caret { display: none; }
.typing-follow p {
  font-size: clamp(.92rem, 3.6vw, 1.1rem);
  line-height: 1.8;
  color: var(--text);
  opacity: 0;
}
.typing-follow p.show { animation: fadeUp .8s ease both; }
.typing-follow p.strong {
  font-weight: 700;
  color: var(--deep-pink);
}

/* ---------- Message ---------- */
.message-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: fadeUp 1s ease calc(var(--bloom-base, 3s) + 2.4s) both;
}
.greeting {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  color: var(--hot-pink);
  text-shadow: 0 3px 16px rgba(255, 46, 158, .3);
  text-wrap: balance;
}
.message-card {
  width: 100%;
  max-width: 620px;
  padding: clamp(22px, 5vw, 32px) clamp(18px, 4.5vw, 28px);
  text-align: left;
}
.message-text {
  font-size: clamp(.92rem, 3.6vw, 1.05rem);
  line-height: 1.85;
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* ---------- Surprise button ---------- */
.surprise-btn {
  margin-top: 4px;
  padding: 16px 30px;
  border: none;
  border-radius: 40px;
  font-weight: 700;
  font-size: clamp(.95rem, 3.8vw, 1.15rem);
  color: #fff;
  background: linear-gradient(120deg, var(--hot-pink), var(--pink) 50%, var(--gold));
  background-size: 180% 180%;
  box-shadow: 0 14px 32px rgba(255, 105, 180, .5);
  animation: buttonPulse 2.4s ease-in-out infinite;
  transition: transform .25s, box-shadow .25s, background-position .45s;
  max-width: 100%;
}
.surprise-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 40px rgba(255, 105, 180, .6);
  background-position: 100% 0;
}
.surprise-btn:active { transform: translateY(0) scale(.97); }

.signature {
  font-size: clamp(.78rem, 3vw, .85rem);
  color: var(--text-light);
  opacity: .8;
}

/* ==========================================================
   MODAL
   ========================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.modal:not(.hidden) { transition: opacity .5s ease, visibility 0s linear 0s; }
.modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 105, 180, .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 86dvh;
  overflow-y: auto;
  padding: 34px clamp(20px, 6vw, 28px) 26px;
  text-align: center;
  animation: popIn .6s cubic-bezier(.34, 1.35, .64, 1) both;
}
.close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 105, 180, .16);
  color: var(--deep-pink);
  font-size: 15px;
  transition: transform .2s, background .2s;
}
.close-btn:hover { transform: rotate(90deg) scale(1.08); background: rgba(255, 105, 180, .3); }
.modal-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  color: var(--hot-pink);
  margin-bottom: 14px;
  text-wrap: balance;
}
.modal-text {
  font-size: clamp(.9rem, 3.5vw, 1.02rem);
  line-height: 1.85;
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: break-word;
  text-align: left;
}
.modal-close { margin-top: 18px; }

/* ==========================================================
   MUSIC BUTTON & TOAST
   ========================================================== */
.music-btn {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 160;
  padding: 12px 18px;
  border: 1.5px solid rgba(255, 255, 255, .8);
  border-radius: 40px;
  font-weight: 700;
  font-size: clamp(.82rem, 3vw, .92rem);
  color: var(--deep-pink);
  background: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(255, 105, 180, .35);
  transition: transform .25s, box-shadow .25s;
}
.music-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(255, 105, 180, .5); }
.music-btn:active { transform: scale(.96); }
.music-btn.on {
  background: linear-gradient(120deg, var(--pink), var(--gold));
  color: #fff;
  border-color: transparent;
}

.secret-toast {
  position: fixed;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 60px);
  transform: translateX(-50%) translateY(20px);
  z-index: 170;
  padding: 13px 22px;
  border-radius: 40px;
  font-weight: 700;
  font-size: clamp(.85rem, 3.2vw, .95rem);
  color: var(--deep-pink);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 105, 180, .4);
  box-shadow: 0 14px 34px rgba(255, 105, 180, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s, transform .45s;
  max-width: calc(100vw - 32px);
}
.secret-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================
   KEYFRAMES
   ========================================================== */
@keyframes bgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.18); }
  55% { transform: scale(.95); }
}

@keyframes heartPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.6) rotate(-8deg); }
  60% { transform: scale(.85) rotate(5deg); }
  80% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

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

@keyframes glowPulse {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: .1; transform: scale(.6); }
  50% { opacity: .9; transform: scale(1); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: rotate(45deg) scale(.4); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.15); }
}

@keyframes fireflyFloat {
  0%, 100% { transform: translate(0, 0) scale(.5); opacity: 0; }
  20% { opacity: .8; }
  50% { transform: translate(var(--ff-x, 40px), var(--ff-y, -30px)) scale(1); opacity: .9; }
  80% { opacity: .35; }
}

@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes boxShine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@keyframes buttonPulse {
  0%, 100% { box-shadow: 0 14px 32px rgba(255, 105, 180, .45); }
  50% { box-shadow: 0 14px 44px rgba(255, 105, 180, .7); }
}

@keyframes flowerGrow {
  0% { transform: scale(0) translateY(26px); opacity: 0; }
  60% { transform: scale(1.1) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes petalOpen {
  from {
    transform: translate(-50%, -50%) rotate(var(--petal-rotate)) translateY(0) scale(.35);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) rotate(var(--petal-rotate)) translateY(calc(var(--petal-offset) * -1)) scale(1);
    opacity: 1;
  }
}

@keyframes sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

@keyframes bloomSway {
  0%, 100% { transform: scale(1) rotate(-1.5deg); }
  50% { transform: scale(1.03) rotate(1.5deg); }
}

@keyframes petalFall {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translateY(55vh) translateX(26px) rotate(320deg); opacity: .75; }
  100% { transform: translateY(118vh) translateX(-18px) rotate(700deg); opacity: 0; }
}

@keyframes heartFloat {
  0% { transform: translateY(0) rotate(0deg) scale(.6); opacity: 0; }
  12% { opacity: .9; }
  50% { transform: translateY(-52vh) rotate(8deg) scale(1); }
  100% { transform: translateY(-112vh) rotate(-8deg) scale(.8); opacity: 0; }
}

@keyframes heartBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.2) rotate(var(--rot)); }
}

@keyframes titlePop {
  0% { opacity: 0; transform: scale(.6); }
  70% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes namePop {
  0% { opacity: 0; transform: scale(.35); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================
   RESPONSIVE — tablet & desktop
   ========================================================== */
@media (min-width: 600px) {
  .drag-arrow { width: 68px; height: 68px; margin-top: -34px; }
  .love-track { height: 100px; }
  .love-target { width: 104px; }
  .content { gap: 38px; }
}

@media (min-width: 1024px) {
  .content { max-width: 900px; }
}

@media (min-width: 1440px) {
  .content { max-width: 960px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .25s !important;
  }
}