/* 色と余白は変数で一箇所にまとめる（FRONTEND.md）。 */
:root {
  --bg: #f4f1ea;
  --panel: #fffdf8;
  --ink: #2c2823;
  --muted: #6b645a;
  --line: #d9d2c5;
  --board: #c9a227;
  --board-dark: #8a6d1f;
  --point-a: #e8dcc0;
  --point-b: #a8794a;
  --white-checker: #fbf7ef;
  --black-checker: #3a3430;
  --accent: #2f6f4f;
  /* ポイント作成可能（メイク可能）なマスのハイライト（アンバーゴールド）。 */
  --makeable: #d97706;
  /* ダブル用。「サイコロを振る」と並んで盤の上に出るので、**緑と間違えない
     色**にする。盤（金茶）の上に白抜きで置いても読める濃さを選んである。
     盤の色はテーマで変わらないので、この色も 1 つで通す。 */
  --cube-action: #5b4b9e;
  /* ヒントの印。**選択できる印（緑）と同じ駒に同時に付く**ので、緑ともダブルの
     紫とも見分けが付く色にする。盤（クリーム / 茶）の上でも沈まない濃さ。
     **色だけに頼ってはいない**（最善手は表記でも出す。FRONTEND.md）。 */
  --advice: #c2185b;
  --danger: #a8412f;
  --gap: 12px;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1b18;
    --panel: #262320;
    --ink: #f0ece4;
    --muted: #a8a096;
    --line: #3d3833;
    --point-a: #4a423a;
    --point-b: #6b4a2c;
    --white-checker: #ede7dc;
    --black-checker: #16130f;
    --accent: #4f9d74;
    --makeable: #f59e0b;
    /* 暗い背景では沈むので明るい側へ。盤の色はテーマで変わらないが、
       クリーム / 茶のどちらの上でも読める範囲。 */
    --advice: #ff5c8a;
  }
}

* { box-sizing: border-box; }

/* `hidden` 属性は UA スタイル（display:none）でしか効かないため、
   `.field { display: grid }` のような作者スタイルに簡単に負ける。
   JS 側で hidden を切り替える要素が増えたので、ここで一律に勝たせる。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}

.site-header {
  display: flex;
  align-items: baseline;
  gap: var(--gap);
  padding: var(--gap);
  border-bottom: 1px solid var(--line);
}
.site-header h1 { font-size: 1.1rem; margin: 0; }

/* 同梱物のクレジット。**許諾の条件はここではない**（条件が掛かるのは表を含む
   `src/met-table.js` の先頭で、そちらの表示は消せない）。ここは JS を開かない
   人向けの表示なので、文面は変えても構わない。 */
.site-footer {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--gap);
  border-top: 1px solid var(--line);
}
.site-footer .note { margin: 0; font-size: .75rem; }
.back-link { color: var(--muted); text-decoration: none; font-size: .85rem; }
.back-link:hover, .back-link:focus-visible { color: var(--accent); }

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--gap);
  display: grid;
  gap: var(--gap);
}

#game { display: grid; gap: var(--gap); }
.play { display: grid; gap: var(--gap); align-content: start; }

/* PC 幅では棋譜を盤の右に並べる（狭い画面では盤の下に折りたたむ）。
   右の列は上から「間合い」「棋譜」の順。狭い画面でも DOM の順がそのまま
   縦に並ぶので、どちらでも間合いは棋譜の上に出る。 */
@media (min-width: 900px) {
  #app { max-width: 1140px; }
  #game {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .play { grid-column: 1; grid-row: 1 / span 2; }
  .speed-panel { grid-column: 2; grid-row: 1; }
  .record { grid-column: 2; grid-row: 2; position: sticky; top: var(--gap); }
  .record > summary { cursor: default; list-style: none; }
  .record > summary::-webkit-details-marker { display: none; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
}
.panel h2 { margin: 0 0 var(--gap); font-size: 1rem; }
.note { color: var(--muted); font-size: .85rem; margin: .4em 0 0; }

.field { display: grid; gap: 6px; margin-bottom: var(--gap); }
.field > span { font-size: .85rem; color: var(--muted); }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }

