:root{--ink:#fff;--pink:#ff4fa3;--gold:#ffd66b;--violet:#8c55ff;--cyan:#55e6ff;--bg:#09051e;--panel:rgba(23,12,61,.58)}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100svh;overflow:hidden;color:var(--ink);font-family:"Noto Sans Khmer",system-ui,sans-serif;background:radial-gradient(circle at 50% 100%,#321269 0,#12082f 40%,#070416 100%)}
button{font:inherit}canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#sky{z-index:0}#fx{z-index:20}.aurora{position:fixed;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.18;pointer-events:none;animation:drift 13s ease-in-out infinite alternate}.aurora-one{background:#9e3cff;left:-25vmax;top:-20vmax}.aurora-two{background:#ff338b;right:-28vmax;bottom:-25vmax;animation-delay:-6s}.topbar{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) clamp(18px,5vw,56px) 12px}.brand{font-size:.72rem;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.76)}.brand span{color:var(--gold);text-shadow:0 0 16px var(--gold)}.steps{display:flex;gap:7px;position:absolute;left:50%;transform:translateX(-50%)}.steps i{width:7px;height:7px;background:rgba(255,255,255,.18);border-radius:10px;transition:.5s}.steps i.active{width:24px;background:linear-gradient(90deg,var(--pink),var(--gold));box-shadow:0 0 12px var(--pink)}.sound{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);color:white;width:39px;height:39px;border-radius:50%;cursor:pointer;font-size:1.1rem}.sound.muted{opacity:.45;text-decoration:line-through}
#app{position:relative;z-index:5;height:100svh}.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:84px 20px 34px;opacity:0;visibility:hidden;transform:scale(.94) translateY(22px);transition:opacity .7s,transform .7s,visibility .7s}.scene.active{opacity:1;visibility:visible;transform:none}.scene.exit{opacity:0;transform:scale(1.08);filter:blur(12px)}
.eyebrow,.mini{margin:0 0 14px;color:var(--gold);font-weight:800;font-size:clamp(.82rem,2.5vw,1rem);letter-spacing:.08em;text-transform:uppercase}.scene h1,.scene h2{margin:0;font-family:Koulen,"Noto Sans Khmer",sans-serif;font-weight:400;line-height:1.14;text-shadow:0 8px 30px rgba(0,0,0,.35)}.scene h1{font-size:clamp(3.1rem,12vw,7.5rem)}.scene h2{font-size:clamp(2.75rem,10vw,6.7rem)}.scene h1 span,.scene h2 span{color:var(--pink);text-shadow:0 0 25px rgba(255,79,163,.45)}.scene>p:not(.mini):not(.wish):not(.final-wish){color:#dbd4f7;font-size:clamp(1rem,3vw,1.18rem);margin:15px 0 24px}
.mascot{position:absolute;z-index:1;width:clamp(145px,19vw,205px);aspect-ratio:.5;background-image:url("pom-mascot-strip.png");background-repeat:no-repeat;background-size:500% 100%;filter:drop-shadow(0 20px 20px rgba(0,0,0,.35));pointer-events:none;opacity:0;transform:translateY(45px) scale(.78) rotate(var(--tilt,0deg));transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1)}.scene.active .mascot{opacity:1;transform:translateY(0) scale(1) rotate(var(--tilt,0deg));animation:mascotFloat 3.2s 1s ease-in-out infinite}.mascot.pose-1{background-position:0 50%}.mascot.pose-2{background-position:25% 50%}.mascot.pose-3{background-position:50% 50%}.mascot.pose-4{background-position:75% 50%}.mascot.pose-5{background-position:100% 50%}.mascot.react{animation:mascotReact .62s cubic-bezier(.2,.9,.3,1)!important}#intro .mascot,#giftScene .mascot,#finale .mascot{right:clamp(16px,5vw,86px);bottom:clamp(15px,5vh,58px);--tilt:3deg}#celebrate .mascot,#cakeScene .mascot{left:clamp(16px,5vw,86px);bottom:clamp(15px,4vh,50px);--tilt:-3deg}.scene>*:not(.mascot){z-index:2}
.magic-btn{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;margin-top:22px;padding:17px 26px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:linear-gradient(120deg,#f62b91,#9a3eff 65%,#4dceff);color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 0 0 0 rgba(255,82,173,.8),0 12px 35px rgba(173,54,255,.38);cursor:pointer;animation:pulse 1.45s infinite;transition:transform .2s}.magic-btn:hover,.magic-btn:focus-visible{transform:translateY(-3px) scale(1.05);outline:3px solid var(--gold);outline-offset:5px}.magic-btn:active{transform:scale(.96)}.magic-btn b{font-size:1.28rem}.magic-btn.small{padding:14px 22px;margin-top:18px}.shine{position:absolute;z-index:-1;inset:-80%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.8) 50%,transparent 58%);animation:shine 2.1s infinite}.guide{display:flex;align-items:center;gap:8px;margin-top:17px;color:#fff;font-weight:700;font-size:.82rem;text-shadow:0 2px 10px #000;animation:bob 1s ease-in-out infinite}.guide span{font-size:1.25rem}.hidden{display:none!important}
.crown{font-size:2.8rem;color:var(--gold);filter:drop-shadow(0 0 15px var(--gold));animation:float 2.1s ease-in-out infinite}.houy{display:flex;align-items:center;justify-content:center;gap:min(2vw,12px);font-family:Koulen,sans-serif;font-size:clamp(4.8rem,20vw,11rem);line-height:.9;margin-top:0}.houy span{display:inline-block;background:linear-gradient(180deg,#fff 0,#ffd568 42%,#ff4da2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));animation:letterIn .7s cubic-bezier(.2,.8,.2,1) both}.houy span:nth-child(2){animation-delay:.09s}.houy span:nth-child(3){animation-delay:.18s}.houy span:nth-child(4){animation-delay:.27s}.houy em{font-style:normal;color:var(--cyan);font-size:.7em;animation:wiggle 1s infinite}.wish{max-width:620px;margin:14px auto 4px;color:#eee8ff;font-size:clamp(1rem,3.1vw,1.22rem);line-height:1.9}
.gift-grid{display:grid;grid-template-columns:repeat(3,minmax(88px,132px));gap:clamp(10px,3vw,22px);margin:22px 0 18px}.gift-box{position:relative;aspect-ratio:.88;border:1px solid rgba(255,255,255,.3);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.05));backdrop-filter:blur(12px);color:#fff;cursor:pointer;box-shadow:0 18px 45px rgba(0,0,0,.28);transition:.25s;overflow:hidden}.gift-box:before{content:"";position:absolute;left:44%;top:0;width:12%;height:100%;background:rgba(255,214,107,.85)}.gift-box:after{content:"";position:absolute;top:30%;left:0;width:100%;height:12%;background:rgba(255,214,107,.85)}.gift-box i,.gift-box span,.gift-box b{position:relative;z-index:2;display:block}.gift-box i{font-style:normal;color:var(--gold);font-size:1.65rem}.gift-box span{font-family:Koulen;font-size:2rem}.gift-box b{font-size:.65rem;letter-spacing:.1em}.gift-box:hover,.gift-box:focus-visible,.gift-box.next-target{transform:translateY(-9px) rotate(-2deg);border-color:var(--gold);outline:none;box-shadow:0 0 0 5px rgba(255,214,107,.18),0 0 30px rgba(255,79,163,.5);animation:giftPulse 1.3s infinite}.gift-box.open{background:linear-gradient(145deg,rgba(255,79,163,.42),rgba(140,85,255,.2));transform:translateY(-7px) scale(.96)}.gift-box.open:before,.gift-box.open:after{opacity:.35}.wish-card{min-height:68px;max-width:630px;display:grid;place-items:center;padding:12px 20px;border-radius:18px;background:var(--panel);border:1px solid rgba(255,255,255,.14);line-height:1.7;color:#efeaff;font-weight:600;font-size:clamp(.88rem,2.8vw,1.05rem)}
.cake-wrap{position:relative;width:260px;height:245px;margin:8px auto 4px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.28))}.cake{position:absolute;bottom:26px;left:30px;width:200px;height:106px;border-radius:16px 16px 28px 28px;background:linear-gradient(180deg,#ff6caf,#d92b85);box-shadow:inset 0 -16px rgba(111,18,93,.22)}.icing{height:34px;border-radius:16px 16px 28px 28px;background:#fff0f9;box-shadow:0 10px 0 #ffbddf}.sprinkles{position:absolute;inset:52px 8px auto;color:var(--gold);font-size:1.25rem;letter-spacing:5px}.plate{position:absolute;bottom:15px;left:10px;width:240px;height:27px;border-radius:50%;background:linear-gradient(180deg,#d8f7ff,#71dff5)}.candle{position:absolute;z-index:2;bottom:132px;left:116px;width:28px;height:61px;border-radius:8px 8px 3px 3px;background:repeating-linear-gradient(45deg,#fff 0 7px,#62dff5 7px 14px)}.candle span{position:absolute;left:12px;top:-7px;width:3px;height:9px;background:#45313a}.flame{position:absolute;z-index:3;left:115px;bottom:190px;width:30px;height:45px;transform-origin:50% 100%;animation:flame 1s ease-in-out infinite}.flame i{display:block;width:100%;height:100%;background:radial-gradient(circle at 50% 65%,#fff 0 14%,#ffe26b 15% 43%,#ff5e32 65%,transparent 67%);border-radius:50% 50% 45% 45%;filter:drop-shadow(0 0 13px #ffb52c)}.cake-wrap.out .flame{animation:out .55s forwards}.cake-wrap.out .candle:after{content:"";position:absolute;left:13px;top:-32px;width:28px;height:28px;border:3px solid rgba(220,220,255,.38);border-color:rgba(220,220,255,.45) transparent transparent rgba(220,220,255,.25);border-radius:50%;animation:smoke 1.8s forwards}
.final-badge{padding:8px 15px;border:1px solid rgba(255,214,107,.5);border-radius:999px;color:var(--gold);font-size:.72rem;font-weight:800;letter-spacing:.16em;background:rgba(255,214,107,.08)}.final-wish{max-width:650px;margin:22px 0 18px;color:#f3eeff;line-height:1.95;font-size:clamp(1rem,3vw,1.2rem)}.replay{padding:11px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.08);color:white;cursor:pointer}.replay:hover,.replay:focus-visible{border-color:var(--gold);outline:none;background:rgba(255,214,107,.12)}
#balloons{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}.balloon{position:absolute;bottom:-160px;width:52px;height:68px;border-radius:48% 52% 46% 54%;opacity:.9;animation:rise var(--speed) linear forwards;box-shadow:inset -10px -9px 12px rgba(0,0,0,.15),inset 9px 8px 10px rgba(255,255,255,.2)}.balloon:after{content:"";position:absolute;top:66px;left:25px;width:1px;height:75px;background:rgba(255,255,255,.5)}#flash{position:fixed;inset:0;z-index:50;background:white;opacity:0;pointer-events:none}#flash.pop{animation:flash .5s}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,82,173,.65),0 12px 35px rgba(173,54,255,.4)}55%{box-shadow:0 0 0 14px rgba(255,82,173,0),0 16px 50px rgba(173,54,255,.65)}}@keyframes shine{from{transform:translateX(-48%) rotate(12deg)}to{transform:translateX(48%) rotate(12deg)}}@keyframes bob{50%{transform:translateY(6px)}}@keyframes float{50%{transform:translateY(-8px) rotate(4deg)}}@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}50%{transform:translateY(-11px) rotate(-3deg)}}@keyframes mascotReact{0%{transform:translateY(0) scale(1) rotate(var(--tilt,0deg))}38%{transform:translateY(-26px) scale(1.1) rotate(-6deg)}70%{transform:translateY(3px) scale(.96) rotate(4deg)}100%{transform:translateY(0) scale(1) rotate(var(--tilt,0deg))}}@keyframes drift{to{transform:translate(18vmax,12vmax) scale(1.2)}}@keyframes letterIn{from{opacity:0;transform:translateY(-55px) rotate(-16deg) scale(.5)}to{opacity:1;transform:none}}@keyframes wiggle{50%{transform:rotate(12deg) scale(1.12)}}@keyframes giftPulse{50%{box-shadow:0 0 0 10px rgba(255,214,107,0),0 0 45px rgba(255,79,163,.7)}}@keyframes flame{0%,100%{transform:rotate(-4deg) scaleY(1)}50%{transform:rotate(5deg) scaleY(.86)}}@keyframes out{to{opacity:0;transform:translateX(22px) scale(.1) rotate(40deg)}}@keyframes smoke{from{opacity:0;transform:translate(0,20px) scale(.5)}30%{opacity:1}to{opacity:0;transform:translate(20px,-52px) scale(1.6)}}@keyframes party{25%{transform:rotate(-8deg) scale(1.08)}75%{transform:rotate(8deg) scale(.96)}}@keyframes rise{to{transform:translate(var(--drift),-125vh) rotate(16deg)}}@keyframes flash{30%{opacity:.72}100%{opacity:0}}
@media(max-height:720px){.scene{padding-top:70px}.scene h1{font-size:clamp(2.8rem,10vw,5.5rem)}.scene h2{font-size:clamp(2.35rem,8vw,4.7rem)}.houy{font-size:clamp(4rem,16vw,7.5rem)}.gift-grid{margin:12px 0}.cake-wrap{transform:scale(.78);margin:-19px 0 -25px}.magic-btn{margin-top:12px}.guide{margin-top:10px}}
@media(max-width:720px){.mascot{width:clamp(94px,27vw,125px);opacity:.92!important}#intro .mascot,#giftScene .mascot,#finale .mascot{right:-9px;bottom:5px}#celebrate .mascot,#cakeScene .mascot{left:-9px;bottom:5px}.scene h1,.scene h2,.houy{position:relative;z-index:3}}
@media(max-width:420px){.topbar{padding-inline:15px}.brand{font-size:.61rem}.gift-grid{grid-template-columns:repeat(3,minmax(78px,1fr));width:100%;gap:9px}.gift-box{border-radius:17px}.scene{padding-inline:15px}.wish{line-height:1.7}.final-wish br{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.aurora{display:none}}