/* El Juicio (preguntas y Sala de Castigos), la Fuga y Javi contra la Máquina. */

/* ═════════ El Juicio ═════════ */
#juicio { position: absolute; inset: 0; z-index: 12; }
#juicio .oculto { opacity: 0; visibility: hidden; }
#juicio .mini { width: 56px; height: 84px; image-rendering: pixelated; }
.jz-cabecera {
  position: absolute; left: 400px; top: 26px;
  font-family: 'Silkscreen', monospace; font-size: 34px; color: var(--oro); text-shadow: 4px 4px 0 var(--tinta);
}
.jz-reloj {
  position: absolute; right: 50px; top: 24px; min-width: 150px; text-align: center;
  font-family: 'Silkscreen', monospace; font-size: 76px; line-height: 1; color: #fff; background: #2a0810; padding: 14px 18px 18px;
  box-shadow: 0 0 0 6px #ff4a5a, 0 0 0 12px var(--tinta);
}
.jz-reloj.prisa { color: #ff5a5a; animation: latido .5s steps(2) infinite; }
.jz-pregunta {
  position: absolute; left: 400px; right: 230px; top: 80px; min-height: 150px;
  background: #1a0a14; color: #fff4dc; font-size: 56px; font-weight: 700; line-height: 1.15; padding: 26px 34px 30px;
  box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 6px #8a1428, 0 16px 0 6px rgba(0, 0, 0, .35);
}
.jz-opciones { position: absolute; left: 400px; right: 50px; top: 330px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.jz-op {
  position: relative; min-height: 150px; padding: 20px 24px 16px 104px; background: #fff4dc; color: var(--tinta);
  font-size: 44px; font-weight: 700; line-height: 1.1; box-shadow: 0 0 0 6px var(--tinta), 0 12px 0 6px rgba(0, 0, 0, .35);
  transition: filter .25s, transform .25s steps(4);
}
.jz-op .letra {
  position: absolute; left: 18px; top: 18px; width: 64px; height: 64px; display: grid; place-items: center;
  font-family: 'Silkscreen', monospace; font-size: 40px; color: #fff; background: #8a1428; box-shadow: 0 0 0 4px var(--tinta);
}
.jz-op .quien { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; min-height: 0; }
.jz-op .quien .mini { width: 44px; height: 66px; animation: caeMini .3s steps(4) both; }
.jz-op .quien .preso { filter: grayscale(1) brightness(.7); }
.jz-op .quien .segunda { outline: 3px dashed #ff9ac8; }
.jz-op.correcta { transform: scale(1.03); box-shadow: 0 0 0 6px var(--tinta), 0 0 0 16px #7ae05a, 0 0 0 22px var(--tinta); }
.jz-op.correcta .letra { background: #3a9a4e; }
.jz-op.mal { filter: brightness(.5) saturate(.5); }
@keyframes caeMini { from { transform: translateY(-40px); opacity: 0; } }

.jz-roster { position: absolute; left: 400px; right: 40px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.jz-quien { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 6px 10px 4px; background: rgba(20, 8, 16, .9); box-shadow: 0 0 0 4px var(--tinta); }
.jz-quien .nom { font-size: 32px; font-weight: 600; line-height: 1.05; white-space: nowrap; }
/* la marca (✔, +1000, ✗) va como chapita sobre la cara, para que la fila no crezca */
.jz-quien .marca { position: absolute; right: -8px; top: -10px; z-index: 4; font-family: 'Silkscreen', monospace; font-size: 32px; line-height: 1; color: #b8a8d8; background: var(--tinta); padding: 4px 8px 6px; }
.jz-quien .marca:empty { display: none; }
.jz-quien.hecho { box-shadow: 0 0 0 4px var(--tinta), 0 0 0 8px #7ae05a; }
.jz-quien.hecho .marca { color: #7ae05a; }
.jz-quien.preso .mini { filter: grayscale(.9) brightness(.7); }
.jz-quien.preso::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 6px; height: 84px;
  background: repeating-linear-gradient(90deg, transparent 0 12px, #3a3440 12px 16px); pointer-events: none;
}
.jz-quien.acierta .marca { color: #ffe27a; }
.jz-quien.falla .marca { color: #ff6a5a; }

.jz-castigo {
  position: absolute; left: 400px; right: 50px; top: 80px; bottom: 30px; padding: 26px 34px;
  background: rgba(40, 4, 12, .92); box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 6px #ff4a5a;
  display: flex; flex-direction: column; gap: 14px;
}
.jz-cas-titulo {
  font-family: 'Jacquard 24', serif; font-size: 96px; line-height: 1; color: #ff6a5a; text-align: center;
  text-shadow: 6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta);
}
.jz-cas-desc { font-size: 34px; font-weight: 600; text-align: center; color: #ffd0d0; }
.jz-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; position: relative; }
.jz-aviso, .jz-info { font-size: 34px; color: #ffe27a; text-align: center; margin: 0; }
.jz-condenados { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.jz-cond { position: relative; display: flex; flex-direction: column; align-items: center; width: 170px; padding: 10px 6px; background: rgba(20, 8, 16, .9); box-shadow: 0 0 0 4px var(--tinta); }
.jz-cond .mini { width: 72px !important; height: 108px !important; }
.jz-cond .nom { font-size: 34px; font-weight: 700; }
.jz-cond .estado { font-size: 32px; color: #d8c8e8; text-align: center; min-height: 28px; }
.jz-cond.libre { box-shadow: 0 0 0 4px var(--tinta), 0 0 0 9px #7ae05a; }
.jz-condenados.grande .jz-cond { width: 200px; }
.jz-condenados.grande .estado { font-family: 'Silkscreen', monospace; font-size: 32px; color: #ffe27a; }
.jz-sello {
  position: absolute; left: 50%; top: 45%; z-index: 2;
  font-family: 'Silkscreen', monospace; font-weight: 700; font-size: 34px; line-height: 1; color: var(--c); padding: 8px 14px 12px;
  border: 6px solid currentColor; background: rgba(255, 250, 240, .92); white-space: nowrap; pointer-events: none;
}

/* ruleta */
.jz-ruleta { display: flex; align-items: center; gap: 50px; }
.rt-rueda { position: relative; width: 480px; height: 480px; }
.rt-rueda canvas { width: 480px; height: 480px; }
.rt-flecha { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 0; height: 0; border-left: 26px solid transparent; border-right: 26px solid transparent; border-top: 50px solid #ffe27a; filter: drop-shadow(0 4px 0 var(--tinta)); }
.jz-ruleta .jz-condenados { max-width: 560px; }
.jz-cond.perdido { box-shadow: 0 0 0 4px var(--tinta), 0 0 0 9px #ff4a5a; }

/* jarras */
.jz-jarras { display: flex; gap: 40px; justify-content: center; align-items: flex-end; }
.jz-jarra { position: relative; display: flex; flex-direction: column; align-items: center; }
.jz-jarra canvas { image-rendering: pixelated; }
.jz-jarra b { font-family: 'Silkscreen', monospace; font-size: 36px; color: #ffe27a; }
.jz-jarra .sobre { display: flex; gap: 2px; min-height: 90px; align-items: flex-end; }
.jz-jarra .sobre .mini { width: 50px; height: 75px; }
.jz-jarra .pim { position: absolute; left: 50%; top: 60px; image-rendering: pixelated; }
.jz-jarra.limpia { filter: brightness(1.15); }

/* dados */
/* los dados 3D (dados.js): hueso con puntos rojo sangre */
.jz-dados { display: flex; gap: 90px; justify-content: center; align-items: flex-end; height: 250px; padding-bottom: 30px; }
.dado3d { --l: 150px; position: relative; width: var(--l); height: var(--l); perspective: 900px; }
.d-salto, .d-cubo { position: absolute; inset: 0; transform-style: preserve-3d; }
.d-cubo { transform: translateZ(calc(var(--l) / -2)); }
.d-cara {
  position: absolute; inset: 0; transform: var(--rot) translateZ(calc(var(--l) / 2)); backface-visibility: hidden;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 22px; border-radius: 22px;
  background: radial-gradient(circle at 30% 24%, #fffdf4, #efe2c6 55%, #cdb88e);
  box-shadow: inset 0 0 0 3px rgba(110, 80, 50, .35), inset -12px -14px 22px rgba(80, 50, 20, .35), inset 8px 8px 12px rgba(255, 255, 255, .7);
}
.d-cara b { border-radius: 7px; }
.d-cara b.on { background: radial-gradient(circle at 35% 30%, #ff4a52, #a8101e 55%, #5a0208); box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .35); }
/* manchas de sangre en algunas caras */
.d-cara.c2::after, .d-cara.c5::after, .d-cara.c6::after { content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: radial-gradient(circle at 78% 82%, rgba(140, 8, 20, .55) 0 9%, transparent 10%), radial-gradient(circle at 86% 70%, rgba(140, 8, 20, .45) 0 4%, transparent 5%), radial-gradient(circle at 12% 18%, rgba(110, 6, 16, .4) 0 3%, transparent 4%); }
.d-nucleo { position: absolute; inset: 6px; background: #cdb88e; transform: translateZ(0); }
.d-nucleo.x { transform: rotateX(90deg); }
.d-nucleo.y { transform: rotateY(90deg); }
.d-sombra { position: absolute; left: 6%; right: 6%; bottom: -30px; height: 30px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 70%); }
.jz-columnas { display: flex; gap: 40px; }
.jz-columnas .col { width: 420px; min-height: 180px; padding: 12px; text-align: center; background: rgba(20, 8, 16, .9); box-shadow: 0 0 0 4px var(--tinta); position: relative; }
.jz-columnas .col b { display: block; font-family: 'Silkscreen', monospace; font-size: 40px; color: #ffe27a; }
.jz-columnas .col small { font-size: 32px; color: #d8c8e8; }
.jz-columnas .caras { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 8px; }
.jz-columnas .col.gana { box-shadow: 0 0 0 4px var(--tinta), 0 0 0 10px #7ae05a; }
.jz-columnas .col.pierde { filter: brightness(.6); }

/* peor respuesta y retrato */
.jz-prompt { font-size: 44px; font-weight: 700; text-align: center; color: #fff4dc; }
.jz-prompt small { display: block; font-size: 32px; color: #ffe27a; margin-top: 8px; animation: parpadeo 1.2s steps(1) infinite; }
.jz-eleccion { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.jz-entrada { position: relative; width: 380px; padding: 14px 16px 10px 60px; background: #fff4dc; color: var(--tinta); box-shadow: 0 0 0 5px var(--tinta); }
.jz-entrada .n { position: absolute; left: 12px; top: 12px; font-family: 'Silkscreen', monospace; font-size: 34px; color: #fff; background: #8a1428; padding: 0 8px 2px; }
.jz-entrada .cont { font-size: 32px; font-weight: 700; line-height: 1.1; min-height: 70px; }
.jz-entrada .autor { display: flex; align-items: center; gap: 8px; font-size: 32px; font-weight: 700; min-height: 0; }
.jz-entrada .autor .mini { width: 36px; height: 54px; }
.jz-eleccion.retrato .jz-entrada { width: 290px; padding-left: 16px; }
.jz-eleccion.retrato .cont img, .jz-eleccion.retrato .cont canvas { width: 250px; height: 250px; display: block; margin: 20px auto 0; background: #fffaf0; }
.jz-entrada.peor { box-shadow: 0 0 0 5px var(--tinta), 0 0 0 12px #ff4a5a; }

/* memoria */
.jz-mem-mesa { display: flex; align-items: center; gap: 50px; }
.jz-mem-mesa .jz-condenados { max-width: 560px; }
.jz-memoria { --celda: calc(520px / var(--lado, 5)); display: grid; grid-template-columns: repeat(var(--lado, 5), var(--celda)); gap: 10px; }
.jz-memoria .celda { width: var(--celda); height: var(--celda); background: #2a1a34 var(--suciedad); background-size: 256px; box-shadow: 0 0 0 4px var(--tinta), inset 0 0 18px rgba(0, 0, 0, .6); display: grid; place-items: center; }
.jz-memoria .celda canvas { image-rendering: pixelated; height: 80%; width: auto; }

.jz-banner {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 18px; padding: 14px 30px 14px 18px; white-space: nowrap;
  background: linear-gradient(90deg, #4a0a18, #8a1428); color: #fff; font-size: 40px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px #ffe27a, 0 0 0 18px var(--tinta);
  transition: opacity .2s, visibility .2s;
}
.jz-banner .mini { width: 56px; height: 84px; }
.jz-hamster { position: absolute; left: 0; top: 780px; width: 120px; height: 78px; image-rendering: pixelated; z-index: 14; }


/* la sentencia (arriba, antes de caer por la trampilla) */
.jz-sentencia {
  position: absolute; left: 50%; top: 36px; transform: translateX(-50%); min-width: 700px; max-width: 1500px; padding: 18px 30px 20px;
  background: rgba(40, 4, 12, .9); box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 6px #ff4a5a, 0 14px 0 6px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 12px; align-items: center; transition: opacity .25s, visibility .25s;
}
.jz-sen-titulo { font-family: 'Jacquard 24', serif; font-size: 76px; line-height: 1; color: #ff5a5a; text-shadow: 5px 5px 0 var(--tinta); }
.jz-sentencia .jz-cond { width: 150px; }

/* ═════════ La cinemática: LA MAZMORRA ═════════ */
#cinta { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 18; image-rendering: pixelated; pointer-events: none; background: #000; }
.cine-mz { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.cm-titulo { display: flex; font-family: 'Jacquard 24', serif; font-size: 184px; line-height: 1; color: #b0101c; letter-spacing: 4px;
  text-shadow: 0 0 40px rgba(255, 20, 40, .55), 8px 8px 0 #0a0004; }
.cm-titulo span { display: inline-block; position: relative; opacity: 0; animation: cmLetra .5s steps(4) forwards, cmParpadeo 3.2s steps(1) infinite; animation-delay: calc(var(--i) * 110ms), calc(1.4s + var(--i) * 170ms); }
.cm-titulo span::after { content: ''; position: absolute; left: 45%; top: 78%; width: 10px; height: 0; background: #8a0a14; border-radius: 0 0 6px 6px;
  animation: cmGota 2.4s ease-in forwards; animation-delay: calc(.9s + var(--i) * 190ms); }
.cm-titulo span:nth-child(3n)::after { display: none; }
.cm-sub { font-family: 'Pixelify Sans', sans-serif; font-size: 44px; color: #c8a8b8; letter-spacing: 12px; text-transform: uppercase; opacity: 0; animation: cmSub 1s ease-out 1.6s forwards; }
.cine-mz.rapido .cm-titulo span { animation-delay: calc(var(--i) * 30ms), 9s; animation-duration: .25s, 3s; }
.cine-mz.rapido .cm-titulo span::after { display: none; }
.cine-mz.fuera { animation: cmFuera .45s steps(5) forwards; }
@keyframes cmLetra { 0% { opacity: 0; transform: translateY(-80px) scale(1.6); filter: blur(2px); } 60% { opacity: 1; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes cmParpadeo { 0%, 92% { color: #b0101c; } 93% { color: #3a0006; } 95% { color: #ff3040; } 97% { color: #3a0006; } }
@keyframes cmGota { 0% { height: 0; } 100% { height: 90px; } }
@keyframes cmSub { from { opacity: 0; letter-spacing: 40px; } to { opacity: 1; letter-spacing: 12px; } }
@keyframes cmFuera { to { opacity: 0; transform: scale(1.1); } }

/* ═════════ La Fuga ═════════ */
#fuga { position: absolute; inset: 0; z-index: 12; background: linear-gradient(180deg, rgba(8, 3, 12, .7), rgba(8, 3, 12, .93) 22%); }
#fuga .oculto { opacity: 0; visibility: hidden; }
/* el duelo: las dos opciones en grande */
.pf-duelo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 26px; gap: 18px; transition: opacity .2s, visibility .2s; }
.pf-cabecera { font-family: 'Jacquard 24', serif; font-size: 100px; line-height: 1; color: #ff9ac8; text-shadow: 6px 6px 0 var(--tinta), 0 0 30px rgba(255, 120, 190, .4); }
.pf-cartas { display: flex; align-items: stretch; gap: 30px; } /* (las dos cartas, igual de altas aunque una opción sea más larga) */
.pf-o { align-self: center; font-family: 'Jacquard 24', serif; font-size: 120px; color: #ffe27a; text-shadow: 5px 5px 0 var(--tinta); }
.pf-carta {
  position: relative; width: 680px; padding: 18px 18px 14px; background: #fff4dc; color: var(--tinta); text-align: center;
  box-shadow: 0 0 0 8px var(--tinta), 0 0 0 16px #b07a1c, 0 0 0 22px var(--tinta), 0 20px 0 22px rgba(0, 0, 0, .35);
  transition: transform .4s steps(5), filter .4s;
}
.pf-foto { height: 470px; background: #1a0a14; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 5px var(--tinta); }
.pf-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } /* (recorta por abajo: en las fotos de gente la cara suele estar arriba) */
.pf-foto img.logo { object-fit: contain; object-position: 50% 50%; padding: 40px; background: radial-gradient(circle, #fff4dc, #d8c8a8); }
.pf-foto.sin { background: repeating-linear-gradient(45deg, #2a1432 0 22px, #34193e 22px 44px); }
.pf-foto.sin span { font-family: 'Jacquard 24', serif; font-size: 300px; line-height: 1; color: #ff9ac8; text-shadow: 10px 10px 0 var(--tinta); }
.pf-foto.muneco { background: radial-gradient(circle at 50% 60%, #5a2a52, #1a0a14 70%); }
.pf-foto.muneco canvas { width: 256px; height: 384px; image-rendering: pixelated; }
.pf-texto { font-size: 58px; font-weight: 700; line-height: 1.1; margin-top: 12px; }
.pf-texto.largo { font-size: 40px; }
/* la pregunta trampa: no prefiere a ninguno (una X roja sobre cada carta) */
.pf-carta.tachada { transform: scale(.94) rotate(-1deg); }
.pf-carta.tachada::after {
  content: ''; position: absolute; inset: 24px; pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 16px), #ff3a4a calc(50% - 16px), #ff3a4a calc(50% + 16px), transparent calc(50% + 16px)),
    linear-gradient(to bottom right, transparent calc(50% - 16px), #ff3a4a calc(50% - 16px), #ff3a4a calc(50% + 16px), transparent calc(50% + 16px));
  filter: drop-shadow(6px 6px 0 var(--tinta));
  animation: pop .4s steps(3);
}
.pf-votos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 0; margin-top: 6px; }
.pf-votos canvas { width: 44px; height: 66px; image-rendering: pixelated; animation: caeMini .3s steps(4) both; }
.pf-votos canvas.preso { filter: grayscale(1) brightness(.7); }
.pf-carta.elegida { transform: scale(1.06); box-shadow: 0 0 0 8px var(--tinta), 0 0 0 20px #ff9ac8, 0 0 0 26px var(--tinta), 0 0 80px 30px rgba(255, 150, 200, .5); }
.pf-carta.elegida::after {
  content: '¡LILI!'; position: absolute; right: -30px; top: -34px; transform: rotate(10deg); padding: 6px 18px 10px;
  font-family: 'Silkscreen', monospace; font-size: 46px; color: #fff; background: #c8387a; box-shadow: 0 0 0 5px var(--tinta);
  animation: pop .5s steps(3) 2;
}
.pf-carta.descartada { filter: grayscale(.9) brightness(.45); transform: scale(.94); }
.pf-estado { font-size: 44px; font-weight: 700; color: #ffe27a; text-shadow: 4px 4px 0 var(--tinta); min-height: 54px; }
/* el tablero de la carrera */
.fg-tablero { position: absolute; inset: 0; transition: opacity .2s, visibility .2s; }
.fg-titulo-t { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font-family: 'Jacquard 24', serif; font-size: 110px; line-height: 1; color: #ffe27a; text-shadow: 6px 6px 0 var(--tinta); }
.fg-reloj { position: absolute; right: 30px; top: 30px; z-index: 6; font-family: 'Silkscreen', monospace; font-size: 64px; color: #fff; background: #2a0810; padding: 8px 16px 12px; box-shadow: 0 0 0 5px #ff4a5a; }
.fg-pista { position: absolute; left: 30px; right: 30px; bottom: 24px; top: 190px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.fg-fila { display: grid; grid-template-columns: 250px 1fr 190px; align-items: center; gap: 12px; height: min(84px, calc((100% - (var(--filas, 8) - 1) * 4px) / var(--filas, 8))); padding: 0 8px; background: rgba(40, 26, 60, .7); }
.fg-fila:nth-child(odd) { background: rgba(56, 38, 80, .55); }
.fg-quien { display: flex; align-items: center; gap: 8px; font-size: 34px; font-weight: 700; white-space: nowrap; overflow: hidden; text-shadow: 3px 3px 0 var(--tinta); }
.fg-quien canvas { width: 34px; height: 51px; image-rendering: pixelated; }
.fg-carril { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); height: 92%; }
.fg-carril i { display: block; margin: 0 2px; background: #2e2640; box-shadow: inset 0 -5px 0 #1e1830; }
.fg-carril i.celda { background: repeating-linear-gradient(90deg, #151220 0 10px, #3a3440 10px 14px); }
.fg-carril i.salida { background: linear-gradient(90deg, #ffe9a0, #fff8e0); box-shadow: 0 0 20px #ffe27a; }
.fg-ficha {
  position: absolute; bottom: 0; height: 100%; width: auto; aspect-ratio: 2 / 3; image-rendering: pixelated; transform: translateX(-50%);
  left: calc((var(--pos) + .5) * 100% / var(--n)); transition: left .9s cubic-bezier(.3, .7, .3, 1.1);
}
.fg-marca { font-family: 'Silkscreen', monospace; font-size: 34px; color: #ffe27a; text-shadow: 3px 3px 0 var(--tinta); white-space: nowrap; }
.fg-fila.preso .fg-ficha { filter: grayscale(1) brightness(.75) drop-shadow(0 0 4px #9a8aff); }
.fg-fila.preso .fg-quien span { color: #b0a0d0; }
.fg-fila.preso .fg-quien span::after { content: ' ⛓'; }
.fg-fila.fuera { opacity: .8; }
.fg-fila.fuera .fg-quien span { color: #7ae05a; }
.fg-banner {
  position: absolute; left: 50%; top: 250px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 18px; padding: 14px 30px 14px 18px; white-space: nowrap;
  background: linear-gradient(90deg, #3a1f52, #6a2a6a); color: #fff; font-size: 40px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px #ffe27a, 0 0 0 18px var(--tinta); transition: opacity .2s, visibility .2s;
}
.fg-banner canvas { width: 56px; height: 84px; image-rendering: pixelated; }

/* ═════════ Javi contra la Máquina ═════════ */
#javi { position: absolute; inset: 0; z-index: 12; background: rgba(8, 3, 12, .55); display: grid; grid-template-columns: 420px 1fr 420px; align-items: center; padding: 40px; }
#javi .oculto { opacity: 0; visibility: hidden; }
.jv-lado { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 44px; }
.jv-lado b { font-family: 'Jacquard 24', serif; font-size: 90px; font-weight: 400; line-height: 1; color: #ffe27a; text-shadow: 5px 5px 0 var(--tinta); }
.jv-marco { width: 256px; height: 384px; background: rgba(20, 8, 16, .8); box-shadow: 0 0 0 6px var(--tinta); display: grid; place-items: end center; }
.jv-marco canvas { width: 256px; height: 384px; image-rendering: pixelated; }
.jv-islam .jv-marco { box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px #ff4a5a; }
.jv-javi .jv-marco { box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px #7ae05a; }
.jv-pts { font-family: 'Silkscreen', monospace; font-size: 96px; line-height: 1; color: #fff; text-shadow: 6px 6px 0 var(--tinta); }
.jv-centro { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.jv-titulo { font-family: 'Jacquard 24', serif; font-size: 86px; line-height: 1; color: #ff6a5a; text-shadow: 6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta); }
.jv-op {
  min-width: 700px; min-height: 180px; padding: 24px 40px; display: grid; place-items: center;
  font-family: 'Silkscreen', monospace; font-size: 96px; line-height: 1; color: var(--tinta); background: #fff4dc;
  box-shadow: 0 0 0 8px var(--tinta), 0 18px 0 8px rgba(0, 0, 0, .35);
}
.jv-sub { font-size: 36px; font-weight: 600; color: #ffe27a; min-height: 44px; }
.jv-cuenta { font-size: 64px; font-weight: 700; color: #ff9a9a; min-height: 80px; text-shadow: 4px 4px 0 var(--tinta); }
.jv-apuestas { display: flex; gap: 30px; }
.jv-ap { width: 420px; min-height: 200px; padding: 14px; background: rgba(20, 8, 16, .9); box-shadow: 0 0 0 5px var(--tinta); }
.jv-ap b { display: block; font-size: 40px; color: #ffe27a; }
.jv-ap span { font-family: 'Silkscreen', monospace; font-size: 34px; }
.jv-ap .caras { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 10px; }
.jv-ap .caras canvas { width: 40px; height: 60px; image-rendering: pixelated; }
.jv-banner {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); padding: 16px 34px; white-space: nowrap;
  background: linear-gradient(90deg, #4a0a18, #8a1428); color: #fff; font-size: 42px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px #ffe27a; transition: opacity .2s, visibility .2s;
}
.jv-pimiento { position: absolute; width: 150px; height: auto; image-rendering: pixelated; z-index: 20; pointer-events: none; }

/* durante los juegos, la esquina del QR no molesta */
body.sin-unete #unete { opacity: 0 !important; visibility: hidden !important; }

/* ═════════ Gore y creepy (la mazmorra de Islam): gore.js pone la sangre ═════════ */
#juicio::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(60, 0, 8, .45) 75%, rgba(12, 0, 2, .85) 100%);
  animation: jzLatido 2.6s ease-in-out infinite;
}
#juicio::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 40;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 3px, transparent 3px 6px);
  animation: jzParpadeo 7s steps(1) infinite;
}
@keyframes jzLatido { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes jzParpadeo { 0%, 91%, 94%, 100% { opacity: 1; background-color: transparent; } 92% { opacity: .6; background-color: rgba(0, 0, 0, .35); } 93% { background-color: rgba(120, 0, 10, .12); } }
.jz-pregunta {
  background-color: #12050a; background-image: var(--suciedad); background-size: 256px;
  box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 6px #5a0a14, inset 0 0 70px rgba(130, 0, 14, .5), 0 16px 0 6px rgba(0, 0, 0, .35);
}
.jz-op { background-color: #e6d8ba; background-image: var(--suciedad); background-size: 256px; }
.jz-op .letra { background: #5a0a14; }
.jz-op.mal { filter: brightness(.42) saturate(.35) sepia(.4); }
.jz-castigo, .jz-sentencia {
  background-color: rgba(22, 3, 7, .95); background-image: var(--suciedad); background-size: 256px;
  box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 6px #7a0a16, inset 0 0 100px rgba(150, 0, 14, .45);
}
.jz-cas-titulo, .jz-sen-titulo { color: #d8202c !important; text-shadow: 0 5px 0 #4a0208, 5px 5px 0 var(--tinta), 0 0 24px rgba(255, 20, 40, .45) !important; }
.jz-cabecera { color: #e8404a; }
.jz-banner { background: #2a0206 var(--suciedad); background-size: 256px; box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px #9a0c1a, 0 0 0 18px var(--tinta); }
.jz-quien { background-color: rgba(18, 4, 8, .92); background-image: var(--suciedad); background-size: 256px; }
.jz-quien.falla { box-shadow: 0 0 0 4px var(--tinta), 0 0 0 8px #7a0a16; }
.jz-sello { --c: #b0101e !important; }
.pf-carta { background-image: var(--suciedad); background-size: 256px; }
.fg-fila { position: relative; background-image: var(--suciedad); background-size: 256px; }
/* la sangre */
.salpicon { position: absolute; background-size: 100% 100%; image-rendering: pixelated; pointer-events: none; z-index: 3; }
.goteo { position: absolute; left: 0; right: 0; top: 100%; height: 0; pointer-events: none; z-index: 1; }
.goteo i { position: absolute; top: -3px; width: var(--w); height: 0; background: linear-gradient(#4a0208, #9a0c1a); border-radius: 0 0 999px 999px; animation: jzGotea var(--r) ease-in var(--t) forwards; }
.goteo i::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: calc(var(--w) + 5px); height: calc(var(--w) + 7px); transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #e0303c, #9a0c1a 60%); border-radius: 50% 50% 50% 50% / 60% 60% 45% 45%; }
@keyframes jzGotea { to { height: var(--h); } }

/* ═════════ Los Cálices ═════════ */
.jz-info .dosis { display: inline-block; margin-left: 16px; padding: 2px 14px 4px; background: rgba(255, 250, 240, .12); color: #fff4dc; box-shadow: 0 0 0 3px var(--tinta); }
.jz-calices { display: flex; gap: 14px; justify-content: center; align-items: flex-end; }
.jz-caliz { position: relative; width: 168px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jz-calices.pocos { gap: 40px; }
.jz-calices.pocos .jz-caliz { width: 200px; }
.jz-caliz .sobre { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 84px; align-items: flex-end; }
.jz-caliz .sobre .mini { width: 50px; height: 75px; }
.jz-caliz .copa { position: relative; }
.jz-caliz .copa canvas { display: block; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45)); }
.jz-caliz b { font-size: 32px; font-weight: 700; line-height: 1.02; text-align: center; color: #ffd8c8; min-height: 66px; }
.jz-caliz.limpio .copa canvas { filter: brightness(1.2) drop-shadow(0 0 16px rgba(255, 240, 180, .6)); }
.jz-caliz.limpio b { color: #7ae05a; }
.jz-caliz.envenenado b { color: #fff; }
/* el rebose: espuma blanca, chorretones y gotas */
.rebose { position: absolute; left: 8%; right: 8%; top: 20%; height: 0; pointer-events: none; z-index: 2; }
.rebose .espuma {
  position: absolute; left: -4%; right: -4%; top: -14px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #ffffff 0 30%, #f4f0e4 55%, #d8d2c0 80%, transparent 82%);
  box-shadow: 0 -6px 0 -2px #fffdf4 inset; animation: espuma .45s steps(5) both;
}
@keyframes espuma { from { transform: scaleY(0) translateY(20px); } 70% { transform: scale(1.15, 1.3); } }
.rebose b {
  position: absolute; top: 0; width: var(--w); height: 0; border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #d8d2c0, #ffffff 45%, #ece6d4); animation: chorreton var(--r) ease-in var(--t) forwards;
}
.rebose b::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: calc(var(--w) + 6px); height: calc(var(--w) + 8px); transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #ffffff, #e0dacb 70%); border-radius: 50% 50% 50% 50% / 60% 60% 45% 45%; }
@keyframes chorreton { to { height: var(--h); } }
.rebose u { position: absolute; left: 50%; top: -10px; width: 12px; height: 12px; background: #fffdf4; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); animation: gotaBlanca .7s cubic-bezier(.2, .6, .5, 1) var(--t) both; }
@keyframes gotaBlanca { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } 60% { transform: translate(calc(var(--dx) * .8), var(--dy)); } 100% { transform: translate(var(--dx), calc(var(--dy) + 140px)) scale(.7); opacity: 0; } }
.jz-caliz .puaj {
  position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%) rotate(-8deg); white-space: nowrap;
  font-family: 'Silkscreen', monospace; font-size: 40px; line-height: 1; color: #fffdf4; padding: 4px 12px 8px; background: #5a8a2a;
  box-shadow: 0 0 0 5px var(--tinta); animation: puajPop 1.6s steps(8) both; pointer-events: none;
}
/* sale de golpe, se queda un momento y se va (para que se vuelva a leer el nombre del cáliz) */
@keyframes puajPop {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(0); opacity: 1; }
  15% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.3); }
  25%, 75% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -120%) rotate(-8deg) scale(.9); opacity: 0; }
}

/* ═════════ Los Dedos ═════════ */
.jz-dedos { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 26px; }
.jz-mano { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 8px 10px; background: rgba(20, 8, 16, .9) var(--suciedad); background-size: 256px; box-shadow: 0 0 0 4px var(--tinta); }
.jz-dedos.muchos .jz-mano { padding-top: 14px; }
.jz-dedos.muchos .jz-mano .letra { display: none; }
.jz-mano .mano { position: relative; }
.jz-mano .mano canvas { display: block; height: auto; image-rendering: pixelated; }
.jz-mano .letra { position: absolute; transform: translate(-50%, -50%); font-family: 'Silkscreen', monospace; font-size: 32px; line-height: 1; color: #fff; background: #5a0a14; padding: 1px 3px 3px; box-shadow: 0 0 0 3px var(--tinta); }
.jz-mano .letra.cortada { background: #2a2030; color: #8a7a9a; text-decoration: line-through; text-decoration-color: #ff3040; text-decoration-thickness: 4px; }
.jz-mano .nom { display: flex; align-items: center; gap: 6px; font-size: 32px; font-weight: 700; white-space: nowrap; }
.jz-mano .nom .mini { width: 34px !important; height: 51px !important; }
.jz-mano .estado { font-size: 32px; color: #ffd0d0; text-align: center; min-height: 36px; }
.jz-mano .cuchillo { position: absolute; top: 18%; z-index: 3; width: 170px; height: auto; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); }
.jz-mano .dedo-vuela { position: absolute; z-index: 4; height: auto; image-rendering: pixelated; pointer-events: none; }

/* ═════════ La Pila de Coronas ═════════ */
.jz-pila canvas { display: block; image-rendering: pixelated; filter: drop-shadow(0 0 30px rgba(255, 200, 80, .45)) drop-shadow(0 10px 0 rgba(0, 0, 0, .5)); }
.jz-jugadas { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; }
.jz-jugada { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 190px; }
.jz-jugada .carta { position: relative; width: 150px; height: 170px; perspective: 800px; }
.jz-jugada .dorso, .jz-jugada .cara {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; backface-visibility: hidden;
  box-shadow: 0 0 0 5px var(--tinta), 0 10px 0 5px rgba(0, 0, 0, .35); transition: transform .45s steps(6);
}
.jz-jugada .dorso {
  font-family: 'Jacquard 24', serif; font-size: 110px; line-height: 1; color: #ffe27a; text-shadow: 5px 5px 0 var(--tinta);
  background: repeating-linear-gradient(45deg, #5a0a14 0 14px, #3a0610 14px 28px);
}
.jz-jugada.lista .dorso { font-family: 'Silkscreen', monospace; font-size: 70px; color: #7ae05a; }
.jz-jugada .cara { transform: rotateY(180deg); background: #e6d8ba var(--suciedad); background-size: 256px; color: var(--tinta); padding: 8px; text-align: center; }
.jz-jugada .cara canvas { image-rendering: pixelated; width: 96px; height: 96px; }
.jz-jugada .cara b { font-size: 32px; line-height: 1; }
.jz-jugada.vuelta .dorso { transform: rotateY(-180deg); }
.jz-jugada.vuelta .cara { transform: rotateY(0); }
.jz-jugada.atacar .cara { background-color: #ffc8c0; }
.jz-jugada.defender .cara { background-color: #c8d8ff; }
.jz-jugada.coger .cara { background-color: #ffe8a0; }
.jz-jugada .nom { display: flex; align-items: center; gap: 6px; font-size: 32px; font-weight: 700; white-space: nowrap; }
.jz-jugada .nom .mini { width: 34px !important; height: 51px !important; }
.jz-jugada .cobra { position: absolute; left: 50%; top: 40%; z-index: 3; transform: translate(-50%, -50%); font-family: 'Silkscreen', monospace; font-size: 40px; color: #ffe27a; text-shadow: 4px 4px 0 var(--tinta); animation: cobraPop .5s steps(3) 2; }
@keyframes cobraPop { 50% { transform: translate(-50%, -50%) scale(1.25); } }
.jz-leyenda { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.jz-leyenda i canvas { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
.jz-flechas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.jz-flechas > path { fill: none; stroke: #ff4a52; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 4px 0 var(--tinta)); }
.moneda-vuela { position: absolute; z-index: 5; width: 34px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff0a0, #eabb4c 55%, #b07a1c); box-shadow: 0 0 0 3px #6e420e; pointer-events: none; }

/* ═════════ El terror de las preguntas (terror.js): cada vez peor mientras corre el reloj ═════════ */
.terror-fondo, .terror-frente { position: absolute; inset: 0; pointer-events: none; }
.terror-fondo canvas, .terror-frente canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.terror-vineta { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 56% 52%, transparent 28%, rgba(70, 0, 10, .5) 58%, rgba(14, 0, 3, .96) 100%); }
.terror-frente { z-index: 40; }
.terror-frente .ruido { opacity: 0; mix-blend-mode: screen; }
.terror-flash { position: absolute; display: grid; place-items: center; visibility: hidden; }
.terror-flash.si { visibility: visible; }
.terror-flash canvas { position: static !important; width: 100% !important; height: 100% !important; object-fit: contain; }
.terror-flash .frase { font-family: 'Jacquard 24', serif; font-size: 170px; line-height: 1; color: #d80e1e; letter-spacing: 6px; white-space: nowrap; text-shadow: 7px 7px 0 #000, 0 0 40px rgba(255, 0, 20, .7); }
#juicio.terror-glitch { transform: translateX(var(--gx, 8px)); filter: contrast(1.35) saturate(1.7); }
#juicio.terror-glitch .jz-pregunta .txt, #juicio.terror-glitch .jz-op .txt { text-shadow: -5px 0 rgba(255, 0, 60, .85), 5px 0 rgba(0, 240, 255, .75); }

/* ───────── Candy Love María: el forcejeo en su pozo (candy.js) ───────── */
#candy-pozo { position: absolute; inset: 0; z-index: 16; background: #000; overflow: hidden; }
#candy-pozo .oculto { opacity: 0; visibility: hidden; }
#candy-pozo .cp-lienzo { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; image-rendering: pixelated; }
.cp-cabecera { position: absolute; left: 50px; top: 30px; z-index: 3; transition: opacity .3s; }
.cp-titulo { font-family: 'Jacquard 24', serif; font-size: 150px; line-height: .9; color: #e0101e; text-shadow: 8px 8px 0 #000, 0 0 50px rgba(255, 0, 20, .55); animation: cp-late .5s steps(2) infinite; }
.cp-sub { font-family: 'Silkscreen', monospace; font-size: 38px; color: #fff; text-shadow: 4px 4px 0 #000; }
@keyframes cp-late { 50% { transform: translate(3px, -2px) scale(1.02); } }
.cp-candy { position: absolute; right: 50px; top: 46px; z-index: 3; width: 640px; text-align: right; }
.cp-candy-txt { font-family: 'Silkscreen', monospace; font-size: 34px; color: #ff8a94; text-shadow: 4px 4px 0 #000; margin-bottom: 10px; }
.cp-barra { height: 40px; background: #1a0508; box-shadow: 0 0 0 6px #000, 0 0 0 10px #8a1422; }
.cp-barra i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #c0101e 0 28px, #8a0a14 28px 40px); }
.cp-etiquetas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cp-et { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; }
.cp-et .nom { display: inline-block; font-family: 'Silkscreen', monospace; font-size: 26px; color: #fff; background: rgba(0, 0, 0, .75); padding: 2px 10px 4px; }
.cp-et .cp-mini { width: 170px; height: 16px; margin: 6px auto 0; background: #200a0e; box-shadow: 0 0 0 3px #000; }
.cp-et .cp-mini i { display: block; height: 100%; width: 0; background: #ffe27a; transition: width .1s linear; }
.cp-et.libre .nom { background: #1e6a2a; font-size: 30px; }
.cp-et.libre .cp-mini i { background: #6af07a; }
.cp-cuenta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; font-family: 'Jacquard 24', serif; font-size: 380px; line-height: 1; color: #fff; text-shadow: 14px 14px 0 #8a0a14, 0 0 80px rgba(255, 0, 20, .8); }
.cp-final { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; background: rgba(8, 0, 2, .82); }
.cp-final-titulo { font-family: 'Jacquard 24', serif; font-size: 130px; line-height: 1; color: #e0101e; text-shadow: 8px 8px 0 #000; }
.cp-fichas { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 34px; max-width: 1700px; }
.cp-ficha { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cp-ficha canvas { width: 128px; height: 192px; image-rendering: pixelated; } /* (03-10-2026: a ×2, no a ×2,5) */
.cp-ficha .nom { font-family: 'Silkscreen', monospace; font-size: 28px; color: #fff; }
.cp-ficha .res { font-family: 'Silkscreen', monospace; font-size: 32px; padding: 2px 12px 4px; }
.cp-ficha.herido .res { color: #fff; background: #8a1422; }
.cp-ficha.libre .res { color: #0e2a12; background: #6af07a; }
.cp-ficha.libre canvas { filter: drop-shadow(0 0 14px rgba(120, 255, 140, .5)); }

/* ───────── Los castigos de la mazmorra, a pantalla completa (30-09-2026: antes era una ventana a la derecha) ───────── */
.jz-reloj { z-index: 6; }
.jz-castigo {
  left: 0; right: 0; top: 0; bottom: 0; padding: 30px 70px 44px; z-index: 3;
  box-shadow: inset 0 0 0 10px #7a0a16, inset 0 0 220px rgba(150, 0, 14, .55);
}
.jz-castigo .jz-cas-titulo { font-size: 120px; }
.jz-castigo .jz-cas-desc { font-size: 42px; max-width: 1500px; margin: 0 auto; }
.jz-castigo .jz-info { font-size: 44px; }
.jz-castigo .jz-cond { width: 210px; }
.jz-castigo .jz-cond .mini { width: 96px !important; height: 144px !important; }
.jz-castigo .jz-mem-mesa { gap: 90px; }
.jz-castigo .jz-mem-mesa .jz-condenados { max-width: 700px; }
.jz-castigo .jz-memoria { --celda: calc(600px / var(--lado, 5)); gap: 6px; } /* (que quepa entera con el título y la descripción) */
.jz-memoria .celda canvas.senuelo { filter: saturate(1.1); }
.jz-memoria .celda.fue-senuelo canvas { opacity: .35; filter: grayscale(.6); }

/* «¿Qué prefiere Lili?»: lo que cobra cada acierto, bajo su cara (como en el Kahoot, más cuanto antes) */
.pf-voto { position: relative; display: inline-block; margin-bottom: 44px; } /* (las etiquetas, en dos alturas para que no se pisen) */
.pf-pts { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); z-index: 2; font-family: 'Silkscreen', monospace; font-size: 22px; line-height: 1; color: #ffe27a; background: var(--tinta); padding: 2px 5px 3px; white-space: nowrap; animation: caeMini .3s steps(4) both; }
.pf-voto:nth-child(even) .pf-pts { bottom: -46px; }

/* ═════════ 01-10-2026: la pregunta, más legible desde el sofá ═════════ */
/* «Pregunta 2 de 12», en grande y sobre una placa (antes, pequeño y rojo sobre oscuro) */
.jz-cabecera { top: 8px; font-size: 50px; color: #fff4dc; background: #5a0a14; padding: 2px 18px 8px; box-shadow: 0 0 0 5px var(--tinta); text-shadow: 4px 4px 0 var(--tinta); }
.jz-pregunta { top: 92px; }
/* las caras de abajo, más grandes */
#juicio .jz-quien .mini { width: 76px; height: 114px; }
.jz-quien { min-width: 128px; padding: 4px 8px 2px; }
.jz-quien.preso::after { height: 114px; }
.jz-roster { gap: 8px 10px; bottom: 10px; }
/* el grano del terror va por debajo de la pregunta y de las opciones (terror.js lo pone en el fondo) */
.terror-fondo .ruido { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; mix-blend-mode: screen; opacity: 0; }

/* ═════════ Castigos más grandes (que llenen la pantalla) ═════════ */
.rt-rueda, .rt-rueda canvas { width: 640px; height: 640px; }
.rt-flecha { border-left-width: 34px; border-right-width: 34px; border-top-width: 64px; top: -28px; }
.jz-ruleta { gap: 70px; }
.jz-castigo .jz-jarra canvas { transform: scale(1.35); transform-origin: bottom center; margin-top: 40px; }
.jz-castigo .jz-jarras { gap: 70px; }
.jz-castigo .dado3d { --l: 190px; }
.jz-castigo .jz-dados { height: 300px; gap: 120px; }
.jz-castigo .jz-columnas .col { width: 520px; min-height: 220px; }
.jz-castigo .jz-memoria { --celda: calc(700px / var(--lado, 5)); }
.jz-castigo .jz-caliz { width: 200px; }
.jz-castigo .jz-calices.pocos .jz-caliz { width: 240px; }
.jz-castigo .jz-caliz .copa canvas { transform: scale(1.2); transform-origin: bottom center; }
.jz-castigo .jz-jugada { width: 230px; }
.jz-castigo .jz-jugada .carta { width: 190px; height: 215px; }
.jz-castigo .jz-jugada .cara canvas { width: 120px; height: 120px; }
.jz-castigo .jz-jugada .cara b { font-size: 34px; }
.jz-castigo .jz-pila canvas { transform: scale(1.1); }

/* ═════════ La Pila de Coronas, explicada jugada a jugada ═════════ */
.jz-reglas-pila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: 100%; max-width: 1700px; }
.jz-reglas-pila .rp { padding: 10px 16px 12px; background: rgba(20, 8, 16, .9); box-shadow: 0 0 0 4px var(--tinta); transition: box-shadow .3s, transform .3s steps(3); }
.jz-reglas-pila .rp.coger { box-shadow: 0 0 0 4px var(--tinta), inset 0 6px 0 #b07a1c; }
.jz-reglas-pila .rp.atacar { box-shadow: 0 0 0 4px var(--tinta), inset 0 6px 0 #c8202c; }
.jz-reglas-pila .rp.defender { box-shadow: 0 0 0 4px var(--tinta), inset 0 6px 0 #3a6ac8; }
.jz-reglas-pila .rp.pasa { transform: scale(1.04); box-shadow: 0 0 0 4px var(--tinta), 0 0 0 10px #ffe27a; }
.rp-tit { display: flex; align-items: center; gap: 12px; }
.rp-tit i canvas { display: block; width: 64px; height: 64px; image-rendering: pixelated; }
.rp-tit b { font-family: 'Silkscreen', monospace; font-size: 40px; color: #ffe27a; }
.jz-reglas-pila p { margin: 6px 0 0; font-size: 32px; line-height: 1.12; font-weight: 600; }
.jz-reglas-pila p.bien { color: #b8f0a8; }
.jz-reglas-pila p.mal { color: #ffb0b0; }
.jz-castigo .jz-info.rp-todos { font-size: 36px; }
.jz-pila-mesa { display: flex; align-items: center; justify-content: center; gap: 50px; }
.jz-jugada .motivo { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 3; width: 250px; text-align: center; font-size: 32px; line-height: 1.05; font-weight: 700; color: #fff; background: #7a0a16; padding: 4px 8px 6px; box-shadow: 0 0 0 4px var(--tinta); animation: caeMini .3s steps(4) both; }
.jz-jugada.libre { filter: drop-shadow(0 0 18px rgba(120, 255, 140, .55)); }

/* ═════════ La Guillotina ═════════ */
.jz-info b.rojo { color: #ff4a52; }
.jz-guillos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; }
.jz-guillo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jz-guillo .marco { position: relative; width: 200px; height: 320px; --caida: 190px; }
.jz-guillo .marco > canvas { position: absolute; image-rendering: pixelated; }
.jz-guillo .marco > canvas:not(.reo):not(.cuchilla) { left: 0; top: 0; width: 200px; height: 320px; z-index: 2; }
/* el condenado, con la cabeza en el cepo (asoma por el hueco) */
.jz-guillo .reo { left: 50%; top: 115px; width: 140px !important; height: 210px !important; transform: translateX(-50%); z-index: 1; transition: transform .25s steps(4); }
.jz-guillo .reo.aparta { transform: translate(-50%, 30px); }
.jz-guillo .cuchilla { left: 50%; top: 28px; width: 120px; height: 80px; transform: translate(-50%, 0); z-index: 3; }
.jz-guillo .nom { font-size: 34px; font-weight: 700; }
.jz-guillo .estado { font-family: 'Silkscreen', monospace; font-size: 34px; color: #ffe27a; min-height: 40px; }
.jz-guillo.libre .estado { color: #7ae05a; }

/* ═════════ Las Ratas ═════════ */
.jz-ratas { width: 1500px; height: 375px; background: #140a10 var(--suciedad); background-size: 256px; box-shadow: 0 0 0 6px var(--tinta), inset 0 0 80px rgba(0, 0, 0, .8); }
.jz-ratas canvas { width: 1500px; height: 375px; image-rendering: pixelated; }
.jz-info .cifra { font-family: 'Silkscreen', monospace; font-size: 80px; color: #ffe27a; vertical-align: middle; }

/* ═════════ La Traición ═════════ */
.jz-reglas-traicion { text-align: center; }
.jz-reglas-traicion p { margin: 4px 0; font-size: 36px; font-weight: 600; color: #ffd8d8; }
.rt-iconos { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.rt-iconos i canvas { display: block; width: 80px; height: 80px; image-rendering: pixelated; }
.rt-iconos b { font-family: 'Silkscreen', monospace; font-size: 46px; color: #ffe27a; }
.rt-iconos span { font-family: 'Jacquard 24', serif; font-size: 60px; color: #ff6a5a; margin: 0 14px; }

/* ═════════ Candy se anuncia: su sombra cruza por delante, un instante ═════════ */
.jz-sombra-candy { position: absolute; left: 0; top: 60px; z-index: 45; width: 640px; height: 960px; image-rendering: pixelated; opacity: .82; filter: blur(3px); pointer-events: none; }