body {
  text-align:center;
  background:#ffe6f0;
  font-family:Arial;
  margin-top:100px;
}

.card {
  background:white;
  padding:40px;
  border-radius:20px;
  display:inline-block;
}

button {
  padding:12px 24px;
  font-size:18px;
  margin:10px;
  border:none;
  border-radius:10px;
  cursor:pointer;
}

.eat-grow {
  transform: scale(2);
  transition: transform 0.5s ease-in-out;
}

.eaten {
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

#yesBtn {
  background:#ff4d6d;
  color:white;
  position:relative;
  overflow:hidden;
}
#yesBtn::after {
  content:"";
  position:absolute;
  left:50%;
  top:60%;
  width:70%;
  height:55%;
  background:#7a0f2d;
  border-radius:0 0 60px 60px;
  transform:translate(-50%, -50%) scaleY(0);
  opacity:0;
}
#yesBtn.eating::after {
  animation: mouth-open 0.6s ease-in-out;
}
#noBtn { background:#999; color:white; position:relative; }

@keyframes mouth-open {
  0% { transform:translate(-50%, -50%) scaleY(0); opacity:0; }
  35% { transform:translate(-50%, -50%) scaleY(1); opacity:1; }
  65% { transform:translate(-50%, -50%) scaleY(0.2); opacity:1; }
  100% { transform:translate(-50%, -50%) scaleY(0); opacity:0; }
}

#popup { display:none; }
img { width:200px; }

.email-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}

#email {
  width:260px;
  max-width:100%;
  padding:12px 14px;
  font-size:16px;
  border:2px solid #ffd1dc;
  border-radius:12px;
  outline:none;
  box-shadow:0 8px 20px rgba(255, 77, 109, 0.12);
}

#email:focus {
  border-color:#ff4d6d;
  box-shadow:0 8px 24px rgba(255, 77, 109, 0.22);
}

.cta-btn {
  background:linear-gradient(135deg, #ff4d6d, #ff8fb1);
  color:white;
  font-weight:700;
  letter-spacing:0.2px;
  box-shadow:0 10px 24px rgba(255, 77, 109, 0.28);
  transform:translateY(0);
  transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.cta-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(255, 77, 109, 0.35);
  filter:saturate(1.05);
}

.cta-btn:active {
  transform:translateY(1px);
  box-shadow:0 6px 16px rgba(255, 77, 109, 0.2);
}
