@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;600;800&display=swap');

:root{
  --bg:#060003;
  --deep:#160009;
  --pink:#ff2b91;
  --soft:#ff83c1;
  --white:#fff2f8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Poppins,sans-serif;color:var(--white);background:radial-gradient(circle at top,#450022,#120008 55%,#030002);overflow:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 80%,rgba(255,43,145,.22),transparent 30%),radial-gradient(circle at 85% 25%,rgba(255,131,193,.16),transparent 34%);pointer-events:none}
#sparkles,#confetti{position:fixed;inset:0;pointer-events:none;z-index:0}
#hearts{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.float-heart{position:absolute;color:#ff4fa4;text-shadow:0 0 18px #ff2b91;animation:rise linear forwards;opacity:.8}
@keyframes rise{from{transform:translateY(105vh) rotate(0deg);opacity:0}10%,90%{opacity:.85}to{transform:translateY(-15vh) rotate(360deg);opacity:0}}
.screen{display:none;min-height:100vh;width:100vw;position:relative;z-index:2;padding:24px}
.screen.active{display:flex;animation:fade .8s ease both}
@keyframes fade{from{opacity:0;filter:blur(8px);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}
.glass{background:rgba(18,0,10,.58);border:1px solid rgba(255,131,193,.35);box-shadow:0 0 45px rgba(255,43,145,.25), inset 0 0 24px rgba(255,255,255,.04);backdrop-filter:blur(14px);border-radius:32px}
#intro{align-items:center;justify-content:center;text-align:center}
.hero-card{width:min(980px,100%);min-height:650px;padding:34px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:28px}
.photo-cloud{height:520px;position:relative}
.photo{position:absolute;width:235px;height:330px;object-fit:cover;border:5px solid #fff;border-radius:12px;box-shadow:0 0 32px rgba(255,43,145,.8);animation:photoFloat 4s ease-in-out infinite}
.photo.a{left:20px;top:20px;transform:rotate(-10deg)}
.photo.b{right:15px;top:95px;transform:rotate(8deg);animation-delay:.6s}
.photo.c{left:150px;bottom:0;transform:rotate(-2deg);animation-delay:1.2s}
@keyframes photoFloat{50%{translate:0 -12px}}
.script{font-family:"Great Vibes",cursive;font-size:68px;margin:0;text-shadow:0 0 18px var(--pink)}
.script.small{font-size:48px;color:#ffc2df}
h1{font-family:"Great Vibes",cursive;font-size:145px;margin:0;line-height:.9;text-shadow:0 0 20px var(--pink),0 0 50px var(--pink)}
h2{font-size:34px;color:#ff8bc6;margin:12px 0}
.subtitle{font-size:18px;line-height:1.8;max-width:480px;margin:0 auto 28px}
button{border:2px solid var(--soft);border-radius:18px;background:rgba(255,43,145,.16);color:white;padding:16px 30px;font-size:18px;font-weight:800;box-shadow:0 0 20px rgba(255,43,145,.75);cursor:pointer;transition:.25s}
button:hover{transform:scale(1.05);background:rgba(255,43,145,.32)}
#game{display:none;flex-direction:column}
#game.active{display:flex}
.top{display:flex;align-items:center;justify-content:space-between;width:min(1050px,100%);margin:0 auto 10px}
.top h2{font-size:42px;text-shadow:0 0 16px var(--pink)}
.progress{font-size:28px;font-weight:800;color:#fff;background:rgba(255,43,145,.14);border:1px solid rgba(255,131,193,.45);border-radius:18px;padding:10px 18px}
#field{position:relative;flex:1;width:min(1050px,100%);margin:auto;border-radius:32px;border:1px solid rgba(255,131,193,.25);background:rgba(10,0,5,.22);overflow:hidden;min-height:590px}
.balloon{position:absolute;width:92px;height:98px;border:0;border-radius:50% 50% 48% 48%;padding:0;background:radial-gradient(circle at 30% 24%,#fff 0 8%,transparent 12%),radial-gradient(circle at 60% 80%,#9c003e,#ff2b91 55%,#ff9aca);box-shadow:inset -8px -14px 26px rgba(40,0,10,.45),0 0 28px rgba(255,43,145,.85);font-size:30px;color:white;text-shadow:0 0 8px #6b002d;font-weight:800;animation:drift 3.4s ease-in-out infinite}
.balloon:before{content:"";position:absolute;bottom:-14px;left:38px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:16px solid #d50064}
.balloon:after{content:"";position:absolute;bottom:-54px;left:46px;width:2px;height:42px;background:linear-gradient(#ff83c1,transparent)}
@keyframes drift{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -18px;rotate:3deg}}
.balloon.pop{animation:burst .34s ease forwards}
@keyframes burst{100%{opacity:0;scale:2.2;filter:blur(6px);rotate:28deg}}
.particle{position:absolute;width:8px;height:8px;background:#ff7abb;border-radius:50%;pointer-events:none;animation:part .65s ease-out forwards}
@keyframes part{to{transform:translate(var(--x),var(--y));opacity:0}}
#toast{margin:14px auto 0;background:rgba(255,43,145,.14);border:1px solid rgba(255,131,193,.35);padding:13px 20px;border-radius:16px;min-height:48px;text-align:center;box-shadow:0 0 20px rgba(255,43,145,.25)}
#ending{align-items:center;justify-content:center;overflow-y:auto}
.ending-grid{width:min(1120px,100%);display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center}
.gallery{height:610px;position:relative}
.end-photo{position:absolute;width:260px;height:360px;object-fit:cover;border:5px solid #fff;border-radius:12px;box-shadow:0 0 32px rgba(255,43,145,.8);animation:slideUp .9s ease both}
.end-photo.p1{left:10px;top:30px;rotate:-8deg}
.end-photo.p2{right:0;top:120px;rotate:8deg;animation-delay:.25s}
.end-photo.p3{left:150px;bottom:5px;rotate:-2deg;animation-delay:.5s}
@keyframes slideUp{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:translateY(0)}}
.letter{padding:34px}
.letter h2{font-family:"Great Vibes",cursive;font-size:56px;color:#fff;text-shadow:0 0 20px var(--pink);margin:0 0 18px}
#typed{white-space:pre-line;line-height:1.9;font-size:18px;min-height:250px}
#replay{margin-top:20px;width:100%}
@media(max-width:850px){
  html,body{overflow:auto}
  .screen{min-height:100svh;padding:14px}
  .hero-card{display:block;min-height:auto;padding:20px}
  .photo-cloud{height:310px;transform:scale(.72);transform-origin:top center;margin-bottom:-75px}
  h1{font-size:88px}
  .script{font-size:46px}
  h2{font-size:24px}
  #field{min-height:650px}
  .top{display:block;text-align:center}
  .top h2{font-size:32px;margin:8px 0}
  .progress{display:inline-block}
  .balloon{width:76px;height:82px;font-size:24px}
  .ending-grid{display:block}
  .gallery{height:425px;transform:scale(.72);transform-origin:top center;margin-bottom:-100px}
  .end-photo{width:210px;height:300px}
  .letter{padding:22px}
  .letter h2{font-size:42px}
  #typed{font-size:16px}
}