/* Estilos de las escenas de historia, la sala de espera, el marcador y las Coplas. */

/* ═════════ Narración (subtítulos) ═════════ */
#narracion {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  width: 1500px;
  z-index: 20;
  transition: opacity .2s, visibility .2s;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .45));
}
#narracion .quien {
  display: inline-block;
  font-family: 'Silkscreen', monospace;
  font-size: 34px;
  padding: 8px 18px 10px;
  color: var(--tinta);
  background: var(--c, var(--oro));
  margin-left: 24px;
  box-shadow: 0 0 0 6px var(--tinta);
  position: relative;
  z-index: 1;
}
#narracion .texto {
  background: rgba(20, 10, 30, .94);
  color: #fff;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.2;
  padding: 26px 36px 30px;
  min-height: 140px;
  box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 6px var(--c, var(--oro));
}

/* ═════════ Cuenta atrás de los eventos ═════════ */
.cuenta-atras { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); width: 1300px; text-align: center; z-index: 15; }
.cuenta-atras .que {
  font-size: 58px; font-weight: 700; color: #fff;
  text-shadow: 6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta), 0 14px rgba(0, 0, 0, .4);
}
.cuenta-atras .barra { margin: 18px auto 0; width: 800px; height: 36px; padding: 6px; background: var(--tinta); }
.cuenta-atras .barra div { height: 100%; background: linear-gradient(90deg, #ff5aa0, #f0c048); transform-origin: 0 50%; }

/* ═════════ Sala de espera ═════════ */
#sala { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
#sala .sala-titulo {
  position: absolute; left: 70px; top: 26px;
  font-family: 'Jacquard 24', serif; font-size: 150px; line-height: .9; color: #ffe27a;
  text-shadow: 6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta), 0 18px rgba(0, 0, 0, .4);
}
#sala .sala-sub { position: absolute; left: 80px; top: 176px; font-size: 40px; font-weight: 600; text-shadow: 4px 4px 0 var(--tinta), -2px 0 var(--tinta), 0 -2px var(--tinta); }
#sala .sala-qr {
  position: absolute; right: 50px; top: 36px; width: 440px; padding: 16px 16px 14px; text-align: center;
  background: #fffaf0; color: var(--tinta);
  box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px var(--oro), 0 0 0 18px var(--tinta), 0 24px 0 18px rgba(0, 0, 0, .4);
}
#sala .sala-qr canvas { width: 348px; height: 348px; image-rendering: pixelated; display: block; margin: 0 auto; }
#sala .sala-url { font-family: 'Silkscreen', monospace; font-size: 32px; margin-top: 6px; word-break: break-all; }
#sala .sala-cuenta { margin: 12px -16px 0; padding: 10px 0 6px; background: var(--tinta); font-family: 'Silkscreen', monospace; font-size: 32px; line-height: 1.15; color: var(--oro); }
#sala .sala-cuenta b { font-size: 48px; color: #fff; vertical-align: -4px; }
#sala .sala-lema {
  position: absolute; left: 744px; top: 634px; transform: translateX(-50%);
  font-family: 'Silkscreen', monospace; font-size: 22px; letter-spacing: 2px; color: #fff4f8; text-shadow: 2px 2px 0 #5a0e30; white-space: nowrap;
}
#sala .sala-pista { margin: 0 -16px -14px; padding: 0 12px 14px; background: var(--tinta); font-size: 32px; color: #ff9ac8; animation: parpadeo 1.2s steps(1) infinite; }

