/* Tスピン講座ページだけの版面。
   game.css（筐体）は読み込まない —— ここは遊技機ではなく「講座の盤」。
   練習ページとの差: あちらは技メニュー＋ドリル、こちらは 5 歩のウォークスルー。 */

/* ---------- 見出しまわり ---------- */
.crumbs {
  margin: 14px 0 6px;
  font-size: 11.5px; color: var(--muted); line-height: 1.7;
}
.crumbs a { color: var(--sub); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.page-tspin h1 {
  margin: 0 0 8px;
  font-size: 25px; font-weight: 900; color: var(--ink); line-height: 1.35;
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
}

/* 自動解説プレイヤー：盤を中央に大きく、説明は吹き出しで盤の中に */
/* 高さではなく幅で決める。
   高さ基準（height: --intro-h / width: auto）にしていたときは、
   canvas の実幅が --intro-h ÷ 2 になる一方で枠は 360px 固定だったので、
   左右に盤の地色が 25px ずつはみ出し、空の列が 1 本ずつ増えて見えていた。
   幅から組めば canvas が枠をぴったり埋める。
   margin-top の % は「包含ブロックの幅」に対して解決されるので、
   canvas の高さ（＝幅の 2 倍）の cut ぶん＝幅の cut×2 倍を負で指定する */
.intro-screen {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  width: min(100%, 340px);
  aspect-ratio: 1 / calc(2 * (1 - var(--intro-cut)));
  background: var(--board-bg);
  border: 1.5px solid var(--board-edge);
  border-radius: 8px;
  /* 盤は触らない。吹き出しは pointer-events 不要 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#intro-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 2;
  margin-top: calc(var(--intro-cut) * -200%);
  pointer-events: none;
}


.intro-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 12px;
}
.intro-dots {
  display: flex; gap: 6px; align-items: center;
}
.intro-dots span {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--line);
  transition: background .2s, transform .2s;
}
.intro-dots span.is-done { background: var(--green); }
.intro-dots span.is-now {
  background: var(--cta);
  transform: scale(1.25);
}
.intro-toggle {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  padding: 7px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.intro-toggle:hover { border-color: var(--accent); color: var(--accent); }
.intro-loop-note { font-size: 11.5px; color: var(--muted); }


.primer-next-label {
  margin: 14px 0 8px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.primer-go {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius);
  background: var(--cta); color: #fff; box-shadow: 0 3px 0 var(--cta-edge);
  padding: 12px 20px; font-size: 13.5px; font-weight: 900;
  text-decoration: none; font-family: inherit;
}
.primer-go:hover { background: var(--cta-hover); color: #fff; }

/* 本文（特殊Tスピンの節）から講座の該当の歩へ飛ぶ導線。
   4 つ続けて置くので .primer-go（塗りの CTA）では強すぎて本文が読めなくなる。
   枠だけの錠剤にして、流れを切らずに「押せる」ことだけ示す。
   ⚠ .link-button は使わないこと —— あれは game.css の定義で、この頁は
   game.css を読んでいないので素の文字になる（2026-09-01 に実際そうなった）*/
.lab-jump {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px;
  border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: 0 2px 0 var(--stroke);
  font-size: 12.5px; font-weight: 900; color: var(--ink); text-decoration: none;
}
.lab-jump:hover { background: var(--soft); color: var(--ink); }
.lab-jump:active { transform: translateY(2px); box-shadow: none; }

/* 特殊Tスピンの 4 枚。縦に段落＋釦を 4 回並べると、FIN と NEO の対比
   （同じ 2 段消しで 1,200 点と 400 点）が離れて読めない。横に並べて比べさせる */
.polymer-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin: 14px 0 10px;
}
.polymer-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px 16px;
  border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-lg, 16px);
  background: var(--surface); box-shadow: 0 3px 0 var(--stroke);
}
.polymer-card h3 { margin: 0; font-size: 15px; }
/* 講座盤の grid をそのまま描いた図。色は盤と同じ意味：灰＝埋まり、橙＝T ミノ */
.polymer-fig { width: 100%; max-width: 320px; height: auto; display: block; }
/* RUF は 3 コマなので幅を使い切らせる。同じ上限だと 1 コマが米粒になる */
.polymer-fig[aria-label^="RUF"] { max-width: none; }
/* 全消し講座の図。盤そのものではなく「空き」を読ませるので、
   埋まりの上に空きを橙の点線で囲って数えられるようにする ——
   灰色の埋まりだけだと、どこを数えるのかが伝わらない */
