#board {
  grid-template: repeat(15, 1fr) / repeat(15, 1fr);
  aspect-ratio: 1;
}
#board::before {
  content: '';
  position: absolute;
  inset: calc(100% / 30);
  background-image: linear-gradient(90deg, #886943 1px, transparent 1px),
                    linear-gradient(#886943 1px, transparent 1px);
  background-size: calc(100% / 14) calc(100% / 14);
  box-shadow: 1px 1px 0 #886943;
}
.square { min-width: 0; touch-action: manipulation; }
.square:disabled { opacity: 1; cursor: default; }
.stone::before {
  content: '';
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 2px 3px #50331666;
  background: radial-gradient(at 32% 22%, #5d6056, #20241e 72%);
}
.white-stone::before { background: radial-gradient(at 32% 22%, white, #f6f1e4 65%, #ccc5b6); }
.recent-stone::after, .win-stone::after {
  content: ''; position: absolute; width: 20%; aspect-ratio: 1;
  border-radius: 50%; background: #d98b54;
}
.win-stone::after { background: #d98b54; width: 33%; border: 1px solid #7f411f; }