/* ===========================================================
   TRIVIA MEXICANA - Estados de los avatares y efectos (VFX)

   estilo.css trae la ropa del juego (colores, botones, tipografia).
   Aqui esta lo que se mueve: la maquina de estados de los monitos y
   los golpes de camara de la pantalla grande.
   =========================================================== */


/* ===========================================================
   ESTADOS DEL AVATAR
   =========================================================== */

/* ---------- MUERTE: 1.5s exactos, distinta segun el material ---------- */

.avatar.muriendo { pointer-events: none; }
.avatar.muriendo .arte { transform-origin: 50% 90%; }

/* ceramica (el perrito): se quiebra y suelta polvo naranja */
.avatar.muriendo.material-ceramica .arte {
  animation: quebrar 1.5s cubic-bezier(.3, .7, .4, 1) forwards;
}
@keyframes quebrar {
  0%   { transform: none; filter: brightness(1); }
  12%  { transform: scale(1.1) rotate(-3deg); filter: brightness(2.4) saturate(.4); }
  20%  { transform: scale(.94) rotate(2deg); }
  100% { transform: scale(.7) rotate(-14deg) translateY(24px);
         opacity: 0; filter: brightness(.4); }
}

/* tela (ingeniero, muñeca, ajolote): desgarre violento */
.avatar.muriendo.material-tela .arte {
  animation: desgarrar 1.5s cubic-bezier(.4, .1, .6, 1) forwards;
}
@keyframes desgarrar {
  0%   { transform: none; }
  15%  { transform: skewX(9deg) scaleY(1.06); }
  30%  { transform: skewX(-11deg) scaleY(.92); }
  45%  { transform: skewX(7deg) rotate(4deg); }
  100% { transform: rotate(-32deg) translateY(30px) scale(.72); opacity: 0; }
}

/* plastico y fritura (luchador, pollo): se derrite con acido */
.avatar.muriendo.material-plastico .arte {
  animation: derretir 1.5s cubic-bezier(.6, 0, .8, .5) forwards;
}
@keyframes derretir {
  0%   { transform: none; filter: none; }
  25%  { transform: scaleY(.9) scaleX(1.06); filter: hue-rotate(40deg) saturate(1.6); }
  100% { transform: scaleY(.08) scaleX(1.35) translateY(50px); opacity: .15;
         filter: hue-rotate(90deg) saturate(2) blur(1px); }
}

/* carton y madera (alebrije, trompo, piñata): estallan en astillas */
.avatar.muriendo.material-carton .arte,
.avatar.muriendo.material-madera .arte {
  animation: astillar 1.5s cubic-bezier(.2, .9, .4, 1) forwards;
}
@keyframes astillar {
  0%   { transform: none; }
  10%  { transform: scale(1.14) rotate(3deg); filter: brightness(1.8); }
  22%  { transform: scale(.88) rotate(-5deg); }
  100% { transform: scale(.55) rotate(24deg) translateY(28px);
         opacity: 0; filter: brightness(.3); }
}

/* azucar (la calaverita): colapso liquido y pegajoso */
.avatar.muriendo.material-azucar .arte {
  animation: colapsar 1.5s cubic-bezier(.7, 0, .9, .4) forwards;
}
@keyframes colapsar {
  0%   { transform: none; }
  30%  { transform: scaleY(.82) scaleX(1.1); }
  100% { transform: scaleY(.06) scaleX(1.5) translateY(52px);
         opacity: .25; filter: blur(1.5px); }
}