.polymer-fig.pc-fig { max-width: 380px; }
.polymer-fig .pe { fill: none; stroke: var(--accent, #e8892b); stroke-width: 1.4; stroke-dasharray: 2.5 2; }
.polymer-fig .pb { fill: var(--board-bg, #fbf6ea); stroke: var(--stroke); stroke-width: 1.5; }
.polymer-fig .pc { fill: var(--stroke); opacity: .32; }
.polymer-fig .pt { fill: var(--accent, #e8892b); stroke: var(--stroke); stroke-width: 1; }
.polymer-fig .pl { font-size: 9px; font-weight: 900; fill: var(--ink); }
.polymer-fig .pa { font-size: 16px; font-weight: 900; fill: var(--stroke); }
.polymer-card p { margin: 0; font-size: 13.5px; line-height: 1.7; }
.polymer-card .polymer-score {
  align-self: flex-start;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--soft); font-weight: 900; font-size: 12.5px;
}
.polymer-card .lab-jump { align-self: flex-start; margin-top: auto; }
.polymer-notes { margin: 8px 0 0; padding-left: 1.2em; font-size: 13px; line-height: 1.8; }
.polymer-notes li + li { margin-top: 6px; }
@media (max-width: 700px) { .polymer-grid { grid-template-columns: 1fr; } }

/* 下から何段見せるか。.55 = 下 9 段 */
:root { --intro-cut: .5; }   /* 下 10 段。盤がほぼ正方形になる */



/* ---------- 見出し行 ----------
   H1 と副題を同じ行に流す。左揃えのまま横へ置くと、1 行目だけで
   「何のページか」と「どう進むか」が同時に読める */
.title-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
  margin: 2px 0 10px;
}
/* 見出しの標は既存 3 ページと同じ形にする（layout.css の .title-row h1）。
   独自のクラスを切ったせいで、この標だけ受け継げていなかった */
/* トップと同じ「壁に掛けた標札」。layout.css の .title-row h1 と同じ値にする ——
   独自クラスを切っているぶん自動では継げないので、あちらを直したら
   ここも直すこと（前回それを忘れて、講座だけ縦棒のまま取り残された）*/
.page-tspin .title-line h1 {
  margin: 0; font-size: 18px; font-weight: 900; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 15px 4px 11px;
  background: var(--surface); border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--radius-pill); box-shadow: 0 2px 0 var(--stroke);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
}
.page-tspin .title-line h1::before {
  content: ''; display: inline-block; flex: none;
  width: 4px; height: 18px; border-radius: var(--radius-pill); background: var(--brand-red);
}
.title-sub { margin: 0; font-size: 13px; color: var(--sub); line-height: 1.8; }

.role-note {
  position: relative;
  display: inline-block; max-width: 100%;
  margin: 0; padding: 8px 16px 8px 28px;
  border-radius: 999px;
  background: var(--soft); border: 1px solid var(--line-soft);
  font-size: 12px; line-height: 1.7; color: var(--sub);
}
/* 点は絶対配置。flex 項目にすると <b> や <a> まで項目扱いになり、
   文が語の塊ごとに切れて改行が壊れる */
.role-note::before {
  content: ''; position: absolute; left: 14px; top: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.role-note b { color: var(--ink); }
.role-note a { color: var(--accent); font-weight: 700; text-decoration: none; }
.role-note a:hover { text-decoration: underline; }

/* ---------- ① 入門カード ---------- */
.primer {
  margin: 16px 0 0;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-card); padding: 20px 22px 22px;
}
/* 左＝動くもの、右＝読むもの。並べて初めて「いまどの手順か」が結びつく */
.primer-grid {
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.primer-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: var(--cta); }
.primer h2 {
  margin: 0 0 8px; font-size: 18px; font-weight: 900; color: var(--ink);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
}
.primer-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.95; color: var(--sub); text-wrap: pretty; max-width: 46em; }

/* ---------- 盤 ---------- */
/* 盤は右柱に対して縦中央。上端で揃えると、盤のほうが 150px ほど短いぶん
   下だけが空いて重心が左上に寄る。中央に置くと左右の重さが釣り合う */
.primer-stage { display: flex; flex-direction: column; gap: 12px; align-self: center; }
.intro-screen {
  position: relative; overflow: hidden;
  display: flex; justify-content: center;
  width: 100%;
  aspect-ratio: 1 / calc(2 * (1 - var(--intro-cut)));
  background: var(--board-bg);
  border: 1.5px solid var(--board-edge);
  border-radius: 10px;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
#intro-board {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 2;
  margin-top: calc(var(--intro-cut) * -200%);
  pointer-events: none;
}
/* 盤の上には小さな札だけ。手順そのものは右の一覧が持つので、
   ここは「いま何歩目か」を見失わないための目印で足りる */
.intro-badge {
  position: absolute; z-index: 3; top: 10px; left: 10px;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: 12px; color: var(--ink); font-weight: 700;
  max-width: calc(100% - 20px);
}
.intro-badge b { flex: none; color: var(--cta); font-size: 11px; font-weight: 900; letter-spacing: .04em; }

/* ---------- 手順の一覧 ----------
   6 歩ぶんを常に出しておく。いま光っている 1 歩だけでなく、
   これから何が起きるか・さっき何をしたかが同時に見える */
/* 一覧は伸ばしきらない。1 行が 40 字を超えると、
   短い説明でも目が行末から行頭へ戻れなくなる */
.beat-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-width: 46em; }
.beat {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 12px; border-radius: 11px;
  background: var(--surface); border: 1.5px solid var(--line-soft);
  transition: background .18s, border-color .18s;
}
.beat-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--soft); color: var(--muted);
  font-size: 13px; font-weight: 900;
}
.beat-body { min-width: 0; }
.beat-title { display: block; font-size: 14px; font-weight: 900; color: var(--ink); line-height: 1.5; }
.beat-note { display: block; font-size: 12px; line-height: 1.55; color: var(--sub); margin-top: 2px; }
.beat.is-now { background: var(--now-bg); border-color: var(--cta); }
.beat.is-now .beat-no { background: var(--cta); color: #fff; }
.beat.is-done .beat-no { background: var(--ok-bg); color: var(--green); }

/* ---------- 3 条件 ---------- */
.cond-band {
  margin-top: 18px; padding: 16px 18px;
  border-radius: var(--radius-card);
  background: var(--soft); border: 1px solid var(--line-soft);
}
.cond-band h3 { margin: 0 0 10px; font-size: 14px; font-weight: 900; color: var(--ink); }
.cond-cards {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.cond-cards li {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 12px 14px;
  font-size: 12.5px; line-height: 1.7; color: var(--sub);
}
.cond-cards li > span:last-child { min-width: 0; }
.cond-cards b { color: var(--ink); }
.cond-no {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 900;
}

@media (max-width: 900px) {
  .primer-grid { grid-template-columns: 1fr; gap: 16px; }
  .cond-cards { grid-template-columns: 1fr; }
}

/* ---------- ② 講座本体 ----------
   読む → 見る → 試す。盤は説明の「あと」に置く */

.tour {
  margin: 18px 0 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 16px;
}

.tour-head { display: flex; flex-direction: column; gap: 7px; }
.tour-steps { display: flex; gap: 8px; align-items: flex-start; }
/* 棒だけだと「何の 5 歩か」が始める前に読めない。棒の下に題を常時出す。
   棒は ::before に退避 —— 釦そのものを棒にすると文字の置き場が無い */
.step-dot {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  border: 0; padding: 0; cursor: pointer; background: transparent;
  font-family: inherit;
}
.step-dot::before {
  content: ''; display: block; height: 5px; border-radius: 999px;
  background: var(--line);
}
.step-dot.is-done::before { background: var(--green); }
.step-dot.is-now::before { background: var(--cta); }
.step-dot span {
  font-size: 10.5px; line-height: 1.45; color: var(--muted);
  text-align: center; overflow-wrap: anywhere;
}
.step-dot.is-now span { color: var(--ink); font-weight: 700; }
.step-dot:hover::before { outline: 2px solid var(--accent-weak); outline-offset: 2px; }

/* いま何をすべきか（読む / 見る / 試す）*/

.tour-blurb {
  margin: 0;
  font-size: 14px; line-height: 1.9; color: var(--ink);
  text-wrap: pretty;
}

/* 説明が左、盤が右。820 幅の中で 1fr + 280px */


/* ---------- 盤 ----------
   下 9 段だけ見せる（上を切り落として 1 マスを大きくする）。
   実体は .tour-stage の所（幅から組む版）。ここは値だけ持つ。

   以前はここにも高さから組む版（--lab-h と height 指定）が残っていて、
   枠の高さは古い方・canvas の寸法とずらし幅は新しい方、と別々の規則から
   採られていた。両者は前提が食い違うので、切り落とし量が .55 のはずが
   実測 .74 になり、見えるのが 9 段ではなく 5 段になっていた
   （＝ y=12 に置いたミノが枠の外にいて、影だけが見える状態）*/
:root { --lab-cut: .55; }


/* ---------- 盤上の演出 ---------- */
.fx-layer {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-items: center;
  line-height: 1.35; text-align: center; white-space: pre-line;
  --fx-size: 22px;
}
.fx {
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  font-size: var(--fx-size); font-weight: 700; letter-spacing: .04em;
  color: var(--board-ink);
  text-shadow: 0 0 3px var(--board-bg), 0 0 3px var(--board-bg), 0 0 6px var(--board-bg);
  animation: fx-pop 900ms ease-out forwards;
}
.fx-big { --fx-size: 24px; }
@keyframes fx-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(.86); }
  14%  { opacity: 1; transform: translateY(0) scale(1.06); }
  26%  { transform: translateY(0) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px) scale(1); }
}

