/* ---- celebraciones (gol / líder), estilo pixel-art/8-bit ---- */
.overlay-celebracion {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  animation: overlay-cel-entrada .2s steps(3) both;
  cursor: pointer;
  padding: 1rem;
}
.overlay-celebracion.saliendo { animation: overlay-cel-salida .3s ease both; }
@keyframes overlay-cel-entrada { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-cel-salida { to { opacity: 0; } }

.caja-celebracion {
  --color-cel: var(--verde);
  --color-cel-txt: #fff;
  background: #0b0f14;
  border: 6px solid var(--color-cel);
  border-radius: 4px;
  box-shadow: 0 0 0 3px #0b0f14, 0 0 0 9px var(--color-cel), 0 10px 30px rgba(0, 0, 0, .5);
  padding: 2rem 2.25rem;
  text-align: center;
  animation: caja-cel-pop .4s steps(6) both;
}
@keyframes caja-cel-pop {
  0% { transform: scale(.3) rotate(-4deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.icono-rebote {
  font-size: 3rem;
  animation: rebote-pixel .5s steps(4) infinite;
}
@keyframes rebote-pixel {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.texto-celebracion {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: .06em;
  color: var(--color-cel);
  text-shadow: 2px 2px 0 #000, 4px 4px 0 rgba(0, 0, 0, .4);
  margin: .5rem 0 .6rem;
  animation: parpadeo-pixel .8s steps(2) infinite;
}
@keyframes parpadeo-pixel { 50% { opacity: .7; } }

.subtitulo-celebracion {
  color: var(--color-cel-txt);
  background: var(--color-cel);
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  max-width: 220px;
  overflow-wrap: break-word;
}

.caja-lider { --color-cel: #ffd23f; --color-cel-txt: #3a2b00; }
.texto-lider { font-size: 1.6rem; }

/* Escena de gol: secuencia de sprites en pixel-art (jugador genérico, sin
   nombre ni cara identificable — ver assets/img/gol-secuencia.png), 15
   fotogramas en tira horizontal recorridos con steps(). Al terminar se
   revela el marcador con los escudos reales de los dos equipos. */
.caja-gol-escena { padding: 1rem; }

.sprite-gol {
  width: min(300px, 78vw);
  aspect-ratio: 384 / 220;
  margin: 0 auto .9rem;
  background-image: url('../img/gol-secuencia.png');
  background-repeat: no-repeat;
  background-size: 1500% 100%;
  image-rendering: pixelated;
  animation: sprite-gol-avance 2.55s steps(14) forwards;
}
@keyframes sprite-gol-avance {
  /* Con background-size:1500%, el 100% de background-position-x equivale a
     -14 anchos de contenedor (fórmula (contenedor - imagen) * %), es decir,
     exactamente el ancho de la hoja de 15 fotogramas. */
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

.marcador-final-gol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  opacity: 0;
  animation: aparecer-marcador .4s ease 2.75s forwards;
}
@keyframes aparecer-marcador { to { opacity: 1; } }
.escudo-marcador { width: 1.7rem; height: 1.7rem; object-fit: contain; flex-shrink: 0; }
.nombre-marcador { font-size: .72rem; font-weight: 700; color: #fff; }
.marcador-numero { font-family: "Courier New", monospace; font-weight: 900; font-size: .95rem; color: #ffd23f; }