/* ============================================================
   オセロ定石の盤面図 — guide-joseki.css
   ・図は scripts/generate-reversi-joseki.js が焼く静的 HTML（figure.rj）
   ・石は style.css の .stone.black / .stone.white をそのまま流用（ゲームの盤と同じ見た目）
   ・1 手ずつの操作ボタン（.rj-ctrl）は guide-joseki.js が差し込む
   ============================================================ */
.rj { margin: 14px auto; max-width: 340px; }
.rj-wrap { display: grid; grid-template-columns: 14px 1fr; grid-template-rows: 14px auto; gap: 3px; }
.rj-cols, .rj-rows { display: grid; font-size: 10.5px; font-weight: 700; color: var(--ink-mute); text-align: center; line-height: 1; }
.rj-cols { grid-column: 2; grid-template-columns: repeat(8, 1fr); align-items: end; }
.rj-rows { grid-row: 2; grid-template-rows: repeat(8, 1fr); align-items: center; }
.rj-board {
  grid-column: 2; grid-row: 2;
  display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1;
  background: linear-gradient(135deg, var(--felt) 0%, var(--felt-deep) 100%);
  border: 5px solid var(--frame); border-radius: 6px;
  box-shadow: 0 3px 10px rgba(42, 34, 24, .18);
}
.rj-c { position: relative; border-right: 1px solid rgba(0, 0, 0, .28); border-bottom: 1px solid rgba(0, 0, 0, .28); }
.rj-c:nth-child(8n) { border-right: 0; }
.rj-c:nth-child(n+57) { border-bottom: 0; }
.rj-c .stone { inset: 10%; transition: none; }
.rj-n { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  font-size: clamp(9px, 3vw, 12.5px); font-weight: 900; font-variant-numeric: tabular-nums; pointer-events: none; }
.rj-c:has(.stone.black) .rj-n { color: #fff; }
.rj-c:has(.stone.white) .rj-n { color: var(--ink); }
.rj-last .stone { box-shadow: 0 0 0 2.5px var(--accent), 0 2px 4px rgba(0, 0, 0, .4); }
/* ピル付きの図（五目並べの .dg-tag と同じ見た目）。ピルは盤の上の枠にまたがせ、列の座標は盤の下へ */
.rj-tagged { max-width: 380px; }
.rj-tagged .rj-wrap { grid-template-rows: auto 14px; padding-top: 26px; }
.rj-tagged .rj-cols { grid-row: 2; align-items: start; }
.rj-tagged .rj-rows, .rj-tagged .rj-board { grid-row: 1; }
.rj-board { position: relative; }
.rj-tag {
  position: absolute; top: 3px; left: 8px; z-index: 8; transform: translateY(-100%);
  display: inline-flex; align-items: stretch; max-width: calc(100% - 16px);
  border-radius: 999px; overflow: hidden;
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  box-shadow: 0 1px 4px rgba(42, 34, 24, .25); pointer-events: none;
}
.rj-tag b, .rj-tag span { padding: 5px 10px; }
.rj-tag b { flex: none; background: var(--accent-deep); color: #fff; }
.rj-tag span { background: rgba(245, 239, 228, .96); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 空きマスの印（白が打てる所など）。朱の丸 */
.rj-mk { position: absolute; inset: 22%; border: 2.5px solid var(--accent); border-radius: 50%; background: rgba(255, 255, 255, .25); }

/* 次の一手の予告（再生中だけ guide-joseki.js が付ける） */
.rj-c.rj-next::after { content: ''; position: absolute; inset: 32%; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .85); }

.rj-cap { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); text-align: center; }
.rj-cap b { color: var(--ink); margin-right: 4px; }
.rj-seq { display: block; font-size: 12px; letter-spacing: .02em; color: var(--ink-mute); word-break: break-word; }
.rj-turn { display: inline-block; margin-top: 2px; font-size: 11.5px; padding: 0 8px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft); }

.rj-ctrl { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.rj-ctrl button { border: 0; border-radius: 999px; background: var(--bg-soft); color: var(--ink); font: inherit;
  font-size: 12.5px; font-weight: 700; padding: 6px 11px; cursor: pointer; }
.rj-ctrl button:hover { background: var(--bg-deep); }
.rj-ctrl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rj-ctrl button:disabled { opacity: .4; cursor: default; }
.rj-ctrl .rj-k { min-width: 4.6em; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* 横並び（2 枚 / 3 枚）。並べたときは操作を「戻る・手数・進む」だけにして 1 行に収める */
.rj-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.rj-row.rj-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; }
.rj-row .rj { margin: 8px 0; max-width: none; min-width: 0; }
.rj-row .rj-wrap { grid-template-columns: 10px 1fr; grid-template-rows: 10px auto; gap: 2px; }
.rj-row .rj-cols, .rj-row .rj-rows { font-size: 8.5px; }
.rj-row .rj-board { border-width: 4px; }
.rj-row .rj-ctrl { gap: 4px; }
.rj-row .rj-ctrl button { padding: 5px 9px; }
/* 並べた図では「1手戻る / 1手進む」の文字を隠して記号だけにする */
.rj-row .rj-ctrl [data-a="prev"], .rj-row .rj-ctrl [data-a="next"] { font-size: 0; }
.rj-row .rj-ctrl [data-a="prev"]::before { content: '◀'; font-size: 12.5px; }
.rj-row .rj-ctrl [data-a="next"]::before { content: '▶'; font-size: 12.5px; }
.rj-row .rj-ctrl [data-a="play"] { font-size: 12px; padding: 5px 8px; }
.rj-row .rj-ctrl .rj-k { min-width: 3.4em; font-size: 12px; }
.rj-row .rj-cap { font-size: 12.5px; }

/* 定石一覧の表 */
.rj-table-wrap { overflow-x: auto; margin: 10px 0; }
.rj-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rj-table th, .rj-table td { border-bottom: 1px solid var(--bg-soft); padding: 6px 6px; text-align: left; vertical-align: top; }
.rj-table th { color: var(--ink); font-weight: 900; white-space: nowrap; background: var(--bg); }
.rj-table td:first-child { white-space: nowrap; font-weight: 700; color: var(--ink); }
.rj-table td small { display: block; white-space: normal; font-size: 11px; font-weight: 500; color: var(--ink-mute); }
.rj-table a { color: var(--accent-deep); text-decoration: none; }
.rj-table code { display: block; font-family: inherit; font-size: 12px; color: var(--ink-mute); word-break: break-word; }
.rj-eval { display: inline-block; font-size: 11.5px; padding: 0 7px; border-radius: 999px; white-space: nowrap; }
.rj-eval.b { background: #2a2218; color: #fff; }
.rj-eval.w { background: #fff; color: var(--ink); border: 1px solid var(--bg-deep); }
.rj-eval.e { background: var(--bg-soft); color: var(--ink-soft); }
/* 英語版は名前（Heath / Tobidashi 等）と形勢（White slightly better）が長いので、スマホ幅で折り返す */
.rj-table:lang(en) td:first-child { white-space: normal; min-width: 7em; }
.rj-table:lang(en) .rj-eval { white-space: normal; border-radius: 9px; padding: 1px 7px; line-height: 1.35; }