/* ---------- 指示パネル ---------- */




/* 操作の常駐ヒント。見るだけの歩では JS が hidden を付ける */

.tour-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.lab-reset {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  padding: 9px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.lab-reset:hover { border-color: var(--accent); color: var(--accent); }
.lab-reset:disabled {
  opacity: .55; cursor: not-allowed;
  border-color: var(--line); color: var(--muted);
}

/* お手本が主ボタン。初心者の第一アクション */

.lab-next {
  flex: 1 1 auto;
  min-width: 10em;
  border: 0; border-radius: var(--radius);
  background: var(--cta); color: #fff; box-shadow: 0 3px 0 var(--cta-edge);
  padding: 10px 14px; font-size: 12.5px; font-weight: 900; cursor: pointer;
  font-family: inherit; text-align: center;
}
.lab-next:hover { background: var(--cta-hover); }
.lab-next:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cta-edge); }
/* 未クリア時のスキップ、および「お手本が主役」の歩では次へを弱く */

.lab-finish {
  margin: 2px 0 0; padding: 11px 13px;
  border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok-line);
  font-size: 12.5px; line-height: 1.85; color: var(--ok-ink);
}
.lab-finish a { color: var(--ok-ink); font-weight: 700; text-decoration: underline; }

/* ---------- 図版（詳解側） ---------- */
.fig { margin: 14px 0 12px; }
.fig-row { display: flex; gap: 14px; flex-wrap: wrap; }
.fig-cell {
  margin: 0; flex: 1 1 190px; min-width: 0;
  background: var(--page); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 12px 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative;
}
.fig-board { display: block; width: 100%; height: auto; max-width: 190px; border-radius: 3px; }
/* 開幕テンプレの盤は 10 列ある。Tスピンの図（6 列）と同じ 190px へ収めると
   1 マスが 19px になり、どのミノがどれか読めなくなる */
.fig.is-wide .fig-board { max-width: 430px; }
.fig.is-wide .fig-cell { flex: 1 1 300px; }
/* 盤 1 枚だけの図。伸ばすと 430px の盤が 1,100px のカードの真ん中に
   ぽつんと載り、左右が死ぬ。2 枚並べる図のカードと同じ幅で止める */
.fig.is-solo .fig-cell { flex: 0 1 490px; }
/* 3 コマ並べる図（DT砲 の「置く → 回す → 消える」）。2 コマ用の 300px 基準では
   960px の窓に 3 枚入らず 2+1 に折れ、3 コマ目だけが倍の大きさで出ていた。
   幅は等分にして、入らなくなったら縦に積む */
.fig.is-trio .fig-cell { flex: 1 1 0; min-width: 150px; }
.fig.is-trio .fig-board { max-width: 100%; }
@media (max-width: 560px) {
  /* 歩が 9 つになると 1 つ 29px しか取れず、題が 4 行に折れて帯が縦に伸びる
     （特殊Tスピンの 4 歩を足した 2026-09-01 に発生）。
     窄屏では棒だけにする —— いまの歩の題は .tour-now の data-step-title が
     別に出しているので、読める情報は減らない。
     ⚠ 棒だけだと指で押せる高さが 5px しか無くなるので、釦に padding を足す */
  .tour-steps { gap: 5px; }
  .step-dot { padding: 7px 0; }
  .step-dot span { display: none; }
 .fig.is-trio .fig-cell { flex: 1 1 100%; } }
