:root{
  --bg1: #0a0015;
  --bg2: #1a0f2e;
  --rose:#b19cd9;
  --accent:#e8d5f2;
  --deep:#e8d5f2;
  --muted:#8b6ba8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  color:var(--deep);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.scene{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}
.card{position:relative;z-index:40;max-width:920px;width:100%;text-align:center;padding:3rem;border-radius:28px;background:linear-gradient(180deg,rgba(45,27,78,0.95),rgba(26,15,46,0.9));box-shadow:0 18px 40px rgba(177,156,217,0.15);backdrop-filter: blur(8px);}
.headline{font-family: 'Dancing Script', cursive;font-size:clamp(1.9rem,5vw,3.8rem);margin:0 0 1.6rem;color:var(--accent);text-shadow:0 6px 22px rgba(177,156,217,0.25);transition:transform 420ms ease}
.headline:hover{transform:translateY(-4px)}
.buttons{min-height:120px;display:flex;align-items:center;justify-content:center;gap:1.6rem}
.btn{appearance:none;border:0;padding:0.9rem 1.6rem;border-radius:999px;font-size:1.05rem;cursor:pointer;transition:transform 240ms cubic-bezier(.2,.9,.3,1), box-shadow 240ms, background 240ms;box-shadow:0 8px 26px rgba(177,156,217,0.2)}
.btn:focus{outline:3px solid rgba(177,156,217,0.35)}
.yes{background:linear-gradient(90deg,var(--rose),var(--accent));color:white;font-weight:700}
.yes:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 44px rgba(177,156,217,0.3)}
.no{position:relative;left:auto;top:auto;transform:none;background:linear-gradient(180deg,rgba(91,61,130,0.6),rgba(70,40,110,0.4));border:1px solid rgba(177,156,217,0.2);color:var(--accent);padding:0.8rem 1.3rem;min-width:86px}
.no:hover{transform:scale(1.02)}
.small-btn{background:transparent;border:1px solid rgba(60,10,30,0.06);padding:0.35rem 0.6rem;border-radius:8px}
.result{padding:2rem}
.result-text{font-family:'Dancing Script',cursive;font-size:1.6rem;color:var(--accent)}
#confetti{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:2}

/* floating emoji styles */
.floating-emoji{
  position:fixed;
  font-size:3rem;
  pointer-events:none;
  z-index:2; /* behind the card */
  bottom:-100px;
}

/* soft glowing hearts in the background */
.hearts-bg{position:fixed;inset:0;z-index:1;opacity:0.22;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24"><path fill="%23d8b7e8" d="M12 21s-7.33-4.86-9.19-7.02C.9 11.71 2.13 6.33 6 4.5 8.11 3.57 10.5 4.2 12 6.03 13.5 4.21 15.89 3.57 18 4.5c3.87 1.83 5.1 7.21 3.19 9.48C19.33 16.14 12 21 12 21z"/></svg>');background-repeat:repeat;filter:blur(6px);transform:scale(1.6)}

/* heart confetti element style */
.heart{
  width:18px;height:18px;position:fixed;border-radius:20% 20% 2% 2%;background:linear-gradient(135deg,#d8b7e8,#b19cd9);transform:rotate(45deg);box-shadow:0 8px 18px rgba(177,156,217,0.3);
}

/* subtle heartbeat pulse on yes button when visible */
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

/* floating emoji animation */
@keyframes floatUp{
  0%{
    transform:translateY(0) rotate(0deg);
    opacity:0;
  }
  10%{
    opacity:1;
  }
  90%{
    opacity:1;
  }
  100%{
    transform:translateY(-120vh) rotate(360deg);
    opacity:0;
  }
}

.yes:active{animation:none}

/* responsive tweaks */
@media (max-width:720px){
  .card{padding:2rem;border-radius:20px}
  .headline{font-size:clamp(1.6rem,6vw,2.6rem)}
  .buttons{flex-direction:column;gap:12px;min-height:160px}
  .no{position:relative;left:auto;top:auto;transform:none}
  .yes{width:72%;margin:0 auto}
}

/* little banter under the buttons */
.banter{margin-top:1rem;color:rgba(216,183,232,0.9);font-size:0.98rem;font-weight:600}

@media (max-width:420px){
  .headline{font-size:1.6rem}
  .yes{width:82%}
}