/* ==========================================================================
   TRUCACHO GD - Vida de los escenarios (js/sistemas/vida.js)
   ========================================================================== */
#tg-capa-vida {
    /* [2026-11-01] Debajo de las cartas de la mesa (z-index 20-22) y de la mano (25): las cartas siempre quedan en primer plano.
       Antes estaba en 24 y los efectos (recortes, bocas, polvo) se superponían a las cartas jugadas. */
    position: absolute; inset: 0; z-index: 19; pointer-events: none; overflow: hidden;
}

/* Boca del patovica en la pantalla del nombre (js/ui/patovica_boca.js): capa del tamaño del dibujo encima del <img> */
.tg-patovica-boca { position: absolute; z-index: 3; pointer-events: none; }
.tg-patovica-ojos { position: absolute; background: no-repeat 0 0 / 100% 100%; opacity: 0; transition: opacity 30ms linear; }
.tg-patovica-boca-frame {position: absolute; background: no-repeat 0 0 / 100% 100%; opacity: 0; transition: opacity 20ms linear; }

/* Boca dibujada que se abre y se cierra sobre la boca cerrada del dibujo */
.tg-boca {
    position: absolute; transform: translate(-50%, -8%) rotate(var(--boca-rot, 0deg));
    transform-origin: 50% 8%;
    opacity: 0; pointer-events: none;
}
.tg-boca.hablando { opacity: 1; }
/* Boca por sprites: capas a tamaño completo del fondo; se ven solo las del estado actual */
.tg-boca-sprite { position: absolute; pointer-events: none; }
.tg-boca-frame { position: absolute; inset: 0; background: no-repeat 0 0 / 100% 100%; opacity: 0; transition: opacity 20ms linear; }

