/* cazador-juego.css — el «toque de juego» del Cazador de Señales (29-sep-2026).

   Nico: «quiero que le des el toque de juego así muy guapo a todas las
   pantallas de los juegos», tomando como modelo la entrada de la portada del
   Duelo (variante 2, commit 31beffac): los elementos entran con impacto, flash,
   temblor y marcos que laten. Aquí se aplica a cada pantalla del Cazador:
   figuras de «¿QUIÉN MANDA?», señales que se levantan como en la feria, rótulo
   de oleada, anuncio de ronda especial, pausa, cartel de fallo, caja
   registradora y récord. La parte que necesita JS (temblor, sonido, números que
   cuentan, partículas en el punto exacto) vive en games/cazador/juego-fx.js.

   Reglas: solo se anima transform/opacity (y las propiedades sueltas
   translate/rotate/scale, que también van al compositor y NO pisan el
   transform que el bucle del juego escribe en cada señal). Las entradas de lo
   que se pulsa van con `backwards`, no `both`, para no bloquear el :active.
   Con prefers-reduced-motion no se mueve nada (bloque final). No cambia ningún
   dibujo elegido (caseta de pausa, caja registradora, montaje 3). */

:root { --czj-oro1: #fff3c4; --czj-oro2: #f6d06a; --czj-oro3: #c8952c; }

/* ═════════════════ «¿QUIÉN MANDA?»: las figuras nuevas ═════════════════ */
.cz-fig { --fc: #f3d27a; }
.cz-fig-agente { --fc: #3b9bff; }
.cz-fig-balizas { --fc: #ff8a1f; }
.cz-fig-semaforo { --fc: #3ee07a; }
.cz-fig-senal { --fc: #ff4d4d; }
.cz-fig-marca { --fc: #e9eef5; }
.cz-fig .cz-fig-arte { position: absolute; left: 0; right: 0; top: 0; bottom: 14%; display: block; transform-origin: 50% 100%; pointer-events: none; }
.cz-fig .cz-fig-arte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* el Policía Local tiene los brazos en cruz: se le deja pasar de su hueco para
   que no quede diminuto (los brazos no se pulsan: el botón es su hueco) */
.cz-fig-agente-pl .cz-fig-arte { left: -22%; right: -22%; }
.cz-fig-agente-gc .cz-fig-arte { left: -8%; right: -8%; }
/* la señal oficial, en su poste (sin la peana vieja de cartón) */
.cz-fig.cz-fig-senal::after { display: none; }
.cz-fig .cz-fig-arte-senal > img { inset: auto; left: 8%; top: 2%; width: 84%; height: 66%; object-fit: contain; object-position: 50% 0; z-index: 1; }
.cz-fig .cz-fig-arte-senal .cz-fig-poste { left: 46.5%; width: 7%; top: 40%; bottom: 0; }
/* la placa: qué es cada figura, en grande, con su color de familia */
.cz-fig-placa {
  position: absolute; left: 4%; right: 4%; bottom: 0; height: 15.5%; min-height: 26px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none;
  border-radius: 7px; background: linear-gradient(180deg, #3a2716, #1a110a);
  box-shadow: inset 0 0 0 1.5px rgba(243,210,122,.75), inset 0 3px 0 var(--fc), 0 0 12px color-mix(in srgb, var(--fc) 45%, transparent), 0 4px 8px rgba(0,0,0,.6);
}
.cz-fig-placa { container-type: inline-size; }
.cz-fig-placa b { font: 900 min(calc(14px * var(--cz-k, 1)), 12.5cqi)/1 'DM Sans', var(--cz-fb, sans-serif); letter-spacing: .03em; text-transform: uppercase; color: #fdf6e6; white-space: nowrap; text-shadow: 0 0 8px color-mix(in srgb, var(--fc) 70%, transparent); }
.cz-fig-placa small { font: 800 calc(12px * var(--cz-k, 1))/1 var(--cz-fb, 'DM Sans', sans-serif); letter-spacing: .03em; text-transform: uppercase; color: var(--fc); white-space: nowrap; }
.cz-fig-marca .cz-fig-placa small, .cz-fig-marca .cz-fig-placa b { text-shadow: none; }
.cz-fig-marca .cz-fig-placa small { color: #cfd6df; }
/* cartel que enseña: las figuras son imágenes ahora */
.cz-ap-marco.cz-ap-marco-fig { position: relative; }
.cz-ap-marco-fig .cz-ap-figsvg { position: absolute; inset: 6%; width: auto; height: auto; display: block; }
.cz-ap-marco-fig .cz-ap-figsvg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ═════════════════ capas del anuncio y del flash (las pone juego-fx.js) ═════════════════ */
/* se estampa ENCIMA del letrero (juego-fx.js le pone el top): no tapa las baldas */
.czj-anuncio { position: fixed; left: 0; right: 0; top: 22%; translate: 0 -50%; z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; }
.czj-anuncio i { font: 800 normal calc(12px * var(--cz-k, 1))/1 var(--cz-fb, 'DM Sans', sans-serif); letter-spacing: .24em; text-transform: uppercase; color: #fff7ea;
  padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, var(--ac2), var(--ac)); border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 16px var(--ac), 0 4px 8px rgba(0,0,0,.6); }
.czj-anuncio b { display: block; max-width: 92vw; text-align: center; font: 900 calc(27px * var(--cz-k, 1))/1.02 var(--cz-fd, 'Syne', sans-serif); letter-spacing: .01em; max-width: min(84vw, 560px); text-transform: uppercase;
  background: linear-gradient(180deg, var(--czj-oro1) 0%, var(--czj-oro2) 45%, var(--czj-oro3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3a2708) drop-shadow(0 0 20px var(--ac)); }
.czj-anuncio-q { --ac: #1f7cff; --ac2: #62b4ff; }
.czj-anuncio-f { --ac: #e3560f; --ac2: #ff9c3a; }
.czj-anuncio-a { --ac: #159a48; --ac2: #5cf08f; }
.czj-anuncio.czj-on { animation: czjAnuncio 1150ms cubic-bezier(.2,.9,.3,1) both; }
.czj-anuncio.czj-on b { animation: czjSlam 520ms cubic-bezier(.3,1.6,.5,1) 60ms both; }
.czj-anuncio.czj-on i { animation: czjSello 380ms cubic-bezier(.3,1.7,.5,1) 0ms both; }
@keyframes czjAnuncio { 0% { opacity: 0; } 8% { opacity: 1; transform: none; } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.82); } }
@keyframes czjSlam { 0% { opacity: 0; transform: scale(2.8) rotate(-7deg); } 60% { opacity: 1; transform: scale(.9) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes czjSello { from { opacity: 0; transform: scale(2) rotate(-6deg); } to { opacity: 1; transform: none; } }
.czj-flash { position: fixed; inset: 0; z-index: 39; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side at 50% 42%, rgba(255,255,255,.9), rgba(255,210,120,.45) 35%, rgba(59,155,255,.12) 62%, transparent); }
.czj-flash.czj-on { animation: czjFlash 620ms ease-out both; }
@keyframes czjFlash { 0% { opacity: 0; transform: scale(.3); } 16% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
/* borde rojo al perder una vida */
.czj-herida { position: fixed; inset: 0; z-index: 38; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(255,30,30,.55) 100%); }
.czj-herida.czj-on { animation: czjHerida 700ms ease-out both; }
@keyframes czjHerida { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
/* la vida que se rompe y se cae del HUD */
.czj-vida { position: fixed; z-index: 41; pointer-events: none; border-radius: 4px; background: linear-gradient(180deg, #ff6b6b, #d11f1f); box-shadow: 0 0 12px rgba(255,60,60,.9); }
.czj-vida.czj-on { animation: czjVida 760ms cubic-bezier(.3,.1,.6,1) both; }
@keyframes czjVida { 0% { transform: none; opacity: 1; } 20% { transform: scale(1.6) rotate(-10deg); opacity: 1; } 100% { transform: translate(18px, 90px) scale(.6) rotate(70deg); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {

/* ═════════════════ figuras: se levantan como las dianas de la feria ═════════════════ */
.cz-fig .cz-fig-arte { animation: czjFigSube 640ms cubic-bezier(.3,1.5,.5,1) calc(var(--i, 0) * 150ms + 60ms) both; }
.cz-fig .cz-fig-placa { animation: czjPlaca 420ms cubic-bezier(.3,1.7,.5,1) calc(var(--i, 0) * 150ms + 420ms) both; }
.cz-fig::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 10%; height: 14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,230,180,.55), transparent); opacity: 0;
  animation: czjPolvo 600ms ease-out calc(var(--i, 0) * 150ms + 300ms) both; }
@keyframes czjFigSube { 0% { opacity: 0; transform: perspective(600px) rotateX(88deg); } 45% { opacity: 1; } 70% { transform: perspective(600px) rotateX(-14deg); } 88% { transform: perspective(600px) rotateX(5deg); } 100% { opacity: 1; transform: none; } }
@keyframes czjPlaca { from { opacity: 0; transform: translateY(70%) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes czjPolvo { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8, 1.3); } }

/* ═════════════════ señales nuevas en la cinta: saltan de detrás de la balda ═════════════════ */
body.cz-partida .cz-sign.czj-nueva { transform-origin: 50% 100%; animation: czjSenal 560ms cubic-bezier(.3,1.5,.5,1) var(--czj-d, 0ms) backwards; }
@keyframes czjSenal { 0% { opacity: 0; rotate: x 85deg; scale: .7; } 50% { opacity: 1; } 72% { rotate: x -12deg; scale: 1.06; } 100% { rotate: x 0deg; scale: 1; } }

/* ═════════════════ el letrero cambia de mecánica: se voltea ═════════════════ */
.cz-rule.czj-volteo { animation: czjVolteo 620ms cubic-bezier(.3,1.4,.5,1) both; }
@keyframes czjVolteo { 0% { rotate: x 90deg; scale: 1.08; } 60% { rotate: x -10deg; scale: 1.02; } 100% { rotate: x 0deg; scale: 1; } }
/* la mecha de la ronda, cuando se acaba: late en rojo */
.cz-rule-mecha.czj-prisa { animation: czjPrisa .5s ease-in-out infinite; }
@keyframes czjPrisa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* racha: la casilla del combo arde */
body.cz-partida .cz-hud-cell.czj-racha { position: relative; }
body.cz-partida .cz-hud-cell.czj-racha::after { content: ""; position: absolute; inset: -3px; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 16px 3px rgba(255,140,40,.85), inset 0 0 10px rgba(255,190,80,.6); animation: czjLate 900ms ease-in-out infinite; }
@keyframes czjLate { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ═════════════════ rótulo de oleada: el cartel cae de las cadenas ═════════════════ */
body.cz-partida .cz-wavebanner.cz-wb-show,
.cz-wavebanner.cz-wb-show { animation: czjWave 1500ms linear both; }
@keyframes czjWave { 0% { opacity: 1; } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6vh) scale(.92); } }
.cz-wavebanner.cz-wb-show::before { animation: czjCartel 620ms cubic-bezier(.3,1.35,.5,1) both; transform-origin: 50% 0; }
@keyframes czjCartel { 0% { transform: translate(-50%, -150vh) rotate(-8deg); } 62% { transform: translate(-50%, -46%) rotate(4deg); } 80% { transform: translate(-50%, -51%) rotate(-2deg); } 100% { transform: translate(-50%, -50%) rotate(0); } }
.cz-wavebanner.cz-wb-show .cz-wb-num { animation: czjSlam 480ms cubic-bezier(.3,1.6,.5,1) 380ms both; }
.cz-wavebanner.cz-wb-show .cz-wb-sub { animation: czjSube 380ms cubic-bezier(.2,.9,.3,1.3) 640ms both; }
@keyframes czjSube { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* ═════════════════ pausa: todo entra a golpes sobre la caseta ═════════════════ */
.cz-pauseov:not(.cz-hide) .cz-pause-card h2 { animation: czjSlam 520ms cubic-bezier(.3,1.6,.5,1) 40ms both; }
.cz-pauseov:not(.cz-hide) .cz-pstat { animation: czjSube 420ms cubic-bezier(.2,.9,.3,1.4) backwards; }
.cz-pauseov:not(.cz-hide) .cz-pstat:nth-child(1) { animation-delay: 220ms; }
.cz-pauseov:not(.cz-hide) .cz-pstat:nth-child(2) { animation-delay: 300ms; }
.cz-pauseov:not(.cz-hide) .cz-pstat:nth-child(3) { animation-delay: 380ms; }
.cz-pauseov:not(.cz-hide) .cz-play { animation: czjBoton 460ms cubic-bezier(.2,.9,.3,1.3) 480ms backwards; }
.cz-pauseov:not(.cz-hide) .cz-btn2 { animation: czjBoton 460ms cubic-bezier(.2,.9,.3,1.3) 560ms backwards; }
@keyframes czjBoton { from { opacity: 0; transform: translateY(40%) scale(.8); } to { opacity: 1; transform: none; } }

/* el botón oro: un brillo que lo cruza (como los de la portada del Duelo) */
.cz-pauseov .cz-play, .cz-over .cz-play { position: relative; overflow: hidden; }
.cz-pauseov .cz-play::after, .cz-over .cz-play::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-160%) skewX(-18deg); animation: czjBrillo 3.2s ease-in-out 1.4s infinite; }
@keyframes czjBrillo { 0% { transform: translateX(-160%) skewX(-18deg); } 45%, 100% { transform: translateX(330%) skewX(-18deg); } }

/* ═════════════════ cartel de fallo: entra con golpe y enseña por orden ═════════════════ */
.cz-ap.cz-ap-in .cz-ap-cab { animation: czjSlam 460ms cubic-bezier(.3,1.6,.5,1) 60ms both; }
.cz-ap.cz-ap-in .cz-ap-lado.cz-ap-ok { animation: czjDeIzq 460ms cubic-bezier(.2,.9,.3,1.25) 180ms both; }
.cz-ap.cz-ap-in .cz-ap-lado.cz-ap-mal,
.cz-ap.cz-ap-in .cz-ap-lado.cz-ap-yo { animation: czjDeDer 460ms cubic-bezier(.2,.9,.3,1.25) 180ms both; }
.cz-ap.cz-ap-in .cz-ap-vs { animation: czjSlam 460ms cubic-bezier(.3,1.7,.5,1) 420ms both; }
.cz-ap.cz-ap-in .cz-ap-escalera li { animation: czjSube 320ms cubic-bezier(.2,.9,.3,1.4) backwards; }
.cz-ap.cz-ap-in .cz-ap-escalera li:nth-child(1) { animation-delay: 520ms; }
.cz-ap.cz-ap-in .cz-ap-escalera li:nth-child(2) { animation-delay: 600ms; }
.cz-ap.cz-ap-in .cz-ap-escalera li:nth-child(3) { animation-delay: 680ms; }
.cz-ap.cz-ap-in .cz-ap-escalera li:nth-child(4) { animation-delay: 760ms; }
.cz-ap.cz-ap-in .cz-ap-escalera li:nth-child(5) { animation-delay: 840ms; }
.cz-ap.cz-ap-in .cz-ap-norma, .cz-ap.cz-ap-in .cz-ap-clave { animation: czjSube 420ms ease-out 700ms backwards; }
@keyframes czjDeIzq { from { opacity: 0; transform: translateX(-60%) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes czjDeDer { from { opacity: 0; transform: translateX(60%) rotate(6deg); } to { opacity: 1; transform: none; } }

/* ═════════════════ fin de la caza: la caja registradora cae y cobra ═════════════════ */
.cz-over.cz-over-in .cz-fin-foto { animation: czjCaja 620ms cubic-bezier(.3,1.3,.5,1) both; }
@keyframes czjCaja { 0% { opacity: 0; transform: translateY(-40%) scale(1.2); } 55% { opacity: 1; transform: translateY(2%) scale(.985); } 75% { transform: translateY(-1%); } 100% { opacity: 1; transform: none; } }
.cz-over.cz-over-in .cz-fin-titulo { animation: czjSlam 520ms cubic-bezier(.3,1.6,.5,1) 380ms both; }
.cz-over.cz-over-in .cz-fin-lcd { animation: czjLcd 520ms steps(1, end) 460ms both; }
@keyframes czjLcd { 0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .2; } 50% { opacity: 1; } 62% { opacity: .5; } 74%, 100% { opacity: 1; } }
.cz-over.cz-over-in .cz-over-marca { animation: czjSello 460ms cubic-bezier(.3,1.7,.5,1) 1150ms both; }
.cz-over.cz-over-in.cz-fin-record .cz-over-marca { animation: czjRecord 620ms cubic-bezier(.3,1.7,.5,1) 1150ms both; }
@keyframes czjRecord { 0% { opacity: 0; transform: scale(3.4) rotate(-8deg); } 55% { opacity: 1; transform: scale(.9) rotate(1deg); } 100% { opacity: 1; transform: none; } }
.cz-over.cz-over-in .cz-over-stat { animation: czjSube 440ms cubic-bezier(.2,.9,.3,1.4) backwards; }
.cz-over.cz-over-in .cz-over-stat:nth-child(1) { animation-delay: 760ms; }
.cz-over.cz-over-in .cz-over-stat:nth-child(2) { animation-delay: 860ms; }
.cz-over.cz-over-in .cz-over-stat:nth-child(3) { animation-delay: 960ms; }
.cz-over.cz-over-in .cz-over-btns > * { animation: czjBoton 460ms cubic-bezier(.2,.9,.3,1.3) backwards; }
.cz-over.cz-over-in .cz-over-btns > :nth-child(1) { animation-delay: 1300ms; }
.cz-over.cz-over-in .cz-over-btns > :nth-child(2) { animation-delay: 1390ms; }
.cz-over.cz-over-in .cz-over-btns > :nth-child(3) { animation-delay: 1470ms; }
.cz-over.cz-over-in .cz-over-btns > :nth-child(4) { animation-delay: 1540ms; }
/* los marcos de las cifras laten, cada uno a su ritmo */
.cz-over .cz-over-stat { position: relative; }
.cz-over .cz-over-stat::after { content: ""; position: absolute; inset: -2px; border-radius: 13px; pointer-events: none; opacity: .2;
  box-shadow: 0 0 18px 2px var(--c), inset 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); animation: czjLate 2.4s ease-in-out 1.6s infinite; }
.cz-over .cz-st-dian::after { animation-duration: 2s; animation-delay: 1.9s; }
.cz-over .cz-st-combo::after { animation-duration: 1.7s; animation-delay: 2.1s; }

/* ═════════════════ portada (entrada por un reto) ═════════════════ */
.cz-portada:not(.cz-hide) .cz-portada-rotulo { animation: czjSlam 560ms cubic-bezier(.3,1.6,.5,1) 60ms both; }
.cz-portada:not(.cz-hide) .cz-portada-desc, .cz-portada:not(.cz-hide) .cz-portada-stats { animation: czjSube 420ms ease-out 360ms backwards; }
.cz-portada:not(.cz-hide) .cz-play { animation: czjBoton 460ms cubic-bezier(.2,.9,.3,1.3) 520ms backwards; }

}

/* Si la partida acaba en un fallo, el cartel que enseña tapa la caja: su
   entrada espera en pausa (con su estado inicial) hasta que se cierra. */
body.cz-ap-on .cz-over.cz-over-in *,
body.cz-ap-on .cz-over.cz-over-in *::before,
body.cz-ap-on .cz-over.cz-over-in *::after { animation-play-state: paused !important; }