/* ===== Deal animation ===== */
@keyframes deal-fly {
  from {
    opacity: 0;
    transform: translate(var(--deal-from-x, 0), var(--deal-from-y, -180px)) scale(0.5) rotate(var(--deal-rot, 0deg));
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}
.card.dealing {
  animation: deal-fly 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

/* ===== Card played to discard ===== */
@keyframes play-to-discard {
  from {
    transform: translate(var(--play-from-x, 0), var(--play-from-y, 0)) scale(1.1);
    opacity: 0.7;
  }
  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
.card.playing {
  animation: play-to-discard 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== Card lands (bounce) ===== */
@keyframes card-land {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.card.landed {
  animation: card-land 0.22s ease-out;
}

/* ===== Draw from stock ===== */
@keyframes draw-from-stock {
  from {
    opacity: 0;
    transform: translateX(-60px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.card.drawing {
  animation: draw-from-stock 0.3s ease-out forwards;
}

/* ===== Chop intercept ===== */
@keyframes chop-slam {
  0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.card.chopping {
  animation: chop-slam 0.35s ease-out forwards;
}

/* ===== Knock tap ===== */
@keyframes knock-tap {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(0.95); }
  50%      { transform: scale(1.05); }
  75%      { transform: scale(0.98); }
}
.knock-animation {
  animation: knock-tap 0.4s ease-out;
}

/* ===== Message overlay pop ===== */
@keyframes msg-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#message-overlay:not(.hidden) {
  animation: msg-pop 0.4s ease-out;
}

/* ===== Game over entrance ===== */
@keyframes game-over-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
#game-over-overlay:not(.hidden) {
  animation: game-over-in 0.5s ease-out;
}

/* ===== Panel slide up ===== */
@keyframes panel-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Screen transition ===== */
@keyframes screen-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== Error shake ===== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
}
.shake { animation: shake 0.35s ease-out; }

/* ===== Fade in ===== */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fade-in 0.3s ease-out; }

/* ===== Active player pulse ===== */
@keyframes active-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--accent-glow); }
  50%       { box-shadow: 0 0 20px var(--accent-glow); }
}
.player-panel.active {
  animation: active-pulse 2s ease-in-out infinite;
}

/* ===== Chop timer countdown ===== */
@keyframes chop-timer {
  from { width: 100%; }
  to   { width: 0%; }
}
.chop-timer-bar {
  height: 4px;
  background: var(--chop-color, #ef4444);
  border-radius: 2px;
  animation: chop-timer var(--chop-duration, 4s) linear forwards;
}

/* ===== Score tick ===== */
@keyframes score-tick {
  0%  { transform: scale(1); }
  50% { transform: scale(1.3); color: var(--accent); }
  100%{ transform: scale(1); }
}
.score-tick { animation: score-tick 0.4s ease-out; }

/* ===== Winner shimmer ===== */
.winner-text {
  background: linear-gradient(90deg, var(--accent), #fbbf24, var(--accent));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}