/* ============================================================
   盤面図（記事内の静的図）— guide-diagram.css
   ・生成元は scripts/board-diagrams/*.json、焼くのは scripts/generate-board-diagrams.py
   ・石の見た目は gomoku-style.css の .stone.black / .stone.white を「そのまま」使う
     （統一感の出どころは CSS。ここでは位置と余白だけを与える）
   ・盤は 7x7 切り出し固定（D-9）。390px 幅で 1 マス約 50px を確保する
   ・色は全て変数で受ける（フォールバック付き）。他ゲームへ流用するときは
     このファイルを public/styles/ へ移し、変数だけ差し替えれば済む形にしてある（D-4）
   ・ランタイム JS なし・インライン style なし（本番 CSP の style-src に依存しない）
   ============================================================ */

.dg {
  margin: 18px auto 40px;
  max-width: min(350px, 100%);
}

.dg-board {
  position: relative;
  aspect-ratio: 1;            /* 図の高さが先に決まるので CLS が出ない */
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 22%, #efdcb2 0%, transparent 62%),
    linear-gradient(135deg, var(--wood-light, #e2c894) 0%, var(--wood-mid, #c9a76f) 52%, var(--wood-dark, #b8945e) 100%);
  box-shadow:
    inset 0 0 60px rgba(120, 80, 30, 0.26),
    inset 0 2px 6px rgba(0, 0, 0, 0.16),
    0 6px 18px rgba(42, 34, 24, 0.18);
}

.dg-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.dg-line {
  stroke: var(--board-line, #3d2810); stroke-width: 0.7; opacity: 0.85;
  vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision;
}
.dg-star { fill: var(--board-line, #3d2810); opacity: 0.9; }

/* 交点 1 マス分の器。石とマークはこの中に絶対配置される（.stone は inset:8% で効く） */
.dg-p {
  position: absolute;
  width: calc(100% / 7);
  height: calc(100% / 7);
  z-index: 4;
}
.dg-c0 { left: 0 }             .dg-r0 { top: 0 }
.dg-c1 { left: calc(100% / 7) } .dg-r1 { top: calc(100% / 7) }
.dg-c2 { left: calc(200% / 7) } .dg-r2 { top: calc(200% / 7) }
.dg-c3 { left: calc(300% / 7) } .dg-r3 { top: calc(300% / 7) }
.dg-c4 { left: calc(400% / 7) } .dg-r4 { top: calc(400% / 7) }
.dg-c5 { left: calc(500% / 7) } .dg-r5 { top: calc(500% / 7) }
.dg-c6 { left: calc(600% / 7) } .dg-r6 { top: calc(600% / 7) }

/* 手順番号（四追いの図）。石の上に載るので朱の最終手マーカーとは併用しない */
.dg-p .stone { display: flex; align-items: center; justify-content: center; }
.dg-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(13px, 3.6vw, 17px);
  font-weight: 600; line-height: 1;
  pointer-events: none;
}
.stone.black .dg-num { color: #f3e8d2; }
.stone.white .dg-num { color: #2a2218; }
.stone.last:has(.dg-num)::after { display: none; }

/* 空点に置くマーク（a/b のラベル・注目点の丸・禁点の×） */
.dg-mk {
  position: absolute; inset: 12%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; line-height: 1;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(14px, 4vw, 18px);
}
/* a / b のラベルは「白石」と紛らわしくならないよう朱で統一する（注目点の丸と同じ語彙） */
.dg-mk-label {
  background: rgba(245, 239, 228, 0.5);
  border: 2px solid var(--vermillion, #b53726);
  color: var(--vermillion, #b53726);
}
.dg-mk-focus {
  border: 2.5px dashed var(--vermillion, #b53726);
  background: rgba(245, 239, 228, 0.35);
}
/* 禁点の×。文字（U+00D7）はフォント依存で極端に小さく出るので 2 本のバーで描く */
.dg-mk-x::before, .dg-mk-x::after {
  content: ''; position: absolute;
  left: 50%; top: 12%; width: 3px; height: 76%; margin-left: -1.5px;
  background: var(--vermillion, #b53726); border-radius: 2px;
  box-shadow: 0 0 0 1.5px rgba(245, 239, 228, 0.7);
}
.dg-mk-x::before { transform: rotate(45deg); }
.dg-mk-x::after  { transform: rotate(-45deg); }

/* 図番号と名前のピル。盤の左上（全図で最上段が空いている）に重ねる */
.dg-tag {
  position: absolute; top: 8px; left: 8px; z-index: 5;
  display: inline-flex; align-items: stretch;
  border-radius: 999px; overflow: hidden;
  font-size: 13px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgba(42, 34, 24, 0.25);
}
.dg-tag b, .dg-tag span { padding: 6px 10px; }
.dg-tag b {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  background: var(--vermillion, #b53726); color: #fff;
}
.dg-tag span { background: rgba(245, 239, 228, 0.94); color: var(--ink, #2a2218); }

/* ------------------------------------------------------------
   アニメーション（データの anim を持つ図だけ）
   ・dg-n<手数> = 図全体、dg-s<k> = k 手目に置かれる石、dg-l<a>-<u> = a 手目の後に出て u 手目で消える筋の帯
   ・動きを止めた状態（reduced-motion）＝完成図になるよう、
     既定のスタイルは最終形にしておき、途中経過だけを keyframes で作る
   ------------------------------------------------------------ */
.dg-hl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.dg-hl line { stroke-width: 0.56; stroke-linecap: round; opacity: 0.55; }
.dg-hl .dg-hl-four   { stroke: var(--vermillion, #b53726); }
.dg-hl .dg-hl-three  { stroke: var(--hl-three, #1f5fb0); }
.dg-hl .dg-hl-closed { stroke: var(--ink-soft, #5a4e3a); }
.dg-hl .dg-hl-five   { stroke: var(--gold, #c8962e); }

.dg-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ink-soft, #5a4e3a); }
.dg-legend span::before {
  content: ''; display: inline-block; width: 18px; height: 8px; margin-right: 5px;
  border-radius: 4px; vertical-align: 1px; opacity: 0.75;
}
.dg-lg-four::before   { background: var(--vermillion, #b53726); }
.dg-lg-three::before  { background: var(--hl-three, #1f5fb0); }
.dg-lg-closed::before { background: var(--ink-soft, #5a4e3a); }
.dg-lg-five::before   { background: var(--gold, #c8962e); }

/* 石が置かれる・帯が出入りする keyframes は手数で 1 周の長さが変わるので、データから焼く。
   石の置き方は対局画面の place（0 → 1.14 → 1）と同じ動き */
/* anim:generated — scripts/generate-board-diagrams.py --write が書き換える。手で編集しない */
/* 1 手・1 周 6.2 秒 */
.dg-n1 .dg-s1 { animation: dg-n1-s1 6.2s ease-out infinite; }
@keyframes dg-n1-s1 { 0%, 9.68% { transform: scale(0); opacity: 0; } 11.61% { transform: scale(1.14); opacity: 1; } 13.55%, 90.32% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n1 .dg-l1-2 { animation: dg-n1-l1-2 6.2s ease-in-out infinite; }
@keyframes dg-n1-l1-2 { 0%, 17.74% { opacity: 0; } 25.81%, 88.71% { opacity: 0.55; } 95.16%, 100% { opacity: 0; } }
/* 2 手・1 周 7.5 秒 */
.dg-n2 .dg-s1 { animation: dg-n2-s1 7.5s ease-out infinite; }
@keyframes dg-n2-s1 { 0%, 8% { transform: scale(0); opacity: 0; } 9.6% { transform: scale(1.14); opacity: 1; } 11.2%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n2 .dg-s2 { animation: dg-n2-s2 7.5s ease-out infinite; }
@keyframes dg-n2-s2 { 0%, 25.33% { transform: scale(0); opacity: 0; } 26.93% { transform: scale(1.14); opacity: 1; } 28.53%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n2 .dg-l2-3 { animation: dg-n2-l2-3 7.5s ease-in-out infinite; }
@keyframes dg-n2-l2-3 { 0%, 32% { opacity: 0; } 38.67%, 90.67% { opacity: 0.55; } 96%, 100% { opacity: 0; } }
/* 5 手・1 周 11.4 秒 */
.dg-n5 .dg-s1 { animation: dg-n5-s1 11.4s ease-out infinite; }
@keyframes dg-n5-s1 { 0%, 5.26% { transform: scale(0); opacity: 0; } 6.32% { transform: scale(1.14); opacity: 1; } 7.37%, 94.74% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n5 .dg-s2 { animation: dg-n5-s2 11.4s ease-out infinite; }
@keyframes dg-n5-s2 { 0%, 16.67% { transform: scale(0); opacity: 0; } 17.72% { transform: scale(1.14); opacity: 1; } 18.77%, 94.74% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n5 .dg-s3 { animation: dg-n5-s3 11.4s ease-out infinite; }
@keyframes dg-n5-s3 { 0%, 28.07% { transform: scale(0); opacity: 0; } 29.12% { transform: scale(1.14); opacity: 1; } 30.18%, 94.74% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n5 .dg-s4 { animation: dg-n5-s4 11.4s ease-out infinite; }
@keyframes dg-n5-s4 { 0%, 39.47% { transform: scale(0); opacity: 0; } 40.53% { transform: scale(1.14); opacity: 1; } 41.58%, 94.74% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n5 .dg-s5 { animation: dg-n5-s5 11.4s ease-out infinite; }
@keyframes dg-n5-s5 { 0%, 50.88% { transform: scale(0); opacity: 0; } 51.93% { transform: scale(1.14); opacity: 1; } 52.98%, 94.74% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n5 .dg-l1-2 { animation: dg-n5-l1-2 11.4s ease-in-out infinite; }
@keyframes dg-n5-l1-2 { 0%, 9.65% { opacity: 0; } 14.04%, 15.79% { opacity: 0.55; } 19.3%, 100% { opacity: 0; } }
.dg-n5 .dg-l1-3 { animation: dg-n5-l1-3 11.4s ease-in-out infinite; }
@keyframes dg-n5-l1-3 { 0%, 9.65% { opacity: 0; } 14.04%, 27.19% { opacity: 0.55; } 30.7%, 100% { opacity: 0; } }
.dg-n5 .dg-l3-5 { animation: dg-n5-l3-5 11.4s ease-in-out infinite; }
@keyframes dg-n5-l3-5 { 0%, 32.46% { opacity: 0; } 36.84%, 50% { opacity: 0.55; } 53.51%, 100% { opacity: 0; } }
.dg-n5 .dg-l5-6 { animation: dg-n5-l5-6 11.4s ease-in-out infinite; }
@keyframes dg-n5-l5-6 { 0%, 55.26% { opacity: 0; } 59.65%, 93.86% { opacity: 0.55; } 97.37%, 100% { opacity: 0; } }
/* 13 手・1 周 21.8 秒 */
.dg-n13 .dg-s1 { animation: dg-n13-s1 21.8s ease-out infinite; }
@keyframes dg-n13-s1 { 0%, 2.75% { transform: scale(0); opacity: 0; } 3.3% { transform: scale(1.14); opacity: 1; } 3.85%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s2 { animation: dg-n13-s2 21.8s ease-out infinite; }
@keyframes dg-n13-s2 { 0%, 8.72% { transform: scale(0); opacity: 0; } 9.27% { transform: scale(1.14); opacity: 1; } 9.82%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s3 { animation: dg-n13-s3 21.8s ease-out infinite; }
@keyframes dg-n13-s3 { 0%, 14.68% { transform: scale(0); opacity: 0; } 15.23% { transform: scale(1.14); opacity: 1; } 15.78%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s4 { animation: dg-n13-s4 21.8s ease-out infinite; }
@keyframes dg-n13-s4 { 0%, 20.64% { transform: scale(0); opacity: 0; } 21.19% { transform: scale(1.14); opacity: 1; } 21.74%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s5 { animation: dg-n13-s5 21.8s ease-out infinite; }
@keyframes dg-n13-s5 { 0%, 26.61% { transform: scale(0); opacity: 0; } 27.16% { transform: scale(1.14); opacity: 1; } 27.71%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s6 { animation: dg-n13-s6 21.8s ease-out infinite; }
@keyframes dg-n13-s6 { 0%, 32.57% { transform: scale(0); opacity: 0; } 33.12% { transform: scale(1.14); opacity: 1; } 33.67%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s7 { animation: dg-n13-s7 21.8s ease-out infinite; }
@keyframes dg-n13-s7 { 0%, 38.53% { transform: scale(0); opacity: 0; } 39.08% { transform: scale(1.14); opacity: 1; } 39.63%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s8 { animation: dg-n13-s8 21.8s ease-out infinite; }
@keyframes dg-n13-s8 { 0%, 44.5% { transform: scale(0); opacity: 0; } 45.05% { transform: scale(1.14); opacity: 1; } 45.6%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s9 { animation: dg-n13-s9 21.8s ease-out infinite; }
@keyframes dg-n13-s9 { 0%, 50.46% { transform: scale(0); opacity: 0; } 51.01% { transform: scale(1.14); opacity: 1; } 51.56%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s10 { animation: dg-n13-s10 21.8s ease-out infinite; }
@keyframes dg-n13-s10 { 0%, 56.42% { transform: scale(0); opacity: 0; } 56.97% { transform: scale(1.14); opacity: 1; } 57.52%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s11 { animation: dg-n13-s11 21.8s ease-out infinite; }
@keyframes dg-n13-s11 { 0%, 62.39% { transform: scale(0); opacity: 0; } 62.94% { transform: scale(1.14); opacity: 1; } 63.49%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s12 { animation: dg-n13-s12 21.8s ease-out infinite; }
@keyframes dg-n13-s12 { 0%, 68.35% { transform: scale(0); opacity: 0; } 68.9% { transform: scale(1.14); opacity: 1; } 69.45%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-s13 { animation: dg-n13-s13 21.8s ease-out infinite; }
@keyframes dg-n13-s13 { 0%, 74.31% { transform: scale(0); opacity: 0; } 74.86% { transform: scale(1.14); opacity: 1; } 75.41%, 97.25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n13 .dg-l9-10 { animation: dg-n13-l9-10 21.8s ease-in-out infinite; }
@keyframes dg-n13-l9-10 { 0%, 52.75% { opacity: 0; } 55.05%, 55.96% { opacity: 0.55; } 57.8%, 100% { opacity: 0; } }
.dg-n13 .dg-l11-12 { animation: dg-n13-l11-12 21.8s ease-in-out infinite; }
@keyframes dg-n13-l11-12 { 0%, 64.68% { opacity: 0; } 66.97%, 67.89% { opacity: 0.55; } 69.72%, 100% { opacity: 0; } }
.dg-n13 .dg-l13-14 { animation: dg-n13-l13-14 21.8s ease-in-out infinite; }
@keyframes dg-n13-l13-14 { 0%, 76.61% { opacity: 0; } 78.9%, 96.79% { opacity: 0.55; } 98.62%, 100% { opacity: 0; } }
/* 19 手・1 周 29.6 秒 */
.dg-n19 .dg-s1 { animation: dg-n19-s1 29.6s ease-out infinite; }
@keyframes dg-n19-s1 { 0%, 2.03% { transform: scale(0); opacity: 0; } 2.43% { transform: scale(1.14); opacity: 1; } 2.84%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s2 { animation: dg-n19-s2 29.6s ease-out infinite; }
@keyframes dg-n19-s2 { 0%, 6.42% { transform: scale(0); opacity: 0; } 6.82% { transform: scale(1.14); opacity: 1; } 7.23%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s3 { animation: dg-n19-s3 29.6s ease-out infinite; }
@keyframes dg-n19-s3 { 0%, 10.81% { transform: scale(0); opacity: 0; } 11.22% { transform: scale(1.14); opacity: 1; } 11.62%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s4 { animation: dg-n19-s4 29.6s ease-out infinite; }
@keyframes dg-n19-s4 { 0%, 15.2% { transform: scale(0); opacity: 0; } 15.61% { transform: scale(1.14); opacity: 1; } 16.01%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s5 { animation: dg-n19-s5 29.6s ease-out infinite; }
@keyframes dg-n19-s5 { 0%, 19.59% { transform: scale(0); opacity: 0; } 20% { transform: scale(1.14); opacity: 1; } 20.41%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s6 { animation: dg-n19-s6 29.6s ease-out infinite; }
@keyframes dg-n19-s6 { 0%, 23.99% { transform: scale(0); opacity: 0; } 24.39% { transform: scale(1.14); opacity: 1; } 24.8%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s7 { animation: dg-n19-s7 29.6s ease-out infinite; }
@keyframes dg-n19-s7 { 0%, 28.38% { transform: scale(0); opacity: 0; } 28.78% { transform: scale(1.14); opacity: 1; } 29.19%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s8 { animation: dg-n19-s8 29.6s ease-out infinite; }
@keyframes dg-n19-s8 { 0%, 32.77% { transform: scale(0); opacity: 0; } 33.18% { transform: scale(1.14); opacity: 1; } 33.58%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s9 { animation: dg-n19-s9 29.6s ease-out infinite; }
@keyframes dg-n19-s9 { 0%, 37.16% { transform: scale(0); opacity: 0; } 37.57% { transform: scale(1.14); opacity: 1; } 37.97%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s10 { animation: dg-n19-s10 29.6s ease-out infinite; }
@keyframes dg-n19-s10 { 0%, 41.55% { transform: scale(0); opacity: 0; } 41.96% { transform: scale(1.14); opacity: 1; } 42.36%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s11 { animation: dg-n19-s11 29.6s ease-out infinite; }
@keyframes dg-n19-s11 { 0%, 45.95% { transform: scale(0); opacity: 0; } 46.35% { transform: scale(1.14); opacity: 1; } 46.76%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s12 { animation: dg-n19-s12 29.6s ease-out infinite; }
@keyframes dg-n19-s12 { 0%, 50.34% { transform: scale(0); opacity: 0; } 50.74% { transform: scale(1.14); opacity: 1; } 51.15%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s13 { animation: dg-n19-s13 29.6s ease-out infinite; }
@keyframes dg-n19-s13 { 0%, 54.73% { transform: scale(0); opacity: 0; } 55.14% { transform: scale(1.14); opacity: 1; } 55.54%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s14 { animation: dg-n19-s14 29.6s ease-out infinite; }
@keyframes dg-n19-s14 { 0%, 59.12% { transform: scale(0); opacity: 0; } 59.53% { transform: scale(1.14); opacity: 1; } 59.93%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s15 { animation: dg-n19-s15 29.6s ease-out infinite; }
@keyframes dg-n19-s15 { 0%, 63.51% { transform: scale(0); opacity: 0; } 63.92% { transform: scale(1.14); opacity: 1; } 64.32%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s16 { animation: dg-n19-s16 29.6s ease-out infinite; }
@keyframes dg-n19-s16 { 0%, 67.91% { transform: scale(0); opacity: 0; } 68.31% { transform: scale(1.14); opacity: 1; } 68.72%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s17 { animation: dg-n19-s17 29.6s ease-out infinite; }
@keyframes dg-n19-s17 { 0%, 72.3% { transform: scale(0); opacity: 0; } 72.7% { transform: scale(1.14); opacity: 1; } 73.11%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s18 { animation: dg-n19-s18 29.6s ease-out infinite; }
@keyframes dg-n19-s18 { 0%, 76.69% { transform: scale(0); opacity: 0; } 77.09% { transform: scale(1.14); opacity: 1; } 77.5%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-s19 { animation: dg-n19-s19 29.6s ease-out infinite; }
@keyframes dg-n19-s19 { 0%, 81.08% { transform: scale(0); opacity: 0; } 81.49% { transform: scale(1.14); opacity: 1; } 81.89%, 97.97% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.dg-n19 .dg-mu13-14 { animation: dg-n19-m13-14 29.6s linear infinite; }
@keyframes dg-n19-m13-14 { 0%, 55.74% { opacity: 0; } 56.76%, 59.12% { opacity: 1; } 59.53%, 100% { opacity: 0; } }
.dg-n19 .dg-mu13-15 { animation: dg-n19-m13-15 29.6s linear infinite; }
@keyframes dg-n19-m13-15 { 0%, 55.74% { opacity: 0; } 56.76%, 63.51% { opacity: 1; } 63.92%, 100% { opacity: 0; } }
.dg-n19 .dg-l9-10 { animation: dg-n19-l9-10 29.6s ease-in-out infinite; }
@keyframes dg-n19-l9-10 { 0%, 38.85% { opacity: 0; } 40.54%, 41.22% { opacity: 0.55; } 42.57%, 100% { opacity: 0; } }
.dg-n19 .dg-l10-14 { animation: dg-n19-l10-14 29.6s ease-in-out infinite; }
@keyframes dg-n19-l10-14 { 0%, 43.24% { opacity: 0; } 44.93%, 58.78% { opacity: 0.55; } 60.14%, 100% { opacity: 0; } }
.dg-n19 .dg-l11-12 { animation: dg-n19-l11-12 29.6s ease-in-out infinite; }
@keyframes dg-n19-l11-12 { 0%, 47.64% { opacity: 0; } 49.32%, 50% { opacity: 0.55; } 51.35%, 100% { opacity: 0; } }
.dg-n19 .dg-l12-15 { animation: dg-n19-l12-15 29.6s ease-in-out infinite; }
@keyframes dg-n19-l12-15 { 0%, 52.03% { opacity: 0; } 53.72%, 63.18% { opacity: 0.55; } 64.53%, 100% { opacity: 0; } }
.dg-n19 .dg-l13-14 { animation: dg-n19-l13-14 29.6s ease-in-out infinite; }
@keyframes dg-n19-l13-14 { 0%, 56.42% { opacity: 0; } 58.11%, 58.78% { opacity: 0.55; } 60.14%, 100% { opacity: 0; } }
.dg-n19 .dg-l15-16 { animation: dg-n19-l15-16 29.6s ease-in-out infinite; }
@keyframes dg-n19-l15-16 { 0%, 65.2% { opacity: 0; } 66.89%, 67.57% { opacity: 0.55; } 68.92%, 100% { opacity: 0; } }
.dg-n19 .dg-l15-17 { animation: dg-n19-l15-17 29.6s ease-in-out infinite; }
@keyframes dg-n19-l15-17 { 0%, 65.2% { opacity: 0; } 66.89%, 71.96% { opacity: 0.55; } 73.31%, 100% { opacity: 0; } }
.dg-n19 .dg-l17-19 { animation: dg-n19-l17-19 29.6s ease-in-out infinite; }
@keyframes dg-n19-l17-19 { 0%, 73.99% { opacity: 0; } 75.68%, 80.74% { opacity: 0.55; } 82.09%, 100% { opacity: 0; } }
.dg-n19 .dg-l19-20 { animation: dg-n19-l19-20 29.6s ease-in-out infinite; }
@keyframes dg-n19-l19-20 { 0%, 82.77% { opacity: 0; } 84.46%, 97.64% { opacity: 0.55; } 98.99%, 100% { opacity: 0; } }
/* /anim:generated */
@media (prefers-reduced-motion: reduce) {
  .dg-anim .stone, .dg-anim .dg-hl line { animation: none; }
  .dg-anim .dg-hl .dg-tmp { display: none; }   /* 途中でだけ見せる帯は、完成図では消しておく */
  .dg-anim .dg-mtmp { animation: none; display: none; }   /* 石が来るまでの印も、完成図では消す */
}

/* 説明は図にぴったり付け、次の図との間は広く取る（どの図の説明かを距離で示す） */
.dg-cap {
  margin-top: 6px;
  font-size: 13px; line-height: 1.75;
  color: var(--ink-soft, #5a4e3a);
}
/* 番号と名前はピルで見せているので、読み上げ用にだけ残す */
.dg-cap-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 箇条書きの項目に図を付けるとき（項目の説明 → その図）。li の字下げを打ち消して本文幅で置く */
.guide-section li > .dg { margin-left: auto; margin-right: auto; }
.guide-section li:has(> .dg) { margin-bottom: 28px; }

/* 手順図の操作（guide-diagram.js が差し込む）。1 手戻る／再生・停止／1 手進む＋手数 */
.dg-ctl {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; margin-top: 8px;
}
.dg-ctl button {
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  padding: 8px 12px; min-height: 36px;
  border: 1px solid rgba(42, 34, 24, 0.25); border-radius: 999px;
  background: rgba(245, 239, 228, 0.94); color: var(--ink, #2a2218);
  cursor: pointer;
}
.dg-ctl button:hover { background: #fff; }
.dg-ctl button:focus-visible { outline: 2px solid var(--vermillion, #b53726); outline-offset: 2px; }
.dg-ctl .dg-ctl-play { background: var(--vermillion, #b53726); border-color: var(--vermillion, #b53726); color: #fff; min-width: 76px; }
.dg-ctl-count {
  flex-basis: 100%; text-align: center;
  font-family: 'Fraunces', Georgia, serif; font-size: 13px; color: var(--ink-soft, #5a4e3a);
}

/* 好形の名前を覚える小図は 3 枚横並び（石 3 つだけなので 1/3 幅でも読める）。ピルは隠し、名前は図の下に出す */
.dg-trio {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 380px; margin: 18px auto 32px;
}
.dg-trio .dg { margin: 0; max-width: none; }
.dg-trio .dg-tag { display: none; }
.dg-trio .dg-cap { font-size: 12px; line-height: 1.6; text-align: center; }
.dg-trio .dg-cap-label {   /* ピルを隠したぶん、図番号と名前は見せる */
  position: static; display: block; width: auto; height: auto;
  overflow: visible; clip: auto; white-space: normal; color: var(--ink, #2a2218);
}

/* 対比図（正解／失敗）は縦積み。D-9 のとおり 390px で横並びにはしない */
@media (min-width: 900px) {
  .dg { max-width: 380px; }
}