/* El borde superior queda fijo sobre la línea de la boca; solo baja el inferior */
.tg-boca svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: 50% 4%; transition: transform 60ms linear; transform: scale(.72, 0); }
.tg-boca[data-abre="1"] svg { transform: scale(.70, .30); }
.tg-boca[data-abre="2"] svg { transform: scale(.76, .62); }
.tg-boca[data-abre="3"] svg { transform: scale(.80, .95); }
.tg-boca-hueco { fill: var(--boca-relleno); stroke: var(--boca-contorno); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tg-boca-labio { stroke: var(--boca-contorno); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.tg-boca-lengua { fill: var(--boca-lengua); opacity: 0; }
.tg-boca[data-abre="3"] .tg-boca-lengua { opacity: .85; }

/* ---------------- AMBIENTE (js/sistemas/vida.js) ---------------- */
.tg-escena { position: absolute; pointer-events: none; }
.tg-escena > * { position: absolute; z-index: 3; }
/* Orden dentro de la escena: recortes del fondo (abajo) < personajes con cuerpo y cabeza < el resto de los efectos (humo, gotas, luces...) */
.tg-escena > .tg-recorte, .tg-escena > .tg-actor, .tg-escena > .tg-cuca-atras { z-index: 1; }   /* los NPC del fondo (actor) y la cucaracha de la pared también quedan detrás de los personajes */
.tg-escena > .tg-personaje { z-index: 2; }

/* Personaje con cuerpo y cabeza como capas propias (js/sistemas/vida.js, tipo 'personaje') */
.tg-personaje, .tg-pers-grupo { position: absolute; inset: 0; pointer-events: none; }
.tg-pers-cuerpo, .tg-pers-cabeza { position: absolute; pointer-events: none; will-change: transform; }
.tg-pers-cuerpo > .tg-dedo { pointer-events: none; will-change: transform; }
.tg-pers-cuerpo.tg-cuerpo-alterno > .tg-dedo, .tg-pers-cuerpo.tg-cuerpo-alterno > .tg-brazo-golpe, .tg-pers-cuerpo.tg-cuerpo-alterno > .tg-brazo-pose { display: none; }   /* otro actor cambió el dibujo del cuerpo (rascado): queda el original */
.tg-cartas-mano { position: absolute; inset: 0; pointer-events: none; filter: brightness(0.82) drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }   /* cartas bajo la mano, en la sombra de la mano */
.tg-carta-mano { position: absolute; background: url("../img/cartas/dorso.png") no-repeat 0 0 / 100% 100%; border-radius: 6%; transform-origin: 50% 18%; }
.tg-pers-grupo > .tg-gota { position: absolute; }   /* gotas de sudor dentro de la cabeza (acompañan sus movimientos) */

/* Humo: bolitas difusas que suben, crecen y se deshacen */
.tg-humo { aspect-ratio: 1 / 2; transform: translate(-50%, -100%); --humo: rgba(245, 245, 245, .9); }
.tg-humo span {
    position: absolute; left: 15%; bottom: 0; width: 70%; aspect-ratio: 1;
    border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, var(--humo) 0%, rgba(255, 255, 255, 0) 70%);
    /* [2026-11-03] sin filter: blur (se recalculaba en cada cuadro mientras la voluta crece); el degradé ya es difuso */
    will-change: transform, opacity;
    animation: tgHumoSube 4.6s ease-out infinite;
}
@keyframes tgHumoSube {
    0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
    18%  { opacity: .9; }
    100% { opacity: 0; transform: translate(calc(var(--deriva, 0) * 60%), var(--humo-sube, -240%)) scale(var(--humo-escala, 2.6)); }
}

/* Polvo flotando en la luz */
.tg-polvo i {
    position: absolute; border-radius: 50%; background: rgba(255, 244, 214, .85);
    box-shadow: 0 0 4px rgba(255, 236, 190, .8);
    animation: tgPolvoDeriva 11s ease-in-out infinite alternate, tgPolvoBrilla 4s ease-in-out infinite;
}
@keyframes tgPolvoDeriva {
    from { transform: translate(0, 0); }
    to   { transform: translate(26px, -34px); }
}
@keyframes tgPolvoBrilla { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }

/* Moscas en óvalo alrededor de la cabeza (tipo 'moscas'): js/sistemas/vida.js mueve cada .tg-mosca cuadro a cuadro por su óvalo
   (y la achica y oscurece arriba, cuando pasa por detrás de la cabeza). El <i> es la mosca: cuerpito oscuro que zumba, con dos
   alitas transparentes encima que aletean rapidísimo; posada (.quieta) deja de zumbar y pliega las alas. Tamaño en cqw:
   proporcional al óvalo, en cualquier pantalla. */
.tg-moscas { position: absolute; pointer-events: none; z-index: 3; container-type: inline-size; }
.tg-mosca { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.tg-mosca i {
    position: absolute; left: 0; top: 0;
    width: max(5px, 5cqw); aspect-ratio: 1.3; translate: -50% -50%;
    border-radius: 50%; background: radial-gradient(ellipse at 40% 40%, #3a3026, #0d0905 70%);
    box-shadow: 0 0 1px .5px rgba(210, 220, 230, .35);
    animation: tgMoscaZumba .14s linear infinite alternate;
}
.tg-mosca i::before, .tg-mosca i::after {   /* alitas */
    content: ''; position: absolute; bottom: 55%; width: 70%; height: 60%; border-radius: 50%; transform-origin: 50% 100%;
    background: rgba(225, 236, 248, .6); box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    animation: tgMoscaAla .045s linear infinite alternate;
}
.tg-mosca i::before { left: -12%; rotate: -28deg; }
.tg-mosca i::after { right: -12%; rotate: 28deg; animation-delay: -.022s; }
@keyframes tgMoscaAla { from { scale: 1 1; opacity: .85; } to { scale: 1 .25; opacity: .4; } }
@keyframes tgMoscaZumba { from { rotate: -14deg; } to { rotate: 14deg; } }
.tg-mosca.quieta i { animation: none; rotate: 0deg; }
.tg-mosca.quieta i::before, .tg-mosca.quieta i::after { animation: none; scale: .9 .7; opacity: .75; }
.tg-mosca.quieta i::before { rotate: -12deg; }
.tg-mosca.quieta i::after { rotate: 12deg; }

/* Destello en forma de estrella */
.tg-destello {
    aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); opacity: 0;
    background:
        radial-gradient(circle, #fff 0 12%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(90deg, rgba(255, 255, 255, 0) 0 42%, #fff 50%, rgba(255, 255, 255, 0) 58% 100%),
        linear-gradient(0deg, rgba(255, 255, 255, 0) 0 42%, #fff 50%, rgba(255, 255, 255, 0) 58% 100%);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9));
}
.tg-destello.pop { animation: tgDestelloPop .75s ease-out; }
@keyframes tgDestelloPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
    30%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(25deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(60deg); }
}

/* Halo de luz */
.tg-luz {
    aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle, var(--luz) 0%, rgba(0, 0, 0, 0) 68%);
    mix-blend-mode: screen; opacity: .8;
    animation: tgLuzRespira 3s ease-in-out infinite alternate;
}
.tg-luz.titila { animation-name: tgLuzTitila; animation-timing-function: steps(1, end); }
@keyframes tgLuzRespira { from { opacity: .45; transform: translate(-50%, -50%) scale(.95); } to { opacity: .95; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes tgLuzTitila {
    0%, 100% { opacity: .85; } 12% { opacity: .55; } 14% { opacity: .9; } 47% { opacity: .85; }
    50% { opacity: .35; } 52% { opacity: .8; } 53% { opacity: .5; } 55% { opacity: .9; }
}

/* Recortes animados del fondo (cabeceo, balanceo, respiración, lámpara, risa) */
.tg-recorte { overflow: hidden; }
.tg-recorte-in {
    position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat;
    animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
    will-change: transform;
}
.tg-recorte-in[data-mov="cabeceo"]  { animation-name: tgCabeceo; }
.tg-recorte-in[data-mov="balanceo"] { animation-name: tgBalanceo; }
.tg-recorte-in[data-mov="respira"]  { animation-name: tgRespira; }
.tg-recorte-in[data-mov="pendulo"]  { animation-name: tgPendulo; }
.tg-recorte-in[data-mov="risa"]     { animation-name: tgRisa; animation-duration: .22s !important; }
@keyframes tgCabeceo  { from { transform: rotate(calc(var(--amp) * -.5deg)) translateY(0); } to { transform: rotate(calc(var(--amp) * .6deg)) translateY(calc(var(--amp) * 1px)); } }
@keyframes tgBalanceo { from { transform: translateX(calc(var(--amp) * -1px)); } to { transform: translateX(calc(var(--amp) * 1px)); } }
@keyframes tgRespira  { from { transform: scale(1, 1); } to { transform: scale(1, calc(1 + var(--amp) * .004)); } }
@keyframes tgPendulo  { from { transform: rotate(calc(var(--amp) * -1deg)); } to { transform: rotate(calc(var(--amp) * 1deg)); } }
@keyframes tgRisa     { from { transform: translateY(0) rotate(-.4deg); } to { transform: translateY(calc(var(--amp) * -2px)) rotate(.5deg); } }

/* Actor: cuadros dibujados de un personaje secundario (solo se ve uno a la vez, y ninguno entre gestos) */
.tg-actor { overflow: visible; }
.tg-actor-frame { position: absolute; inset: 0; background: no-repeat 0 0 / 100% 100%; opacity: 0; transition: opacity 50ms linear; }
.tg-actor-reposo .tg-actor-frame { transition: none; }   /* parches de video: los cuadros cambian de golpe (con fundido se asomaba el dibujo del fondo) */

/* Tensión de cámara: viñeta en los bordes (queda debajo de cartas, botones y personajes animados) */
#tg-vineta {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 52%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .92) 100%);
    transition: opacity 1.6s ease;
}

/* Gota de sudor: lágrima chiquita, translúcida, con un brillo */
.tg-gota {
    aspect-ratio: 1 / 1.5; opacity: 0; transform: translate(-50%, 0);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95) 0 14%, rgba(190, 225, 245, .85) 40%, rgba(120, 175, 210, .75) 100%);
    box-shadow: 0 0 0 .5px rgba(40, 60, 80, .55);
    clip-path: polygon(50% 0, 82% 45%, 100% 70%, 85% 95%, 50% 100%, 15% 95%, 0 70%, 18% 45%);
}

/* Brasas: puntitos naranjas que suben y se apagan */
.tg-brasas { transform: translate(-50%, -100%); }
.tg-brasas i {
    position: absolute; bottom: 0; border-radius: 50%; opacity: 0;
    background: #ffb347; box-shadow: 0 0 5px 1px rgba(255, 140, 40, .85);
    animation: tgBrasa 2.4s ease-out infinite;
}
@keyframes tgBrasa {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--deriva, 0), -460%) scale(.3); background: #ff5a1f; }
}

