/* ===================================
   真・三國無双2 Remastered 攻略サイト
   =================================== */

:root {
  /* ベース */
  /* 以前の #FDFBF7（生成り）はヒーローの青灰と温度が合わず黄ばんで見えたため、
     明度を少しだけ上げた寒色寄りの白にした。明度を下げると文字・旗の対比が落ちる
     （#F6F7F9 では属性「光」が 4.5:1 を、旗3が 3:1 を割った）。site.css と共通 */
  --color-bg: #FBFCFD;
  --color-text: #2C2C2C;
  --color-link: #0000EE;

  /* 勢力テーマ（配色調整対象） */
  --color-shoku: #15803d;
  --color-gi: #2563eb;
  --color-go: #dc2626;
  --color-other: #6b7280;

  /* ダーク背景 */
  --color-bg-darkest: #1a1a1a;
  --color-bg-dark: #333333;
  --color-bg-medium: #555555;
  --color-bg-nav-active: #34588a;

  /* ライト背景 */
  --color-bg-white: #FFFFFF;
  --color-bg-section: #EEEEEE;
  --color-bg-subtle: #F5F5F5;
  --color-bg-highlight: #fafafa;
  /* 表の交互行。背景(--color-bg)と白セルの両方から分離する濃さが必要 */
  --color-bg-row-alt: #EFEFEF;
  --color-bg-active-card: #F0F8FF;
  --color-bg-hl-army: #ffeeba;

  /* ボーダー */
  --color-border: #000000;
  --color-border-section: #CCCCCC;
  --color-border-light: #ddd;
  --color-border-muted: #999;
  --color-border-footer: #666666;

  /* テキスト（明るい背景用） */
  --color-text-on-dark: #FFFFFF;
  --color-text-muted-on-dark: #CCCCCC;
  --color-text-subtle: #666666;
  --color-text-light: #6B6B6B;
  --color-text-card: #333333;

  /* アクセント */
  --color-accent-blue: #0000FF;

  /* レーティング */
  --color-rating-a: #217c42;
  --color-rating-b: #2563eb;
  /* C だけ明るい山吹色。白文字では読めないため文字色を個別に持つ */
  --color-rating-c: #eda100;
  --color-rating-c-text: #3d2a00;
  --color-rating-d: #dc2626;

  /* 武器属性 */
  --color-attr-fire: #cc3300;
  --color-attr-thunder: #3366cc;
  --color-attr-slash: #993399;
  --color-attr-wind: #1f7a5d;
  --color-attr-light: #8a7000;
  --color-attr-none: #6b6b6b;

  /* ステージ難易度の旗。色は枚数ではなく位置で決まる（左=橙 → 右=赤）。
     開始を黄にすると背景 #FBFCFD に溶けて旗1〜2が見えないため、濃いめの橙から始める */
  --color-flag-1: #e8a90d;
  --color-flag-2: #e2900f;
  --color-flag-3: #dc7711;
  --color-flag-4: #d65e13;
  --color-flag-5: #d04515;
  --color-flag-6: #ca2f1b;
  --color-flag-7: #c11f1f;
  --color-flag-off: #c9c4bb;

  /* ステージ味方/敵軍 */
  --color-ally: #4b6f8a;
  --color-enemy: #9e4a4a;

  /* セリフ用（勢力統一後は --color-shoku 等を使用） */
  --color-serifu-shoku: var(--color-shoku);
  --color-serifu-gi: var(--color-gi);
  --color-serifu-go: var(--color-go);
  --color-serifu-other: var(--color-other);

  /* マッププレースホルダー */
  --color-placeholder-bg: #1e1e1e;
  --color-placeholder-border: #444;

  /* アイテムビルトイン */
  --color-item-builtin: #cc0000;
  /* レアアイテム行。参照しているのは items / bodyguard ページ内の <style> なので、
     このファイルを grep しても使用箇所は出てこない。消さないこと。 */
  --color-bg-rare: #fff8e1;

  /* セーフエリア（iPhone のダイナミックアイランド・角丸・ホームインジケーター）。
     viewport-fit=cover で帯を画面端まで伸ばすかわりに、中身の余白でここを避ける。
     env() を直書きせず変数にしているのは、max()/calc() の中で何度も書かずに済むのと、
     デスクトップでの検証時に値を差し替えて崩れを確認できるようにするため
     （env() は非対応環境とデスクトップでは常に 0 を返す）。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* スクロールバーの有無でセンタリングがずれないよう、常に表示する */
  overflow-y: scroll;
}

body {
  font-family: sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ヘッダー */
/* 左右の余白は max() でセーフエリアと比較する。値が 0 の環境（PC・Android）では
   これまでどおり 10px、横向きの iPhone でだけ島や角丸のぶんだけ広がる。
   背景は要素の幅いっぱいに出るので、黒帯自体は画面端まで届いたまま。以下同様。 */
header {
  background: var(--color-bg-darkest);
  padding: 10px max(10px, var(--safe-right)) 10px max(10px, var(--safe-left));
  text-align: center;
}

.header-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

header .logo-text {
  text-align: center;
}

.logo-text .game-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-text-on-dark);
  margin: 0 0 5px;
}

/* サブページではタイトルが攻略TOPへのリンクになる */
.logo-text .game-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.logo-text .game-title a:hover {
  color: var(--color-text-muted-on-dark);
  text-decoration: underline;
}

/* ナビゲーション */
nav {
  background: var(--color-bg-dark);
  padding: 5px max(5px, var(--safe-right)) 5px max(5px, var(--safe-left));
  text-align: center;
}

