/* The gomoku page: the board and the move log. Colours come from style.css's tokens. */
.gomoku-body { align-items: start; }

.board {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  width: min(100%, 462px);
  aspect-ratio: 1;
  margin: 16px 0;
  padding: 6px;
  background: #d9b97a;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.cell {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
}

/* the grid lines: one horizontal and one vertical line through every point's centre */
.cell::before, .cell::after {
  content: "";
  position: absolute;
  background: #6b5330;
  pointer-events: none;
}
.cell::before { left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; }
.cell::after { top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; }

.cell.black { background: radial-gradient(circle at 50% 50%, #17191e 0 44%, transparent 46%); }
.cell.white { background: radial-gradient(circle at 50% 50%, #f8f8f4 0 40%, #5d636d 41% 44%, transparent 46%); }
.cell.black::before, .cell.black::after, .cell.white::before, .cell.white::after { display: none; }
.cell.last { box-shadow: inset 0 0 0 2px var(--stamp); border-radius: 50%; }
.cell:disabled { cursor: default; opacity: 1; }
.cell:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; z-index: 1; }

.game-status { margin: 0 0 12px; font: 700 22px/1.25 var(--mono); color: var(--ink); }

.move-log {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
  max-height: 22em;
  overflow-y: auto;
  font: 13px/1.6 var(--mono);
}
.move-log li { padding: 2px 0; border-bottom: 1px solid var(--rule); }
.move-point { font-weight: 600; }
.move-meta { color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .board * { transition: none; }
}

/* a cell you cannot play now: still focusable (arrow keys cross stones), no pointer */
.cell.closed { cursor: default; }

/* the short status line screen readers announce (the move log itself is not re-read on every render) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}