/* games/chess/style.css */

/* ── 模式切換頁籤 ── */
.chess-mode-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.chess-tab {
  padding: 8px 24px;
  border-radius: 20px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.chess-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── 殘局導覽列 ── */
.puzzle-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 8px;
}

.puzzle-info {
  text-align: center;
  flex: 1;
  max-width: 280px;
}

.puzzle-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.puzzle-meta {
  display: flex;
  gap: 12px;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ── 殘局步數列 ── */
.puzzle-status-bar {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.puzzle-result-text {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary);
  animation: chess-pulse 0.5s ease-in-out;
}

/* ── 回合指示 ── */
.chess-turn {
  font-size: var(--font-size-title);
  font-weight: 700;
  color: var(--color-primary);
  min-width: 160px;
  text-align: center;
}

.chess-status {
  font-size: 18px;
  font-weight: 700;
  color: #D4380D;
  min-width: 120px;
  text-align: center;
  animation: chess-pulse 0.6s ease-in-out;
}

@keyframes chess-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── 計時器列 ── */
.chess-timer-bar {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 8px;
}

.chess-timer-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  opacity: 0.5;
  transition: opacity 0.3s, border-color 0.3s;
}

.chess-timer-box.chess-timer-active {
  opacity: 1;
  border-color: var(--color-primary);
}

.chess-timer-label {
  font-size: 15px;
  font-weight: 600;
}

.chess-timer-val {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  min-width: 48px;
  text-align: right;
}

/* ── 棋盤 Canvas ── */
#chess-canvas {
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  touch-action: none;
}

[data-theme="dark"] #chess-canvas {
  filter: brightness(0.88);
}

/* ── 被吃棋子 ── */
.chess-captured-wrap {
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.chess-captured-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  min-height: 28px;
  flex-wrap: wrap;
}

.chess-captured-row + .chess-captured-row {
  margin-top: 4px;
}

.chess-captured-label {
  color: var(--color-text-secondary);
  font-size: 14px;
  white-space: nowrap;
  min-width: 88px;
}

.chess-piece-chip {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.chess-piece-chip.red  { background: #FFCCC7; color: #D4380D; border: 1px solid #D4380D; }
.chess-piece-chip.black { background: #333;    color: #fff;    border: 1px solid #888; }

/* ── 殘局選題 Modal ── */
.puzzle-list-modal {
  max-width: 480px;
  width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.puzzle-list-modal h2 {
  text-align: center;
  margin-bottom: 14px;
  font-size: 22px;
}

.puzzle-list-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}

.puzzle-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  text-align: left;
}

.puzzle-list-item:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.puzzle-list-item.active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
}

.puzzle-list-num {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  min-width: 28px;
  text-align: center;
}

.puzzle-list-info {
  flex: 1;
}

.puzzle-list-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.puzzle-list-meta {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.puzzle-list-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.puzzle-list-badge.easy   { background: #D9F7BE; color: #237804; }
.puzzle-list-badge.medium { background: #FFE7BA; color: #AD4E00; }
.puzzle-list-badge.hard   { background: #FFCCC7; color: #A8071A; }

[data-theme="dark"] .puzzle-list-badge.easy   { background: #162312; color: #73D13D; }
[data-theme="dark"] .puzzle-list-badge.medium { background: #2B1D11; color: #FFA940; }
[data-theme="dark"] .puzzle-list-badge.hard   { background: #2A1215; color: #FF7875; }

/* 已完成 / 完美標識 */
.puzzle-list-badge.solved  { background: #E6F7FF; color: #0050B3; }
.puzzle-list-badge.perfect { background: #FFFBE6; color: #874D00; }
[data-theme="dark"] .puzzle-list-badge.solved  { background: #111A2C; color: #69C0FF; }
[data-theme="dark"] .puzzle-list-badge.perfect { background: #2A2100; color: #FFC53D; }

/* 已完成的題目列表項目淡色背景 */
.puzzle-list-item.done {
  opacity: 0.82;
}

/* ── 響應式：小螢幕 ── */
@media (max-width: 480px) {
  .chess-timer-bar { gap: 8px; }
  .chess-timer-box { padding: 5px 12px; }
  .chess-timer-label { font-size: 13px; }
  .chess-timer-val { font-size: 16px; min-width: 40px; }
  .puzzle-nav { gap: 6px; }
  .puzzle-title { font-size: 17px; }
}