/* Nubes lentas dentro de la máscara del cielo */
.tg-nubes { overflow: hidden; mix-blend-mode: screen; }
.tg-nubes b {
    position: absolute; left: 0; border-radius: 50%;
    /* [2026-11-03] sin filter: blur; el degradé es un poco más largo para que el borde quede igual de suave */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .5) 35%, rgba(255, 255, 255, .15) 58%, rgba(255, 255, 255, 0) 75%);
    will-change: transform;
    animation: tgNubeCruza 150s linear infinite;
}
@keyframes tgNubeCruza { from { transform: translateX(-60%); } to { transform: translateX(380%); } }
/* Nubes dibujadas (PNG): sin mezcla de color; cruzan el ancho entero de la escena (cqw) entrando y saliendo por los bordes */
.tg-nubes.tg-nubes-dibujo { mix-blend-mode: normal; container-type: inline-size; }
.tg-nubes.tg-nubes-dibujo b { background: no-repeat 0 0 / 100% 100%; border-radius: 0; animation-name: tgNubeDibujo; }
@keyframes tgNubeDibujo { from { transform: translateX(calc(-1 * var(--w))); } to { transform: translateX(100cqw); } }

/* Sol fuerte (tipo 'sol'): brillo que respira + rayos que giran lento + tinte cálido arriba. Solo opacidad y giro. */
.tg-sol { pointer-events: none; }
.tg-sol i { position: absolute; display: block; pointer-events: none; }
.tg-sol-tinte {
    left: 0; top: 0; width: 100%; opacity: var(--sol-fuerza);
    background:
        radial-gradient(ellipse 60% 90% at var(--sol-x) 0%, rgba(255, 196, 92, .30) 0%, rgba(255, 170, 60, 0) 70%),
        linear-gradient(180deg, rgba(255, 166, 58, .16) 0%, rgba(255, 166, 58, 0) 100%);
}
.tg-sol-brillo {
    aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
    /* [2026-11-03] núcleo blanco bien definido (el sol se perdía contra el cielo claro del nivel 3)
       [2026-11-05] "no veo el sol": el núcleo blanco y el halo ancho solo blanqueaban el cielo. Ahora es un disco amarillo con borde
       (16% del radio, medido hasta el borde con closest-side) y un halo más corto */
    background: radial-gradient(circle closest-side, rgba(255, 253, 232, 1) 0%, rgba(255, 240, 150, 1) 12%, rgba(255, 222, 96, 1) 16%,
        rgba(255, 214, 110, .62) 19%, rgba(255, 196, 90, .30) 34%, rgba(255, 176, 70, .10) 60%, rgba(255, 160, 50, 0) 100%);
    animation: tgSolRespira 6s ease-in-out infinite alternate; will-change: opacity;
}
@keyframes tgSolRespira { from { opacity: calc(var(--sol-fuerza) * .72); } to { opacity: var(--sol-fuerza); } }
.tg-sol-rayos {
    aspect-ratio: 1; border-radius: 50%; opacity: calc(var(--sol-fuerza) * .9);
    background: repeating-conic-gradient(rgba(255, 238, 180, 0) 0deg, rgba(255, 238, 180, .28) 5deg, rgba(255, 238, 180, 0) 10deg, rgba(255, 238, 180, 0) 21deg);
    -webkit-mask-image: radial-gradient(circle, #000 6%, transparent 66%); mask-image: radial-gradient(circle, #000 6%, transparent 66%);
    animation: tgSolGira 120s linear infinite; will-change: transform;
}
@keyframes tgSolGira { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Rocola que late con la música (tipo 'rocola'): la opacidad la mueve js/sistemas/vida.js con los graves de la canción */
.tg-rocola {
    transform: translate(-50%, -50%); border-radius: 45% 45% 12% 12%;
    background: radial-gradient(ellipse 50% 50% at 50% 45%, var(--luz) 0%, rgba(255, 120, 40, 0) 72%);
    mix-blend-mode: screen; will-change: opacity;
}

/* Bajón de luz (tipo 'bajon'): oscurecido breve de todo el bar */
.tg-bajon { background: rgb(12, 6, 0); pointer-events: none; }

/* Humo de bar (tipo 'humoBar'): volutas grandes y lentísimas, sin desenfoque */
.tg-humobar { pointer-events: none; overflow: visible; }
.tg-humobar i {
    position: absolute; aspect-ratio: 1.6; border-radius: 50%; opacity: 0;
    background: radial-gradient(ellipse at center, rgba(230, 215, 190, 1) 0%, rgba(230, 215, 190, .45) 35%, rgba(230, 215, 190, 0) 70%);
    animation: tgHumoBar 36s ease-in-out infinite; will-change: transform, opacity;
}
@keyframes tgHumoBar {
    0%   { opacity: 0; transform: translate(0, 0) scale(.8); }
    30%  { opacity: var(--humobar); }
    70%  { opacity: calc(var(--humobar) * .8); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.35); }
}

/* Cucaracha (tipo 'cucaracha'): dibujada en SVG; mueve las patas al caminar y las antenas cuando se frena */
.tg-cuca { aspect-ratio: 1.5; pointer-events: none; transform-origin: 50% 50%; }
.tg-cuca svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tg-cuca .tg-cuca-patas, .tg-cuca .tg-cuca-antenas { transform-box: fill-box; transform-origin: 50% 50%; }
.tg-cuca.camina .tg-cuca-patas { animation: tgCucaPatas .09s linear infinite alternate; }
.tg-cuca.olfatea .tg-cuca-antenas, .tg-cuca.camina .tg-cuca-antenas { animation: tgCucaAntenas .35s ease-in-out infinite alternate; }
@keyframes tgCucaPatas { from { transform: scaleX(.85) skewX(-12deg); } to { transform: scaleX(1.05) skewX(12deg); } }
@keyframes tgCucaAntenas { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* Paisaje por la ventana: la textura se repite sin cortes */
.tg-ventana { overflow: hidden; }
.tg-ventana-in { position: absolute; inset: 0; background-repeat: repeat-x; animation: tgPaisaje 24s linear infinite; }
@keyframes tgPaisaje { from { background-position-x: 0; } to { background-position-x: var(--ciclo, 100%); } }

/* Quieto solo con Opciones → "Animaciones del ambiente" apagado (clase que pone js/sistemas/vida.js).
   [2026-11-02] Ya no se sigue el "movimiento reducido" de Windows: lo traen activado muchas PC y frenaba el polvo, el humo y las luces. */
#tg-capa-vida.tg-sin-movimiento :is(.tg-humo span, .tg-polvo i, .tg-luz, .tg-destello.pop,
    .tg-brasas i, .tg-nubes b, .tg-ventana-in, .tg-recorte-in, .tg-sol i, .tg-humobar i, .tg-tubo, .tg-neon, .tg-segundero i) { animation: none !important; }
#tg-capa-vida.tg-sin-movimiento .tg-moscas { display: none; }

/* Lucecita de un actor (tipo 'actor' con brillo): se prende mientras dura el gesto (p. ej. el posnet que cobra) */
.tg-actor-luz {
    position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
    background: radial-gradient(circle, var(--luz) 0%, rgba(120, 255, 140, 0) 68%); mix-blend-mode: screen;
}
.tg-actor-luz.prendida { animation: tgActorLuz .5s ease-in-out infinite alternate; }
@keyframes tgActorLuz { from { opacity: .35; } to { opacity: 1; } }

/* Parrillero del nivel 3 (tipo 'parrillero', js/sistemas/vida.js): detrás de los personajes, delante de los recortes del brindis */
.tg-escena > .tg-parrillero { z-index: 1; }
.tg-parrillero img { position: absolute; display: block; pointer-events: none; }
.tg-parrillero .tg-parr-pose, .tg-parrillero .tg-parr-brazo { opacity: 0; }
.tg-parrillero .tg-parr-pose.on, .tg-parrillero .tg-parr-brazo.on { opacity: 1; }
.tg-parr-cuerpo { position: absolute; will-change: transform; }

/* Tráfico de la autopista (tipo 'trafico', nivel 4): en el fondo, detrás de los personajes */
.tg-escena > .tg-trafico { z-index: 0; pointer-events: none; }
.tg-trafico img { display: block; pointer-events: none; }

/* [2026-11-06] potrero del nivel 4: lo que pasa al fondo va detrás de los personajes; el atardecer, encima de todo lo de la escena */
.tg-escena > .tg-fondo-vivo { z-index: 1; }
.tg-sombras-nubes { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.tg-sombras-nubes > i { position: absolute; left: 0; height: 150%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 30, 20, 1), rgba(20, 30, 20, .55) 55%, transparent); will-change: transform; }
.tg-volador, .tg-pelota, .tg-perro { will-change: transform, opacity; transform-origin: 50% 50%; }
.tg-volador > svg { display: block; width: 100%; height: auto; }
.tg-perro > img { display: block; width: 100%; height: 100%; }
.tg-escena > .tg-atardecer { z-index: 6; pointer-events: none; }
/* [2026-11-12] nivel 4: fondo por chico (día / tarde / noche); el tráfico de la autopista se apaga con la luz */
.tg-escena > .tg-fondo-chico { z-index: 0; pointer-events: none; }
.tg-fondo-chico > img { display: block; pointer-events: none; user-select: none; }
.tg-escena > .tg-capa-fija { z-index: 1; pointer-events: none; }
/* los autos del dibujo son de día (claros): de tarde se calientan un poco y de noche quedan casi siluetas con las luces prendidas */
.tg-auto { transition: filter 8s ease-in-out; }
.tg-escena[data-fase="tarde"] .tg-auto { filter: brightness(.88) sepia(.2) saturate(1.1); }
.tg-escena[data-fase="noche"] .tg-auto { filter: brightness(.2) saturate(.7) contrast(1.15); }
.tg-trafico > img:not(.tg-auto) { transition: filter 8s ease-in-out; }   /* la baranda */
.tg-escena[data-fase="noche"] .tg-trafico > img:not(.tg-auto) { filter: brightness(.5); }
.tg-auto-luz {
    display: none; pointer-events: none; mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 9% 24% at 3% 52%, rgba(255, 60, 40, .95), rgba(255, 40, 30, .35) 45%, rgba(255, 40, 30, 0) 100%),
        radial-gradient(ellipse 14% 34% at 98% 60%, rgba(255, 238, 180, .95), rgba(255, 215, 130, .4) 45%, rgba(255, 215, 130, 0) 100%);
}
/* la autopista de la imagen de noche está unos 35 px (de 1080) más abajo que la de día: el tráfico baja con ella */
.tg-escena > .tg-trafico { transition: transform 8s ease-in-out; }
.tg-escena[data-fase="noche"] > .tg-trafico { transform: translateY(3.25%); }
/* figuras que no están en cierta fase (los chicos que miran no están de noche) */
.tg-figura[data-oculta] { transition: opacity 6s ease-in-out; }
.tg-escena[data-fase="dia"] .tg-figura[data-oculta~="dia"],
.tg-escena[data-fase="tarde"] .tg-figura[data-oculta~="tarde"],
.tg-escena[data-fase="noche"] .tg-figura[data-oculta~="noche"] { opacity: 0; }
.tg-escena[data-fase="noche"] .tg-auto-luz { display: block; animation: tgLuzAuto 8s ease-in forwards; }
@keyframes tgLuzAuto { from { filter: opacity(0); } to { filter: opacity(.9); } }

