/* Shake on wrong answer */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.4s ease-out;
}

/* Slide down for explanation */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-down {
  animation: slideDown 0.3s var(--ease) forwards;
}

/* Float up for points */
@keyframes floatUp {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-40px); }
}

.float-up {
  animation: floatUp 1.2s var(--ease) forwards;
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.4s var(--ease) forwards;
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.scale-in {
  animation: scaleIn 0.3s var(--ease) forwards;
}

/* Counter animation */
@keyframes countPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.count-pulse {
  animation: countPulse 0.3s var(--ease);
}

/* Button correct/incorrect states */
.btn--correct {
  background: var(--correct) !important;
  border-color: var(--correct) !important;
  color: #fff !important;
}

.btn--incorrect {
  background: var(--incorrect) !important;
  border-color: var(--incorrect) !important;
  color: #fff !important;
}

/* Card entrance stagger */
.game-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 0.4s var(--ease) forwards;
}

@keyframes fadeSlideUp {
  to { opacity: 1; transform: translateY(0); }
}

.game-card:nth-child(1) { animation-delay: 0.05s; }
.game-card:nth-child(2) { animation-delay: 0.1s; }
.game-card:nth-child(3) { animation-delay: 0.15s; }
.game-card:nth-child(4) { animation-delay: 0.2s; }
.game-card:nth-child(5) { animation-delay: 0.25s; }
.game-card:nth-child(6) { animation-delay: 0.3s; }

/* ===== FOCUS VISIBLE — all interactive elements ===== */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
.game-card:focus-visible,
.btn:focus-visible,
.btn--game:focus-visible,
.next-btn:focus-visible,
.share-btn:focus-visible,
.carousel__btn:focus-visible,
.carousel__dot:focus-visible,
.difficulty-select__btn:focus-visible,
.theme-toggle:focus-visible,
.lang-select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .game-card {
    opacity: 1;
    transform: none;
  }

  .shake { animation: none; }
  .float-up { animation: none; opacity: 0; }
  .slide-down { animation: none; opacity: 1; transform: none; }
}