/* ==========================================================
   カードバトル (.cb-*) — 紙のカード10まいで遊ぶ対戦ルールの解説ページ
   ==========================================================
   デジタルの「マゼモンコロシアム」とは別物のアナログルール。
   もとの資料は紙のルール説明書。

   ■ このページの方針

   ・**読み手は子ども**。1項目を「言い切り(.lead-statement)」で始めて、
     細かい話を .body-detail に落とす、サイト共通のメリハリに従う。
   ・**ルールは必ず絵で示す**。文章だけの節を作らない。
     カードのサンプルは assets/card-battle/(店舗APIから取得した実物)を使い、
     「わざ900 対 650」のような数字の大小もすべて実データで成立している
     (取得と検算は tools/card-battle/fetch_cards.py)。
   ・進行の案内役はハムレス(.cb-talk)。節の入口で何を見ればいいかだけ言う。

   ■ 幅は 720px にそろえている

   このページは説明文が主役なので、読みやすさ優先で
   .lead-statement / .body-detail と同じ 720px に全ブロックを合わせる
   (DESIGN_GUIDELINE の「そのページの多数派の幅にそろえる」)。
   .page-light-inner は 880px なので、下の :scope 指定で絞っている。

   ■ 外すとき

   index.html の <link> 1行と data-page="cardbattle" のページ、
   タブ1行、js/main.js の PAGE_TITLES.cardbattle、
   assets/card-battle/ を消すだけでよい。
   他のCSSに `.cb-` は1つも書いていない。
   ========================================================== */

/* --- ページ全体の幅 -------------------------------------- */
/* `.cb-wide` を付けた要素だけ 720px の縛りから外れる(いまは未使用の逃げ道。
   880px いっぱいに広げたい図を足したくなったときに使う)。
   .about-h3 も対象に入るが、背面の巨大英字は position:absolute なので
   幅を絞っても位置は変わらない */
.page[data-page="cardbattle"] .page-light-inner > *:not(.cb-wide) {
  max-width: 720px;
  margin-inline: auto;
}

/* ==========================================================
   ハムレスのひとこと
   ==========================================================
   図鑑の .dex-talk と同じ役回りだが、あちらは暗い背景専用の色なので
   (白地に置くと吹き出しが黒く沈む)、明るいページ用に作り直したもの。
   ハムレスの顔は透明部分を詰めた _face 版を使う(丸に収めると
   元画像は余白で小さく潰れる) */
.cb-talk {
  display: flex;
  align-items: center;
  gap: 12px;
  /* ページ先頭の暗いセクションは .page-light-inner の外にあり、
     このページの 720px 指定が効かないので自分で持つ */
  max-width: 720px;
  margin: 0 auto 20px;
}

/* 文が短いとき(1〜2行)は、吹き出しを文の幅に合わせて全体を中央に寄せる。
   付けないと 40字ほどの文が幅720pxの箱に1行で入り、右側が大きく空いて間延びする。
   fit-content の上限は 720px のままなので、長い文では従来どおり折り返す */
.cb-talk.is-short {
  width: fit-content;
  max-width: min(720px, 100%);
}

/* この文は「これは カードだけで あそべる …」と**分かち書き**になっている。
   keep-all にすると和文の途中では折れず、**空白のところだけで折れる** =
   書いてある文節のとおりに改行される。
   auto-phrase だけでは 375px で「あそべる たい / せんルールじゃ。」と
   語中で切れていた(実測)。いちばん長い文節は「たいせんルールじゃ。」で
   141px、320pxのときの吹き出しの内側(約198px)に収まる */
.cb-talk.is-short .cb-talk-text { word-break: keep-all; }

.cb-talk-face {
  flex-shrink: 0;
  width: clamp(56px, 14vw, 78px);
  /* height:auto がないと HTML の height 属性が優先され、
     aspect-ratio が計算されず元画像の高さのまま伸びる */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 42%, #eaf6ff, #cfe6f7);
  border: 2px solid var(--color-text-gallery-title);
  box-shadow: 0 3px 0 rgba(4, 59, 131, 0.16);
}

