:root{--navy:#120d2e;--plum:#2a1a5e;--pink:#ffb3d1;--rose:#ff7eb6;--lav:#cdb8ff;--ink:#fff3fa}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
background:radial-gradient(120% 80% at 50% 0%,#3b2480 0%,var(--plum) 35%,var(--navy) 80%) fixed;overflow-x:hidden}
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.moon{position:absolute;top:6%;right:9%;width:70px;height:70px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,#fffdf2,#f6e7c8 60%,#e9d3ff);
box-shadow:0 0 40px 12px rgba(255,236,200,.35),0 0 110px 40px rgba(205,184,255,.25);animation:moon 6s ease-in-out infinite}
@keyframes moon{50%{box-shadow:0 0 52px 18px rgba(255,236,200,.5),0 0 130px 55px rgba(205,184,255,.3)}}
.star{position:absolute;border-radius:50%;background:#fff;animation:tw var(--d) ease-in-out infinite;opacity:.3}
@keyframes tw{50%{opacity:1;transform:scale(1.5)}}
.heart{position:absolute;bottom:-30px;animation:up var(--d) linear infinite;opacity:0}
@keyframes up{10%{opacity:.7}100%{transform:translateY(-110vh) translateX(var(--x));opacity:0}}
.wrap{position:relative;max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center}
.screen{display:none;text-align:center}
.screen.show{display:block;animation:in .7s ease both}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
.bow{font-size:68px;filter:drop-shadow(0 0 18px rgba(255,126,182,.7));animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(4deg)}}
h1,h2{font-family:Georgia,"Palatino Linotype",serif;font-style:italic;font-weight:400;line-height:1.2;margin:.4em 0 .3em}
h1{font-size:clamp(2rem,9vw,2.8rem);text-shadow:0 0 24px rgba(255,126,182,.55)}
h2{font-size:clamp(1.45rem,6.4vw,1.9rem);margin:.6em 0 .9em}
h2.final{font-size:clamp(1.6rem,7vw,2.1rem)}
.sub{color:var(--lav);font-size:1.05rem;line-height:1.5;margin:0 auto 1.6em;max-width:30ch}
.hint{color:#b9a9e6;font-size:.88rem;margin-top:1.2em}
.btn{font:inherit;font-weight:600;border:0;border-radius:999px;cursor:pointer;color:var(--ink);transition:transform .15s,box-shadow .2s}
.btn.main{padding:15px 32px;font-size:1.05rem;background:linear-gradient(135deg,var(--rose),#b88cff);box-shadow:0 8px 26px rgba(255,126,182,.4)}
.btn.main:active,.card:active{transform:scale(.96)}
.btn.ghost{padding:9px 16px;font-size:.9rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.btn:focus-visible,.card:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.count{color:var(--lav);font-size:.95rem}
.bar{height:8px;border-radius:9px;background:rgba(255,255,255,.12);margin:14px 0 6px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--pink),var(--lav));transition:width .5s ease;box-shadow:0 0 12px var(--rose)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;transition:opacity .35s,transform .35s}
.choices.gone{opacity:0;transform:scale(.9);pointer-events:none}
.choices[hidden]{display:none}
.card{font:inherit;color:var(--ink);cursor:pointer;aspect-ratio:3/4;border-radius:28px;border:1px solid rgba(255,255,255,.22);padding:12px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
background:linear-gradient(160deg,hsla(var(--h),80%,70%,.4),hsla(calc(var(--h) + 50),70%,35%,.35));
box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 0 30px rgba(255,255,255,.07);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(255,126,182,.3)}
.card .e{font-size:clamp(3.4rem,18vw,4.8rem);filter:drop-shadow(0 0 16px hsla(var(--h),100%,80%,.8))}
.card .l{font-size:1rem;line-height:1.3}
.answer{animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
.answer[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:scale(.7)}}
.glow{font-size:76px;animation:beat 1.3s ease-in-out infinite;filter:drop-shadow(0 0 22px var(--rose))}
@keyframes beat{50%{transform:scale(1.14)}}
.nope{font-family:Georgia,serif;font-style:italic;font-size:clamp(1.7rem,8vw,2.2rem);margin:.2em 0;text-shadow:0 0 20px rgba(255,126,182,.6)}
.why{color:var(--lav);font-size:1.08rem;line-height:1.55;margin:0 auto 1.5em;max-width:32ch;min-height:3em}
.snd{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);backdrop-filter:blur(6px);font-size:20px;cursor:pointer;color:var(--ink);transition:transform .15s,background .2s}
.snd:active{transform:scale(.9)}.snd.off{opacity:.6}.snd:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.btn.main{position:relative;overflow:hidden}
.btn.main::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(120%)}}
.btn.main:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,126,182,.55)}
.card:active{box-shadow:0 0 34px rgba(255,126,182,.6)}
.spark{position:fixed;z-index:9;pointer-events:none;font-size:18px;animation:spark .8s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:340px){.choices{grid-template-columns:1fr}.card{aspect-ratio:auto;min-height:150px}}