/* ---------- Extras: phone fixes + interactive surprises ---------- */

html, body { min-height: 100%; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
/* Final page is long on phones -> allow scrolling there */
body.scrollable { overflow-y: auto; overflow-x: hidden; display: block; }
.main-content { min-height: 100dvh; }
.center, .top-area { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
button { touch-action: manipulation; }
.heart-outline { z-index: 0; }

/* Bigger tap targets on touch screens */
@media (hover: none) {
  .btn:hover, .Gbtn:hover, .Lbtn:hover, #start-btn:hover { transform: none; }
  .gallery-ui button { min-width: 48px; min-height: 48px; }
}

/* ---------- Music toggle ---------- */
.music-toggle {
  position: fixed; z-index: 100000;
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(20,20,40,.55); backdrop-filter: blur(6px);
  color: #fff; font-size: 20px; cursor: pointer; display: none;
}
.music-toggle.show { display: block; }
.music-toggle.playing { animation: spinSlow 4s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---------- Tap-anywhere heart burst ---------- */
.tap-heart {
  position: fixed; pointer-events: none; z-index: 100001;
  font-size: 20px; transform: translate(-50%, -50%);
  animation: tapHeart 1s ease-out forwards;
}
@keyframes tapHeart {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.4); opacity: 0; }
}

/* ---------- Gallery caption ---------- */
.gallery-caption {
  margin: 0; min-height: 1.6em; padding: 0 16px;
  color: #ffd6ea; font-size: clamp(0.95rem, 4vw, 1.2rem); text-align: center;
  text-shadow: 0 0 10px rgba(255,134,182,.7);
  transition: opacity .35s ease;
}

/* ---------- Final page layout ---------- */
.lastpage {
  position: relative; min-height: 100dvh; color: #fff; text-align: center;
  padding: max(24px, env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
}
.wish-hint { margin: 6px auto 18px; max-width: 420px; font-size: clamp(0.95rem, 4vw, 1.15rem); color: #ffe3f1; }

/* ---------- CSS cake ---------- */
.cake-wrap { position: relative; width: min(72vw, 280px); margin: 70px auto 0; }
.cake { position: relative; }
.layer { border-radius: 14px; margin: 0 auto; position: relative; }
.layer.top { width: 70%; height: 46px; background: linear-gradient(#ffb3d1, #ff8fbf); }
.layer.mid { width: 85%; height: 54px; background: linear-gradient(#fff1c9, #f7d88d); }
.layer.bot { width: 100%; height: 62px; background: linear-gradient(#b980ff, #8a4dff); }
.layer.top::after, .layer.mid::after, .layer.bot::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 14px 14px 50% 50%;
  background: radial-gradient(circle at 10px 0, #fff 8px, transparent 9px) 0 0 / 22px 12px repeat-x;
  opacity: .85;
}
.plate { width: 118%; margin-left: -9%; height: 12px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 8px 20px rgba(0,0,0,.5); }

.candles { position: absolute; bottom: 100%; left: 15%; right: 15%; display: flex; justify-content: space-around; }
.candle {
  position: relative; width: 12px; height: 46px; border: none; padding: 0; cursor: pointer;
  border-radius: 3px; background: repeating-linear-gradient(45deg, #fff 0 6px, #7fd3ff 6px 12px);
}
.candle::before { /* bigger invisible tap area */ content: ""; position: absolute; inset: -40px -14px -6px; }
.flame {
  position: absolute; left: 50%; bottom: 100%; width: 14px; height: 24px; margin-left: -7px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff 0 20%, #ffd54a 40%, #ff7a00 75%, transparent 76%);
  box-shadow: 0 0 18px 6px rgba(255,190,60,.55);
  animation: flicker2 .15s ease-in-out infinite alternate; transform-origin: 50% 100%;
}
@keyframes flicker2 { from { transform: scale(1, 1) rotate(-2deg); } to { transform: scale(.92, 1.08) rotate(2deg); } }
.candle.out .flame { animation: blowOut .5s forwards; }
@keyframes blowOut { to { transform: scale(0) translateY(-10px); opacity: 0; } }
.candle.out::after {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 4px; height: 30px; margin-left: -2px;
  background: linear-gradient(transparent, rgba(220,220,220,.6)); border-radius: 4px; filter: blur(2px);
  animation: smoke 1.6s ease-out forwards;
}
@keyframes smoke { from { opacity: 1; } to { opacity: 0; transform: translateY(-30px) scaleX(3); } }

.mic-btn {
  margin: 22px auto 0; display: block; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: .95rem;
}
.mic-btn.listening { border-color: #ff86b6; box-shadow: 0 0 16px #ff86b6; }

/* ---------- After the wish ---------- */
.after-wish { animation: riseIn 1s ease both; margin-top: 30px; }
@keyframes riseIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.section-title { font-weight: normal; font-size: clamp(1.3rem, 6vw, 2rem); margin: 34px 0 6px; text-shadow: 0 0 14px #ff86b6; }
.section-sub { margin: 0 0 16px; color: #ffd6ea; }

.envelope {
  position: relative; width: min(80vw, 300px); height: min(52vw, 190px); margin: 16px auto; cursor: pointer;
  background: linear-gradient(135deg, #ffd1e3, #ffb3d1); border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.45);
  animation: wiggle 2.4s ease-in-out infinite; outline: none;
}
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } 95% { transform: rotate(-2deg); } }
.env-flap {
  position: absolute; inset: 0 0 45% 0; background: #ff9cc5; clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; transition: transform .6s ease; z-index: 2; border-radius: 10px 10px 0 0;
}
.env-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14px; color: #8a2356; z-index: 3; }
.env-seal { font-size: 2.2rem; margin-bottom: 4px; }
.envelope.open { animation: none; }
.envelope.open .env-flap { transform: rotateX(180deg); }

.letter {
  margin-top: 30px !important;
  width: min(90vw, 520px); margin: 10px auto 0; padding: 24px 22px; box-sizing: border-box; text-align: left;
  background: #fffaf2; color: #4a2a3a; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
  font-size: clamp(1rem, 4.2vw, 1.2rem); line-height: 1.7; animation: riseIn .8s ease both;
}
.letter p { margin: 0; white-space: pre-line; }
.letter-sign { text-align: right; margin-top: 16px !important; color: #c2185b; }

.reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; width: min(92vw, 640px); margin: 0 auto; }
.reason { perspective: 800px; height: 130px; cursor: pointer; border: none; background: none; padding: 0; font: inherit; }
.reason-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.reason.flipped .reason-inner { transform: rotateY(180deg); }
.reason-front, .reason-back {
  position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box;
}
.reason-front { background: linear-gradient(135deg, #ff2d95, #7a00ff); color: #fff; font-size: 2rem; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.reason-back { background: #fff0f7; color: #6b1d45; transform: rotateY(180deg); font-size: .95rem; line-height: 1.35; }

.lastpage .bday-unique { margin-top: 40px; }

@media (max-width: 400px) {
  .reasons { grid-template-columns: 1fr 1fr; }
  .reason { height: 120px; }
  .reason-back { font-size: .85rem; }
}

/* Readable font for the wish message */
.letter, .letter p {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.05rem, 4.4vw, 1.25rem);
  line-height: 1.75;
  color: #3a1f2d;
}
.letter-sign { font-weight: 600; }

/* ---------- Countdown on the intro page ---------- */
.countdown {
  position: fixed; z-index: 11; left: 50%; transform: translateX(-50%);
  top: max(28px, env(safe-area-inset-top)); text-align: center; color: #fff;
  width: 90%; pointer-events: none; transition: opacity .6s ease;
}
.cd-label { font-size: clamp(0.95rem, 4vw, 1.2rem); color: #ffd6ea; margin-bottom: 6px; }
.cd-time {
  font-family: 'Orbitron', 'Segoe UI', sans-serif; font-weight: 700;
  font-size: clamp(2rem, 11vw, 4rem); letter-spacing: 2px;
  text-shadow: 0 0 12px #ff86b6, 0 0 28px #ff2d95;
}
.countdown.hide { opacity: 0; }