/* ともだち囲碁: 木目の碁盤に、縦横の線が交わる点(交点)に黒白の碁石を置く */
.go {
  --go-n: 9;
  --go-cell: min(calc((100vw - 52px) / var(--go-n)), 52px);
  --go-wood-1: #e8bd72;
  --go-wood-2: #d8a654;
  --go-line: #4a2e10;
  --go-stone-b: radial-gradient(circle at 32% 28%, #5c534a 0%, #221c17 45%, #0c0906 100%);
  --go-stone-w: radial-gradient(circle at 32% 28%, #ffffff 0%, #f5efe4 55%, #d6cab5 100%);
}
@media (min-width: 821px) {
  .go {
    --go-cell: clamp(22px, calc((100dvh - 300px) / var(--go-n)), 58px);
  }
}

/* トップの碁石マーク */
.go-hero-stones {
  width: 92px; height: 68px; margin: 0 auto 10px; position: relative;
}
.go-hero-stones span {
  position: absolute; width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 6px 14px rgba(40, 20, 5, .3), inset 0 -3px 0 rgba(0, 0, 0, .35);
}
.go-hero-stones .b { left: 4px; top: 8px; background: var(--go-stone-b); z-index: 2; }
.go-hero-stones .w {
  right: 4px; top: 2px; background: var(--go-stone-w); z-index: 1;
  box-shadow: 0 6px 14px rgba(40, 20, 5, .22), inset 0 -3px 0 rgba(120, 100, 70, .35), 0 0 0 1px rgba(60, 40, 20, .15);
}

.go-mode-stone, .go-logo-stone {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--go-stone-b);
  box-shadow: 0 2px 4px rgba(40, 20, 5, .25), inset 0 -2px 0 rgba(0, 0, 0, .35);
}
.go-mode-stone.white {
  background: var(--go-stone-w);
  box-shadow: 0 2px 4px rgba(40, 20, 5, .2), inset 0 -2px 0 rgba(120, 100, 70, .35), 0 0 0 1px rgba(60, 40, 20, .15);
}
.go-mode-stone.half, .go-logo-stone {
  background: linear-gradient(135deg, #1a1410 50%, #f5efe4 50%);
  box-shadow: 0 2px 4px rgba(40, 20, 5, .25), 0 0 0 1px rgba(60, 40, 20, .25);
}
.go-logo-stone { width: 22px; height: 22px; }
.go-badge {
  font: 700 12px/1 var(--font-ui); color: var(--muted); background: var(--bg-2);
  padding: 4px 8px; border-radius: 999px; margin-left: 2px;
}

/* トップの盤サイズ選択バー */
.go-size-bar {
  max-width: 1000px; margin: 0 auto 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.go-size-bar .seg-label { margin: 0; font-size: 14px; color: var(--ink); }
.go-size-bar .seg { flex: 1; min-width: 260px; }

/* 碁盤の額縁と座標 */
.go-frame {
  padding: 6px 10px 10px 6px; border-radius: 12px; align-self: center;
  background:
    repeating-linear-gradient(93deg, rgba(120, 72, 20, .06) 0 2px, transparent 2px 13px, rgba(120, 72, 20, .04) 13px 15px, transparent 15px 26px),
    linear-gradient(150deg, var(--go-wood-1), var(--go-wood-2));
  border: 2px solid #7a4b19;
  box-shadow: 0 3px 0 #6e4319, 0 14px 30px rgba(60, 30, 5, .28);
}
.go-files, .go-ranks {
  display: flex; color: #4a2e10; font: 700 11px/1 var(--font-ui); user-select: none;
}
.go-files { height: 16px; align-items: center; padding-left: 20px; }
.go-files span { width: var(--go-cell); text-align: center; }
.go-row { display: flex; }
.go-ranks { flex-direction: column; width: 20px; }
.go-ranks span { height: var(--go-cell); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .go[data-size="19"] .go-files, .go[data-size="19"] .go-ranks { font-size: 9px; }
  .go[data-size="19"] .go-files { padding-left: 15px; height: 13px; }
  .go[data-size="19"] .go-ranks { width: 15px; }
  .go[data-size="19"] .go-frame { padding: 4px 6px 6px 4px; }
}

/* 碁盤本体: 各セルの中心で縦線と横線が交わる */
.go-board {
  display: grid;
  grid-template-columns: repeat(var(--go-n), var(--go-cell));
  grid-template-rows: repeat(var(--go-n), var(--go-cell));
  position: relative;
}
.go-pt {
  all: unset; position: relative; display: grid; place-items: center; cursor: default;
}
/* 横線 */
.go-pt::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: var(--go-line); transform: translateY(-.5px); pointer-events: none;
}
/* 縦線 */
.go-pt::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--go-line); transform: translateX(-.5px); pointer-events: none;
}
/* 盤の四辺では線を交点の中心で止める */
.go-pt.edge-l::before { left: 50%; }
.go-pt.edge-r::before { right: 50%; }
.go-pt.edge-t::after { top: 50%; }
.go-pt.edge-b::after { bottom: 50%; }
/* 外周の線をほんの少し太くして碁盤らしく引き締める */
.go-pt.edge-t.edge-l::before, .go-pt.edge-t:not(.edge-l):not(.edge-r)::before, .go-pt.edge-t.edge-r::before,
.go-pt.edge-b.edge-l::before, .go-pt.edge-b:not(.edge-l):not(.edge-r)::before, .go-pt.edge-b.edge-r::before {
  height: 1.5px;
}
.go-pt.edge-l::after, .go-pt.edge-r::after {
  width: 1.5px;
}