button {
  font: inherit;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  min-height: 44px;      /* タップ目標 */
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }
.choice.is-selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* 色だけに頼らない（FRONTEND.md）。選択中は印を付ける。 */
.choice.is-selected::before { content: "✓ "; }
.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 盤面 ───────────────────────────────────── */

.board {
  position: relative;
  display: grid;
  /* キューブ置き場 / 6 点 / バー / 6 点 / 上がりトレイ。
     **キューブは上がりトレイの反対側**（実物の盤と同じく、左の縁）に置く。 */
  grid-template-columns:
    minmax(22px, 6%) repeat(6, 1fr) minmax(26px, 7%) repeat(6, 1fr) minmax(22px, 6%);
  /* 上ラベル / 上段 / 中央の帯（バーとダイスの定位置） / 下段 / 下ラベル。
     番号は三角形の外（盤の縁）に出し、実物の盤と同じく三角形は帯に向かって尖る。 */
  grid-template-rows: 5% 1fr 14% 1fr 5%;
  gap: 2px;
  /* 駒 5 個を積んでも中央の帯を越えないように、実物より縦長にしてある。 */
  aspect-ratio: 15 / 12.5;
  background: var(--board-dark);
  border: 6px solid var(--board-dark);
  border-radius: var(--radius);
}

.point-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #f2e9d5;
  opacity: .8;
  pointer-events: none;
}

.point {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 0;
  cursor: pointer;
}
/* 三角形の色は疑似要素に持たせる。駒や数字はその上（z-index:1）に乗る。 */
.point::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--point-a);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.point.bottom::before { clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.point.odd::before { background: var(--point-b); }
.point > * { position: relative; z-index: 1; }
.point.bottom { flex-direction: column-reverse; }
.point:disabled { cursor: default; opacity: 1; }

/* 選択できる駒はマス全体を囲う（三角形に切り取られる ::before ではなく本体に描く）。 */
.point.selectable { box-shadow: inset 0 0 0 3px var(--accent); }

/* ポイントを作れる場所（クリックでメイク可能）。 */
.point.makeable { box-shadow: inset 0 0 0 3px var(--makeable); }

/* 手番を丸ごと使うメイク / ベアオフは、確認の 1 クリックを挟む。
   **押せば戻せない**ので、待っている間だけ枠を太くして脈を打たせる。 */
.point.confirming,
.point.makeable.confirming {
  box-shadow: inset 0 0 0 5px var(--makeable);
  animation: confirm-pulse 1s ease-in-out infinite;
}
.off-tray.confirming,
.off-tray.makeable.confirming {
  box-shadow: inset 0 0 0 5px var(--makeable);
  animation: confirm-pulse 1s ease-in-out infinite;
}
@keyframes confirm-pulse {
  50% { box-shadow: inset 0 0 0 5px var(--makeable), inset 0 0 0 9px var(--makeable); }
}
@media (prefers-reduced-motion: reduce) {
  .point.confirming,
  .point.makeable.confirming,
  .off-tray.confirming,
  .off-tray.makeable.confirming { animation: none; }
}

/* ヒントの最善手の移動元。**選択できる印（緑）と重なるので別の色にする。**
   両方付くことがあるため、内側と外側で描き分けて共存させる。 */
.point.advised { box-shadow: inset 0 0 0 3px var(--advice); }
.point.selectable.advised {
  box-shadow: inset 0 0 0 3px var(--advice), inset 0 0 0 6px var(--accent);
}
.bar.advised { box-shadow: inset 0 0 0 3px var(--advice); }
.bar.selectable.advised {
  box-shadow: inset 0 0 0 3px var(--advice), inset 0 0 0 6px var(--accent);
}

.checker {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .35);
  flex: 0 0 auto;
}
.checker.white { background: var(--white-checker); }
.checker.black { background: var(--black-checker); }
/* 駒はマス幅いっぱいに近いサイズの正円で固定する（積んだ数で潰さない）。
   5 個積んでも収まるように、盤の縦横比の側で高さを確保している。 */
