/* =====================================================================
   style.css — ドット＆ボックス ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   色は共有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;
}

/* hidden 属性を確実に効かせる（.sg-field の display 指定に負けないように） */
.sg-field[hidden],
.db-record-wrap[hidden] {
  display: none !important;
}

/* プレイヤー色：先手＝青（primary）、後手＝橙。ライトは白地で見えるよう濃いめの橙 */
.db-board,
.db-scores {
  --db-p1: var(--sg-primary, #3b5bdb);
  --db-p2: #d9480f;
}
html.sg-dark .db-board,
html.sg-dark .db-scores {
  --db-p2: var(--sg-warm, #f5ad57);
}
@media (prefers-color-scheme: dark) {
  html:not(.sg-light) .db-board,
  html:not(.sg-light) .db-scores {
    --db-p2: var(--sg-warm, #f5ad57);
  }
}

/* ---------- 得点表示 ---------- */
.db-scores {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.db-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 130px;
  padding: 6px 14px;
  border: 2px solid var(--sg-border, #dde2ec);
  border-radius: 999px;
  background: var(--sg-surface-2, #f7f9fd);
  color: var(--sg-fg, #1a2230);
  font-size: 0.9rem;
}
.db-pill__name {
  flex: 1 1 auto;
}
.db-pill__score {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.db-pill--p1 .db-pill__score { color: var(--db-p1); }
.db-pill--p2 .db-pill__score { color: var(--db-p2); }
.db-pill--p1.is-turn { border-color: var(--db-p1); box-shadow: 0 0 0 2px var(--db-p1) inset; }
.db-pill--p2.is-turn { border-color: var(--db-p2); box-shadow: 0 0 0 2px var(--db-p2) inset; }
.db-pill.is-turn .db-pill__name::before {
  content: "▶ ";
}

/* ステータス（手番・勝敗） */
.db-status {
  min-height: 2.8em;
  margin: 10px 0 8px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}
.db-status.is-ok { color: var(--sg-success, #1f9d57); }
.db-status.is-warn { color: var(--sg-warm, #b54708); }

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

/* 戦績 */
.db-record-wrap {
  text-align: center;
  font-size: 0.88rem;
  color: var(--sg-muted, #5a6573);
}
.db-record-wrap p {
  margin: 2px 0;
}

/* ---------- 盤（SVG。幅に合わせて縮むのでスマホではみ出さない） ---------- */
.db-board-wrap {
  display: flex;
  justify-content: center;
}
.db-board {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 1 / 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 12px;
  background: var(--sg-surface-2, #f7f9fd);
}
.db-board:focus {
  outline: none;
}
.db-board:focus-visible {
  outline: 3px solid var(--sg-primary, #3b5bdb);
  outline-offset: 2px;
}

/* 点 */
.db-dot {
  fill: var(--sg-fg, #1a2230);
}

/* 線：ヒット領域（透明・広め）／ガイド（未着手の薄い線）／実線 */
.db-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}
.db-board.is-locked .db-hit,
.db-line.is-drawn .db-hit {
  cursor: default;
}
.db-guide {
  stroke: var(--sg-border, #dde2ec);
  stroke-width: 2;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  pointer-events: none;
}
.db-stroke {
  stroke: transparent;
  stroke-width: 6;
  stroke-linecap: round;
  pointer-events: none;
}
.db-line.is-drawn .db-guide {
  display: none;
}
.db-line.is-drawn .db-stroke {
  stroke: var(--sg-fg, #1a2230);
}
/* 直前の手番で引いた線（引いた人の色で太く） */
.db-line.is-recent.is-p1 .db-stroke {
  stroke: var(--db-p1);
  stroke-width: 8;
}
.db-line.is-recent.is-p2 .db-stroke {
  stroke: var(--db-p2);
  stroke-width: 8;
}
/* いちばん最後の1本はさらに太く */
.db-line.is-last .db-stroke {
  stroke-width: 9;
}

/* ホバー（マウス環境のみ）：これから引く線のプレビュー */
@media (hover: hover) {
  .db-board:not(.is-locked)[data-turn="1"] .db-line:not(.is-drawn):hover .db-stroke {
    stroke: var(--db-p1);
    opacity: 0.45;
  }
  .db-board:not(.is-locked)[data-turn="2"] .db-line:not(.is-drawn):hover .db-stroke {
    stroke: var(--db-p2);
    opacity: 0.45;
  }
}

/* キーボードのカーソル（フォーカス中のみ表示） */
.db-board.is-kbd .db-line.is-cursor .db-guide {
  display: inline;
  stroke: var(--sg-fg, #1a2230);
  stroke-width: 3;
  stroke-dasharray: 5 4;
}
.db-board.is-kbd .db-line.is-cursor .db-hit {
  fill: var(--sg-primary, #3b5bdb);
  fill-opacity: 0.14;
}

/* 箱 */
.db-box {
  fill: transparent;
  pointer-events: none;
}
.db-box.is-p1 {
  fill: var(--db-p1);
  fill-opacity: 0.28;
}
.db-box.is-p2 {
  fill: url(#db-hatch);
}
.db-hatch-bg {
  fill: var(--db-p2);
  fill-opacity: 0.3;
}
.db-hatch-line {
  stroke: var(--db-p2);
  stroke-width: 3;
  stroke-opacity: 0.55;
}
.db-box-mark {
  font-size: 24px;
  font-weight: 700;
  fill: var(--sg-fg, #1a2230);
  pointer-events: none;
}

/* 新しく引いた線のアニメーション（reduced-motion 時は無効） */
.db-line.is-anim .db-stroke {
  animation: db-draw 0.28s ease-out;
}
@keyframes db-draw {
  from { stroke-opacity: 0.1; stroke-width: 14; }
  to { stroke-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .db-line.is-anim .db-stroke {
    animation: none;
  }
}

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

@media (max-width: 400px) {
  .db-pill {
    min-width: 0;
    flex: 1 1 0;
    padding: 6px 10px;
    font-size: 0.82rem;
  }
}