/* The "Sí" celebration (js/celebrate.js), the Y11 answers and the happy end screen (js/yesbranch.js).
   Layers: fireworks canvas 5 < couple 6 < confetti canvas 7 < answers 8 < end screen 10.
   body[data-party] = on | settled. */
.celebrate { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* soft golden glow behind the couple (a blurred disc, no gradients) */
.celebrate-glow {
  position: absolute; z-index: 5; left: 50%; bottom: calc(var(--feet-b) + var(--char-on) * 0.45);
  width: min(90cqw, calc(var(--char-on) * 1.1)); aspect-ratio: 1; translate: -50% 50%;
  border-radius: 50%; background: rgba(var(--gold-rgb), 0.38); filter: blur(42px);
  opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
[data-party="on"] .celebrate-glow { opacity: 1; }
[data-party="settled"] .celebrate-glow { opacity: 0.45; transition-duration: 3s; }

/* Y11: the two new answers are longer, so they wrap inside the same pills */
.final[data-stage="yes"] .answers { width: 100%; max-width: 360px; }
.final[data-stage="yes"] .btn {
  flex: 1 1 0; min-width: 0; min-height: 56px; padding: 0.5rem 0.875rem;
  font-size: clamp(0.95rem, 4.6cqw, 1.0625rem); line-height: 1.15; letter-spacing: 0.02em; text-transform: none; white-space: normal;
}

/* ---------- happy end screen (over the held last frame, confetti keeps drifting) ---------- */
.yes-end {
  position: absolute; z-index: 10; left: 0; right: 0; bottom: calc(var(--safe-b) + 10cqh);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-3) calc(var(--space-3) + var(--safe-r)) var(--space-3) calc(var(--space-3) + var(--safe-l));
  text-align: center; animation: rise 1.2s var(--ease-out) both;
}
.yes-end[hidden] { display: none; }
.yes-end::before { /* ivory veil so the text reads over the couple's legs */
  content: ""; position: absolute; inset: -1.5rem 0 calc(-1 * (var(--safe-b) + 10cqh)) 0; z-index: -1;
  background: rgba(251, 247, 240, 0.7);
  mask: linear-gradient(transparent, #000 3rem); -webkit-mask: linear-gradient(transparent, #000 3rem);
}
.yes-end-text {
  margin: 0; font: 400 clamp(2.5rem, 12cqw, 3.5rem)/1.15 var(--script); color: var(--rose);
  text-shadow: 0 0 14px rgba(255, 253, 248, 0.95), 0 0 4px rgba(255, 253, 248, 0.9);
  text-wrap: balance;
}
.ghost-ink {
  color: var(--ink); border-color: rgba(var(--gold-rgb), 0.9); background: rgba(255, 253, 248, 0.92);
}
@media (hover: hover) { .ghost-ink:hover { background: var(--paper); color: var(--rose); } }
.ghost-ink:focus-visible { outline-color: var(--rose); }

@media (prefers-reduced-motion: reduce) {
  .yes-end { animation: none; }
  .celebrate-glow { transition-duration: 0.3s; }
}