/**
 * 棋盤棋子與提子區：外觀、hover、翻棋 flipIn。
 * 被吃子飛入提子槽由 js/dark-chess.js rAF+transform 實作。
 * 依賴頁面 :root 的 --red-ink / --black-ink 等變數。
 *
 * 翻棋揭面動畫時長以 CSS 變數 --flip-reveal-duration 為「單一真實來源」，
 * JS 端透過 PieceAnimator.getFlipRevealSettleMs() 從 :root 讀取（getComputedStyle）。
 * 修改時只改此檔案的 :root 即可，不必同步 JS。
 */

:root {
  --flip-reveal-duration: 400ms;
}

/* ─── Piece ─── */
.piece {
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: '標楷體', 'DFKai-SB', 'KaiTi', 'BiauKai', serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
}

.piece:hover { transform: translateY(-2px); }

/* SVG 棋子：內嵌文字 */
.piece.piece-svg .piece-svg-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.piece.piece-svg.piece-face {
  background: none;
  box-shadow: none;
  border: none;
}

.piece.piece-svg.piece-hidden,
.piece.piece-svg.piece-covered {
  background: none;
  box-shadow: none;
  border: none;
  color: transparent;
}

.piece-red  { color: var(--red-ink);   }
.piece-black{ color: var(--black-ink); }

.flipped, .flip-enter {
  transform-style: preserve-3d;
  transition: box-shadow 0.12s ease, filter 0.12s ease;
  animation: flipIn var(--flip-reveal-duration) linear forwards;
}
@keyframes flipIn {
  /* 三階段 0.1s / 0.1s / 0.2s：上浮（側立）→ 繞 X 軸翻正 → 落回格內 */
  0% {
    transform: translateY(0) rotateX(86deg) scale(0.9);
    opacity: 0.28;
  }
  25% {
    transform: translateY(-12px) rotateX(86deg) scale(0.92);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-10px) rotateX(0deg) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotateX(0deg) scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flipped, .flip-enter {
    animation: flipInReduced 0.2s ease forwards;
  }
  @keyframes flipInReduced {
    0%   { opacity: 0.35; }
    100% { opacity: 1; }
  }
}

/* 已選己方後點「非法敵子」：己方棋微幅左右搖（約 150ms）；與 prefers-reduced-motion 搭配由 JS 略過 class */
@keyframes pieceIllegalNudgeX {
  0%,
  100% {
    transform: translate(0, 0);
  }
  22% {
    transform: translate(-2px, 0);
  }
  44% {
    transform: translate(2px, 0);
  }
  66% {
    transform: translate(-1px, 0);
  }
  88% {
    transform: translate(1px, 0);
  }
}

.piece.piece-illegal-nudge {
  animation: pieceIllegalNudgeX 0.15s ease-in-out both;
}