/* ルール説明（目次 ＋ 1節ずつ読む画面）。
   図はすべてこのファイルのクラスで描く。盤の見え方は対局画面の色づかい
   （自軍=毒光緑 / 敵軍=血赤 / 屍=魔紫）に合わせ、図と実際の盤が地続きに見えるようにする。 */

/* ── 目次 ────────────────────────────── */
body.tp .tp-rules-lead { margin-bottom: var(--tp-3); }

/* ── 本文 ────────────────────────────── */
body.tp .tp-rule-body { padding-bottom: var(--tp-4); }
body.tp .tp-rule-body .tp-p { margin-bottom: var(--tp-3); }
body.tp .tp-rule-body .tp-note { margin-bottom: var(--tp-3); }
body.tp .tp-rule-h {
  margin: var(--tp-5) 0 var(--tp-2);
  padding-left: var(--tp-2);
  border-left: 3px solid var(--tp-accent-deep);
  color: var(--tp-text);
}

/* ── 節の移動（前へ / 目次 / 次へ）─────────────── */
body.tp .tp-rule-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--tp-2);
  border-top: 1px solid var(--tp-line);
  background: var(--tp-surface);
}
body.tp .tp-rule-nav .tp-btn {
  min-height: 40px;
  padding: 0 var(--tp-3);
  font-size: 13px;
}
body.tp .tp-rule-nav .tp-btn .tp-ico { width: 16px; height: 16px; }

/* ── 図の外枠 ───────────────────────────── */
body.tp .tp-fig {
  margin: 0 0 var(--tp-4);
  padding: var(--tp-3);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-2);
}
body.tp .tp-fig-cap {
  font-size: 12px;
  line-height: 1.55;
  color: var(--tp-text-dim);
  text-align: center;
}
body.tp .tp-fig-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-2);
  flex-wrap: nowrap;
}
body.tp .tp-fig-arrow { color: var(--tp-accent); display: flex; }
body.tp .tp-fig-arrow .tp-ico { width: 18px; height: 18px; }
body.tp .tp-fig-titled { display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.tp .tp-fig-sub {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--tp-text-dim);
}

/* ── ミニ盤 ───────────────────────────── */
body.tp .tp-fb-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
body.tp .tp-fb-lab {
  font-size: 10.5px; letter-spacing: .12em;
  color: var(--tp-text-mute);
}
body.tp .tp-fb {
  --fb-cell: 36px;
  display: grid;
  grid-template-columns: repeat(var(--fb-c), var(--fb-cell));
  grid-template-rows: repeat(var(--fb-r), var(--fb-cell));
  gap: 2px;
  padding: 3px;
  border-radius: 6px;
  background: #0b0716;
  border: 1px solid var(--tp-line-lit);
}
body.tp .tp-fig-row .tp-fb { --fb-cell: 32px; }
body.tp .tp-pc-fig .tp-fb { --fb-cell: 22px; }

body.tp .tp-fb-cell {
  border-radius: 3px;
  background: #1a1330;
  box-shadow: inset 0 0 0 1px rgba(74, 58, 116, .5);
}

/* 印とコマは同じマスへ重ねる */
body.tp .tp-fb-m,
body.tp .tp-fb-p {
  display: grid;
  place-items: center;
  pointer-events: none;
}
body.tp .tp-fb-m { z-index: 1; }
body.tp .tp-fb-p { z-index: 2; }
body.tp .tp-fb-m.is-ring,
body.tp .tp-fb-m.is-no { z-index: 3; }

/* 効果範囲 */
body.tp .tp-fb-m.is-range {
  border-radius: 3px;
  background: rgba(216, 178, 90, .2);
  box-shadow: inset 0 0 0 1px rgba(216, 178, 90, .55);
}
/* 進めるマス */
body.tp .tp-fb-m.is-dot::before {
  content: '';
  width: 34%; height: 34%;
  border-radius: 50%;
  background: var(--bone);
  opacity: .9;
  box-shadow: 0 0 6px rgba(234, 225, 205, .45);
}
/* 対象のマス */
body.tp .tp-fb-m.is-ring::before {
  content: '';
  width: 84%; height: 84%;
  border-radius: 50%;
  border: 2px solid var(--blood);
  box-shadow: 0 0 8px var(--blood-glow);
}
/* 飛び越えるマス */
body.tp .tp-fb-m.is-over::before {
  content: '';
  width: 88%; height: 88%;
  border-radius: 4px;
  border: 1px dashed var(--tp-text-mute);
}
/* 進入できないマス。コマの上に重ねても読めるよう、暗い幕＋明るい線にする */
body.tp .tp-fb-m.is-no {
  position: relative;
  border-radius: 3px;
  background: rgba(224, 71, 95, .12);
  box-shadow: inset 0 0 0 1px rgba(224, 71, 95, .35);
}
/* コマを隠さないよう、印はマスの角に小さく出す */
body.tp .tp-fb-m.is-no svg {
  position: absolute;
  right: -3px; top: -3px;
  width: 56%; height: 56%;
  fill: none;
  stroke: #ff93a4;
  stroke-width: 2.6;
  stroke-linecap: round;
  border-radius: 50%;
  background: #140d1f;
}