/* el humo morado del caliz, justo antes de la destruccion */
.avatar.envenenado .arte { animation: veneno 1s ease-in forwards; }
@keyframes veneno {
  0%   { filter: none; }
  100% { filter: saturate(.4) drop-shadow(0 0 16px #A855F7) brightness(1.3); }
}


/* ---------- FANTASMA: neon, sin base y levitando ---------- */

.avatar.fantasma .arte {
  opacity: .5;
  filter: grayscale(.75) brightness(1.5)
          drop-shadow(0 0 8px #3EE8C8) drop-shadow(0 0 20px #2FA8A0);
  animation: levitar 3.2s ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
  /* se le borra la base: de la cintura para abajo se desvanece */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.25) 80%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.25) 80%, transparent 96%);
}
.avatar.fantasma .piso { display: none; }
.avatar.fantasma .placa {
  color: #7FF0DC;
  border-color: rgba(63, 232, 200, .55);
  background: rgba(47, 168, 160, .12);
}
@keyframes levitar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* fuego fatuo alrededor */
.avatar .humo { position: absolute; inset: 30% 0 0 0; pointer-events: none; }
.avatar .humo i {
  position: absolute;
  bottom: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #7FF0DC, rgba(63,232,200,0) 70%);
  animation: fatuo 3.4s ease-out infinite;
}
.avatar .humo i:nth-child(1) { left: 22%; animation-delay: 0s; }
.avatar .humo i:nth-child(2) { left: 52%; animation-delay: -1.2s; }
.avatar .humo i:nth-child(3) { left: 74%; animation-delay: -2.3s; }
@keyframes fatuo {
  0%   { opacity: 0;  transform: translateY(0) scale(.5); }
  25%  { opacity: .9; }
  100% { opacity: 0;  transform: translateY(-70px) scale(1.5); }
}


/* ---------- FUERA: gris, tirado y quieto ---------- */

.avatar.fuera .arte {
  filter: grayscale(1) brightness(.35);
  opacity: .55;
  transform: rotate(-16deg) translateY(10px);
  animation: none;
}
.avatar.fuera .placa {
  color: var(--ceniza-baja);
  border-color: transparent;
  background: transparent;
  text-decoration: line-through;
}
.avatar.fuera .marca-fuera { opacity: .95; }


/* ---------- ROBO DE CUERPO ---------- */

.avatar.robando { z-index: 40; }
.avatar.robando .arte { animation: embestir .55s cubic-bezier(.5, -.3, .3, 1.4) forwards; }
@keyframes embestir {
  0%   { transform: translate(0, 0) scale(1); }
  55%  { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.25);
         filter: brightness(2.5); }
  100% { transform: translate(0, 0) scale(1); }
}

/* el rayo que dispara el fantasma al pecho del vivo */
.rayo {
  position: fixed;
  height: 4px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(127,240,220,0), #7FF0DC, #fff);
  box-shadow: 0 0 18px #3EE8C8;
  z-index: 45;
  pointer-events: none;
  animation: disparo .4s ease-out forwards;
}
@keyframes disparo {
  0%   { opacity: 0; transform: scaleX(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1); }
}


/* ---------- marcas de la ronda ---------- */

.avatar.safe   .placa { border-color: var(--verde); box-shadow: 0 0 12px rgba(14,155,98,.5); }
.avatar.danger .placa { border-color: var(--rojo);  box-shadow: 0 0 14px rgba(206,17,38,.6); }


/* ===========================================================
   VFX GLOBALES (pantalla del Host)
   =========================================================== */

/* --- Viñeta dinamica: se va cerrando conforme avanza la partida --- */
#vinieta {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  transition: box-shadow 1.6s ease;
  box-shadow: inset 0 0 calc(var(--cierre, 0) * 34vw)
                    calc(var(--cierre, 0) * 9vw) rgba(0, 0, 0, .92);
}

/* --- Screen shake --- */
@keyframes sacudida {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-12px, 7px) rotate(-.7deg); }
  20% { transform: translate(11px, -9px) rotate(.6deg); }
  30% { transform: translate(-14px, -5px) rotate(-.5deg); }
  40% { transform: translate(13px, 8px) rotate(.7deg); }
  50% { transform: translate(-9px, 6px) rotate(-.4deg); }
  60% { transform: translate(8px, -7px) rotate(.4deg); }
  70% { transform: translate(-6px, 4px) rotate(-.3deg); }
  80% { transform: translate(5px, -3px) rotate(.2deg); }
  90% { transform: translate(-3px, 2px) rotate(-.1deg); }
}
body.sacudiendo { animation: sacudida .8s cubic-bezier(.36, .07, .19, .97); }

