*{box-sizing:border-box}
:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 25%,#5b164c 0,#1c0d28 42%,#080812 100%)}
.stars,.stars:before,.stars:after{position:fixed;inset:0;content:"";pointer-events:none}
.stars{background-image:radial-gradient(#fff 1px,transparent 1px);background-size:70px 70px;opacity:.28;animation:drift 20s linear infinite}
.stars:before{background-image:radial-gradient(#fff 1px,transparent 1px);background-size:110px 110px;opacity:.22;transform:translate(25px,15px)}
.stars:after{background-image:radial-gradient(#fff 1px,transparent 1px);background-size:160px 160px;opacity:.18;transform:translate(-20px,30px)}
.app{width:min(92vw,560px);min-height:620px;position:relative;display:flex;align-items:center;justify-content:center}
.screen{display:none;width:100%;text-align:center;padding:38px 26px;animation:enter .55s ease}
.screen.active{display:block}
h1{font-size:clamp(42px,12vw,72px);line-height:1.02;margin:12px 0 18px;font-weight:800;letter-spacing:-2px}
h2{font-size:clamp(28px,7vw,42px);line-height:1.12;margin:18px 0 12px}
p{font-size:17px;line-height:1.6;color:#eadceb}
.small{font-size:13px;text-transform:uppercase;letter-spacing:3px;color:#f6a9dc}
.sub{margin-bottom:30px}
button{border:0;border-radius:999px;padding:15px 24px;font-size:16px;font-weight:750;color:#250c20;background:linear-gradient(135deg,#ffd3f2,#ff8dcc);box-shadow:0 10px 30px #ff5bb633;cursor:pointer;transition:transform .2s,filter .2s}
button:hover{transform:translateY(-2px);filter:brightness(1.06)}
button:active{transform:scale(.97)}
.orb,.final-heart{width:130px;height:130px;margin:0 auto 25px;border-radius:50%;display:grid;place-items:center;font-size:62px;background:radial-gradient(circle at 35% 30%,#fff,#ff9bd9 25%,#d73b9f 70%,#621750);box-shadow:0 0 70px #ff66c466;animation:pulse 2s ease-in-out infinite}
.cinema{font-size:72px;margin-bottom:15px}
.badge{display:inline-block;padding:7px 12px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff1f;color:#ffc6eb;font-size:12px;letter-spacing:2px}
input{width:100%;margin:25px 0 18px;padding:17px 18px;border-radius:16px;border:1px solid #ffffff25;background:#ffffff0d;color:#fff;font-size:16px;outline:none}
input:focus{border-color:#ff9bd9;box-shadow:0 0 0 4px #ff9bd91a}
.choices{display:grid;gap:14px;margin:28px 0}
.choice{width:100%;background:#ffffff0d;color:#fff;border:1px solid #ffffff20;box-shadow:none}
.wrong{min-height:30px;color:#ffb1df;font-weight:700}
.message{max-width:470px;margin:0 auto 20px}
.signature{font-size:21px;color:#ffb5e1;margin:18px 0 28px;font-style:italic}
#replayBtn{background:#ffffff10;color:#fff;border:1px solid #ffffff24;box-shadow:none}
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confetti-piece{position:absolute;top:-20px;width:9px;height:16px;animation:fall 2.8s linear forwards}
@keyframes enter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 90px #ff66c477}}
@keyframes drift{to{transform:translateY(70px)}}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}