/* Sin firma — estilos. Paleta: sombras verde azuladas, rosa empolvado, ámbar de vela, cian eléctrico. */
:root {
  --noche: #071213;
  --fondo: #0c1c1e;
  --verde: #14302f;
  --teal: #1f4f4c;
  --rosa: #dba6ad;
  --rosa-osc: #a55f6c;
  --ambar: #e9b765;
  --ambar-osc: #8a6427;
  --cian: #74e6e8;
  --papel: #e7d3a9;
  --tinta: #2b1d14;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --titulo: 'IM Fell English', 'Cormorant Garamond', Georgia, serif;
  --mano: 'La Belle Aurore', 'Snell Roundhand', 'Bradley Hand', cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--noche); overflow: hidden; }
body { font-family: var(--serif); color: var(--papel); font-size: 18px; line-height: 1.35; }
button { font: inherit; color: inherit; cursor: pointer; }
.oculto { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; overflow: clip; user-select: none; -webkit-user-select: none; }

.pantalla { position: absolute; inset: 0; display: none; }
.pantalla.activa { display: flex; animation: aparecer .7s ease both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Película: grano y viñeta ---------- */
.vineta { position: absolute; inset: 0; pointer-events: none; z-index: 80;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(3, 9, 10, .55) 82%, rgba(2, 6, 7, .9) 100%); }
.grano { position: absolute; inset: -50%; pointer-events: none; z-index: 81; opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grano .9s steps(6) infinite; }
@keyframes grano {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, -4%); } 80% { transform: translate(7%, 6%); } 100% { transform: translate(0, 0); } }

