/* Screen entry */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app__main > .screen {
  animation: fade-in 0.22s ease both;
}

/* A freshly dealt chip pops in */
@keyframes chip-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.chip--dealt {
  animation: chip-pop 0.32s ease both;
}

/* Spending: chips fly up and fade on submit (spec §6.3) */
@keyframes chip-spend {
  to {
    opacity: 0;
    transform: translateY(-28px) scale(0.85);
  }
}

.chip--spending {
  animation: chip-spend 0.45s ease forwards;
}

/* Winner reveal */
@keyframes pop-in {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.answer--winner {
  animation: pop-in 0.35s ease both;
}

/* Staggered reveal on results screen: non-winner cards fade in one-by-one.
   animation-delay is applied inline per-card so the fill-mode keeps each
   card invisible until its turn. */
.answer--reveal {
  animation: fade-in 0.28s ease both;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 16px);
  transform: translateX(-50%) translateY(20px);
  max-width: min(92vw, 480px);
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast--error {
  background: var(--color-danger);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}