:root{--bg1:#ffe3ee;--bg2:#fff4f8;--ink:#6b2d4a;--card:rgba(255,255,255,.88);--pink:#ff7aa8;--soft:#ffd0e0;--line:#ffb3cd;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg1:#2b1624;--bg2:#1c0f18;--ink:#ffdcea;--card:rgba(62,32,50,.9);--soft:#5a2d47;--line:#8a4a6c}}
:root[data-theme="dark"]{--bg1:#2b1624;--bg2:#1c0f18;--ink:#ffdcea;--card:rgba(62,32,50,.9);--soft:#5a2d47;--line:#8a4a6c}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Quicksand","Nunito",system-ui,sans-serif;font-weight:500;color:var(--ink);background:linear-gradient(160deg,var(--bg1),var(--bg2)) var(--bg1);overflow:hidden;position:relative;-webkit-tap-highlight-color:transparent}
.deco{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 6px) 0 0;text-align:center;letter-spacing:6px;color:var(--pink);font-size:15px;pointer-events:none;z-index:5;white-space:nowrap;overflow:hidden}
.deco.b{top:auto;bottom:0;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 6px)}
#petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
#petals i{position:absolute;top:-30px;font-style:normal;color:var(--pink);opacity:.7;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 20px;z-index:2;text-align:center}
h1{font-family:"Pacifico",cursive;font-weight:400;font-size:clamp(26px,7vw,40px);margin:0 0 4px;line-height:1.3}
.sub{font-size:18px;letter-spacing:3px;margin:0 0 18px}
.btn{font:inherit;font-weight:700;color:#fff;background:var(--pink);border:0;border-radius:99px;padding:12px 26px;font-size:16px;cursor:pointer;box-shadow:0 6px 0 #e0568a;transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #e0568a}
.btn:focus-visible,.fl:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hide{display:none!important}
/* Tiny */
#stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;width:100%}
#tiny{width:min(46vw,190px);overflow:visible;animation:bob 3s ease-in-out infinite;transition:transform 1.1s,opacity 1.1s}
@keyframes bob{50%{transform:translateY(-8px)}}
.eo{display:block}.ec{display:none}
#tiny.sleep .eo{display:none}#tiny.sleep .ec{display:block}
#tiny.out{transform:scale(1.8) translateY(40px);opacity:0}
.zz{position:absolute;right:calc(50% - 110px);top:14%;font-size:22px;color:var(--pink);animation:z 2s infinite}
@keyframes z{from{opacity:0;transform:translateY(10px)}50%{opacity:1}to{opacity:0;transform:translateY(-14px)}}
#clover{position:absolute;left:calc(50% + 40px);top:30%;font-size:54px;opacity:0;transform:scale(0) rotate(-90deg);transition:all .7s cubic-bezier(.3,1.6,.5,1)}
#clover.on{opacity:1;transform:scale(1) rotate(0);animation:sway 3s 1s infinite ease-in-out}
@keyframes sway{50%{transform:rotate(12deg)}}
/* dialog */
#dlg{width:min(560px,100%);background:var(--card);border:3px solid var(--line);border-radius:24px;padding:22px 22px 18px;text-align:left;position:relative;cursor:pointer;min-height:130px}
#dlg b{position:absolute;top:-17px;left:18px;background:var(--pink);color:#fff;border-radius:99px;padding:3px 16px;font-size:15px}
#txt{font-size:18px;line-height:1.6;min-height:58px}
#nx{position:absolute;right:18px;bottom:8px;color:var(--pink);animation:bob 1s infinite}
#go{margin:6px auto 0;display:none}#go.on{display:block}
/* share */
#share{position:fixed;inset:0;z-index:20;background:rgba(40,10,25,.45);display:none;align-items:center;justify-content:center;padding:20px}
#share.on{display:flex}
.card{background:var(--card);border:3px solid var(--line);border-radius:26px;padding:26px 22px;width:min(380px,100%);text-align:center;backdrop-filter:blur(6px)}
.bar{height:16px;border-radius:99px;background:var(--soft);overflow:hidden;margin:14px 0 6px}
#fill{height:100%;width:80%;background:linear-gradient(90deg,#ffa6c4,var(--pink));border-radius:99px;transition:width 1s}
/* mom */
#mom{background:inherit;overflow-y:auto;justify-content:flex-start;padding-top:56px;padding-bottom:48px}
#mom.on{animation:pop .9s both}
@keyframes pop{from{opacity:0;transform:scale(.9)}}
.fls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0 16px}
.fl{font-size:44px;background:var(--card);border:3px solid var(--line);border-radius:50%;width:74px;height:74px;cursor:pointer;transition:transform .2s;animation:bob 3s infinite}
.fl:nth-child(2n){animation-delay:.6s}.fl:nth-child(3n){animation-delay:1.2s}
.fl:hover{transform:scale(1.12) rotate(8deg)}
.fl.seen{background:var(--soft)}
#wish{min-height:96px;display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1.6}
#wish.f{animation:pop .5s both}
#fin{font-family:"Pacifico",cursive;font-size:26px;color:var(--pink);margin-top:14px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}