.fig-cell figcaption { font-size: 11.5px; color: var(--sub); line-height: 1.6; text-align: center; }
.fig-mark {
  position: absolute; top: 8px; right: 8px;
  font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px;
}
.fig-mark.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.fig-mark.is-ng { background: var(--ng-bg); color: var(--ng-ink); }
.fig-note { margin: 10px 0 0 !important; font-size: 12px !important; color: var(--muted) !important; line-height: 1.85 !important; }

:root {
  /* 図版は「盤の絵」なので、実際の盤・実際の T ミノと同じ色で描く。
     独自に近い色を作っていたころは、遊んだ直後に図を見ると
     同じ物のはずなのに別の盤に見えていた。
     ブロック上辺の明かりは各色を白と混ぜて作る —— 3 つの明色を
     手で選ぶと、地の色を変えたときに追従しない */
  --fig-bg: var(--board-bg);
  --fig-grid: var(--board-grid);
  --fig-junk: var(--silver);  --fig-junk-top: color-mix(in srgb, var(--silver) 75%, #fff);
  --fig-roof: var(--hi);      --fig-roof-top: color-mix(in srgb, var(--hi) 75%, #fff);
  --fig-t: var(--mino-t);     --fig-t-top: color-mix(in srgb, var(--mino-t) 75%, #fff);
  --fig-ok: var(--green);
  --fig-ng: var(--ng-ink);
}

/* ---------- 詳解（講座の下） ----------
   遊技区と読み物のあいだに <hr> を 1 本引いていたが、上も下も
   それぞれ独立した白いカードで、あいだに地色の隙間も空いている ——
   境目はすでに 2 重に付いていて、線は 3 本目だった。
   線が持っていた上の余白だけ、ここへ引き取る */
.page-tspin .content-grid { margin-top: 34px; }

/* 詳解は 1 節 1 横条。2 列に並べると、図を入れたときに
   左右で高さが噛み合わず、節の切れ目が読めなくなる。
   1 行が長くなりすぎないよう、本文側だけ幅を止める */
.page-tspin .content-grid { grid-template-columns: 1fr; }
/* 本文の幅止めは layout.css へ移した（全ページ共通）*/

/* ---------- 狭い画面 ---------- */
@media (max-width: 720px) {
  .primer { padding: 14px 14px 16px; }
  .intro-screen { width: min(100%, 320px); }
  .tour { padding: 12px 12px 14px; }
  .tour-stage { grid-template-columns: 1fr; }
  .tour-board { max-width: 280px; margin: 0 auto; width: 100%; }
  .tour-actions { flex-direction: column; }
  .lab-next, .lab-reset, .lab-demo { width: 100%; }
  .primer-go { width: 100%; }
}

@media (max-width: 560px) {
  /* ---------- 設計稿 1a：盤を小さくして天井へ貼り付ける ----------
     この頁は本文が長い。盤が上に流れて消えると、読んでいる説明が
     アニメのどの歩の話なのか分からなくなり、そのたびに上下へ往復することになる。
     盤を縮めて天井に留め、いま何歩目か・何をしている歩かを盤の右へ置けば、
     顔を上げるだけで済む。
     ⚠ DOM の並びは変えない。組み替えは lesson.js の placeIntroSide が
       要素を移すだけで、部品そのものは作り直さない */
  .primer-stage {
    z-index: 20;
    /* この帯で読ませたいのは まずアニメ。字幕はその補助なので、
       横幅の取り分は盤を優先する。
       ⚠ 固定値で置かない。狭い端末では字幕が 1 行 6 字まで痩せる ——
         画面幅の 4 割を上限に、狭いほど盤も一緒に小さくなるようにする */
    /* ⚠ 字幕は盤の横ではなく下に、幅いっぱいで置く。横に並べると柱は
       360px の画面で 147px しか無く、39 字の字幕が 4〜5 行になって切れた
       （DT砲 と REN で実際にそうなった）。下へ回せば 2 行で収まる。
       上の行は 盤｜（歩の札・進みと一時停止）*/
    display: grid;
    grid-template-columns: minmax(0, min(34vw, 124px)) minmax(0, 1fr);
    grid-template-areas: 'board side' 'cap cap';
    gap: 8px 11px; align-items: center;
    /* 左右いっぱいに敷く。中身の幅に留めると、貼り付いたときに
       背後の本文が両脇から透けて落ち着かない */
    /* 下は 13px。盤の下辺は box-shadow の 3px で厚みを出しており、
       9px だと帯の仕切り線にくっついて見える */
    margin: 0 calc(var(--wrap-pad, 14px) * -1); padding: 10px var(--wrap-pad, 14px) 13px;
    background: var(--page); border-bottom: 2px solid var(--stroke);
  }
  /* 天井に貼り付いているあいだ。lesson.js の pinIntro が付け外しする */
  .primer-stage.is-pinned {
    position: fixed; top: 0; left: 0; right: 0; margin: 0;
    padding-left: 14px; padding-right: 14px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 14%, transparent);
  }
  .intro-spacer { display: block; }
  /* ⚠ 貼り付け用にさらに切り詰めない。下 8 段まで詰めたところ、DT砲 の頁で
     T を撃ち込む穴が上端で切れた —— 頁ごとに盤のどこを使うかが違うので、
     各頁が決めた比（既定 .5 ＝ 下 10 段）をそのまま使う */
  .primer-stage .intro-screen {
    grid-area: board; width: 100%;
    /* 器の描き方を界面の他の札とそろえる —— 細い輪郭のままだと、
       この帯だけ別の設計から借りてきたように浮く */
    border: 2px solid var(--stroke); border-radius: 12px;
    box-shadow: 0 3px 0 var(--stroke);
  }

  .intro-side { grid-area: side; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  /* 札は盤に重ねず、右の柱の 1 行目として置く */
  .intro-side .intro-badge {
    position: static; align-self: flex-start; padding: 4px 10px;
    box-shadow: none; background: var(--soft); font-size: 11.5px;
  }
  /* 字幕。いま何をしている歩かを枠で囲って目立たせる（設計稿 1a）*/
  .intro-cap {
    grid-area: cap;
    margin: 0; padding: 6px 9px;
    background: var(--surface); border: 1.5px solid var(--cta);
    border-radius: 9px;
    font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--ink);
    /* 2 行で切る。⚠ 高さも合わせて止めること —— line-clamp だけだと
       3 行目の上半分が枠の中に覗いて、切れかけの字が残る（実機で確認）。
       ⚠ この頁は box-sizing: border-box なので、max-height には
         上下の余白（6+6）と輪郭（1.5+1.5）も足すこと。
         足し忘れると 2 行ぶんのはずが 1.2 行しか入らない */
    /* 3 行まで。2 行で切っていたときは、DT砲 と REN の字幕が途中で切れて
       意味が取れなかった（站長報告）。柱の高さは盤（152px）に合わせてあり、
       札 27 ＋ 隙間 16 ＋ 操作 37 を除くと 3 行ぶんが収まる */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden; max-height: calc(1.5em * 3 + 15px);
  }
  /* ⚠ 下の一覧からは字幕を落とす。天井の帯が「いまの歩」の字幕を出しているので、
     一覧にも同じ文を置くと、同じ文章が画面に 2 つ並ぶ（站長指摘）。
     役割を分ける —— 帯＝いまどの歩か・何をしているか、
     一覧＝6 歩ぜんぶの見出しだけの見取り図。設計稿 1a の一覧も見出しだけ */
  .beat-note { display: none; }
  /* 畳んだ一覧。閉じているのが既定 —— 開くのは見渡したくなった人だけ */
  .beats-fold {
    margin: 10px 0 0; padding: 0;
    border: var(--stroke-w) solid var(--line); border-radius: 12px;
    background: var(--surface);
  }
  .beats-fold > summary {
    padding: 10px 14px; cursor: pointer; list-style: none;
    font-size: 13px; font-weight: 800; color: var(--sub);
  }
  .beats-fold > summary::-webkit-details-marker { display: none; }
  .beats-fold > summary::after {
    content: '▾'; float: right; color: var(--muted); transition: transform .18s;
  }
  .beats-fold[open] > summary::after { transform: rotate(180deg); }
  .beats-fold[open] > summary { border-bottom: 1px solid var(--line); }
  .beats-fold .beat-list { padding: 10px; }
  .beat { padding: 8px 10px; }
  .beat-title { font-size: 13px; }

  .intro-side .intro-bar { margin: 0; gap: 10px; flex-wrap: nowrap; align-items: center; }
  /* ⚠ 折り返させない。「一時停止」が 2 行になると操作の行が 2 倍の背になり、
     そのぶん字幕が押し出される（站長報告）*/
  .intro-side .intro-toggle { padding: 5px 12px; font-size: 12px; white-space: nowrap; flex: none; }
  .intro-side .intro-dots { flex: 1 1 auto; min-width: 0; }
  .intro-side .intro-loop-note { display: none; }   /* 幅が足りない。点と釦で足りる */

  .intro-screen { width: min(100%, 300px); }
  .lab-corners { font-size: 11px; }
  .fx-layer { --fx-size: 16px; }
  .fx-big { --fx-size: 18px; }
  .page-tspin h1 { font-size: 20px; }
}

/* ---------- 操作部（②講座本体） ----------
   左＝盤と押せるボタン、右＝いま何が満たせているか。
   前は「キーの一覧」を並べるだけだったので、キーボードに馴染みが無い人と
   スマホの人には押す物がどこにも無かった。 */
.tour-kicker { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: var(--cta); }
.tour-title {
  margin: 2px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 18px; font-weight: 900; color: var(--ink);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
}
.tour-now { margin: 4px 0 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tour-now b { font-size: 11px; font-weight: 900; color: var(--cta); letter-spacing: .04em; }
.tour-now span { font-size: 14px; font-weight: 800; color: var(--ink); }
.tour-blurb { margin: 6px 0 0; font-size: 14px; line-height: 1.9; color: var(--sub); max-width: 52em; }

.tour-stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 24px; align-items: start; margin-top: 6px;
}

/* 釦は盤の下ではなく横。
   下に置くと左の柱だけ釦のぶん（126px）背が高くなり、
   右の柱（手順＋チェック＋伝言＋次へ＝313px）との差が 160px 開いて、
   右下に大きな抜けができていた。横に置けば柱の高さは盤で決まり、
   左 336px / 右 313px とほぼ揃う。

   釦は盤と同じ高さまで伸ばす。伸ばさないと今度は釦の下に
   130px の穴が空いて、抜けの場所が変わるだけになる */
.tour-play {
  display: grid;
  grid-template-columns: 340px 200px;
  grid-template-areas: 'screen pad' 'note note';
  gap: 12px 12px; align-items: stretch; justify-content: start;
}
.lab-screen { grid-area: screen; }
.pad { grid-area: pad; }
.pad-note { grid-area: note; }
.tour-play, .tour-play * {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lab-screen {
  position: relative; overflow: hidden; display: flex; justify-content: center;
  width: 100%;
  aspect-ratio: 1 / calc(2 * (1 - var(--lab-cut)));
  background: var(--board-bg); border: 1.5px solid var(--board-edge); border-radius: 10px;
  touch-action: none;
}
#board {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 2;
  margin-top: calc(var(--lab-cut) * -200%);
  touch-action: none; border: 0;
}

/* 2 列 3 段に固定。← と → が横並びになる順に DOM が並んでいる。
   折り返しに任せていたときは、歩ごとに釦の数が変わるたびに
   幅も行数も動いた（いまは数が変わらないので、その心配も無い）*/
.pad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pad-key {
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  padding: 12px 6px; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit;
  /* 「固定する（判定）」が「固定する（判／定）」と割れていた。
     和文は既定でどこでも折れるので、貪欲に詰めた所で切れる。
     keep-all で字間の折り返しを止め、markup 側の <wbr>（＝括弧の前）
     だけを折り返し位置として残す → 「固定する／（判定）」 */
  word-break: keep-all;
}
.pad-key:hover { border-color: var(--accent); color: var(--accent); }
.pad-key:active { transform: translateY(1px); }
/* その歩で使わない釦。消すと数が変わって幅も行数も動くので、置いたまま暗くする */
.pad-key:disabled { opacity: .34; cursor: default; }
.pad-key:disabled:hover { border-color: var(--line); color: var(--ink); }
.pad-key:disabled:active { transform: none; }
.pad-key.is-reset { color: var(--muted); font-weight: 700; }

/* いま押す物。枠が脈打つ以外の差は付けない ——
   ボタンごとに色を変えると「橙＝固定」なのか「橙＝次に押す物」なのかが
   混ざり、どちらの意味でもなくなる */
.pad-key.is-next {
  color: var(--now-ink); background: var(--now-bg);
  animation: pad-pulse 1.1s ease-in-out infinite;
}
/* ⚠ 脈打つ色に橙の薄いのを使わないこと。地色がクリームなので、
   16% では地に沈んで点滅しているのか分からない —— 練習ページの
   .pr-key.is-next でも同じことが起きていた（站長報告）。
   赤を不透明で置き、輪郭ごと色を変える */
/* 動きを減らす設定の人には脈を止める。ただし印は残すこと ——
   点滅が消えただけで「次に押す物」まで分からなくなっては本末転倒 */
@media (prefers-reduced-motion: reduce) {
  .pad-key.is-next {
    animation: none;
    box-shadow: inset 0 0 0 3px var(--brand-red); border-color: var(--brand-red);
  }
}
@keyframes pad-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; border-color: var(--cta); }
  50%      { box-shadow: inset 0 0 0 3px var(--brand-red); border-color: var(--brand-red); }
}
.pad-note { margin: 0; font-size: 11px; color: var(--muted); text-align: center; }

