@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--pink:#f27ca5;--pink2:#ffb8ce;--deep:#9e315e;--ink:#492638;--muted:#926b7b;--pale:#fff0f5;--white:#fffdfd;--line:#f4d2df;--shadow:0 22px 60px rgba(151,47,87,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at top,#fff 0,#fff5f8 43%,#ffedf3 100%);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;min-height:100vh}
button,a{font:inherit}button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #c8487b;outline-offset:3px}
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:#f9d9e4;z-index:20}.progress span{display:block;height:100%;width:14.285%;background:linear-gradient(90deg,var(--pink),var(--deep));transition:width .4s}
.topbar{width:min(1100px,calc(100% - 36px));margin:auto;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #f4dbe4}
.wordmark{color:var(--deep);font-weight:700;letter-spacing:.02em;text-decoration:none;font-size:1rem}.top-note{font-size:.78rem;color:var(--muted)}.sound-toggle{border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 12px;color:var(--deep);font-size:.78rem}
main{width:min(1000px,calc(100% - 36px));margin:auto;min-height:calc(100vh - 135px)}
.page{display:none;min-height:calc(100vh - 145px);padding:clamp(32px,6vw,72px) 0 40px;animation:enter .42s ease both}.page.active{display:block}.page[hidden]{display:none!important}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
# 【Welcome】{text-align:center}
# 【welcome】{text-align:center;position:relative;overflow:hidden}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.19em;color:var(--deep);text-align:center;margin-bottom:16px}
h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;letter-spacing:-.04em;color:#612b43}
h1{font-size:clamp(3.4rem,11vw,7.1rem);line-height:.95;margin:0 auto 20px}h1 span,h2 span{color:var(--pink)}
h2{font-size:clamp(2.35rem,6.5vw,4.5rem);line-height:1.05;text-align:center;margin:0 0 17px}
.hero-sub{font-size:clamp(1rem,2.7vw,1.25rem);line-height:1.7;margin:0 auto;max-width:600px}.muted{color:var(--muted)}.centered{text-align:center}.micro{font-size:.75rem;color:#a78492;margin-top:16px}
.hero-illustration{display:flex;justify-content:center;align-items:center;gap:clamp(10px,5vw,42px);font-size:clamp(2.2rem,7vw,4rem);margin:26px auto 16px}.big-heart{font-size:clamp(4rem,13vw,7rem);filter:drop-shadow(0 12px 15px #f27ca542);animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(4deg)}}
.hero-orbit{position:absolute;color:#ef9cba;font-size:2rem;opacity:.65}.orbit-one{left:8%;top:22%}.orbit-two{right:10%;top:37%}
.primary,.ghost{border-radius:999px;padding:13px 21px;font-weight:700;border:1px solid transparent;transition:transform .18s,box-shadow .18s,background .18s}.primary{background:linear-gradient(135deg,#f48ab0,#df5f91);color:#fff;box-shadow:0 9px 22px #e66e9b35}.primary:hover{transform:translateY(-2px);box-shadow:0 13px 26px #e66e9b42}.primary span{margin-left:8px}.ghost{background:#fff;color:var(--deep);border-color:var(--line)}.ghost:hover{background:var(--pale)}
.next{margin-top:22px}.section-head{text-align:center;margin-bottom:26px}.section-head p,.section-lead{max-width:600px;margin:0 auto;text-align:center;line-height:1.7;color:var(--muted)}
.memory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.memory-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:var(--shadow);overflow:hidden}.photo-frame{position:relative;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:linear-gradient(135deg,#ffe6ef,#fff8fb)}.photo-frame img{width:100%;height:100%;object-fit:cover;object-position: center 35%;}.photo-placeholder[hidden]{display:none!important}.photo-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#a04b70;text-align:center;padding:12px;background:repeating-linear-gradient(135deg,#fff3f7,#fff3f7 10px,#ffebf2 10px,#ffebf2 20px)}.photo-placeholder span{font-size:2rem}.photo-placeholder b{font-size:.92rem}.photo-placeholder small{font-size:.72rem;color:#a77c8d}.memory-copy{padding:14px 5px 6px}.memory-tag{font-size:.59rem;font-weight:700;letter-spacing:.13em;color:#d56a93}.memory-copy h3{font-family:'Playfair Display',Georgia,serif;font-size:1.25rem;margin:7px 0}.memory-copy p{font-size:.86rem;line-height:1.55;color:var(--muted);margin:0}
.page-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}.page-actions .primary,.page-actions .ghost{font-size:.9rem}
# 【cake】{text-align:center}
.cake-stage{position:relative;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:20px auto 5px;max-width:430px}.cake-glow{position:absolute;width:230px;height:190px;border-radius:50%;background:#ffd8e6;filter:blur(35px);opacity:.7}.candles{position:relative;z-index:1;font-size:1.7rem;letter-spacing:8px;min-height:42px}.cake-button{position:relative;z-index:1;background:transparent;border:0;display:flex;flex-direction:column;align-items:center;color:var(--deep)}.cake-emoji{font-size:clamp(6rem,22vw,9rem);filter:drop-shadow(0 14px 13px #c85c841b);transition:transform .3s}.cake-button:hover .cake-emoji{transform:translateY(-5px) rotate(-2deg)}.cake-tap{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:6px}.feedback{min-height:28px;text-align:center;color:var(--deep);font-weight:600;line-height:1.65;margin:16px auto;max-width:560px}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;font-style:normal;animation:burst 1.5s ease-out forwards;font-size:1.25rem}@keyframes burst{0%{transform:translate(0,20px) scale(.4);opacity:0}20%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(220deg) scale(1);opacity:0}}
.game-card{max-width:470px;margin:25px auto 0;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}.game-status{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.12em;color:var(--muted)}.game-status strong{font-size:.85rem;color:var(--deep);letter-spacing:0}.puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px auto;max-width:310px}.tile{aspect-ratio:1;border:1px solid #f4cfdd;border-radius:16px;background:#fff6f9;color:#d65f8d;font-size:clamp(1.6rem,6vw,2.5rem);transition:transform .15s,background .2s;box-shadow:inset 0 -3px 0 #f8e3eb}.tile:hover{transform:translateY(-2px)}.tile.found{background:linear-gradient(145deg,#ffe0eb,#fff2f7);border-color:#f2a5c0;animation:pop .24s ease}.tile:disabled{cursor:default}@keyframes pop{50%{transform:scale(1.08)}}.game-track{height:6px;background:#f8e3eb;border-radius:9px;overflow:hidden}.game-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#f7a3c0,#d9568c);transition:width .25s}.text-button{display:block;margin:12px auto 0;border:0;background:transparent;color:var(--deep);text-decoration:underline;text-underline-offset:3px;font-size:.85rem}
.poetry-card{position:relative;max-width:680px;margin:25px auto;padding:clamp(22px,5vw,44px);background:#fff;border:1px solid var(--line);border-radius:24px;text-align:center;box-shadow:var(--shadow)}.poetry-mark{font-family:Georgia,serif;color:#f3a2bd;font-size:4rem;line-height:.7}.poetry-card p{font-family:Georgia,'Noto Naskh Arabic',serif;font-size:clamp(1.15rem,3.5vw,1.7rem);line-height:2.1;color:#813953;direction:rtl}.poetry-footer{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.letter-card{position:relative;max-width:700px;margin:25px auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(22px,5vw,45px);box-shadow:var(--shadow);line-height:1.9;overflow:hidden}.letter-top{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:22px;font-size:.65rem;letter-spacing:.13em;color:var(--deep);font-weight:700}.letter-card p{margin:0 0 16px}.signature{margin-top:24px!important}.signature strong{font-family:'Playfair Display',Georgia,serif;font-size:1.25rem;color:var(--deep)}.letter-stamp{position:absolute;right:18px;bottom:20px;border:1px solid #f3c5d6;border-radius:50%;width:70px;height:70px;display:grid;place-content:center;text-align:center;font-size:.52rem;letter-spacing:.1em;color:#d67a9d;transform:rotate(12deg);opacity:.7}
.proposal-heart{text-align:center;font-size:5rem;animation:float 3s ease-in-out infinite;margin:4px 0 12px}.proposal-card{max-width:500px;margin:24px auto 0;padding:24px;background:#fff;border:1px solid var(--line);border-radius:24px;text-align:center;box-shadow:var(--shadow)}.proposal-buttons{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}.proposal-buttons .ghost{min-width:130px}.proposal-buttons .primary{min-width:150px}#proposalMessage{margin-bottom:0}
footer{width:min(1000px,calc(100% - 36px));margin:auto;border-top:1px solid #f4dbe4;display:flex;justify-content:space-between;gap:12px;padding:20px 0 28px;font-size:.74rem;color:var(--muted)}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#5d2a43;color:white;border-radius:999px;padding:10px 16px;font-size:.82rem;transition:.25s;z-index:30;max-width:calc(100% - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:600px){.topbar{width:calc(100% - 24px);min-height:62px}.top-note{display:none}main{width:calc(100% - 24px)}.page{padding-top:34px;min-height:calc(100svh - 125px)}.memory-grid{gap:10px}.memory-card{padding:8px;border-radius:16px}.memory-copy{padding:10px 3px 4px}.memory-copy h3{font-size:1.08rem}.memory-copy p{font-size:.78rem}.memory-tag{font-size:.52rem}.photo-placeholder b{font-size:.8rem}.photo-placeholder small{font-size:.65rem}.game-card{padding:16px}.tile{border-radius:12px}.page-actions{gap:8px}.page-actions button{padding:12px 14px;font-size:.82rem}footer{width:calc(100% - 24px);font-size:.67rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

.video-card{max-width:760px;margin:24px auto;padding:14px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.video-card video{display:block;width:100%;max-height:70vh;aspect-ratio:16/9;background:#2b1721;border-radius:14px}.video-help{text-align:center;color:var(--muted);font-size:.85rem;line-height:1.7;margin:14px 8px 4px}.video-help strong{color:var(--deep)}

/* Upgraded memory-match game and its unlocked birthday surprise */
.puzzle-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:360px}
.memory-tile{aspect-ratio:1;min-width:0;border-radius:13px;font-size:clamp(1.25rem,4.8vw,2rem);font-weight:700;background:linear-gradient(145deg,#fff8fb,#ffe8f0);box-shadow:inset 0 -4px 0 #f5d6e2,0 4px 12px #b94e7620}
.memory-tile.flipped{background:#fff;color:#9e315e;border-color:#e995b5;transform:rotateY(0deg) scale(1.02)}
.memory-tile.matched{background:linear-gradient(145deg,#ffd9e7,#fff1f6);border-color:#e97ca5;box-shadow:0 0 0 2px #f8c5d7,0 6px 18px #e66e9b28;animation:pop .28s ease}
.game-surprise{position:relative;margin:24px -4px 0;padding:clamp(20px,5vw,34px);border:1px solid #f2a6c1;border-radius:22px;overflow:hidden;text-align:center;background:radial-gradient(circle at top,#fff 0,#fff0f6 55%,#ffe1ec 100%);box-shadow:0 16px 45px #c94c7b25}
.game-surprise[hidden]{display:none!important}
.game-surprise.reveal-surprise{animation:surpriseReveal .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes surpriseReveal{from{opacity:0;transform:translateY(22px) scale(.9)}60%{transform:translateY(-4px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}
.surprise-confetti{font-size:1.15rem;letter-spacing:.3em;line-height:2.2}
.surprise-big-heart{font-size:clamp(3.5rem,12vw,5.5rem);filter:drop-shadow(0 8px 16px #df6d9b35);animation:float 2.8s ease-in-out infinite}
.game-surprise h3{font-family:'Playfair Display',Georgia,serif;color:#8d3158;font-size:clamp(1.5rem,4vw,2.1rem);margin:10px 0}
.game-surprise p{max-width:550px;margin:0 auto;color:#75475a;line-height:1.85}
.surprise-burst{display:inline-block;margin-top:20px;padding:10px 17px;border-radius:999px;background:#fff;color:#b83d70;font-size:.78rem;font-weight:800;letter-spacing:.12em;box-shadow:0 5px 18px #b94e761a}
.proposal-buttons{position:relative;min-height:54px}
.no-dodging{box-shadow:0 10px 24px #b94e7630;transition:left .22s ease,top .22s ease,transform .22s ease}
.not-ready{margin-top:18px;text-decoration:none;font-size:.8rem}
@media(max-width:420px){.puzzle-grid{gap:7px}.memory-tile{border-radius:10px}.game-surprise{margin-left:-7px;margin-right:-7px}}

/* Final polish: centered welcome screen and a more playful interactive cake */
#welcome{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:calc(100svh - 145px);padding:clamp(30px,6vw,66px) 12px 48px}
#welcome.active{display:flex}
#welcome .eyebrow,#welcome h1,#welcome .hero-sub,#welcome .muted,#welcome .micro{width:100%;text-align:center;margin-left:auto;margin-right:auto}
#welcome h1{max-width:900px;line-height:1.02;overflow-wrap:normal;text-wrap:balance}
#welcome .hero-sub{max-width:620px}
#welcome .hero-illustration{width:100%;justify-content:center}
#welcome .hero-orbit{pointer-events:none}
.cake-stage{min-height:330px;max-width:500px;padding:18px 10px 12px;border:1px solid #f7d5e2;border-radius:34px;background:linear-gradient(155deg,#fffafd 0%,#fff0f6 58%,#ffe6ef 100%);box-shadow:0 18px 48px #c85c8418;overflow:hidden}
.cake-glow{width:270px;height:220px;background:radial-gradient(circle,#ffc2d8 0%,#ffe3ed 48%,transparent 72%);filter:blur(18px);animation:cakeGlow 3s ease-in-out infinite alternate}
@keyframes cakeGlow{to{transform:scale(1.16);opacity:.95}}
.cake-sparkles{position:absolute;top:22px;color:#dc78a0;letter-spacing:.5em;font-size:1.2rem;animation:sparkleFloat 2.8s ease-in-out infinite}
@keyframes sparkleFloat{50%{transform:translateY(-7px);opacity:.55}}
.candles{display:flex;justify-content:center;gap:17px;min-height:48px;align-items:flex-end;z-index:2;position:relative}
.candle{position:relative;display:block;width:9px;height:34px;border-radius:4px 4px 2px 2px;background:repeating-linear-gradient(135deg,#fff 0 4px,#f3a2bf 4px 7px);box-shadow:0 3px 7px #b94e7625}
.candle i{position:absolute;width:11px;height:16px;left:-1px;top:-17px;border-radius:70% 30% 65% 35%;background:radial-gradient(ellipse at 55% 65%,#fff7b0 0 22%,#ffb34d 45%,#ff7d78 75%);filter:drop-shadow(0 0 7px #ffb45b);transform:rotate(2deg);animation:flameFlicker .55s ease-in-out infinite alternate}
.candle:nth-child(2) i{animation-delay:.16s}.candle:nth-child(3) i{animation-delay:.3s}
@keyframes flameFlicker{to{transform:rotate(-5deg) scale(.86);filter:drop-shadow(0 0 11px #ffb45b)}}
.candles-out .candle i{opacity:0;transform:translateY(-13px) scale(.2);transition:.3s}
.cake-button{padding:0 12px;touch-action:manipulation}
.cake-emoji{font-size:clamp(7rem,25vw,10rem);filter:drop-shadow(0 16px 15px #c85c8430);animation:cakeBob 3.2s ease-in-out infinite}
@keyframes cakeBob{50%{transform:translateY(-7px) rotate(1deg)}}
.cake-button:active .cake-emoji{transform:scale(.94)}
.cake-tap{padding:8px 15px;border:1px solid #f3cada;border-radius:999px;background:#fff9fc;box-shadow:0 5px 14px #c85c8414;font-weight:700;letter-spacing:.08em}
.cake-base{width:min(220px,65%);height:12px;border-radius:50%;background:linear-gradient(90deg,#f7c4d6,#fff,#f1a9c2);box-shadow:0 7px 17px #c85c8428;margin-top:7px}
.cake-celebrated .cake-glow{background:radial-gradient(circle,#ffd0a0 0%,#ffe3ed 52%,transparent 72%)}
.cake-pop{animation:cakeCelebrate .55s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes cakeCelebrate{0%{transform:scale(1)}45%{transform:scale(1.22) rotate(-5deg)}75%{transform:scale(.94) rotate(4deg)}100%{transform:scale(1)}}
.confetti i{filter:drop-shadow(0 3px 5px #d56a9330)}
@media(max-width:600px){#welcome{min-height:calc(100svh - 125px);padding:34px 4px 42px}#welcome h1{font-size:clamp(3rem,13vw,5rem)}.cake-stage{min-height:310px;border-radius:26px}.cake-sparkles{top:17px}}


/* Best-effort: hide the platform-injected Netlify badge on this site. */
#netlify-badge,
#netlify-badge-container,
.netlify-badge,
a[href*="netlify.com"][aria-label*="Netlify"],
iframe[id*="netlify-badge"],
iframe[src*="netlify.com"][title*="Netlify"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Candle flames extinguish one by one after a detected gentle blow. */
.candle i { transition: opacity .35s ease, transform .35s ease; }
.candle.candle-out i { opacity: 0 !important; transform: translateY(-15px) scale(.15) !important; }

/* Chapter 04: Punjabi poetry in Urdu (Shahmukhi) script */
.urdu-poetry {
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: center;
  line-height: 2.15;
  font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Noto Sans Arabic", serif;
  font-size: clamp(1.15rem, 4.3vw, 1.55rem);
}