/* Slide distance CSS variables (overridden per breakpoint) */
.game-row {
  --slide-x: -720px;
  --slide-y: 0px;
}

/* Left card fades out */
.anim-left-exit {
  animation: leftExit 0.5s cubic-bezier(0,0.5,0,1) forwards !important;
}
@keyframes leftExit {
  to { opacity: 0; transform: translateX(-60px) scale(0.95); }
}

/* VS fades out */
.anim-vs-exit {
  animation: vsExit 0.35s cubic-bezier(0,0.5,0,1) forwards !important;
}
@keyframes vsExit {
  to { opacity: 1; }
}

/* Right card slides to left position */
.anim-right-slide {
  animation: rightSlide 0.55s cubic-bezier(0,0.5,0,1) forwards !important;
}
@keyframes rightSlide {
  to { transform: translateX(var(--slide-x)) translateY(var(--slide-y)); }
}

/* New right card enters from right */
.anim-right-enter {
  animation: rightEnter 0.4s cubic-bezier(0,0.5,0,1) both !important;
}
@keyframes rightEnter {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Game over screen exit */
.anim-gameover-exit {
  animation: gameoverExit 0.5s cubic-bezier(0,0.5,0,1) forwards !important;
}
@keyframes gameoverExit {
  to { opacity: 0; transform: scale(0.96) translateY(20px); }
}

/* Game over card entrance */
.anim-go-card-enter {
  animation: goCardEnter 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes goCardEnter {
  from { opacity: 0; transform: translateX(5px) scale(1); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Tag list slide up */
.anim-tag-slide-up {
  animation: tagSlideUp 0.4s cubic-bezier(0,0.5,0,1) both;
}
@keyframes tagSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-fade-in { animation: fadeIn 0.4s ease; }