/* La tele: todo se diseña a 1920×1080 y se escala para llenar la pantalla.
   Un "píxel" del arte = 6px de pantalla, así que los bordes y huecos van de 6 en 6. */

:root {
  --tinta: #1c1024;
  --oro: #f0c048;
  --oro-osc: #b07a1c;
  --crema: #fff4dc;
  --panel: #1a0f26;
  --rosa: #ff5aa0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #07040b;
  overflow: hidden;
  cursor: default;
}

#marco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  font-family: 'Pixelify Sans', system-ui, sans-serif;
  color: var(--crema);
  -webkit-font-smoothing: none;
  user-select: none;
}

#camara { position: absolute; inset: 0; transform-origin: 0 0; }

/* franjas negras de cine */
#franjas i { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 19; transition: height .7s cubic-bezier(.3, .7, .3, 1); pointer-events: none; }
#franjas i:first-child { top: 0; }
#franjas i:last-child { bottom: 0; }
#franjas.on i { height: 118px; }
#franjas.on.finas i { height: 54px; }

#mundo {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

.oculto { opacity: 0; visibility: hidden; }

/* Esquinas "mordidas" de píxel */
.muesca2 {
  clip-path: polygon(12px 0, calc(100% - 12px) 0, calc(100% - 12px) 6px, calc(100% - 6px) 6px, calc(100% - 6px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%,
    12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 12px), 0 calc(100% - 12px),
    0 12px, 6px 12px, 6px 6px, 12px 6px);
}
.muesca1 {
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 6px 6px);
}

/* ───────── Cabecera ───────── */
#cabecera {
  position: absolute;
  left: 1012px;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Silkscreen', monospace;
  transition: opacity .4s, visibility .4s;
}
#cabecera .etiqueta {
  font-size: 34px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oro);
  text-shadow: 6px 6px 0 var(--tinta);
}
#cabecera .contador {
  font-size: 34px;
  background: var(--oro);
  color: var(--tinta);
  padding: 4px 16px 6px;
}

/* ───────── Cartel del héroe (derecha) ───────── */
#cartel {
  position: absolute;
  left: 1000px;
  top: 96px;
  width: 850px;
  transition: opacity .5s, visibility .5s;
}

#nombre {
  font-family: 'Jacquard 24', serif;
  font-size: 250px;
  line-height: 200px;
  height: 230px;
  white-space: nowrap;
  transform-origin: 0 50%;
  padding-left: 12px;
}
.letra { position: relative; display: inline-block; }
.letra .s, .letra .r { display: block; }
.letra .s {
  position: absolute;
  left: 0; top: 0;
  color: var(--tinta);
  text-shadow:
    6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta),
    6px 6px var(--tinta), -6px 6px var(--tinta), 6px -6px var(--tinta), -6px -6px var(--tinta),
    12px 0 var(--tinta), -12px 0 var(--tinta), 0 12px var(--tinta), 0 -12px var(--tinta),
    0 24px rgba(0, 0, 0, .45), 6px 24px rgba(0, 0, 0, .45), -6px 24px rgba(0, 0, 0, .45);
}
.letra .r {
  position: relative;
  background: linear-gradient(180deg, #fffbe6 0 30%, #ffe27a 30% 50%, #f7b93c 50% 68%, #e08a2c 68% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#nombre.villano .letra .r {
  background: linear-gradient(180deg, #ffe0e0 0 30%, #ff6a6a 30% 50%, #d4202e 50% 68%, #7e0c1c 68% 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.villano .insignia, .insignia.villano { background: #b01e2e; }
.letra.brillo .r {
  background: linear-gradient(180deg, #ffffff 0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

#subtitulo {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 6px 0 30px 12px;
  min-height: 66px;
}
.insignia {
  font-family: 'Silkscreen', monospace;
  font-size: 34px;
  line-height: 1;
  padding: 12px 18px 14px;
  background: var(--rosa);
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25), inset 0 6px 0 rgba(255, 255, 255, .3), 0 6px 0 var(--tinta), 0 -6px 0 var(--tinta), 6px 0 0 var(--tinta), -6px 0 0 var(--tinta);
  opacity: 0;
}
#epiteto {
  font-size: 50px;
  font-weight: 500;
  color: var(--crema);
  text-shadow: 6px 6px 0 var(--tinta), -3px 0 0 var(--tinta), 3px 0 0 var(--tinta), 0 -3px 0 var(--tinta);
  white-space: nowrap;
}
#epiteto .cursor { display: inline-block; width: 24px; height: 42px; background: var(--oro); vertical-align: -4px; margin-left: 6px; animation: parpadeo .5s steps(1) infinite; }

/* Panel de stats */
.panel { filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .45)); }
.panel .borde { background: var(--oro); padding: 6px; }
.panel .dentro {
  background: rgba(24, 12, 36, .9);
  padding: 24px 30px 24px 24px;
}
#stats { opacity: 0; transform: translateY(24px); transition: opacity .35s, transform .35s; }
#stats.visible { opacity: 1; transform: none; }