.cb-talk-text {
  position: relative;
  margin: 0;
  padding: 12px 15px;
  font-size: var(--fs-sub);
  line-height: 1.85;
  color: #2b3a4e;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 12px;
  line-break: strict;
  word-break: auto-phrase;
}

/* 吹き出しの尻尾。枠線が2pxあるので、三角も2枚重ねずに
   回転した四角の左下2辺だけ見せて作る */
.cb-talk-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--color-white);
  border-left: 2px solid var(--color-bg-blue-light);
  border-bottom: 2px solid var(--color-bg-blue-light);
}

/* 暗いセクション(ページ先頭)用 */
.cb-talk.on-dark .cb-talk-text {
  color: var(--color-text-cyan-pale);
  background: rgba(6, 26, 62, 0.66);
  border-color: rgba(157, 252, 255, 0.28);
}
.cb-talk.on-dark .cb-talk-text::before {
  background: rgba(6, 26, 62, 0.66);
  border-color: rgba(157, 252, 255, 0.28);
}
.cb-talk.on-dark .cb-talk-face {
  background: radial-gradient(circle at 50% 42%, rgba(157, 252, 255, 0.26), rgba(6, 26, 62, 0.7));
  border-color: rgba(157, 252, 255, 0.45);
  box-shadow: 0 0 18px rgba(0, 169, 255, 0.35);
}

/* ==========================================================
   「なにを用意するか」のチップ
   ========================================================== */
.cb-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 26px;
}

.cb-meta li {
  /* flex にすると「にんずう」「2」「人」が別々のアイテムになり、
     gap のぶん数字の前後が不自然に空く(実測)。ふつうの行送りで組む */
  padding: 7px 14px;
  font-size: var(--fs-sub);
  color: var(--color-text-cyan-pale);
  background: rgba(6, 26, 62, 0.5);
  border: 1px solid rgba(157, 252, 255, 0.3);
  border-radius: 999px;
}

.cb-meta b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--color-text-cyan);
}

/* ==========================================================
   カード1枚(サンプル表示)
   ==========================================================
   --cb-cw で幅を変える。元画像は 300×472 なので、
   **そこを超えて拡大しない**(guide.webp だけ 560×881 で大きく出せる)。
   図の中で並べるときは grid 側から --cb-cw を上書きする */
.cb-card {
  /* 幅は**外側の箱から --cb-cw で渡す**。ここで自前に設定してしまうと、
     同じ値を .cb-vs-mid(「VS」の縦位置をカードの高さから出している)に
     継承させられない(カスタムプロパティは兄弟には流れない) */
  width: var(--cb-cw, clamp(112px, 30vw, 180px));
  max-width: 100%;
  margin: 0;
}

.cb-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(4, 59, 131, 0.22);
  box-shadow: 0 3px 0 rgba(4, 59, 131, 0.14);
  background: #0a1131;
}

/* 【重要】anywhere を付けること。100px前後の幅では
   「ラブリーベルニャン」のようなカタカナ語に折り返し位置が無く、
   箱からはみ出す。読みやすさは落ちるが、はみ出しよりましと判断した
   (auto-phrase は文節優先で、無理なときだけここが効く) */
.cb-card figcaption {
  overflow-wrap: anywhere;
  margin-top: 6px;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: #445;
  line-break: strict;
  word-break: auto-phrase;
}

.cb-card-name {
  display: block;
  font-weight: 800;
  color: var(--color-primary);
}

/* わざの行。**ここは nowrap にしない**。
   「わざ「衝撃のシールドストーム」 950」のように長いので、
   幅100pxほどのサンプルカードでは 2倍以上はみ出す(実測 211px) */
.cb-card-skill {
  display: block;
  margin-top: 2px;
  line-break: strict;
  word-break: auto-phrase;
}

