@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Great+Vibes&family=Poppins:wght@300;400;500;600&display=swap');
:root{--pink:#ff73b7;--pink2:#d65cff;--soft:#ffd7ea;--bg:#09030c}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#07030a;color:#fff;font-family:Poppins,sans-serif}
body{overflow:hidden}
#app{height:100svh;position:relative;background:
radial-gradient(circle at 50% 15%,rgba(190,55,130,.18),transparent 34%),
radial-gradient(circle at 10% 90%,rgba(115,50,180,.13),transparent 35%),
linear-gradient(150deg,#09030d,#11040f 55%,#060208)}
#stars,#confetti,#hearts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.45;animation:drift 7s linear infinite}
@keyframes drift{from{transform:translateY(105vh)}to{transform:translateY(-10vh)}}
.screen{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:28px 18px;opacity:0;visibility:hidden;transform:translateY(20px) scale(.985);transition:opacity .65s,transform .65s}
.screen.active{opacity:1;visibility:visible;transform:none}
.wrap{width:min(440px,100%);height:min(760px,94svh);position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center}
.top{position:absolute;top:3px;left:0;right:0;font-size:10px;letter-spacing:4px;color:#b99aae;text-transform:uppercase}
h1,h2{font-family:"DM Serif Display",serif;font-weight:400;margin:0}
.script{font-family:"Great Vibes",cursive;color:#ffb8d8}
h1{font-size:clamp(52px,15vw,82px);line-height:.95}
h2{font-size:clamp(37px,10vw,58px);line-height:1.05}
.sub{color:#cfc0cd;font-size:14px;line-height:1.75;margin:18px auto 26px;max-width:370px}
.btn{border:1px solid rgba(255,188,220,.35);border-radius:999px;padding:14px 24px;color:#fff;background:rgba(255,255,255,.07);backdrop-filter:blur(14px);cursor:pointer;transition:.25s;box-shadow:0 12px 35px #0008}
.btn:hover{transform:translateY(-2px);background:rgba(255,112,183,.15)}
.btn.main{border:0;background:linear-gradient(110deg,#ff5ca8,#c45cff);box-shadow:0 0 35px rgba(255,80,175,.3)}
.progress{position:absolute;bottom:2px;left:12%;right:12%;height:2px;background:#ffffff14;border-radius:4px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff73b7,#d66aff);transition:width .5s}

.gift{width:190px;height:155px;margin:15px auto 25px;position:relative;cursor:pointer;filter:drop-shadow(0 20px 35px rgba(255,70,170,.2))}
.gbox{position:absolute;left:16px;right:16px;bottom:0;height:102px;border-radius:12px;background:linear-gradient(135deg,#b83392,#ef5da8 55%,#8b48ca);border:1px solid #ffffff22}
.glid{position:absolute;left:4px;right:4px;top:30px;height:35px;border-radius:10px;background:linear-gradient(110deg,#ff77b8,#c95be5);z-index:3}
.ribbon{position:absolute;z-index:4;left:79px;top:2px;width:31px;height:135px;background:#ffd978;border-radius:6px}
.bow{position:absolute;z-index:5;left:60px;top:0;width:70px;height:40px}
.bow:before,.bow:after{content:"";position:absolute;width:40px;height:28px;border:8px solid #ffd978;border-radius:50%;top:0}
.bow:before{left:0;transform:rotate(30deg)}.bow:after{right:0;transform:rotate(-30deg)}
.open .glid{animation:openlid .9s forwards}.open .bow{animation:openbow .9s forwards}
@keyframes openlid{to{transform:translateY(-60px) rotate(-8deg);opacity:0}}
@keyframes openbow{to{transform:translateY(-70px) scale(.6);opacity:0}}

.cake{margin:18px auto 20px;width:180px;height:130px;position:relative}
.layer{position:absolute;left:10px;right:10px;border-radius:50px;background:linear-gradient(#ff9bc8,#b956a4);box-shadow:0 0 30px #ff62ad44}
.l1{bottom:4px;height:62px}.l2{bottom:50px;height:48px;left:24px;right:24px}
.candle{position:absolute;bottom:88px;width:7px;height:45px;background:#fff;left:50%;border-radius:4px}
.candle:after{content:"";position:absolute;left:50%;top:-17px;width:14px;height:20px;border-radius:50% 50% 45% 45%;background:#ffd86e;box-shadow:0 0 18px #ffd86e;transform:translateX(-50%)}
.candle.c2{margin-left:-25px}.candle.c3{margin-left:25px}

.photoFrame{width:min(310px,76vw);aspect-ratio:3/4;margin:0 auto 18px;padding:8px;border-radius:26px;background:linear-gradient(135deg,#ff8fc5,#ffd47b,#b967e8);box-shadow:0 25px 70px #000b}
.photoFrame img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:20px}
.polaroid{background:#151019;padding:10px 10px 16px;border-radius:18px;box-shadow:0 18px 50px #0009;transform:rotate(-2deg);margin:8px auto;width:min(320px,82vw)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.polaroid .caption{font-family:"Great Vibes";font-size:27px;color:#ffb9d7;padding-top:7px}

.card{background:linear-gradient(145deg,#ffffff0e,#ffffff05);border:1px solid #ffffff18;border-radius:28px;padding:28px 23px;box-shadow:0 25px 80px #0008;backdrop-filter:blur(14px);text-align:left}
.card .dear{font-family:"Great Vibes";font-size:37px;color:#ff9fc9;margin-bottom:15px}
.card p{font-size:14px;line-height:1.9;color:#ddd0db;margin:10px 0}
.signature{text-align:right;font-family:"Great Vibes";font-size:30px;color:#ff9fc9;margin-top:12px}

.memories{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:22px auto;max-width:360px}
.memory{background:#ffffff0b;border:1px solid #ffffff15;border-radius:20px;padding:8px;transform:rotate(var(--r));box-shadow:0 15px 35px #0007}
.memory img{width:100%;aspect-ratio:1/1.2;object-fit:cover;border-radius:14px;filter:saturate(.9)}
.memory span{display:block;padding:8px 4px 4px;font-family:"Great Vibes";font-size:22px;color:#ffc2dc}
.memory:nth-child(2){--r:2deg}.memory:nth-child(3){--r:1deg}.memory:nth-child(4){--r:-2deg}.memory:nth-child(5){--r:2deg;grid-column:1/3;width:48%;margin:auto}

.balloons{height:370px;position:relative;margin:5px auto}
.balloon{position:absolute;width:72px;height:92px;border-radius:50% 50% 47% 47%;background:radial-gradient(circle at 30% 25%,#fff8,transparent 15%),linear-gradient(145deg,#ff8bc5,#b85de0);box-shadow:0 0 28px #ff66b055;cursor:pointer;transition:.35s}
.balloon:after{content:"";position:absolute;width:1px;height:70px;background:#ffffff66;left:50%;top:90px}
.balloon.popped{transform:scale(1.8);opacity:0}
.b1{left:5%;top:50px}.b2{right:6%;top:25px;background:linear-gradient(145deg,#ffe07c,#ff9e63)}.b3{left:38%;top:145px;background:linear-gradient(145deg,#ff78b6,#bd62ed)}.b4{left:15%;bottom:25px;background:linear-gradient(145deg,#ff9fc8,#e65d9f)}.b5{right:16%;bottom:10px;background:linear-gradient(145deg,#ffd0e7,#bf70ef)}
.counter{font-size:13px;color:#bfaebb;letter-spacing:2px}

.finalHeart{font-size:90px;animation:pulse 1.5s ease-in-out infinite;filter:drop-shadow(0 0 30px #ff5ca8)}
@keyframes pulse{50%{transform:scale(1.12)}}
.conf{position:absolute;top:-20px;font-size:14px;animation:fall 3.5s linear forwards}
@keyframes fall{to{transform:translate3d(var(--x),110vh,0) rotate(720deg);opacity:0}}
.heart{position:absolute;font-size:22px;animation:rise 4s linear forwards}
@keyframes rise{to{transform:translateY(-110vh) rotate(20deg);opacity:0}}

@media(max-height:650px){.wrap{height:96svh}.photoFrame{width:210px}.balloons{height:290px}.balloon{transform:scale(.78)}.card{padding:18px}.sub{margin:10px auto 18px}}

/* Final positioning + local-photo reliability fixes */
.screen[data-n="3"] > .wrap > div:nth-child(2) .btn.main{
  transform:translateY(-12px);
}
.screen[data-n="3"] > .wrap > div:nth-child(2) .btn.main:hover{
  transform:translateY(-14px);
}
.photoFrame img,
.memory img{
  background:transparent;
}


/* Fit the birthday-photo and memories screens completely inside the viewport. */
.screen[data-n="3"] .wrap,
.screen[data-n="4"] .wrap{
  height:100%;
  min-height:0;
  justify-content:flex-start;
}

.screen[data-n="3"] > .wrap > div:nth-child(2){
  padding-top:18px;
}
.screen[data-n="3"] .photoFrame{
  width:min(245px,58vw);
  aspect-ratio:3/4;
  margin:0 auto 10px;
  padding:6px;
}
.screen[data-n="3"] h2{font-size:38px;line-height:1;margin:0 0 8px}
.screen[data-n="3"] .sub{font-size:12px;line-height:1.45;margin:8px auto 12px;max-width:340px}
.screen[data-n="3"] .btn.main{transform:none!important;padding:12px 22px}
.screen[data-n="3"] .btn.main:hover{transform:translateY(-2px)!important}

.screen[data-n="4"] > .wrap > div:nth-child(2){
  padding-top:12px;
}
.screen[data-n="4"] h2{font-size:31px;line-height:1.02;margin-bottom:10px}
.screen[data-n="4"] .memories{
  width:min(330px,78vw);
  gap:7px;
  margin:8px auto 10px;
}
.screen[data-n="4"] .memory{padding:5px;border-radius:14px}
.screen[data-n="4"] .memory img{aspect-ratio:1/1.02;border-radius:10px}
.screen[data-n="4"] .memory span{font-size:17px;padding:4px 2px 2px;line-height:1}
.screen[data-n="4"] .memory:nth-child(5){width:48%;}
.screen[data-n="4"] .btn.main{padding:11px 20px;margin-top:2px}

@media(max-height:760px){
  .screen[data-n="3"] > .wrap > div:nth-child(2){padding-top:8px}
  .screen[data-n="3"] .photoFrame{width:min(205px,52vw);margin-bottom:7px}
  .screen[data-n="3"] h2{font-size:32px;margin-bottom:5px}
  .screen[data-n="3"] .sub{font-size:11px;margin:5px auto 8px}
  .screen[data-n="4"] > .wrap > div:nth-child(2){padding-top:5px}
  .screen[data-n="4"] h2{font-size:27px;margin-bottom:6px}
  .screen[data-n="4"] .memories{gap:5px;margin:5px auto 7px}
  .screen[data-n="4"] .memory span{font-size:15px}
  .screen[data-n="4"] .btn.main{padding:10px 18px;font-size:12px}
}