.fila {
  display: grid;
  grid-template-columns: 44px 290px 1fr 76px;
  align-items: center;
  gap: 12px;
  height: 66px;
}
.fila canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.fila .etq {
  font-size: 36px;
  font-weight: 600;
  white-space: nowrap;
}
.barra { display: flex; gap: 6px; }
.celda {
  width: 26px;
  height: 36px;
  background: #2c1e40;
  box-shadow: inset 0 6px 0 rgba(0, 0, 0, .35);
}
.celda.llena {
  background: var(--c);
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, .4), inset 0 -6px 0 rgba(0, 0, 0, .28);
  animation: celda .18s steps(3);
}
.fila .valor {
  font-family: 'Silkscreen', monospace;
  font-size: 44px;
  text-align: right;
  color: #fff;
}
.fila .valor.max { color: var(--oro); animation: latido .5s steps(2) infinite; }
.fila .valor.cero { color: #ff4a4a; animation: tiembla .12s steps(2) infinite; }

/* ───────── Bocadillo ───────── */
#bocadillo {
  position: absolute;
  left: 230px;
  top: 60px;
  width: 700px;
  transform-origin: 40% 100%;
  transition: opacity .2s, visibility .2s;
  filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .4));
}
#bocadillo .texto {
  background: #fffaf0;
  color: var(--tinta);
  font-size: 50px;
  font-weight: 500;
  line-height: 1.12;
  padding: 30px 36px 34px;
  min-height: 130px;
  box-shadow: inset 0 0 0 6px var(--tinta), inset 0 -12px 0 6px #e8dcc8;
}
#bocadillo .cola {
  position: absolute;
  left: 300px;
  bottom: -54px;
  width: 60px;
  height: 60px;
  background:
    linear-gradient(var(--tinta), var(--tinta)) 0 0 / 6px 60px no-repeat,
    linear-gradient(#fffaf0, #fffaf0) 6px 0 / 42px 12px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) 48px 0 / 6px 12px no-repeat,
    linear-gradient(#fffaf0, #fffaf0) 6px 12px / 30px 12px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) 36px 12px / 12px 12px no-repeat,
    linear-gradient(#fffaf0, #fffaf0) 6px 24px / 18px 12px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) 24px 24px / 12px 12px no-repeat,
    linear-gradient(#fffaf0, #fffaf0) 6px 36px / 6px 12px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) 12px 36px / 12px 12px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) 0 48px / 12px 12px no-repeat;
}

/* ───────── ¡Tiradle cosas! ───────── */
#aviso {
  position: absolute;
  left: 1000px;
  top: 560px;
  width: 850px;
  text-align: center;
  transition: opacity .3s, visibility .3s;
}
#aviso .grande {
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: 700;
  font-size: 110px;
  line-height: 1.05;
  color: #fff;
  text-shadow: 6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta), 6px 6px var(--tinta), -6px -6px var(--tinta), 6px -6px var(--tinta), -6px 6px var(--tinta), 0 18px rgba(0,0,0,.4);
  animation: bote .6s steps(3) infinite alternate;
}
#aviso .pequeno {
  font-family: 'Silkscreen', monospace;
  font-size: 34px;
  color: var(--oro);
  text-shadow: 4px 4px 0 var(--tinta);
  margin-top: 6px;
}
#aviso .tiempo {
  margin: 24px auto 0;
  width: 600px;
  height: 30px;
  background: var(--tinta);
  padding: 6px;
}
#tiempo-barra { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5aa0, #f0c048); transform-origin: 0 50%; }

/* ───────── Sello del veredicto ───────── */
#sello {
  position: absolute;
  left: 1000px;
  top: 560px;
  width: 850px;
  display: flex;
  justify-content: center;
  transition: visibility .2s;
}
#sello span {
  font-family: 'Silkscreen', monospace;
  font-weight: 700;
  font-size: 76px;
  line-height: 1;
  padding: 24px 36px 30px;
  color: var(--c, #ff4a5a);
  border: 12px solid currentColor;
  background: rgba(20, 8, 20, .75);
  transform: rotate(-6deg);
  text-shadow: 6px 6px 0 var(--tinta);
  box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 6px var(--tinta);
  white-space: nowrap;
}

