:root{
  --bg1:#ff9a9e;
  --bg2:#fad0c4;
  --accent:#ff6b81;
  --card:#ffffffee;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
body{
  background:linear-gradient(120deg,var(--bg1),var(--bg2));
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.scene{position:relative;width:100%;max-width:880px}
.card{background:var(--card);backdrop-filter: blur(6px);padding:3rem;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.12);text-align:center}
.title{margin:0;font-size:2rem;color:#322;
  text-shadow:0 2px 0 rgba(255,255,255,.6)}
.subtitle{color:#5b3;opacity:.9;margin:.6rem 0 1.6rem}
.btn{background:linear-gradient(90deg,var(--accent),#ff8ca0);border:0;color:white;padding:.85rem 1.6rem;border-radius:999px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(255,107,129,.18);transition:transform .18s ease,box-shadow .18s}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,107,129,.12)}

#floating-hearts{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.heart{position:absolute;width:28px;height:28px;background:linear-gradient(180deg,#ff5c7a,#ff2d6f);transform:rotate(45deg);border-radius:6px 6px 0 0;opacity:0.95}
.heart:before,.heart:after{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:inherit}
.heart:before{top:-14px;left:0}
.heart:after{left:14px;top:0}

@keyframes floatUp{0%{transform:translateY(0) scale(1) rotate(0)}100%{transform:translateY(-420px) scale(.9) rotate(25deg);opacity:0}}

#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .32s ease, transform .28s ease}
.modal.hidden{opacity:0;pointer-events:none;transform:scale(.99)}
.modal::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.36);backdrop-filter:blur(3px);z-index:1;transition:opacity .32s ease}
.modal-content{position:relative;width:92%;max-width:680px;padding:2rem;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,250,250,.85));box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden;z-index:3}
.modal-content{position:relative;width:92%;max-width:680px;padding:2rem;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,250,250,.85));box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden;z-index:3}
#confetti{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.message{position:relative;z-index:4;text-align:center;padding:2rem}

/* Stacked card styles */
.cards{position:relative;width:100%;height:360px;margin-bottom:1.2rem;}
.cards .card{
  position:absolute;
  left:50%;
  transform:translateX(-50%) translateY(0) scale(1);
  width:100%;
  max-width:680px;
  opacity: 0;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.2,.9,.2,1), opacity .5s ease;
  z-index: 1; /* Default z-index for cards */
}
.cards .card:first-of-type {
  opacity: 1;
  pointer-events: auto;
  z-index: 3; /* Current card on top */
}
.cards .card.falling {
  animation: fall-off 0.8s ease-in forwards;
}
@keyframes fall-off {
  0% {
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(100vh) scale(0.6) rotate(30deg);
    opacity: 0;
  }
}






#confetti{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.message{position:relative;z-index:4;text-align:center;padding:2rem}
#revealTitle{font-size:1.75rem;margin:0 0 .6rem}
#typed{color:#444;margin-bottom:1rem}
.actions{display:flex;gap:1rem;justify-content:center}
.yes{background:linear-gradient(90deg,#ff6b81,#ff8aa3)}
.no{background:#eee;color:#444;box-shadow:none}

@media (min-width:900px){
  .card{display:flex;flex-direction:column;align-items:center}
  .title{font-size:2.4rem}
}