.point .checker { width: 90%; }
.stack-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel);
  border-radius: 999px;
  padding: 0 4px;
}

.bar {
  position: relative;
  background: linear-gradient(180deg, var(--board-dark), var(--board) 50%, var(--board-dark));
  border-left: 2px solid var(--board);
  border-right: 2px solid var(--board);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  gap: 2px;
  cursor: pointer;
}
/* width:100% がないと、駒の % 幅がゼロ幅の親に対して解決されて見えなくなる。 */
.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-height: 1em;
}
.bar .checker { width: 78%; }
.bar.selectable { box-shadow: inset 0 0 0 3px var(--accent); }

/* 上がった駒を置く右端のトレイ。実物と同じく駒は寝かせて積む。 */
.off-tray {
  position: relative;
  background: var(--board-dark);
  border-left: 2px solid var(--board);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 3px;
  overflow: hidden;
}
.off-tray.black { justify-content: flex-start; }   /* 上段が黒のホーム側 */
.off-tray.white { justify-content: flex-end; }
/* 出目を使って2駒ベアオフできるときはトレイを黄色枠でハイライトし、クリック可能にする */
.off-tray.makeable {
  box-shadow: inset 0 0 0 3px var(--makeable);
  cursor: pointer;
}
.off-checker {
  width: 100%;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .35);
}
.off-tray.white .off-checker { background: var(--white-checker); }
.off-tray.black .off-checker { background: var(--black-checker); }
.off-count {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #f2e9d5;
  pointer-events: none;
}
.off-tray.black .off-count { bottom: 2px; }
.off-tray.white .off-count { top: 2px; }

/* ダブリングキューブの置き場。上がりトレイの反対側（盤の左の縁）に、
   盤の高さいっぱいの帯として取る。キューブはその中で上 / 中央 / 下に動く:

     センター（持ち主なし） → 中央。数字は 64（実物と同じ「1 の面が無い」表現）
     Black が所有           → 上（Black のホーム側）
     White が所有           → 下（White のホーム側。人間は常に White）

   キューブを使わない設定のときは中身を空にする。**列そのものは残す**
   （消すと盤の横幅が変わって、対局ごとに見え方が動いてしまう）。 */
.cube-tray {
  grid-column: 1;
  grid-row: 2 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  background: var(--board-dark);
  border-right: 2px solid var(--board);
  overflow: hidden;
}
.cube-tray.at-center { justify-content: center; }
.cube-tray.at-top { justify-content: flex-start; }
.cube-tray.at-bottom { justify-content: flex-end; }

