.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);
  grid-template-rows: var(--coord) repeat(8, var(--cell)) var(--coord);
}
.coord {
  display: flex; align-items: center; justify-content: center;
  font: 500 12px var(--num); color: var(--coord-ink);
}
.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) {
  .frame { border-radius: var(--radius-card); box-shadow: var(--shadow-board-m); }
  .coord { font-size: 10px; }
  .st-b { box-shadow: var(--shadow-stone-b-m); }
  .st-w { box-shadow: var(--shadow-stone-w-m); }
  .last { width: 14%; height: 14%; }
  body[data-phase="result"] .frame {
    --cell: 26px;
    --coord: 0px;
    --frame: 4px;
    box-shadow: none;
    border-radius: 12px;
  }
  body[data-phase="result"] .coord { visibility: hidden; }
}