.opts { display: grid; gap: 8px; margin-bottom: 10px; }
.grp { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.grp[hidden] { display: none; }
.grp .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.status { margin: 6px 2px 10px; font-weight: 700; font-size: 17px; min-height: 1.6em; }
.actions { margin: 14px 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions .primary { grid-column: 1 / -1; }
.actions .primary[hidden] { display: none; }

.board {
  --line: #3b2511; position: relative; width: 100%; aspect-ratio: 1; container-type: size;
  background: #B8864B; border: 3px solid #4a2f19; border-radius: 10px; touch-action: manipulation;
}
.lines {
  position: absolute; inset: calc(100% / 30);
  background-image: linear-gradient(to right, #3b2511 1px, transparent 1px), linear-gradient(to bottom, #3b2511 1px, transparent 1px);
  background-size: calc(100% / 14) calc(100% / 14);
  border-right: 1px solid #3b2511; border-bottom: 1px solid #3b2511;
}
.pts { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); }
.pt { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; font: inherit; }
.pt.star::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); background: #3b2511; border-radius: 50%; }
.pt:hover:not(.b):not(.w):not(.locked)::after, .pt.pending::after {
  content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 2px dashed #1B0E02; background: rgba(255,255,255,.18);
}
.pt:focus-visible { outline: 3px solid #F2C94C; outline-offset: -2px; z-index: 3; }
.pt.b::after, .pt.w::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pt.b::after { background: radial-gradient(circle at 35% 30%, #4a4a4a, #050505 70%); }
.pt.w::after { background: radial-gradient(circle at 35% 30%, #ffffff, #d9d9d9 75%); border: 1px solid #8a8a8a; }
.pt.last::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; background: #F2C94C; z-index: 2; border: 1px solid #1B0E02; }
.pt.win::after { box-shadow: 0 0 0 3px #F2C94C, 0 0 10px 3px rgba(242,201,76,.8); }
.pt.win { z-index: 2; }
.pt.star.b:not(.last)::before, .pt.star.w:not(.last)::before { display: none; }
.pt.locked { cursor: default; }