.cb-card-skill i {
  font-style: normal;
  font-weight: 700;
  color: var(--color-text-blue);
}

/* ぞくせい・HP・COST は短いので、値の途中で折らない */
.cb-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 2px;
}

.cb-card-stats span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cb-card-stats i {
  font-style: normal;
  font-weight: 700;
  color: var(--color-text-blue);
}

/* キズをうけたカードは**さかさま**に置く(ルール本文と同じ表現) */
.cb-card.is-hurt img {
  transform: rotate(180deg);
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(241, 40, 83, 0.35), 0 3px 0 rgba(4, 59, 131, 0.14);
}

/* ==========================================================
   ぞくせいチップ
   ========================================================== */
.cb-attr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  white-space: nowrap;
}

.cb-attr img {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}

/* ==========================================================
   判定バッジ
   ========================================================== */
.cb-badge {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sub);
  color: var(--color-white);
  border-radius: 999px;
  white-space: nowrap;
}

.cb-badge-ko   { background: linear-gradient(135deg, #ff5f83, #e0113d); }
.cb-badge-hit  { background: linear-gradient(135deg, #ffb14d, #e07800); }
.cb-badge-draw { background: linear-gradient(135deg, #9fb2c8, #63788f); }

/* ==========================================================
   バトルの実例 (.cb-vs)
   ==========================================================
   「こうげきする側 / 数字くらべ / うける側」の3列。
   **grid-template-areas で組む**こと。文章の長さでカードの位置が
   動くと、5つ並べたときに図として比べられなくなる。
   狭い画面でも3列のままにして、カード幅(--cb-cw)だけ縮める。
   縦積みにすると「どっちがどっちを攻めたのか」が読めなくなるため */
.cb-vs {
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
  margin-bottom: 14px;
}

.cb-vs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.cb-vs-head :is(h3, h4) {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-primary);
  line-break: strict;
  word-break: auto-phrase;
}

.cb-vs-body {
  /* カード幅の上限。元画像の 300px 以下に留める(拡大すると粗くなる)。
     720pxの箱では 230×2 + 中央の数字列 + gap がちょうど収まる */
  --cb-cw: 230px;
  display: grid;
  /* 中央の数字列に**最低 72px** を確保する。ここが説明の中身なので、
     幅が足りないときはカードを縮めて数字を残す
     (320pxで固定100pxのカードを2枚置くと中央が56pxになり、
     「わざ 900 > 650」が4行に割れた) */
  /* 【重要】カードの列は minmax(0, 1fr)。ただの 1fr は
     「最小でも min-content」なので、キャプションの長い語
     (「ラブリーベルニャン」など)より狭くできず、
     391px幅で右のカードが画面から1px出た(実測) */
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  gap: 4px;
}

.cb-vs-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* カードの絵の高さの半分あたりに「VS」が来るようにする。
     カードの比率は 300:472 なので、絵の高さは幅の1.573倍。
     カードの実幅は列幅で決まるので、js を使わずに済ませるため
     --cb-cw(上限値)から概算している */
  padding-top: calc(var(--cb-cw) * 0.4);
}

.cb-vs-mark {
  font-family: var(--font-title);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-secondary-ink);
}

.cb-vs-calc {
  font-size: var(--fs-caption);
  line-height: 1.65;
  text-align: center;
  color: #445;
  font-variant-numeric: tabular-nums;
}

.cb-vs-calc b { color: var(--color-text-blue); }

/* カードは列の幅に合わせる(上限は --cb-cw)。
   固定幅だと中央の数字列を押しつぶす */
.cb-vs-body > .cb-card,
.cb-synergy-pair > .cb-card {
  width: 100%;
  max-width: var(--cb-cw);
}

.cb-vs-note {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--color-border-gray);
  font-size: var(--fs-sub);
  line-height: 1.85;
  color: #333;
  line-break: strict;
  word-break: auto-phrase;
}

.cb-vs-note strong { color: var(--color-text-blue); }

/* ==========================================================
   盤面図 (.cb-board)
   ==========================================================
   4つのゾーンの位置関係を1枚で見せる図。
   ミニカードは裏面素材(613×965)と実カード(300×472)の混在だが、
   比率はどちらも 0.635 なので同じ枠に収まる */
.cb-board {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}

/* 相手側は上下を返して置く(実際にテーブルで向かい合う配置と同じ) */
.cb-board-side {
  display: grid;
  gap: 8px;
}

.cb-board-side.is-foe {
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--color-bg-blue-light);
}

.cb-board-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-caption);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-text-gallery-title), var(--color-primary));
  padding: 3px 10px;
  border-radius: 3px;
  justify-self: start;
}

