:root{--script:'Caveat','Segoe Script',cursive}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;touch-action:manipulation}
body{font-family:'Nunito',system-ui,sans-serif;color:#fff3f6;background:linear-gradient(#1f1240,#4b2a6b 50%,#c4688c 90%,#f0a1a0);-webkit-tap-highlight-color:transparent;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
.script{font-family:var(--script);font-weight:700;line-height:1.2;font-size:clamp(2rem,8vw,3.2rem);text-shadow:0 0 20px #ff9ec488}
.big{font-size:clamp(1.8rem,7vw,2.8rem)}
.hint{opacity:.8}
#sky{position:fixed;inset:0;pointer-events:none}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:tw var(--d) ease-in-out infinite}
@keyframes tw{50%{opacity:.1;transform:scale(.5)}}
.petal{position:absolute;top:-20px;width:12px;height:16px;border-radius:70% 0 70% 0;background:#f6a8c0;opacity:.7;animation:fall var(--d) linear infinite}
@keyframes fall{to{transform:translate(var(--x),110vh) rotate(540deg)}}
.hud{position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:14px;z-index:20;background:#ffffff33;backdrop-filter:blur(8px);padding:6px 14px;border-radius:99px}
.scene{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s;z-index:5}
.scene.on{opacity:1;visibility:visible}
.glow{background:linear-gradient(135deg,#ff9ec4,#c9a6ff);color:#fff;font-weight:600;padding:.9rem 1.8rem;border-radius:99px;min-height:48px;box-shadow:0 10px 30px #b04a7866;animation:pulse 2.4s infinite;transition:transform .2s}
.glow:active{transform:scale(.94)}
@keyframes pulse{70%{box-shadow:0 0 0 18px #ff9ec400,0 10px 30px #b04a7866}}
.bear{width:130px;height:auto;display:block;touch-action:manipulation}
.bear.sm{width:80px}
.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(3deg)}}
.lips{font-size:clamp(100px,32vw,160px);line-height:1;animation:beat 1.4s infinite;filter:drop-shadow(0 0 24px #ff5c8a)}
.lips:active{transform:scale(.85)}
@keyframes beat{50%{transform:scale(1.12)}}
.k{position:fixed;transform:translate(-50%,-50%);font-size:var(--s);pointer-events:none;z-index:50;animation:kb 1.6s ease-out forwards}
@keyframes kb{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(.5);opacity:0}}
.tr{position:fixed;font-size:14px;pointer-events:none;z-index:40;transform:translate(-50%,-50%);animation:tr 1s forwards}
@keyframes tr{to{transform:translate(-50%,-150%);opacity:0}}
.fall{position:fixed;top:-50px;font-size:44px;z-index:30;padding:6px;animation:dn var(--d) linear forwards}
@keyframes dn{to{transform:translateY(115vh) rotate(40deg)}}
.paper{background:#fff7ee;color:#5a1830;border-radius:22px;padding:28px 24px;max-width:480px;width:100%;min-height:200px;display:grid;place-items:center;box-shadow:0 0 40px #ff9ec488;font-size:clamp(1.15rem,4.4vw,1.4rem);line-height:1.6}
#lt.in{animation:li 1s}
@keyframes li{from{opacity:0;transform:translateY(14px);filter:blur(5px)}}
.dots{display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:#ffffff55}.dots i.on{background:#ff9ec4}
.moonw{position:relative;width:170px;height:170px;overflow:hidden}
.moon2{position:absolute;inset:10px;font-size:120px;line-height:1;transform:translateY(200px);opacity:0;transition:transform 3.5s,opacity 3s;filter:drop-shadow(0 0 30px #ffe3a8)}
.moonw.rise .moon2{transform:none;opacity:1;animation:beat 3s 3.5s infinite}
.chalni{position:absolute;inset:0;border:6px solid #d3a45f;border-radius:50%;background:repeating-linear-gradient(45deg,#ffffff00 0 5px,#ffffff33 5px 6px),repeating-linear-gradient(-45deg,#ffffff00 0 5px,#ffffff33 5px 6px);opacity:0;transition:opacity 3s;pointer-events:none}
.moonw.rise .chalni{opacity:1}
.diyas{display:flex;gap:6px}
.diya{font-size:clamp(36px,11vw,52px);filter:grayscale(1) brightness(.5);transition:filter .6s,transform .4s}
.diya.lit{filter:drop-shadow(0 0 14px #ffb347);animation:fl 1.2s infinite alternate}
@keyframes fl{to{transform:scale(1.12) rotate(3deg)}}
.pair{display:flex;align-items:flex-end;justify-content:center;position:relative;height:160px;width:100%}
.pair .bear{transition:transform 1s cubic-bezier(.3,1.5,.5,1);cursor:pointer}
.mk{position:absolute;bottom:90px;font-size:60px;opacity:0;transform:scale(0)}
.pair.kissed .mk{animation:pop 2s forwards}
@keyframes pop{30%{opacity:1;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.petal,.bob,.lips,.glow,.moonw .moon2{animation:none!important}.tr{display:none}}