/* 五子棋子站 · 对局区（棋盘、棋子、比分、棋谱、结果层） */
.play-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.board-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- 回合条 ---------- */
.turnbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}

.player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}

.player-card.active { border-color: var(--gold); background: rgba(201, 162, 39, .12); }
.player-meta { display: flex; flex-direction: column; line-height: 1.25; }
.player-meta strong { font-size: 14px; }
.player-meta em { font-size: 11px; color: var(--ink-soft); font-style: normal; }

.turn-status { display: flex; flex-direction: column; align-items: center; }
.turn-status #turn-label { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.move-count { font-size: 11px; color: var(--ink-soft); }

.disc { width: 26px; height: 26px; border-radius: 50%; display: inline-block; flex: none; }
.disc.small { width: 18px; height: 18px; }

.disc-black {
  background: radial-gradient(circle at 32% 28%, #6a6a6a, #17181a 62%, #0a0a0b);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

.disc-white {
  background: radial-gradient(circle at 32% 28%, #ffffff, #f0ece3 60%, #cfc7b8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.disc-draw { background: linear-gradient(135deg, #f0ece3 50%, #cfc7b8 50%); box-shadow: 0 2px 4px rgba(0, 0, 0, .18); }

/* ---------- 棋盘 ---------- */
.board-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  touch-action: manipulation;
}

.board:focus-visible { box-shadow: 0 0 0 3px rgba(201, 162, 39, .5); }
.board canvas { display: block; width: 100%; height: 100%; }
.stone-layer { position: absolute; inset: 0; pointer-events: none; }

.stone {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}

.stone.black {
  background: radial-gradient(circle at 32% 28%, #6e6e70 0%, #26282b 38%, #0d0e10 78%, #000 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .38), inset 0 -1px 2px rgba(255, 255, 255, .12);
}

.stone.white {
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f7f3ea 42%, #ded6c6 78%, #bdb3a1 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .22), inset 0 -2px 3px rgba(0, 0, 0, .10);
}

.stone.drop { animation: drop .22s cubic-bezier(.3, 1.4, .5, 1); }

@keyframes drop {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: .3; }
  70% { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.stone .mark { position: absolute; inset: 0; border-radius: 50%; display: none; }
.stone.last .mark { display: block; box-shadow: inset 0 0 0 2px rgba(185, 58, 50, .9); }

.stone.last::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--red);
}

.stone.win { animation: winPulse 1.2s ease-in-out infinite; z-index: 2; }
.stone.win .mark { display: block; box-shadow: inset 0 0 0 2px rgba(201, 162, 39, .95); }

@keyframes winPulse {
  0%, 100% { box-shadow: 0 3px 6px rgba(0, 0, 0, .3), 0 0 0 0 rgba(201, 162, 39, .55); }
  50% { box-shadow: 0 3px 6px rgba(0, 0, 0, .3), 0 0 0 7px rgba(201, 162, 39, 0); }
}

.ghost {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .38;
}

.ghost.black { background: radial-gradient(circle at 32% 28%, #6e6e70, #0d0e10 80%); }
.ghost.white { background: radial-gradient(circle at 32% 28%, #ffffff, #cfc7b8 85%); }

.cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 4px;
  border: 2px solid var(--red);
  pointer-events: none;
  animation: blink 1.1s steps(2, end) infinite;
}

@keyframes blink { 50% { opacity: .25; } }

/* ---------- 按钮 ---------- */
.controls { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: var(--shadow-sm);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background: linear-gradient(160deg, var(--red), var(--red-deep)); border-color: var(--red-deep); color: #fff8ec; }
.btn-ghost { background: transparent; }

/* ---------- 侧栏 ---------- */
.side { display: flex; flex-direction: column; gap: 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.card h2 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 2px;
  font-family: var(--serif);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.hint { font-size: 11px; color: var(--ink-soft); font-family: inherit; letter-spacing: 0; }

.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .02);
}

.score-item b { font-size: 20px; font-family: var(--serif); }
.score-item em { font-size: 11px; color: var(--ink-soft); font-style: normal; }

.movelog { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; font-size: 13px; }
.movelog li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.movelog li:hover { background: rgba(201, 162, 39, .14); }
.movelog li.current { background: rgba(185, 58, 50, .12); }
.movelog .no { width: 30px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.movelog .pos { font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.empty { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }

/* ---------- 结果 / 规则浮层 ---------- */
.result {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(44, 42, 38, .42);
  backdrop-filter: blur(2px);
  z-index: 40;
  animation: fade .18s ease;
}

.result[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

.result-card {
  width: min(90vw, 380px);
  background: var(--card);
  border-radius: 18px;
  padding: 26px 24px 20px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  animation: pop .22s cubic-bezier(.3, 1.3, .5, 1);
}

@keyframes pop { from { transform: scale(.9); opacity: 0; } }

.result-disc { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 12px; }
.result-card h2 { margin: 0 0 6px; font-family: var(--serif); letter-spacing: 3px; }
.result-card p { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); }
.result-actions { display: flex; gap: 10px; justify-content: center; }
.rules-list { text-align: left; margin: 0 0 18px; padding-left: 20px; font-size: 13px; line-height: 1.9; }

/* ---------- 响应式（务必置于末尾） ---------- */
@media (max-width: 900px) {
  .play-wrap { grid-template-columns: minmax(0, 1fr); }
  .side { flex-direction: row; flex-wrap: wrap; }
  .side .card { flex: 1 1 260px; }
  .movelog { max-height: 180px; }
}

@media (max-width: 560px) {
  .turnbar { padding: 8px 10px; gap: 6px; }
  .player-meta em { display: none; }
}