/* ============================================
   星际拓荒者 - 动画
   ============================================ */

/* ---- 采集按钮脉冲光环 ---- */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.2;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.mining-btn-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  animation: pulse-ring 2s ease-out infinite;
  pointer-events: none;
}

.mining-btn-ring:nth-child(2) {
  animation-delay: 0.6s;
}

.mining-btn-ring:nth-child(3) {
  animation-delay: 1.2s;
}

/* 采集按钮按下 */
@keyframes mining-press {
  0% { transform: scale(1); }
  30% { transform: scale(0.92); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.mining-btn.pressed {
  animation: mining-press 0.35s ease-out;
}

/* ---- 数字飘字 ---- */
@keyframes float-number {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.8);
  }
}

.float-number {
  position: absolute;
  pointer-events: none;
  font-weight: 700;
  font-size: var(--font-xl);
  color: var(--color-accent);
  text-shadow: 0 2px 8px rgba(0, 184, 148, 0.4);
  animation: float-number 1s ease-out forwards;
  z-index: 100;
}

.float-number.crit {
  font-size: var(--font-hero);
  color: var(--color-gold);
  text-shadow: 0 0 20px rgba(253, 203, 110, 0.6);
  animation: float-number-crit 1.2s ease-out forwards;
}

@keyframes float-number-crit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }
  15% {
    transform: translateY(-10px) scale(1.5);
  }
  30% {
    transform: translateY(-25px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.9);
  }
}

/* ---- 暴击特效 ---- */
@keyframes crit-flash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  30% { opacity: 0.6; }
  45% { opacity: 0.9; }
  100% { opacity: 0; }
}

.crit-overlay {
  position: fixed;
  inset: 0;
  background: var(--crit-flash);
  pointer-events: none;
  z-index: 999;
  animation: crit-flash 0.6s ease-out forwards;
}

@keyframes crit-text {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-10deg);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
  }
  40% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

.crit-text {
  position: fixed;
  top: 35%;
  left: 50%;
  font-size: 52px;
  font-weight: 900;
  color: var(--color-gold);
  text-shadow: 0 0 30px rgba(253, 203, 110, 0.8), 0 0 60px rgba(253, 203, 110, 0.4);
  pointer-events: none;
  z-index: 1000;
  animation: crit-text 1s ease-out forwards;
  letter-spacing: 4px;
}

/* ---- 粒子爆发 ---- */
@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0);
  }
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-burst 0.7s ease-out forwards;
}

/* ---- 升级光线 ---- */
@keyframes upgrade-shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.upgrade-shine {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(253, 203, 110, 0.3), transparent);
  animation: upgrade-shine 0.8s ease-in-out;
  pointer-events: none;
  z-index: 5;
}

/* 升级缩放弹跳 */
@keyframes upgrade-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.08); }
  50% { transform: scale(0.96); }
  75% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.upgrade-bounce {
  animation: upgrade-bounce 0.5s ease-out;
}

/* ---- 等级数字跳动 ---- */
@keyframes level-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); color: var(--color-gold); }
  100% { transform: scale(1); }
}

.level-pop {
  animation: level-pop 0.5s ease-out;
}

/* ---- 卡牌翻转 ---- */
@keyframes card-flip-in {
  0% {
    transform: perspective(600px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(600px) rotateY(0deg);
    opacity: 1;
  }
}

.card-flip-in {
  animation: card-flip-in 0.5s ease-out;
}

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

.card-flip-out {
  animation: card-flip-out 0.4s ease-in forwards;
}

/* ---- 选中卡牌高亮 ---- */
@keyframes card-selected {
  0%, 100% { box-shadow: 0 0 0 2px var(--color-primary), 0 0 15px rgba(108, 92, 231, 0.3); }
  50% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 25px rgba(108, 92, 231, 0.5); }
}

.card-selected {
  animation: card-selected 1.5s ease-in-out infinite;
}

/* ---- 战斗回合 ---- */
@keyframes combat-attack-left {
  0% { transform: translateX(0); }
  30% { transform: translateX(30px) scale(1.1); }
  60% { transform: translateX(-5px); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes combat-attack-right {
  0% { transform: translateX(0); }
  30% { transform: translateX(-30px) scale(1.1); }
  60% { transform: translateX(5px); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes combat-hit {
  0% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1); }
}

.combat-attack-left { animation: combat-attack-left 0.5s ease-out; }
.combat-attack-right { animation: combat-attack-right 0.5s ease-out; }
.combat-hit { animation: combat-hit 0.4s ease-out; }

/* ---- 数字滚动 ---- */
@keyframes number-roll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* ---- 骨架屏闪光 ---- */
@keyframes skeleton-shine {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200px 100%;
  animation: skeleton-shine 1.5s ease-in-out infinite;
}

/* ---- Toast 进出 ---- */
@keyframes toast-in {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}

.toast-in { animation: toast-in 0.3s ease-out; }
.toast-out { animation: toast-out 0.25s ease-in forwards; }

/* ---- Modal 进出 ---- */
@keyframes modal-bg-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes modal-bg-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes modal-content-in {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-content-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
}

.modal-bg-in { animation: modal-bg-in 0.25s ease-out; }
.modal-bg-out { animation: modal-bg-out 0.2s ease-in forwards; }
.modal-content-in { animation: modal-content-in 0.3s ease-out; }
.modal-content-out { animation: modal-content-out 0.2s ease-in forwards; }

/* ---- 星空背景 ---- */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--star-color);
  border-radius: 50%;
  animation: twinkle var(--duration, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ---- 连击进度条 ---- */
@keyframes combo-bar {
  0% { width: 100%; }
  100% { width: 0%; }
}

/* ---- 资源跳动 ---- */
@keyframes resource-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.resource-bump {
  animation: resource-bump 0.3s ease-out;
}

/* ---- 自动采集旋转 ---- */
@keyframes auto-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.auto-spin {
  animation: auto-spin 3s linear infinite;
}

/* ---- Tab 切换 ---- */
@keyframes tab-page-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-page-in {
  animation: tab-page-in 0.25s ease-out;
}

/* ---- 战斗结果弹窗 ---- */
@keyframes victory-text {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    filter: blur(10px);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

/* ---- 资源图标闪烁 ---- */
@keyframes icon-glow {
  0%, 100% { filter: drop-shadow(0 0 3px currentColor); }
  50% { filter: drop-shadow(0 0 8px currentColor); }
}

/* ---- 匹配搜索 ---- */
@keyframes matchmaking-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.4; }
}

.matchmaking-dot {
  animation: matchmaking-pulse 1.2s ease-in-out infinite;
}

.matchmaking-dot:nth-child(2) { animation-delay: 0.2s; }
.matchmaking-dot:nth-child(3) { animation-delay: 0.4s; }

/* ---- 飘入 ---- */
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slide-up 0.3s ease-out;
}

/* ---- 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@keyframes match-spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } .matching-spin{display:inline-block;animation:match-spin 2s linear infinite}