nav a {
  color: var(--color-text-on-dark);
  padding: 5px 10px;
  font-size: 0.8rem;
  text-decoration: none;
  display: inline-block;
}

nav a:hover {
  background: var(--color-bg-medium);
  text-decoration: none;
}

nav a.active {
  background: var(--color-bg-nav-active);
}

/* メインコンテンツ */
main {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 10px max(10px, var(--safe-right)) 10px max(10px, var(--safe-left));
  flex: 1;
}

/* 攻略ページには本文サイズの指定が無く、クラスの付いていない <p> が131箇所、
   ブラウザ既定の16pxのまま出ていた。値そのものは妥当だが指定が無いのは危ういので明示する。
   本文を下げるのではなく h2 を上げて階層を作る方針にした（下げると慣習の16pxから離れる）。
   クラス付きの <p>（.page-desc / .verify-note など）は個別指定が勝つので影響しない。 */
main p {
  font-size: 1rem;
}

/* パンくずリスト */
.breadcrumb {
  padding: 5px 0;
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  margin-bottom: 10px;
}

/* 文字が小さくタップ判定が17pxしかないため、上下の余白で当たり判定だけ広げる。
   インライン要素の上下パディングは行の高さを押し広げないので、見た目は変わらない。
   inline-block にすればさらに広げられるが、パンくず行が伸びて本文が下がるため採らない。 */
.breadcrumb a {
  color: var(--color-link);
  padding: 4px 0;
}

/* テーブル */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  border: 1px solid var(--color-border);
}

/* 表が中身の大半を占める。日本語は12〜13pxだと漢字が潰れるため、本文より一段だけ
   小さい 0.875rem(14px) を下限にする。表ごとの個別指定もこの値に揃えてある */
th,
td {
  padding: 8px;
  text-align: left;
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
  vertical-align: top;
}

th {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  font-weight: normal;
  text-align: center;
}

td {
  background: var(--color-bg-white);
}

td ul {
  margin: 4px 0 4px 20px;
  padding: 0;
}

td li {
  margin: 0;
}

/* ヘッダーセル */
td[bgcolor="#000000"],
th[bgcolor="#000000"] {
  background: var(--color-bg-darkest);
  color: var(--color-text-on-dark);
}

/* 見出し。本文(1rem)の上に3段そろえる。h3 を本文と同寸にすると装飾頼みになり、
   このサイトは h3 の装飾が複数あるため見分けが付かなくなる。サイズで差を付ける。 */
h1 {
  font-size: 1.5rem;
  text-align: center;
  margin: 10px 0;
}

/* 大セクション見出し。表ヘッダー(--color-bg-dark)より濃くして上下関係を保つ。
   1rem のままだと本文と同寸になり見出しとして働かないため 1.125rem にしている */
h2 {
  font-size: 1.25rem;
  text-align: center;
  margin: 18px 0 8px;
  padding: 8px;
  background: var(--color-bg-darkest);
  color: var(--color-text-on-dark);
}

h2 a {
  color: var(--color-text-on-dark);
}

h3 {
  font-size: 1.125rem;
  margin: 10px 0 5px;
  padding: 5px;
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-section);
}

/* ツリーリスト */
.tree-list {
  margin: 5px 0;
  font-size: 0.85rem;
}

.tree-list a {
  color: var(--color-link);
}

/* セクション */
.section {
  margin-bottom: 20px;
}

.section-header {
  margin-bottom: 10px;
}

.section-header h2 {
  font-size: 1rem;
  text-align: center;
  padding: 5px;
  color: var(--color-text);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-section);
}

/* フィルタタブ */
.filter-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-border);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: inherit;
}

.filter-tab:hover {
  background: var(--color-bg-section);
}

.filter-tab.active {
  background: var(--color-border);
  color: var(--color-text-on-dark);
}

/* 検索ボックス */
.search-box {
  margin: 5px 0;
}

.search-box input {
  width: 100%;
  padding: 5px;
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-family: inherit;
}

/* ティップスボックス */
.tips-box {
  border: 1px solid var(--color-border);
  padding: 10px;
  margin: 10px 0;
  background: var(--color-bg-white);
}

/* 補足ボックスの見出し。文書構造上の階層は箱の置き場所によって h2〜h4 で変わるが、
   見た目は共通にする。h2 だけは基本スタイルで黒背景・白文字・中央寄せが付くので、
   color まで戻さないと白い箱の中で白文字になって読めなくなる。 */
.tips-box h2,
.tips-box h3,
.tips-box h4 {
  margin: 0 0 5px;
  padding: 0;
  font-size: 1.125rem;
  text-align: left;
  background: none;
  border: none;
  color: var(--color-text);
}

.tips-box ul {
  list-style: disc;
  padding-left: 20px;
  font-size: 0.8rem;
}

.tips-box li {
  margin-bottom: 3px;
}

/* フッター */
footer {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  /* 下だけは max() ではなく加算。ページ末尾なので、ホームインジケーターの帯と
     フッターの文字がぴったり接するとかなり窮屈に見える */
  padding: 10px max(10px, var(--safe-right)) calc(10px + var(--safe-bottom)) max(10px, var(--safe-left));
  margin-top: 20px;
  text-align: center;
}

.footer-inner {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  text-align: left;
}

/* フッターの列見出し。以前は h4 だったが、本文が h2 で終わるページでは
   h2 -> h4 のレベル飛ばしになっていた。フッターは本文のどの見出しにも属さないので、
   本文の構成に左右されない h2 に固定する。
   h2 のグローバル装飾（黒背景・中央寄せ・大きめの余白）はフッターでは邪魔なので打ち消す。
   同じ趣旨の打ち消しは .section-label にもある。 */