.cb-board-side.is-foe .cb-board-label {
  background: linear-gradient(135deg, #97a7bb, #5b6d84);
}

.cb-zone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.cb-zone {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.cb-zone-name {
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-gray-dark);
  line-break: strict;
  word-break: auto-phrase;
}

/* ミニカードの寸法はここで決める。**盤面図の外**(手順の中の小さな図)でも
   .cb-zone-cards だけを単体で使うので、.cb-board 側には置かない */
.cb-zone-cards {
  --cb-mini-w: clamp(38px, 8.4vw, 58px);
  --cb-mini-h: calc(var(--cb-mini-w) * 1.573);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  /* 横向きのカードが混ざっても行の高さが変わらないようにする */
  min-height: var(--cb-mini-h);
}

/* --- ミニカード ---
   .cb-mini は「置き場所」、.cb-mini-inner が「絵」。
   横向き(マナを使った状態)は絵だけを回し、置き場所の縦横を入れ替える。
   絵に rotate をかけるだけだと、回った絵の外接矩形が周りを押しのけて
   行が崩れる */
.cb-mini {
  position: relative;
  width: var(--cb-mini-w);
  height: var(--cb-mini-h);
  flex: 0 0 auto;
}

.cb-mini-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cb-mini-w);
  height: var(--cb-mini-h);
  border-radius: 4px;
  border: 1px solid rgba(4, 59, 131, 0.28);
  background-size: cover;
  background-position: center;
}

.cb-mini-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.cb-mini-back .cb-mini-inner {
  background-image: url("../assets/zukan/card_back.jpg");
}

.cb-mini.is-tapped {
  width: var(--cb-mini-h);
  height: var(--cb-mini-w);
}

/* 原点を左上にして90度回し、はみ出したぶんを右へ戻す。
   CSSの transform は右から順に適用されるので rotate が先で、
   回した絵は x が -(カードの高さ) 〜 0 に来る。だから戻す量は
   **カードの高さ(--cb-mini-h)**。幅で戻すと 33px 左にずれて
   隣のカードに重なる(実測) */
.cb-mini.is-tapped .cb-mini-inner {
  transform: translateX(var(--cb-mini-h)) rotate(90deg);
  transform-origin: top left;
}

/* からっぽの置き場所(バトルゾーンの空き) */
.cb-mini-empty .cb-mini-inner {
  background-image: none;
  border-style: dashed;
  border-color: rgba(4, 59, 131, 0.3);
  background-color: rgba(4, 59, 131, 0.05);
}

.cb-mini-face .cb-mini-inner {
  background-color: #0a1131;
}

/* ==========================================================
   ターンの手順 (.cb-steps)
   ==========================================================
   横並びのカードにすると1手順あたりの説明が入りきらないので、
   **縦1列**に番号付きで積む。番号と本文を grid で組んでいるため、
   本文が何行になっても番号の位置は動かない */
.cb-steps {
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: cb-step;
}

.cb-step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num  title"
    "body body";
  gap: 4px 12px;
  padding: 14px;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}

@media (min-width: 560px) {
  .cb-step {
    grid-template-areas:
      "num title"
      "num body";
  }
}

