/*
 * 本文中の棋譜（_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;
}

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

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