/* ───────── Contadores de rosas, pimientos y jarras ───────── */
#contadores {
  position: absolute;
  left: 48px;
  bottom: 36px;
  display: flex;
  gap: 18px;
  transition: opacity .4s, visibility .4s;
}
.cuenta {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(20, 10, 30, .85);
  padding: 12px 26px 12px 18px;
  box-shadow: 0 0 0 6px var(--tinta), inset 0 -6px 0 rgba(0, 0, 0, .3);
}
.cuenta canvas { height: 66px; width: auto; image-rendering: pixelated; }
.cuenta b { font-family: 'Silkscreen', monospace; font-size: 54px; min-width: 60px; }
.cuenta.pop { animation: pop .25s steps(3); }

/* ───────── Únete ───────── */
#unete {
  position: absolute;
  right: 48px;
  bottom: 36px;
  text-align: right;
  background: rgba(20, 10, 30, .85);
  padding: 14px 24px 16px;
  box-shadow: 0 0 0 6px var(--tinta);
  font-family: 'Silkscreen', monospace;
}
#unete .que { font-size: 32px; color: var(--oro); }
#unete .url { font-size: 44px; color: #fff; }
#unete .n { font-size: 32px; color: #b8a8d8; }
/* tras las presentaciones ya ha entrado todo el mundo: la esquina solo sale si alguien se ha desconectado */
body.tras-presentaciones:not(.falta-alguien) #unete { display: none; }
/* (01-10-2026) y entonces sale en pequeño, solo con la dirección… */
body.tras-presentaciones #unete { right: 24px; bottom: 18px; padding: 8px 16px 10px; box-shadow: 0 0 0 4px var(--tinta); background: rgba(20, 10, 30, .78); }
body.tras-presentaciones #unete .que { font-size: 24px; }
body.tras-presentaciones #unete .url { font-size: 32px; }
body.tras-presentaciones #unete .n { display: none; }
/* …y nunca encima de una narración, un primer plano o una cinemática (tv.js pone unete-fuera) */
#unete { transition: opacity .3s, visibility .3s; }
body.unete-fuera #unete { opacity: 0; visibility: hidden; }

