/* cazador-disparo.css — el disparo con peso (16-sep-2026).
   Se carga DESPUÉS de cazador-v3.css. Sólo capa visual: la escopeta apunta y
   retrocede, el fogonazo alumbra la galería, salen los perdigones y el casquillo,
   y la señal SE CAE HACIA ATRÁS cuando aciertas. Si fallas la chapa aguanta el
   golpe, suena a metal y te resta puntos. */

/* ── la escopeta (28-sep-2026) ──
   Abajo en el centro, cruzando el mostrador. disparo.js la coloca en píxeles
   (colocaEscopeta) y le da el tamaño a la foto: aquí sólo va el montaje.
   .cz-escopeta es un punto (la culata) que gira con --ang; .cz-esc-retro
   retrocede en el eje del cañón; la foto va girada 43,4° para que el cañón
   apunte arriba. Las reglas viejas de cazador-v3.css (esquina inferior
   derecha, 64vw) se anulan aquí. */
.cz-escopeta {
  position: fixed; left: 50%; top: 100%; right: auto; bottom: auto; width: 0; height: 0;
  z-index: 3; pointer-events: none; filter: none;
  transform-origin: 0 0; transform: rotate(var(--ang, 0deg));
  transition: transform .07s linear;
  will-change: transform;
}
.cz-escopeta.cz-ya { transition: none }            /* al disparar apunta en el acto */
.cz-esc-retro {
  position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform;
  /* sombra hacia abajo y un filo de luz de feria: la separa de la madera */
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(243,210,122,.22));
}
.cz-escopeta img {
  position: absolute; display: block; max-width: none; height: auto; width: 200px;
  transform-origin: 92% 96%; transform: rotate(43.4deg);
  user-select: none; -webkit-user-drag: none;
}
/* la sombra del arma sobre el canto del mostrador */
.cz-esc-sombra {
  position: fixed; z-index: 2; pointer-events: none; border-radius: 50%; left: 50%; top: 100%;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.25) 60%, transparent);
  transition: transform .07s linear;
}
body:not(.cz-partida) .cz-esc-sombra, body.cz-pausa .cz-esc-sombra { display: none }

/* la llama de la boca, en el eje del cañón (vive dentro de .cz-esc-retro) */
.cz-llama {
  position: absolute; left: calc(var(--L, 250px) * -.2); top: calc(var(--L, 250px) * -1.5);
  width: calc(var(--L, 250px) * .4); height: calc(var(--L, 250px) * .54);
  transform-origin: 50% 100%; mix-blend-mode: screen; pointer-events: none;
  background:
    radial-gradient(28% 60% at 50% 100%, #fffbe8 0 30%, rgba(255,228,150,.95) 55%, transparent 100%),
    radial-gradient(50% 100% at 50% 100%, rgba(255,176,60,.9) 0 35%, rgba(255,96,24,.55) 62%, transparent 100%);
  animation: czLlama .13s ease-out forwards;
}
@keyframes czLlama {
  0%   { transform: scale(.35, .2); opacity: 1 }
  35%  { transform: scale(1, 1); opacity: 1 }
  100% { transform: scale(1.15, 1.25); opacity: 0 }
}

/* ── fogonazo: núcleo blanco + estrella de cuatro puntas ── */
.cz-fogonazo {
  position: fixed; z-index: 4; width: 150px; height: 150px; margin: -75px 0 0 -75px; pointer-events: none;
  mix-blend-mode: screen; animation: czFog .16s ease-out forwards;
}
.cz-fogonazo::before, .cz-fogonazo::after { content: ""; position: absolute; inset: 0 }
.cz-fogonazo::before {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,252,236,1) 0 18%, rgba(255,214,130,.9) 34%, rgba(255,140,40,.45) 54%, transparent 72%);
}
.cz-fogonazo::after {
  background:
    linear-gradient(90deg, transparent 43%, rgba(255,244,210,.95) 50%, transparent 57%),
    linear-gradient(0deg, transparent 43%, rgba(255,244,210,.8) 50%, transparent 57%);
  transform: rotate(var(--fg, 12deg)) scale(1.5);
  filter: blur(.5px);
}
@keyframes czFog { from { transform: scale(.35) } to { transform: scale(1.35); opacity: 0 } }
/* el destello moja toda la galería un instante */
.cz-luz {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(38% 26% at var(--lx, 80%) var(--ly, 86%), rgba(255,226,170,.5), transparent 70%);
  animation: czLuz .13s ease-out forwards;
}
@keyframes czLuz { from { opacity: 1 } to { opacity: 0 } }