/* ---------- Botones ---------- */
.boton { background: linear-gradient(#17393a, #0e2526); border: 1px solid var(--ambar-osc); color: var(--papel);
  padding: .55em 1.2em; border-radius: 2px; font-family: var(--titulo); font-size: 1rem; letter-spacing: .04em;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 12px rgba(0, 0, 0, .5); transition: filter .2s, transform .1s; }
.boton:hover { filter: brightness(1.25); }
.boton:active { transform: translateY(1px); }
.boton.principal { background: linear-gradient(#b06a77, #7c4350); border-color: var(--rosa); color: #fff3ea; }
.boton.chico { font-size: .85rem; padding: .35em .8em; }
.boton:disabled { opacity: .45; cursor: default; filter: none; }
.boton b { color: var(--ambar); font-weight: 400; }

/* ---------- Inicio ---------- */
#p-inicio { align-items: flex-end; justify-content: center; }
.inicio-fondo { position: absolute; inset: 0; background: #060e0f url(../assets/img/ui/portada.jpg) center 30% / cover no-repeat;
  animation: respirar 16s ease-in-out infinite alternate; }
@media (min-aspect-ratio: 1/1) { .inicio-fondo { background-size: contain; background-position: center; } }
@keyframes respirar { from { transform: scale(1); } to { transform: scale(1.05); } }
.inicio-caja { position: relative; z-index: 2; width: 100%; text-align: center; padding: 6vh 20px max(4vh, 24px);
  background: linear-gradient(transparent, rgba(4, 11, 12, .82) 30%, rgba(4, 11, 12, .96)); }
.sobretitulo { margin: 0; font-family: var(--titulo); font-style: italic; color: var(--ambar); letter-spacing: .25em; font-size: .8rem; text-transform: uppercase; }
.titulo { margin: 0; font-family: var(--mano); font-weight: 400; font-size: clamp(3.4rem, 15vw, 6.5rem); line-height: 1.05; color: var(--rosa);
  text-shadow: 0 0 22px rgba(219, 166, 173, .35), 0 3px 0 rgba(0, 0, 0, .6); }
.bajada { margin: .2em 0 1.1em; font-style: italic; font-size: 1.05rem; }
.creditos { margin: 1.2em 0 0; font-size: .82rem; opacity: .75; }
.ia { margin: .25em 0 0; font-size: .82rem; color: var(--cian); letter-spacing: .05em; }

/* ---------- Prólogo ---------- */
#p-prologo { align-items: center; justify-content: center; }
.prologo-fondo { position: absolute; inset: -4%; background: url(../assets/img/escenarios/molino_exterior.jpg) center / cover; animation: derivar 18s ease-out both; }
@keyframes derivar { from { transform: scale(1.12) translateX(-2%); } to { transform: scale(1) translateX(0); } }
.lluvia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.prologo-texto { position: relative; z-index: 3; max-width: 34em; margin: 0 22px; text-align: center; font-size: 1.2rem;
  text-shadow: 0 2px 8px #000, 0 0 2px #000; }
.prologo-texto p { margin: 0 0 .7em; opacity: 0; animation: aparecer 1.4s ease forwards; }
.prologo-texto p:nth-child(2) { animation-delay: 2.2s; }
.prologo-texto p:nth-child(3) { animation-delay: 5s; }
.prologo-texto .regla { font-family: var(--titulo); font-style: italic; color: var(--ambar); }
.prologo-texto .boton { margin-top: .6em; }
.barra { height: 2px; background: rgba(255, 255, 255, .15); margin: 1.2em auto 0; width: 160px; }
.barra i { display: block; height: 100%; width: 0; background: var(--ambar); }

/* ---------- Rayo ---------- */
.rayo { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4;
  background: radial-gradient(ellipse at var(--rx, 60%) var(--ry, 20%), rgba(200, 255, 255, .85), rgba(116, 230, 232, .35) 35%, transparent 75%); mix-blend-mode: screen; }
.rayo.cae { animation: rayo .9s ease-out; }
@keyframes rayo { 0% { opacity: 0; } 6% { opacity: 1; } 14% { opacity: .15; } 22% { opacity: .85; } 100% { opacity: 0; } }

/* ---------- HUD ---------- */
#hud { position: absolute; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 56px 8px 12px; background: linear-gradient(rgba(4, 11, 12, .9), transparent); pointer-events: none; }
#hud > * { pointer-events: auto; }
.reloj { display: flex; align-items: flex-end; gap: 8px; font-family: var(--titulo); font-size: 1.15rem; color: var(--ambar); }
.vela { position: relative; width: 14px; height: 44px; display: flex; flex-direction: column; justify-content: flex-end; }
.cera { width: 100%; height: calc(var(--resto, 1) * 34px + 3px); background: linear-gradient(90deg, #cdbb97, #f5ead0 45%, #b9a57d); border-radius: 3px 3px 1px 1px; transition: height 1s linear; }
.llamita { width: 9px; height: 14px; margin: 0 auto -1px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 75%, #fff 0 18%, #ffd67a 40%, #e8843a 75%, transparent 78%);
  box-shadow: 0 0 14px 5px rgba(233, 183, 101, .5); transform-origin: 50% 100%; animation: titilar 1.3s infinite; }
@keyframes titilar { 0%, 100% { transform: scale(1, 1) rotate(-2deg); opacity: 1; } 25% { transform: scale(.9, 1.12) rotate(3deg); opacity: .85; }
  50% { transform: scale(1.06, .92) rotate(-4deg); } 75% { transform: scale(.94, 1.08) rotate(2deg); opacity: .9; } }
.urgente .reloj { color: #ff8f7a; animation: latir .8s infinite; }
@keyframes latir { 50% { opacity: .55; } }
.fase { flex: 1; font-family: var(--titulo); font-style: italic; font-size: .85rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.musica { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 10px; z-index: 61; width: 36px; padding: .35em 0; }
.musica.muda { opacity: .45; text-decoration: line-through; }

/* ---------- Tablero ---------- */
#p-tablero { flex-direction: column; align-items: center; gap: 10px; padding: 62px 10px max(10px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 20%, #17393a, var(--noche) 75%); overflow-y: auto; }
.tablero-marco { width: min(100%, calc((100dvh - 370px) * 1.777)); min-width: min(100%, 340px); flex: none; padding: 5px;
  background: linear-gradient(135deg, #6b4d1f, #2c1f0d 40%, #8a6427); box-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.tablero { position: relative; aspect-ratio: 1672 / 941; background: url(../assets/img/ui/tablero.jpg) center / cover; }
.zona { position: absolute; background: none; border: 0; padding: 0; border-radius: 12px; }
.zona::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: .25s; }
.zona.abierta::after { border-color: #ffd58a; border-width: 3px; box-shadow: 0 0 22px rgba(233, 183, 101, .7), inset 0 0 18px rgba(233, 183, 101, .35); animation: llamar 2.2s ease-in-out infinite; }
.zona.cerrada { background: rgba(7, 18, 19, .5); cursor: default; }
.zona.cerrada span { position: absolute; inset: auto 0 6%; text-align: center; font-family: var(--titulo); font-style: italic; font-size: clamp(.5rem, 1.6vw, .85rem); color: var(--papel); text-shadow: 0 1px 3px #000; }
@keyframes llamar { 50% { opacity: .55; } }
.zona.abierta span { position: absolute; left: 50%; top: 4%; translate: -50% 0; white-space: nowrap; font-family: var(--titulo); font-size: clamp(.55rem, 1.5vw, .8rem); color: #1a0f08; background: var(--ambar); padding: 1px 8px; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.6); }

.sospechosas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 620px); flex: none; }
.ficha-mini { position: relative; padding: 3px; background: linear-gradient(135deg, #8a6427, #2c1f0d 45%, #6b4d1f); border: 0; text-align: center; }
.ficha-mini img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; filter: saturate(.9); }
.ficha-mini span { display: block; font-family: var(--titulo); font-size: clamp(.62rem, 2.6vw, .85rem); padding: 3px 0 1px; color: var(--papel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-mini.interrogada::before { content: 'declaró'; position: absolute; top: 8px; left: -2px; z-index: 2; background: var(--rosa-osc); color: #fff; font-size: .62rem; font-family: var(--titulo); padding: 1px 7px; letter-spacing: .06em; }
.ficha-mini:hover img { filter: saturate(1.1) brightness(1.1); }
.pie { flex: none; }

/* ---------- Lugar (escena 2.5D) ---------- */
#p-lugar { background: #000; }
.escena { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: none; }
.mundo { position: absolute; left: 0; top: 0; will-change: transform; background-size: 100% 100%; }
.niebla { position: absolute; inset: -10% -40%; pointer-events: none; opacity: .5; mix-blend-mode: screen; z-index: 2;
  background: radial-gradient(ellipse 30% 14% at 25% 78%, rgba(150, 215, 210, .32), transparent 70%),
    radial-gradient(ellipse 36% 12% at 68% 86%, rgba(150, 215, 210, .26), transparent 70%),
    radial-gradient(ellipse 24% 10% at 48% 64%, rgba(219, 166, 173, .16), transparent 70%); }
.niebla { margin-left: calc(var(--px, 0) * -120px); }
.niebla.n1 { animation: niebla 46s ease-in-out infinite alternate; }
.niebla.n2 { animation: niebla 67s ease-in-out infinite alternate-reverse; opacity: .35; transform: scaleX(-1); }
@keyframes niebla { from { translate: -14% 0; } to { translate: 14% -2%; } }

.llama { position: absolute; border-radius: 50%; pointer-events: none; aspect-ratio: 1; translate: -50% -50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 214, 140, .75), rgba(233, 150, 70, .28) 38%, transparent 70%); animation: fuego 2.7s infinite; }
.llama:nth-of-type(2n) { animation-duration: 3.4s; animation-delay: -1s; }
@keyframes fuego { 0%, 100% { opacity: .75; scale: 1; } 12% { opacity: .5; scale: .93; } 30% { opacity: .9; scale: 1.06; } 47% { opacity: .6; scale: .97; }
  66% { opacity: .95; scale: 1.1; } 82% { opacity: .55; scale: .95; } }

.objeto { position: absolute; width: 9%; aspect-ratio: 1; translate: -50% -50%; background: none; border: 0; padding: 0; border-radius: 50%; cursor: none; z-index: 3; }
.objeto::before { content: '✦'; position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #fff6dc; font-size: clamp(14px, 1.6vw, 22px);
  text-shadow: 0 0 10px var(--ambar), 0 0 22px var(--ambar); animation: destello 2.6s ease-in-out infinite; }
.objeto:nth-child(3n)::before { animation-delay: -.9s; }
.objeto:nth-child(3n+1)::before { animation-delay: -1.7s; }
.objeto.visto::before { content: '✓'; color: var(--cian); text-shadow: 0 0 8px #000; animation: none; opacity: .7; font-size: 15px; }
@keyframes destello { 0%, 100% { opacity: .15; scale: .7; } 50% { opacity: 1; scale: 1.15; } }

.lente { position: absolute; left: 0; top: 0; width: 170px; height: 170px; border-radius: 50%; pointer-events: none; z-index: 6; display: none;
  border: 6px solid #b08a45; background-repeat: no-repeat;
  box-shadow: 0 0 0 2px #4d3812, 0 8px 30px rgba(0, 0, 0, .7), inset 0 0 26px rgba(0, 0, 0, .55), inset 8px 8px 22px rgba(255, 255, 255, .12); }
.lente::after { content: ''; position: absolute; left: 82%; top: 82%; width: 78px; height: 16px; border-radius: 8px; transform-origin: 0 50%; rotate: 45deg;
  background: linear-gradient(#7a5a28, #3a2a10); box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.lente.activa { display: block; }
.lente.sobre { border-color: var(--cian); box-shadow: 0 0 0 2px #1b5557, 0 0 26px rgba(116, 230, 232, .75), inset 0 0 26px rgba(0, 0, 0, .4); }
.lente em { position: absolute; left: 50%; top: 104%; translate: -50% 0; white-space: nowrap; font-family: var(--titulo); font-size: .9rem; color: var(--papel);
  background: rgba(4, 11, 12, .85); padding: 2px 10px; border: 1px solid var(--ambar-osc); }
.lente em:empty { display: none; }

.lugar-pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 26px 12px max(10px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(4, 11, 12, .92)); }
.lugar-nombre { font-family: var(--titulo); font-style: italic; flex: 1; }
.lugar-cuenta { font-size: .9rem; color: var(--ambar); }

/* ---------- Modal y cartas ---------- */
#modal { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(3, 9, 10, .8); animation: aparecer .25s ease both; }
.carta { position: relative; width: min(100%, 440px); max-height: calc(100dvh - 28px); overflow-y: auto; padding: 20px 20px 16px; color: var(--tinta);
  background: #dcc594 url(../assets/img/ui/papel.jpg) center / 420px; box-shadow: 0 0 0 1px #3a2a10, 0 0 0 5px #7a5a28, 0 0 0 6px #3a2a10, 0 18px 60px #000;
  animation: carta .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.carta.ancha { width: min(100%, 720px); }
@keyframes carta { from { transform: translateY(24px) rotate(-2deg) scale(.94); opacity: 0; } }
.carta::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(72, 48, 18, .55); outline: 1px solid rgba(72, 48, 18, .25); outline-offset: 3px; pointer-events: none; }
.carta .orla { text-align: center; color: var(--rosa-osc); letter-spacing: .5em; font-size: .8rem; margin: 0 0 2px; }
.carta h3 { margin: 0 0 8px; text-align: center; font-family: var(--titulo); font-weight: 400; font-size: 1.45rem; }
.carta h4 { margin: 14px 0 4px; font-family: var(--titulo); font-weight: 400; font-style: italic; font-size: 1rem; color: #6d3a45; border-bottom: 1px solid rgba(72, 48, 18, .35); }
.carta p { margin: 0 0 8px; }
.carta .foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #3a2a10; box-shadow: 0 0 0 3px rgba(122, 90, 40, .6); margin-bottom: 10px; }
.carta .lupa { padding: 8px 10px; background: rgba(43, 29, 20, .1); border-left: 3px solid var(--rosa-osc); font-style: italic; }
.carta .lupa b { font-style: normal; font-family: var(--titulo); font-weight: 400; color: #6d3a45; }
.carta .acciones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.manuscrito { font-family: var(--mano); font-size: 1.5rem; line-height: 1.5; text-align: center; padding: 14px 6px; color: #33211a; }
.manuscrito::before { content: '«'; } .manuscrito::after { content: '»'; }

.ficha { display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.ficha img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 10%; border: 1px solid #3a2a10; box-shadow: 0 0 0 3px rgba(122, 90, 40, .6); }
@media (max-width: 480px) { .ficha { grid-template-columns: 110px 1fr; gap: 10px; } }
.pregunta { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 8px 10px; background: rgba(43, 29, 20, .08); border: 1px solid rgba(72, 48, 18, .5); color: var(--tinta); font-style: italic; }
.pregunta:hover { background: rgba(165, 95, 108, .22); }
.respuesta { font-size: 1.08rem; padding: 6px 10px; border-left: 3px solid var(--teal); }
.respuesta small { display: block; font-style: italic; opacity: .7; margin-bottom: 2px; }

.lista { display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.item img { width: 64px; height: 64px; object-fit: cover; border: 1px solid #3a2a10; }
.item p { margin: 0; font-size: .95rem; }
.item i { opacity: .8; }
.vacio { font-style: italic; opacity: .65; }
.frag { font-family: var(--mano); font-size: 1.2rem; line-height: 1.4; margin: 0 0 4px; }

/* ---------- Acusación ---------- */
#p-acusacion { flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 70px 12px 20px;
  background: radial-gradient(ellipse at 50% 30%, #3a1f27, var(--noche) 75%); overflow-y: auto; }
.encabezado { margin: 0; font-family: var(--mano); font-weight: 400; font-size: clamp(1.9rem, 7vw, 3rem); color: var(--rosa); }
.acusables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(100%, 860px); }
@media (max-width: 620px) { .acusables { grid-template-columns: repeat(2, 1fr); width: min(100%, calc((100dvh - 260px) * .68)); } }
.acusables .ficha-mini span { font-size: .95rem; }
.acusables .ficha-mini:hover { box-shadow: 0 0 26px rgba(219, 166, 173, .6); }
.nota { margin: 0; font-style: italic; opacity: .75; }

/* ---------- Final (provisorio) ---------- */
#p-final { align-items: center; justify-content: center; padding: 60px 14px 20px; background: radial-gradient(ellipse at 50% 30%, #17393a, var(--noche) 75%); overflow-y: auto; }
.final { width: min(100%, 560px); margin: auto; }
.final .carta { width: 100%; max-height: none; }
.final .reescrita { filter: grayscale(1) contrast(1.2) brightness(.8); }
.final ul { margin: 0 0 8px; padding-left: 1.1em; }
.final li { margin-bottom: 3px; }

/* ================= ETAPA 3 ================= */
.inicio-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Tablero: progreso por lugar */
.zona.abierta span b { font-weight: 400; }
.zona.completa::after { border-color: rgba(116, 230, 232, .7); box-shadow: 0 0 14px rgba(116, 230, 232, .45); animation: none; }
.zona.completa span { background: var(--cian); }

/* Aviso para pantallas táctiles */
.aviso-tactil { display: none; position: absolute; left: 50%; top: 64px; translate: -50% 0; z-index: 8; pointer-events: none; white-space: nowrap;
  font-family: var(--titulo); font-style: italic; font-size: .9rem; background: rgba(4, 11, 12, .8); border: 1px solid var(--ambar-osc); padding: 4px 12px; }
.aviso-tactil.ver { display: block; animation: aviso 5s ease forwards; }
@keyframes aviso { 0% { opacity: 0; } 12%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* Finales a pantalla completa */
#p-final { background: #030808; align-items: flex-end; justify-content: center; }
.final-fondo { position: absolute; inset: 0; background: center / cover no-repeat; animation: respirar 20s ease-in-out infinite alternate; transition: filter 1.2s; }
.final-fondo.retrato { background-size: contain; background-position: 50% 0; animation: none; }
@media (max-aspect-ratio: 3/4) { .final-fondo.retrato { background-size: cover; background-position: 50% 15%; } }
.final-fondo.reescrita { filter: grayscale(1) contrast(1.25) brightness(.6); }
.final-fondo.apagada { filter: brightness(.45) saturate(.6); }
.final-fondo.entra { animation: aparecer 1.2s ease both, respirar 20s ease-in-out infinite alternate; }
.final-tinta { position: absolute; inset: 0 0 30%; overflow: hidden; pointer-events: none; padding: 9vh 4vw 0; text-align: center;
  font-family: var(--mano); font-size: clamp(1.3rem, 5vw, 2.3rem); line-height: 1.25; color: var(--rosa); text-shadow: 0 0 8px #000, 0 0 2px #000; rotate: -3deg; }
.final-tinta p { margin: 0 0 .15em; opacity: 0; animation: tinta 1.6s ease forwards; }
@keyframes tinta { from { opacity: 0; letter-spacing: .3em; filter: blur(6px); } to { opacity: .85; letter-spacing: 0; filter: blur(0); } }
.final-caja { position: relative; z-index: 5; width: 100%; max-height: 72%; overflow-y: auto; text-align: center;
  padding: 9vh max(18px, calc(50% - 330px)) max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(3, 8, 8, .86) 22%, rgba(3, 8, 8, .97)); }
.final-caja h2 { margin: 0 0 .15em; font-family: var(--titulo); font-weight: 400; font-size: clamp(1.5rem, 5.5vw, 2.3rem); color: var(--ambar); }
.final-caja .sello { margin: 0; letter-spacing: .4em; font-size: .75rem; color: var(--rosa); }
.final-caja .voz { font-family: var(--mano); font-size: clamp(1.2rem, 4.4vw, 1.55rem); line-height: 1.45; color: #f3e2c2; margin: .2em 0 .6em; min-height: 3em; }
.final-caja .acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.final-caja .tras { animation: aparecer .9s ease both; }
.carta-nueva { display: inline-block; margin: 4px 0; padding: 5px 14px; border: 1px dashed var(--ambar-osc); color: var(--ambar); font-family: var(--titulo); font-style: italic; background: rgba(233, 183, 101, .08); }
.final-caja details { margin: 10px auto 0; max-width: 34em; text-align: left; font-size: .95rem; border-top: 1px solid rgba(233, 183, 101, .25); padding-top: 6px; }
.final-caja summary { cursor: pointer; font-family: var(--titulo); font-style: italic; color: var(--rosa); text-align: center; }
.final-caja ul { margin: 6px 0 0; padding-left: 1.1em; }
.final-caja li { margin-bottom: 4px; }
#rayo-final { z-index: 3; }

/* Colección de cartas */
.cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .cartas { grid-template-columns: repeat(2, 1fr); } }
.naipe { min-height: 150px; padding: 10px 9px; border: 1px solid #3a2a10; box-shadow: 0 0 0 3px rgba(122, 90, 40, .55); background: rgba(255, 248, 225, .35); font-size: .88rem; line-height: 1.25; }
.naipe b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 1rem; color: #6d3a45; margin-bottom: 5px; }
.naipe.oculta { display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--rosa);
  background: repeating-linear-gradient(45deg, #14302f 0 8px, #0f2626 8px 16px); }
.naipe.oculta b { color: var(--ambar); font-size: 1.8rem; margin: 0; }
.naipe.oculta span { font-style: italic; font-size: .8rem; opacity: .8; }
.final-caja { max-height: 64%; scrollbar-width: thin; scrollbar-color: var(--ambar-osc) transparent; padding-top: 7vh; }
.final-caja .voz { font-size: clamp(1.15rem, 3.6vw, 1.45rem); }
.final-tinta { inset: 0 0 52%; padding-top: 7vh; font-size: clamp(1.15rem, 4.4vw, 2.1rem); }
@media (max-aspect-ratio: 1/1) { .final-fondo.secreto { background-position: 88% 50%; } }