/* =============================================================
   GAME: Go
   ============================================================= */
.board-go {
  --go-glow: #bfe8ff;
  width: min(calc(100vw - 56px), 560px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.go-stage {
  width: 100%; border-radius: 14px; padding: 4px; background: linear-gradient(160deg, #6b4520, #2a1a0a);
  box-shadow: 0 0 0 2px var(--go-glow), 0 0 26px rgba(191, 232, 255, .35);
}
.go-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.go-wood { fill: url(#go-grain); }
.go-vig { fill: url(#go-vig); pointer-events: none; }
.go-lines { fill: none; stroke: #4a3216; stroke-width: .45; stroke-linecap: square; }
.go-star { fill: #4a3216; }
.go-coord { font: 700 3.3px var(--font-body); fill: #6b4a22; pointer-events: none; }

.go-hit { fill: transparent; }
.go-pt { cursor: default; outline: none; }
.go-pt:focus-visible .go-hit { fill: rgba(80, 60, 255, .22); stroke: #6b3dff; stroke-width: .7; }
.go-stone { fill: transparent; pointer-events: none; transition: opacity .15s; }
.go-pt.b .go-stone { fill: url(#go-bs); }
.go-pt.w .go-stone { fill: url(#go-ws); stroke: rgba(90, 80, 60, .35); stroke-width: .18; }
.go-shd { fill: url(#go-sh); opacity: 0; pointer-events: none; }
.go-pt.b .go-shd, .go-pt.w .go-shd { opacity: 1; }
.go-pt.dead .go-shd { opacity: .3; }
.go-mark { fill: none; pointer-events: none; }
.go-pt.last .go-mark { stroke-width: .75; }
.go-pt.last.b .go-mark { stroke: #fff; }
.go-pt.last.w .go-mark { stroke: #111; }

/* hover ghost stone when it is your move */
.go-turn-1 .go-pt.empty, .go-turn-2 .go-pt.empty { cursor: pointer; }
.go-turn-1 .go-pt.empty:hover .go-stone { fill: #111; opacity: .4; }
.go-turn-2 .go-pt.empty:hover .go-stone { fill: #fff; opacity: .55; }

/* counting view: territory squares and dead stones */
.go-terr { fill: transparent; pointer-events: none; }
.go-pt.tb .go-terr { fill: #111; }
.go-pt.tw .go-terr { fill: #fff; stroke: #555; stroke-width: .2; }
.go-pt.dead .go-stone { opacity: .38; }
.go-scoring .go-pt.b, .go-scoring .go-pt.w { cursor: pointer; }
.go-scoring .go-pt.b:hover .go-stone, .go-scoring .go-pt.w:hover .go-stone { opacity: .6; }
.go-pt.b:not(.dead) .go-stone, .go-pt.w:not(.dead) .go-stone { animation: go-pop .16s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes go-pop { from { transform: scale(.6); opacity: .4; } }

.go-note { margin: 0; min-height: 1.4em; text-align: center; color: var(--muted); font-weight: 600; font-size: .92rem; }
.go-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.go-actions .btn { min-width: 118px; }
.go-resign.armed { box-shadow: inset 0 0 0 2px var(--t-red); color: #ffd0de; }
.go-count {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 8px 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: .92rem;
}
.go-count[hidden] { display: none; }
.go-count > span { display: inline-flex; align-items: center; gap: 6px; }
.go-count .dot { width: 14px; height: 14px; }
.go-dot.p1 { background: radial-gradient(circle at 35% 30%, #5b5870, #0c0b12 70%); box-shadow: 0 0 0 1px #6b6f8f; }
.go-dot.p2 { background: radial-gradient(circle at 35% 30%, #fff, #c9cbe0 75%); }
.go-caps { color: var(--muted); font-size: .8em; }