.cb-step-num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-text-gallery-title), var(--color-primary));
  border-radius: 50%;
}

.cb-step-num::before {
  counter-increment: cb-step;
  content: counter(cb-step);
}

.cb-step-title {
  grid-area: title;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--color-primary);
  line-break: strict;
  word-break: auto-phrase;
}

.cb-step-body {
  grid-area: body;
  font-size: var(--fs-sub);
  line-height: 1.9;
  color: #333;
  line-break: strict;
  word-break: auto-phrase;
}

.cb-step-body strong { color: var(--color-text-blue); }
.cb-step-body p + p { margin-top: 8px; }

/* 手順の中に置く小さな図。本文と同じ箱の中で少し沈めて区切る */
.cb-figure {
  margin: 10px 0 0;
  padding: 12px;
  background: #f4f9fe;
  border: 1px solid var(--color-bg-blue-light);
  border-radius: 10px;
}

.cb-figure-cap {
  margin-top: 8px;
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: #556;
  line-break: strict;
  word-break: auto-phrase;
}

/* before → after を横に並べる(「よこむき→たてむき」など) */
.cb-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cb-flow-item {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.cb-flow-name {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--color-text-gray-dark);
}

/* 矢じりはボーダーで描く。「▶」のグリフは回すと環境によって
   向きが噛み合わないため(css/style.css の .attr-arrow と同じ理由)。
   HTMLには文字が入っているが font-size:0 で消している */
.cb-flow-arrow {
  position: relative;
  width: 12px;
  height: 12px;
  font-size: 0;
  margin-top: clamp(20px, 6vw, 44px);
  flex: 0 0 auto;
}

.cb-flow-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--color-text-gallery-title);
  transform: translate(-50%, -50%);
}

/* 狭い画面では横に並べきれず折り返してしまい、「右を指す矢印の次が
   下の行」という読めない図になる。縦に積んで矢印も下向きにする */
@media (max-width: 559px) {
  .cb-flow { flex-direction: column; }
  .cb-flow-arrow {
    margin-top: 0;
    transform: rotate(90deg);
  }
}

/* ==========================================================
   カードの見かた (.cb-read)
   ========================================================== */
.cb-read {
  display: grid;
  gap: 16px;
}

@media (min-width: 620px) {
  .cb-read {
    grid-template-columns: minmax(190px, 250px) 1fr;
    align-items: start;
  }
}

.cb-read .cb-card {
  --cb-cw: 100%;
  justify-self: center;
}

.cb-read-legend {
  list-style: none;
  display: grid;
  gap: 10px;
  counter-reset: cb-read;
}

.cb-read-legend li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  font-size: var(--fs-sub);
  line-height: 1.85;
  color: #333;
  line-break: strict;
  word-break: auto-phrase;
}

.cb-read-legend li::before {
  counter-increment: cb-read;
  content: counter(cb-read);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--color-white);
  background: var(--color-text-gallery-title);
  border-radius: 50%;
}

.cb-read-legend b {
  color: var(--color-primary);
  margin-right: 4px;
}

.cb-read-legend strong { color: var(--color-text-blue); }

/* ==========================================================
   そざいシナジー (.cb-synergy)
   ========================================================== */
.cb-synergy {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}

.cb-synergy-pair {
  --cb-cw: 230px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  gap: 6px;
}

.cb-synergy-plus {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--color-text-gallery-title);
  padding-top: calc(var(--cb-cw) * 0.45);
}

/* かぶっているそざいを並べる */
.cb-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.cb-chip {
  padding: 4px 10px;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-text-blue);
  background: #eaf5ff;
  border: 1px solid var(--color-bg-blue-light);
  border-radius: 999px;
}

/* COSTの計算式。数字を大きく見せる */
.cb-calc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.cb-calc b {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-secondary);
}

/* ==========================================================
   こまかいルール (.cb-list)
   ========================================================== */