.tour-side { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 対照表 ----------
   「同じ観点で複数を並べて比べる」中身は、カードでも折り畳みでも読めない ——
   火力どうしを比べたいのに、カードだと 3 枚のあいだを目で往復することになる。

   見た目の枠組みは base.css の .legal table（法務ページの表）と同じ物を使う。
   あちらの選択子は .legal 配下に閉じているので、講座ページ用にここへ置く。
   角丸と外枠だけ、隣り合う .fig-cell に合わせてある */
.table-wrap {
  margin: 14px 0 10px;
  overflow-x: auto;                     /* 375px では 5 列が必ずあふれる */
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.content-section table {
  width: 100%; min-width: 420px;
  border-collapse: collapse;
  font-size: 13px;
}
.content-section th,
.content-section td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left; vertical-align: top; line-height: 1.7;
  white-space: nowrap;
}
/* いちばん外側の罫は .table-wrap が持つ。消さないと二重線になる */
.content-section tr > *:first-child { border-left: 0; }
.content-section tr > *:last-child { border-right: 0; }
.content-section thead th { border-top: 0; }
.content-section tbody tr:last-child > * { border-bottom: 0; }

.content-section thead th { background: var(--soft); color: var(--ink); font-weight: 700; }
/* 行の見出し（テンプレ名）。数値より先に目が入る側なので少し強く */
.content-section tbody th { background: var(--surface); color: var(--ink); font-weight: 800; }
.content-section td { color: var(--sub); }
.table-note {
  margin: 0 0 4px !important;
  font-size: 11.5px !important; color: var(--muted) !important; line-height: 1.8 !important;
}

/* 手順。文で書くと「← ←」がどちらの ← の話か分からない ——
   1 つずつ札にして「済み／いま／まだ」を見た目で言う。

   枠も地色も付けない。付けていたときは、右の柱が
   橙（手順）→ 青（成立チェック）→ 緑（判定）→ 橙（次へ）と
   通し幅の色帯 4 本になり、どこを見ればいいのか分からなかった。
   しかも橙の地に白い札を載せていたので、ひとつの物に高亮が二重。
   濃い色は「いま押す物」ひとつに絞る */
.trail {
  margin: 0 2px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 1px;
}
.trail-step { display: inline-flex; align-items: center; }
.trail-step + .trail-step::before {
  content: '›'; margin: 0 5px 0 2px; color: var(--line); font-weight: 700;
}
.trail-step span {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; line-height: 1.7;
  color: var(--muted);
}
/* 済んだ物は薄く残す。消すと「さっき何を押したか」が追えない */
.trail-step.is-done span { background: var(--soft); color: var(--sub); }
.trail-step.is-now span { background: var(--cta); color: var(--surface); font-weight: 800; }

/* 3 条件をそのまま出す。「四隅 1/4」の 1 行だけでは、
   回転で入れ損ねているのか隅が足りないのかが区別できない */
.check-card {
  padding: 13px 15px; border-radius: var(--radius);
  background: var(--page); border: 1px solid var(--line-soft);
}
.check-card h3 { margin: 0 0 9px; font-size: 12.5px; font-weight: 900; color: var(--ink); }
.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.check-list li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.check-list i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--line); position: relative; }
.check-list li[data-ok="true"] { color: var(--ink); font-weight: 700; }
.check-list li[data-ok="true"] i { background: var(--green); }
.check-list li[data-ok="true"] i::after {
  content: ''; position: absolute; left: 6px; top: 4px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.check-list b { font-weight: 700; color: var(--sub); font-size: 11.5px; margin-left: 2px; }
/* 「最後の操作」はカードの底へ。カードが伸びたぶんを
   チェックの直下に空けると、3 行と 1 行が離れて別の物に見える */
.check-last { margin: 9px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); }
.check-last b { color: var(--ink); font-weight: 800; }


