/* ============================================================
 *  暗棋（翻翻棋）样式 - 命名隔离：所有 class 统一 chess- 前缀
 * ============================================================ */

/* ========== 基础（作用域：body.chess-root 及其后代） ========== */
body.chess-root, body.chess-root * { box-sizing: border-box; margin: 0; padding: 0; }
body.chess-root {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: radial-gradient(ellipse at top, #3a2818 0%, #1a0f08 100%);
  color: #f4e8d6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2vmin;
  overflow-x: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ========== 顶部信息栏 ========== */
.chess-header {
  width: 100%;
  max-width: 90vmin;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5vmin;
  padding: 0 1vmin;
}
.chess-title {
  font-size: 3.5vmin;
  font-weight: bold;
  color: #f4d58d;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.2em;
}
.chess-turn-info {
  font-size: 2.5vmin;
  padding: 0.8vmin 2vmin;
  border-radius: 2vmin;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(244,213,141,0.3);
  transition: all 0.3s;
}
.chess-turn-info.chess-red { color: #ff6b6b; border-color: rgba(255,107,107,0.5); }
.chess-turn-info.chess-black { color: #4ecdc4; border-color: rgba(78,205,196,0.5); }

/* ========== 状态提示 ========== */
.chess-status-bar {
  width: 100%;
  max-width: 90vmin;
  text-align: center;
  font-size: 2.2vmin;
  margin-bottom: 1.5vmin;
  min-height: 3.5vmin;
  color: #ffd93d;
  opacity: 0;
  transition: opacity 0.3s;
}
.chess-status-bar.chess-show { opacity: 1; }
.chess-status-bar.chess-win { color: #51cf66; font-size: 3vmin; font-weight: bold; }
.chess-status-bar.chess-lose { color: #ff6b6b; font-size: 3vmin; font-weight: bold; }

/* ========== 棋盘 ========== */
.chess-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 1.2vmin;
  width: min(90vmin, 520px);
  aspect-ratio: 4 / 8;
  padding: 2vmin;
  background: linear-gradient(145deg, #b8860b 0%, #8b6914 50%, #b8860b 100%);
  border-radius: 2.5vmin;
  box-shadow:
    0 2vmin 6vmin rgba(0,0,0,0.6),
    inset 0 2px 4px rgba(255,255,255,0.2),
    inset 0 -2px 4px rgba(0,0,0,0.3);
  border: 0.6vmin solid #5c4a1f;
}

/* ========== 棋子格子 ========== */
.chess-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  perspective: 1000px;
  cursor: pointer;
}
.chess-cell.chess-hint::after {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: rgba(81,207,102,0.35);
  border: 2px dashed #51cf66;
  animation: chess-pulse-hint 1.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}
.chess-cell.chess-hint.chess-eat::after {
  background: rgba(255,107,107,0.35);
  border-color: #ff6b6b;
}
@keyframes chess-pulse-hint {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

.chess-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.chess-piece.chess-flipped { transform: rotateY(180deg); }

.chess-piece-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5.5vmin;
  font-weight: bold;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow:
    0 0.6vmin 1.2vmin rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.2);
}

/* 棋子背面 */
.chess-piece-back {
  background: radial-gradient(circle at 35% 30%, #c9a66b 0%, #8b6914 60%, #5c4a1f 100%);
  border: 0.4vmin solid #3d2e0a;
}
.chess-piece-back::before {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 0.3vmin solid rgba(61,46,10,0.4);
  background: repeating-radial-gradient(
    circle at center,
    transparent 0,
    transparent 6%,
    rgba(61,46,10,0.15) 6%,
    rgba(61,46,10,0.15) 8%
  );
}
.chess-piece-back::after {
  content: '象';
  color: rgba(61,46,10,0.3);
  font-size: 5vmin;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  font-weight: bold;
}

/* 棋子正面 */
.chess-piece-front {
  background: radial-gradient(circle at 35% 25%, #fff8e7 0%, #e8d4a8 60%, #c9a66b 100%);
  border: 0.4vmin solid #8b6914;
  transform: rotateY(180deg);
}
.chess-piece-front.chess-red { color: #c92a2a; text-shadow: 1px 1px 0 #fff8e7, 2px 2px 4px rgba(0,0,0,0.2); }
.chess-piece-front.chess-black { color: #212529; text-shadow: 1px 1px 0 #fff8e7, 2px 2px 4px rgba(0,0,0,0.2); }

.chess-piece.chess-selected .chess-piece-face {
  box-shadow:
    0 0 0 0.5vmin #ffd93d,
    0 0 2vmin rgba(255,217,61,0.8),
    inset 0 2px 4px rgba(255,255,255,0.4);
}

/* 吃子动画 */
@keyframes chess-eat-shake {
  0%, 100% { transform: translateX(0) rotateY(180deg); }
  25% { transform: translateX(-5%) rotateY(180deg); }
  75% { transform: translateX(5%) rotateY(180deg); }
}
.chess-piece.chess-eating { animation: chess-eat-shake 0.3s ease-in-out; }
.chess-piece:not(.chess-flipped).chess-eating { animation: chess-eat-shake 0.3s ease-in-out; animation-name: chess-eat-shake-back; }
@keyframes chess-eat-shake-back {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5%); }
  75% { transform: translateX(5%); }
}

/* 翻棋高亮动画 */
@keyframes chess-flip-glow {
  0% { box-shadow: 0 0 0 rgba(255,217,61,0); }
  50% { box-shadow: 0 0 3vmin rgba(255,217,61,1); }
  100% { box-shadow: 0 0 0 rgba(255,217,61,0); }
}
.chess-piece.chess-just-flipped .chess-piece-face { animation: chess-flip-glow 0.8s ease-out; }

/* ========== 底部按钮 ========== */
.chess-controls {
  display: flex;
  gap: 2vmin;
  margin-top: 2.5vmin;
  flex-wrap: wrap;
  justify-content: center;
}
.chess-btn {
  font-size: 2.5vmin;
  padding: 1.5vmin 3.5vmin;
  border: none;
  border-radius: 1.5vmin;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
  font-family: inherit;
  box-shadow: 0 0.5vmin 1.5vmin rgba(0,0,0,0.3);
  letter-spacing: 0.1em;
}
.chess-btn:hover { transform: translateY(-2px); box-shadow: 0 1vmin 2vmin rgba(0,0,0,0.4); }
.chess-btn:active { transform: translateY(0); }
.chess-btn-primary {
  background: linear-gradient(145deg, #ffd93d, #f0b400);
  color: #3d2e0a;
}
.chess-btn-secondary {
  background: linear-gradient(145deg, #51cf66, #2f9e44);
  color: white;
}
.chess-btn-tertiary {
  background: linear-gradient(145deg, #748ffc, #4263eb);
  color: white;
}
.chess-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ========== AI 讲解面板 ========== */
.chess-ai-panel {
  width: 100%;
  max-width: 90vmin;
  margin-top: 2vmin;
  padding: 2vmin 2.5vmin;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(244,213,141,0.25);
  border-radius: 2vmin;
  backdrop-filter: blur(8px);
}
.chess-ai-panel-title {
  font-size: 2.5vmin;
  color: #ffd93d;
  margin-bottom: 1vmin;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 1vmin;
}
.chess-ai-panel-title::before {
  content: '🤖';
  font-size: 3vmin;
}
.chess-ai-panel-content {
  font-size: 2.2vmin;
  line-height: 1.8;
  color: #f4e8d6;
  min-height: 5vmin;
  word-break: break-word;
}
.chess-ai-panel-content.chess-thinking::after {
  content: '正在思考中...';
  color: #ffd93d;
  animation: chess-blink 1s infinite;
}
@keyframes chess-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* ========== API 设置（隐藏式） ========== */
.chess-settings-toggle {
  position: fixed;
  top: 2vmin;
  right: 2vmin;
  width: 6vmin;
  height: 6vmin;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 3vmin;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.chess-settings-panel {
  position: fixed;
  top: 10vmin;
  right: 2vmin;
  width: 40vmin;
  background: rgba(30,20,10,0.95);
  border: 1px solid rgba(244,213,141,0.3);
  border-radius: 2vmin;
  padding: 2vmin;
  z-index: 101;
  display: none;
  backdrop-filter: blur(12px);
}
.chess-settings-panel.chess-show { display: block; }
.chess-settings-panel label {
  display: block;
  font-size: 2vmin;
  color: #f4d58d;
  margin-bottom: 0.5vmin;
}
.chess-settings-panel input {
  width: 100%;
  padding: 1vmin;
  font-size: 2vmin;
  border-radius: 0.8vmin;
  border: 1px solid rgba(244,213,141,0.3);
  background: rgba(255,255,255,0.1);
  color: #f4e8d6;
  margin-bottom: 1.5vmin;
  font-family: inherit;
}
.chess-settings-panel input:focus {
  outline: none;
  border-color: #ffd93d;
}
.chess-settings-panel .chess-hint-text {
  font-size: 1.8vmin;
  color: #888;
  margin-top: 1vmin;
  line-height: 1.5;
}

/* 响应式：竖屏手机 */
@media (max-aspect-ratio: 3/4) {
  .chess-board { width: 92vw; }
  .chess-piece-face { font-size: 11vw; }
  .chess-piece-back::after { font-size: 10vw; }
  .chess-title { font-size: 5vw; }
  .chess-turn-info { font-size: 3.5vw; }
  .chess-status-bar { font-size: 3.5vw; }
  .chess-btn { font-size: 4vw; padding: 2vw 5vw; }
  .chess-ai-panel-content { font-size: 3.5vw; }
  .chess-ai-panel-title { font-size: 4vw; }
}