.footer-section h2 {
  color: var(--color-text-on-dark);
  margin: 0 0 5px;
  padding: 0 0 3px;
  font-size: 0.8rem;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-footer);
}

.footer-section a {
  display: block;
  color: var(--color-text-muted-on-dark);
  font-size: 0.7rem;
  text-decoration: none;
  padding: 2px 0;
}

.footer-section a:hover {
  color: var(--color-text-on-dark);
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 10px;
  padding-top: 5px;
  border-top: 1px solid var(--color-border-footer);
  font-size: 0.65rem;
  color: var(--color-text-muted-on-dark);
}

/* レスポンシブ */
@media (max-width: 600px) {
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--color-bg-dark);
    padding: 4px max(4px, var(--safe-right)) 4px max(4px, var(--safe-left));
    justify-content: center;
  }

  nav a {
    display: inline-block;
    /* タップ領域を48px以上確保（モバイルユーザビリティ） */
    padding: 14px 12px;
    font-size: 0.8rem;
    color: var(--color-text-on-dark);
    text-decoration: none;
  }

  th,
  td {
    padding: 4px;
  }

  /* 列数の多い表を狭い画面で1行1枚のカードに組み替える。
     以前は .event-table を display:block + overflow-x:auto にして横スクロールさせる
     つもりだったが、width:100% が付いていたため中身が縮んで収まってしまい、
     スクロールは一度も起きなかった。代わりに word-break:break-all が効いて
     「付加能力」のような列が32px幅で12行に折り返していた。 */
  .event-table,
  .event-table tbody,
  .event-table tr,
  .event-table td,
  .stat-table,
  .stat-table tbody,
  .stat-table tr,
  .stat-table td {
    display: block;
    width: auto;
  }

  /* 見出し行はカード側の項目名（td::before）が担うので隠す */
  .event-table tr:first-child,
  .stat-table tr:first-child {
    display: none;
  }

  .event-table tr,
  .stat-table tr {
    border: 1px solid var(--color-border);
    background: var(--color-bg-white);
    margin-bottom: 8px;
    padding: 6px 10px;
  }

  /* 縞模様は行が横に並んでいたときの読み分け用。カードでは不要 */
  .event-table tr:nth-child(even) td,
  .stat-table tr:nth-child(even) td {
    background: none;
  }

  /* 項目名と値は同じ行に並べる。縦に積むと「属性:炎」のような1文字の値でも
     2行ぶん使ってしまい、かえって縦に伸びる */
  .event-table td,
  .stat-table td {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border: none;
    padding: 3px 0;
    text-align: left;
  }

  .event-table td + td,
  .stat-table td + td {
    border-top: 1px dotted var(--color-border-light);
  }

  /* 見出し行を隠す代わりに項目名を担う実コンテンツなので、装飾用の最小サイズは使わない */
  .event-table td::before,
  .stat-table td::before {
    content: attr(data-label);
    flex: 0 0 5.5em;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-subtle);
  }

  .cond-shared {
    width: 100%;
    table-layout: fixed;
  }

  .aw {
    flex-direction: column;
  }

  .cond-shared td {
    word-break: break-all;
  }

  .aw-tbl {
    width: 100%;
  }

  .stage-map {
    width: 100% !important;
    max-width: 100% !important;
  }

}

/* スクロールバー */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-border-section);
}

::-webkit-scrollbar-thumb {
  background: var(--color-text-subtle);
  border: 1px solid var(--color-bg-dark);
}


/* トップに戻るボタン */
/* 固定配置なのでセーフエリアの外へはみ出せてしまう。ホームインジケーターと
   右下の角丸に潜り込まないよう、その分だけ内側へ寄せる */
.back-to-top {
  position: fixed;
  bottom: calc(10px + var(--safe-bottom));
  right: calc(10px + var(--safe-right));
  padding: 5px 10px;
  background: var(--color-border);
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-text-subtle);
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  /* transition: all だと bottom/right まで対象になり、端末を回してセーフエリアの値が
     変わったときにボタンが滑って動く。フェードさせたいのは表示状態だけなので絞る */
  transition: opacity 0.3s, visibility 0.3s, background 0.3s;
  z-index: 999;
  font-family: inherit;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--color-bg-dark);
}

/* 画像スタイル */
.icon-image {
  text-align: center;
}
/* 元画像が 80x125。max-width:100% があると、隣のセルの文章に押されて縮んだ列の幅
   （スマホで58px）が上限になり、画像が 58x91 まで潰れていた。
   元画像が80pxしかなく溢れることはないので、上限は外して等倍で固定する */
.icon-image img {
  width: 80px;
  height: auto;
}

/* テーブル内のリンク */
td a {
  color: var(--color-link);
}

/* ツリー構造 */
.tree {
  list-style: none;
  margin: 5px 0;
  padding-left: 10px;
  font-size: 0.85rem;
  line-height: 1.6;
}

.tree li {
  position: relative;
  padding-left: 15px;
}

.tree li::before {
  content: '├';
  position: absolute;
  left: 0;
  color: var(--color-text-subtle);
}

.tree li:last-child::before {
  content: '└';
}

/* 基本形では当たり判定を広げない。いま .tree を使っているのは攻略TOPの索引
   （.section-index）だけで、そちらは .section-index 側で 44px に広げている。
   ステージ攻略一覧はかつて .tree だったが、戦場ごとの表（.stage-index）に移った。 */
.tree a {
  color: var(--color-link);
}

.tree a:hover {
  text-decoration: underline;
}

.section-note {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  margin-bottom: 8px;
}

/* ===================================
   ステージ一覧 マップ凡例
   =================================== */
