/* Estilos para la animación de Pac-Man */
.pacman-container {
  position: relative;
  height: 60px;
  margin: 5px auto;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
}

.pacman {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ffcc00;
  position: absolute;
  top: 15px;
  left: 0;
  animation: movePacman 15s linear infinite;
  z-index: 10;
  /* Añadimos overflow hidden para que el pseudo-elemento no se salga */
  overflow: hidden;
}

.pacman::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--text-color);
  /* Modificamos el clip-path para que se vea de perfil */
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
  animation: eatAnimationProfile 0.5s linear infinite;
  right: 0; /* Posicionamos en el lado derecho para vista de perfil */
}



.dot {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 26px;
}

/* Posicionamiento de los puntos */
.dot:nth-child(3) {
  left: 100px;
}
.dot:nth-child(4) {
  left: 150px;
}
.dot:nth-child(5) {
  left: 250px;
}
.dot:nth-child(6) {
  left: 300px;
}
.dot:nth-child(7) {
  left: 400px;
}
.dot:nth-child(8) {
  left: 450px;
}
.dot:nth-child(9) {
  left: 550px;
}
.dot:nth-child(10) {
  left: 600px;
}
.dot:nth-child(11) {
  left: 700px;
}
.dot:nth-child(12) {
  left: 750px;
}
.dot:nth-child(13) {
  left: 800px;
}
.dot:nth-child(14) {
  left: 850px;
}
.dot:nth-child(15) {
  left: 920px;
}
.dot:nth-child(16) {
  left: 970px;
}
.dot:nth-child(17) {
  left: 1020px;
}
.dot:nth-child(18) {
  left: 1100px;
}
.dot:nth-child(19) {
  left: 1150px;
}
.dot:nth-child(20) {
  left: 1200px;
}

/* Animaciones */
@keyframes movePacman {
  0% {
    left: -50px;
    transform: scaleX(1);
  }
  49% {
    transform: scaleX(1);
  }
  50% {
    left: 100%;
    transform: scaleX(-1);
  }
  99% {
    transform: scaleX(-1);
  }
  100% {
    left: -50px;
    transform: scaleX(1);
  }
}

@keyframes eatAnimationProfile {
  0% {
    clip-path: polygon(100% 0, 50% 50%, 100% 100%);
  }
  25% {
    clip-path: polygon(100% 0, 75% 50%, 100% 100%);
  }
  50% {
    clip-path: polygon(100% 0, 100% 50%, 100% 100%);
  }
  75% {
    clip-path: polygon(100% 0, 75% 50%, 100% 100%);
  }
  100% {
    clip-path: polygon(100% 0, 50% 50%, 100% 100%);
  }
}

@keyframes moveGhost {
  0% {
    left: 100%;
  }
  100% {
    left: -50px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .pacman-container {
    max-width: 90%;
  }



  .dot:nth-child(n + 7) {
    display: none;
  }
}