/* ===== Looping idle animations ===== */
.blink {
  animation: blink 1s steps(2) infinite;
}

.blink-slow {
  animation: blink 1.6s steps(2) infinite;
}

.bob {
  animation: bob 0.9s steps(2) infinite;
}

.bob--late {
  animation-delay: 0.45s;
}

.heartbeat {
  animation: heartbeat 0.9s steps(3) infinite;
}

.spin {
  animation: spin 0.4s steps(4) infinite;
}

.dice-icon {
  animation: wobble 2.4s steps(4) infinite;
}

.is-shaking {
  animation: shake 0.4s steps(8);
}

/* ===== Spawned particles (see lib/fx.js) ===== */
#fx-layer {
  position: fixed;
  inset: 0;
  z-index: 75;
  pointer-events: none;
  overflow: hidden;
}

.fx-px {
  position: fixed;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  background: var(--c);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  animation: px-fly var(--d) cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}

.fx-float {
  position: fixed;
  top: var(--y);
  left: var(--x);
  translate: -50% -50%;
  font-family: var(--font-pixel);
  font-size: 22px;
  color: var(--c);
  text-shadow: 3px 3px 0 #05030d;
  white-space: nowrap;
  animation: float-up 1.2s steps(12) forwards;
}

.fx-confetti {
  position: fixed;
  top: -20px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  background: var(--c);
  animation: confetti-fall var(--d) linear var(--delay) both;
}

.fx-flash {
  position: fixed;
  inset: 0;
  background: var(--c);
  animation: flash 0.4s steps(3) forwards;
}

.fx-heart {
  position: fixed;
  bottom: -40px;
  left: var(--x);
  animation: heart-rise var(--d) steps(24) var(--delay) both;
}

.fx-heart svg {
  display: block;
}

/* ===== Keyframes ===== */
@keyframes blink {
  50% { opacity: 0; }
}

@keyframes bob {
  50% { transform: translateY(-2px); }
}

@keyframes heartbeat {
  33% { transform: scale(1.25); }
  66% { transform: scale(0.95); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes wobble {
  0%, 70%, 100% { transform: rotate(0); }
  80% { transform: rotate(-15deg); }
  90% { transform: rotate(15deg); }
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-6px, 2px); }
  25% { transform: translate(5px, -3px); }
  37% { transform: translate(-4px, 3px); }
  50% { transform: translate(4px, 1px); }
  62% { transform: translate(-3px, -2px); }
  75% { transform: translate(2px, 2px); }
  87% { transform: translate(-1px, 0); }
}

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  55% { transform: translateY(-6px); }
  75% { transform: translateY(-2px); }
}

@keyframes crown-bob {
  50% { transform: translateY(-2px); }
}

@keyframes vs-pulse {
  50% { transform: scale(1.18) rotate(-4deg); }
}

@keyframes bar-slide {
  to { background-position: 8px 0; }
}

@keyframes star-drift {
  to { transform: translateY(50%); }
}

@keyframes crt-flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.85; }
  98% { opacity: 1; }
  99% { opacity: 0.9; }
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes card-in {
  from { opacity: 0; transform: translateX(-24px); }
}

@keyframes new-glow {
  50% { --bc: var(--pc); filter: drop-shadow(0 0 12px var(--coin)); }
}

@keyframes pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes stamp-in {
  from { opacity: 0; transform: scale(2.6); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-30px); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-20px); }
}

@keyframes fade-in-out {
  0% { opacity: 0; }
  12%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes stripe-in {
  0% { transform: scaleY(0); }
  12% { transform: scaleY(1); }
  85% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

@keyframes title-pop {
  0% { transform: scale(3); opacity: 0; }
  60% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes picked {
  50% { background: var(--pc); transform: scale(1.04); }
}

@keyframes logo-drop {
  0% { transform: translateY(-120px); opacity: 0; }
  60% { transform: translateY(8px); opacity: 1; }
  80% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes fight-zoom {
  0% { transform: scale(4); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes px-fly {
  0% { transform: translate(-50%, -50%); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) rotate(180deg); opacity: 0; }
}

@keyframes float-up {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { transform: translateY(-10px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-90px) scale(1); opacity: 0; }
}

@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--drift), 110vh) rotate(720deg); opacity: 0.8; }
}

@keyframes flash {
  0% { opacity: 0.35; }
  100% { opacity: 0; }
}

@keyframes heart-rise {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--drift), -110vh) rotate(var(--spin)); opacity: 0.9; }
}

@keyframes golden-glow {
  50% { filter: drop-shadow(0 0 6px var(--coin)); transform: scale(1.08); }
}

@keyframes card-flip {
  0% { transform: perspective(600px) rotateY(90deg); }
  100% { transform: perspective(600px) rotateY(0); }
}

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

  .stars,
  .crt {
    animation: none;
  }
}