/* animations.css — all @keyframes */

/* ── Mark appear (落子動畫) ── */
@keyframes markAppear {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.mark-enter {
  animation: markAppear 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Win line pulse (勝利連線) ── */
@keyframes winPulse {
  0%, 100% { background: var(--color-win-hl); }
  50%       { background: #FCD34D; box-shadow: 0 0 12px rgba(253, 224, 71, 0.6); }
}

/* ── Board shake (電腦獲勝) ── */
@keyframes boardShake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px) rotate(-0.5deg); }
  30%       { transform: translateX(6px) rotate(0.5deg); }
  45%       { transform: translateX(-5px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}

.board-shake {
  animation: boardShake 0.5s ease;
}

/* ── Board draw fade (平局) ── */
@keyframes boardDraw {
  0%   { filter: grayscale(0); opacity: 1; }
  100% { filter: grayscale(0.6); opacity: 0.7; }
}

.board-draw {
  animation: boardDraw 0.4s ease forwards;
}

/* ── Overlay in (結果覆蓋層進場) ── */
@keyframes overlayIn {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Button appear ── */
@keyframes btnAppear {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── AI thinking dots ── */
.thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.thinking-dots span {
  width: 5px;
  height: 5px;
  background: var(--color-text-muted);
  border-radius: 50%;
  animation: dot-bounce 1.2s infinite ease-in-out;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Select screen btn entrance ── */
@keyframes fadeSlideUp {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.select-container > * {
  animation: fadeSlideUp 0.4s ease forwards;
}

.select-container > *:nth-child(1) { animation-delay: 0s; }
.select-container > *:nth-child(2) { animation-delay: 0.05s; }
.select-container > *:nth-child(3) { animation-delay: 0.1s; }
.select-container > *:nth-child(4) { animation-delay: 0.15s; }