.frame {
  border-radius: var(--radius-board);
  background: var(--board-edge);
  padding: var(--frame);
  box-shadow: var(--shadow-board);
  width: max-content;
}
.grid {
  display: grid;
  grid-template-columns: var(--coord) repeat(8, var(--cell)) var(--coord-end);
  grid-template-rows: var(--coord) repeat(8, var(--cell)) var(--coord-end);
  /* マスは JS が作る。読み込み中に枠の黒だけが見えないよう、先に盤の緑を敷いておく（2026-11-13 站長「刷新能看到黑色」） */
  background: linear-gradient(135deg, var(--felt-a), var(--felt-b));
}
/* 座標は幅 0 の帯に置き、はみ出させて端のマスの角に刷る（2026-11-13 站長「一边粗一边细好丑」）。
   列 a〜h は上の段のマスの右上、行 1〜8 は左の列のマスの左上。石は 84% なので角は隠れない */
.coord {
  position: relative; z-index: 2; display: flex; overflow: visible; pointer-events: none;
  font: 700 11px var(--num); color: var(--coord-ink); line-height: 1;
}
.coord.file { height: 0; justify-content: flex-end; align-items: flex-start; padding: 3px 4px 0 0; }
.coord.rank { width: 0; justify-content: flex-start; align-items: flex-start; padding: 3px 0 0 4px; white-space: nowrap; }
.cells {
  grid-column: 2 / span 8;
  grid-row: 2 / span 8;
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
  background: linear-gradient(135deg, var(--felt-a), var(--felt-b));
  border-top: 1px solid var(--grid-line);
  border-left: 1px solid var(--grid-line);
}
.cell {
  width: var(--cell); height: var(--cell); padding: 0; border: 0; background: transparent;
  border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line);
  position: relative; display: flex; align-items: center; justify-content: center;
  cursor: pointer; perspective: calc(var(--cell) * 4);
}
.cell:disabled { cursor: default; }
.stone {
  width: 84%; height: 84%; border-radius: 50%; display: block;
}
.st-b { background: var(--stone-b); box-shadow: var(--shadow-stone-b); }
.st-w { background: var(--stone-w); box-shadow: var(--shadow-stone-w); }
.hint {
  width: 24%; height: 24%; border-radius: 50%; background: var(--dot); display: block;
}
.ring {
  width: 70%; height: 70%; border-radius: 50%; border: 3px solid var(--accent);
  background: transparent; display: block; box-sizing: border-box;
}
.last {
  position: absolute; width: 12%; height: 12%; border-radius: 50%; background: var(--last);
}
.stone.flip { animation: stone-flip 280ms linear both; animation-delay: calc(var(--flip-i) * 40ms); }
.stone.flip.from-w { animation-name: flip-from-w; }
.stone.flip.from-b { animation-name: flip-from-b; }
@keyframes flip-from-w {
  0% { transform: rotateY(0deg); background: var(--stone-w); }
  49% { transform: rotateY(90deg); background: var(--stone-w); }
  51% { transform: rotateY(90deg); background: var(--stone-b); }
  100% { transform: rotateY(180deg); background: var(--stone-b); }
}
@keyframes flip-from-b {
  0% { transform: rotateY(0deg); background: var(--stone-b); }
  49% { transform: rotateY(90deg); background: var(--stone-b); }
  51% { transform: rotateY(90deg); background: var(--stone-w); }
  100% { transform: rotateY(180deg); background: var(--stone-w); }
}
@media (prefers-reduced-motion: reduce) {
  .stone.flip { animation: none; }
}
@media (max-width: 767px) {
  /* 終局も盤は同じ大きさのまま（手机 v4：骨組みは段階で変えない） */
  .frame { border-radius: var(--radius-board); box-shadow: var(--shadow-board-m); }
  .coord { font-size: 9px; }
  .st-b { box-shadow: var(--shadow-stone-b-m); }
  .st-w { box-shadow: var(--shadow-stone-w-m); }
  .last { width: 14%; height: 14%; }
}