/* GameMix — polish global: fluxo, fases, toque, acessibilidade */

.gx-phase-head {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

.gx-progress {
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.06);
}

.gx-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #51cf66, #ffe14a, #4dabf7);
  transition: width 0.45s cubic-bezier(0.34, 1.2, 0.48, 1);
}

.game-view.gx-phase-in {
  animation: gx-phase-in 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.game-view.gx-phase-out {
  animation: gx-phase-out 0.26s ease forwards;
}

@keyframes gx-phase-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gx-phase-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0.35;
    transform: scale(0.97);
  }
}

.gx-hit-ok {
  animation: gx-pop-ok 0.38s ease;
}

.gx-hit-no {
  outline-color: #ff6b6b !important;
}

@keyframes gx-pop-ok {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.game-board {
  display: grid;
  gap: 10px;
}

.celebrate {
  animation: gx-celebrate-in 0.5s cubic-bezier(0.34, 1.3, 0.48, 1);
}

@keyframes gx-celebrate-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.game-shell[data-run-index]:not([data-run-index="0"]) .game-heading::after {
  content: "✨ Desafio novo";
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: #0d7a45;
}

@media (prefers-reduced-motion: reduce) {
  .game-view.gx-phase-in,
  .game-view.gx-phase-out,
  .celebrate,
  .gx-hit-ok,
  .gx-progress-fill {
    animation: none !important;
    transition: none !important;
  }
}