/* =====================================================================
   style.css — ライフゲーム（コンウェイ） ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* 手本にならい、共有CSSに無いユーティリティ/モード切替をここで補う */
.sg-mt-3 { margin-top: var(--sg-space-3, 12px); }

.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;
}

/* 盤面 */
.gol-board-wrap {
  width: 100%;
  overflow-x: auto;
}
#board {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: var(--sg-radius, 8px);
  background: var(--sg-card-bg, #fff);
  touch-action: none; /* ドラッグ描画中のスクロールを抑止 */
  cursor: crosshair;
  image-rendering: pixelated;
}

.gol-stats {
  margin: var(--sg-space-3, 12px) 0 0;
  font-size: 0.95rem;
  color: var(--sg-muted, #555);
}
.gol-stats strong {
  color: var(--sg-fg, #222);
  font-variant-numeric: tabular-nums;
}

/* 操作ボタン群 */
.gol-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 速度スライダー */
.gol-range {
  width: 100%;
  max-width: 360px;
  margin-top: var(--sg-space-1, 4px);
}

/* プリセット行 */
.gol-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: var(--sg-space-1, 4px);
}
.gol-preset-row .sg-input {
  flex: 1 1 220px;
  min-width: 180px;
}