:root {
  --pink: #ff5c8a;
  --hot-pink: #f13d77;
  --ink: #452038;
  --muted: #9a7284;
  --cream: #fffafc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  background: linear-gradient(135deg, #fff8fb 0%, #ffeaf2 48%, #ffdce9 100%);
}

button { font: inherit; cursor: pointer; border: 0; }

.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 2; }
.card {
  width: min(100%, 550px); min-height: 650px; padding: 44px 34px 32px; text-align: center;
  border: 1px solid rgba(255,255,255,.9); border-radius: 34px;
  background: rgba(255,255,255,.68); box-shadow: 0 25px 75px rgba(173, 68, 110, .18), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(14px); animation: appear .8s ease both;
}
.eyebrow { color: var(--pink); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { font-size: 17px; vertical-align: -2px; margin: 0 4px; }
.illustration { width: 130px; height: 130px; margin: 27px auto 23px; display:grid; place-items:center; position:relative; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff, #ffe1ec 68%); box-shadow: 0 13px 30px rgba(239, 76, 126, .15); }
.heart-icon, .success-heart { color: var(--pink); font-size: 67px; line-height: 1; filter: drop-shadow(0 8px 7px rgba(241, 61, 119, .22)); animation: heartbeat 1.5s ease-in-out infinite; }
.spark { position: absolute; color: #ff87a9; font-size: 25px; animation: twinkle 1.7s ease-in-out infinite alternate; }
.spark-a { top: 18px; right: 16px; } .spark-b { bottom: 20px; left: 17px; animation-delay: .5s; }
.tiny-note { margin: 0 0 9px; color: var(--muted); font-size: 14px; }
h1 { margin: 0; font-size: clamp(42px, 9vw, 65px); line-height: .98; letter-spacing: -.055em; }
h1 em { color: var(--hot-pink); font-family: Pacifico, cursive; font-style: normal; font-weight: 400; letter-spacing: -.02em; }
.subtitle { margin: 22px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.actions { min-height: 75px; display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; }
.yes-button, .no-button { border-radius: 100px; padding: 15px 29px; font-size: 16px; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.yes-button { z-index: 2; color: white; background: linear-gradient(135deg, #ff759d, #f3437b); box-shadow: 0 10px 22px rgba(241, 61, 119, .25); }
.yes-button:hover { box-shadow: 0 13px 27px rgba(241, 61, 119, .35); transform: translateY(-2px) scale(1.03); }
.yes-button span { margin-left: 7px; font-size: 19px; }
.no-button { color: #ad778d; background: #fff; border: 1px solid #f5d4df; box-shadow: 0 5px 13px rgba(173, 68, 110, .08); position: relative; }
.no-button.evading { position: fixed; z-index: 10; }
.hint { margin-top: 27px; color: #c08da1; font-size: 12px; transition: color .2s; }
.ambient-glow { position: fixed; z-index: 0; width: 380px; height: 380px; border-radius: 50%; filter: blur(50px); opacity: .38; }
.glow-one { top: -180px; left: -100px; background: #ffc0d4; } .glow-two { right: -140px; bottom: -170px; background: #ffb6cc; }
.heart { position: fixed; bottom: -30px; color: rgba(239, 76, 126, .25); font-size: 18px; pointer-events: none; animation: floatUp linear forwards; }
.success-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 22px; background: rgba(99, 31, 60, .28); backdrop-filter: blur(8px); animation: fadeIn .35s ease; }
.success-overlay[hidden] { display: none; }
.success-card { width: min(100%, 440px); padding: 36px 25px 28px; border-radius: 30px; text-align: center; background: var(--cream); box-shadow: 0 30px 90px rgba(100, 30, 61, .27); animation: pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.success-heart { margin: 21px auto 19px; font-size: 67px; } .success-confetti { color: #ff87a9; font-size: 19px; letter-spacing: 3px; }
h2 { margin: 0; color: var(--ink); font-size: clamp(27px, 7vw, 37px); letter-spacing: -.04em; }
.success-card > p:not(.eyebrow) { margin: 14px 0 24px; color: var(--muted); line-height: 1.7; } .success-card > p span { color: var(--pink); font-size: 14px; }
.close-button { padding: 13px 21px; border-radius: 100px; color: white; background: var(--pink); font-weight: 700; box-shadow: 0 8px 18px rgba(241,61,119,.2); }

@keyframes appear { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } }
@keyframes twinkle { from { opacity: .45; transform: scale(.8) rotate(-10deg); } to { opacity: 1; transform: scale(1.15) rotate(10deg); } }
@keyframes floatUp { to { transform: translateY(-110vh) rotate(30deg); opacity: 0; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes pop { from { transform:scale(.8); opacity:0; } to { transform:none; opacity:1; } }
@media (max-width: 480px) { .card { min-height: 590px; padding: 34px 21px 26px; } .illustration { width: 112px; height: 112px; margin-top: 23px; } .heart-icon { font-size: 58px; } .yes-button, .no-button { padding: 14px 23px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }