/* gomoku: rules used only by the gomoku pages (loaded after base.css). */
.big-board-enabled .gomoku-board { width: 440px; max-width: none; margin: 0; }

/* Gomoku board: a fixed 15x15 intersection grid, identical technique
   to Go's own board (percentage-positioned lines/points rather than a
   float grid, since stones sit ON intersections, not inside squares) -
   just without Go's variable board size or hoshi star points. */
.gomoku-board {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: var(--square-light);
  border: 3px solid var(--border);
  box-sizing: border-box;
}

.gomoku-grid {
  position: relative;
  width: 100%;
  height: 100%;
}

.gomoku-line {
  position: absolute;
  background: var(--border);
}

.gomoku-line-h {
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-1px);
}

.gomoku-line-v {
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
}

.gomoku-point {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}

.gomoku-stone {
  position: absolute;
  top: 4%;
  right: 4%;
  bottom: 4%;
  left: 4%;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.gomoku-stone-black {
  background: #111;
  border: 1px solid #000;
}

.gomoku-stone-white {
  background: #fdfdfd;
  border: 2px solid var(--border);
}

.gomoku-point.last-move .gomoku-stone::after {
  content: "";
  position: absolute;
  top: -22%;
  right: -22%;
  bottom: -22%;
  left: -22%;
  border: 2px solid var(--accent);
  border-radius: 50%;
}