/* =====================================================================
   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;
}

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

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

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

/* ---------- 盤面（3×3・モバイルでタップしやすい大きめのマス） ---------- */
.ttt-board-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.ttt-board {
  --tcell: clamp(72px, 26vw, 108px);
  display: grid;
  grid-template-columns: repeat(3, var(--tcell));
  grid-template-rows: repeat(3, var(--tcell));
  gap: 6px;
  background: var(--sg-border, #c7ccd6);
  border: 3px solid var(--sg-border, #c7ccd6);
  border-radius: 10px;
}

.ttt-cell {
  width: var(--tcell);
  height: var(--tcell);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: var(--sg-card-bg, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.ttt-cell:disabled {
  cursor: default;
}

/* 印（○ / ×）。文字サイズはマスに追従。 */
.ttt-mark {
  font-size: calc(var(--tcell) * 0.62);
  font-weight: 700;
  line-height: 1;
  display: block;
}
.ttt-cell.is-o .ttt-mark { color: #d84315; } /* ○＝先手 */
.ttt-cell.is-x .ttt-mark { color: #1565c0; } /* ×＝後手 */

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

/* 勝ちラインのハイライト */
.ttt-cell.is-win {
  background: rgba(6, 118, 71, 0.18);
  box-shadow: inset 0 0 0 2px #067647;
}

/* 早見表 */
.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);
}