.map-note { margin: 8px 0 12px; }
.map-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 0 0 6px;
  margin-bottom: 6px;
  font-size: 0.8rem;
}
.map-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.ml {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}
.ml-ally { background: #2563eb; }
.ml-enemy { background: #dc2626; }
.ml-reinf-ally { background: #16a34a; }
.ml-reinf-enemy { background: #ea580c; }
.ml-base {
  width: 12px;
  height: 12px;
  border-radius: 0;
  transform: rotate(45deg) scale(0.85);
  background: none;
  border-width: 2px;
}

/* ===================================
   ステージ一覧テーブル（無双1）
   件数が少ない（8件）タイトル向け。年代・交戦勢力を一覧できるよう、
   リンクだけの .tree ではなく表にする。無双2側は下の .stage-index（戦場ごとの表）。
   交戦勢力の色分けはしない。このページに「どちらが自軍か」という固定した
   視点は無く（同じ勢力でもステージによって味方/敵が入れ替わる）、軍団表の
   青=味方/赤=敵の配色を流用すると常に自軍であるかのような誤解を招くため。
   =================================== */
.stage-index-table td.year {
  text-align: center;
  white-space: nowrap;
}
.stage-index-table td.map-status {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-subtle);
}

/* ===================================
   ステージ一覧（無双2）
   戦場ごとに1行。オリジナルと猛将伝のシナリオを勢力名で並べ、勢力名から
   各シナリオの節へ飛べるようにしている。行は src/_data/stageIndex.js が作る。
   狭い画面では1戦場1枚のカードに組み替える（.event-table と同じ考え方）。
   =================================== */
.stage-index td { vertical-align: middle; }
.stage-index .si-year-col { width: 4.5em; }
.stage-index td.si-year {
  text-align: center;
  white-space: nowrap;
  color: var(--color-text-subtle);
}
.stage-index td.si-title { white-space: nowrap; font-weight: bold; }
/* 年代はPCでは専用の列にあるので、戦場名の横には出さない（カード表示でだけ出す） */
.stage-index .si-title-year { display: none; }
/* 勢力名は枠付きの札にする。全部を青いリンクにすると戦場名が埋もれ、旗の色も
   読み取りにくくなるため、青は行の見出しである戦場名だけに使う。押せることは
   枠の形で伝え、カーソルを合わせると枠が濃くなる */
.stage-index .si-scenario {
  display: inline-block;
  padding: 2px 7px;
  margin: 2px 4px 2px 0;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  background: var(--color-bg-white);
  color: var(--color-text);
  white-space: nowrap;
  text-decoration: none;
}
.stage-index .si-scenario:hover {
  border-color: var(--color-text-subtle);
  text-decoration: none;
}
.stage-index .si-sub-title { font-weight: bold; }
.stage-index .si-none { color: var(--color-text-subtle); }
.flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 3px;
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  vertical-align: 1px;
}

@media (max-width: 600px) {
  .stage-index,
  .stage-index tbody,
  .stage-index tr,
  .stage-index td {
    display: block;
    width: auto;
  }
  .stage-index tr:first-child { display: none; }
  .stage-index tr {
    border: 1px solid var(--color-border);
    background: var(--color-bg-white);
    margin-bottom: 8px;
    padding: 6px 10px;
  }
  .stage-index td {
    border: none;
    padding: 2px 0;
    background: none;
  }
  .stage-index td.si-year { display: none; }
  .stage-index td.si-title { font-size: 1rem; white-space: normal; }
  .stage-index .si-title-year {
    display: inline;
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
  }
  /* 「オリジナル」「猛将伝」の項目名。見出し行を隠す代わりにこれが担う。
     勢力が多くて折り返したとき、2行目が項目名の下に潜り込まないよう、
     項目名は左の余白に絶対配置で置く */
  .stage-index td.si-side {
    position: relative;
    padding-left: 5.5rem;
  }
  .stage-index td.si-side::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 7px;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
  }
}

/* レアアイテムの入手元（輸送隊／木箱）。macros/via.njk。
   輸送隊は追いかける必要があるので目立つ橙、木箱は落ち着いた茶にしている */
.via-label {
  display: inline-block;
  margin-right: 2px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.6;
  color: #fff;
  vertical-align: 1px;
}
.via-transport { background: #c2410c; }
.via-box { background: #8a6a3f; }

.review-placeholder {
  color: var(--color-text-light);
  font-style: italic;
  font-size: 0.8rem;
}

.review-link-note {
  font-size: 0.8rem;
}

/* ===================================
   トップページ用スタイル
   =================================== */

/* サイト紹介 */
.site-intro {
  border: 1px solid var(--color-border);
  padding: 15px;
  margin-bottom: 15px;
  background: var(--color-bg-subtle);
}

.site-intro h2 {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 8px;
  padding: 0 0 5px;
  color: var(--color-text);
  background: none;
  border-bottom: 1px solid var(--color-border-section);
}

.site-intro p {
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.6;
}

/* 取り扱いタイトルバナー */
.title-banner {
  margin-bottom: 15px;
}

.title-banner h2 {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 8px;
  padding: 5px;
  color: var(--color-text);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-section);
}

.banner-card {
  display: flex;
  border: 2px solid var(--color-border);
  background: var(--color-bg-white);
  margin-bottom: 10px;
}

.banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  padding: 15px 20px;
  background: var(--color-border);
  color: var(--color-text-on-dark);
  min-width: 80px;
}

.banner-info {
  padding: 12px 15px;
  flex: 1;
}

.banner-info h3 {
  font-size: 1rem;
  margin-bottom: 5px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

.banner-info h3 a {
  color: var(--color-link);
}

.banner-meta {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  margin-bottom: 5px;
}

.banner-desc {
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.banner-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.banner-btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-border);
  font-size: 0.75rem;
  text-decoration: none;
}

.banner-btn:hover {
  background: var(--color-border);
  color: var(--color-text-on-dark);
  text-decoration: none;
}

/* 更新履歴 */
.update-history {
  margin-bottom: 15px;
}

.update-history h2 {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 8px;
  padding: 5px;
  color: var(--color-text);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-section);
}