.cb-list {
  list-style: none;
  display: grid;
  gap: 9px;
}

.cb-list li {
  position: relative;
  padding: 10px 14px 10px 34px;
  font-size: var(--fs-sub);
  line-height: 1.85;
  color: #333;
  background: var(--color-white);
  border: 1px solid var(--color-bg-blue-light);
  border-radius: 10px;
  line-break: strict;
  word-break: auto-phrase;
}

.cb-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 1.15em;
  width: 9px;
  height: 9px;
  background: var(--color-text-gallery-title);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.cb-list strong { color: var(--color-text-blue); }

/* ==========================================================
   かんたんはんてい (.cb-quick)
   ==========================================================
   最後に置く早見表。**この節だけ色を変える**(他が白いカードなので、
   「覚えるのはここだけ」が目に入るようにする) */
.cb-quick {
  display: grid;
  gap: 10px;
  padding: 16px;
  color: var(--color-text-cyan-pale);
  background: linear-gradient(140deg, #0b2a5e, #071a3d);
  border: 2px solid rgba(157, 252, 255, 0.3);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.2);
}

.cb-quick-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(157, 252, 255, 0.24);
}

.cb-quick-row:last-child { border-bottom: 0; padding-bottom: 0; }

.cb-quick-cond {
  font-size: var(--fs-sub);
  line-height: 1.7;
  line-break: strict;
  word-break: auto-phrase;
}

.cb-quick-cond b { color: var(--color-text-cyan); }

.cb-quick-note {
  font-size: var(--fs-caption);
  line-height: 1.8;
  color: rgba(222, 251, 252, 0.85);
  line-break: strict;
  word-break: auto-phrase;
}

.cb-quick-note strong { color: var(--color-text-cyan); }

/* ==========================================================
   小さな注記
   ========================================================== */
.cb-note {
  font-size: var(--fs-caption);
  line-height: 1.8;
  color: #556;
  line-break: strict;
  word-break: auto-phrase;
}

.cb-note strong { color: var(--color-text-blue); }

/* 図のあとに付ける出典・補足の間隔 */
.cb-after { margin-top: 14px; }
.cb-before { margin-bottom: 14px; }

/* ==========================================================
   暗いセクションに置くカード
   ==========================================================
   キャプションの既定色(#445)は紺地では読めないため差し替える */
.cb-card.on-dark figcaption { color: rgba(222, 251, 252, 0.85); }
.cb-card.on-dark .cb-card-name { color: var(--color-text-cyan-light); }
.cb-card.on-dark .cb-card-stats i,
.cb-card.on-dark .cb-card-skill i { color: var(--color-text-cyan); }

.cb-card.is-center { margin-inline: auto; }

/* ページ先頭の「じっさいのカード」1枚。guide.webp だけ 560×881 で
   用意してあるので、ここまで大きくしても粗くならない */
.cb-card.is-big { --cb-cw: clamp(190px, 34vw, 300px); }

/* ==========================================================
   じぶんがわの盤面(2列)
   ==========================================================
   もとの資料と同じ並びにする:
     左が「バトルゾーン」「マナゾーン」、右が「とったカード」「てふだ」。
   狭い画面では1列に落とすが、**順番は変えない** */
.cb-board-grid {
  display: grid;
  gap: 10px;
}

@media (min-width: 520px) {
  .cb-board-grid {
    /* 左はカード3枚+マナ5枚が並ぶので広く取る */
    grid-template-columns: 1.6fr 1fr;
  }
}

/* ==========================================================
   ぞくせいの三すくみ (.cb-tri)
   ==========================================================
   サイト共通の .attr-triangle(三角形)ではなく、資料と同じ
   **一直線の輪**にしている。「ぐるっと1しゅうする」ことを
   最後にうすい「ほのお」を置いて示すのが要点で、
   三角形だと どの向きに回るのかが子どもには読み取りにくい */
