:root {
  --bg: #fff8f6;
  --card: rgba(255,255,255,.82);
  --wine: #7b2431;
  --rose: #b94b61;
  --rose-soft: #f5cdd5;
  --gold: #c79b63;
  --ink: #3d2b2f;
  --muted: #7d686d;
  --shadow: 0 24px 70px rgba(91,43,55,.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(245,205,213,.6), transparent 28%),
    radial-gradient(circle at 90% 85%, rgba(224,190,150,.28), transparent 26%),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(185,75,97,.35); outline-offset: 4px; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 999px; filter: blur(20px); opacity: .35; animation: drift 10s ease-in-out infinite alternate; }
.b1 { width: 170px; height: 170px; background: #f5cdd5; top: -30px; left: -35px; }
.b2 { width: 150px; height: 150px; background: #eacaa0; right: -45px; top: 30%; animation-delay: -4s; }
.b3 { width: 130px; height: 130px; background: #f1b8c4; left: 15%; bottom: -45px; animation-delay: -7s; }
@keyframes drift { to { transform: translate3d(20px,30px,0) scale(1.08); } }

.app-shell { min-height: 100svh; width: min(100%, 520px); margin: 0 auto; position: relative; z-index: 1; padding: env(safe-area-inset-top) 18px env(safe-area-inset-bottom); }
.topbar { height: 62px; display: grid; grid-template-columns: 42px 1fr 42px; gap: 12px; align-items: center; }
.icon-btn, .circle-btn { border: 1px solid rgba(123,36,49,.13); background: rgba(255,255,255,.65); color: var(--wine); border-radius: 999px; cursor: pointer; box-shadow: 0 8px 25px rgba(90,44,55,.08); }
.icon-btn { width: 42px; height: 42px; font-weight: 800; }
.progress-wrap { height: 7px; background: rgba(123,36,49,.08); border-radius: 999px; overflow: hidden; }
.progress-bar { width: 12.5%; height: 100%; background: linear-gradient(90deg, var(--rose), var(--wine)); border-radius: inherit; transition: width .55s ease; }

.scene { min-height: calc(100svh - 82px); display: none; place-items: center; padding: 12px 0 28px; opacity: 0; transform: translateY(12px); }
.scene.active { display: grid; animation: sceneIn .65s ease forwards; }
@keyframes sceneIn { to { opacity: 1; transform: none; } }

.card { width: 100%; border: 1px solid rgba(123,36,49,.09); background: var(--card); backdrop-filter: blur(14px); border-radius: 34px; padding: 34px 26px; text-align: center; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.tall-card { min-height: 650px; }
.hero-card { padding-top: 42px; }
.eyebrow { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 800; color: var(--gold); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--wine); line-height: 1.08; }
h1 { font-size: clamp(36px, 11vw, 54px); margin: 4px 0 12px; }
h2 { font-size: clamp(31px, 9vw, 45px); margin: 6px 0 12px; }
h3 { font-size: 25px; margin: 12px 0; }
.lead, .question { font-size: 18px; }
.muted { color: var(--muted); margin-top: 0; }
.script { font-family: "Segoe Script", "Bradley Hand", cursive; font-size: 22px; color: var(--rose); }

.primary-btn, .ghost-btn { width: 100%; min-height: 52px; border-radius: 18px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.primary-btn { border: 0; color: #fff; background: linear-gradient(135deg, var(--rose), var(--wine)); box-shadow: 0 12px 30px rgba(123,36,49,.23); font-weight: 800; padding: 14px 20px; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(123,36,49,.28); }
.ghost-btn { margin-top: 10px; border: 1px solid rgba(123,36,49,.12); background: transparent; color: var(--muted); }
.hidden { display: none !important; }
.completion { animation: rise .6s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.mini-hearts { position: absolute; inset: 18px 0 auto; display: flex; justify-content: center; gap: 12px; color: var(--rose); opacity: .75; }
.mini-hearts span:nth-child(2) { transform: translateY(-7px); }
.couple-illustration { height: 180px; margin: 22px auto 16px; position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.person { width: 90px; height: 150px; position: relative; }
.person .head { position: absolute; width: 50px; height: 50px; background: #f4c6ac; border-radius: 50%; top: 12px; left: 20px; box-shadow: inset 0 -5px rgba(0,0,0,.03); }
.person .body { position: absolute; width: 80px; height: 88px; border-radius: 45px 45px 25px 25px; bottom: 0; left: 5px; background: linear-gradient(#9b5060,#6f2331); }
.p2 .body { background: linear-gradient(#d9aeb8,#b94b61); }
.heart-core { color: var(--rose); font-size: 36px; margin-bottom: 58px; animation: beat 1.4s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.18); } }

.heart-field { height: 330px; position: relative; margin: 10px 0 2px; }
.floating-heart { position: absolute; border: 0; background: transparent; color: var(--rose); font-size: 62px; cursor: pointer; filter: drop-shadow(0 10px 10px rgba(123,36,49,.16)); animation: bob 2.4s ease-in-out infinite; }
.floating-heart::after { content: "tap"; position: absolute; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); left: 50%; top: 50%; transform: translate(-50%,-45%); }
.h1 { left: 8%; top: 20px; }
.h2 { right: 5%; top: 68px; animation-delay: -.7s; }
.h3 { left: 22%; bottom: 42px; animation-delay: -1.4s; }
.h4 { right: 18%; bottom: 4px; animation-delay: -.35s; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(4deg); } }
.floating-heart.popped { animation: pop .35s ease forwards; pointer-events: none; }
@keyframes pop { to { opacity: 0; transform: scale(1.8) rotate(12deg); filter: blur(5px); } }
.word-reveal { min-height: 52px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.word-pill { padding: 8px 12px; border-radius: 999px; background: rgba(185,75,97,.1); color: var(--wine); font-weight: 800; animation: rise .4s ease both; }

.cake-button { border: 0; background: transparent; width: 220px; height: 260px; position: relative; margin: 18px auto; cursor: pointer; display: block; }
.flame { position: absolute; width: 26px; height: 38px; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: #f5b74b; left: 97px; top: 28px; transform: rotate(4deg); box-shadow: 0 0 30px rgba(245,183,75,.6); animation: flicker .7s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: rotate(-5deg) scale(.92,1.08); } }
.candle-stick { position: absolute; width: 16px; height: 58px; background: repeating-linear-gradient(135deg,#fff 0 6px,#e98ca0 6px 12px); top: 64px; left: 102px; border-radius: 6px; }
.cake-top { position: absolute; width: 180px; height: 60px; border-radius: 50%; background: #f3c9d1; left: 20px; top: 106px; box-shadow: inset 0 -13px rgba(185,75,97,.12); }
.cake-base { position: absolute; width: 180px; height: 90px; border-radius: 0 0 26px 26px; background: linear-gradient(#f6d7dd,#ebb5c0); left: 20px; top: 136px; }
.cake-button.wished .flame { animation: extinguish .5s ease forwards; }
@keyframes extinguish { to { opacity: 0; transform: translateY(-16px) scale(.2); } }

.bouquet { width: 230px; height: 300px; margin: 5px auto 10px; border: 0; background: transparent; position: relative; cursor: pointer; display: block; }
.rose { position: absolute; font-size: 68px; z-index: 2; filter: drop-shadow(0 8px 7px rgba(70,26,34,.13)); transition: transform .5s cubic-bezier(.2,.9,.25,1.3); }
.r1 { left: 25px; top: 55px; transform: rotate(-10deg); }
.r2 { right: 24px; top: 52px; transform: rotate(9deg); }
.r3 { left: 82px; top: 18px; }
.r4 { left: 52px; top: 107px; transform: rotate(-6deg); }
.r5 { right: 48px; top: 107px; transform: rotate(7deg); }
.wrap-paper { position: absolute; width: 150px; height: 145px; background: linear-gradient(135deg,#f5e8dc,#e6c9ad); clip-path: polygon(5% 0,95% 0,72% 100%,28% 100%); left: 40px; bottom: 20px; z-index: 1; }
.bouquet.opened .r1 { transform: translate(-14px,-9px) rotate(-18deg); }
.bouquet.opened .r2 { transform: translate(14px,-9px) rotate(18deg); }
.bouquet.opened .r3 { transform: translateY(-18px) scale(1.08); }
.bouquet.opened .r4 { transform: translate(-9px,2px) rotate(-12deg); }
.bouquet.opened .r5 { transform: translate(9px,2px) rotate(12deg); }

.memory-tree { height: 230px; position: relative; margin: 4px 0 -28px; }
.trunk { position: absolute; width: 34px; height: 125px; background: #8a5e47; left: calc(50% - 17px); bottom: 0; border-radius: 22px 22px 8px 8px; }
.crown { position: absolute; border-radius: 50%; background: rgba(185,75,97,.15); border: 1px solid rgba(185,75,97,.08); }
.c1 { width: 150px; height: 150px; left: calc(50% - 75px); top: 5px; }
.c2 { width: 115px; height: 115px; left: calc(50% - 126px); top: 55px; }
.c3 { width: 115px; height: 115px; right: calc(50% - 126px); top: 55px; }
.note-cloud { min-height: 175px; position: relative; z-index: 3; margin-bottom: 18px; }
.note-bubble { width: fit-content; max-width: 80%; background: #fff; border: 1px solid rgba(123,36,49,.1); border-radius: 18px; padding: 10px 14px; box-shadow: 0 10px 25px rgba(73,32,43,.08); margin: 8px auto; font-size: 14px; color: var(--ink); animation: noteIn .55s ease both; }
@keyframes noteIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

.polaroid-deck { height: 425px; position: relative; margin-top: 18px; perspective: 900px; touch-action: pan-y; }
.polaroid { position: absolute; inset: 0 8px; background: #fff; padding: 12px 12px 72px; border-radius: 12px; box-shadow: 0 18px 42px rgba(72,39,47,.16); transform-origin: center bottom; transition: transform .5s ease, opacity .45s ease; }
.polaroid:not(.current) { opacity: 0; pointer-events: none; transform: translateX(45px) rotate(5deg) scale(.94); }
/* Keep every memory fully visible, regardless of portrait/landscape ratio. */
.polaroid-photo {
  height: 320px;
  position: relative;
  isolation: isolate;
  border-radius: 7px;
  background: #f5ece9;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.polaroid-photo::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: 0;
  background-image: var(--photo-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  opacity: .28;
  transform: scale(1.08);
}
.polaroid-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255,255,255,.09);
}
.polaroid-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 4px;
}
.photo-placeholder { color: rgba(123,36,49,.55); font-size: 12px; letter-spacing: .12em; font-weight: 800; padding: 18px; }
.polaroid-caption { position: absolute; left: 20px; right: 20px; bottom: 18px; font-family: "Segoe Script", "Bradley Hand", cursive; color: var(--wine); font-size: 18px; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 18px; }
.circle-btn { width: 44px; height: 44px; }
.counter { color: var(--muted); font-size: 13px; min-width: 56px; }

.letter-scene { overflow: visible; }
.envelope { width: 280px; height: 190px; margin: 45px auto 25px; display: block; border: 0; background: transparent; position: relative; cursor: pointer; perspective: 800px; }
.env-back, .env-front, .env-flap, .env-paper { position: absolute; left: 0; width: 100%; }
.env-back { inset: 0; background: #d993a2; border-radius: 12px; box-shadow: 0 18px 38px rgba(85,39,49,.16); }
.env-paper { height: 150px; background: #fffdf8; top: 22px; left: 18px; width: calc(100% - 36px); border-radius: 8px; z-index: 2; display: grid; place-items: center; color: var(--wine); font-family: "Segoe Script", cursive; transition: transform .8s ease; }
.env-front { height: 100%; bottom: 0; background: #e5a6b3; clip-path: polygon(0 28%,50% 70%,100% 28%,100% 100%,0 100%); z-index: 4; border-radius: 0 0 12px 12px; }
.env-flap { height: 110px; top: 0; background: #edaeba; clip-path: polygon(0 0,100% 0,50% 100%); z-index: 5; transform-origin: top; transition: transform .7s ease; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.envelope.open .env-paper { transform: translateY(-92px); }
.love-letter { background: #fffdf8; border: 1px solid rgba(123,36,49,.1); border-radius: 18px; text-align: left; padding: 24px 22px; box-shadow: 0 18px 45px rgba(76,37,46,.12); font-family: Georgia, serif; line-height: 1.65; max-height: 440px; overflow-y: auto; margin-top: -10px; }
.letter-emphasis { color: var(--wine); font-size: 25px; text-align: center; font-weight: 700; }
.signature { text-align: right; font-family: "Segoe Script", cursive; color: var(--wine); }

.final-card { min-height: 680px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gift-box { width: 220px; height: 210px; border: 0; background: transparent; position: relative; cursor: pointer; margin: 25px auto; }
.gift-body, .gift-lid, .gift-ribbon-v, .gift-ribbon-h, .gift-bow { position: absolute; display: block; }
.gift-body { width: 180px; height: 125px; background: #b94b61; border-radius: 8px; left: 20px; bottom: 14px; box-shadow: 0 18px 35px rgba(89,32,45,.2); }
.gift-lid { width: 200px; height: 42px; background: #ce6579; left: 10px; bottom: 130px; border-radius: 8px; transition: transform .7s cubic-bezier(.2,.9,.2,1.2); z-index: 3; }
.gift-ribbon-v { width: 28px; height: 158px; background: #e9c28d; left: 96px; bottom: 14px; z-index: 4; }
.gift-ribbon-h { width: 180px; height: 24px; background: #e9c28d; left: 20px; bottom: 66px; z-index: 4; }
.gift-bow { width: 74px; height: 45px; border: 13px solid #e9c28d; border-radius: 55% 45% 55% 45%; bottom: 166px; z-index: 2; }
.b-left { left: 45px; transform: rotate(16deg); }
.b-right { right: 45px; transform: scaleX(-1) rotate(16deg); }
.gift-box.open .gift-lid { transform: translateY(-65px) rotate(-8deg); }
.final-reveal { width: 100%; animation: rise .8s ease both; }
.final-photo { height: 260px; border-radius: 24px; background: linear-gradient(135deg,#f5cdd5,#f7ebdf); display: grid; place-items: center; overflow: hidden; margin: 14px 0 24px; box-shadow: 0 18px 45px rgba(84,43,52,.13); }
.final-photo img { width: 100%; height: 100%; object-fit: cover; }
.final-title { font-size: 38px; }
.forever-line { width: 80px; height: 1px; background: var(--gold); margin: 24px auto; }
.big-love { font-size: 20px; }
.infinity { font-size: 58px; line-height: 1; color: var(--gold); margin: 14px 0; }
.names { font-family: Georgia, serif; color: var(--wine); font-weight: 700; }

.confetti-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.confetti-piece { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 3px; animation: fall var(--dur) linear forwards; opacity: .9; }
@keyframes fall { to { transform: translate3d(var(--x),110vh,0) rotate(900deg); opacity: .1; } }

@media (max-width: 390px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .card { padding-left: 20px; padding-right: 20px; border-radius: 28px; }
  .tall-card { min-height: 620px; }
  .polaroid-deck { height: 385px; }
  .polaroid-photo { height: 280px; }
  .envelope { width: 245px; height: 170px; }
}

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

/* For You surprise */
.for-you-btn { position: relative; overflow: hidden; }
.for-you-btn::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 49%, transparent 63%);
  transform: translateX(-70%) rotate(8deg);
  animation: forYouShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes forYouShine { 0%,55% { transform: translateX(-80%) rotate(8deg); } 85%,100% { transform: translateX(80%) rotate(8deg); } }

body.modal-open { overflow: hidden; }
.love-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 22px; opacity: 0; transition: opacity .22s ease; }
.love-modal.show { opacity: 1; }
.love-modal.hidden { display: none !important; }
.love-modal-backdrop { position: absolute; inset: 0; background: rgba(55, 20, 30, .42); backdrop-filter: blur(8px); }
.love-modal-card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  max-height: min(760px, 88vh);
  overflow-y: auto;
  text-align: center;
  background: rgba(255, 252, 251, .98);
  border: 1px solid rgba(123,36,49,.1);
  border-radius: 30px;
  padding: 34px 24px 24px;
  box-shadow: 0 28px 80px rgba(69, 25, 37, .26);
  transform: translateY(18px) scale(.97);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.love-modal.show .love-modal-card { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--wine);
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(73,32,43,.1);
  cursor: pointer;
}
.for-you-heart {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin: 24px auto 18px;
  border: 0;
  background: transparent;
  color: #c44c67;
  font-size: 98px;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 16px 22px rgba(185,75,97,.22));
  animation: heartPulse 1.5s ease-in-out infinite;
  transition: opacity .25s ease, filter .25s ease;
}
.for-you-heart:hover { filter: drop-shadow(0 18px 26px rgba(185,75,97,.34)); }
.for-you-heart.heart-tap { animation: heartTap .42s ease, heartPulse 1.5s .42s ease-in-out infinite; }
.for-you-heart.finished { opacity: .28; animation: none; cursor: default; }
@keyframes heartPulse { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.06); } }
@keyframes heartTap { 0% { transform: scale(.9); } 45% { transform: scale(1.22) rotate(-4deg); } 100% { transform: scale(1); } }
.for-you-message-wrap {
  min-height: 82px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
}
.for-you-message { margin: 0; max-width: 330px; color: var(--ink); font-size: 17px; line-height: 1.55; font-weight: 650; }
.for-you-message.message-in { animation: forYouMessageIn .48s ease both; }
@keyframes forYouMessageIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.for-you-dots { display: flex; justify-content: center; gap: 8px; margin: 6px 0 18px; }
.for-you-dot { width: 7px; height: 7px; border-radius: 50%; background: #ead7db; transition: width .25s ease, background .25s ease; }
.for-you-dot.seen { width: 20px; background: var(--rose); border-radius: 99px; }
.for-you-final { border-top: 1px solid rgba(123,36,49,.1); padding-top: 18px; animation: noteIn .55s ease both; }
.for-you-final h3 { margin: 4px 0 10px; color: var(--wine); }
.for-you-final .primary-btn { margin-top: 16px; }

@media (max-width: 520px) {
  .love-modal { padding: 16px; }
  .love-modal-card { border-radius: 26px; padding: 32px 18px 20px; }
  .for-you-heart { width: 104px; height: 104px; font-size: 86px; margin-top: 18px; }
  .for-you-message { font-size: 16px; }
}

/* Our journey timeline */
.timeline-card { overflow: visible; }
.timeline-intro { margin-bottom: 20px; }
.together-counter {
  position: relative;
  margin: 16px 0 34px;
  padding: 22px 14px 18px;
  border: 1px solid rgba(123,36,49,.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% -15%, rgba(245,205,213,.7), transparent 48%),
    rgba(255,255,255,.72);
  box-shadow: 0 15px 35px rgba(73,32,43,.08);
  overflow: hidden;
}
.together-counter::before,
.together-counter::after {
  content: "♡";
  position: absolute;
  color: rgba(185,75,97,.14);
  font-family: Georgia, serif;
  font-size: 74px;
  line-height: 1;
  pointer-events: none;
}
.together-counter::before { left: -12px; top: -12px; transform: rotate(-12deg); }
.together-counter::after { right: -10px; bottom: -20px; transform: rotate(14deg); }
.counter-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
  font-weight: 800;
}
.counter-start { margin: 0 0 18px; color: var(--wine); font-family: Georgia, serif; font-weight: 700; font-size: 17px; }
.counter-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; position: relative; z-index: 1; }
.time-unit {
  min-width: 0;
  padding: 13px 4px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(123,36,49,.08);
  box-shadow: 0 7px 18px rgba(73,32,43,.06);
}
.time-unit strong { display: block; color: var(--wine); font-family: Georgia, serif; font-size: clamp(22px,7vw,31px); line-height: 1; font-variant-numeric: tabular-nums; }
.time-unit span { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.counter-caption { position: relative; z-index: 1; margin: 15px 0 0; color: var(--rose); font-family: "Segoe Script", "Bradley Hand", cursive; font-size: 14px; }

.journey-timeline { position: relative; text-align: left; padding: 2px 0 4px; margin: 0 0 22px; }
.journey-timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(185,75,97,.18), var(--rose), rgba(199,155,99,.5));
}
.journey-event { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 0 0 24px; }
.journey-event:last-child { padding-bottom: 4px; }
.journey-dot {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 7px;
  border-radius: 50%;
  border: 5px solid rgba(255,248,246,.95);
  background: linear-gradient(135deg, #d66b80, var(--wine));
  color: #fff;
  box-shadow: 0 8px 22px rgba(123,36,49,.2);
  font-size: 15px;
}
.journey-content {
  min-width: 0;
  padding: 15px 16px 14px;
  border: 1px solid rgba(123,36,49,.09);
  border-radius: 19px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 28px rgba(73,32,43,.07);
}
.journey-content time { display: block; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.journey-content h3 { margin: 5px 0 6px; font-size: 21px; line-height: 1.2; }
.journey-content p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.journey-gap {
  display: inline-block;
  margin: -2px 0 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(185,75,97,.08);
  color: var(--rose);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.journey-event-highlight .journey-content { border-color: rgba(199,155,99,.32); background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(249,236,224,.72)); }
.journey-event-highlight .journey-dot { background: linear-gradient(135deg, #c99d65, var(--wine)); }
.timeline-ending { margin: 8px auto 22px; padding: 14px 14px 4px; text-align: center; }
.timeline-ending span { display: block; color: var(--rose); font-size: 32px; line-height: 1; }
.timeline-ending p { margin: 6px auto 0; max-width: 320px; color: var(--wine); font-family: Georgia, serif; font-size: 16px; line-height: 1.5; }

@media (max-width: 390px) {
  .together-counter { padding-left: 10px; padding-right: 10px; }
  .counter-grid { gap: 5px; }
  .time-unit { padding-left: 2px; padding-right: 2px; }
  .time-unit span { font-size: 8px; letter-spacing: .04em; }
  .journey-event { grid-template-columns: 42px minmax(0,1fr); gap: 9px; }
  .journey-timeline::before { left: 20px; }
  .journey-dot { width: 40px; height: 40px; border-width: 4px; }
  .journey-content { padding: 13px 13px 12px; }
}



/* Birthday launch gate */
.app-shell.birthday-locked { display: none; }

.birthday-gate {
  min-height: 100svh;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: max(26px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom));
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}

.birthday-gate-card {
  width: 100%;
  padding: 42px 24px 32px;
  border: 1px solid rgba(123,36,49,.10);
  border-radius: 34px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  text-align: center;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gate-hearts {
  margin-bottom: 14px;
  color: var(--rose);
  font-size: 24px;
  letter-spacing: .15em;
  animation: beat 1.8s ease-in-out infinite;
}

.birthday-gate-card h1 { margin-top: 4px; }
.gate-lead { margin: 4px auto 0; max-width: 360px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.gate-note { margin: 14px auto 0; max-width: 360px; color: #8f7077; font-size: 13px; line-height: 1.5; }

.birthday-gate.opening { animation: birthdayGateOpen .9s ease forwards; pointer-events: none; }
@keyframes birthdayGateOpen {
  0% { opacity: 1; transform: scale(1); }
  55% { opacity: 1; transform: scale(1.015); }
  100% { opacity: 0; transform: scale(.985) translateY(-10px); }
}

@media (max-width: 380px) {
  .birthday-gate { padding-left: 12px; padding-right: 12px; }
  .birthday-gate-card { padding: 34px 14px 26px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-gate.opening { animation-duration: .15s; }
  .gate-hearts { animation: none; }
}

/* Birthday countdown */
.birthday-countdown {
  width: min(100%, 430px);
  margin: 20px auto 22px;
  padding: 16px;
  border: 1px solid rgba(123, 36, 49, 0.13);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(252,235,238,.9));
  box-shadow: 0 14px 34px rgba(123, 36, 49, 0.08);
}

.birthday-countdown-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  text-align: left;
}

.birthday-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: #fff;
  font-size: 24px;
  box-shadow: 0 7px 18px rgba(123, 36, 49, 0.09);
}

.birthday-kicker,
.birthday-date,
.birthday-caption {
  margin: 0;
}

.birthday-kicker {
  color: #7a6267;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.birthday-date {
  margin-top: 2px;
  color: #8e2d3d;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 700;
}

.birthday-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.birthday-unit {
  min-width: 0;
  padding: 10px 4px 8px;
  border-radius: 15px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(123, 36, 49, 0.08);
  text-align: center;
}

.birthday-unit strong {
  display: block;
  color: #922f40;
  font-size: clamp(21px, 6vw, 30px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.birthday-unit span {
  display: block;
  margin-top: 5px;
  color: #806b70;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.birthday-caption {
  margin-top: 10px;
  color: #8f7077;
  font-size: 12px;
  text-align: center;
}

.birthday-countdown.is-birthday {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,220,225,.96));
  animation: birthdayPulse 1.9s ease-in-out infinite;
}

.birthday-countdown.is-birthday .birthday-caption {
  color: #8e2d3d;
  font-size: 15px;
  font-weight: 800;
}

@keyframes birthdayPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

@media (max-width: 380px) {
  .birthday-countdown { padding: 13px 10px; }
  .birthday-grid { gap: 5px; }
  .birthday-unit { padding-left: 2px; padding-right: 2px; }
  .birthday-unit span { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-countdown.is-birthday { animation: none; }
}


/* Mobile-audio fallback shown only when audible autoplay is blocked. */
.gate-sound-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 14px auto 0;
  padding: 10px 17px;
  border: 1px solid rgba(142,45,61,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #8e2d3d;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(123,36,49,.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gate-sound-btn.playing {
  opacity: .8;
}
.gate-sound-btn.hidden,
.gate-sound-status.hidden {
  display: none !important;
}
.gate-sound-status {
  margin: 7px 0 0;
  color: #8f7077;
  font-size: 11px;
  text-align: center;
}