.update-date {
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  width: 90px;
}

/* コンテンツ紹介 */
.content-overview {
  margin-bottom: 15px;
}

.content-overview h2 {
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 8px;
  padding: 5px;
  color: var(--color-text);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-section);
}

/* 攻略コンテンツの索引。ツリー記号（├└）は既存の .tree をそのまま使う。
   PCは3分類を横に並べ、狭い画面では縦に積む */
.section-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--color-border-section);
  background: var(--color-bg-white);
}

.section-index-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text-subtle);
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 4px;
}

/* 1行1項目。当たり判定を44px確保するため、行の高さで稼ぐ */
.section-index .tree {
  margin: 4px 0 0;
}

.section-index .tree li {
  padding-left: 16px;
}

/* 記号は既定だと行頭（li の上端）に付く。リンクを縦中央寄せにしている分だけ
   文字とずれるため、li の中央に合わせ直す */
.section-index .tree li::before {
  top: 50%;
  transform: translateY(-50%);
}

.section-index .tree a {
  display: flex;
  align-items: center;
  min-height: 40px;
}

@media (max-width: 600px) {
  .section-index {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .section-index .tree a {
    min-height: 44px;
  }
}

/* 注目カード（発売前はリマスター情報を主役に） */
.overview-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  border: 2px solid var(--color-gi);
  background: var(--color-bg-active-card);
  padding: 12px 14px;
  margin-bottom: 10px;
  text-decoration: none;
  transition: box-shadow 0.15s;
}

.overview-feature:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

.overview-feature-badge {
  position: absolute;
  top: -9px;
  left: 12px;
  background: var(--color-gi);
  color: var(--color-text-on-dark);
  font-size: 0.6rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}

.overview-feature-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--color-gi);
  color: var(--color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.overview-feature-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.overview-feature-title {
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--color-link);
}

.overview-feature-desc {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-text);
}

.overview-feature-arrow {
  margin-left: auto;
  color: var(--color-gi);
  font-size: 1.1rem;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .overview-feature-arrow { display: none; }
}

/* タイトル一覧 */
.title-list {
  margin-bottom: 15px;
}

.title-list h2 {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 8px;
  padding: 5px;
  color: var(--color-text);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-section);
}

.title-list-note {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  text-align: center;
  margin-bottom: 10px;
}

.title-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.title-card {
  display: flex;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  padding: 10px;
}

.title-card.active {
  border: 2px solid var(--color-accent-blue);
  background: var(--color-bg-active-card);
}

.title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding: 10px;
  background: var(--color-bg-section);
  min-width: 50px;
  margin-right: 10px;
}

.title-card.active .title-icon {
  background: var(--color-accent-blue);
  color: var(--color-text-on-dark);
}

.title-info {
  flex: 1;
}

.title-info h3 {
  font-size: 0.85rem;
  margin-bottom: 3px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

.title-info h3 a {
  color: var(--color-link);
}

.title-card.active .title-info h3 a {
  color: var(--color-link);
  font-weight: bold;
}

.title-meta {
  font-size: 0.7rem;
  color: var(--color-text-subtle);
  margin-bottom: 2px;
}

.title-genre {
  font-size: 0.7rem;
  color: var(--color-text-card);
  margin-bottom: 3px;
}

.badge-plan {
  display: inline-block;
  background: var(--color-border-section);
  color: var(--color-text-subtle);
  padding: 0 4px;
  font-size: 0.6rem;
  font-weight: bold;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  .title-grid {
    grid-template-columns: 1fr;
  }

  .title-card {
    flex-direction: column;
  }

  .title-icon {
    min-width: auto;
    padding: 8px;
    margin-right: 0;
    margin-bottom: 8px;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   コンテンツグリッド（攻略TOP用）
   =================================== */

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 10px;
}

.content-section h3 {
  font-size: 1rem;
  margin: 10px 0 5px;
  padding: 5px;
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-section);
}

.content-section h4 {
  font-size: 0.9rem;
  margin: 10px 0 5px;
  padding: 3px 5px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-section);
}

/* 勢力ナビゲーション */
/* 評価カードが勢力ごとに10〜12枚続くため、読み進めるとタブが画面外に出てしまう。
   画面上端に貼り付かせて、どこからでも勢力を切り替えられるようにする。
   固定ヘッダーは無いので、貼り付く位置はセーフエリアの上端でよい
   （position: fixed は .back-to-top のみ）。--safe-top は縦向きの iPhone では 0 で、
   上端に切り欠きが出る環境でだけタブがその下に来る。
   背景が不透明なので下の本文は透けない。 */
.faction-nav {
  position: sticky;
  top: var(--safe-top);
  z-index: 10;
  margin-bottom: 12px;
  padding: 6px 8px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-section);
  font-size: 0.85rem;
}

.faction-nav-label {
  font-weight: bold;
  margin-right: 4px;
}

.faction-nav a {
  display: inline-block;
  padding: 2px 10px;
  margin: 0 2px;
  border: 1px solid var(--color-border-muted);
  background: var(--color-bg-white);
  color: var(--color-border);
  text-decoration: none;
}

.faction-nav a:hover {
  background: var(--color-bg-section);
}