/* ── el plomo: la línea del tiro y los perdigones ── */
.cz-traza {
  position: fixed; z-index: 4; height: 2px; transform-origin: 0 50%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,240,200,.95), rgba(255,200,120,.35) 60%, transparent);
  animation: czTraza .09s linear forwards;
}
@keyframes czTraza { from { opacity: .95; transform: scaleY(1.6) } to { opacity: 0; transform: scaleY(.4) } }
.cz-perdigon {
  position: fixed; z-index: 4; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, #fff 0 30%, #ffd08a 55%, transparent 72%);
  animation: czPerdigon .22s ease-out forwards;
}
@keyframes czPerdigon { from { transform: scale(.5); opacity: 1 } to { transform: scale(2.1); opacity: 0 } }
/* los agujeros del tiro: salen, se ven un momento y se apagan (0,82 s; disparo.js los quita del DOM) */
.cz-hoyo {
  position: absolute; width: 9%; height: 9%; margin: -4.5% 0 0 -4.5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #14100a 0 46%, rgba(20,16,10,.65) 62%, transparent 74%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 1px 2px rgba(255,235,190,.35);
  animation: czHoyo .82s ease-out both;
}
@keyframes czHoyo {
  0%   { transform: scale(2.4); opacity: .2 }
  15%  { transform: scale(1);   opacity: 1 }
  60%  { transform: scale(1);   opacity: 1 }
  100% { transform: scale(.9);  opacity: 0 }
}

/* ── humo y casquillo ── */
.cz-humo {
  position: fixed; z-index: 3; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(226,220,206,.5), rgba(180,174,160,.22) 55%, transparent 72%);
  filter: blur(4px); opacity: 0; will-change: transform, opacity;   /* lo anima disparo.js (tres bocanadas) */
}
.cz-casco {
  position: fixed; z-index: 4; width: 10px; height: 24px; margin: -12px 0 0 -5px; border-radius: 2px 2px 3px 3px; pointer-events: none;
  background: linear-gradient(180deg, #f2d27e 0 30%, #9a6a1c 30% 34%, #c8352c 34% 100%);
  box-shadow: inset 2px 0 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.6);
  will-change: transform, opacity;
}