/* copa de vino del nivel 1 (tipo 'copa' de js/sistemas/vida.js): la ondita de luz sobre el vino al temblar */
.tg-copa-ola {
    position: absolute; height: .45%; margin-top: -.2%; border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 225, 225, .95), rgba(255, 160, 170, .35) 55%, transparent 75%);
    mix-blend-mode: screen;
}

/* [2026-11-11] gente en el fondo del potrero (tipo 'figura', nivel 4): el arquero que ataja penales y los chicos que miran */
.tg-figura { pointer-events: none; }
.tg-figura > img { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
.tg-pelota-penal { will-change: transform, opacity; pointer-events: none; }
/* arquero en reposo partido en dos: piernas fijas, torso que se balancea desde la cintura */
.tg-figura-cuerpo { position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
.tg-figura-cuerpo > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.tg-escena > .tg-cartel-led { z-index: 1; pointer-events: none; }   /* el cartel LED de la terminal (nivel 5): detras de los personajes */

/* ---------- Nivel 5 (la terminal): luces y detalles baratos del fondo (js/sistemas/vida.js: tubo, neon, segundero) ---------- */
/* Gente del fondo que no está en cada fondo por chico: se funden junto con el fondo (fases de fondoPorChico: lleno / poca / vacia) */
.tg-recorte[data-oculta], .tg-micro[data-oculta] { transition: opacity 6s ease-in-out; }
.tg-escena[data-fase="lleno"] .tg-recorte[data-oculta~="lleno"], .tg-escena[data-fase="lleno"] .tg-micro[data-oculta~="lleno"],
.tg-escena[data-fase="poca"] .tg-recorte[data-oculta~="poca"], .tg-escena[data-fase="poca"] .tg-micro[data-oculta~="poca"],
.tg-escena[data-fase="vacia"] .tg-recorte[data-oculta~="vacia"], .tg-escena[data-fase="vacia"] .tg-micro[data-oculta~="vacia"] { opacity: 0; }
/* [2026-11-13] el micro de la ventana (nivel 5): parche sin micro + micro que se va, recortados por la mascara de los vidrios; se funde con el fondo del 3.er chico */
.tg-escena > .tg-micro { z-index: 1; pointer-events: none; }
.tg-micro img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.tg-micro-vidrio { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.tg-micro-bus { position: absolute; }
.tg-micro-bus i { position: absolute; opacity: 0; background: radial-gradient(ellipse 22% 24% at 50% 50%, rgba(255,250,205,.95), rgba(255,244,170,.55) 60%, transparent 100%), radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,236,150,.38), transparent 100%); }
/* tubos fluorescentes: veladura que los apaga un instante (solo opacidad) */
.tg-escena > .tg-tubo { z-index: 1; pointer-events: none; background: rgb(48, 62, 80); opacity: 0; border-radius: 2px;
    animation: tgTuboA 11s steps(1, end) infinite; }
.tg-tubo[data-patron="b"] { animation-name: tgTuboB; animation-duration: 17s; }
.tg-tubo[data-patron="c"] { animation-name: tgTuboC; animation-duration: 23s; }
@keyframes tgTuboA { 0%, 100% { opacity: 0; } 61% { opacity: .62; } 62% { opacity: .05; } 63% { opacity: .7; } 64% { opacity: 0; } 66% { opacity: .35; } 67% { opacity: 0; } }
@keyframes tgTuboB { 0%, 100% { opacity: 0; } 30% { opacity: .55; } 31% { opacity: 0; } 32% { opacity: .65; } 36% { opacity: .1; } 37% { opacity: 0; } 82% { opacity: .45; } 83% { opacity: 0; } }
@keyframes tgTuboC { 0%, 100% { opacity: 0; } 8% { opacity: .6; } 9% { opacity: .1; } 10% { opacity: .6; } 12% { opacity: 0; } 55% { opacity: .5; } 56% { opacity: 0; } 57% { opacity: .55; } 58% { opacity: 0; } }
/* neón con mal contacto */
.tg-escena > .tg-neon { z-index: 1; pointer-events: none; opacity: 0; animation: tgNeonA 13s steps(1, end) infinite; }
.tg-neon[data-patron="b"] { animation-name: tgNeonB; animation-duration: 19s; }
@keyframes tgNeonA { 0%, 100% { opacity: 0; } 22% { opacity: .5; } 23% { opacity: .12; } 24% { opacity: .55; } 25% { opacity: 0; } 27% { opacity: .4; } 28% { opacity: 0; } 70% { opacity: .3; } 72% { opacity: 0; } }
@keyframes tgNeonB { 0%, 100% { opacity: 0; } 41% { opacity: .35; } 42% { opacity: 0; } 43% { opacity: .45; } 44% { opacity: .1; } 45% { opacity: 0; } 88% { opacity: .3; } 89% { opacity: 0; } }
/* pantalla de la máquina de pasajes: texto que va cambiando (lo cambia un temporizador de JS; sin animaciones de CSS) */
.tg-escena > .tg-pantalla { z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(#e2ecf4, #c3d6e8); }
.tg-pantalla span { font-family: 'Lilita One', Impact, sans-serif; line-height: 1.05; white-space: pre; color: #1e1b1b; opacity: .72; transition: opacity 60ms linear; }   /* algo transparente: se funde con la pantalla y pasa desapercibido */
/* segundero del reloj de pared: gira de a un paso por segundo */
.tg-escena > .tg-segundero { z-index: 1; pointer-events: none; }
.tg-segundero i { position: absolute; left: 50%; top: 0; height: 50%; background: #b3261e; transform-origin: 50% 100%;
    animation: tgSegundero 60s steps(60, end) infinite; }
@keyframes tgSegundero { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }