/* JON MARRICK · estilo del juego.
   Azul petroleo casi negro, laton envejecido y un turquesa atlante muy
   dosificado. Titulos en Cinzel, dialogos en Crimson Pro, interfaz en
   Alegreya Sans. Pensado primero para el movil en vertical. */
@font-face { font-family: 'Cinzel'; src: url('../fuentes/cinzel-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('../fuentes/cinzel-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('../fuentes/crimson-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('../fuentes/crimson-500i.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../fuentes/alegreya-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../fuentes/alegreya-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --fondo: #071118; --fondo2: #0d1c25; --panel: rgba(10, 22, 30, 0.94); --panel2: #12262f;
  --oro: #d9b26a; --oro-claro: #f3dca3; --oro-osc: #8e6a32; --laton: #b78a3e;
  --texto: #efe5cf; --texto2: #b9b09c; --turquesa: #4cc3bd; --rojo: #b3241a;
  --borde: 1px solid rgba(217, 178, 106, 0.55);
  --sombra: 0 10px 40px rgba(0, 0, 0, 0.6);
  --seg-ar: env(safe-area-inset-top, 0px); --seg-ab: env(safe-area-inset-bottom, 0px);
  --fs: 1;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto); overflow: hidden; overscroll-behavior: none; }
body { font: 500 calc(16px * var(--fs)) 'Alegreya Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
body.texto-grande { --fs: 1.16; }
button { font: inherit; color: inherit; cursor: pointer; }
img { -webkit-user-drag: none; }
.oculto, [hidden] { display: none !important; }
#app { position: fixed; inset: 0; }

/* ── Pantallas ── */
.pantalla { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--fondo); }
.pantalla.activa { display: flex; animation: aparece 0.45s ease; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.desliza { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(24px + var(--seg-ab)); }

/* ── Botones ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px;
  border: 1px solid rgba(217, 178, 106, 0.6); border-radius: 10px; background: linear-gradient(180deg, #17303b, #0c1d25);
  color: var(--oro-claro); font: 700 calc(14px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.12), 0 4px 14px rgba(0, 0, 0, 0.35); transition: transform 0.12s, filter 0.2s; }
.boton:active { transform: translateY(1px) scale(0.99); }
.boton:hover { filter: brightness(1.12); }
.boton-oro { background: linear-gradient(180deg, #e9c47a, #b98a3a 55%, #8e6527); color: #1a1006; border-color: #f3dca3; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4); }
.boton-grande { min-height: 54px; padding: 12px 28px; font-size: calc(15px * var(--fs)); }
.boton-icono { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(217, 178, 106, 0.55); background: rgba(8, 18, 24, 0.82);
  color: var(--oro-claro); display: grid; place-items: center; position: relative; backdrop-filter: blur(4px); }
.boton-icono svg { width: 22px; height: 22px; }
.boton-icono .punto { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--turquesa); box-shadow: 0 0 8px var(--turquesa); }
.boton-redondo { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--oro); background: radial-gradient(circle at 40% 35%, #3b2a14, #120b04); color: var(--oro-claro); font-size: 26px; }
.enlace { background: none; border: 0; padding: 4px; color: var(--oro); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.fila-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.columna-botones { display: flex; flex-direction: column; gap: 10px; }

/* ── Carga ── */
#pCarga { align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.carga-fondo, .menu-fondo, .aventura-fondo { pointer-events: none; }
#pCarga > *:not(.carga-fondo) { position: relative; }
.carga-fondo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #16303a 0%, #071118 65%); }
.carga-logo { position: relative; width: min(82vw, 560px); filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.7)); }
.carga-sub, .menu-sub { position: relative; margin: -8px 0 0; font: 700 calc(15px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.42em; color: var(--oro); text-transform: uppercase; }
.carga-barra { position: relative; width: min(70vw, 320px); height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 18px; }
.carga-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--oro-osc), var(--oro-claro)); transition: width 0.2s; }
.carga-texto { position: relative; color: var(--texto2); font-style: italic; font-family: 'Crimson Pro', serif; }
.carga-firma { position: absolute !important; bottom: calc(18px + var(--seg-ab)); color: var(--texto2); font-size: 13px; letter-spacing: 0.1em; }

