* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #f5e6c8;
  font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
  display: flex;
  justify-content: center;
  padding: 20px;
}

#app {
  text-align: center;
}

h1 {
  font-size: 28px;
  color: #5a3e1b;
  margin-bottom: 10px;
}

#status-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
}

#turn-indicator {
  font-size: 20px;
  font-weight: bold;
  padding: 6px 16px;
  border-radius: 6px;
  background: #eee;
}

#reset-btn {
  padding: 6px 18px;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #5a3e1b;
  background: #fff;
  border-radius: 6px;
}
#reset-btn:hover {
  background: #5a3e1b;
  color: #fff;
}

/* ---- 棋盘 ---- */
#board-container {
  display: inline-block;
  background: #f0d9a0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

#board {
  display: grid;
  grid-template-columns: repeat(9, 56px);
  grid-template-rows: repeat(10, 56px);
  position: relative;
  background: #f0d9a0;
}

/* 棋盘线 — 用 SVG 画 */
#board-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.cell {
  width: 56px;
  height: 56px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---- 棋子 ---- */
.piece {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #5a3e1b;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  position: relative;
  background: radial-gradient(circle at 35% 35%, #fff9e6, #f5e1a0);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  transition: box-shadow 0.15s, transform 0.1s;
  user-select: none;
}
.piece:hover {
  transform: scale(1.05);
}
.piece.red {
  color: #c0392b;
  border-color: #c0392b;
}
.piece.black {
  color: #1a1a2e;
  border-color: #1a1a2e;
}

/* 被选中高亮 */
.piece.selected {
  box-shadow: 0 0 0 4px #f1c40f, 2px 2px 8px rgba(0,0,0,0.4);
  transform: scale(1.1);
}

/* 可走位置标记 */
.move-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.7);
  position: absolute;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  animation: pulse 1s infinite alternate;
}
@keyframes pulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.3); opacity: 1; }
}

/* 吃掉标记 (可吃对方棋子) */
.move-marker.capture {
  background: rgba(231, 76, 60, 0.7);
}

#message {
  margin-top: 12px;
  font-size: 20px;
  font-weight: bold;
  min-height: 30px;
  color: #c0392b;
}