/* Tokens + shared pieces. Elegant and traditional: ivory paper (60%), dark ink and warm gold
   hairlines (30%), one deep rose red accent (10%) taken from the rose in Carolina's hair. */
:root {
  --ivory: #fbf7f0;
  --ivory-deep: #f2eadc;
  --paper: #fffdf8;
  --ink: #2a201b;
  --ink-soft: rgba(42, 32, 27, 0.76); /* ~6.5:1 on ivory */
  --rose: #9b1b30;
  --rose-deep: #7c1224;
  --rose-rgb: 155, 27, 48;
  --gold: #b39256;
  --gold-rgb: 179, 146, 86;
  --ink-rgb: 42, 32, 27;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 3rem;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.25rem;
  --text-xl: 1.563rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-4xl: 3.052rem;
  --track: 0.24em; /* wide tracking for small caps labels */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100%;
  background: var(--ivory-deep);
  color: var(--ink);
  font: 500 var(--text-base)/1.5 var(--serif);
  font-variant-numeric: lining-nums; /* Cormorant defaults to old-style figures */
  overflow: hidden; /* the page only scrolls once the details are shown (final phase) */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
:is([data-phase="final"], [data-phase="noend"], [data-phase="yesend"]) { overflow-x: hidden; overflow-y: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; line-height: 1.2; }
button { font: inherit; color: inherit; }
:is(button, a):focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }

/* ---------- garland of small red roses (SVG built in js/garland.js) ---------- */
.garland { position: absolute; inset: var(--safe-t) 0 auto 0; pointer-events: none; z-index: 4; }
.garland svg { display: block; width: 100%; height: auto; overflow: visible; }
.garland :is(.sway, .drop, .knot) { transform-box: fill-box; transform-origin: 50% 0; }
.garland .sway { animation: sway 5.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
.garland .drop { animation: sway-drop 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.9s); }
.garland .knot { animation: sway-knot 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes sway-drop { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes sway-knot { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }

/* ---------- envelope intro ---------- */
.envelope-screen {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: calc(var(--space-2) + var(--safe-t)) calc(var(--space-2) + var(--safe-r))
           calc(var(--space-2) + var(--safe-b)) calc(var(--space-2) + var(--safe-l));
  background: var(--ivory);
  transition: opacity 0.7s ease, visibility 0.7s;
}
.envelope-screen.gone { opacity: 0; visibility: hidden; }
.envelope {
  width: min(86vw, 360px); aspect-ratio: 4 / 3; position: relative; cursor: pointer; padding: 0;
  background: var(--paper); border: 1px solid rgba(var(--gold-rgb), 0.55); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.04), 0 22px 40px -18px rgba(var(--ink-rgb), 0.35);
  animation: bob 3.2s ease-in-out infinite;
}
.envelope:disabled { cursor: progress; }
.envelope::after { /* gold hairline frame inside the paper */
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 3px; pointer-events: none;
}
.flap { /* the drop-shadow draws a gold hairline along the clipped V of the flap */
  position: absolute; z-index: 1; inset: 0 0 50% 0; filter: drop-shadow(0 1px 0 rgba(var(--gold-rgb), 0.85));
}
.flap::before {
  content: ""; position: absolute; inset: 0; background: var(--ivory-deep);
  clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 6px 6px 0 0;
}
.seal {
  position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: clamp(50px, 15vw, 64px); aspect-ratio: 1;
  border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%; background: var(--rose); color: var(--paper);
  display: grid; place-items: center;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.12),
              0 4px 10px -4px rgba(var(--rose-rgb), 0.7);
}
.seal::after { /* pressed ring of the wax stamp */
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 1px solid rgba(255, 253, 248, 0.35);
}
.seal span { font: 400 clamp(1.125rem, 5vw, 1.375rem)/1 var(--script); translate: 0 2px; }
.envelope .to { position: absolute; z-index: 2; left: 0; right: 0; bottom: 7%; text-align: center; padding: 0 var(--space-3); }
.to small {
  display: block; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--track); text-transform: uppercase; padding-left: var(--track);
}
.to strong { display: block; font-size: clamp(1.75rem, 8.4vw, 2.35rem); color: var(--ink); overflow-wrap: anywhere; line-height: 1.15; }
.hint { margin: var(--space-3) 0 0; color: var(--ink-soft); text-align: center; font-style: italic; font-size: var(--text-lg); }
@keyframes bob { 50% { transform: translateY(-5px); } }

/* ---------- speech bubble (captions are off by default, CONFIG.captions) ---------- */
.bubble {
  position: absolute; z-index: 6; margin: 0; width: max-content;
  max-width: min(84cqw, 340px); padding: 0.75rem var(--space-2);
  background: var(--paper); border: 1px solid rgba(var(--gold-rgb), 0.7); border-radius: 18px;
  font: italic 500 clamp(1.1rem, 5.4cqw, var(--text-xl))/1.25 var(--serif);
  box-shadow: 0 10px 24px -14px rgba(var(--ink-rgb), 0.45);
  opacity: 0; transform: scale(0.9); transform-origin: var(--tail-x) 100%;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
  pointer-events: none;
}
.bubble.on { opacity: 1; transform: scale(1); }
.bubble::after { /* tail */
  content: ""; position: absolute; bottom: -12px; left: var(--tail-x); width: 18px; height: 12px;
  background: rgba(var(--gold-rgb), 0.7); clip-path: polygon(var(--tail-tip) 100%, 0 0, 100% 0);
}
.bubble[data-speaker="manuel"] { --tail-x: 24%; --tail-tip: 15%; }
.bubble[data-speaker="carolina"] { --tail-x: calc(76% - 18px); --tail-tip: 85%; }

/* ---------- Sí / No ---------- */
.answers { display: flex; gap: var(--space-2); justify-content: center; }
.btn {
  min-width: 124px; min-height: 52px; padding: 0 var(--space-4) 0 calc(var(--space-4) + 0.22em);
  border-radius: 999px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.22em;
  font: 600 var(--text-lg)/1 var(--serif);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: translateY(1px) scale(0.98); }
@keyframes squish {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.03); }
  100% { transform: none; }
}
.btn-yes {
  background: var(--rose); color: var(--paper); border: 1px solid var(--rose-deep);
  box-shadow: 0 10px 22px -10px rgba(var(--rose-rgb), 0.75);
}
.btn-yes:hover { background: var(--rose-deep); }
.btn-no {
  background: rgba(255, 253, 248, 0.94); color: var(--ink); border: 1px solid rgba(var(--gold-rgb), 0.85);
  box-shadow: 0 10px 22px -14px rgba(var(--ink-rgb), 0.35);
}
.resume {
  position: absolute; z-index: 12; left: 50%; top: 50%; translate: -50% -50%; cursor: pointer;
  border: 1px solid var(--rose-deep); border-radius: 999px; background: var(--rose); color: var(--paper);
  padding: var(--space-2) var(--space-3); font: 600 var(--text-base)/1 var(--serif);
  text-transform: uppercase; letter-spacing: 0.18em; box-shadow: 0 10px 22px -10px rgba(var(--rose-rgb), 0.75);
}
.resume[hidden] { display: none; }

/* Media decks stay in the DOM (iOS keeps decoding them) but are invisible. */
.decks { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.decks video { width: 1px; height: 1px; }

@media (prefers-reduced-motion: reduce) {
  .garland :is(.sway, .drop, .knot), .envelope { animation: none; }
  .bubble, .bubble.on { transform: none; transition: opacity 0.2s ease; }
  .envelope-screen { transition: none; }
}