/*
 * 本文中の棋譜（_KIFU_START_）と文字碁盤（_GOBAN_START_）の見た目。
 *
 * スキンごとの CSS に入れると opSkinClassicPlugin のように抜けが出るため、
 * 棋譜を含むページで必ず読み込む独立したファイルにしてある。
 */

/* ------------------------------------------------------------------
 * 動かせる碁盤
 * ------------------------------------------------------------------ */

.goxi-kifu {
  margin: 1em 0;
  padding: 0.6em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fafaf7;
  max-width: 480px;
}

/* 置き換わる前は SGF の生データが見えてしまうので隠しておく。
   スクリプトが動かない環境では下の noscript 用の指定で表示に戻す。 */
.goxi-kifu:not(.goxi-kifu-ready):not(.goxi-kifu-failed) {
  min-height: 2em;
}

.goxi-kifu-info {
  font-size: 90%;
  line-height: 1.5;
  color: #333;
  margin-bottom: 0.4em;
  word-break: break-all;
}

.goxi-kifu-board {
  width: 100%;
  position: relative;
}

/* post-kifu の描画部品は編集用の拡大 UI（✕ ✓ ボタンと拡大用の canvas）を
   常に組み立てる。本文中の碁盤は見るだけなので隠す。post-kifu 側では
   同名の CSS が .active のときだけ表示する作りになっている。 */
.goxi-kifu .zoom-overlay {
  display: none;
}

.goxi-kifu-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.5em;
}

