.flying-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  z-index: 100; pointer-events: none;
  display: none;
}
.flying-overlay.active { display: block; }

.fly-card {
  position: absolute;
  width: var(--card-w); height: var(--card-h);
  border-radius: 12px;
  transform-style: preserve-3d;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8);
  will-change: transform, opacity;
}
.fly-card img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
  display: block;
}

@keyframes scatter1 {
  0% { transform: translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--tx), var(--ty), 0) rotateY(720deg) rotateZ(var(--rz)) scale(0.85); opacity: 0.9; }
}
@keyframes scatter2 {
  0% { transform: translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--tx), var(--ty), 0) rotateY(-540deg) rotateZ(var(--rz)) scale(0.9); opacity: 0.85; }
}
@keyframes scatter3 {
  0% { transform: translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--tx), var(--ty), 0) rotateY(1080deg) rotateZ(var(--rz)) scale(0.8); opacity: 0.9; }
}
.fly-card.scatter { animation: scatter1 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.fly-card.scatter-alt { animation: scatter2 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.fly-card.scatter-alt2 { animation: scatter3 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

@keyframes flyBack {
  0% { transform: translate3d(var(--tx), var(--ty), 0) rotateY(var(--ry)) rotateZ(var(--rz)) scale(0.85); opacity: 0.9; }
  100% { transform: translate3d(0, 150px, 0) rotateY(0deg) rotateZ(0deg) scale(0.5); opacity: 0; }
}
.fly-card.fly-back { animation: flyBack 0.8s ease-in forwards; }

@keyframes flyToSlot {
  0% { transform: translate3d(var(--tx), var(--ty), 0) rotateY(var(--ry)) rotateZ(var(--rz)) scale(0.85); opacity: 1; }
  100% { transform: translate3d(var(--slot-x), var(--slot-y), 0) rotateY(0deg) rotateZ(0deg) scale(1); opacity: 1; }
}
.fly-card.fly-to-slot { animation: flyToSlot 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(212,175,55,0.3), 0 0 30px rgba(212,175,55,0.1); }
  25% { box-shadow: 0 0 25px rgba(212,175,55,0.8), 0 0 60px rgba(212,175,55,0.4), 0 0 100px rgba(255,215,0,0.2); }
  50% { box-shadow: 0 0 40px rgba(212,175,55,1), 0 0 80px rgba(255,215,0,0.5), 0 0 120px rgba(255,215,0,0.3); }
  75% { box-shadow: 0 0 25px rgba(212,175,55,0.8), 0 0 60px rgba(212,175,55,0.4), 0 0 100px rgba(255,215,0,0.2); }
}
.glow-gold {
  animation: goldGlow 1.5s ease-in-out 3;
  border-radius: 12px;
}

.particle {
  position: absolute; width: 4px; height: 4px;
  background: var(--gold); border-radius: 50%;
  pointer-events: none; opacity: 0;
}
@keyframes particleFly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

@keyframes slotGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.1); }
  50% { box-shadow: 0 0 40px rgba(212,175,55,0.3), 0 0 80px rgba(212,175,55,0.1); }
}
.card-slot.filled {
  animation: slotGlow 3s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 30px rgba(192,160,255,0.2); }
  50% { transform: scale(1.05); box-shadow: 0 0 50px rgba(192,160,255,0.4); }
}
@keyframes runeFloat {
  0%,100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-10px); opacity: 1; }
}
@keyframes blink { 0%,100%{opacity:0.6} 50%{opacity:1} }

/* ===== 飞向屏幕中央展示 ===== */
@keyframes flyToCenter {
  0% { transform: translate3d(var(--tx), var(--ty), 0) rotateY(var(--ry)) rotateZ(var(--rz)) scale(0.85); opacity: 1; }
  100% { transform: translate3d(var(--cx), var(--cy), 0) rotateY(0deg) rotateZ(0deg) scale(var(--center-scale)); opacity: 1; }
}
.fly-card.fly-to-center { animation: flyToCenter 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ===== 从中央缩回卡槽 ===== */
@keyframes shrinkToSlot {
  0% { transform: translate3d(var(--cx), var(--cy), 0) scale(var(--center-scale)); opacity: 1; }
  100% { transform: translate3d(var(--slot-x), var(--slot-y), 0) scale(1); opacity: 1; }
}
.fly-card.shrink-to-slot { animation: shrinkToSlot 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ===== 洗牌动画 ===== */
@keyframes shuffleFlyOut {
  0% { transform: translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--tx), var(--ty), 0) rotateY(var(--ry)) rotateZ(var(--rz)) scale(0.85); opacity: 1; }
}
/* .shuffle-fly-out { animation: shuffleFlyOut 0.6s ease-out forwards; } */
.shuffle-fly-out { animation: shuffleFlyOut 0.4s ease-out forwards; }

@keyframes shuffleFlyBack {
  0% { transform: translate3d(var(--tx), var(--ty), 0) rotateY(var(--ry)) rotateZ(var(--rz)) scale(0.85); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1); opacity: 1; }
}
/* .shuffle-fly-back { animation: shuffleFlyBack 0.5s ease-in forwards; animation-delay: var(--delay, 0s); } */
.shuffle-fly-back { animation: shuffleFlyBack 0.3s ease-in forwards; animation-delay: var(--delay, 0s); }
@keyframes deckShake {
  0%, 100% { transform: translate(0,0) scale(1); }
  20% { transform: translate(-3px, 3px) scale(1.02); }
  40% { transform: translate(3px, -3px) scale(1.02); }
  60% { transform: translate(-3px, -3px) scale(1.02); }
  80% { transform: translate(3px, 3px) scale(1.02); }
}
.deck-shake { animation: deckShake 0.4s ease-in-out; }

/* ===== 逐字渐隐动画 ===== */
@keyframes charFade {
  0%   { opacity: 0; transform: translateY(12px) scale(0.8); filter: blur(6px); text-shadow: 0 0 30px rgba(212,175,55,0); }
  25%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); text-shadow: 0 0 20px rgba(212,175,55,0.8), 0 0 40px rgba(212,175,55,0.4); }
  60%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); text-shadow: 0 0 15px rgba(212,175,55,0.5); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.9); filter: blur(4px); text-shadow: 0 0 30px rgba(212,175,55,0); }
}
.shuffle-text.active span {
  animation: charFade 1.2s ease-in-out forwards;
}

@keyframes scatter-ios {
  0% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--tx), var(--ty), 0) scale(0.85); opacity: 0.9; }
}
.fly-card.scatter-ios {
  animation: scatter-ios 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== iOS 纯平移：从散开位置飞向屏幕中央 ===== */
@keyframes flyToCenterIOS {
  0%   { transform: translate3d(var(--tx), var(--ty), 0) scale(0.85); opacity: 1; }
  100% { transform: translate3d(var(--cx), var(--cy), 0) scale(var(--center-scale)); opacity: 1; }
}
.fly-card.fly-to-center-ios {
  animation: flyToCenterIOS 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ===== iOS 纯平移：非选中牌飞回牌堆 ===== */
@keyframes flyBackIOS {
  0%   { transform: translate3d(var(--tx), var(--ty), 0) scale(0.85); opacity: 0.9; }
  100% { transform: translate3d(0, 150px, 0) scale(0.5); opacity: 0; }
}
.fly-card.fly-back-ios {
  animation: flyBackIOS 0.8s ease-in forwards;
}