/* ── Biblioteca de aventuras ── */
#pMenu { padding-top: var(--seg-ar); }
.menu-fondo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, #1a3440 0%, #071118 60%); }
.menu-fondo canvas { width: 100%; height: 100%; display: block; }
.menu-cabeza { position: relative; text-align: center; padding: 14px 16px 0; }
.menu-logo { width: min(64vw, 380px); filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.7)); }
.menu-cabeza .menu-sub { margin-top: -4px; font-size: calc(12px * var(--fs)); }
.menu-tit { position: relative; margin: 16px 16px 8px; font: 700 calc(13px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.32em; color: var(--oro); text-align: center; }
.biblioteca { position: relative; flex: 1; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 6px 16px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; align-items: stretch; }
.biblioteca::-webkit-scrollbar { display: none; }
.portada { position: relative; flex: 0 0 min(68vw, 300px); max-height: 62vh; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; scroll-snap-align: center;
  border: 1px solid rgba(217, 178, 106, 0.6); box-shadow: var(--sombra); cursor: pointer; background: #0c1a22; transition: transform 0.25s; align-self: center; }
.portada:active { transform: scale(0.985); }
.portada-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 6s ease; }
.portada:hover .portada-img { transform: scale(1.05); }
.portada-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 10, 14, 0) 35%, rgba(4, 10, 14, 0.82) 70%, rgba(4, 10, 14, 0.96)); }
.portada-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.portada-n { font: 700 calc(11px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.24em; color: var(--oro); }
.portada h3 { margin: 0; font: 900 calc(22px * var(--fs)) 'Cinzel', serif; line-height: 1.1; color: #fff7e6; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.portada-caps, .portada-prog { font-size: calc(13px * var(--fs)); color: var(--texto2); }
.portada-barra { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); overflow: hidden; margin-top: 4px; }
.portada-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--turquesa), var(--oro-claro)); }
.portada-estado { align-self: flex-start; margin-top: 8px; padding: 7px 14px; border-radius: 8px; font: 700 calc(12px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.12em;
  background: linear-gradient(180deg, #e9c47a, #a87a32); color: #1a1006; }
.estado-COMING_SOON .portada-img { filter: grayscale(0.55) brightness(0.65); }
.estado-COMING_SOON .portada-estado { background: rgba(10, 22, 30, 0.85); color: var(--texto2); border: var(--borde); }
.estado-UNLOCK .portada-estado { background: linear-gradient(180deg, #3fb7b4, #1f6f6c); color: #f4fffe; }
.biblioteca-nota { flex: 0 0 auto; align-self: center; writing-mode: vertical-rl; color: var(--texto2); font: 700 11px 'Cinzel', serif; letter-spacing: 0.3em; opacity: 0.6; }
.menu-inferior { position: relative; display: flex; gap: 10px; justify-content: center; padding: 8px 16px calc(14px + var(--seg-ab)); flex-wrap: wrap; }
.menu-inferior .boton { flex: 1; max-width: 220px; }

/* ── Ficha de aventura ── */
#pAventura { background: #050c10; }
.aventura-fondo { position: absolute; inset: 0; overflow: hidden; }
.aventura-fondo img { width: 100%; height: 70%; object-fit: cover; opacity: 0.55; mask-image: linear-gradient(180deg, #000 30%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); }
.cabecera { position: relative; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--seg-ar)) 16px 8px; }
.cabecera h2 { margin: 0; font: 700 calc(16px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.24em; color: var(--oro); }
.cabecera.transparente { background: none; }
.aventura-cuerpo { position: relative; padding-top: 22vh; }
.av-cabeza { text-align: center; max-width: 560px; margin: 0 auto; }
.av-cabeza h2 { margin: 6px 0 4px; font: 900 calc(30px * var(--fs)) 'Cinzel', serif; line-height: 1.1; color: #fff7e6; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9); }
.av-lema { margin: 0 0 10px; font: italic 500 calc(18px * var(--fs)) 'Crimson Pro', serif; color: var(--oro-claro); }
.av-resumen { margin: 0 auto 18px; max-width: 460px; color: var(--texto); line-height: 1.5; font-family: 'Crimson Pro', serif; font-size: calc(18px * var(--fs)); }
.av-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.av-gratis { margin: 14px 0 0; color: var(--texto2); font-size: calc(14px * var(--fs)); }
.av-restaurar { text-align: center; margin-top: 18px; font-size: calc(14px * var(--fs)); }
.caps { list-style: none; margin: 22px auto 0; padding: 0; max-width: 560px; display: flex; flex-direction: column; gap: 6px; }
.cap { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 10px; background: rgba(12, 26, 34, 0.86); border: 1px solid rgba(217, 178, 106, 0.2); cursor: pointer; }
.cap-n { font: 700 14px 'Cinzel', serif; color: var(--oro); }
.cap-t { font: 700 calc(14px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.04em; }
.cap-e { font-size: calc(12px * var(--fs)); color: var(--texto2); text-align: right; }
.cap.hecho { border-color: rgba(76, 195, 189, 0.5); }
.cap.hecho .cap-e { color: var(--turquesa); }
.cap.obra, .cap.cerrado { opacity: 0.62; }
.cap.cerrado .cap-e::before { content: ''; display: inline-block; width: 10px; height: 12px; margin-right: 6px; vertical-align: -1px; background: currentColor; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 0 1 12 0v2h1v12H5V10zm2 0h8V8a4 4 0 0 0-8 0z"/></svg>') center/contain no-repeat; }

/* ── Partida ── */
#pJuego { background: #04080b; }
.lienzo-caja { position: absolute; inset: 0; }
.lienzo-caja canvas { display: block; touch-action: none; }
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: 10px; padding: calc(10px + var(--seg-ar)) 12px 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-der { margin-left: auto; display: flex; gap: 8px; }
.objetivo { display: flex; align-items: center; gap: 9px; max-width: min(56vw, 440px); padding: 9px 14px 9px 10px; border-radius: 12px; background: rgba(8, 18, 24, 0.84);
  border: var(--borde); font: 600 calc(14px * var(--fs)) 'Crimson Pro', serif; color: var(--texto); line-height: 1.25; backdrop-filter: blur(4px); }
.objetivo svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--oro); }
.objetivo.nuevo { animation: objetivoNuevo 1.6s ease; }
@keyframes objetivoNuevo { 0% { transform: translateY(-12px); opacity: 0; box-shadow: 0 0 0 rgba(243, 220, 163, 0); } 25% { transform: none; opacity: 1; box-shadow: 0 0 26px rgba(243, 220, 163, 0.65); } 100% { box-shadow: 0 0 0 rgba(243, 220, 163, 0); } }
.pista { position: absolute; left: 50%; bottom: calc(24px + var(--seg-ab)); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px;
  background: rgba(8, 18, 24, 0.88); border: 1px solid rgba(76, 195, 189, 0.55); color: #dff7f5; font-size: calc(15px * var(--fs)); text-align: center; pointer-events: none; animation: pistaLatido 2.4s ease-in-out infinite; }
@keyframes pistaLatido { 50% { box-shadow: 0 0 18px rgba(76, 195, 189, 0.4); } }

/* ── Dialogo ── */
.dialogo { position: absolute; left: 50%; bottom: calc(14px + var(--seg-ab)); transform: translateX(-50%); width: min(calc(100vw - 20px), 760px);
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 16px 14px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 30, 39, 0.96), rgba(7, 16, 22, 0.97)); border: 1px solid rgba(217, 178, 106, 0.7); box-shadow: var(--sombra); animation: aparece 0.25s ease; cursor: pointer;
  z-index: 38; }   /* por encima de un puzle abierto (35): Jon comenta el puzle sin que el marco le tape la cara */
.dialogo-retrato { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; border: 2px solid var(--laton); background: #1b120a; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4); }
.dialogo-retrato img { width: 100%; height: 100%; object-fit: cover; }
.dialogo[data-quien^="ELIAS"] .dialogo-retrato { border-color: var(--rojo); box-shadow: 0 0 16px rgba(179, 36, 26, 0.55); }
.dialogo-nombre { display: block; font: 700 calc(12px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.2em; color: var(--oro); margin-bottom: 3px; text-transform: uppercase; }
.dialogo-texto { margin: 0; font: 500 calc(19px * var(--fs)) 'Crimson Pro', serif; line-height: 1.3; color: var(--texto); min-height: 1.3em; }
.dialogo[data-quien^="ELIAS"] .dialogo-texto { font-style: italic; color: #f0d9c6; }
.dialogo-original { margin: 4px 0 0; font: italic 500 calc(14px * var(--fs)) 'Crimson Pro', serif; color: var(--texto2); }
.dialogo-sigue { position: absolute; right: 14px; bottom: 9px; width: 10px; height: 10px; border-right: 2px solid var(--oro); border-bottom: 2px solid var(--oro); transform: rotate(45deg); opacity: 0; }
.dialogo.lista .dialogo-sigue { opacity: 1; animation: sigue 1s ease-in-out infinite; }
@keyframes sigue { 50% { transform: translateY(3px) rotate(45deg); } }

/* ── Ventanas ── */
.modal { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 9, 0.66); z-index: 30; opacity: 0; transition: opacity 0.25s; }
.modal.abierto { opacity: 1; }
.modal-caja { width: min(100%, 520px); max-height: calc(100vh - 32px); overflow-y: auto; }
.panel, .ficha, .placa, .muro, .fin-cap { position: relative; padding: 22px 20px; border-radius: 16px; background: linear-gradient(180deg, #11252f, #08151c); border: 1px solid rgba(217, 178, 106, 0.7); box-shadow: var(--sombra); text-align: center; }
.panel h3, .ficha h3 { margin: 0 0 14px; font: 700 calc(18px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.12em; color: var(--oro-claro); }
.pregunta { font: 500 calc(19px * var(--fs)) 'Crimson Pro', serif; line-height: 1.4; margin: 0 0 18px; }
.vacio { color: var(--texto2); font-style: italic; font-family: 'Crimson Pro', serif; font-size: calc(17px * var(--fs)); }
.nota { color: var(--texto2); font-size: 14px; text-align: center; }
.ficha-nuevo { margin: 0 0 8px; font: 700 calc(11px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.3em; color: var(--turquesa); }
.ficha-img { width: min(62vw, 240px); aspect-ratio: 1; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(255, 210, 130, 0.22) 0%, rgba(255, 210, 130, 0) 68%); animation: fichaBrillo 3s ease-in-out infinite; }
.ficha-img img { max-width: 86%; max-height: 86%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); }
@keyframes fichaBrillo { 50% { background: radial-gradient(circle, rgba(255, 210, 130, 0.32) 0%, rgba(255, 210, 130, 0) 72%); } }
.ficha-texto { font: 500 calc(19px * var(--fs)) 'Crimson Pro', serif; line-height: 1.45; margin: 0 0 16px; color: var(--texto); }
.ficha-original { font: italic 500 calc(15px * var(--fs)) 'Crimson Pro', serif; color: var(--texto2); margin: -6px 0 16px; }
.inv-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 16px; }
.inv-objeto { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(217, 178, 106, 0.35); background: rgba(5, 12, 16, 0.6); }
.inv-objeto img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.inv-objeto span { font-size: calc(13px * var(--fs)); line-height: 1.2; color: var(--texto); }
.panel-diario { text-align: left; }
.diario-entrada { padding: 14px 16px; margin-bottom: 10px; border-radius: 10px; background: linear-gradient(180deg, #e9dcc0, #d8c7a3); color: #2a1d0e; font: italic 500 calc(18px * var(--fs)) 'Crimson Pro', serif; line-height: 1.45; box-shadow: inset 0 0 30px rgba(120, 80, 30, 0.25); }
.diario-entrada p { margin: 0; }
.placa { background: linear-gradient(180deg, #c49a52, #8e6527); border-color: #f3dca3; }
.placa-texto { margin: 6px 0 12px; font: 900 calc(20px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.12em; color: #2a1806; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5); line-height: 1.35; }
.placa-trad { margin: 0 0 16px; font: italic 500 calc(16px * var(--fs)) 'Crimson Pro', serif; color: #3a2610; }
.placa .boton { background: linear-gradient(180deg, #17303b, #0c1d25); color: var(--oro-claro); }
.muro { padding: 0 0 20px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.muro-img { width: 100%; height: 190px; background-size: cover; background-position: center 30%; mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); }
.muro-1 { margin: -18px 0 0; font: 700 calc(12px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.3em; color: var(--turquesa); }
.muro-2 { margin: 0 16px; font: 900 calc(22px * var(--fs)) 'Cinzel', serif; line-height: 1.15; color: #fff7e6; }
.muro-texto { margin: 0 22px 6px; font: 500 calc(17px * var(--fs)) 'Crimson Pro', serif; line-height: 1.4; color: var(--texto); }
.muro .boton { width: calc(100% - 44px); }
.muro-prueba { margin: 4px 16px 0; font-size: 13px; color: var(--texto2); }
.fin-cap-1 { margin: 0; font: 700 calc(12px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.32em; color: var(--turquesa); }
.fin-cap h2 { margin: 6px 0 14px; font: 900 calc(30px * var(--fs)) 'Cinzel', serif; color: var(--oro-claro); }
.fin-cap-diario { margin: 0 0 16px; padding: 14px 16px; border-radius: 10px; text-align: left; background: linear-gradient(180deg, #e9dcc0, #d8c7a3); color: #2a1d0e; font: italic 500 calc(17px * var(--fs)) 'Crimson Pro', serif; line-height: 1.45; }
.fin-cap-sig { display: flex; flex-direction: column; gap: 3px; margin: 0 0 18px; }
.fin-cap-sig span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto2); }
.fin-cap-sig b { font: 700 calc(17px * var(--fs)) 'Cinzel', serif; color: var(--oro); }
.fin-cap-sig em { color: var(--texto2); font-size: 14px; }

/* ── Avisos y fundido ── */
.aviso { position: absolute; left: 50%; top: calc(66px + var(--seg-ar)); transform: translate(-50%, -12px); padding: 10px 18px; border-radius: 10px; background: rgba(8, 18, 24, 0.94); border: var(--borde); font-size: calc(15px * var(--fs)); opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; z-index: 40; max-width: calc(100vw - 32px); text-align: center; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso.oro { border-color: var(--oro-claro); color: var(--oro-claro); }
.fundido { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s; z-index: 50; }
.fundido.negro { opacity: 1; }

/* ── Cinematicas ── */
.cine { position: absolute; inset: 0; background: #000; z-index: 45; opacity: 0; transition: opacity 0.6s; }
.cine.abierta { opacity: 1; }
.cine video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s; }
.cine video.visible { opacity: 1; }
.cine-sub { position: absolute; left: 50%; bottom: calc(26px + var(--seg-ab)); transform: translateX(-50%); width: min(calc(100vw - 24px), 820px); text-align: center; text-shadow: 0 2px 8px #000, 0 0 2px #000; }
.cine-sub b { display: block; font: 700 calc(12px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.24em; color: var(--oro); margin-bottom: 4px; text-transform: uppercase; }
.cine-sub span { font: 500 calc(22px * var(--fs)) 'Crimson Pro', serif; line-height: 1.3; color: #fff; }
.cine-sub em { display: block; margin-top: 4px; font: italic 500 calc(15px * var(--fs)) 'Crimson Pro', serif; color: #d7cdb9; }
.cine-sub.entra { animation: aparece 0.4s ease; }
.cine-titulo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; }
.cine-titulo.entra { animation: cartela 4.8s ease forwards; }
@keyframes cartela { 0% { opacity: 0; letter-spacing: 0.5em; } 18% { opacity: 1; } 100% { opacity: 1; letter-spacing: 0.32em; } }
.cartela-cap { font: 700 calc(15px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.5em; color: var(--oro); }
.cartela-tit { font: 900 calc(clamp(26px, 6vw, 56px) * var(--fs)) 'Cinzel', serif; letter-spacing: 0.18em; color: #fff7e6; text-shadow: 0 0 30px rgba(217, 178, 106, 0.4); }
.cine-saltar { position: absolute; right: 14px; top: calc(14px + var(--seg-ar)); padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 14px; }

/* ── Puzles ── */
.puzle { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; padding: 12px; background: rgba(2, 6, 9, 0.8); opacity: 0; transition: opacity 0.3s; }
.puzle.abierto { opacity: 1; }
.p-marco { width: min(100%, 760px); max-height: calc(100vh - 24px); overflow-y: auto; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #11252f, #08151c); border: 1px solid rgba(217, 178, 106, 0.7); box-shadow: var(--sombra); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.p-marco h3 { margin: 0; font: 700 calc(17px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.14em; color: var(--oro-claro); }
.p-ayuda { margin: 0; color: #cfe9e7; font-size: calc(15px * var(--fs)); }
.p-cerrar { min-height: 40px; }
.p-radio-cuerpo { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.p-radio-dial { width: 100%; height: clamp(150px, 34vw, 230px); border-radius: 10px; touch-action: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5); }
.p-radio-lamparas { display: flex; gap: 14px; }
.p-radio-lamparas i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a1410, #1d0605); border: 1px solid #000; transition: all 0.3s; }
.p-radio-lamparas i.encendida { background: radial-gradient(circle at 40% 35%, #ff8a70, #c1281b); box-shadow: 0 0 14px #ff4a33; }
.p-radio-oido { display: flex; gap: 10px; align-items: baseline; justify-content: center; font-family: 'Crimson Pro', serif; }
.p-radio-oido span { color: var(--texto2); font-size: 14px; }
.p-radio-oido b { font: 700 18px 'Cinzel', serif; letter-spacing: 0.12em; color: var(--oro-claro); }
.p-radio-mandos { display: flex; gap: 22px; }
.p-globo-lienzo { width: 100%; height: min(62vh, 520px); touch-action: none; cursor: grab; }
.p-carta-mesa { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #2a1d10; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6); }
.p-carta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-carta-ruta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.p-carta-ruta path { fill: none; stroke: #b3241a; stroke-width: 0.8; stroke-dasharray: 2 1.6; stroke-dashoffset: 120; opacity: 0; }
.p-carta-mesa.ruta .p-carta-ruta path { opacity: 1; animation: ruta 1.6s ease forwards; }
@keyframes ruta { from { stroke-dasharray: 0 200; } to { stroke-dasharray: 200 0; } }
.p-carta-et { position: absolute; font: 700 calc(11px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.12em; color: #3a240e; background: rgba(240, 225, 190, 0.7); padding: 2px 6px; border-radius: 4px; }
.et-lisboa { right: 15.5%; top: 53%; } .et-azores { left: 17%; top: 67%; }
/* la carta viene recortada con sus bordes rotos: debajo se ve la mesa */
.p-carta-mesa { background: radial-gradient(ellipse at 50% 40%, #3b2815, #1e140a 75%); }
.p-carta-img { object-fit: contain; }
.p-carta-ruta circle { fill: #b3241a; opacity: 0; }
.p-carta-mesa.ruta .p-carta-ruta circle { opacity: 1; transition: opacity 0.4s 1.4s; }
.p-carta-pagina { position: absolute; width: 22%; left: 40%; bottom: -70%; transform: rotate(-6deg); transition: bottom 0.6s ease, opacity 0.6s; opacity: 0; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); }
.p-carta-pagina.puesta { bottom: 52%; opacity: 0.92; }
/* resuelto el indice, la hoja se aparta para que se vea la ruta entera */
.p-carta-mesa.ruta .p-carta-pagina { bottom: 70%; opacity: 0; }
.p-carta-bandeja { display: flex; gap: 10px; }
.p-carta-objeto { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; border: 1px solid var(--oro); background: rgba(5, 12, 16, 0.7); touch-action: none; animation: pistaLatido 2s infinite; }
.p-carta-objeto img { width: 46px; height: 46px; object-fit: contain; }
.p-carta-objeto.usado { opacity: 0.35; animation: none; pointer-events: none; }
.p-fantasma { position: fixed; width: 90px; transform: translate(-50%, -50%) rotate(-6deg); pointer-events: none; z-index: 60; opacity: 0.9; }
.p-carta-indice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.p-col { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: rgba(233, 220, 192, 0.92); color: #2a1d0e; }
.p-col b { font: 700 calc(12px * var(--fs)) 'Cinzel', serif; letter-spacing: 0.1em; margin-bottom: 2px; }
.p-col button { border: 1px solid rgba(60, 40, 15, 0.35); background: rgba(255, 255, 255, 0.4); border-radius: 6px; padding: 5px 0; font: 700 15px 'Cinzel', serif; color: #2a1d0e; }
.p-col button.bien { background: #2f6d4a; color: #fff; border-color: #1c4a30; }
.p-col button.mal { animation: tiembla 0.4s; background: #a33b2c; color: #fff; }
.p-col.hecha button:not(.bien) { opacity: 0.35; }
@keyframes tiembla { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── Ajustes y Archivo ── */
#pAjustes, #pArchivo { background: radial-gradient(ellipse at 50% 0%, #15303b, #071118 70%); }
.ajuste { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid rgba(217, 178, 106, 0.15); max-width: 560px; margin: 0 auto; }
.ajuste label { font-size: calc(16px * var(--fs)); }
.ajuste input[type=range] { width: min(36vw, 200px); accent-color: var(--oro); }
.ajuste.peligro { grid-template-columns: 1fr; border: 0; margin-top: 10px; }
.interruptor { width: 50px; height: 28px; border-radius: 14px; border: 1px solid rgba(217, 178, 106, 0.5); background: #1a2a31; position: relative; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #6b7a80; transition: all 0.2s; }
.interruptor.si { background: #1f5f5b; }
.interruptor.si::after { left: 25px; background: var(--oro-claro); }
.opciones { display: flex; gap: 6px; grid-column: 2 / 4; flex-wrap: wrap; justify-content: flex-end; }
.opcion { padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(217, 178, 106, 0.35); background: transparent; color: var(--texto2); font-size: 14px; }
.opcion.activa { border-color: var(--oro); color: var(--oro-claro); background: rgba(217, 178, 106, 0.12); }
.pestanas { display: flex; gap: 6px; padding: 4px 16px 0; justify-content: center; }
.pestanas button { padding: 9px 16px; border-radius: 10px 10px 0 0; border: 1px solid rgba(217, 178, 106, 0.3); border-bottom: 0; background: rgba(10, 22, 30, 0.6); color: var(--texto2); font: 700 13px 'Cinzel', serif; letter-spacing: 0.08em; }
.pestanas button.activa { color: var(--oro-claro); background: rgba(18, 38, 47, 0.95); border-color: var(--oro); }
.arch-av { max-width: 600px; margin: 0 auto 18px; }
.arch-av h3 { font: 700 14px 'Cinzel', serif; letter-spacing: 0.12em; color: var(--oro); margin: 6px 0; }

/* ── Ordenador: mas aire ── */
@media (min-width: 900px) {
  .portada { flex-basis: 280px; }
  .biblioteca { justify-content: center; }
  .dialogo-retrato { width: 80px; height: 80px; }
  .objetivo { font-size: calc(16px * var(--fs)); }
}
@media (max-height: 520px) {
  .menu-logo { width: min(40vw, 280px); }
  .portada { max-height: 70vh; flex-basis: auto; height: 70vh; }
  .menu-tit { margin: 6px; }
}
/* Modo sin texto para grabar el trailer */
.mudo .hud, .mudo .dialogo, .mudo .pista, .mudo .aviso, .mudo .cine-sub, .mudo .cine-saltar { display: none !important; }
/* en los puzles tampoco queda ninguna palabra: titulos, ayudas, etiquetas y botones fuera (los numeros del codigo si se ven) */
.mudo .p-marco h3, .mudo .p-ayuda, .mudo .p-radio-oido span, .mudo .p-carta-et, .mudo .p-col b, .mudo .p-carta-objeto span,
.mudo .p-cerrar, .mudo .p-radio-mandos, .mudo .fila-botones, .mudo .cine-titulo { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ═══ Lisboa: sigilo ═══
   Los botones van abajo a la derecha, al alcance del pulgar: agacharse es el
   grande (se usa todo el rato); el ojo se mantiene pulsado para ver hasta donde
   miran los guardias; piedra y dardo se arman y el siguiente toque en la escena
   dice a donde. */
.hud-sigilo { position: absolute; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(14px + var(--seg-ab)); z-index: 12;
  display: grid; grid-template-columns: auto auto; grid-template-areas: "ojo piedra" "dardo agachar"; gap: 10px; align-items: end; justify-items: center; }
.boton-sigilo { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(217, 178, 106, 0.6);
  background: radial-gradient(circle at 40% 35%, rgba(30, 52, 62, 0.95), rgba(6, 14, 20, 0.95)); color: var(--oro-claro);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); transition: transform 0.12s, box-shadow 0.2s; touch-action: none; }
.boton-sigilo svg { width: 26px; height: 26px; }
.boton-sigilo:active { transform: scale(0.94); }
.boton-sigilo.activo { border-color: var(--oro-claro); box-shadow: 0 0 0 3px rgba(243, 220, 163, 0.35), 0 0 22px rgba(243, 200, 110, 0.45); background: radial-gradient(circle at 40% 35%, #4a3a1c, #1b1206); }
.boton-sigilo.vacio { opacity: 0.45; }
#bOjo { grid-area: ojo; } #bPiedra { grid-area: piedra; } #bDardo { grid-area: dardo; }
#bAgachar { grid-area: agachar; width: 74px; height: 74px; }
#bAgachar svg { width: 30px; height: 30px; margin-top: -8px; }
#bAgachar span { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; font: 800 calc(9.5px * var(--fs)) 'Alegreya Sans', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.boton-sigilo .contador { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--oro); color: #1a1206; font: 800 12px/20px 'Alegreya Sans', sans-serif; }
/* con el sigilo en pantalla, la pista y el dialogo dejan sitio a los botones */
#pJuego:has(#hudSigilo:not([hidden])) .pista { bottom: calc(176px + var(--seg-ab)); }
@media (min-width: 900px) { .boton-sigilo { width: 60px; height: 60px; } #bAgachar { width: 82px; height: 82px; } }
.aviso.rojo { border-color: #ff7a5c; color: #ffd2c4; background: rgba(40, 10, 8, 0.94); }
.mudo .hud-sigilo { display: none !important; }

/* Imagen fija de una cinematica, con un acercamiento lento */
.cine-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s; }
.cine-img.visible { opacity: 1; }
.cine-img.kb { animation: kenburns linear forwards; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, 1.5%); } }

/* Elegir que preguntar */
.modal-eleccion .panel { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.opcion-dialogo { justify-content: flex-start; text-align: left; font: 500 calc(18px * var(--fs)) 'Crimson Pro', serif; letter-spacing: 0; text-transform: none; padding: 14px 18px; }
.opcion-dialogo::before { content: '›'; color: var(--oro); font-size: 1.4em; margin-right: 6px; }

/* ═══ Almacen 14: el sello, la cerradura y el libro ═══ */
.p-sello-caja { position: relative; width: min(78vw, 360px); aspect-ratio: 1; margin: 6px auto 4px; }
.p-sello-caja img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); }
.p-sello-marca { position: absolute; left: 31%; top: 38%; width: 34%; height: 34%; opacity: 0.88; mix-blend-mode: multiply; transform: skewY(-4deg); }
.p-sello-marca .larga { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)); }
.p-cerr-dial { position: relative; width: min(70vw, 320px); aspect-ratio: 1; margin: 6px auto 12px; touch-action: none; }
.p-cerr-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-cerr-rosa { transition: transform 0.25s cubic-bezier(.3, 1.4, .5, 1); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.p-cerr-rosa text { font: 700 7px 'Cinzel', serif; fill: #1a120a; }
.p-cerr-rosa .larga { fill: #050302; }
.p-cerr-dial.mal { animation: tiembla 0.4s; }
.p-cerr-dial.bien .p-cerr-rosa { filter: drop-shadow(0 0 16px rgba(255, 210, 120, 0.9)); }
@keyframes tiembla { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.p-libro-abierto { position: relative; display: flex; width: min(86vw, 520px); height: min(62vh, 400px); margin: 6px auto 10px; }
.p-libro-lomo { width: 34px; flex: none; border-radius: 8px 0 0 8px; background: linear-gradient(90deg, #2c1a0e, #6b4423 40%, #3a2412); border: 1px solid #1b100a; cursor: pointer; transition: box-shadow 0.3s, transform 0.3s; }
.p-libro-lomo.brilla { box-shadow: 0 0 0 2px var(--oro), 0 0 24px rgba(243, 200, 110, 0.7); animation: latido 1.4s ease-in-out infinite; }
.p-libro-lomo.abierto { transform: translateX(-10px) rotate(-3deg); animation: none; }
@keyframes latido { 50% { box-shadow: 0 0 0 3px var(--oro-claro), 0 0 34px rgba(243, 200, 110, 0.9); } }
.p-libro-hoja { flex: 1; padding: 14px 16px; border-radius: 0 8px 8px 0; background: linear-gradient(180deg, #efe1bf, #dcc79a); color: #3b2a16; box-shadow: inset 8px 0 18px rgba(80, 50, 20, 0.35), 0 10px 30px rgba(0, 0, 0, 0.5); overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.p-libro-hoja.pasa { animation: hoja 0.35s ease; }
@keyframes hoja { from { transform: perspective(900px) rotateY(-24deg); opacity: 0.4; } to { transform: none; opacity: 1; } }
.p-libro-hoja header { display: flex; justify-content: center; gap: 10px; align-items: baseline; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid rgba(90, 60, 30, 0.5); font: 900 calc(26px * var(--fs)) 'Cinzel', serif; color: #5a3a1a; }
.p-libro-fila { position: relative; display: flex; align-items: center; gap: 12px; flex: 1; min-height: 34px; padding: 0 8px; border: 0; border-bottom: 1px dashed rgba(90, 60, 30, 0.35); background: none; text-align: left; color: inherit; }
.p-libro-fila b { width: 34px; font: 700 calc(17px * var(--fs)) 'Cinzel', serif; color: #6b4a22; }
.p-libro-fila span { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.p-libro-fila span i { display: block; height: 2px; background: rgba(70, 45, 20, 0.55); border-radius: 2px; }
.p-libro-fila.corregida em { position: absolute; left: 50px; right: 18%; top: 30%; height: 40%; border-radius: 3px; background: repeating-linear-gradient(-8deg, rgba(150, 25, 20, 0.7) 0 3px, transparent 3px 7px); transform: rotate(-1.5deg); }
.p-libro-fila.mal { background: rgba(150, 40, 20, 0.15); }
.p-libro-fila.bien { background: rgba(217, 178, 106, 0.35); box-shadow: inset 0 0 0 2px #8e6a32; }
.p-libro-oculto { position: absolute; left: -14px; top: 12%; width: 46%; animation: sale 0.9s ease forwards; }
.p-libro-oculto img { width: 100%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); }
@keyframes sale { from { transform: translateX(10px) rotate(4deg); opacity: 0; } to { transform: translateX(-40%) rotate(-8deg); opacity: 1; } }