.go-pt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 50%; z-index: 4; }
.go-pt.can { cursor: pointer; }

/* 星(目印の黒点) */
.go-star {
  position: absolute; width: clamp(5px, calc(var(--go-cell) * .18), 8px); height: clamp(5px, calc(var(--go-cell) * .18), 8px);
  border-radius: 50%; background: var(--go-line); z-index: 1; pointer-events: none;
}

/* ホバー時の半透明の石(PC) */
@media (hover: hover) {
  .go-pt.can:hover .go-hover {
    width: 86%; height: 86%; border-radius: 50%; opacity: .42; z-index: 2; pointer-events: none;
  }
  .go-pt.can-b:hover .go-hover { background: #0c0906; }
  .go-pt.can-w:hover .go-hover { background: #ffffff; box-shadow: 0 0 0 1px rgba(40, 20, 5, .4); }
}

/* 碁石 */
.go-stone {
  width: 90%; height: 90%; border-radius: 50%; position: relative; z-index: 2; pointer-events: none;
  box-shadow: 0 2.5px 4px rgba(0, 0, 0, .42), inset 0 -2px 0 rgba(0, 0, 0, .3);
}
.go-stone.b { background: var(--go-stone-b); }
.go-stone.w {
  background: var(--go-stone-w);
  box-shadow: 0 2.5px 4px rgba(0, 0, 0, .32), inset 0 -2px 0 rgba(120, 100, 70, .35), 0 0 0 .5px rgba(60, 40, 20, .2);
}
.go-stone.placed { animation: go-drop .2s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes go-drop { from { transform: scale(1.28); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 直前の手の印(石の真ん中に小さな丸) */
.go-pt.last .go-stone::after {
  content: ''; position: absolute; inset: 32%; border-radius: 50%;
  box-shadow: inset 0 0 0 2px #e05038;
}
.go-pt.last .go-stone.w::after { box-shadow: inset 0 0 0 2px #c8321b; }

/* スマホで点が小さいときの仮置きの石(2タップ確認用) */
.go-stone.preview {
  opacity: .68; outline: 2.5px solid var(--accent); outline-offset: 1px;
  animation: go-pulse 1s ease-in-out infinite;
}
@keyframes go-pulse { 50% { opacity: .42; } }

/* 終局時の地(囲んだ空き点)の小さな四角い印 */
.go-terr {
  width: 32%; height: 32%; border-radius: 2px; position: relative; z-index: 2; pointer-events: none;
}
.go-terr.b { background: #14100c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.go-terr.w { background: #fbf8f1; box-shadow: 0 0 0 1.5px rgba(30, 20, 10, .65); }

/* 仮置き確定バー */
.go-confirm {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--accent); border-radius: 12px;
  padding: 8px 12px; box-shadow: var(--shadow); align-self: center;
}
.go-confirm-coord { font: 800 15px var(--font-piece); min-width: 3em; text-align: center; }

/* 対局者欄(アゲハマ表示) */
.go .player { padding: 8px 14px 8px 10px; justify-content: space-between; }
.go .pinfo { width: auto; flex: 1; }
.go-avatar { font-size: 0; }
.go-avatar.b { background: var(--go-stone-b); }
.go-avatar.w { background: var(--go-stone-w); box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .2); }
.go .score { display: flex; align-items: baseline; gap: 4px; color: var(--muted); }
.go-cap-label { font-size: 11px; margin-right: 2px; }
.go .score .num { font: 800 26px/1 var(--font-piece); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }
.go .score .unit { font-size: 12px; }
.go .table { width: calc(var(--go-cell) * var(--go-n) + 38px); }
@media (max-width: 820px) { .go .table { width: 100%; } }

/* パスボタン付近のルール説明 */
.go-pass-note {
  margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-2);
  font-size: 12px; color: var(--muted); line-height: 1.65;
}
.go-pass-note strong { color: var(--ink); }

/* ダークモードでも黒い石の輪郭が消えないようにする */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .go .go-avatar.b,
  :root:not([data-theme="light"]) .go .go-mode-stone:not(.white):not(.half) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
  }
}
:root[data-theme="dark"] .go .go-avatar.b,
:root[data-theme="dark"] .go .go-mode-stone:not(.white):not(.half) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}