.goxi-kifu-btn {
  font: inherit;
  line-height: 1;
  padding: 0.4em 0.5em;
  min-width: 2.6em;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
  color: #222;
  cursor: pointer;
  /* 進む・戻るを連打したときにダブルタップ拡大が起きないようにする。
     manipulation ならスクロールは残したままピンチ・ダブルタップ拡大だけ止まる。 */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.goxi-kifu-btn:hover:not(:disabled) {
  background: #eee;
}

.goxi-kifu-btn:disabled {
  color: #aaa;
  cursor: default;
}

.goxi-kifu-btn:focus-visible {
  outline: 2px solid #4a7fb5;
  outline-offset: 1px;
}

.goxi-kifu-count {
  margin-left: auto;
  font-size: 90%;
  color: #555;
  /* 手数が増えても桁で位置が動かないように */
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * 自動再生（チェックボックス＋間隔（秒）選択）
 * post-kifu（つぶや棋譜３）の仕様に合わせる。
 * ------------------------------------------------------------------ */

.goxi-kifu-toggle-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 0.5em;
}

.goxi-kifu-toggle-inline input[type="checkbox"] {
  margin: 0;
}

.goxi-kifu-select {
  font: inherit;
  line-height: 1;
  padding: 0.35em 0.3em;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
  color: #222;
}

.goxi-kifu-slider {
  display: block;
  width: 100%;
  margin-top: 0.4em;
}

.goxi-kifu-comment {
  margin-top: 0.4em;
  font-size: 90%;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: #333;
}

.goxi-kifu-comment:empty {
  display: none;
}

.goxi-kifu-error {
  margin: 0 0 0.4em;
  font-size: 90%;
  color: #a33;
}

/* 表示できなかったときは SGF を読める形で残す。横に伸びてページを
   崩さないよう、この枠の中だけで横スクロールさせる。 */
.goxi-kifu-raw {
  margin: 0;
  padding: 0.4em;
  max-height: 8em;
  overflow: auto;
  font-size: 80%;
  line-height: 1.4;
  background: #fff;
  border: 1px solid #ddd;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ------------------------------------------------------------------
 * 文字で描いた碁盤（_GOBAN_START_ ... _GOBAN_END_）
 *
 * 本文は ┌┬┐├┼┤└┴┘ ● ○ ・ といった全角文字で組まれている。
 * 等幅フォントでないと桁がずれて盤が崩れる。
 * 本文は nl2br() を通るため改行は <br> で入ってくる。
 * ------------------------------------------------------------------ */

.goban {
  display: inline-block;
  /* 全角の罫線が途切れないよう、字幅の揃うフォントを順に指定する。
     最後の monospace は環境ごとの既定の等幅フォント。 */
  font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka－等幅', 'Osaka-Mono',
    'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Noto Sans Mono CJK JP',
    'Noto Sans Mono', 'DejaVu Sans Mono', monospace;
  /* 行間を字の高さに合わせる。広いと縦の罫線が切れて見える。 */
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: 0;
  /* 盤の途中で折り返さない。狭い画面ではこの枠だけ横スクロールさせる。 */
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: top;
  /* 本文の行間や字間の指定を持ち込まない */
  text-indent: 0;
  word-break: normal;
}

/* 画面が狭い端末では 19 路が収まらないので字を詰める */
@media (max-width: 480px) {
  .goban {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------
 * 手順番号の切り替えボタン
 *
 * 送り戻しのボタンと並ぶが役割が違うので、押している間は見た目を変えて
 * 「いま番号が出ている」ことが分かるようにする。
 * ------------------------------------------------------------------ */

.goxi-kifu-btn-toggle {
  min-width: 3.4em;
  margin-left: 0.5em;
}

.goxi-kifu-btn-toggle.is-on {
  background: #4a7fb5;
  border-color: #3d6a99;
  color: #fff;
}

.goxi-kifu-btn-toggle.is-on:hover:not(:disabled) {
  background: #3d6a99;
}

/* ------------------------------------------------------------------
 * 棋譜情報の明細
 *
 * 要約は .goxi-kifu-info の 1 行で出し、全項目はここに出す。
 * dl を 2 列にして、見出しの幅をそろえる。
 * ------------------------------------------------------------------ */

.goxi-kifu-infobox {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15em 0.8em;
  margin: 0 0 0.5em;
  padding: 0.5em 0.6em;
  font-size: 90%;
  line-height: 1.5;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.goxi-kifu-infobox[hidden] {
  display: none;
}

.goxi-kifu-infobox dt {
  margin: 0;
  color: #555;
  white-space: nowrap;
}

.goxi-kifu-infobox dd {
  margin: 0;
  color: #222;
  /* 出典や備考に長い文字列が入ることがある */
  word-break: break-all;
  white-space: pre-wrap;
}

/* ------------------------------------------------------------------
 * この先の分かれを選ぶ行
 * ------------------------------------------------------------------ */

.goxi-kifu-branches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.4em;
}

.goxi-kifu-branches[hidden] {
  display: none;
}

.goxi-kifu-branches-label {
  font-size: 85%;
  color: #555;
  margin-right: 0.2em;
}

.goxi-kifu-btn-branch {
  min-width: 0;
  padding: 0.3em 0.5em;
  font-size: 90%;
}

/* いま選んでいる枝。手順番号のボタンと同じ見せ方にそろえる。 */
.goxi-kifu-btn-branch.is-on {
  background: #4a7fb5;
  border-color: #3d6a99;
  color: #fff;
}

.goxi-kifu-btn-branch.is-on:hover:not(:disabled) {
  background: #3d6a99;
}

/* ------------------------------------------------------------------
 * 変化図ツリー
 *
 * 手数が増えると横に伸びるので、この枠の中だけで横スクロールさせる。
 * ------------------------------------------------------------------ */

.goxi-kifu-tree {
  margin-top: 0.5em;
  padding: 0.2em;
  max-height: 10em;
  overflow: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.goxi-kifu-tree[hidden] {
  display: none;
}

.goxi-kifu-tree-svg {
  display: block;
}

.goxi-kifu-tree-edge {
  fill: none;
  stroke: #bbb;
  stroke-width: 1;
}

/* いま通っている道。分岐がたくさんあっても現在の道筋が追える。 */
.goxi-kifu-tree-edge.is-on-line {
  stroke: #4a7fb5;
  stroke-width: 2;
}

.goxi-kifu-tree-node {
  cursor: pointer;
}

/* 当たり判定だけの四角。見えないが押せる。 */
.goxi-kifu-tree-hit {
  fill: transparent;
}

.goxi-kifu-tree-node circle {
  stroke: #666;
  stroke-width: 1;
}

.goxi-kifu-tree-node circle.is-black {
  fill: #222;
}

.goxi-kifu-tree-node circle.is-white {
  fill: #fff;
}

/* 開始前のノード。手ではないので石に見せない。 */
.goxi-kifu-tree-node circle.is-root {
  fill: #ddd;
  stroke: #999;
}

.goxi-kifu-tree-node.is-on-line circle {
  stroke: #4a7fb5;
}

.goxi-kifu-tree-node.is-current circle {
  stroke: #c33;
  stroke-width: 2.5;
}

.goxi-kifu-tree-node:hover circle {
  stroke: #4a7fb5;
  stroke-width: 2;
}

/* ------------------------------------------------------------------
 * 棋譜作成画面（/goban/gobanmake.html）
 *
 * 日記に埋まる碁盤とは置かれ方が違う。あちらは本文の一部として幅を
 * 譲る側だが、こちらは画面を預かる側なので、ここだけの指定になる。
 * goxi 本体の main.css は読み込まない。あれは #Container が
 * min-width: 950px の固定幅で、この画面には要らないものまで付いてくる。
 * ------------------------------------------------------------------ */

.gm-body {
  margin: 0;
  padding: 0;
  background: #f4f2ee;
  color: #222;
  font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
    'ＭＳ Ｐゴシック', sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.gm-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 14px 40px;
}

.gm-title {
  font-size: 18px;
  margin: 8px 0 4px;
}

.gm-lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: #444;
}

/* 広い画面では碁盤と操作を横に並べ、狭い画面では縦に積む。
   950px は goxi 本体の固定幅に合わせた区切りではなく、碁盤を
   360px 程度確保したうえで操作側が窮屈にならない幅で選んだ。 */
.gm-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.gm-left {
  flex: 0 1 460px;
  min-width: 280px;
}

.gm-right {
  flex: 1 1 320px;
  min-width: 260px;
}

/* 描画部品は拡大用の覆い（✕ ✓ ボタン）を常に組み立てる。post-kifu 側では
   .active のときだけ出す作りだが、その CSS を持ってきていないので通常の
   流れに入って枠を 181px 押し広げていた。この画面では拡大 UI を使わない
   （setInteractive(false) にしている）ので隠す。日記側と同じ扱い。 */
.gm-board .zoom-overlay {
  display: none;
}

/* 碁盤。canvas は描画部品が中に作る。 */
.gm-board {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  background: #e9c88a;
  border: 1px solid #b89b6a;
}

/* aspect-ratio が無いブラウザのための保険。padding-top で正方形にする。 */
@supports not (aspect-ratio: 1 / 1) {
  .gm-board {
    height: 0;
    padding-top: 100%;
    position: relative;
  }
  .gm-board > canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.gm-status {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 8px 0 4px;
  min-height: 1.6em;
  font-size: 13px;
}

.gm-move-no { font-weight: bold; }
.gm-turn { color: #555; }
.gm-branch { color: #a0522d; }

.gm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gm-btn {
  /* 指で押せる高さ。iOS は 16px 未満の入力に触れると画面を拡大するので、
     文字の大きさもそれに合わせる。 */
  min-height: 40px;
  padding: 6px 12px;
  font-size: 16px;
  color: #222;
  background: #fff;
  border: 1px solid #b0a999;
  border-radius: 4px;
  cursor: pointer;
}

.gm-btn:hover:not(:disabled) { background: #f0ece2; }

.gm-btn:disabled {
  color: #aaa;
  background: #f6f5f2;
  cursor: default;
}

.gm-btn-main {
  font-weight: bold;
  color: #fff;
  background: #4a7a3a;
  border-color: #3d6530;
}

.gm-btn-main:hover:not(:disabled) { background: #3d6530; }

.gm-btn-warn { color: #8b2d2d; }

.gm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.gm-label {
  display: inline-block;
  min-width: 6em;
  font-size: 13px;
  color: #555;
}

.gm-select {
  min-height: 40px;
  padding: 4px 8px;
  font-size: 16px;
}

.gm-note {
  margin: 4px 0 14px;
  padding: 8px 10px;
  font-size: 12px;
  color: #555;
  background: #fbf9f4;
  border-left: 3px solid #cfc6b0;
}

.gm-out-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.gm-checks {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 13px;
}

.gm-checks label { cursor: pointer; }

/* 結果の知らせ。空のときも高さを保って、出たときに下がずれないようにする。 */
.gm-say {
  min-height: 1.6em;
  margin: 0 0 8px;
  font-size: 13px;
  color: #2a5d1e;
}

.gm-textarea {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 6px;
  /* 貼る文字列をそのまま見せる枠なので等幅にする。折り返さず横に送ると
     全体が見えないため、折り返す。 */
  font-family: 'ＭＳ ゴシック', 'Osaka－等幅', 'Osaka-Mono', monospace;
  font-size: 16px;
  line-height: 1.4;
  border: 1px solid #b0a999;
  border-radius: 4px;
}

.gm-foot {
  margin-top: 24px;
  font-size: 13px;
}

.gm-input {
  min-height: 40px;
  width: 5em;
  padding: 4px 8px;
  /* iOS は 16px 未満の入力に触れると画面を拡大して戻せなくなる */
  font-size: 16px;
  text-align: center;
  border: 1px solid #b0a999;
  border-radius: 4px;
}