/* Shared game-card progress component.
   Single source of truth for the public frontend and the admin theme preview. */

.home-game-card__progress {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 21px;
  padding: 3px 5px 3px 4px;
  overflow: hidden;
  border: 1px solid var(--home-game-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--home-game-wrapper) 68%, var(--home-game-surface) 32%);
}

.home-game-card__progress-track {
  position: relative;
  display: block;
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--home-game-text) 9%, transparent);
}

.home-game-card__progress-fill {
  display: block;
  width: var(--home-game-progress, 0%);
  height: 100%;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 720ms cubic-bezier(.22, .78, .24, 1);
  background: linear-gradient(
    90deg,
    var(--rtpx-progress-low, var(--home-game-accent)) 0%,
    var(--rtpx-progress-stable, var(--home-game-accent)) 33%,
    var(--rtpx-progress-medium, var(--home-game-accent)) 66%,
    var(--rtpx-progress-high, var(--home-game-accent)) 100%
  );
  background-size: var(--home-game-progress-bg-size, 100%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--home-game-text) 18%, transparent);
}

.home-game-card__progress.is-progress-ready .home-game-card__progress-fill {
  transform: scaleX(1);
}

.home-game-card__progress strong {
  min-width: 29px;
  color: var(--home-game-text);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .home-game-card__progress-fill {
    transform: scaleX(1);
    transition: none;
  }
}