/* Escape room (tarjeta de cristal) y revelación (tarjeta de papel) */
.scene--room .panel { display: flex; flex-direction: column; }
.epigraph { margin: 0 0 var(--sp-3); font: italic 400 1.0625rem/1.45 var(--font-serif); letter-spacing: -0.01em; color: #f1e3c6; text-wrap: balance; }
.room-head { display: flex; justify-content: space-between; align-items: center; }
.room-head .eyebrow { margin: 0; }
.seals { display: flex; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; color: var(--ivory); }
.seals li { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; transition: background 500ms var(--ease-out); }
.seals li.is-current { box-shadow: 0 0 0 3px rgba(244, 239, 228, 0.25); }
.seals li.is-done { background: currentColor; }
.scene--room.is-swapping .panel { opacity: 0; }
.scene--room .panel { transition: opacity 350ms linear; }

/* Campo: solo línea inferior (referencia) */
.answer { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4); margin-top: var(--sp-2); }
.answer--row { flex-direction: row; align-items: flex-end; gap: var(--sp-3); }
.answer--row > [data-interact] { flex: 1; min-width: 0; }
.btn--submit { align-self: flex-start; }
.answer--row .btn--submit { align-self: flex-end; }
.interact { display: flex; flex-direction: column; gap: var(--sp-2); }
.help { margin: 0 0 var(--sp-1); font-size: var(--fs-caption); letter-spacing: 0.02em; color: var(--ivory-soft); }