/* ═════════ El guion de color del giro (body[data-giro]: 0 nada, 1 pañuelo, 2 hiyab, 3 abaya) ═════════ */
/* los rótulos pasan del oro de la princesa al rojo sangre de Islam */
body { --giro: #eabb4c; --giro-fondo: rgba(20, 10, 30, .94); }
body[data-giro="1"] { --giro: #e89a5a; }
body[data-giro="2"] { --giro: #d8404a; --giro-fondo: rgba(28, 6, 14, .95); }
body[data-giro="3"] { --giro: #b0101e; --giro-fondo: rgba(10, 2, 4, .96); }
.rotulo-lugar { border-left-color: var(--giro) !important; }
.rotulo-lugar span { color: var(--giro) !important; }
.rotulo-cine { color: color-mix(in srgb, #fff4dc 70%, var(--giro)); }
#narracion .texto { background: var(--giro-fondo); }

/* en las filas de caras, el que se ha quedado sin conexión (el contenido 📵 lo pone tv.js solo para esos) */
.of-heroe::before, .on-heroe::before, .on-fila::before, .jz-quien::before { position: absolute; left: -12px; top: -16px; z-index: 5; font-size: 34px; line-height: 1; }

/* ───────── Onomatopeyas flotantes ───────── */
#onomatopeyas { position: absolute; inset: 0; pointer-events: none; }
.ono {
  position: absolute;
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: 700;
  font-size: 56px;
  color: #fff;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  text-shadow: 6px 0 var(--tinta), -6px 0 var(--tinta), 0 6px var(--tinta), 0 -6px var(--tinta), 6px 6px var(--tinta), -6px -6px var(--tinta), 6px -6px var(--tinta), -6px 6px var(--tinta);
}

/* ───────── Pantalla de inicio ───────── */
#inicio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 8, 30, .35), rgba(8, 3, 12, .92) 70%);
  cursor: pointer;
  transition: opacity .8s, visibility .8s;
}
#inicio .titulo { text-align: center; animation: flota 3s ease-in-out infinite; }
#inicio .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), 6px 6px var(--tinta), -6px -6px var(--tinta), 6px -6px var(--tinta), -6px 6px var(--tinta),
    0 12px #b3417a, 0 18px #7a1f4e, 0 24px var(--tinta), 0 40px rgba(0, 0, 0, .5);
}
#inicio .exp {
  font-family: 'Silkscreen', monospace;
  font-size: 64px;
  letter-spacing: 18px;
  color: var(--oro);
  text-shadow: 6px 6px 0 var(--tinta);
  margin-top: 40px;
}
#inicio .pulsa {
  margin-top: 90px;
  font-size: 42px;
  font-weight: 600;
  animation: parpadeo 1.1s steps(1) infinite;
  text-shadow: 4px 4px 0 var(--tinta);
}

/* ───────── Animaciones (a saltos, como el pixel art) ───────── */
@keyframes parpadeo { 50% { opacity: 0; } }
@keyframes latido { 50% { transform: scale(1.15); } }
@keyframes tiembla { 0% { transform: translateX(-4px); } 100% { transform: translateX(4px); } }
@keyframes bote { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes pop { 50% { transform: scale(1.18); } }
@keyframes celda { 0% { transform: scaleY(.3); } 100% { transform: none; } }
@keyframes flota { 50% { transform: translateY(-14px); } }

/* Traducción pequeña (Islam habla en ruso) */
#bocadillo .trad {
  font-size: 34px;
  font-weight: 400;
  color: #7a6a88;
  margin-top: 10px;
}
.ono small {
  display: block;
  font-size: 34px;
  font-weight: 400;
  text-align: center;
  color: #fff4dc;
}

/* ═════════ El cronómetro (reloj de tapas oxidado y con sangre, ver crono.js) ═════════ */
.crono { position: relative; width: 224px; height: 189px; }
.crono > canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.crono .c-sangre { pointer-events: none; }
.c-pantalla { position: absolute; perspective: 500px; }
.c-flip { position: absolute; inset: 6px 7px; }
.c-flip .mitad, .c-flip .hoja { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: linear-gradient(180deg, #26262c, #141418); backface-visibility: hidden; }
.c-flip .arriba { top: 0; border-radius: 6px 6px 0 0; }
.c-flip .abajo { bottom: 0; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #1a1a1e, #0c0c10); }
.c-flip .arriba::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #000; }
.c-flip canvas { position: absolute; left: 0; width: 100%; height: 200%; image-rendering: pixelated; }
.c-flip .arriba canvas { top: 0; }
.c-flip .abajo canvas { bottom: 0; }
.c-flip .hoja { visibility: hidden; }
.c-flip .hoja.arriba { transform-origin: 50% 100%; }
.c-flip .hoja.abajo { transform-origin: 50% 0%; transform: rotateX(90deg); }
.c-flip.gira .hoja { visibility: visible; }
.c-flip.gira .hoja.arriba { animation: flipArriba .16s ease-in forwards; }
.c-flip.gira .hoja.abajo { animation: flipAbajo .16s ease-out .16s forwards; }
@keyframes flipArriba { from { transform: rotateX(0); filter: brightness(1); } to { transform: rotateX(-90deg); filter: brightness(.4); } }
@keyframes flipAbajo { from { transform: rotateX(90deg); filter: brightness(1.6); } to { transform: rotateX(0); filter: brightness(1); } }
.crono.prisa { animation: cronoLate .5s steps(2) infinite; }
.crono.fin { animation: cronoFin .08s steps(2) infinite; }
@keyframes cronoLate { 50% { transform: scale(1.08) rotate(-2deg); } }
@keyframes cronoFin { 50% { transform: translate(5px, -4px) rotate(4deg); } }
/* el reloj normal (fuera del Juicio): sin sangre, late suave y al acabar solo bota */
.crono.normal .c-sangre { display: none; }
.crono.normal.prisa { animation: cronoSuave .5s steps(2) infinite; }
.crono.normal.fin { animation: cronoBota .3s steps(3) 2; }
@keyframes cronoSuave { 50% { transform: scale(1.05); } }
@keyframes cronoBota { 50% { transform: translateY(-10px); } }
/* los huecos donde va en cada juego: solo colocan */
.jz-reloj, .of-reloj, .on-reloj, .fg-reloj { background: none !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; animation: none !important; }
.jz-reloj { right: 22px !important; top: 14px !important; }
.jz-reloj .crono, .fg-reloj .crono { width: 196px; height: 165px; }
.fg-reloj { right: 16px !important; top: 16px !important; }

/* «Continuar donde se quedó» (si la tele se recarga a mitad de la noche) */
#inicio .reanudar { margin-top: 70px; display: flex; flex-direction: column; align-items: center; gap: 22px; font-size: 44px; font-weight: 600; text-shadow: 4px 4px 0 var(--tinta); }
#inicio .reanudar b { color: #ffe27a; }
#inicio .reanudar button { font: inherit; font-size: 42px; padding: 16px 40px 20px; border: 0; color: #fff; background: #c8387a; box-shadow: 0 0 0 6px var(--tinta), inset 0 -8px 0 rgba(0, 0, 0, .3); cursor: pointer; }
#inicio .reanudar button.no { background: #4a3a60; font-size: 34px; }
#inicio .reanudar small { font-size: 32px; opacity: .8; }
#inicio .reanudar button.nueva { background: #8a1a2a; font-size: 34px; }
#inicio .reanudar .aviso { font-size: 32px; font-weight: 400; color: #f0d8e8; max-width: 1100px; text-align: center; }

/* ═════════ Las cinemáticas en 3D (cgi.js): se pintan a 960×540 y se amplían con píxeles ═════════ */
#cgi { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; background: #000; }
.cgi-negro { position: absolute; inset: 0; background: #000; pointer-events: none; }
.cgi-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cgi-grano { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; mix-blend-mode: overlay; opacity: .16; pointer-events: none; }

/* ═════════ El filtro de tele antigua (03-10-2026, propuesta 3.1; tele-antigua.js, la tecla F lo quita) ═════════ */
/* Todo en una capa quieta (barrido, viñeta, reflejo del cristal y los bordes de color): casi no gasta. */
#tele-antigua {
  position: absolute; inset: 0; z-index: 90; pointer-events: none;
  border-radius: 36px / 30px;
  /* (todo con degradados y nada animado: las sombras borrosas por dentro y una banda de luz que bajaba hacían repintarla
     en cada fotograma y costaban la mitad de los fotogramas) */
  background:
    linear-gradient(90deg, rgba(255, 40, 100, .13), rgba(255, 40, 100, 0) 16px, rgba(40, 180, 255, 0) calc(100% - 16px), rgba(40, 180, 255, .13)),
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, 0) calc(100% - 40px), rgba(0, 0, 0, .22)),
    radial-gradient(ellipse 72% 68% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .36) 100%),
    linear-gradient(122deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 22%, rgba(255, 255, 255, 0) 34%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 3px, rgba(0, 0, 0, .11) 3px 6px);
  box-shadow: 0 0 0 60px #000;
}
body.sin-filtro #tele-antigua { display: none; }

/* ═════════ El telón de cuento entre paso y paso (03-10-2026, propuesta 3.2; la corona la pinta corona.js) ═════════ */
#telon-cuento { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 85; pointer-events: none; image-rendering: pixelated; }

/* ═════════ La noticia de la Entrega Prime del Polli (03-10-2026): arriba, encima de lo que haya ═════════ */
.noticia-tv {
  position: absolute; left: 50%; top: 36px; z-index: 80; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px; max-width: 1500px; padding: 18px 34px 20px 24px;
  font-family: 'Pixelify Sans', sans-serif; font-size: 40px; line-height: 1.15; color: var(--crema);
  background: rgba(20, 10, 30, .94); box-shadow: 0 0 0 6px var(--oro), 0 0 0 12px var(--tinta), 0 18px 0 6px rgba(0, 0, 0, .35);
  animation: noticiaEntra .5s steps(5) both; pointer-events: none;
}
.noticia-tv i { font-style: normal; font-size: 64px; line-height: 1; animation: bote .5s steps(2) infinite alternate; }
.noticia-tv b { color: #ffe27a; }
.noticia-tv.pillado { box-shadow: 0 0 0 6px #ff3a4a, 0 0 0 12px var(--tinta), 0 18px 0 6px rgba(0, 0, 0, .35); animation: noticiaEntra .5s steps(5) both, noticiaSirena .5s steps(1) 6; }
.noticia-tv.fuera { animation: noticiaSale .6s steps(5) both; }
@keyframes noticiaEntra { from { transform: translate(-50%, -160px); } to { transform: translateX(-50%); } }
@keyframes noticiaSale { to { transform: translate(-50%, -200px); opacity: 0; } }
@keyframes noticiaSirena { 50% { box-shadow: 0 0 0 6px #3a7aff, 0 0 0 12px var(--tinta), 0 18px 0 6px rgba(0, 0, 0, .35); } }


/* ═════════ Píxeles limpios (03-10-2026, propuesta 5.9) ═════════ */
/* Los muñecos que salen más pequeños que su tamaño (64×96): suavizados al encoger, que con «pixelated» se comían
   filas y columnas enteras (ojos y bocas que desaparecían). Los que salen más grandes, a escala entera y pixelados. */
.pf-votos canvas, .fg-quien canvas, .fg-banner canvas, .jv-ap .caras canvas, .tr-marca canvas { image-rendering: auto; }