@media (max-width: 900px) {
  .tour-stage { grid-template-columns: 1fr; }
  /* 縦 1 列になったら釦は盤の下へ戻す。横のままだと
     盤も釦も半分ずつの幅になり、どちらも小さくなりすぎる */
  .tour-play {
    grid-template-columns: minmax(0, 340px);
    grid-template-areas: 'screen' 'pad' 'note';
    align-items: start;
  }
  .pad { grid-template-rows: none; }
}

/* 通していない歩の「次へ」は、教わる導線と競わせない。
   同じ大きさの橙を 2 つ並べていたときは、押すべき物が選べなかった */
.lab-next.is-skip {
  background: transparent; color: var(--muted);
  box-shadow: none; border: 0;
  padding: 6px 4px; font-size: 11.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.lab-next.is-skip:hover { background: transparent; color: var(--accent); }
.lab-next.is-skip:active { transform: none; }
.tour-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 外したあとの戻り道。判定が出ているあいだは操作ボタンを受け付けないので、
   ここが唯一の出口になる。外したときだけ目立たせる ——
   ふだんから目立たせると「やり直すのが普通」に見えてしまう */
.pad-key.is-reset.is-way-out {
  background: var(--surface); border-color: var(--cta); color: var(--now-ink);
  box-shadow: 0 2px 0 var(--now-edge);
}
/* 判定中は押せる物を消しておく。押しても何も起きない物が残っていると
   「壊れた」と受け取られる */
.pad.is-judging .pad-key:not(.is-reset) { opacity: .38; pointer-events: none; }

/* ヒントと判定が使い回す 1 枠。色で「いまどの状態か」を言う */
.tour-msg {
  margin: 0; padding: 11px 14px; border-radius: var(--radius);
  font-size: 12.5px; line-height: 1.8;
  border: 1px solid var(--line-soft); background: var(--soft); color: var(--sub);
}
/* 手順を外して押しただけ。盤は壊れていないので、判定の赤とは分ける */
.tour-msg[data-state="off"] { background: var(--now-bg); border-color: var(--now-line); color: var(--now-ink); font-weight: 700; }
.tour-msg[data-state="ok"] { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); font-weight: 700; }
.tour-msg[data-state="ng"] { background: var(--ng-bg); border-color: var(--ng-line); color: var(--ng-ink); font-weight: 700; }
.tour-msg:empty { display: none; }