.faction-nav a.active {
  color: var(--color-text-on-dark);
}
.faction-nav a.active.faction-shoku { background: var(--color-shoku); border-color: var(--color-shoku); }
.faction-nav a.active.faction-gi { background: var(--color-gi); border-color: var(--color-gi); }
.faction-nav a.active.faction-go { background: var(--color-go); border-color: var(--color-go); }
.faction-nav a.active.faction-other { background: var(--color-other); border-color: var(--color-other); }

/* 収録データの規模。攻略TOPのリード直後に置く1行。数字は stats.js が実データから数える */
.data-scale {
  margin: 10px 0 14px;
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  line-height: 1.7;
}

/* 検証環境の注記。ステージ詳細と一覧の冒頭に出す。
   本文の一部ではなく前提条件なので、左罫線で本文と区別する。 */
.verify-note {
  margin: 10px 0 14px;
  padding: 8px 10px;
  background: var(--color-bg-highlight);
  border-left: 3px solid var(--color-border-muted);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--color-text-subtle);
}

/* 全員生存への道。攻略ポイントと同じ体裁だと続きに見えるため、
   左罫線で別の話題であることを示す。 */
.survival-box {
  border-left: 3px solid var(--color-shoku);
}

/* ステージ難易度の旗。ゲーム内の表示に合わせて7枠のうち難易度ぶんを点灯させる */
.stage-difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.stage-difficulty-label {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
}

.stage-difficulty-flags {
  display: inline-flex;
  line-height: 0;
}

/* キャラクター一覧 */
/* 評価ページ（子ページ）への導線。リード文と勢力見出しの間に置くため上下に余白を取る */
.char-eval-link {
  margin: 12px 0 16px;
}

.char-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: 15px;
}

.char-box {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--color-border-muted);
  background: var(--color-bg-white);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* 武器を共有する武将。武器種は短いので中央寄せ、武将名は行として読ませるため左寄せのまま */
.weapon-share-table td.type {
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
}

/* ===== serifu 関連 ===== */
.serifu-description { margin: 0 0 12px; padding: 8px 10px; background: var(--color-bg-highlight); border: 1px solid var(--color-border-light); font-size: 0.85rem; line-height: 1.6; }
.serifu-section { margin-bottom: 20px; }
.serifu-section h2 { margin: 0 0 8px; padding: 6px 10px; text-align: left;   color: var(--color-text-on-dark);
 font-size: 0.9rem; }
.serifu-shoku h2 { background: var(--color-serifu-shoku); }
.serifu-gi h2 { background: var(--color-serifu-gi); }
.serifu-go h2 { background: var(--color-serifu-go); }
.serifu-other h2 { background: var(--color-serifu-other); }
.serifu-list { margin: 0 0 10px; }
.serifu-warlord { margin-bottom: 14px; }
.serifu-warlord h3 { font-size: 0.9rem; padding: 4px 8px; background: var(--color-bg-subtle); border: none; border-left: 3px solid var(--color-border-muted); margin: 0 0 8px; }
.serifu-shoku .serifu-warlord h3 { border-left-color: var(--color-serifu-shoku); }
.serifu-gi .serifu-warlord h3 { border-left-color: var(--color-serifu-gi); }
.serifu-go .serifu-warlord h3 { border-left-color: var(--color-serifu-go); }
.serifu-other .serifu-warlord h3 { border-left-color: var(--color-serifu-other); }
.serifu-warlord ul { list-style: none; padding: 0; margin: 0; }
.serifu-warlord li { padding: 3px 8px 3px 20px; font-size: 0.85rem;   border-bottom: 1px dotted var(--color-border-light); position: relative; }
.serifu-warlord li::before { content: '・'; position: absolute; left: 8px; color: var(--color-border-muted); }
.serifu-warlord li:last-child { border-bottom: none; }
.serifu-tabs { display: flex; gap: 2px; margin-bottom: 12px; }
.serifu-tab { padding: 4px 14px; border: 1px solid var(--color-border); background: var(--color-bg-white); color: var(--color-border); cursor: pointer; font-size: 0.8rem; font-family: inherit; }
.serifu-tab:hover { background: var(--color-bg-section); }
.serifu-tab.active { background: var(--color-border); color: var(--color-text-on-dark); }

/* ===== キャラ評価 関連 ===== */
.char-review { border: 1px solid var(--color-border); margin-bottom: 10px; }
.char-review h4 { margin: 0; padding: 6px 10px; font-size: 1rem; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); }
.char-review .review-body { padding: 8px 10px; font-size: 1rem; }
.review-body p { margin-bottom: 6px; }
.review-body p:last-child { margin-bottom: 0; }

/* ===== 関連ページ（ページ末尾の導線・汎用） ===== */
/* 見出しは共通の h2（暗色バー）をそのまま使うため、ここでは中身だけを整える。
   リンクは行全体をタップ範囲にしたいので、a を block にして余白を持たせている。 */
.related-links ul { list-style: none; padding: 0; margin: 0; border: 1px solid var(--color-border-section); background: var(--color-bg-white); }
.related-links li + li { border-top: 1px solid var(--color-border-section); }
.related-links a { display: block; padding: 10px; font-size: 0.85rem; }
.related-links a:hover { background: var(--color-bg-section); }
.related-links .related-desc { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--color-text-subtle); }

/* ===== items 関連 ===== */
.rating { padding: 1px 6px; border-radius: 2px; font-weight: bold;   color: var(--color-text-on-dark);
 font-size: 0.7rem; }
.rating-a { background: var(--color-rating-a); }
.rating-b { background: var(--color-rating-b); }
.rating-c { background: var(--color-rating-c); color: var(--color-rating-c-text); }
.rating-d { background: var(--color-rating-d); }