.cube {
  width: 92%;
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  /* 「64」の 2 桁が入る一番大きい字にする。狭い画面では詰まるので幅で縛る。 */
  font-size: clamp(9px, 1.4vw, 15px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
/* センターは「まだ誰も持っていない」ので、少し控えめに見せる。 */
.cube.is-center { opacity: .85; }

/* 返事待ちの間だけ、置き場から外して盤に「打った」キューブ。中段の帯に置き、
   出す側はダイスと同じ半分（自分は右、AI は左）。ダブルのボタンと同じ色の
   縁を付けて、これがキューブの提案だと分かるようにする。 */
#cube-offer {
  grid-row: 3;
  justify-self: center;
  align-self: center;
  width: 18%;            /* ダイスの目（16%）と近い大きさに揃える */
  font-size: clamp(10px, 1.7vw, 18px);
  border: 2px solid var(--cube-action);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
#cube-offer.at-right { grid-column: 9 / 15; }
#cube-offer.at-left { grid-column: 2 / 8; }

/* ヒントの表示。盤のすぐ下に出す。 */
.advice { display: grid; gap: 4px; }
.advice-move {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--advice);
}
.advice-rest {
  margin: 0;
  padding-left: 1.2em;
  font-size: .85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.status-panel { display: grid; gap: 6px; }
.turn { margin: 0; font-weight: 700; }

/* 実物の盤と同じく、ダイスは中央の帯に転がす。自分は右半分、相手は
   （相手から見て右になる）左半分。 */
.dice {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10%;
}
#dice { grid-column: 9 / 15; }
#dice-ai { grid-column: 2 / 8; }

/* 盤の中央の帯に出すボタン。「振る」は自分のダイスと同じ右半分（手を伸ばす先を
   1 箇所にまとめる）、「ダブル」は左半分。どちらもロール前にしか出ないので、
   ダイスと場所を取り合わない。 */
#roll, #double {
  grid-row: 3;
  justify-self: center;
  align-self: center;
  min-height: 0;
  padding: 6px 20px;
  font-size: .9rem;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
#roll { grid-column: 9 / 15; }
#double { grid-column: 2 / 8; }

/* 振る（緑）と取り違えないよう、ダブルだけ別の色にする。 */
.cube-action {
  background: var(--cube-action);
  color: #fff;
  border-color: var(--cube-action);
}
.cube-action:hover:not(:disabled) { border-color: #fff; }
.die {
  width: 16%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.die.used { opacity: .35; text-decoration: line-through; }
/* 出目の並びはクリックで入れ替えられる（ゾロ目のときは付かない）。 */
.dice.is-flippable { cursor: pointer; }
.dice.is-flippable:hover .die:not(.used) { border-color: var(--accent); }

.log {
  margin: var(--gap) 0 0;
  padding-left: 1.4em;
  font-size: .85rem;
  color: var(--muted);
  max-height: 34vh;
  overflow-y: auto;
}

.record { align-self: start; }
.record-export { margin-top: var(--gap); border-top: 1px solid var(--line); padding-top: var(--gap); }
.record-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record-head h3 { margin: 0; font-size: .85rem; color: var(--muted); font-weight: 600; }
.record-head button { min-height: 32px; padding: 4px 12px; font-size: .8rem; }
/* **フォーカスできる**（`tabindex="0"`）。クリックしてから Ctrl+A で、
   ページ全体ではなくこの欄だけを全選択できるようにしてある。
   スクロールする領域にフォーカスを持たせるのはキーボード操作の面でも要る。 */
.mat:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mat {
  margin: 8px 0 0;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .72rem;
  line-height: 1.45;
  max-height: 34vh;
  overflow: auto;
  white-space: pre;
}

@media (max-width: 420px) {
  /* 狭い画面では両端の帯とバーを固定幅に落とし、点の幅を稼ぐ。
     **列の数は変えない**（変えると帯の中身が別の列へずれる）。 */
  .board { grid-template-columns: 18px repeat(6, 1fr) 20px repeat(6, 1fr) 18px; }
}

/* 長考中（3 手先読み）。固まったのではないと分かるように点滅させる。 */
.note.is-thinking {
  animation: thinking 1.2s ease-in-out infinite;
}

@keyframes thinking {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .note.is-thinking { animation: none; }
}

/* スライダー 1 つぶん（見出し + 現在値 + つまみ）。AI の間合いと
   マッチの長さの 2 か所で使う。 */
.slider { display: grid; gap: 6px; }
.slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: .85rem;
  color: var(--muted);
}
.slider output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}
.slider input[type="range"] {
  width: 100%;
  min-height: 44px;      /* タップ目標 */
  accent-color: var(--accent);
}

.toggle-field {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* マッチのスコア。形式・点差・away・クロフォードをこの 1 行にまとめる。 */
.score {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* キューブの状態表示。値と持ち主が一目で分かるようにする。 */
.cube-state {
  margin: 0.35rem 0 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}