/* header.css */
/* ── Contenedor animación ── */
.mini-game {
  position: relative;
  width: 280px;
  height: 90px;
  margin-left: auto;
  margin-right: 80px;
  overflow: hidden;
}

/* ── Arco ── */
.arco {
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 70px;
  height: 60px;
}
.arco-top {
  position: absolute;
  top: 0; left: 0;
  width: 70px; height: 6px;
  background: #ffffff;
  border-radius: 3px;
}
.arco-poste {
  position: absolute;
  top: 0;
  width: 6px; height: 60px;
  background: #ffffff;
  border-radius: 3px;
}
.arco-izq { left: 0; }
.arco-der { right: 0; }
.arco-base {
  position: absolute;
  bottom: 0; left: 0;
  width: 70px; height: 4px;
  background: #ffffff;
  border-radius: 2px;
}
.red {
  position: absolute;
  top: 6px; left: 6px;
  width: 58px; height: 50px;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 8px,
    rgba(255,255,255,.2) 8px, rgba(255,255,255,.2) 9px
  ),
  repeating-linear-gradient(
    90deg, transparent, transparent 8px,
    rgba(255,255,255,.2) 8px, rgba(255,255,255,.2) 9px
  );
}

/* ── Pelota ── */
.pelota {
  position: absolute;
  bottom: 8px;
  left: 30px;
  width: 16px; height: 16px;
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid #333;
  animation: patear 2.5s ease-in-out infinite;
  z-index: 2;
}

@keyframes patear {
  0%   { left: 30px;  bottom: 8px;  transform: rotate(0deg) scale(1); }
  30%  { left: 30px;  bottom: 8px;  transform: rotate(0deg) scale(1); }
  55%  { left: 140px; bottom: 40px; transform: rotate(360deg) scale(.9); }
  70%  { left: 175px; bottom: 25px; transform: rotate(540deg) scale(.8); opacity: 1; }
  80%  { left: 195px; bottom: 10px; transform: rotate(720deg) scale(.7); opacity: 0; }
  100% { left: 30px;  bottom: 8px;  transform: rotate(0deg) scale(1);   opacity: 1; }
}

/* ── Jugador ── */
.jugador {
  position: absolute;
  bottom: 4px;
  left: 10px;
  width: 24px;
  animation: correr 2.5s ease-in-out infinite;
  z-index: 3;
}

@keyframes correr {
  0%   { left: 10px; transform: scaleX(1); }
  25%  { left: 10px; transform: scaleX(1); }
  40%  { left: 20px; transform: scaleX(1); }
  55%  { left: 20px; transform: scaleX(1); }
  70%  { left: 20px; transform: scaleX(-1); } /* ← gira para celebrar */
  100% { left: 10px; transform: scaleX(1); }
}

/* ── Piezas del jugador ── */
.cabeza {
  width: 14px; height: 14px;
  background: #f5c07a;
  border-radius: 50%;
  margin: 0 auto;
  border: 2px solid #d4935a;
}
.cuerpo {
  width: 14px; height: 16px;
  background: #003fb7;
  margin: 0 auto;
  border-radius: 3px;
}
.brazo {
  position: absolute;
  width: 6px; height: 12px;
  background: #003fb7;
  border-radius: 3px;
  top: 14px;
}
.brazo-izq {
  left: -4px;
  animation: brazo-izq-anim 2.5s ease-in-out infinite;
}
.brazo-der {
  right: -4px;
  animation: brazo-der-anim 2.5s ease-in-out infinite;
}

@keyframes brazo-izq-anim {
  0%, 25% { transform: rotate(20deg); }
  40%     { transform: rotate(-40deg); }
  55%     { transform: rotate(20deg); }
  70%     { transform: rotate(60deg); }  /* celebra */
  100%    { transform: rotate(20deg); }
}
@keyframes brazo-der-anim {
  0%, 25% { transform: rotate(-20deg); }
  40%     { transform: rotate(40deg); }
  55%     { transform: rotate(-20deg); }
  70%     { transform: rotate(-60deg); } /* celebra */
  100%    { transform: rotate(-20deg); }
}

.pierna {
  position: absolute;
  width: 7px; height: 14px;
  background: #FFC900;
  border-radius: 3px;
  top: 28px;
}
.pierna-izq {
  left: 1px;
  animation: pierna-izq-anim 2.5s ease-in-out infinite;
  transform-origin: top center;
}
.pierna-der {
  right: 1px;
  animation: pierna-der-anim 2.5s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes pierna-izq-anim {
  0%, 25% { transform: rotate(5deg); }
  35%     { transform: rotate(-50deg); } /* patada */
  45%     { transform: rotate(5deg); }
  70%     { transform: rotate(20deg); }  /* celebra */
  100%    { transform: rotate(5deg); }
}
@keyframes pierna-der-anim {
  0%, 25% { transform: rotate(-5deg); }
  35%     { transform: rotate(20deg); }
  45%     { transform: rotate(-5deg); }
  70%     { transform: rotate(-20deg); } /* celebra */
  100%    { transform: rotate(-5deg); }
}

/* ── Texto GOL ── */
.gol-text {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  
  font-size: 18px;
  font-weight: 900;
  color: #FFC900;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  opacity: 0;
  animation: mostrar-gol 2.5s ease-in-out infinite;
  white-space: nowrap;
}

@keyframes mostrar-gol {
  0%,  60% { opacity: 0; transform: translateX(-50%) scale(.5); }
  70%       { opacity: 1; transform: translateX(-50%) scale(1.3); }
  85%       { opacity: 1; transform: translateX(-50%) scale(1); }
  100%      { opacity: 0; transform: translateX(-50%) scale(.5); }
}





#futbolCanvas {
  margin-left: auto;
  margin-right: 80px;
  display: block;
}


/* ── Responsive Header ── */
@media (max-width: 1024px) {
  header {
    justify-content: space-between;
    padding: 10px 20px;
  }
  header img.logo {
    height: 80px !important;
    margin-left: 20px !important;
    margin-top: 10px !important;
  }
  #futbolCanvas {
    margin-right: 20px !important;
    width: 220px !important;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }
  header img.logo {
    height: 70px !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
  #futbolCanvas {
    display: none !important; /* ← oculta animación en mobile */
  }
}