/* 得点の棒。数字を並べるだけでは「4 倍」が体に来ない */
.fig-bars { display: block; width: 100%; height: auto; max-width: 400px; }
[data-fig="score"] { margin: 14px 0 12px; }
[data-fig="score"] .fig-note { margin-top: 8px !important; }



/* 目次から飛んだとき、見出しがヘッダーに隠れない */
.page-tspin [id] { scroll-margin-top: 18px; }

/* 節の中の小見出し */
.page-tspin .content-section h3 {
  margin: 18px 0 6px; font-size: 13.5px; font-weight: 900; color: var(--ink);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
}
.page-tspin .content-section h3:first-of-type { margin-top: 14px; }

/* ---------- 講座ページの柱 ----------
   遊技カード（.primer/.tour）と本文カードで幅が違うと、途中で版面が
   縮んで見える。講座ページは 1 本の柱（960px）で通し、本文カードの中は
   横 padding で読み行（--measure）に据える —— 余りは 60px 台なので
   ふつうのカード余白にしか見えない */
.page-tspin .wrap { max-width: 960px; }
.page-tspin .content-grid { max-width: 960px; margin-inline: auto; }
.page-tspin .content-section { padding: 22px max(26px, calc((100% - var(--measure)) / 2)); }


/* 3 状態を並べて「変化」を見せる図。盤そのものは .fig-cell に載せて
   幅は flex に任せる（SVG に矢印まで描くと幅が固定になり、
   カードの中で右側が余った）。矢印は盤と盤のあいだ＝gap の位置に置く */
.fig[data-fig="loop"] .fig-cell { position: relative; }
.fig[data-fig="loop"] .fig-cell:not(:last-child)::after {
  content: '→';
  position: absolute; right: -17px; top: 50%; transform: translateY(-50%);
  font-size: 15px; font-weight: 900; color: var(--muted);
  line-height: 1; pointer-events: none;
}
/* 折り返して縦積みになったら、矢印も下向きにする */
/* ---------- スマホの「やってみる」（縦 1 列）----------
   ここは押した結果をその場で確かめる場所なので、
   盤・判定・釦の 3 つが同時に見えていないと成立しない。

   直す前は 盤(302) → 釦(161) → 手順 → 判定(169) の順に積んでいて、
   全部で 866px あった。視口が 664px しか無い端末では、釦を押した瞬間に
   判定はまだ 300px 下 —— 押す、上へ滑る、また押す、の繰り返しになる。

   並びを 盤 → 判定 → 釦 に組み替え、判定は 1 行に畳む。
   3 つ合わせて 450px 前後に収まり、指を動かさずに結果が読める。

   ⚠ 入れ替えは display:contents で行う。.tour-play と .tour-side という
   2 つの器に分かれた子を 1 列に混ぜるには、器を透かすしかない
   （DOM は PC の 2 段組みのために分けてあり、そちらは動かせない）*/
