.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 2px; font-weight: 700; font-size: 17px; min-height: 1.6em; }
.caps { margin: 0 2px 10px; color: var(--muted); font-size: 14px; }
.actions { margin: 14px 0 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scorebox .actions { grid-template-columns: 1fr 1fr; margin: 8px 0 0; }
.scorebox { margin-top: 12px; padding: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); }
.scorebox[hidden] { display: none; }
.scorebox p { margin: 0; line-height: 1.7; }

.board { 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% / 18);
  background-image: linear-gradient(to right, #3b2511 1px, transparent 1px), linear-gradient(to bottom, #3b2511 1px, transparent 1px);
  background-size: calc(100% / 8) calc(100% / 8);
  border-right: 1px solid #3b2511; border-bottom: 1px solid #3b2511;
}
.pts { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); }
.pt { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; font: inherit; min-width: 0; min-height: 0; }
.pt.star::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16%; height: 16%; transform: translate(-50%, -50%); background: #3b2511; border-radius: 50%; }
.pt:hover:not(.b):not(.w):not(.locked)::after { content: ""; position: absolute; inset: 12%; 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: 6%; 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.star.b::before, .pt.star.w::before { display: none; }
.pt.last::before { display: block; content: ""; position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%); border-radius: 50%; background: #F2C94C; z-index: 2; border: 1px solid #1B0E02; }
.pt.dead::after { opacity: .45; }
.pt.dead::before { content: "✕"; display: grid; place-items: center; position: absolute; inset: 0; width: auto; height: auto; transform: none; background: none; border: 0; border-radius: 0; font-size: 7cqw; font-weight: 900; line-height: 1; z-index: 2; color: #E5694F; text-shadow: 0 0 2px #fff; }
.pt.tb::before, .pt.tw::before { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 24%; height: 24%; transform: translate(-50%, -50%); border-radius: 2px; z-index: 1; }
.pt.tb::before { background: #050505; }
.pt.tw::before { background: #fff; border: 1px solid #555; }
.pt.locked { cursor: default; }