/* ===== weapons 関連 ===== */
.attr-fire { color: var(--color-attr-fire); font-weight: bold; }
.attr-thunder { color: var(--color-attr-thunder); font-weight: bold; }
.attr-slash { color: var(--color-attr-slash); font-weight: bold; }
.attr-wind { color: var(--color-attr-wind); font-weight: bold; }
.attr-light { color: var(--color-attr-light); font-weight: bold; }
.attr-none { color: var(--color-attr-none); }
.weapon-name { font-weight: bold; font-size: 1rem; }
.stat-table td { text-align: center; }
.stat-table th { text-align: center; font-size: 0.875rem; }
/* 勢力見出し。色は左線だけに使い、面で塗らない（面だと縦に並んだとき目が疲れる）。
   キャラクター一覧・キャラクター評価・ユニーク武器・無双ルートで共用する。
   以前はページごとに面塗りの定義が散らばっていたので、ここに一本化した。 */
.faction-heading {
  text-align: left;
  padding: 7px 12px;
  color: var(--color-text);
  background: var(--color-bg-section);
  border: none;
  border-left: 5px solid var(--color-border-muted);
}

.faction-heading a { color: var(--color-link); }
.faction-heading.shoku { border-left-color: var(--color-shoku); }
.faction-heading.gi { border-left-color: var(--color-gi); }
.faction-heading.go { border-left-color: var(--color-go); }
.faction-heading.other { border-left-color: var(--color-other); }

/* .faction-shoku 等のクラス名は勢力タブの状態管理で main.js が使う。
   面塗りの定義は .faction-nav a.active.faction-* 側にあるので、ここには持たない。 */
.cond-cell { font-size: 0.875rem; text-align: left; }
.item-builtin { color: var(--color-item-builtin); font-weight: bold; }


/* ===== ステージ詳細ページ 関連 ===== */
.scenario-section {   border: 2px solid var(--color-border); margin-bottom: 20px; }
.scenario-header { margin: 0; padding: 6px 10px; text-align: left; color: var(--color-text-on-dark); font-size: 1.25rem; font-weight: bold; background: var(--color-bg-medium); border: none; }
.scenario-body { padding: 10px; }
.stage-map { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto 12px; }
/* マップに重ねるアイテム。枠をマップと同じ幅にし、アイコンは枠に対する % で置く */
.stage-map-wrap { position: relative; width: 100%; max-width: 600px; margin: 0 auto 6px; }
.stage-map-wrap .stage-map { margin: 0; }
.map-item { position: absolute; height: auto; }
.hide-map-items .map-items { display: none; }
.map-items-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; max-width: 600px; margin: 0 auto 12px; font-size: 0.8rem; }
.map-items-toggle { padding: 3px 10px; font-family: inherit; font-size: 0.75rem; color: var(--color-border); background: var(--color-bg-white); border: 1px solid var(--color-border); cursor: pointer; }
.map-items-toggle:hover { background: var(--color-bg-section); }
.map-items-toggle[aria-pressed="false"] { color: var(--color-text-light); }
.map-items-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.map-items-legend-item { display: inline-flex; align-items: center; gap: 3px; }
.hide-map-items .map-items-legend { opacity: 0.4; }
.stage-map-placeholder { display: flex; width: 100%; max-width: 600px; height: 300px; margin: 0 auto 12px; background: var(--color-placeholder-bg); border: 2px dashed var(--color-placeholder-border); border-radius: 8px; align-items: center; justify-content: center; }
.placeholder-inner span { color: var(--color-text-subtle); font-size: 18px; letter-spacing: 0.1em; }
.ev-name { width: auto; min-width: 140px; }
/* 入手物テーブル。種別と名称は折り返さず、入手条件に幅を回す */
.drop-kind { width: 5.5em; }
.drop-name { width: auto; min-width: 120px; }
.ev-cond { width: 40%; }
.aw { display: flex; gap: 0; margin-bottom: 10px; align-items: flex-start; }
.aw-tbl { flex: 1; border-collapse: collapse; }
.aw-tbl th { padding: 4px 8px; font-size: 0.875rem; color: var(--color-text-on-dark); border: 1px solid var(--color-border); text-align: center; background: var(--color-bg-dark); }
.aw-tbl th.ally { background: var(--color-ally); }
.aw-tbl th.enemy { background: var(--color-enemy); }
.aw-tbl td { padding: 3px 6px; font-size: 0.875rem; border: 1px solid var(--color-border); }
.aw-tbl td.n { text-align: left; }
.aw-tbl td.n.hl { background: var(--color-bg-hl-army); }
  .aw-tbl td.m { text-align: center; white-space: nowrap; }
  .aw-tbl td.d { text-align: center; white-space: nowrap; min-width: 3em; }
  .aw .aw-tbl:last-child td.n { text-align: right; }
@media (max-width: 600px) { .aw { flex-direction: column; } .aw-tbl+.aw-tbl { border-top: 1px solid var(--color-border); } }
.cond-shared { width: auto; border-collapse: collapse; margin-bottom: 12px; }
.cond-shared th { padding: 4px 10px; font-size: 0.875rem; background: var(--color-bg-dark); color: var(--color-text-on-dark); border: 1px solid var(--color-border); text-align: center; }
.cond-shared th:first-child { width: 100px; }
.cond-shared td { background: var(--color-bg-white); }
.event-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.event-table th { padding: 4px 6px; font-size: 0.875rem; background: var(--color-bg-dark); color: var(--color-text-on-dark); text-align: center; border: 1px solid var(--color-border); }
.event-table td { padding: 4px 6px; font-size: 0.875rem; border: 1px solid var(--color-border-section); }
.event-table tr:nth-child(even) td { background: var(--color-bg-row-alt); }
.strategy-box { border: 1px solid var(--color-border); padding: 8px 10px; font-size: 0.85rem; background: var(--color-bg-subtle); }
/* h2/h3 として出力するため、見出しタグのグローバル装飾を打ち消す */
/* ステージ詳細の見出し。同じクラスを h2 と h3 の両方に付けているため、
   サイズだけはタグごとに分ける。共通の装飾はこのまま使う */