/* --- Estrobo rojo: cuando alguien baja a la matanza --- */
#estrobo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 32;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,0,0,.10), rgba(190,0,0,.55));
}
#estrobo.ver { animation: estrobazo .34s steps(1) 5; }
@keyframes estrobazo {
  0%, 49%   { opacity: .85; }
  50%, 100% { opacity: 0; }
}

/* --- Flashbang: blanco puro 0.2s --- */
#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
}
#flash.ver { animation: flashazo .45s ease-out; }
@keyframes flashazo {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  52%  { opacity: 1; }     /* estos son los 0.2s de blanco puro */
  100% { opacity: 0; }
}

/* --- Glitch analogico VHS entre fases --- */
#glitch {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  overflow: hidden;
}
#glitch.ver { animation: glitchazo .55s steps(2) 1; }
#glitch .estatica {
  position: absolute;
  inset: -20%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,0,80,.10) 0 2px, rgba(0,255,220,.10) 2px 4px);
  animation: nieve .12s steps(3) infinite;
}
#glitch .banda {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 12%;
  background: rgba(255, 255, 255, .3);
  mix-blend-mode: overlay;
  animation: rodar .55s linear infinite;
}
#glitch .cromatica {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,0,80,.30), transparent 12%),
    linear-gradient(270deg, rgba(0,240,220,.30), transparent 12%);
}
@keyframes glitchazo {
  0%   { opacity: 0; }
  15%  { opacity: 1; transform: translateX(-8px) scaleY(1.03); }
  40%  { opacity: 1; transform: translateX(10px) scaleY(.97); }
  70%  { opacity: 1; transform: translateX(-4px); }
  100% { opacity: 0; transform: none; }
}
@keyframes nieve {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-6px, 4px); }
  66%  { transform: translate(5px, -5px); }
  100% { transform: translate(-3px, 2px); }
}
@keyframes rodar {
  0%   { top: -12%; }
  100% { top: 104%; }
}


/* --- Particulas de la muerte (las siembra vfx.js) --- */

.particulas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 20;
}
.particulas b {
  position: absolute;
  left: 50%;
  top: 55%;
  display: block;
  width: var(--w, 8px);
  height: var(--h, 8px);
  background: var(--c, #fff);
  border-radius: var(--r, 2px);
  animation: volar var(--dur, 1.4s) cubic-bezier(.15, .7, .4, 1) forwards;
}
@keyframes volar {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0); }
  70%  { opacity: 1; }
  100% { opacity: 0;
         transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)))
                    scale(var(--s, 1.2)) rotate(var(--giro, 220deg)); }
}
/* las brasas del carton y la madera se quedan quemandose en el suelo */
.particulas b.brasa {
  animation: brasa-suelo 2.2s ease-out forwards;
  box-shadow: 0 0 10px #FF6B1A;
}
@keyframes brasa-suelo {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), 60px) scale(.4); }
}
/* el enjambre de moscas de la calaverita */
.particulas b.mosca {
  animation: enjambre 2.4s ease-in-out infinite;
  border-radius: 0;
}
@keyframes enjambre {
  0%, 100% { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))); }
  25%      { transform: translate(calc(-50% + var(--x, 0px) + 14px),
                                  calc(-50% + var(--y, 0px) - 11px)); }
  50%      { transform: translate(calc(-50% + var(--x, 0px) - 12px),
                                  calc(-50% + var(--y, 0px) + 9px)); }
  75%      { transform: translate(calc(-50% + var(--x, 0px) + 7px),
                                  calc(-50% + var(--y, 0px) + 13px)); }
}


/* ===========================================================
   EL RELOJ Y SU TENSION
   =========================================================== */

.reloj {
  --resto: 1;
  position: relative;
  width: min(760px, 80vw);
  height: 16px;
  border-radius: 999px;
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-suave);
  overflow: hidden;
}
.reloj i {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--resto, 1));
  background: linear-gradient(90deg, var(--verde), #7FE8A8);
  transition: transform .18s linear, background .4s;
}
/* los ultimos 5 segundos: rojo y latiendo cada vez mas rapido */
.reloj.urgente i { background: linear-gradient(90deg, var(--rojo), #FF6B6B); }
.reloj.urgente   { animation: latido var(--pulso, 1s) ease-in-out infinite; }
@keyframes latido {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 rgba(206,17,38,0); }
  14%      { transform: scale(1.05); box-shadow: 0 0 26px rgba(206,17,38,.75); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.03); box-shadow: 0 0 18px rgba(206,17,38,.55); }
}
.cuenta {
  font-weight: 900;
  font-size: clamp(28px, 4vw, 62px);
  line-height: 1;
}
.cuenta.urgente { color: var(--rojo); animation: latido var(--pulso, 1s) ease-in-out infinite; }


