@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Poppins:wght@300;500&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:radial-gradient(circle,#330000 0%,#000 70%);
font-family:'Poppins',sans-serif;
color:white;
overflow:hidden;
transition:0.5s;
}

.container{
width:90%;
max-width:520px;
text-align:center;
z-index:2;
}

.page{
display:none;
animation:fade 0.6s ease forwards;
}

.page.active{
display:block;
}

@keyframes fade{
from{opacity:0;transform:translateY(25px);}
to{opacity:1;transform:translateY(0);}
}

.card{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,0,90,0.4);
padding:40px;
border-radius:30px;
box-shadow:0 0 60px rgba(255,0,90,0.3);
}

h1{
font-family:'Cinzel',serif;
background:linear-gradient(45deg,#ff4d6d,#ff99ac,#fff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:20px;
}

p{line-height:1.8;margin-bottom:25px;}

button{
padding:10px 28px;
border:none;
border-radius:40px;
background:linear-gradient(45deg,#ff4d6d,#ff1a4d);
color:white;
cursor:pointer;
font-weight:bold;
transition:0.3s;
}

button:hover{
transform:scale(1.1);
box-shadow:0 0 25px #ff4d6d;
}

/* Love Box */
.love-box{
padding:35px;
border:2px solid #ff4d6d;
border-radius:30px;
cursor:pointer;
transition:0.3s;
font-size:20px;
font-weight:bold;
}

@keyframes heartbeat{
0%{transform:scale(1);}
25%{transform:scale(1.1);}
50%{transform:scale(1);}
75%{transform:scale(1.15);}
100%{transform:scale(1);}
}

.love-box.active{
animation:heartbeat 0.8s infinite;
background:linear-gradient(45deg,#ff0033,#ff4d6d,#ff99ac);
box-shadow:0 0 40px #ff0033,0 0 80px #ff4d6d;
color:black;
}

/* Floating hearts */
.hearts span{
position:absolute;
color:#ff4d6d;
font-size:20px;
animation:rise linear infinite;
}

@keyframes rise{
from{transform:translateY(100vh);opacity:1;}
to{transform:translateY(-10vh);opacity:0;}
}

/* Result Glow */
#result{
margin-top:20px;
font-size:22px;
font-weight:bold;
opacity:0;
transition:1s;
background:linear-gradient(45deg,gold,#fff,#ff99ac);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* Explosion */
#burst span{
position:absolute;
font-size:22px;
color:#ff4d6d;
animation:explode 1.2s ease forwards;
}

@keyframes explode{
from{opacity:1;transform:translate(0,0) scale(1);}
to{opacity:0;transform:translate(var(--x),var(--y)) scale(1.5);}
}