/* Go screen. Game-specific only; everything else comes from styles.css. */
.go-seats { margin-bottom: .6rem; }
.go-score { color: #fff; font-size: 1.05rem; }
.go-komi { color: var(--muted); }
.go-ok { color: var(--good); font-weight: 700; }
.go-chip {
  display: inline-block; width: .85em; height: .85em; border-radius: 50%; vertical-align: -.08em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.go-chip.go-black { background: radial-gradient(circle at 35% 30%, #666, #111 60%); }
.go-chip.go-white { background: radial-gradient(circle at 35% 30%, #fff, #d6d6d6 70%, #b5b5b5); }

/* the board: one button per intersection, lines drawn by each button's ::before (across) and ::after (down) */
.go-wrap { display: flex; justify-content: center; margin: .25rem 0 .6rem; }
.go-board {
  --go-pad: 14px;
  --go-line: #3d2b0e;
  --go-cell: min(calc((100vw - 2rem - 2 * var(--go-pad) - 6px) / var(--go-n, 9)), 44px);
  position: relative; display: grid; grid-template-columns: repeat(var(--go-n, 9), var(--go-cell)); grid-auto-rows: var(--go-cell);
  padding: var(--go-pad); border-radius: 6px; border: 2px solid #8a6326;
  background: linear-gradient(135deg, #e6bf6c, #d6a752 55%, #c9984a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  touch-action: manipulation;
}
.go-pt {
  position: relative; width: var(--go-cell); height: var(--go-cell); margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; cursor: default; -webkit-tap-highlight-color: transparent;
}
.go-pt::before, .go-pt::after { content: ''; position: absolute; background: var(--go-line); pointer-events: none; }
.go-pt::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-.5px); }
.go-pt::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-.5px); }
.go-pt.go-l::before { left: 50%; }
.go-pt.go-r::before { right: 50%; }
.go-pt.go-t::after { top: 50%; }
.go-pt.go-b::after { bottom: 50%; }
.go-pt.go-can:not(:disabled) { cursor: pointer; }
.go-pt:disabled { opacity: 1; }
.go-pt:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; z-index: 4; border-radius: 50%; }

.go-star {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--go-line); pointer-events: none;
}
.go-stone, .go-ghost { position: absolute; inset: 5%; border-radius: 50%; z-index: 1; pointer-events: none; }
.go-stone.go-black { background: radial-gradient(circle at 35% 30%, #6a6a6a, #151515 55%, #000); box-shadow: 1px 2px 3px rgba(0, 0, 0, .5); }
.go-stone.go-white { background: radial-gradient(circle at 35% 30%, #fff, #e4e4e4 60%, #b9b9b9); box-shadow: 1px 2px 3px rgba(0, 0, 0, .45); }
.go-stone.go-dead { opacity: .38; }
.go-ghost { opacity: 0; transition: opacity .1s; }
.go-ghost.go-black { background: #111; }
.go-ghost.go-white { background: #fff; }
@media (hover: hover) { .go-pt.go-can:not(:disabled):hover .go-ghost { opacity: .45; } }
.go-scoring .go-pt.go-can:not(:disabled):hover .go-stone { outline: 2px solid var(--gold); outline-offset: 1px; }

/* last move: a ring in the opposite color, centered on the stone */
.go-last {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid;
}
.go-black .go-last { border-color: #fff; }
.go-white .go-last { border-color: #111; }

/* scoring: a small square on each point of area (and on dead stones) in the owner's color */
.go-terr {
  position: absolute; left: 50%; top: 50%; width: 32%; height: 32%; transform: translate(-50%, -50%);
  z-index: 2; border-radius: 2px; pointer-events: none;
}
.go-terr.go-tb { background: #111; }
.go-terr.go-tw { background: #fff; box-shadow: 0 0 0 1px #555; }

/* ko: a hollow square on the point that cannot be retaken this turn */
.go-ko {
  position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; transform: translate(-50%, -50%);
  border: 2px solid var(--red); z-index: 2; pointer-events: none;
}

/* coordinates in the board's margin: letters along the bottom, numbers down the left */
.go-cx, .go-cy {
  position: absolute; font: 600 9px/1 var(--body); color: #5a3f12; pointer-events: none; user-select: none;
}
.go-cx {
  bottom: 0; height: var(--go-pad); display: flex; align-items: center;
  left: calc(var(--go-pad) + (var(--x) + .5) * var(--go-cell)); transform: translateX(-50%);
}
.go-cy {
  left: 0; width: var(--go-pad); text-align: center;
  top: calc(var(--go-pad) + (var(--y) + .5) * var(--go-cell)); transform: translateY(-50%);
}

.go-status p { margin: 0 0 .4rem; }
.go-last-line { text-align: center; }
.go-ko-line { text-align: center; color: var(--gold); font-weight: 600; }
.go-scorebox { margin: .5rem 0; padding: .75rem 1rem; }
.go-sline { margin: 0 0 .25rem; }
.go-sline b { color: var(--gold); font-size: 1.1rem; }
.go-lead { margin: .35rem 0 .25rem; font-weight: 800; font-size: 1.1rem; }
.go-hint { margin: 0; }
.go-actions .btn { min-width: 8rem; }