/* ========================= */
/*     ANIMACIONES BÁSICAS   */
/* ========================= */

/* Giro */
@keyframes giroLoco {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.girando {
  animation: rotar 1s linear infinite;
}

/* Texto al subir nivel */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.anim-slide-in {
  animation: slide-in 0.5s ease-out forwards;
}

/* ========================= */
/*     EFECTO DISPARO        */
/* ========================= */

/* Flash al recibir disparo */
@keyframes flash-disparo {
  0%   { background-color: rgba(255, 255, 255, 0.9); }
  25%  { background-color: rgba(255, 0, 0, 0.6); }
  50%  { background-color: rgba(255, 255, 0, 0.6); }
  75%  { background-color: rgba(255, 0, 0, 0.4); }
  100% { background-color: transparent; }
}

#pantalla-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  background-color: transparent;
}

/* Sacudida */
@keyframes shake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-10px, 10px); }
  40%  { transform: translate(10px, -10px); }
  60%  { transform: translate(-10px, 10px); }
  80%  { transform: translate(10px, -10px); }
  100% { transform: translate(0, 0); }
}

.sacudida {
  animation: shake 0.6s;
}

/* ========================= */
/*         GAME OVER         */
/* ========================= */
#cartel-gameover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(
    ellipse at center,
    rgba(139, 0, 0, 0.7),
    rgba(0, 0, 0, 0.9)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  box-sizing: border-box;
}

#cartel-gameover.mostrar {
  opacity: 1;
  pointer-events: auto;
}

/* Texto de impacto */
@keyframes impactoTexto {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.2) rotate(2deg); }
  50%  { transform: scale(1.1) rotate(-2deg); }
  75%  { transform: scale(1.15) rotate(1deg); }
  100% { transform: scale(1); }
}

#texto-gameover {
  font-family: "Ewert", cursive;
  font-size: clamp(40px, 10vw, 100px);
  color: #b14614e3;
  text-shadow: 2px 2px black;
  text-align: center;
  margin-bottom: 5px;
  animation: impactoTexto 0.6s ease-out 1.4s both;
}

/* Entrada dinámica del cartel */
@keyframes sangreGameOver {
  0%   { transform: translateY(-120vh) rotate(-30deg); opacity: 0; filter: hue-rotate(0deg) saturate(0%); }
  25%  { transform: translateY(-60vh) rotate(25deg); opacity: 0.5; }
  50%  { transform: translateY(-30vh) rotate(-15deg); }
  70%  { transform: translateY(-10vh) rotate(10deg); }
  85%  { transform: translateY(0) rotate(-5deg) scale(1.05); }
  95%  { transform: translateY(0) rotate(5deg) scale(0.97); }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; filter: hue-rotate(-20deg) saturate(180%); }
}

#cartel-contenido {
  background-image: url("Imagen/Oeste.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: sangreGameOver 1.4s ease-out forwards;
  position: relative;
  gap: 10px;
  box-shadow: 0 0 60px rgba(255, 0, 0, 0.3);
}

/* ========================= */
/*        BALAS Y FUEGO      */
/* ========================= */
@keyframes disparoBala {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  40%  { transform: translateY(-15px) scale(1.2); opacity: 0.8; }
  100% { transform: translateY(-40px) scale(0.5); opacity: 0; }
}

@keyframes fogonazo {
  0%   { transform: scale(0.5); opacity: 1; }
  50%  { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

.bala.disparada {
  animation: disparoBala 0.4s ease forwards;
  position: relative;
  z-index: 2;
}

.bala.disparada::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,150,0.9) 0%, rgba(255,140,0,0.6) 40%, transparent 70%);
  animation: fogonazo 0.25s ease-out forwards;
  pointer-events: none;
}

/* ========================= */
/*         SPLASH EFECTO     */
/* ========================= */
#splash-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
}

.particula {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #b30000 0%, #3a0000 90%);
  opacity: 1;
  animation: dispersar 1.2s forwards;
}

@keyframes dispersar {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  50%  { opacity: 0.8; }
  100% { transform: translate(var(--x), var(--y)) scale(0.3) rotate(360deg); opacity: 0; }
}