/* Reusable visual skin. Rules and point placement remain with the host game. */
.go-board {
  --wood-color: #e9c18a;
  --wood-light: #f3d6a9;
  --wood-edge: #b8844b;
  --wood-edge-dark: #956233;
  --grid-ink: #49371f;
  --point-size: 17%;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  border: 1px solid #bc945c;
  border-radius: 4px;
  background: linear-gradient(115deg, var(--wood-light), var(--wood-color) 43%, var(--wood-color) 76%, color-mix(in srgb, var(--wood-color) 94%, #927445));
  box-shadow: inset 0 1px 1px #fff5, inset 1px 0 1px #fff3,
    0 2px 0 var(--wood-edge), 0 5px 0 var(--wood-edge),
    0 7px 0 var(--wood-edge-dark), 0 9px 2px #4d301d24,
    7px 17px 19px #442e2026, 12px 35px 52px #5b40211a;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.go-board[data-wood="light"] { --wood-color: #efd7aa; --wood-light: #f8e5bf; --wood-edge: #c0a077; --wood-edge-dark: #a4835c; --grid-ink: #493d2b; border-color: #c5a777; }
.go-board[data-wood="walnut"] { --wood-color: #bd9568; --wood-light: #d4b187; --wood-edge: #93663c; --wood-edge-dark: #6f492a; --grid-ink: #322518; border-color: #997044; }
.go-board::before { content: ""; position: absolute; z-index: -2; left: -1px; right: -1px; top: calc(100% - 1px); height: 8px; border-radius: 0 0 3px 3px; background: url("./assets/wood-grain-photo.webp") center bottom / 100% auto, var(--wood-edge); background-blend-mode: multiply; box-shadow: inset 0 1px 1px #fff3, inset 0 -2px 1px var(--wood-edge-dark); pointer-events: none; }
.go-grain {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: url("./assets/wood-grain-photo.webp") center / 100% 100%;
  mix-blend-mode: multiply;
  opacity: .84;
  pointer-events: none;
}
.go-board::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: linear-gradient(135deg, #fff8df10, transparent 35%, #80542504); box-shadow: inset 0 0 0 1px #fff3, inset 0 2px 3px #fff2, inset 0 -2px 4px #86532320; pointer-events: none; }
.go-grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.go-grid path { fill: none; stroke: var(--grid-ink); stroke-width: 1.8; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.go-grid circle { fill: var(--grid-ink); }
.go-points { position: absolute; inset: 0; }
.go-point { position: absolute; z-index: 1; width: var(--point-size); aspect-ratio: 1; padding: 0; transform: translate(-50%, -50%); background: none; border: 0; border-radius: 50%; cursor: default; -webkit-tap-highlight-color: transparent; }
.go-point.is-selectable, .go-point.is-target, .go-point.is-placement { cursor: pointer; }
.go-point:focus-visible { outline: 2px solid #9c452e; outline-offset: -1px; }
.go-stone {
  --stone-shadow: 0 .10cqi .14cqi #18181780,
    .30cqi .52cqi .55cqi #241e1650,
    .53cqi .92cqi 1.10cqi #30241726;
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  border-radius: 50%;
  font-style: normal;
  transition: transform 160ms ease, box-shadow 160ms ease;
  pointer-events: none;
  box-shadow: var(--stone-shadow);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.go-stone.wolf {
  --stone-face: url("./assets/stone-shell-black-v2.png");
  background-image: var(--stone-face, radial-gradient(ellipse at 34% 24%, #555 0%, #333 30%, #141414 82%, #101010));
}
.go-stone.sheep {
  --stone-face: url("./assets/stone-shell-white-v2.png");
  inset: 1%;
  background-image: var(--stone-face, radial-gradient(ellipse at 34% 24%, #fff 0%, #f4f4f4 38%, #d6d6d6 82%, #bdbdbd));
}
/* Keep touch targets generous while reducing the visible stone diameter. */
.go-point .go-stone { inset: 6.2%; }
.go-point .go-stone.sheep { inset: 7.2%; }
.go-stone::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.go-stone.sheep::before { background: url("./assets/white-shell.svg") center / 100% 100%; transform: rotate(var(--shell-angle, 12deg)); opacity: .22; }
.go-stone-label { z-index: 1; font: 500 clamp(16px, 4.4cqi, 35px)/1 "KaiTi", "STKaiti", "SimSun", serif; color: #f3ecd7d4; text-shadow: 0 1px 1px #0005; }
.sheep .go-stone-label { color: #514f45c4; text-shadow: 0 1px 1px #fff; }
.go-board:not(.show-labels) .go-stone-label { display: none; }
@media (hover: hover) { .go-point.is-selectable:not(.is-selected):hover .go-stone { filter: brightness(1.07); } }
.go-point.is-selected { z-index: 2; }
/* The selected edge belongs to the stone, so its center never drifts. */
.go-point.is-selected .go-stone { transform: none; outline: 2px solid #a7733d; outline-offset: 2px; box-shadow: 0 0 0 2px #fff2d76b, 0 0 8px 3px #e7bc7050, var(--stone-shadow); }
.go-point.is-selected:focus-visible { outline: none; }
.go-last-marker { position: absolute; width: 17%; aspect-ratio: 1; left: 41.5%; top: 40%; border: 1.5px solid #ded9c6b0; border-radius: 50%; pointer-events: none; z-index: 2; }
.sheep .go-last-marker { border-color: #93462ec9; }
.show-labels .go-last-marker { left: 67%; top: 21%; width: 10%; }
.go-point.is-selected .go-last-marker { display: none; }
.go-hint { position: absolute; inset: 37%; border-radius: 50%; border: 1px solid #5e6540; background: #78815b80; box-shadow: 0 0 0 5px #fbf0d326; pointer-events: none; }
.go-point.is-capture .go-stone { box-shadow: 0 0 0 2px #a45940b0, 0 0 0 5px #e5b28e38, 3px 6px 6px #392b2050; }
.go-point.is-capture .go-hint { z-index: 3; inset: 39%; background: #a85c41; border-color: #f7ebd9; }
.go-placement-ghost { position: absolute; inset: 6.2%; border-radius: 50%; opacity: 0; pointer-events: none; }
.go-point.is-placement:hover .go-placement-ghost { opacity: .24; }
.go-placement-ghost.wolf { background: #1c211b; }
.go-placement-ghost.sheep { inset: 7.2%; background: #fffdf4; box-shadow: inset 0 0 0 1px #70674a; }
.go-point.is-moving { z-index: 5; }
.go-stone.is-in-motion { z-index: 1; transition: none; will-change: transform; }
.go-point.is-moving .go-last-marker { visibility: hidden; }
.go-motion-shadow { position: absolute; z-index: 0; border-radius: 50%; background: #2c241c55; filter: blur(2px); pointer-events: none; }
.go-captured-ghost { position: absolute; z-index: 3; width: var(--point-size); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.go-captured-ghost .go-stone.sheep { inset: 7.2%; }
.go-coordinate { position: absolute; transform: translate(-50%, -50%); color: color-mix(in srgb, var(--grid-ink) 61%, transparent); font: 400 clamp(9px, 1.9cqi, 12px) Georgia, serif; pointer-events: none; }

/* Surface maps provide shape and sheen; these layers only add material grain. */
[data-stones="ceramic"] .go-stone.wolf { --stone-face: url("./assets/stone-ceramic-black-v2.png"); }
[data-stones="ceramic"] .go-stone.sheep { --stone-face: url("./assets/stone-ceramic-white-v2.png"); }
[data-stones="matte"] .go-stone.wolf { --stone-face: url("./assets/stone-matte-black-v2.png?v=20261005-10"); }
[data-stones="matte"] .go-stone.sheep { --stone-face: url("./assets/stone-matte-white-v2.png?v=20261005-10"); }
[data-stones="jade"] .go-stone.wolf { --stone-face: url("./assets/stone-jade-black-v2.png"); }
[data-stones="jade"] .go-stone.sheep { --stone-face: url("./assets/stone-jade-white-v2.png"); }
[data-stones="ceramic"] .go-stone::before { background: none; }
[data-stones="matte"] .go-stone::before { background: url("./assets/stone-grain.svg") center / 100% 100%; transform: rotate(var(--shell-angle, 0deg)); mix-blend-mode: soft-light; opacity: .17; }
[data-stones="jade"] .go-stone::before { background: url("./assets/jade-veins.svg") center / 100% 100%; transform: rotate(var(--shell-angle, 12deg)); filter: grayscale(1); mix-blend-mode: soft-light; opacity: .32; }
/* A simple comparison mode; dimensional stones are the default. */
[data-volume="flat"] .go-stone { --stone-shadow: 0 0 0 1px #38383838; }
[data-volume="flat"] .go-stone.wolf { background-image: none; background-color: #252525; }
[data-volume="flat"] .go-stone.sheep { background-image: none; background-color: #f4f4f2; }
@container (max-width: 400px) { .go-grid path { stroke-width: 1.6; } }
@media (prefers-reduced-motion: reduce) { .go-stone { transition: none; } }

.go-board[data-wood="hinoki"] { --wood-color:#f4e0ba; --wood-light:#fcf0d7; }.go-board[data-wood="honey"] { --wood-color:#cd9e59; --wood-light:#e9c78c; }.go-board[data-wood="inkwood"] { --wood-color:#8b8172; --wood-light:#c6bdb0; --grid-ink:#302c25; }