.section-label { font-weight: bold; margin: 10px 0 4px; padding: 3px 6px; color: var(--color-text); text-align: left; background: none; border: none; border-bottom: 2px solid var(--color-bg-dark); }
h2.section-label { font-size: 1.25rem; }
h3.section-label { font-size: 1.125rem; }

/* ページ内目次。シナリオが最大4つあり、1画面には到底収まらないため、
   頭から読まなくても目的の節に飛べるようにする。
   .faction-nav と違って貼り付かせない。節の数がたかだか6つで、
   戻りは .back-to-top で足りるうえ、マップ画像の上に居座ると邪魔になる。

   マークアップは nav ではなく div + role=navigation。要素セレクタ nav に
   グローバルナビの暗色背景・白文字が入っており、nav で組むと文字色を拾って
   薄い背景に白文字となり読めなくなる（.stage-relations と同じ理由）。 */
.page-toc {
  margin: 10px 0 14px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-section);
  font-size: 0.85rem;
}

/* 「目次」は独立した行に置く。大手攻略サイト（Game8 等）もこの形で、
   箱の中に見出しが1行あることが「これは目次だ」と伝える主因になっている。
   リンクの色ではなく、この見出しと縦1列の並びが認識を決める。 */
.page-toc-label {
  margin: 0;
  padding: 7px 10px;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-section);
  font-size: 1rem;
  font-weight: bold;
}

/* 縦1列。横に並べるとカテゴリタブに見えて、目次だと気づかれにくい。 */
.page-toc ul {
  margin: 0;
  padding: 4px 10px 6px;
  list-style: none;
}

/* 節が10本を超えるページ用。1列だと目次だけで画面が埋まるので段に分ける。
   縦読みのままなので、横並びにしたときのようにタブには見えない。 */
.page-toc-cols ul {
  column-count: 2;
  column-gap: 16px;
}

/* リンクが段をまたいで割れると読めなくなる */
.page-toc-cols li {
  break-inside: avoid;
}

@media (min-width: 601px) {
  .page-toc-cols ul {
    column-count: 3;
  }
}

.page-toc a {
  display: block;
  padding: 6px 0;
  color: var(--color-link);
  text-decoration: none;
}

.page-toc a:hover {
  text-decoration: underline;
}

/* 目次から飛んだ見出しが画面上端に貼り付かないよう、少しだけ手前で止める */
.section-label[id],
.scenario-header[id],
.remaster-header[id] {
  scroll-margin-top: 10px;
}

/* トップページ リンクディレクトリ */
.link-directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px;
}

.dir-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--color-border-section);
  background: var(--color-bg-white);
  color: var(--color-link);
  font-size: 0.85rem;
  text-decoration: none;
}

.dir-item:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}

.dir-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

/* 評価ページ */
.page-desc { font-size: 1rem; margin-bottom: 10px; }
/* ===================================
   関連ステージ（ステージ詳細ページ末尾）
   =================================== */
.stage-relations {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-section);
}

/* 要素セレクタ `nav` にグローバルナビの装飾（暗色背景・白文字）が入っているため、
   このブロックは div で組み、装飾の混入を避けている */

.stage-relations-pair {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  margin-bottom: 10px;
}

.stage-relations-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}

.stage-relations-nav li {
  flex: 1;
  min-width: 0;
}

.stage-relations-nav .rel-index {
  flex: 0 0 auto;
  text-align: center;
}

.stage-relations-nav .rel-next {
  text-align: right;
}

@media (max-width: 480px) {
  .stage-relations-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .stage-relations-nav .rel-index,
  .stage-relations-nav .rel-next {
    text-align: left;
  }
}

/* ===================================
   タップ領域（狭い画面）
   目安の44pxを確保する。.faction-nav a や .banner-btn の元の定義は
   このファイルの後半にあるため、ここに置かないと後勝ちで打ち消される。
   =================================== */
@media (max-width: 600px) {
  /* インライン要素の上下パディングは行の高さを押し広げないので、
     見た目を変えずに当たり判定だけ広げられる */
  .breadcrumb a {
    padding: 14px 0;
  }

  .faction-nav a {
    padding: 10px 14px;
    margin: 0 3px 4px;
  }

  /* 縦1列なので左右ではなく上下で44pxを確保する */
  .page-toc a {
    padding: 11px 0;
  }

  .filter-tab {
    padding: 13px 14px;
  }

  /* 前後のステージへ移動するリンク。本文ではなくナビ部品なので44pxを確保する */
  .stage-relations-nav a {
    display: inline-block;
    padding: 13px 0;
  }

  /* 見出しがリンクでないカード（キャラクター・ユニーク武器）は、
     この2つのボタンが唯一の導線になるため確実に44pxを確保する */
  .banner-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 14px;
  }
}

/* 「動きを減らす」設定の環境では、スムーズスクロールとフェードを止める。
   このサイトの動きは smooth スクロールと数箇所の transition だけなので、
   まとめて無効にしてよい。JS 側の scrollTo も main.js で同じ判定をしている。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}