/* ===========================================================
   LO QUE PASA EN LOS CELULARES
   =========================================================== */

/* el borde parpadea en rojo cuando fallas o te pegan */
#golpe {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  opacity: 0;
  box-shadow: inset 0 0 60px 18px rgba(206, 17, 38, .95);
}
#golpe.ver { animation: golpazo .6s ease-out 2; }
@keyframes golpazo {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* el candado de los dedos que se llevo El Machete */
.opcion.cortado {
  position: relative;
  filter: grayscale(1) brightness(.45);
  cursor: not-allowed;
  overflow: hidden;
}
.opcion.cortado::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  background: rgba(0, 0, 0, .5);
}
/* el salpicon de tinta del machetazo */
.opcion.cortado::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 34%, #1A0508 0 14%, transparent 15%),
    radial-gradient(circle at 68% 22%, #1A0508 0 9%, transparent 10%),
    radial-gradient(circle at 45% 72%, #1A0508 0 18%, transparent 19%),
    radial-gradient(circle at 84% 68%, #1A0508 0 7%, transparent 8%);
  opacity: .85;
}

/* la insignia del regalo de la familia, arriba a la izquierda del monito */
.avatar .insignia-regalo {
  position: absolute; top: -6%; left: -6%; z-index: 4;
  font-size: calc(var(--tam, 90px) * .3); line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
}
.avatar .insignia-regalo b {
  font-size: .5em; background: #B3122A; color: #fff; border-radius: 999px;
  padding: 0 .35em; margin-left: -.3em; vertical-align: top;
}

/* el stun de la huida: pantalla roja y todo bloqueado */
.congelado {
  position: relative;
  pointer-events: none;
}
.congelado::after {
  content: attr(data-castigo);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 12vw, 64px);
  font-weight: 900;
  color: #fff;
  background: rgba(150, 8, 24, .88);
  border-radius: 18px;
  z-index: 5;
  animation: latido .6s ease-in-out infinite;
}


/* ===========================================================
   LA ESCENOGRAFIA

   El fondo de cada fase, cuando hay imagen para esa fase en
   web/img. Si no la hay, no pasa nada: se queda el fondo de
   color de siempre y el juego se ve igual de bien.
   =========================================================== */

#escenografia {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease, background-image .4s;
}
#escenografia.ver { opacity: .55; }

/* Un velo encima para que la interfaz siempre se lea, por muy
   cargada que salga la foto del fondo. */
#escenografia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(23,17,15,.88) 0%,
                    rgba(23,17,15,.55) 45%, rgba(23,17,15,.75) 100%);
}

/* El emblema del logo, cuando existe */
.emblema {
  display: block;
  height: clamp(52px, 8vh, 104px);
  width: auto;
  margin: 0 auto .4em;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6));
  animation: flotar 5s ease-in-out infinite;
}


/* ===========================================================
   LAS MARCAS ENCIMADAS (solo cuando el monito es una imagen)

   Con los dibujos SVG, la calaverita y las X van dentro del
   mismo dibujo. Con un PNG no se puede, asi que van en su
   propio SVG puesto justo encima, del mismo tamano.
   =========================================================== */

.avatar .marca-encima {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 100 / 120;   /* el mismo lienzo que el monito */
  pointer-events: none;
  overflow: visible;
}

/* Un PNG en gris se apaga mas que un SVG, porque trae sombras y
   texturas propias. Se le sube un poco la luz para que el juguete
   todavia se reconozca debajo de la calaverita. */
.avatar.dormido img.arte {
  filter: grayscale(1) brightness(.66) contrast(.95);
  opacity: .62;
}
.avatar.fuera img.arte {
  filter: grayscale(1) brightness(.5);
  opacity: .6;
}