.cb-tri {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 4px 8px;
  margin: 4px 0 12px;
}

.cb-tri-node {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: clamp(52px, 15vw, 68px);
}

.cb-tri-node img {
  width: clamp(38px, 11vw, 52px);
  height: auto;
  aspect-ratio: 1 / 1;
}

.cb-tri-node span {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-primary);
}

/* 1しゅうして戻ってきた「ほのお」。うすくして重複だと分かるようにする */
.cb-tri-node.is-loop { opacity: 0.4; }

/* 矢じり。フォントの「▶」は環境で向きが揃わないので、
   .attr-arrow と同じくボーダーで描く */
.cb-tri-arrow {
  width: 0;
  height: 0;
  margin-top: clamp(14px, 4vw, 22px);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--color-text-gallery-title);
}

/* ==========================================================
   カードを横にならべる (.cb-card-row)
   ==========================================================
   3枚までなら720pxに収まる。4枚以上を入れるときは --cb-cw を下げること */
.cb-card-row {
  --cb-cw: clamp(92px, 24vw, 196px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

/* .cb-flow の中のカードは小さめ(3コマ並ぶため) */
.cb-flow { --cb-cw: clamp(80px, 21vw, 168px); }

/* たおれたカード。さかさま(.is-hurt)のままだと「キズ1つ」と
   見分けが付かないので、色を落として場から消えたことを示す */
.cb-card.is-down img {
  filter: grayscale(0.85) brightness(0.72);
}

/* 手順リストの上の空き。inline style を書かずに済ませる */
.cb-steps { margin-top: 16px; }

.cb-note.is-center { text-align: center; }

/* 暗いセクションに置く注記 */
.section:not(.page-light) .cb-note { color: rgba(222, 251, 252, 0.8); }

/* シナジーの図の中の説明文は、箱の gap で間隔が付くので margin を消す */
.cb-synergy .cb-figure-cap { margin-top: 0; }

/* ==========================================================
   説明動画 (.cb-video)
   ========================================================== */
.cb-video {
  max-width: 880px;
  margin: 22px auto 0;
}

.cb-video-el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid rgba(157, 252, 255, 0.35);
  box-shadow: 0 0 28px rgba(0, 169, 255, 0.35);
  background: #000;
}

.cb-video figcaption {
  margin-top: 8px;
  font-size: var(--fs-caption);
  line-height: 1.7;
  text-align: center;
  color: rgba(222, 251, 252, 0.85);
  line-break: strict;
  word-break: auto-phrase;
}

/* ==========================================================
   折りたたみ (.cb-fold)
   ==========================================================
   2026-09-10: くわしい節を <details> に入れた。
   もとは全部ひらいた状態で SP 19画面あり「読むページ」になっていた。
   見出し(.about-h3)を summary に入れているので、見出しの上の大きな余白と
   背面の巨大英字はここで打ち消す(12個並ぶと英字がノイズになる) */
.cb-fold {
  margin: 0 auto 10px;
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(4, 59, 131, 0.12);
}

.cb-fold-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 4px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}
.cb-fold-summary::-webkit-details-marker { display: none; }
.cb-fold-summary:hover { background: #f4f9fe; }
.cb-fold-summary:focus-visible { outline: 3px solid var(--color-text-gallery-title); outline-offset: 2px; }

/* summary の中の見出し: 余白と絶対配置の英字をやめて、英字は小さなタグにする */
.cb-fold .about-h3 {
  flex: 1;
  margin: 0;
  padding: 10px 0 10px 14px;
  font-size: clamp(1.05rem, 3.6vw, 1.25rem);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.cb-fold .about-h3-sub {
  position: static;
  z-index: auto;
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: 0.08em;
  opacity: 0.5;
  color: var(--color-text-blue);
}

/* 開閉の目印(矢じり)。ボーダーで描く */
.cb-fold-chev {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--color-text-gallery-title);
  border-bottom: 3px solid var(--color-text-gallery-title);
  transform: rotate(45deg);
  transition: transform 0.2s;
  margin-right: 6px;
}
.cb-fold[open] .cb-fold-chev { transform: rotate(-135deg); margin-top: 6px; }

.cb-fold-body {
  padding: 4px 16px 18px;
  border-top: 1px dashed var(--color-border-gray);
}

/* 折りたたみの中の部品は、外にあったときの左右いっぱい(720px)ではなく箱の中に収める */
.cb-fold-body > * { max-width: none; }

/* 折りたたみの案内文と「すべてひらく」 */
.cb-fold-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 34px auto 14px;
  font-size: var(--fs-sub);
  line-height: 1.8;
  color: #333;
}
.cb-fold-lead strong { color: var(--color-text-blue); }