/* ── el impacto: chispas que saltan de la chapa y un destello ── */
.cz-chispa {
  position: fixed; z-index: 4; width: 3px; height: 16px; margin: -16px 0 0 -1.5px; border-radius: 2px; pointer-events: none;
  transform-origin: 50% 100%; mix-blend-mode: screen;
  background: linear-gradient(0deg, transparent, #ffb347 40%, #fff6d8);
}
.cz-impacto {
  position: fixed; z-index: 4; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none;
  mix-blend-mode: screen; background: radial-gradient(circle, #fff 0 12%, rgba(255,210,120,.8) 30%, transparent 68%);
  animation: czImpacto .22s ease-out forwards;
}
@keyframes czImpacto { from { transform: scale(.3); opacity: 1 } to { transform: scale(1.4); opacity: 0 } }

/* ── el temblor de la cámara ── */
@keyframes czSacude {
  0% { transform: translate(0,0) } 20% { transform: translate(-3px,2px) }
  40% { transform: translate(3px,-2px) } 60% { transform: translate(-2px,-1px) }
  80% { transform: translate(2px,1px) } 100% { transform: translate(0,0) }
}
body.cz-partida.cz-tiro .cz-escena, body.cz-partida.cz-tiro #cz-stage,
body.cz-partida.cz-tiro .cz-anc { animation: czSacude .11s ease-out }
body.cz-partida.cz-tiro-fuerte .cz-escena, body.cz-partida.cz-tiro-fuerte #cz-stage,
body.cz-partida.cz-tiro-fuerte .cz-anc { animation: czSacude .2s ease-out }

/* ── LA SEÑAL SE TUMBA (acierto) · 28-sep-2026 ──
   Nico: «que se fueran TUMBANDO como las de la feria que van pasando». Cae la
   señal ENTERA, con su poste, girando sobre la base del poste (la bisagra en la
   balda): el plomo la empuja, la gravedad la acelera, pega en el tope, rebota
   un poco, tiembla y se queda tumbada mientras la cinta se la lleva.
   Va con la propiedad `rotate` (no `transform`): el juego mueve la señal por la
   cinta escribiendo `transform: translate3d(x)` en cada fotograma, y `rotate`
   se suma a eso sin pisarlo. El giro es en X (hacia el fondo), que no depende
   de dónde esté la señal en la cinta.
   La perspectiva la pone el escenario con el ojo ARRIBA, como la cámara del
   dibujo (se ve la tabla de las baldas desde encima): tumbada se lee como una
   chapa plana sobre la balda, y nunca baja de la bisagra, así que no pisa la
   cinta de abajo. */
body.cz-partida #cz-stage { perspective: 1400px; perspective-origin: 50% 0; }
body.cz-partida .cz-sign.cz-cae {
  opacity: 1 !important; transition: none !important; z-index: 1;
  transform-origin: 50% 130%;               /* la base del poste (montaje 3: poste = 30 % bajo la señal) */
  animation: czTumba 1.6s linear forwards !important;
}
@keyframes czTumba {
  0%   { rotate: x 0deg;  animation-timing-function: cubic-bezier(.2,.8,.4,1) }
  4%   { rotate: x 12deg; animation-timing-function: cubic-bezier(.55,0,.95,.5) }  /* el golpe del plomo */
  24%  { rotate: x 86deg; animation-timing-function: cubic-bezier(.2,.7,.4,1) }    /* la gravedad: pega en el tope */
  30%  { rotate: x 68deg; animation-timing-function: cubic-bezier(.6,0,.9,.5) }    /* rebote */
  36%  { rotate: x 86deg; animation-timing-function: ease-out }
  40%  { rotate: x 80deg; animation-timing-function: ease-in }                     /* tiembla el poste */
  44%  { rotate: x 84deg }
  88%  { rotate: x 84deg; opacity: 1 }                                             /* tumbada, pasando con la cinta */
  100% { rotate: x 84deg; opacity: 0 }
}
/* la chapa en sí: un giro leve al caer (cada una cae un poco torcida) y nada
   más; las animaciones de «pop» y de muerte del juego no deben sumarse */
body.cz-partida .cz-sign.cz-cae img,
body.cz-partida .cz-sign.cz-cae .cz-ph-code {
  animation: czTuerce .38s cubic-bezier(.55,0,.95,.5) forwards !important;
  transform-origin: 50% 100%;
}
@keyframes czTuerce { from { transform: rotate(0) } to { transform: rotate(var(--rz, 3deg)) } }
/* el polvo que levanta al caer */
.cz-polvo {
  position: fixed; z-index: 3; width: 70px; height: 24px; margin: -12px 0 0 -35px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(228,214,186,.55), transparent 70%);
  filter: blur(3px); animation: czPolvo .5s ease-out forwards;
}
@keyframes czPolvo { from { transform: scale(.4); opacity: .8 } to { transform: scale(1.7); opacity: 0 } }

/* ── LA SEÑAL AGUANTA (fallo): se tambalea sobre el poste y vuelve ──
   Mismo eje que la caída, sin llegar a caer: el golpe la echa atrás, cabecea
   hacia delante y se asienta. El rojo avisa de que era la equivocada. */
body.cz-partida .cz-sign.cz-clang {
  filter: drop-shadow(0 0 16px rgba(255,59,59,.9)) drop-shadow(0 6px 5px rgba(0,0,0,.65));
  transform-origin: 50% 130%;
  animation: czTambalea .6s linear !important;
}
@keyframes czTambalea {
  0%   { rotate: x 0deg;   animation-timing-function: cubic-bezier(.2,.8,.4,1) }
  14%  { rotate: x 30deg;  animation-timing-function: ease-in-out }
  34%  { rotate: x -9deg;  animation-timing-function: ease-in-out }
  52%  { rotate: x 12deg;  animation-timing-function: ease-in-out }
  70%  { rotate: x -4deg;  animation-timing-function: ease-in-out }
  86%  { rotate: x 3deg;   animation-timing-function: ease-in-out }
  100% { rotate: x 0deg }
}
body.cz-partida .cz-sign.cz-clang img,
body.cz-partida .cz-sign.cz-clang .cz-ph-code { animation: czClang .46s cubic-bezier(.36,.07,.19,.97) !important }
@keyframes czClang {
  0%, 100% { transform: translateX(0) rotate(0) }
  10% { transform: translateX(-3px) rotate(-2deg) }
  30% { transform: translateX(3px) rotate(1.6deg) }
  50% { transform: translateX(-2px) rotate(-1deg) }
  70% { transform: translateX(1px) rotate(.5deg) }
}
/* el −50 del fallo */
body.cz-partida .cz-float.cz-float-mal {
  color: #ff8a7a; text-shadow: 0 2px 0 #4a0f0a, 0 0 14px rgba(255,59,59,.8);
}

/* ── la mira: se abre al disparar ── */
.cz-mira { transition: transform .12s ease-out }
.cz-mira.cz-abre { transform: scale(1.35) }

@media (prefers-reduced-motion: reduce) {
  .cz-escopeta, .cz-esc-sombra { transition: none }
  .cz-fogonazo, .cz-luz, .cz-traza, .cz-perdigon, .cz-humo, .cz-polvo, .cz-llama, .cz-chispa, .cz-impacto { animation: none; opacity: 0 }
  body.cz-partida .cz-sign.cz-cae { animation: none !important; opacity: 0 !important }
  body.cz-partida .cz-sign.cz-cae img, body.cz-partida .cz-sign.cz-clang, body.cz-partida .cz-sign.cz-clang img { animation: none !important }
  body.cz-partida.cz-tiro .cz-escena, body.cz-partida.cz-tiro #cz-stage, body.cz-partida.cz-tiro .cz-anc { animation: none }
}

/* (el «x5 🔥» de juice ya no se crea en el Cazador: juice.init({ combo: false })) */
/* y el nombre de la diana nunca se sale del letrero de madera (se vio uno por
   encima del marcador al cambiar de diana) */
body.cz-partida .cz-rule { overflow: hidden; }