@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hintPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@keyframes scoreBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes popIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes countTick {
  0%   { opacity: 0; transform: scale(1.6); }
  25%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(0.8); }
}

@keyframes accountIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes accountOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(6px) scale(0.88); }
}

@keyframes avatarPop {
  0%   { transform: scale(0.4) rotate(-20deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes popOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.94); }
}

@keyframes menuOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.92); }
}

@keyframes rowOut {
  from { opacity: 1; max-height: var(--h, 80px); transform: translateX(0); }
  60%  { opacity: 0; transform: translateX(28px); }
  to   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -5px; margin-bottom: -5px; border-width: 0; transform: translateX(28px); }
}

@keyframes swapOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.overlay.closing {
  pointer-events: none;
  animation: fadeOut 0.18s ease both;
}

.overlay.closing .modal {
  animation: popOut 0.18s ease both;
}

.account-menu.closing,
.sound-menu.closing {
  pointer-events: none;
  animation: menuOut 0.14s ease both;
}

.reveal {
  animation: fadeInUp 0.45s cubic-bezier(0.33, 1, 0.68, 1) backwards;
}

@keyframes menuPop {
  from { opacity: 0; transform: translateY(-6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--button-bg) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--button-bg) 0%, transparent); }
}

@keyframes badgePop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes badgeRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hazard) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--hazard) 0%, transparent); }
}

@keyframes ringOut {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06, 1.25); }
}

@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes checkPop {
  0%   { transform: scale(0) rotate(-30deg); }
  70%  { transform: scale(1.25) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes coinTurn {
  from { transform: perspective(40px) rotateY(0deg); }
  to   { transform: perspective(40px) rotateY(360deg); }
}

@keyframes sheenSlide {
  0%   { background-position: 120% 0; }
  55%, 100% { background-position: -20% 0; }
}