/* ═════════ Marcador ═════════ */
.marcador { position: absolute; inset: 0; z-index: 15; background: rgba(12, 6, 18, .9); padding: 50px 110px; }
.marcador .titulo {
  font-family: 'Jacquard 24', serif; font-size: 120px; line-height: 1; color: #ffe27a; text-align: center; margin-bottom: 26px;
  text-shadow: 6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta);
}
.marcador .filas { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 8px 70px; }
.fila-marcador { display: grid; grid-template-columns: 48px 64px 220px 1fr 140px; align-items: center; gap: 14px; height: 96px; animation: entraFila .35s steps(5) both; }
.fila-marcador .pos { font-family: 'Silkscreen', monospace; font-size: 36px; color: var(--oro); text-align: right; }
.fila-marcador canvas { width: 64px; height: 96px; image-rendering: pixelated; } /* (03-10-2026: a ×1, sin píxeles de distinto tamaño) */
.fila-marcador .nom { font-size: 40px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-marcador .camino { height: 26px; background: #2c1e40; box-shadow: 0 0 0 4px var(--tinta); }
.fila-marcador .camino span { display: block; height: 100%; width: calc(var(--k) * 100%); background: linear-gradient(90deg, #f0c048, #ff5aa0); }
.fila-marcador .cor { font-family: 'Silkscreen', monospace; font-size: 34px; text-align: right; }
/* (el primero se marca con .lider cuando ya se han hecho los adelantamientos) */
.fila-marcador { position: relative; }
.fila-marcador.lider .nom, .fila-marcador.lider .cor { color: #ffe27a; }
.fila-marcador.lider .nom::before { content: ''; display: inline-block; width: 36px; height: 26px; margin-right: 10px; background: #ffe27a;
  clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); }
.fila-marcador.farolillo .nom, .fila-marcador.farolillo .cor { color: #9a88b8; }
.fila-marcador .cambio { position: absolute; left: -84px; width: 76px; text-align: right; font-family: 'Silkscreen', monospace; font-size: 32px; }
.fila-marcador .cambio.sube { color: #7ae05a; }
.fila-marcador .cambio.baja { color: #ff5a6a; }
.marcador .premios-publico { display: flex; justify-content: center; gap: 70px; margin-top: 22px; }
.placa-publico { display: flex; align-items: center; gap: 16px; padding: 8px 26px 8px 14px; background: rgba(40, 18, 56, .95); box-shadow: 0 0 0 5px var(--tinta), inset 0 0 0 4px #f0c048; font-size: 36px; animation: entraFila .35s steps(5) both; }
.placa-publico canvas { height: 64px; width: auto; image-rendering: pixelated; }
.placa-publico b { color: #ffe27a; }
@keyframes entraFila { from { transform: translateX(80px); opacity: 0; } }

/* ═════════ Otra tele manda ═════════ */
#relevo {
  position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; text-align: center; gap: 12px;
  background: rgba(12, 6, 18, .93); color: #fff; font-family: 'Pixelify Sans', sans-serif; font-size: 34px; padding: 20px;
}
#relevo small { font-size: 32px; color: #c8b8e0; }

/* ═════════ Cartel de «Próximamente» (juegos pendientes) ═════════ */
.pendiente { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; background: rgba(12, 6, 18, .78); }
.pendiente .cartelon {
  width: 1100px; padding: 50px 60px 44px; text-align: center; background: #fff4dc; color: var(--tinta);
  box-shadow: 0 0 0 8px var(--tinta), 0 0 0 16px var(--oro), 0 0 0 24px var(--tinta), 0 30px 0 24px rgba(0, 0, 0, .4);
  rotate: -1.5deg;
}
.pendiente .prox { font-family: 'Silkscreen', monospace; font-size: 34px; color: #b07a1c; letter-spacing: 4px; }
.pendiente .que { font-family: 'Jacquard 24', serif; font-size: 110px; line-height: 1; margin: 14px 0 18px; }
.pendiente .det { font-size: 38px; font-weight: 600; color: #6a4a5a; }
.pendiente .pista { margin-top: 30px; font-size: 34px; color: #a08a90; animation: parpadeo 1.2s steps(1) infinite; }

/* subtítulo en español debajo del ruso de Islam */
#narracion .texto.ru { font-size: 46px; }
#narracion .retrato {
  position: absolute; left: 20px; bottom: calc(100% - 24px); width: 256px; height: 256px; image-rendering: pixelated;
  background: radial-gradient(circle at 50% 60%, #3a2450, #140a1e); box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 6px var(--c, var(--oro));
}
#narracion .retrato.oculto { display: none; }
#narracion:has(.retrato:not(.oculto)) .quien { margin-left: 300px; }
#narracion .trad { margin-top: 8px; font-size: 32px; color: #ffd0d0; font-style: italic; }

/* ═════════ El libro del cuento (dentro de #camara: se mueve con la cámara) ═════════ */
#libro-capa { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; image-rendering: pixelated; pointer-events: none; }
#libro-html { position: absolute; inset: 0; pointer-events: none; }
#libro-html .oculto { display: none; }
.lb-portada { position: absolute; text-align: center; font-family: 'Jacquard 24', serif; color: #eabb4c; text-shadow: 4px 4px 0 #2a0c0a, 0 0 18px rgba(255, 210, 120, .35); animation: lbAparece 1.6s ease-out both, lbRespira 3.2s ease-in-out 1.6s infinite; }
.lb-portada .t1 { font-size: 60px; line-height: 1; }
.lb-portada .t2 { font-size: 118px; line-height: .95; }
.lb-der { position: absolute; color: #3a2410; font-family: 'Pixelify Sans', sans-serif; font-size: 50px; font-weight: 500; line-height: 1.28; }
.lb-der .cap { float: left; font-family: 'Jacquard 24', serif; font-size: 190px; line-height: .8; margin: 6px 16px 0 0; color: #9a1a14; text-shadow: 3px 3px 0 #eabb4c, 6px 6px 0 rgba(60, 30, 10, .35); }
.lb-der.titulo { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 70px; gap: 20px; }
.lb-der .cap-n { font-family: 'Silkscreen', monospace; font-size: 40px; letter-spacing: 8px; color: #9a1a14; }
.lb-der .cap-t { font-family: 'Jacquard 24', serif; font-size: 118px; line-height: .95; color: #3a2410; text-shadow: 3px 3px 0 #eabb4c; }
.lb-der.titulo .txt { font-size: 44px; font-style: italic; margin-top: 30px; }
.lb-etiquetas { position: absolute; }
.lb-etiquetas span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-family: 'Pixelify Sans', sans-serif; font-weight: 700; font-size: 32px; line-height: 1; color: #4a2a14; text-shadow: -3px 0 0 #f3e4c0, 3px 0 0 #f3e4c0, 0 -3px 0 #f3e4c0, 0 3px 0 #f3e4c0, 3px 3px 0 #f3e4c0, -3px -3px 0 #f3e4c0, 3px -3px 0 #f3e4c0, -3px 3px 0 #f3e4c0; }
.lb-etiquetas span.si { color: #9a1a14; font-size: 34px; }
.lb-arrancada {
  position: absolute; background-size: 100% 100%; image-rendering: pixelated; transform-origin: 0% 50%;
  clip-path: polygon(3% 0, 100% 0, 100% 100%, 2% 100%, 4% 94%, 1% 88%, 5% 81%, 2% 74%, 4% 66%, 1% 58%, 5% 50%, 2% 42%, 4% 34%, 1% 26%, 5% 18%, 2% 10%, 4% 4%);
}
@keyframes lbAparece { from { opacity: 0; transform: translateY(20px); filter: blur(6px) brightness(2.5); } }
@keyframes lbRespira { 50% { text-shadow: 4px 4px 0 #2a0c0a, 0 0 34px rgba(255, 220, 140, .7); } }

/* el cartel del título al final de la apertura */
.titulo-cine { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(20, 8, 30, .55), rgba(8, 3, 12, .85)); animation: tcEntra .45s steps(6) both; }
.titulo-cine .lili { font-family: 'Jacquard 24', serif; font-size: 330px; line-height: .85; color: #ffd0e6; text-shadow: 6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta), 10px 12px 0 #c8387a; animation: tcGolpe .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.titulo-cine .exp { font-family: 'Silkscreen', monospace; font-size: 64px; letter-spacing: 18px; color: var(--oro); text-shadow: 6px 6px 0 var(--tinta); margin-top: 36px; animation: tcAparece .6s ease-out .45s both; }
.titulo-cine .sub { margin-top: 70px; font-size: 48px; font-weight: 700; color: #fff4dc; text-shadow: 4px 4px 0 var(--tinta); animation: tcAparece .6s ease-out 1.4s both; }
.titulo-cine.fuera { animation: tcFuera .5s ease-in forwards; }
@keyframes tcEntra { from { opacity: 0; } }
@keyframes tcGolpe { from { transform: scale(3); opacity: 0; } }
@keyframes tcAparece { from { opacity: 0; transform: translateY(30px); } }
@keyframes tcFuera { to { opacity: 0; } }

/* «Mientras tanto, en el castillo…» */
.rotulo-cine { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: #000; color: #f3e4c0; font-family: 'Jacquard 24', serif; font-size: 110px; text-shadow: 0 0 30px rgba(255, 90, 90, .35); padding: 0 160px; text-align: center; }
.rotulo-cine.fuera { animation: tcFuera .4s ease-in forwards; }

/* el informe del ensayo general */
.informe-ensayo { position: absolute; inset: 40px; z-index: 60; overflow: auto; padding: 30px 50px; background: rgba(12, 6, 18, .96); box-shadow: 0 0 0 6px var(--oro); font-size: 32px; }
.informe-ensayo h2 { margin: 0 0 10px; font-family: 'Jacquard 24', serif; font-size: 90px; font-weight: 400; color: #ffe27a; }
.informe-ensayo .filas { display: grid; grid-template-columns: repeat(3, 1fr auto); gap: 4px 24px; margin: 20px 0; }
.informe-ensayo .filas b { font-family: 'Silkscreen', monospace; color: #ffe27a; }
.informe-ensayo .error { color: #ff6a6a; font-family: monospace; font-size: 26px; }

/* ── La entrada de wrestling de Islam: el rótulo gigante ── */
.titantron { position: absolute; left: 0; right: 0; top: 150px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.titantron .tt-nombre {
  font-family: 'Jacquard 24', serif; font-size: 170px; line-height: 1; letter-spacing: 6px; color: #ffe27a;
  background: linear-gradient(#fff6c0, #eabb4c 45%, #8a5a14 55%, #ffd060); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 60, 40, .7)) drop-shadow(8px 8px 0 #1a0406);
  animation: ttEntra .6s steps(6) both, ttGlitch 2.4s steps(1) .6s infinite;
}
.titantron .tt-sub { font-family: 'Silkscreen', monospace; font-size: 40px; letter-spacing: 8px; color: #ff6a5a; text-shadow: 4px 4px 0 #1a0406; animation: ttEntra .6s steps(6) .3s both; }
.titantron.fuera { animation: ttFuera .5s steps(5) forwards; }
@keyframes ttEntra { from { transform: scale(2.4); opacity: 0; } }
@keyframes ttGlitch { 0%, 90%, 100% { transform: none; } 92% { transform: translateX(-12px) skewX(-8deg); } 94% { transform: translateX(10px); } 96% { transform: none; filter: drop-shadow(0 0 30px rgba(60, 200, 255, .8)) drop-shadow(8px 8px 0 #1a0406); } }
@keyframes ttFuera { to { opacity: 0; transform: scale(.8) translateY(-40px); } }

/* ═════════ Presentaciones de cine ═════════ */
/* el tráiler: negro, letras grandes */
.trailer { position: absolute; inset: 0; z-index: 26; display: grid; place-items: center; background: #000; pointer-events: none; padding: 0 180px; text-align: center; }
.trailer span { font-family: 'Jacquard 24', serif; font-size: 118px; line-height: 1.05; color: #f3e8d0; letter-spacing: 3px; text-shadow: 0 0 30px rgba(255, 220, 160, .25); animation: trEntra 1.4s ease-out both; }
.trailer.fuera { animation: tcFuera .25s ease-in forwards; }
@keyframes trEntra { from { opacity: 0; transform: scale(1.18); filter: blur(6px); } 30% { opacity: 1; filter: none; } to { transform: scale(1); } }
/* la imagen congelada con el cartel del personaje */
#camara.congelado { filter: grayscale(.7) contrast(1.3) brightness(1.35) sepia(.25); }
.congela { position: absolute; top: 250px; z-index: 26; width: 900px; pointer-events: none; display: flex; flex-direction: column; gap: 8px; }
.congela.der { right: 70px; align-items: flex-end; text-align: right; }
.congela.izq { left: 70px; align-items: flex-start; text-align: left; }
.congela .cg-nombre { font-family: 'Jacquard 24', serif; font-size: 190px; line-height: .9; color: var(--c, #ffe27a); text-shadow: 8px 8px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000; animation: cgGolpe .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.congela .cg-lema { max-width: 820px; padding: 12px 26px; background: var(--c, #ffe27a); color: #120810; font-family: 'Pixelify Sans', sans-serif; font-weight: 700; font-size: 46px; line-height: 1.1; box-shadow: 8px 8px 0 #000; animation: cgBanda .3s steps(5) .2s both; }
.congela.der .cg-lema { transform: rotate(-2deg); }
.congela.izq .cg-lema { transform: rotate(2deg); }
.congela .cg-flecha { font-family: 'Pixelify Sans', sans-serif; font-size: 90px; color: var(--c, #ffe27a); text-shadow: 6px 6px 0 #000; animation: cgFlecha .6s ease-in-out infinite alternate; }
.congela.fuera { animation: tcFuera .25s ease-in forwards; }
@keyframes cgGolpe { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } }
@keyframes cgBanda { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cgFlecha { to { transform: translateX(-16px); } }

/* rótulo de lugar (arriba a la izquierda, como en las películas) */
.rotulo-lugar { position: absolute; left: 90px; top: 150px; z-index: 27; display: flex; flex-direction: column; gap: 6px; padding-left: 22px; border-left: 6px solid #eabb4c; pointer-events: none; animation: rlEntra .7s ease-out both; }
.rotulo-lugar b { font-family: 'Jacquard 24', serif; font-weight: 400; font-size: 84px; line-height: 1; color: #f3e8d0; text-shadow: 5px 5px 0 #000; }
.rotulo-lugar span { font-family: 'Silkscreen', monospace; font-size: 32px; letter-spacing: 6px; color: #eabb4c; text-shadow: 3px 3px 0 #000; }
.rotulo-lugar.fuera { animation: tcFuera .5s ease-in forwards; }
@keyframes rlEntra { from { opacity: 0; transform: translateX(-40px); } }