/* コマ */
body.tp .tp-fb-p svg { width: 80%; height: 80%; }
body.tp .tp-fb-p .bone { fill: currentColor; }
body.tp .tp-fb-p .pit { fill: var(--ink); }
body.tp .tp-fb-p .crown { fill: var(--gold); }
body.tp .tp-fb-p.is-you { color: var(--venom); }
body.tp .tp-fb-p.is-foe { color: var(--blood); transform: rotate(180deg); }
body.tp .tp-fb-p.is-corpse,
body.tp .tp-fb-p.is-grave { color: var(--soul); opacity: .95; }

/* ── 蝙蝠の支配 ───────────────────────────── */
body.tp .tp-fig-chips { display: flex; gap: var(--tp-2); flex-wrap: wrap; justify-content: center; }
body.tp .tp-fig-chip {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(140, 235, 90, .45);
  background: radial-gradient(circle at 38% 30%, #241b40, #120d22 70%);
  color: var(--venom);
}
body.tp .tp-fig-chip svg { width: 68%; height: 68%; }
body.tp .tp-fig-chip .bone { fill: currentColor; }
body.tp .tp-fig-chip .pit { fill: var(--ink); }

/* ── 1ターンにできる3つ ────────────────────── */
body.tp .tp-fig-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tp-2); width: 100%; }
body.tp .tp-fig-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--tp-3) 4px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-sm);
  background: var(--tp-surface-2);
  text-align: center;
}
body.tp .tp-fig-act-ico { color: var(--tp-accent); }
body.tp .tp-fig-act-ico .tp-ico { width: 22px; height: 22px; }
body.tp .tp-fig-act-name { font-size: 13px; font-weight: 700; }
body.tp .tp-fig-act-sub { font-size: 10.5px; line-height: 1.35; color: var(--tp-text-dim); }

/* ── コマ表 ───────────────────────────── */
body.tp .tp-pcs { display: flex; flex-direction: column; gap: var(--tp-2); margin-bottom: var(--tp-4); }
body.tp .tp-pc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tp-3);
  padding: var(--tp-3);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
}
body.tp .tp-pc-fig { display: flex; align-items: flex-start; }
body.tp .tp-pc-name {
  font-size: 14px; font-weight: 700; letter-spacing: .03em;
  color: var(--tp-accent);
  margin-bottom: 2px;
}
body.tp .tp-pc-text { font-size: 13px; margin: 0; }
body.tp .tp-pc-evo { margin: var(--tp-1) 0 0; }

/* ── カード表 ──────────────────────────── */
body.tp .tp-crds { display: flex; flex-direction: column; gap: var(--tp-2); margin-bottom: var(--tp-4); }
body.tp .tp-crd {
  padding: var(--tp-3);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
}
body.tp .tp-crd-head {
  display: flex; align-items: baseline; gap: var(--tp-2);
  margin-bottom: var(--tp-1);
}
body.tp .tp-crd-name {
  font-size: 14px; font-weight: 700; letter-spacing: .03em;
  color: var(--tp-accent);
}
body.tp .tp-crd-lim {
  font-size: 11px; font-weight: 700;
  color: var(--tp-text-dim);
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r-pill);
  padding: 1px 8px;
  white-space: nowrap;
}
body.tp .tp-crd-text { font-size: 13px; margin: 0; }

/* ── こんなときは ─────────────────────────── */
body.tp .tp-qa { margin-bottom: var(--tp-4); }
body.tp .tp-qa .tp-rule-h { margin-top: 0; }
body.tp .tp-qa-item {
  padding: var(--tp-3);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  margin-bottom: var(--tp-2);
}
body.tp .tp-qa-q,
body.tp .tp-qa-a {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}
body.tp .tp-qa-q { font-weight: 700; color: var(--tp-text); }
body.tp .tp-qa-a { margin-top: var(--tp-1); color: var(--tp-text-dim); }
body.tp .tp-qa-a b { color: var(--tp-accent); }
body.tp .tp-qa-q::before,
body.tp .tp-qa-a::before {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--f-num), var(--f-body);
  font-size: 12px;
  font-weight: 700;
}
body.tp .tp-qa-q::before { content: 'Q'; color: var(--tp-accent); }
body.tp .tp-qa-a::before { content: 'A'; color: var(--tp-text-mute); }

/* 狭い端末（375px）でも図が横に溢れないよう、盤を少し縮める */
@media (max-width: 380px) {
  body.tp .tp-fb { --fb-cell: 32px; }
  body.tp .tp-fig-row .tp-fb { --fb-cell: 28px; }
  body.tp .tp-pc-fig .tp-fb { --fb-cell: 20px; }
}