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

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:Arial,sans-serif;
  overflow:hidden;
  background:linear-gradient(135deg,#ff9a9e,#fad0c4,#fbc2eb);
}

.box{
  width:90%;
  max-width:500px;
  padding:32px 24px;
  background:white;
  border-radius:28px;
  text-align:center;
  box-shadow:0 0 35px rgba(255,0,120,.35);
  z-index:5;
}

h1{
  color:#ff2f7d;
  margin-bottom:15px;
}

.love-day{
  color:#ff2f7d;
  font-weight:bold;
  margin-bottom:15px;
}

.gallery{
  display:flex;
  justify-content:center;
  gap:18px;
  margin:25px 0;
}

.gallery img{
  width:220px;
  height:320px;

  object-fit:cover;

  border-radius:25px;

  border:4px solid white;

  box-shadow:
    0 0 20px rgba(255,47,125,.4),
    0 0 45px rgba(255,47,125,.3);

  animation:floatImage 4s ease-in-out infinite;
}

.gallery img:nth-child(1){
  transform:rotate(-8deg);
}

.gallery img:nth-child(2){
  transform:translateY(-10px);
  animation-delay:.8s;
}

.gallery img:nth-child(3){
  transform:rotate(8deg);
  animation-delay:1.6s;
}

.gallery img:hover{

  transform:
    scale(1.15)
    rotate(0deg);

  z-index:10;

  box-shadow:
    0 0 25px #ff2f7d,
    0 0 50px #ff2f7d;
}

@keyframes floatImage{

  0%{
    translate:0 0;
  }

  50%{
    translate:0 -10px;
  }

  100%{
    translate:0 0;
  }
}
.rate-box{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-bottom:15px;
  color:#ff2f7d;
  font-weight:bold;
}

.rate-box p{
  background:#fff0f6;
  padding:8px 12px;
  border-radius:12px;
  box-shadow:0 0 10px rgba(255,47,125,.2);
}

#countdown,
#message{
  color:#ff2f7d;
  font-weight:bold;
  margin:12px 0;
}

button{
  padding:14px 22px;
  border:none;
  border-radius:30px;
  margin:8px;
  font-size:17px;
  font-weight:bold;
  cursor:pointer;
  transition:.25s;
}

button:hover{
  transform:scale(1.08);
}

#yesBtn{
  background:#ff2f7d;
  color:white;
}

#thinkBtn{
  background:#ffd166;
}

#noBtn{
  background:#ddd;
  position:relative;
}

.heart{
  position:fixed;
  bottom:-40px;
  font-size:30px;
  animation:fly 5s linear forwards;
  z-index:1;
}

@keyframes fly{
  to{
    transform:translateY(-120vh) scale(2) rotate(360deg);
    opacity:0;
  }
}

.confetti{
  position:fixed;
  top:-30px;
  font-size:28px;
  animation:drop 4s linear forwards;
  z-index:10;
}

@keyframes drop{
  to{
    transform:translateY(110vh) rotate(720deg);
    opacity:0;
  }
}

.final{
  display:none;
  width:90%;
  max-width:650px;
  text-align:center;
  color:white;
  z-index:20;
}

.final h2{
  font-size:32px;
  line-height:1.6;
  text-shadow:0 0 15px #ff2f7d;
}

.final-buttons{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:28px;
}

.final-btn{
  background:white;
  color:#ff2f7d;
  border:3px solid #111;
  box-shadow:0 4px 0 #111;
}

@media(max-width:500px){
  button{
    width:100%;
  }

  .gallery img{
    width:75px;
    height:75px;
  }

  .final-buttons{
    flex-direction:column;
  }

  .final h2{
    font-size:24px;
  }
}
/* DOUYIN ROMANTIC EFFECT */

.douyin-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,0,128,.35),transparent 28%),
    radial-gradient(circle at 80% 70%,rgba(0,234,255,.28),transparent 30%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 22%);
  animation:douyinMove 6s ease-in-out infinite alternate;
}

@keyframes douyinMove{
  from{
    filter:hue-rotate(0deg);
    transform:scale(1);
  }
  to{
    filter:hue-rotate(25deg);
    transform:scale(1.08);
  }
}

.light-sweep{
  position:fixed;
  inset:-40%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.28) 50%,
    transparent 60%
  );
  animation:lightSweep 4s linear infinite;
}

@keyframes lightSweep{
  from{
    transform:translateX(-60%) rotate(10deg);
  }
  to{
    transform:translateX(60%) rotate(10deg);
  }
}

.final h2{
  animation:textGlow 1.8s ease-in-out infinite alternate;
}

@keyframes textGlow{
  from{
    text-shadow:
      0 0 8px #fff,
      0 0 18px #ff2f7d;
  }
  to{
    text-shadow:
      0 0 14px #fff,
      0 0 28px #ff2f7d,
      0 0 45px #ff80bf;
  }
}

.final-btn{
  position:relative;
  overflow:hidden;
  animation:btnPulse 1.6s infinite;
}

.final-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:70%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.7),
    transparent
  );
  animation:btnShine 2s infinite;
}

@keyframes btnShine{
  to{
    left:130%;
  }
}

@keyframes btnPulse{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.06);
  }
  100%{
    transform:scale(1);
  }
}

.heart{
  filter:drop-shadow(0 0 8px rgba(255,47,125,.8));
}

.confetti{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.9));
}