/* Prueba «elegir»: opciones a ancho completo */
.opt {
  width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-4); text-align: left; border-radius: var(--radius-btn);
  border: 1px solid rgba(244, 239, 228, 0.32); color: var(--ivory); background: transparent; font-size: 1.0625rem;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 150ms var(--ease-out);
}
.opt:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(244, 239, 228, 0.6); }
.opt:active { transform: scale(0.99); }
.opt.is-selected { border-color: var(--signal-night); background: rgba(140, 205, 238, 0.14); color: #fff6e4; }
.opt[hidden] { display: none; }

/* Prueba «ordenar»: elementos por tocar + orden elegido */
.pool { display: flex; flex-direction: column; gap: var(--sp-2); }
.chosen { margin: var(--sp-2) 0 0; padding: var(--sp-2) 0 0 var(--sp-6); border-top: 1px solid rgba(244, 239, 228, 0.22); display: flex; flex-direction: column; gap: 6px; min-height: 2.2em; color: #fff6e4; }
.chosen li { padding-left: var(--sp-1); }
.chosen li.empty { list-style: none; margin-left: calc(-1 * var(--sp-6)); color: var(--ivory-soft); font-size: var(--fs-caption); }
.interact > .link { align-self: flex-start; min-height: 44px; padding: 0; }

/* Prueba «candado»: diales de dígitos con flechas, teclado y escritura */
.dials { display: flex; justify-content: center; gap: var(--sp-3); }
.dial { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.dial__btn { width: 52px; min-height: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: var(--radius-btn); border: 1px solid rgba(244, 239, 228, 0.3); color: var(--ivory); background: transparent; transition: background 200ms var(--ease-out), border-color 200ms; }
.dial__btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(244, 239, 228, 0.6); }
.dial__btn::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 2px 0 0 2px; transform: translateY(2px) rotate(45deg); }
.dial__btn--down::before { transform: translateY(-2px) rotate(225deg); }
.dial__val { width: 52px; height: 64px; display: grid; place-items: center; font: 400 2.4rem/1 var(--font-serif); letter-spacing: -0.03em; color: #fff6e4; font-variant-numeric: lining-nums tabular-nums; border-bottom: 1px solid var(--ivory); background: rgba(255, 255, 255, 0.06); }
.dial__val.bump { animation: bump 260ms var(--ease-out); }
@keyframes bump { from { transform: translateY(-5px); opacity: 0.5; } }
.answer input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--sp-2); font: inherit; font-size: 1.0625rem; /* ≥16 px: sin zoom en iOS */
  color: var(--ivory); background: rgba(255, 255, 255, 0.07); border: 0; border-bottom: 1px solid var(--ivory); border-radius: 0;
}
.answer input::placeholder { color: var(--ivory-soft); }
.answer input:focus-visible { outline-offset: 2px; border-bottom-color: var(--signal-night); }
.answer.is-busy .btn { opacity: 0.6; pointer-events: none; }
.answer.shake { animation: shake 420ms var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.feedback { margin: var(--sp-2) 0; }
.feedback:empty { display: none; }
.feedback.is-ok { color: var(--ok); }
.feedback.is-wrong { color: var(--warn); }
.hint-list { margin: 0 0 var(--sp-3); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.hint-list li { padding: var(--sp-2) var(--sp-3); border-left: 1px solid var(--ivory-soft); font-size: 0.9375rem; color: #eadfc9; }
.hint-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.scene--room .link { align-self: flex-start; margin-top: var(--sp-2); min-height: 44px; padding: 0; }

/* Invitación: texto editorial directamente sobre la pared oscura, sin tarjeta; la puerta con luz queda a la derecha */
.scene--invitation .panel, .scene--room.is-intro .panel { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 var(--sp-1) var(--sp-2); overflow: visible; }
.scene--invitation .panel::before, .scene--room.is-intro .panel::before { display: none; }
.scene--invitation::before, .scene--room.is-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(5, 10, 24, 0.7) 0%, rgba(5, 10, 24, 0) 62%); }
.scene--invitation .display, .scene--room.is-intro .display { font-size: clamp(2.5rem, 11.5vw, 4.4rem); }
.scene--invitation .lead, .scene--room.is-intro .lead { max-width: 30ch; }
.scene--room.is-intro .panel { overflow: visible; padding: 0 var(--sp-1) var(--sp-2); }
.note { margin: 0 0 var(--sp-5); font-size: var(--fs-caption); letter-spacing: 0.03em; color: var(--ivory-soft); }
.btn--cta { min-height: 52px; padding: 0 var(--sp-6); font-size: 1rem; letter-spacing: 0; border-color: #ffd9a0; color: #ffe6bf; }
.btn--cta:hover { background: rgba(255, 200, 130, 0.14); border-color: #fff0d6; color: #fff0d6; }
@media (min-width: 720px) {
  .scene--invitation { justify-content: center; padding-bottom: 72px; }
  .scene--invitation::before { background: linear-gradient(90deg, rgba(5, 10, 24, 0.62) 0%, rgba(5, 10, 24, 0.3) 38%, rgba(5, 10, 24, 0) 60%); }
  .scene--room.is-intro::before { /* el sobre claro queda detrás del texto: más oscuro abajo-izquierda */
    background: linear-gradient(90deg, rgba(8, 6, 6, 0.82) 0%, rgba(8, 6, 6, 0.55) 36%, rgba(8, 6, 6, 0) 62%), linear-gradient(to top, rgba(8, 6, 6, 0.7) 0%, rgba(8, 6, 6, 0) 50%);
  }
  .scene--invitation .panel { width: min(100%, 32rem); padding-left: var(--sp-4); }
  .scene--room.is-intro { justify-content: flex-end; }
  .scene--room.is-intro .panel { width: min(100%, 32rem); padding-left: var(--sp-4); }
}
@media (min-width: 720px) and (max-aspect-ratio: 99/100) { .scene--invitation { justify-content: flex-end; padding-bottom: var(--sp-8); } }

/* Composición propia por prueba en pantallas anchas (en móvil siempre abajo) */
@media (min-width: 720px) {
}

/* Móvil: tarjeta de prueba más compacta para dejar protagonismo a la fotografía */
@media (max-width: 719px) {
  .scene--room .help { display: none; } /* el grupo conserva su aria-label */
  .scene--room .panel { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .scene--room .heading { margin: var(--sp-1) 0; }
  .scene--room .lead { margin-bottom: var(--sp-3); font-size: 1.0625rem; }
  .scene--room .interact { gap: 6px; }
  /* opciones en dos columnas: más foto a la vista */
  .scene--room .interact[role="group"], .scene--room .pool { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .opt { min-height: 44px; padding: 4px var(--sp-3); font-size: 0.9375rem; line-height: 1.2; }
  .answer { gap: var(--sp-3); margin-top: 0; }
  .scene--room .link { min-height: 36px; margin-top: 0; }
}

/* Escritorio con poca altura (portátiles, ventanas bajas): tarjeta más compacta para que se vea entera */
@media (min-width: 720px) and (max-height: 720px) {
  .scene--room .panel { padding: 20px 28px 18px; }
  .scene--room .heading { font-size: 1.9rem; margin: 2px 0; }
  .scene--room .lead { margin-bottom: var(--sp-3); font-size: 1rem; }
  .scene--room .epigraph { margin-bottom: var(--sp-2); font-size: 1rem; }
  .scene--room .help { display: none; }
  .scene--room .room-head { margin-bottom: 2px; }
  .answer { gap: var(--sp-3); margin-top: 0; }
  .dial__val { height: 52px; font-size: 2rem; }
  .dial__btn { height: 38px; min-height: 38px; }
  .opt { min-height: 42px; }
  .scene--room .link { min-height: 32px; margin-top: 0; }
}

/* Revelación */
.where { margin: var(--sp-5) 0 var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--mist); }
.where__label { margin: 0 0 var(--sp-1); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); }
.where__text { margin: 0; font: 400 1.35rem/1.35 var(--font-serif); letter-spacing: -0.02em; color: var(--graphite); white-space: pre-line; }
.btn--paper { border-color: var(--signal); color: #1f6e96; }
.btn--paper:hover { background: rgba(65, 161, 207, 0.1); border-color: #1f6e96; color: #14516f; }
.link--paper { color: var(--ash); }
.link--paper:hover { color: var(--graphite); }

/* Cierre: la carta sobre papel cálido, encuadre del libro abierto detrás */
.scene--letter { align-items: center; justify-content: center; overflow-y: auto; padding-top: 72px; }
.letter {
  width: min(100%, 36rem); max-height: calc(100dvh - 104px); overflow-y: auto; scrollbar-width: none; margin: auto;
  padding: clamp(24px, 6vw, 48px); border-radius: var(--radius-lg); border: 1px solid var(--mist); background: rgba(254, 255, 252, 0.96); color: var(--charcoal);
}
.letter .eyebrow { color: var(--ash); }
.letter .eyebrow::before { background: var(--ash); }
.letter__salutation { margin: 0 0 var(--sp-5); font: 400 clamp(1.7rem, 6vw, 2.4rem)/1.1 var(--font-serif); letter-spacing: -0.035em; color: var(--graphite); }
.letter__body p { margin: 0 0 var(--sp-4); font: 400 clamp(1.05rem, 3.2vw, 1.2rem)/1.65 var(--font-serif); letter-spacing: -0.005em; color: var(--charcoal); white-space: pre-line; text-wrap: pretty; }
.letter__signature { margin: var(--sp-6) 0 0; font: 400 1.5rem/1.2 var(--font-serif); letter-spacing: -0.02em; color: var(--graphite); }
.letter__footer { margin: var(--sp-4) 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--mist); font-size: var(--fs-caption); letter-spacing: 0.06em; color: var(--ash); }
.scene--letter .reveal { animation-play-state: paused; }
.scene--letter.is-open .reveal { animation-play-state: running; }
.gift-media { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.gift-img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius-lg); object-fit: cover; box-shadow: 0 0 80px rgba(255, 226, 150, 0.55); }
.panel--paper { background: rgba(254, 255, 252, 0.95); border-color: var(--mist); color: var(--charcoal); backdrop-filter: none; -webkit-backdrop-filter: none; }
.panel--paper .eyebrow { color: var(--ash); }
.panel--paper .display { color: var(--graphite); text-shadow: none; }
.panel--paper .lead { color: var(--charcoal); white-space: pre-line; }
/* El contenido no se muestra hasta que se descifra */
.scene--reveal .reveal, .scene--gated .reveal { animation-play-state: paused; }
.scene--reveal.is-open .reveal, .scene--gated.is-open .reveal { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) { .answer.shake, .dial__val.bump { animation: none; } .scene--room .panel { transition: none; } .bd[data-img] .bd__inner { transition: none; } }
[data-quality="low"] .answer.shake, [data-quality="low"] .dial__val.bump { animation: none; }
[data-quality="low"] .bd[data-img] .bd__inner { transition-duration: 0.8s; }

/* ===== Textos definitivos: lectura larga, mensajes y escenas finales ===== */
.lead, .epigraph, .note, .feedback, .question, .prose p, .highlight, .closing p, .transition p { white-space: pre-line; }
.question { margin: 0 0 var(--sp-3); font: 400 1.3rem/1.3 var(--font-serif); letter-spacing: -0.02em; color: #fff6e4; text-wrap: balance; }
.feedback.is-note { color: #f1e3c6; font-style: italic; }
.feedback.is-ok { font: 400 1.0625rem/1.5 var(--font-serif); color: #e9f6ee; }
.scene--room [data-continue] { margin-top: var(--sp-3); align-self: flex-start; }
.scene--room [data-continue][hidden] { display: none; }

/* Escenas de texto largo: portada y capítulo (tarjeta de cristal legible, con scroll interno si hace falta) */
.scene--read .panel { overflow-y: auto; max-height: calc(100dvh - 96px); scrollbar-width: none; }
.scene--read .lead { font-size: 1.0625rem; max-width: none; }
.scene--read .prose p { margin: 0 0 var(--sp-3); font-size: 1.0625rem; line-height: 1.55; color: #eadfc9; }
.scene--read .prose p:first-child { font-family: var(--font-serif); font-size: 1.25rem; color: #fffaf0; }
@media (min-width: 720px) { .scene--read .panel { width: min(100%, 36rem); } .scene--invitation.scene--read .panel { padding: var(--sp-6) var(--sp-8); } }
/* El capítulo, aunque comparte clases con la invitación, lleva tarjeta de cristal (texto largo) */
.scene--invitation.scene--read .panel {
  background: linear-gradient(180deg, rgba(26, 40, 74, 0.6), rgba(11, 19, 42, 0.56)); border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); overflow-y: auto; padding: var(--sp-5);
}
.transition { margin: var(--sp-5) 0 var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(244, 239, 228, 0.25); }
.transition__title { margin: 0 0 var(--sp-1); font: 400 1.6rem/1.15 var(--font-serif); letter-spacing: -0.03em; color: #fffaf0; }
.transition__body { margin: 0; color: #eadfc9; }

/* Invitación, umbral y entrada: texto largo sobre la foto, con scroll interno en pantallas bajas */
.scene--invitation:not(.scene--read) .panel, .scene--room.is-intro .panel { overflow-y: auto; max-height: calc(100dvh - 96px); scrollbar-width: none; }
.scene--invitation .lead, .scene--room.is-intro .lead { font-size: 1.0625rem; max-width: 44ch; margin-bottom: var(--sp-4); }
.scene--invitation .display, .scene--room.is-intro .display { font-size: clamp(2.1rem, 9.5vw, 3.6rem); }
.panel .note { margin: 0 0 var(--sp-4); font-size: 0.9375rem; font-style: italic; color: #f1e3c6; max-width: 44ch; }
.countdown + .caption { margin-top: var(--sp-3); }

/* Sorpresa final (tarjeta de papel con scroll) y cierre */
.scene--reveal .panel { overflow-y: auto; max-height: calc(100dvh - 96px); scrollbar-width: none; }
@media (min-width: 720px) { .scene--reveal .panel { width: min(100%, 36rem); } }
.prose--paper p { margin: 0 0 var(--sp-3); font-size: 1.0625rem; line-height: 1.55; color: var(--charcoal); }
.prose--paper p:first-child { font: 400 1.25rem/1.3 var(--font-serif); color: var(--graphite); }
.highlight { margin: var(--sp-4) 0; padding: var(--sp-4) 0; border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); font: 400 clamp(1.4rem, 5vw, 1.9rem)/1.2 var(--font-serif); letter-spacing: -0.03em; color: var(--graphite); text-wrap: balance; }
.closing p { margin: 0 0 var(--sp-1); font: 400 1.25rem/1.3 var(--font-serif); color: var(--graphite); }
.closing { margin-bottom: var(--sp-4); }
.letter__last { margin: var(--sp-4) 0 0; font: italic 400 1.15rem/1.45 var(--font-serif); color: var(--graphite); }
.letter__last[hidden] { display: none; }
.letter__body p:first-child { font-size: clamp(1.15rem, 3.4vw, 1.3rem); }

/* Aviso de carga inicial */
.boot-note { position: absolute; left: 0; right: 0; top: 50%; margin: 0; text-align: center; font: italic 400 1.0625rem var(--font-serif); color: var(--ivory-soft); opacity: 0; animation: appear 1s linear 0.6s forwards; }