@media (max-width: 560px) {
  .tour-stage { display: flex; flex-direction: column; gap: 10px; }
  .tour-play, .tour-side { display: contents; }

  .trail        { order: 1; }
  .lab-screen   { order: 2; }
  .check-card   { order: 3; }
  .pad          { order: 4; }
  .pad-note     { order: 5; }
  .tour-msg     { order: 6; }
  .tour-actions { order: 7; }

  /* 盤は高さで決める。幅から決めると、切り取り量（--lab-cut）が
     歩ごとに違うので高さが暴れる */
  /* 盤の高さは端末で決まる定数。画面の大きさに合わせて比で決めるだけで、
     読んでいる最中に測り直したりはしない。

     ⚠ svh と vw だけで書くこと。どちらも端末ごとの固定値で、
       上下の帯が出入りしても変わらない。innerHeight や visualViewport で
       測ると帯の出入りのたびに値が動き、指を動かすたびに盤が伸び縮みする
       —— 站長から「可変にするな、画面が変わったら比で縮めばいい」。
     ⚠ svh は「帯が出ている状態の高さ」。ここを基準にすれば、
       いちばん狭いときでも釦の行が画面に入る。
       23svh は実測から：可視 660px の端末で釦の行がちょうど収まるのが 152px */
  .lab-screen {
    width: auto; align-self: center;
    /* ⚠ px を書かない。画面の大きさに対する比だけで決める ——
       固定値を混ぜると、その値が合わない端末でだけ破綻する（站長指摘）。
       ⚠ 単位は svh と vw だけ。どちらも端末ごとの定数で、上下の帯が
         出入りしても変わらない。innerHeight / visualViewport で測ると
         帯の出入りのたびに動き、指を動かすたびに盤が伸び縮みする。
       23svh は「帯が出ている状態の高さの 23%」。ここを基準にすると、
       いちばん狭いときでも釦の行が画面へ入る。55vw は横に痩せた端末の保険 */
    height: min(55vw, 23svh);
  }

  /* 判定は 1 行に。3 条件を縦に積むと、それだけで 169px を使う ——
     見出しは盤の真下という位置が語るので落とす */
  .check-card { padding: 9px 11px; }
  .check-card h3 { display: none; }
  .check-list { flex-direction: row; flex-wrap: wrap; gap: 5px 12px; }
  .check-list li { font-size: 11.5px; gap: 6px; line-height: 1.5; }
  .check-list i { width: 15px; height: 15px; }
  .check-list li[data-ok="true"] i::after { left: 5px; top: 3px; width: 3px; height: 7px; }
  .check-last { margin-top: 7px; padding-top: 6px; font-size: 11px; }

  /* ---------- ②じぶんの手で試す：1 画面に収める ----------
     ⚠ 実測 954px で視口（844）に入らず、押す釦が最初の画面から外れていた。
       「下でじぶんの手で確かめる」と誘っておいて、着いた先でまた送らせるのは筋が悪い。
     ⚠ この節の指定は必ずこのブロックに書くこと。前半の窄屏ブロック（452 行）は
       .pad などの基本の指定より前にあるので、同じ濃さだと後ろに負ける */
  /* 盤の上で頁を送れるようにする。指の操作は釦に任せた（lesson.js 側）*/
  .lab-screen, .lab-screen #board { touch-action: pan-y; }

  /* 歩を通したあとの行き先。盤の上に重ねる ——
     下に置くと画面の外に残り、進めることに気づけない（站長報告）*/
  .lab-cleared {
    position: absolute; inset: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 10px;
    background: color-mix(in srgb, var(--page) 88%, transparent);
    border-radius: inherit;
  }
  /* 盤の上の釦は小ぶりに。ここは「進める」と知らせる印であって、
     盤を塞ぐ塊ではない */
  .lab-cleared .lab-next {
    /* ⚠ flex を打ち消すこと。素の .lab-next は flex: 1 1 auto ＋ min-width: 10em で、
       縦並びの覆いの中では高さいっぱいまで伸びる（実測 130×98 の塊になった）*/
    flex: 0 0 auto; min-width: 0;
    margin: 0; width: auto; align-self: center;
    padding: 8px 22px; border-radius: var(--radius-pill);
    font-size: 13px; white-space: nowrap;
  }
  .lab-again {
    border: 0; padding: 2px 6px; background: none; color: var(--sub);
    font-family: inherit; font-size: 11.5px; font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  /* 節の見出しは畳む。どこに居るかは上の歩の札が語る */
  .tour-kicker { display: none; }
  .tour-title { font-size: 16px; }
  /* 鍵盤の案内は出さない —— 指の端末に鍵盤は無い */
  .pad-note { display: none; }
  /* 釦は 3 列 2 段。2 列 3 段は縦に 151px 使う */
  .pad { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .pad-key { padding: 10px 4px; font-size: 12px; }

  .tour-msg { padding: 9px 12px; font-size: 12.5px; }
}

/* ---------- 背の低い端末（iPhone SE 級の可視 560px）----------
   ⚠ ここまで詰めるのは、盤が下限（120px）に張り付いてもなお釦が
     画面の外に残るため。落とすのは「どこに居るか」を二重に言っている物から。
     ⚠ 背の高い端末には効かせない —— あちらは詰める理由が無い */
@media (max-width: 560px) and (max-height: 620px) {
  /* 節の名前は落とす。段の札と「ステップ n / 5」が同じことを言っている */
  .tour-title { display: none; }
  /* 説明は 2 行まで。続きは押しながらでも読める */
  .tour-blurb {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; font-size: 13px; line-height: 1.7;
  }
  /* 判定は詰める。読むのは丸が付いたかどうかで、字の大きさではない */
  .check-card { padding: 7px 10px; }
  .check-list li { font-size: 11px; }
  .check-last { margin-top: 5px; padding-top: 5px; font-size: 10.5px; }
  /* 釦は 1 行に収める。「固定する（判定）」が 3 列幅で折れると、
     その 1 枚のために釦の段が 14px 高くなる */
  .pad { gap: 6px; }
  .pad-key { padding: 9px 3px; font-size: 11.5px; }
  .tour-actions { margin-top: 0; }
}

@media (max-width: 560px) {
  .fig[data-fig="loop"] .fig-cell:not(:last-child)::after {
    content: '↓';
    right: auto; left: 50%; top: auto; bottom: -17px;
    transform: translateX(-50%);
  }
}