@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}
}

/* -------------------- Open Gift experience -------------------- */
.gift-entry{margin-top:8px}
.gift-scene{width:250px;height:220px;margin:12px auto 6px;position:relative;cursor:pointer;filter:drop-shadow(0 25px 45px rgba(255,74,171,.28));}
.gift-glow{position:absolute;width:220px;height:120px;left:15px;top:70px;border-radius:50%;background:radial-gradient(ellipse,#b51e3f3d,transparent 70%);filter:blur(12px)}
.big-box{position:absolute;left:25px;right:25px;bottom:18px;height:125px;border-radius:15px;background:linear-gradient(135deg,#171515,#292222 52%,#121010);border:1px solid #d8c3a555;box-shadow:inset 0 0 35px #fff1}
.big-lid{position:absolute;z-index:4;left:14px;right:14px;top:68px;height:45px;border-radius:13px;background:linear-gradient(110deg,#7b1f31,#b3314b,#641724);box-shadow:0 8px 25px #0005;transform-origin:center bottom}
.big-ribbon{position:absolute;z-index:5;left:108px;top:64px;width:35px;height:135px;border-radius:7px;background:linear-gradient(#ead9ad,#cdb782)}
.big-bow{position:absolute;z-index:7;left:82px;top:30px;width:88px;height:55px}
.big-bow:before,.big-bow:after{content:"";position:absolute;width:54px;height:38px;border:10px solid #dfc98e;border-radius:55% 45% 55% 45%;top:0}
.big-bow:before{left:0;transform:rotate(28deg)}.big-bow:after{right:0;transform:rotate(-28deg)}
.gift-spark{position:absolute;z-index:8;color:#e4c77f;font-size:24px;animation:sparkFloat 1.7s ease-in-out infinite}
.s1{left:16px;top:50px}.s2{right:10px;top:92px;animation-delay:.3s}.s3{right:25px;top:34px;animation-delay:.7s}
@keyframes sparkFloat{50%{transform:translateY(-10px) scale(1.15);opacity:.65}}
.gift-opened .big-lid{animation:bigLidOpen .8s forwards}.gift-opened .big-bow{animation:bigBowOpen .8s forwards}.gift-opened .gift-spark{animation:fadeSpark .8s forwards}
@keyframes bigLidOpen{to{transform:translateY(-65px) rotate(-8deg);opacity:0}}
@keyframes bigBowOpen{to{transform:translateY(-70px) scale(.7);opacity:0}}
@keyframes fadeSpark{to{opacity:0;transform:scale(1.5)}}
.gift-title{font-size:32px!important}

.closed-card-wrap{width:min(320px,82vw);height:225px;margin:4px auto 10px;perspective:900px;cursor:pointer}
.closed-card{height:100%;position:relative;border-radius:18px;background:linear-gradient(145deg,#ead9b4,#f5e7c9 48%,#d9bd91);box-shadow:0 28px 65px #000a, inset 0 0 0 1px #fff8;overflow:hidden;transform-style:preserve-3d;transition:.8s}
.closed-card:before{content:"";position:absolute;inset:10px;border:1px dashed #8d536a66;border-radius:13px}
.envelope-flap{position:absolute;left:0;right:0;top:0;height:125px;background:linear-gradient(145deg,#f1dfbc,#dcc398);clip-path:polygon(0 0,100% 0,50% 72%);z-index:3;transform-origin:top center;transition:.85s;filter:drop-shadow(0 6px 6px #7b345533)}
.seal{position:absolute;z-index:5;left:50%;top:95px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#9b2941;color:white;font-size:21px;box-shadow:0 6px 18px #9d3d6855;transition:.5s}
.closed-card-title{position:absolute;z-index:2;left:0;right:0;top:139px;text-align:center;font-family:"Great Vibes";font-size:37px;color:#4c3028}
.closed-card-hint{position:absolute;z-index:2;left:0;right:0;bottom:22px;text-align:center;color:#684a3e;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.card-opening .envelope-flap{transform:rotateX(165deg)}.card-opening .seal{opacity:0;transform:translateX(-50%) scale(.5)}

.pouch-wrap{width:min(980px,96vw);height:min(760px,94svh)}
.pouch-page{position:relative;width:100%;height:100%;display:grid;grid-template-columns:180px 1fr 180px;grid-template-rows:1fr auto;gap:12px;align-items:center;padding:18px 12px 28px}
.letter-card{grid-column:2;grid-row:1;align-self:center;justify-self:center;width:min(420px,42vw);min-height:310px;padding:26px 30px;background:linear-gradient(145deg,#f2e4c4,#e7d2a7 52%,#f7e8c9);color:#49352c;border-radius:8px;box-shadow:0 25px 65px #000b,0 0 0 2px #fff3;transform:rotate(-1.2deg);position:relative}
.letter-card:before{content:"";position:absolute;inset:10px;border:1px solid #a5576b44;pointer-events:none}.letter-corner{position:absolute;right:17px;top:13px;color:#8e273e;font-size:22px}.letter-title{font-family:"Great Vibes";font-size:38px;color:#6f2f2d;margin-bottom:9px}.letter-card p{font-size:12.5px;line-height:1.75;margin:7px 0}.letter-sign{font-family:"Great Vibes";font-size:28px;text-align:right;color:#7d2838;margin-top:8px}
.pouch-grid{grid-column:1/4;grid-row:1;position:absolute;inset:12px;pointer-events:none}
.pouch{position:absolute;width:105px;height:110px;border:0;background:linear-gradient(160deg,#d8bf8b,#b28e5c);border-radius:28px 28px 36px 36px 45%;box-shadow:0 15px 35px #0009,inset 0 0 20px #fff2;cursor:pointer;pointer-events:auto;transition:.3s;color:#fff;font-family:Poppins}
.pouch:hover{transform:translateY(-5px) rotate(1deg) scale(1.03)}
.pouch:after{content:"";position:absolute;left:12px;right:12px;top:30px;height:1px;background:#fff5}
.pouch-knot{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:54px;height:22px;border:6px solid #ffd16f;border-radius:50%;z-index:2}
.pouch-knot:after{content:"";position:absolute;left:21px;top:-7px;width:6px;height:25px;border-radius:4px;background:#ffd16f}
.pouch-number{position:absolute;z-index:3;right:7px;top:9px;width:29px;height:35px;background:#f2e4c8;color:#59382d;display:grid;place-items:center;border-radius:3px;font-family:"DM Serif Display";font-size:18px;transform:rotate(7deg);box-shadow:0 4px 8px #0003}
.pouch-status{position:absolute;bottom:12px;left:0;right:0;font-size:9px;letter-spacing:1.5px;color:#ffeef6;font-weight:600}
.p1{left:3%;top:5%;transform:rotate(-6deg);background:linear-gradient(160deg,#c7a66f,#9f7849)}
.p2{right:3%;top:5%;transform:rotate(6deg);background:linear-gradient(160deg,#e2cf9e,#b99863)}
.p3{left:1%;bottom:10%;transform:rotate(5deg);background:linear-gradient(160deg,#c2a36f,#8f6d48)}
.p4{right:1%;bottom:10%;transform:rotate(-5deg);background:linear-gradient(160deg,#d7b986,#9e6d4c)}
.p5{left:50%;bottom:1%;transform:translateX(-50%) rotate(2deg);background:linear-gradient(160deg,#ead7a8,#ad8659)}
.pouch.opened{filter:grayscale(.15) brightness(.7);opacity:.62;cursor:default}.pouch.opened:before{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:#fff;z-index:4;text-shadow:0 0 15px #fff}
.pouch-footer{grid-column:1/4;grid-row:2;text-align:center;display:flex;flex-direction:column;gap:3px;color:#c9b6c5;font-size:11px;letter-spacing:.4px}.pouch-footer span:first-child{color:#ff9ec8;font-weight:600}
#turnPageBtn{grid-column:1/4;grid-row:2;justify-self:center;margin-top:44px;z-index:10}.hidden{display:none!important}

/* Modal is attached to screen 10, but starts hidden and is shown when a pouch is clicked. */
.pouch-modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#07020bd9;backdrop-filter:blur(8px);z-index:20;opacity:0;visibility:hidden;pointer-events:none;transition:.35s}.pouch-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.tiny-note{position:relative;width:min(390px,84vw);min-height:280px;padding:40px 28px 26px;background:linear-gradient(145deg,#f4e4c1,#ead2a0 55%,#f7e9c9);color:#4e372d;border-radius:10px;box-shadow:0 30px 90px #000d,0 0 0 2px #fff3;transform:rotate(-1.5deg) scale(.94);transition:.4s}.pouch-modal.show .tiny-note{transform:rotate(-1.5deg) scale(1)}
.tiny-note:before{content:"";position:absolute;inset:10px;border:1px dashed #a6536a77;border-radius:7px}.tiny-note-flower{position:absolute;right:18px;top:13px;color:#8f293f;font-size:22px}.tiny-note-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#725344;margin-bottom:22px}.tiny-note-text{font-family:"Great Vibes";font-size:31px;line-height:1.45;color:#5f352e;min-height:125px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;z-index:2}.tiny-note-heart{font-size:20px;text-align:center;color:#922b43;margin:7px}.tiny-note-btn{padding:10px 18px;font-size:12px}
.note-in{animation:noteIn .45s ease}.modal-placeholder{text-align:center;opacity:.25}.modal-placeholder>*{pointer-events:none}
@keyframes noteIn{from{opacity:0;transform:translateY(14px) rotate(-4deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(-1.5deg) scale(1)}}

.final-letter-wrap{width:min(640px,94vw)}.final-letter{width:min(560px,90vw);margin:0 auto 18px;padding:32px 35px;background:linear-gradient(145deg,#f1e0ba,#e2c997 52%,#f7e8c8);color:#4f382d;border-radius:10px;box-shadow:0 28px 70px #000b,0 0 0 2px #fff3;position:relative;transform:rotate(-.7deg)}.final-letter:before{content:"";position:absolute;inset:10px;border:1px solid #9f536a55}.final-letter-flower{position:absolute;right:20px;top:14px;color:#8e2940;font-size:23px}.final-letter-title{font-family:"Great Vibes";font-size:43px;color:#6c302e;margin-bottom:14px}.final-letter p{font-size:13px;line-height:1.8;margin:10px 0}.final-letter-list{font-size:13px;line-height:1.8;color:#65362f;margin-top:12px}.ending-wrap{justify-content:center}.bunny-gif{width:min(240px,52vw);height:min(240px,52vw);object-fit:contain;border-radius:18px;filter:drop-shadow(0 18px 35px #ff5ca855)}.ending-script{font-size:55px}.ending-name{font-size:60px;color:#ffb8d8}.ending-card{width:min(400px,88vw);margin:10px auto 0;text-align:center;padding:18px}

@media(max-width:900px){.pouch-page{grid-template-columns:135px 1fr 135px}.pouch{width:88px;height:94px}.letter-card{width:min(370px,48vw);padding:21px 22px}.letter-card p{font-size:11px}}
@media(max-height:760px){.gift-scene{transform:scale(.82);margin:-8px auto -18px}.closed-card-wrap{height:190px}.pouch-page{padding-top:8px}.letter-card{min-height:275px;padding:19px 22px}.letter-card p{font-size:10.5px;line-height:1.55}.letter-title{font-size:32px}.pouch{width:78px;height:84px}.pouch-number{width:24px;height:29px;font-size:15px}.pouch-status{font-size:7px;bottom:9px}.pouch-knot{transform:translateX(-50%) scale(.8);top:4px}.pouch-footer{font-size:9px}.final-letter{padding:23px 27px;margin-bottom:10px}.final-letter p,.final-letter-list{font-size:11px;line-height:1.55}.final-letter-title{font-size:36px}.ending-script{font-size:45px}.ending-name{font-size:48px}.bunny-gif{width:180px;height:180px}}
@media(max-width:650px){.pouch-page{display:block;padding:36px 6px 50px;overflow:visible}.letter-card{width:min(350px,88vw);margin:0 auto 8px;min-height:260px}.pouch-grid{position:relative;inset:auto;height:175px;width:100%;margin-top:4px}.p1{left:2%;top:0}.p2{right:2%;top:0}.p3{left:2%;bottom:0}.p4{right:2%;bottom:0}.p5{bottom:10px}.pouch-footer{position:relative;margin-top:8px}.pouch-page #turnPageBtn{margin:8px auto 0}.screen[data-n="9"] .top{top:5px}.final-letter{max-height:63svh;overflow:auto}}

/* Reliable gift-open controls */
.gift-scene:focus{outline:2px solid #ff9ec8;outline-offset:8px;border-radius:28px}
.gift-open-btn{margin:2px auto 0;position:relative;z-index:30;cursor:pointer}
.gift-open-btn:disabled{opacity:.7;cursor:default}
.gift-opening .gift-glow{animation:giftPulse .7s ease}
@keyframes giftPulse{50%{transform:scale(1.12);opacity:1}}

/* -------------------- Soft feminine palette refresh --------------------
   Keeps the dark night background, but gives the birthday card and balloons
   a softer blush / lavender / peach / champagne palette.
*/
.screen[data-n="5"] .card{
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.75), transparent 22%),
    linear-gradient(145deg, #fff0f6 0%, #f8ddea 42%, #eadcf6 72%, #f9e8d8 100%);
  border:1px solid rgba(255,214,232,.72);
  box-shadow:0 28px 80px rgba(255,115,183,.18), 0 8px 30px rgba(126,74,120,.18), inset 0 0 35px rgba(255,255,255,.28);
  color:#593c50;
  position:relative;
  overflow:hidden;
}
.screen[data-n="5"] .card:before{
  content:"✿  ♡  ✦  ♡  ✿";
  position:absolute;
  top:10px;
  right:18px;
  color:#d58aad;
  font-size:14px;
  letter-spacing:7px;
  opacity:.72;
}
.screen[data-n="5"] .card:after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(181,112,148,.24);
  border-radius:20px;
  pointer-events:none;
}
.screen[data-n="5"] .card .dear{
  color:#b95782;
  text-shadow:0 2px 10px rgba(185,87,130,.12);
}
.screen[data-n="5"] .card p{
  color:#64485b;
}
.screen[data-n="5"] .signature{
  color:#a94f78 !important;
}

/* If the older balloon component is used anywhere, give every balloon a
   coordinated pastel shade instead of the previous heavy purple/red look. */
.balloon{
  background:
    radial-gradient(circle at 29% 22%, rgba(255,255,255,.85), transparent 16%),
    linear-gradient(145deg,#ffd7e7 0%,#f3a9ca 52%,#d99bcf 100%);
  box-shadow:0 0 30px rgba(255,145,194,.28), inset -8px -12px 18px rgba(145,74,127,.10);
  border:1px solid rgba(255,235,245,.32);
}
.b1{background:linear-gradient(145deg,#ffd8e8,#f2a8c9 58%,#d89bca)}
.b2{background:linear-gradient(145deg,#fff0c7,#ffd09d 55%,#ef9eb9)}
.b3{background:linear-gradient(145deg,#eadcff,#c9b1ed 55%,#e2a9ce)}
.b4{background:linear-gradient(145deg,#ffe0e9,#f5b7c9 55%,#dba5d2)}
.b5{background:linear-gradient(145deg,#dff5f0,#b9dfe0 55%,#c9b8e8)}
.balloon:after{background:rgba(255,244,249,.55)}

/* Softer palette for the small birthday gift on the opening screen too. */
.screen[data-n="1"] .gift .gbox{
  background:linear-gradient(135deg,#e8a5c6,#f6b8cf 48%,#cdb0e8);
  border-color:rgba(255,240,248,.45);
}
.screen[data-n="1"] .gift .glid{
  background:linear-gradient(110deg,#ffd4e4,#e9b8df 52%,#c9b9ee);
}
.screen[data-n="1"] .gift .ribbon{background:linear-gradient(#fff0cf,#f3cfdf)!important}


/* ================= PASTEL GIRL-THEME — CARD + GIFT ================= */
:root{
  --girl-rose:#e88cae;
  --girl-pink:#f5b6ca;
  --girl-blush:#ffe4ed;
  --girl-lav:#c9b8e8;
  --girl-peach:#f7c9ad;
  --girl-cream:#fff7ef;
  --girl-ink:#6b4a57;
}

/* Make the gift scene feel like a soft birthday table instead of a black box. */
.screen[data-n="7"] .wrap{
  background:
    radial-gradient(circle at 50% 25%,rgba(255,225,235,.52),transparent 36%),
    radial-gradient(circle at 12% 80%,rgba(244,190,211,.28),transparent 30%),
    radial-gradient(circle at 90% 75%,rgba(205,191,232,.26),transparent 28%);
  border-radius:34px;
}
.screen[data-n="7"] .gift-scene{filter:drop-shadow(0 25px 42px rgba(181,105,138,.22));}
.screen[data-n="7"] .gift-glow{
  background:radial-gradient(ellipse,rgba(255,170,198,.58),transparent 68%);
}
.screen[data-n="7"] .big-box{
  background:linear-gradient(145deg,#f9d5e1 0%,#efafc7 48%,#d6b9e7 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 0 35px rgba(255,255,255,.42),0 18px 40px rgba(137,82,112,.16);
}
.screen[data-n="7"] .big-lid{
  background:linear-gradient(110deg,#ffdce7 0%,#f4b5cb 48%,#d7bce9 100%);
  box-shadow:0 8px 25px rgba(120,70,98,.16),inset 0 0 14px rgba(255,255,255,.35);
}
.screen[data-n="7"] .big-ribbon{
  background:linear-gradient(#fff1d7,#f5c7d6 55%,#d9c3ed)!important;
}
.screen[data-n="7"] .big-bow:before,.screen[data-n="7"] .big-bow:after{
  border-color:#f2b4ca;
  filter:drop-shadow(0 3px 5px rgba(143,74,108,.14));
}
.screen[data-n="7"] .gift-spark{color:#d884a6}
.screen[data-n="7"] .gift-title{color:#694b59!important;text-shadow:0 2px 18px rgba(255,255,255,.55)}
.screen[data-n="7"] .gift-title .script{color:#d46f99}

/* Closed card: pink stationery, ribbon, soft lavender shadow. */
.screen[data-n="8"] .wrap{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,229,239,.45),transparent 38%),
    radial-gradient(circle at 15% 85%,rgba(222,206,240,.3),transparent 30%);
  border-radius:34px;
}
.screen[data-n="8"] .closed-card-wrap{filter:drop-shadow(0 25px 50px rgba(139,84,115,.16));}
.screen[data-n="8"] .closed-card{
  background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.82),transparent 24%),
    linear-gradient(145deg,#fff3f6 0%,#ffdce7 45%,#e7d8f0 100%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 28px 65px rgba(112,71,93,.18),inset 0 0 35px rgba(255,255,255,.42);
}
.screen[data-n="8"] .closed-card:before{border:1px dashed rgba(201,126,157,.48)}
.screen[data-n="8"] .envelope-flap{
  background:linear-gradient(145deg,#fff4f7,#f7c8d9 58%,#dccce9);
}
.screen[data-n="8"] .seal{
  background:linear-gradient(145deg,#ef91b3,#d776a1);
  box-shadow:0 6px 18px rgba(205,105,143,.28);
}
.screen[data-n="8"] .closed-card-title{color:#80506a;text-shadow:0 2px 8px rgba(255,255,255,.8)}
.screen[data-n="8"] .closed-card-hint{color:#956579}

/* Central main letter: warm cream/pink paper with floral edge details. */
.screen[data-n="9"] .pouch-wrap{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,225,235,.48),transparent 52%),
    radial-gradient(circle at 8% 10%,rgba(244,191,211,.26),transparent 28%),
    radial-gradient(circle at 94% 92%,rgba(211,196,235,.22),transparent 30%);
  border-radius:36px;
}
.screen[data-n="9"] .pouch-page{padding:14px 18px 26px}
.screen[data-n="9"] .letter-card{
  background:
    radial-gradient(circle at 14% 12%,rgba(255,255,255,.88),transparent 18%),
    radial-gradient(circle at 88% 86%,rgba(251,207,220,.34),transparent 23%),
    linear-gradient(145deg,#fff8ef 0%,#ffe9df 48%,#f8e2e9 75%,#eee1f1 100%);
  color:#664d58;
  border:1px solid rgba(219,157,178,.5);
  border-radius:12px;
  box-shadow:0 28px 70px rgba(111,75,90,.18),0 0 0 2px rgba(255,255,255,.52),inset 0 0 28px rgba(255,255,255,.38);
  transform:rotate(-.8deg);
}
.screen[data-n="9"] .letter-card:before{
  inset:12px;
  border:1px solid rgba(209,132,160,.32);
  border-radius:9px;
}
.screen[data-n="9"] .letter-card:after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 5% 6%,rgba(237,139,172,.35) 0 3px,transparent 4px),
    radial-gradient(circle at 9% 10%,rgba(209,172,225,.36) 0 4px,transparent 5px),
    radial-gradient(circle at 95% 7%,rgba(245,171,191,.38) 0 4px,transparent 5px),
    radial-gradient(circle at 92% 93%,rgba(206,180,225,.38) 0 4px,transparent 5px),
    radial-gradient(circle at 7% 92%,rgba(245,187,203,.32) 0 4px,transparent 5px);
}
.screen[data-n="9"] .letter-title{color:#b35e7f}
.screen[data-n="9"] .letter-card p{color:#715665}
.screen[data-n="9"] .letter-sign{color:#b15e7f}
.screen[data-n="9"] .letter-corner{color:#d77c9e}

.letter-floral-corner,.final-floral-corner{
  position:absolute;z-index:5;pointer-events:none;font-size:25px;line-height:1;
  filter:drop-shadow(0 3px 7px rgba(170,94,130,.16));
}
.letter-floral-corner.top-left{left:17px;top:15px;color:#e39ab4;transform:rotate(-18deg)}
.letter-floral-corner.top-right{right:18px;top:14px;color:#b9a1d9;transform:rotate(17deg)}
.letter-floral-corner.bottom-left{left:18px;bottom:15px;color:#e6a98c;transform:rotate(14deg)}
.letter-floral-corner.bottom-right{right:18px;bottom:14px;color:#d49bbd;transform:rotate(-12deg)}
.letter-butterfly{position:absolute;left:29px;top:52px;font-size:15px;opacity:.55;transform:rotate(-12deg);z-index:5;pointer-events:none}

/* Pouches now match the paper palette rather than the old brown/black look. */
.screen[data-n="9"] .pouch{
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 18px 36px rgba(103,70,91,.17),inset 0 0 22px rgba(255,255,255,.26);
}
.screen[data-n="9"] .p1{background:linear-gradient(160deg,#f8b5ca,#e58fb2)}
.screen[data-n="9"] .p2{background:linear-gradient(160deg,#d9c7ef,#b7a2dc)}
.screen[data-n="9"] .p3{background:linear-gradient(160deg,#f8c3a9,#eaa17f)}
.screen[data-n="9"] .p4{background:linear-gradient(160deg,#cfe8df,#9ecfc5)}
.screen[data-n="9"] .p5{background:linear-gradient(160deg,#ead3ee,#c4a6dc)}
.screen[data-n="9"] .pouch-knot{border-color:#fff0d8}.screen[data-n="9"] .pouch-knot:after{background:#fff0d8}
.screen[data-n="9"] .pouch-number{background:#fff4e8;color:#77505f;box-shadow:0 4px 8px rgba(112,74,93,.14)}
.screen[data-n="9"] .pouch-status{color:#fffafc;text-shadow:0 1px 5px rgba(88,55,76,.25)}
.screen[data-n="9"] .pouch-footer{color:#8f7080}.screen[data-n="9"] .pouch-footer span:first-child{color:#c46d91}
.screen[data-n="9"] #turnPageBtn{background:linear-gradient(110deg,#ee8faf,#c7a6e3);box-shadow:0 0 32px rgba(221,125,169,.22)}

/* Tiny notes: handmade stationery style. */
.screen[data-n="10"] .tiny-note{
  background:
    radial-gradient(circle at 12% 10%,rgba(255,255,255,.75),transparent 20%),
    linear-gradient(145deg,#fff5ea,#ffe1e3 54%,#eee0f0);
  color:#6b4d59;
  border:1px solid rgba(218,151,178,.5);
  box-shadow:0 30px 90px rgba(80,48,70,.25),inset 0 0 30px rgba(255,255,255,.4);
}
.screen[data-n="10"] .tiny-note:before{border-color:rgba(204,123,153,.48)}
.screen[data-n="10"] .tiny-note-label{color:#9b6b7d}.screen[data-n="10"] .tiny-note-text{color:#7a4e62}.screen[data-n="10"] .tiny-note-heart{color:#d2769a}

/* Final page gets the same stationery language and floral corners. */
.screen[data-n="11"] .final-letter{
  background:
    radial-gradient(circle at 12% 9%,rgba(255,255,255,.82),transparent 20%),
    linear-gradient(145deg,#fff7ef,#ffe6df 48%,#f2e2f0 100%);
  color:#684e59;border:1px solid rgba(216,147,172,.5);
  box-shadow:0 28px 70px rgba(98,66,85,.2),inset 0 0 28px rgba(255,255,255,.4);
}
.screen[data-n="11"] .final-letter:before{border-color:rgba(201,124,154,.35)}
.screen[data-n="11"] .final-letter-title{color:#b25d80}.screen[data-n="11"] .final-letter p{color:#715663}.screen[data-n="11"] .final-letter-list{color:#81536a}.screen[data-n="11"] .letter-sign{color:#b25d80}
.final-floral-corner.top-left{left:20px;top:18px;color:#e3a0b7}.final-floral-corner.top-right{right:20px;top:18px;color:#baa2d7}.final-floral-corner.bottom-left{left:20px;bottom:18px;color:#e4b094}.final-floral-corner.bottom-right{right:20px;bottom:18px;color:#d39bbc}

/* Soft party-like background on the gift/card section, inspired by the reference. */
.screen[data-n="7"]:before,.screen[data-n="8"]:before,.screen[data-n="9"]:before,.screen[data-n="11"]:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.65;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,192,211,.18) 0 2px,transparent 3px),
    radial-gradient(circle at 88% 14%,rgba(220,196,239,.2) 0 2px,transparent 3px),
    radial-gradient(circle at 14% 84%,rgba(248,203,176,.18) 0 2px,transparent 3px),
    radial-gradient(circle at 91% 83%,rgba(255,207,224,.18) 0 2px,transparent 3px);
}

/* ================= WARM BLUSH BACKGROUND =================
   Background only — the approved card colours are intentionally untouched.
*/
html, body {
  background:#241217 !important;
}
#app {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,214,190,.20), transparent 30%),
    radial-gradient(circle at 8% 82%, rgba(220,133,132,.18), transparent 32%),
    radial-gradient(circle at 92% 72%, rgba(244,184,154,.14), transparent 30%),
    linear-gradient(145deg, #321820 0%, #4a2029 42%, #2b151c 72%, #170b10 100%) !important;
}
/* Keep overlays warm too, so the site never falls back to the old purple cast. */
.pouch-modal {
  background:rgba(48,20,27,.88) !important;
}
.star {
  background:#ffe9df;
}

/* Cute character stickers chosen from the supplied 1–16 reference sheet */
.letter-card{overflow:visible}
.letter-edge-gifs{position:absolute;inset:0;pointer-events:none;z-index:4}
.letter-edge-gif{
  position:absolute;
  z-index:20;
  object-fit:contain;
  user-select:none;
  filter:drop-shadow(0 7px 9px rgba(112,48,68,.14));
}
.letter-edge-gif.sticker{animation:stickerFloat 3.8s ease-in-out infinite}
.sticker13{left:-54px;top:-38px;width:102px;height:88px;transform:rotate(-5deg);animation-delay:-.7s!important}
.sticker16{right:-55px;top:-42px;width:92px;height:108px;transform:rotate(5deg);animation-delay:-1.4s!important}
.sticker7{left:-52px;top:54%;width:88px;height:94px;transform:rotate(-7deg);animation-delay:-2.2s!important}
.sticker11{right:-53px;top:57%;width:94px;height:104px;transform:rotate(7deg);animation-delay:-3s!important}
@keyframes stickerFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(max-width:900px){
  .sticker13{left:-40px;top:-31px;width:82px;height:72px}
  .sticker16{right:-41px;top:-34px;width:74px;height:88px}
  .sticker7{left:-39px;top:55%;width:72px;height:78px}
  .sticker11{right:-40px;top:58%;width:76px;height:84px}
}
@media(max-width:650px){
  .sticker13{left:-26px;top:-24px;width:65px;height:58px}
  .sticker16{right:-27px;top:-26px;width:59px;height:70px}
  .sticker7{left:-26px;top:55%;width:58px;height:63px}
  .sticker11{right:-27px;top:58%;width:61px;height:68px}
}

/* Matching character stickers on the final letter */
.final-letter{overflow:visible}
.final-gif-decor{position:absolute;inset:0;pointer-events:none;z-index:3}
.final-edge-gif{position:absolute;z-index:20;object-fit:contain;filter:drop-shadow(0 7px 9px rgba(112,48,68,.14))}
.final-edge-gif.sticker{animation:stickerFloat 3.8s ease-in-out infinite}
.final-letter .fg1{left:-57px;top:-25px;width:96px;height:78px;transform:rotate(-7deg);animation-delay:-.4s!important}
.final-letter .fg2{right:-55px;top:-31px;width:86px;height:100px;transform:rotate(7deg);animation-delay:-1.3s!important}
.final-letter .fg3{left:-54px;top:55%;width:82px;height:88px;transform:rotate(-7deg);animation-delay:-2.1s!important}
.final-letter .fg4{right:-54px;top:58%;width:88px;height:98px;transform:rotate(7deg);animation-delay:-2.9s!important}
@media(max-width:650px){
  .final-letter .fg1{left:-28px;top:-21px;width:65px;height:55px}
  .final-letter .fg2{right:-28px;top:-24px;width:58px;height:68px}
  .final-letter .fg3{left:-27px;top:55%;width:57px;height:62px}
  .final-letter .fg4{right:-27px;top:58%;width:62px;height:69px}
}