/* ── Reset & base ────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffe4ec;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

/* ── Card ────────────────────────────────────────────── */
.card {
  position: relative;
  width: min(420px, 90vw);
  padding: 2.5rem 2rem 2rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  overflow: hidden;          /* keep the "No" button inside */
}

/* ── Hero image ──────────────────────────────────────── */
.image-wrapper {
  width: 200px;
  height: 200px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.image-wrapper img.fade-out {
  opacity: 0;
  transform: scale(0.85);
}

/* ── Question text ───────────────────────────────────── */
h1 {
  font-size: 1.45rem;
  font-weight: 700;
  color: #4a2040;
  margin-bottom: 1.75rem;
  transition: opacity 0.35s ease;
  min-height: 2.2em;              /* prevent layout shift */
}

/* ── Buttons container ───────────────────────────────── */
.buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  min-height: 52px;               /* room for the "No" button to roam */
}

/* ── Shared button styles ────────────────────────────── */
.btn {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.65rem 1.8rem;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline-offset: 3px;
}

.btn:focus-visible {
  outline: 3px solid #d1649a;
}

/* ── Yes button ──────────────────────────────────────── */
.btn-yes {
  background: #f06292;
  color: #fff;
  box-shadow: 0 4px 12px rgba(240, 98, 146, 0.35);
}

.btn-yes:hover,
.btn-yes:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 6px 18px rgba(240, 98, 146, 0.45);
}

.btn-yes:active {
  transform: scale(0.97);
}

/* ── No button ───────────────────────────────────────── */
.btn-no {
  background: #e0dde0;
  color: #5a5a5a;
}

.btn-no.runaway {
  position: absolute;
  /* top/left driven by rAF in script.js */
}

/* ── Success state ───────────────────────────────────── */
.card.success .buttons {
  display: none;
}

.card.success h1 {
  color: #c2185b;
}

/* ── Hearts canvas (overlay) ─────────────────────────── */
#hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}