/* =====================================================================
   style.css — 五目並べ ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* モード・手番切替（手本のモード切替を流用） */
.sg-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: var(--sg-space-1, 4px);
}
.sg-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}

/* 操作ボタン群 */
.gomoku-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.gomoku-actions .sg-btn {
  padding: 8px 14px;
  font-size: 0.95rem;
}

/* ステータス（手番・勝敗） */
.gomoku-status {
  min-height: 1.4em;
  margin: 4px 0 12px;
  text-align: center;
  font-size: 0.98rem;
  font-weight: 600;
}
.gomoku-status.is-ok { color: #067647; }
.gomoku-status.is-warn { color: #b54708; }

/* 戦績 */
.gomoku-record-wrap {
  text-align: center;
  font-size: 0.9rem;
  color: var(--sg-muted, #777);
}

/* ---------- 盤面（モバイルは横スクロール可） ---------- */
.gomoku-board-wrap {
  overflow-x: auto;
  display: flex;
  justify-content: center;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}
.gomoku-board {
  --gomoku-size: 15;
  --gcell: clamp(20px, 5.6vw, 32px);
  display: grid;
  grid-template-columns: repeat(var(--gomoku-size), var(--gcell));
  grid-template-rows: repeat(var(--gomoku-size), var(--gcell));
  background: var(--sg-goban, #e3b96b);
  border: 2px solid #a97b2f;
  border-radius: 4px;
  flex: 0 0 auto;
}

.gomoku-cell {
  position: relative;
  width: var(--gcell);
  height: var(--gcell);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.gomoku-cell:disabled {
  cursor: default;
}

/* 交点を表す格子線（各セルの中央に十字を描く） */
.gomoku-cell::before,
.gomoku-cell::after {
  content: "";
  position: absolute;
  background: #6b4f1d;
  pointer-events: none;
}
/* 横線 */
.gomoku-cell::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
}
/* 縦線 */
.gomoku-cell::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
}
/* 盤の端では線を半分だけにして枠からはみ出さないように見せる */
.gomoku-cell.edge-left::before { left: 50%; }
.gomoku-cell.edge-right::before { right: 50%; }
.gomoku-cell.edge-top::after { top: 50%; }
.gomoku-cell.edge-bottom::after { bottom: 50%; }

/* 石 */
.gomoku-stone {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  display: block;
  font-size: 0; /* テキスト記号はスクリーン非表示だが読み上げ用に保持 */
  line-height: 0;
  box-sizing: border-box;
}
.gomoku-cell.is-black .gomoku-stone {
  background: radial-gradient(circle at 34% 30%, #6b6b6b, #111 65%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.gomoku-cell.is-white .gomoku-stone {
  background: radial-gradient(circle at 34% 30%, #fff, #d3d6dc 78%);
  border: 1px solid #9aa0ab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 最後に置いた石を強調 */
.gomoku-cell.is-last .gomoku-stone {
  outline: 2px solid var(--sg-primary, #3b5bdb);
  outline-offset: 1px;
}

/* 空点のホバー／フォーカス（打てる場所を示す） */
.gomoku-cell.is-empty:not(:disabled):hover .gomoku-stone {
  background: rgba(59, 91, 219, 0.18);
}
.gomoku-cell:focus-visible {
  outline: 2px solid var(--sg-primary, #3b5bdb);
  outline-offset: -2px;
  z-index: 2;
}

/* 早見表 */
.sg-chart {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px 16px;
}
.sg-chart-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--sg-border, #e5e7eb);
}
.sg-chart-row__key {
  flex: 0 0 6em;
  font-weight: 600;
}
.sg-chart-row__val {
  flex: 1 1 auto;
  color: var(--sg-muted, #555);
}