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

/* ===== Card played to trick center ===== */
@keyframes play-to-trick {
  from {
    transform: translate(var(--play-from-x, 0), var(--play-from-y, 80px)) scale(1.08);
    opacity: 0.8;
  }
  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
.card.playing {
  animation: play-to-trick 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== Card lands in slot (subtle bounce) ===== */
@keyframes card-land {
  0%   { transform: translate(-50%, -50%) scale(1.08); }
  60%  { transform: translate(-50%, -50%) scale(0.97); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.trick-slot .card.landed {
  animation: card-land 0.24s ease-out;
}

/* ===== Trick won — cards slide to winner ===== */
@keyframes trick-collect {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--collect-x, 0px)),
      calc(-50% + var(--collect-y, 0px))
    ) scale(0.4);
  }
}
.trick-slot .card.collecting {
  animation: trick-collect 0.45s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}

/* ===== Draw / receive card ===== */
@keyframes card-receive {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.card.receiving {
  animation: card-receive 0.28s ease-out forwards;
}

/* ===== Fade transitions for overlays ===== */
@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes overlay-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.overlay-screen:not(.hidden),
#bid-overlay:not(.hidden),
#exchange-overlay:not(.hidden),
#meld-overlay:not(.hidden),
#round-summary-overlay:not(.hidden) {
  animation: overlay-fade-in 0.3s ease-out;
}

/* ===== Panel slide up ===== */
@keyframes panel-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.overlay-panel,
#bid-panel,
#exchange-panel,
#meld-panel,
#round-summary-panel,
#game-over-overlay > * {
  animation: panel-slide-up 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

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

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

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

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

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

/* ===== Winner shimmer ===== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ===== Trump reveal flash ===== */
@keyframes trump-reveal {
  0%   { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.card.trump-reveal {
  animation: trump-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== Auction log entry pop ===== */
@keyframes log-entry-pop {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.auction-entry {
  animation: log-entry-pop 0.2s ease-out;
}

/* ===== Bid won flash ===== */
@keyframes bid-won-flash {
  0%   { background: var(--bg-secondary); }
  25%  { background: rgba(201, 162, 39, 0.25); }
  75%  { background: rgba(201, 162, 39, 0.15); }
  100% { background: var(--bg-secondary); }
}
#bid-panel.bid-won {
  animation: bid-won-flash 0.7s ease-out;
}

/* ===== Meld item reveal ===== */
@keyframes meld-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.meld-item {
  animation: meld-item-in 0.25s ease-out;
}

/* ===== Toast notification ===== */
.toast {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ===== Turn banner pulse ===== */
@keyframes banner-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}
#turn-banner:not(.hidden) {
  animation: banner-pulse 2.5s ease-in-out infinite;
}

/* ===== Card hover lift (hand) — additional smoothness ===== */
#my-hand .card {
  transition:
    transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.18s,
    opacity 0.2s,
    margin-left 0.2s;
}