/* Keep the original blue-to-lilac fill; animate only real progress updates. */
.game-progress > span {
  position: relative;
  overflow: hidden;
  transition: width 850ms cubic-bezier(.22, 1, .36, 1);
}

/* A soft light passes inside the filled portion without moving its boundary. */
.game-progress > span::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 58%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 12%,
    rgb(255 255 255 / 9%) 28%,
    rgb(255 255 255 / 48%) 50%,
    rgb(255 255 255 / 9%) 72%,
    transparent 88%
  );
  opacity: 0;
  transform: translate3d(-130%, 0, 0);
  animation: redo-progress-sheen 4.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes redo-progress-sheen {
  0%,
8% {
    opacity: 0;
    transform: translate3d(-130%, 0, 0);
  }
  24% { opacity: 1; }
  72% {
    opacity: 1;
    transform: translate3d(190%, 0, 0);
  }
  82%,
100% {
    opacity: 0;
    transform: translate3d(190%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-progress > span { transition: none; }
  .game-progress > span::after {
    animation: none;
    opacity: 0;
  }
}