.cb-fold-all {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-caption);
  color: var(--color-text-blue);
  background: var(--color-white);
  border: 2px solid var(--color-bg-blue-light);
  border-radius: 999px;
  min-height: 44px;
  padding: 8px 18px;
  cursor: pointer;
}
.cb-fold-all:hover { border-color: var(--color-text-gallery-title); }

/* ==========================================================
   ルールブック(印刷用PDF)への導線 (.cb-print)
   ==========================================================
   動画のすぐ下、ページ先頭の暗いセクションに置く。
   「読む」より先に「刷って持っていく」人がいるので、折りたたみより上に出す。

   ■ 用紙の見せ方
   2ページを少し重ねて斜めに置き、「紙が2枚ある」ことを絵で伝える。
   中身は読ませない(読ませるのはページ本体の役目)ので、
   サムネイルは 480px 幅の軽いもので足りる。

   ■ ボタンが2つある理由
   ひらく = ブラウザのPDFビューア(そこから印刷も保存もできる)、
   ダウンロード = download 属性で保存。スマホでは「ひらく」が主、
   PCでは「ダウンロード」も使われるので、どちらも出している。 */
.cb-print {
  max-width: 880px;
  margin: 26px auto 0;
  padding: 20px 22px;
  display: grid;
  gap: 18px;
  align-items: center;
  background: rgba(0, 90, 128, 0.3);
  border: 1px solid var(--color-text-cyan-light);
  border-radius: 14px;
  box-shadow: 0 0 20px var(--color-bg-cyan-light), inset 0 0 18px rgba(157, 252, 255, 0.08);
}

@media (min-width: 620px) {
  .cb-print { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 26px; }
}

/* 用紙2枚。重ねて置くので、2枚目は左に食い込ませる */
.cb-print-sheets {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.cb-print-sheets img {
  width: min(120px, 32vw);
  height: auto;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.cb-print-sheets img:first-child { transform: rotate(-4deg); }
.cb-print-sheets img:last-child { transform: rotate(4deg); margin-left: -22px; }

.cb-print-label {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-text-cyan);
}

.cb-print-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-white);
  line-break: strict;
  word-break: auto-phrase;
}

/* 文節の途中で折らない。320pxで「印刷して あ / そぼう」と切れた(実測)。
   auto-phrase が効かない環境でも同じ結果になるよう、文節を span で包んでいる */
.cb-print-title .nobr { white-space: nowrap; }

.cb-print-note {
  margin: 0;
  font-size: var(--fs-sub);
  line-height: 1.85;
  color: var(--color-text-cyan-pale);
  line-break: strict;
  word-break: auto-phrase;
}
.cb-print-note strong { color: var(--color-text-cyan); }

.cb-print-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 14px;
}
/* .cta-button の既定の上余白(28px)は、ここでは actions の gap が担うので消す */
.cb-print-open { margin-top: 0; }

.cb-print-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sub);
  color: var(--color-text-cyan-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cb-print-dl:hover { color: var(--color-text-cyan); }
.cb-print-dl:focus-visible { outline: 2px solid var(--color-text-cyan); outline-offset: 3px; }