/* ==========================================================================
   patterns.css — Wiki の2パターン（大手型 / インディー型）の部品
   style.css の上に重ねて使う。既存の .wrap / .article / .side はそのまま。
   実測の出典: docs/playbook/wiki-patterns.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 大手型（Game8 / AppMedia / GameWith 系）
   固定幅・2〜3カラム・12〜13px・リンク300本超・目次は表・h2は帯
   -------------------------------------------------------------------------- */
:root {
  --pm-band: #1c1a16;        /* h2の帯。Game8は#060100/黒、AppMedia #060100 */
  --pm-band-fg: #fff;
  --pm-accent: #ffd22b;      /* 帯の下線・強調。Game8の黄 */
  --pm-th: #f1f4f6;          /* 表ヘッダ */
  --pm-line: #d7dce1;
  --pm-radius: 8px;
  --pm-main: 632px;          /* 実測: Game8本文632 / AppMedia 523 */
}

/* 見出しの帯（セクションの区切りを色で作る） */
.p-band {
  margin: 28px 0 12px;
  padding: 8px 12px;
  background: var(--pm-band);
  color: var(--pm-band-fg);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  border-bottom: 3px solid var(--pm-accent);
  border-radius: 3px 3px 0 0;
}
.p-band + * { margin-top: 0; }

/* 目次を「表」にする（3列。Game8/AppMedia の実測） */
.p-toc3 {
  width: 100%;
  margin: 8px 0 20px;
  border-collapse: collapse;
  border: 1px solid var(--pm-line);
  background: #fff;
  font-size: 13px;
  table-layout: fixed;
}
.p-toc3 td { border: 1px solid var(--pm-line); padding: 0; vertical-align: middle; }
.p-toc3 a {
  display: block; padding: 7px 9px 7px 20px; position: relative;
  color: var(--link); font-weight: 700; line-height: 1.45;
}
.p-toc3 a::before {
  content: ""; position: absolute; left: 8px; top: 50%; margin-top: -3px;
  border: 4px solid transparent; border-left-color: var(--link); border-right: 0;
}
.p-toc3 a:hover { background: var(--hover); text-decoration: none; }

/* 3列カード（カテゴリ別の入口） */
.p-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 4px; }
.p-card {
  display: block; padding: 8px 9px; background: #fff; border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius); font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--fg);
}
.p-card:hover { border-color: var(--link); background: var(--hover); text-decoration: none; }
.p-card small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.p-more { display: inline-block; margin: 8px 0 0; font-size: 12.5px; font-weight: 700; }

/* 一覧の2列表（左=画像＋名称、右=数値ラベル＋説明。Game8の章一覧の実測） */
.p-list2 { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--pm-line); font-size: 13px; }
.p-list2 th { background: var(--pm-th); color: var(--strong); font-size: 12px; font-weight: 700; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--pm-line); }
.p-list2 td { padding: 10px; border-bottom: 1px solid var(--pm-line); vertical-align: top; }
.p-list2 td:first-child { width: 38%; }
.p-list2 .p-name { display: block; font-weight: 700; font-size: 13.5px; }
.p-list2 .p-chip {
  display: inline-block; margin-bottom: 4px; padding: 1px 7px; font-size: 11.5px; font-weight: 700;
  color: var(--strong); background: var(--pm-th); border: 1px solid var(--pm-line); border-radius: 3px;
}
.p-list2 .p-desc { color: var(--muted); font-size: 12.5px; }

/* 更新履歴（記事末の鮮度証明） */
.p-updates { margin: 20px 0 8px; padding: 10px 12px; background: #fff; border: 1px solid var(--pm-line); border-radius: var(--pm-radius); }
.p-updates h2 { margin: 0 0 6px; font-size: 13px; color: var(--strong); }
.p-updates ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.p-updates li { padding: 4px 0; border-top: 1px dashed var(--pm-line); }
.p-updates li:first-child { border-top: 0; }
.p-updates time { display: inline-block; min-width: 76px; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .p-cards3 { grid-template-columns: repeat(2, 1fr); }
  .p-toc3 { font-size: 12.5px; }
  .p-list2 td:first-child { width: 44%; }
}

/* --------------------------------------------------------------------------
   B. インディー型（thedeathgamereport.wiki 系）
   可変幅1120・1カラム・16〜17px・モノスペース・紙色×暗背景・硬い影
   -------------------------------------------------------------------------- */
.pattern-indie {
  --pi-bg: #14120e;
  --pi-panel: #1d1a14;
  --pi-paper: #e6ddbc;
  --pi-muted: #aaa187;
  --pi-line: #575143;
  --pi-green: #6c9674;
  --pi-red: #c34e30;
  --pi-red-ink: #e0705c;   /* 暗い面の上で 4.5:1 を満たす文字用の赤 */
  margin: 0;
  background: var(--pi-bg);
  color: var(--pi-paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Noto Sans Mono CJK JP", monospace;
  font-size: 16px;
  line-height: 1.75;
}
.pattern-indie a { color: var(--pi-paper); text-decoration: underline; text-underline-offset: 3px; }
.pattern-indie a:hover { color: var(--pi-green); }

.i-page { max-width: 1120px; margin: 0 auto; padding: 0 20px 72px; }
.i-narrow { max-width: 820px; }

/* ヘッダー：サイト名＋短いナビ＋言語切替。ロゴ画像なしで軽い */
.i-head { border-bottom: 1px solid var(--pi-line); padding: 18px 0 14px; margin-bottom: 26px; }
.i-kicker { margin: 0 0 4px; font-size: 12px; letter-spacing: .18em; color: var(--pi-muted); text-transform: uppercase; }
.i-site { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: .02em; }
.i-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.i-nav a { display: inline-block; padding: 3px 10px; border: 1px solid var(--pi-line); border-radius: 999px; font-size: 13px; text-decoration: none; }
.i-nav a[aria-current="page"] { background: var(--pi-paper); color: var(--pi-bg); border-color: var(--pi-paper); }

/* 見出し：h1は大きく、h2は罫線＋小さいラベル */
.i-h1 { margin: 0 0 10px; font-size: clamp(30px, 5vw, 48px); line-height: 1.25; font-weight: 800; letter-spacing: .01em; }
.i-lead { margin: 0 0 26px; color: var(--pi-muted); font-size: 15px; }
.i-h2 { margin: 38px 0 12px; padding-top: 10px; border-top: 1px solid var(--pi-line); font-size: 20px; font-weight: 700; }
.i-h2::before { content: "## "; color: var(--pi-green); }

/* TL;DR：最初の1画面で答えを出す */
.i-tldr { margin: 0 0 22px; padding: 16px 18px; background: var(--pi-panel); border-left: 4px solid var(--pi-green); }
.i-tldr b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .16em; color: var(--pi-green); }

/* 注意・ネタバレ表示 */
.i-flag { display: inline-block; margin: 0 0 10px; padding: 2px 9px; border: 1px solid var(--pi-red); color: var(--pi-red); font-size: 12px; border-radius: 3px; }

/* ツール（入力→分解）。インディー型の主役 */
.i-tool { margin: 18px 0 26px; padding: 16px 18px; background: var(--pi-panel); border: 1px solid var(--pi-line); box-shadow: 8px 8px 0 var(--pi-shadow, #080705); }
.i-tool-row { display: flex; gap: 8px; flex-wrap: wrap; }
.i-tool input {
  flex: 1 1 220px; min-width: 0; padding: 10px 12px; background: #0b0a08; color: var(--pi-paper);
  border: 1px solid var(--pi-line); border-radius: 4px; font: inherit; font-size: 16px;
}
.i-tool button {
  padding: 10px 18px; background: var(--pi-paper); color: var(--pi-bg); border: 0;
  border-radius: 4px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.i-tool-out { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.i-tool-out div { flex: 1 1 140px; padding: 10px 12px; background: #0b0a08; border: 1px solid var(--pi-line); border-radius: 4px; }
.i-tool-out b { display: block; font-size: 22px; color: var(--pi-green); letter-spacing: .06em; }
.i-tool-out small { color: var(--pi-muted); font-size: 12px; }
.i-tool-note { margin: 10px 0 0; color: var(--pi-muted); font-size: 12.5px; }

/* 記事一覧：カードではなく「行」。余白で区切り、番号を振る */
.i-list { margin: 0; padding: 0; list-style: none; counter-reset: i; }
.i-list li { counter-increment: i; padding: 14px 0; border-top: 1px solid var(--pi-line); }
.i-list li::before { content: counter(i, decimal-leading-zero) "  "; color: var(--pi-green); font-size: 13px; }
.i-list a { font-size: 17px; font-weight: 700; text-decoration: none; }
.i-list p { margin: 4px 0 0; color: var(--pi-muted); font-size: 13.5px; }

/* データベース：2列カード＋インライン絞り込み */
.i-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 18px 0 14px; }
.i-filter input { flex: 1 1 260px; padding: 9px 12px; background: #0b0a08; color: var(--pi-paper); border: 1px solid var(--pi-line); border-radius: 4px; font: inherit; font-size: 15px; }
.i-count { color: var(--pi-muted); font-size: 13px; }
.i-db { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.i-db-card { padding: 12px 14px; background: #161710; border: 1px solid var(--pi-line); border-radius: 4px; box-shadow: 5px 5px 0 rgba(8, 7, 5, .5); }
.i-db-card[hidden] { display: none; }
.i-code { font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--pi-green); }
.i-kv { display: grid; grid-template-columns: 58px 1fr; gap: 2px 8px; margin: 8px 0 0; font-size: 13.5px; }
.i-kv dt { color: var(--pi-muted); }
.i-kv dd { margin: 0; }
.i-db-card details { margin-top: 10px; border-top: 1px dashed var(--pi-line); padding-top: 8px; font-size: 13.5px; }
.i-db-card summary { cursor: pointer; color: var(--pi-red-ink); font-weight: 700; }

/* 更新履歴・次に読む */
.i-updates { margin: 34px 0 0; padding-top: 10px; border-top: 1px solid var(--pi-line); font-size: 13.5px; }
.i-updates time { color: var(--pi-muted); margin-right: 10px; }
.i-next { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.i-next a { padding: 10px 14px; border: 1px solid var(--pi-line); border-radius: 4px; font-size: 14px; text-decoration: none; }

@media (max-width: 760px) {
  .i-db { grid-template-columns: 1fr; }
  .i-site { font-size: 21px; }
  .pattern-indie { font-size: 16px; }
}

/* ==========================================================================
   C. 共通コア（良いとこ取り）— 大手型にもインディー型にも入れる部品
   どのページ型でも「答え→根拠→次」の順を作るための最小セット。
   色は --c-* を経由するので、両パターンで同じマークアップが使える。
   ========================================================================== */
:root {
  --c-surface: #fff;
  --c-line: #d7dce1;
  --c-accent: #2a5ea8;
  --c-muted: #6b7280;
  --c-tint: #f5f7fa;
  --c-radius: 6px;
}
.pattern-indie {
  --c-surface: #1d1a14;
  --c-line: #575143;
  --c-accent: #6c9674;
  --c-muted: #aaa187;
  --c-tint: #17150f;
  --c-radius: 4px;
}

/* 答え（TL;DR）。インディー型の「1画面目で答える」を大手型にも持ち込む */
.c-answer {
  margin: 14px 0 22px; padding: 14px 16px;
  background: var(--c-tint); border-left: 4px solid var(--c-accent); border-radius: 0 var(--c-radius) var(--c-radius) 0;
  font-size: 15px; line-height: 1.75;
}
.c-answer b:first-child { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .14em; color: var(--c-accent); }

/* 数値の要点（2列）。表を大きくする前の「まず3行」用 */
.c-facts { width: 100%; margin: 12px 0 20px; border-collapse: collapse; font-size: 14px; background: var(--c-surface); }
.c-facts th, .c-facts td { padding: 7px 10px; border: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.c-facts th { width: 34%; background: var(--c-tint); font-weight: 700; color: var(--c-muted); font-size: 13px; }

/* 出所バッジ。本文中に（データ上の値）（推定）（仮訳）を色で持たせる */
.c-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 11px; line-height: 1.7; color: var(--c-muted); white-space: nowrap; }
.c-badge.is-data { color: var(--c-accent); border-color: var(--c-accent); }
.c-badge.is-est { color: #b7791f; border-color: #b7791f; }
.c-badge.is-tl { color: #9b2c2c; border-color: #9b2c2c; }

/* ツール枠（入力→出力）。大手型でも使えるよう色だけ変数化 */
.c-tool { margin: 16px 0 24px; padding: 14px 16px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); }
.c-tool label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--c-muted); }
.c-tool-row { display: flex; gap: 8px; flex-wrap: wrap; }
.c-tool input, .c-tool select {
  flex: 1 1 220px; min-width: 0; padding: 9px 11px; background: var(--c-tint); color: inherit;
  border: 1px solid var(--c-line); border-radius: var(--c-radius); font: inherit; font-size: 15px;
}
.c-tool button {
  padding: 9px 16px; background: var(--c-accent); color: #fff; border: 0; border-radius: var(--c-radius);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.c-tool-out { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.c-tool-out div { flex: 1 1 130px; padding: 8px 10px; background: var(--c-tint); border: 1px solid var(--c-line); border-radius: var(--c-radius); }
.c-tool-out b { display: block; font-size: 20px; color: var(--c-accent); letter-spacing: .05em; }
.c-tool-out small { color: var(--c-muted); font-size: 12px; }

/* 目次（テーマ非依存の3列表）。インディー型の1カラムでも使える */
.c-toc { width: 100%; margin: 10px 0 22px; border-collapse: collapse; border: 1px solid var(--c-line); background: var(--c-surface); font-size: 14px; table-layout: fixed; }
.c-toc td { border: 1px solid var(--c-line); padding: 0; }
.c-toc a { display: block; padding: 8px 10px 8px 22px; position: relative; color: inherit; text-decoration: none; font-weight: 700; }
.c-toc a::before { content: ""; position: absolute; left: 9px; top: 50%; margin-top: -3px; border: 4px solid transparent; border-left-color: var(--c-accent); border-right: 0; }
.c-toc a:hover { background: var(--c-tint); }

/* 次に読む（3本まで）。全ページに必ず置く */
.c-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 4px; }
.c-next a { display: block; padding: 10px 12px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); font-size: 13.5px; font-weight: 700; text-decoration: none; color: inherit; }
.c-next a small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--c-muted); }
.c-next a:hover { border-color: var(--c-accent); }

/* 更新履歴（共通） */
.c-updates { margin: 24px 0 0; padding: 10px 12px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); font-size: 13px; }
.c-updates h2, .c-updates h3 { margin: 0 0 6px; font-size: 13px; }
.c-updates ul { margin: 0; padding: 0; list-style: none; }
.c-updates li { padding: 4px 0; border-top: 1px dashed var(--c-line); }
.c-updates li:first-child { border-top: 0; }
.c-updates time { display: inline-block; min-width: 74px; color: var(--c-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .c-next { grid-template-columns: 1fr; }
  .c-answer { font-size: 14.5px; }
}

/* ==========================================================================
   D. インディー型を既存のサイト（style.css の壳）に被せる
   body に pattern-indie が付いたときだけ効く。サイドバーを畳んで1カラムにし、
   ヘッダー・見出し・表・フッターを紙色／暗背景に合わせる。
   ========================================================================== */
.pattern-indie { background: var(--pi-bg); }
.pattern-indie .wrap { max-width: 1120px; }
.pattern-indie .layout { display: block; }         /* 2カラム → 1カラム */
.pattern-indie .side { display: none; }            /* サイドバーは出さない */
.pattern-indie .article { max-width: 860px; font-size: 16px; line-height: 1.8; border: 0; }
.pattern-indie .article p, .pattern-indie .article li, .pattern-indie .article dd { font-size: 16px; }
.pattern-indie .article .sub, .pattern-indie .article .meta, .pattern-indie .article .c-updates li { font-size: 13.5px; line-height: 1.7; }
.pattern-indie .article .c-answer { font-size: 15.5px; }

/* ヘッダー：ロゴ・検索・ナビを細く、暗い面に載せる */
.pattern-indie .gh-top,
.pattern-indie .gnav,
.pattern-indie .mnav,
.pattern-indie .breadcrumb { background: var(--pi-bg); border-color: var(--pi-line); color: var(--pi-paper); }
.pattern-indie .gh-top { border-top: 0; }
.pattern-indie .logo, .pattern-indie .logo small { color: var(--pi-paper); }
.pattern-indie .logo-mark { background: var(--pi-paper); color: var(--pi-bg); border-radius: 3px; }
.pattern-indie .search-box { background: #0b0a08; border-color: var(--pi-line); color: var(--pi-muted); }
.pattern-indie .search-box input { background: transparent; color: var(--pi-paper); }
.pattern-indie .search-results { background: var(--pi-panel); border-color: var(--pi-line); }
.pattern-indie .search-results li { border-color: var(--pi-line); }
.pattern-indie .gnav ul { gap: 0; }
.pattern-indie .gnav li { border-color: var(--pi-line); }
.pattern-indie .gnav a,
.pattern-indie .mnav a,
.pattern-indie .breadcrumb a { color: var(--pi-paper); }
.pattern-indie .gnav a.current { color: var(--pi-bg); background: var(--pi-paper); }
.pattern-indie .hero { background: transparent; }
.pattern-indie .hero::before { display: none; }
.pattern-indie .hero-img { display: none; }         /* 大きなヒーローは置かない */
.pattern-indie .hero .wrap { padding: 6px 12px 0; }
.pattern-indie .hero-title { color: var(--pi-muted); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.pattern-indie .breadcrumb { font-size: 12px; }
.pattern-indie .to-top { background: var(--pi-paper); color: var(--pi-bg); }

/* 見出し：h1は大きく、h2は罫線＋「## 」 */
.pattern-indie h1 { font-size: clamp(28px, 4.6vw, 44px); line-height: 1.3; letter-spacing: .01em; }
.pattern-indie h2 { margin: 36px 0 12px; padding-top: 10px; border-top: 1px solid var(--pi-line); font-size: 20px; }
.pattern-indie h2::before { content: "## "; color: var(--pi-green); }
.pattern-indie h3 { font-size: 16px; }
.pattern-indie .lead, .pattern-indie .sub, .pattern-indie .meta { color: var(--pi-muted); }
.pattern-indie hr { border-color: var(--pi-line); }

/* 表・定義リストは罫線だけ。背景は面に合わせる */
.pattern-indie table { background: transparent; border-color: var(--pi-line); }
.pattern-indie th, .pattern-indie td { border-color: var(--pi-line); }
.pattern-indie th { background: var(--pi-panel); color: var(--pi-paper); }
/* トップの「ガイド」別枠（category: ガイド のページがあるサイトだけ出る） */
.pattern-indie .i-guides { margin-top: 20px; }
.pattern-indie .i-guide-links { margin: 0; padding: 0; list-style: none; }
.pattern-indie .i-guide-links li { padding: 9px 0; border-top: 1px solid var(--pi-line); }
.pattern-indie .i-guide-links a { font-size: 15px; font-weight: 700; text-decoration: none; }
.pattern-indie .i-guide-links p { margin: 3px 0 0; color: var(--pi-muted); font-size: 13px; }
/* トップのキービジュアル（TL;DR の直後・デコーダーの前） */
.pattern-indie .i-hero { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 0 22px; border: 1px solid var(--pi-line); }
.pattern-indie .facts { border-color: var(--pi-line); }
.pattern-indie .facts dt { background: var(--pi-panel); color: var(--pi-muted); border-color: var(--pi-line); }
.pattern-indie .facts dd { border-color: var(--pi-line); }

/* 折りたたみ（ヒント→答え）は枠で囲む */
.pattern-indie details.step { background: var(--pi-panel); border: 1px solid var(--pi-line); border-radius: 4px; margin: 8px 0; padding: 10px 12px; }
.pattern-indie details.step > summary { cursor: pointer; font-weight: 700; color: var(--pi-paper); }
.pattern-indie details.answer { border-color: var(--pi-red); }
.pattern-indie details.answer > summary { color: var(--pi-red-ink); }

/* ボタン・ページャ */
.pattern-indie .btn-more,
.pattern-indie .pager a { display: inline-block; padding: 9px 14px; border: 1px solid var(--pi-line); border-radius: 4px; background: transparent; color: var(--pi-paper); text-decoration: none; }
.pattern-indie .btn-more:hover, .pattern-indie .pager a:hover { background: var(--pi-panel); }

/* 画像グリッド（生徒一覧）は紙色の枠で */
.pattern-indie .img-grid li { background: var(--pi-panel); border: 1px solid var(--pi-line); border-radius: 4px; }
.pattern-indie .img-grid img { border-radius: 3px; }

/* 元の style.css が白背景を持っている部品を、暗い面に合わせて落とす */
.pattern-indie .article,
.pattern-indie .point,
.pattern-indie .pickup,
.pattern-indie .btn-more,
.pattern-indie .menu-tiles li,
.pattern-indie .link-grid li,
.pattern-indie .records li { background: transparent; }
.pattern-indie .article p,
.pattern-indie .article li,
.pattern-indie .article dd,
.pattern-indie .article strong,
.pattern-indie .rec-links,
.pattern-indie .kicker { color: inherit; }
.pattern-indie .article a { color: var(--pi-paper); }
.pattern-indie .article .notice { background: var(--pi-panel); color: var(--pi-muted); border-color: var(--pi-line); }
.pattern-indie .img-grid a,
.pattern-indie .menu-tiles a,
.pattern-indie .link-grid a { font-size: 13.5px; }

/* フッター・広告枠 */
.pattern-indie .gf { background: var(--pi-bg); border-top: 1px solid var(--pi-line); color: var(--pi-muted); }
.pattern-indie .gf a { color: var(--pi-paper); }
.pattern-indie .ad-slot { background: var(--pi-panel); border-color: var(--pi-line); }
.pattern-indie .recs-mini { background: var(--pi-panel); border-color: var(--pi-line); }
.pattern-indie .recs-mini a { color: var(--pi-paper); }

@media (max-width: 760px) {
  .pattern-indie .article { max-width: none; }
  .pattern-indie h1 { font-size: 28px; }
}

/* ==========================================================================
   E. 追加部品（コーパスで頻出だったが未実装だったもの）
   ========================================================================== */

/* ティア表。順位ではなく「帯」で見せる（大手型ランキングの主役） */
.c-tier { width: 100%; margin: 14px 0 22px; border-collapse: separate; border-spacing: 0 8px; }
.c-tier th { width: 74px; padding: 10px 8px; text-align: center; font-size: 15px; font-weight: 800; color: #fff; background: var(--c-accent); border-radius: var(--c-radius) 0 0 var(--c-radius); }
.c-tier td { padding: 10px 12px; background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.c-tier td:last-child { border-right: 1px solid var(--c-line); border-radius: 0 var(--c-radius) var(--c-radius) 0; }
.c-tier .c-tier-row { display: flex; flex-wrap: wrap; gap: 6px; }
.c-tier .c-tier-row a { display: inline-block; padding: 3px 9px; background: var(--c-tint); border: 1px solid var(--c-line); border-radius: 999px; font-size: 13px; text-decoration: none; color: inherit; }
.c-tier .is-ss th { background: #b8860b; }
.c-tier .is-s th { background: #c05621; }
.c-tier .is-a th { background: #2f855a; }
.c-tier .is-b th { background: #2b6cb0; }
.c-tier .is-c th { background: #6b7280; }

/* 検証バッジ。「いつ・どの版で確認したか」をh1の下に1行で出す */
.c-verified {
  display: inline-block; max-width: 100%; margin: 0 0 12px;
  padding: 3px 10px; border: 1px solid var(--c-line); border-radius: 6px;
  font-size: 12px; line-height: 1.6; color: var(--c-muted); background: var(--c-tint);
}
.c-verified b { color: var(--c-accent); font-weight: 700; }

/* 分岐表（選択肢→結果）。details と併用して答えを畳む */
.c-branch { width: 100%; margin: 12px 0 20px; border-collapse: collapse; font-size: 14px; background: var(--c-surface); }
.c-branch th, .c-branch td { padding: 8px 10px; border: 1px solid var(--c-line); vertical-align: top; text-align: left; }
.c-branch th { background: var(--c-tint); font-size: 13px; color: var(--c-muted); }
.c-branch tr.is-true td { background: color-mix(in srgb, var(--c-accent) 8%, transparent); }

/* 比較表（同グループ内の数値比較）。差分だけを色で示す */
.c-compare { width: 100%; margin: 12px 0 10px; border-collapse: collapse; font-size: 14px; background: var(--c-surface); }
.c-compare th, .c-compare td { padding: 7px 10px; border: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.c-compare th { background: var(--c-tint); font-size: 12.5px; color: var(--c-muted); font-weight: 700; }
.c-compare td:nth-child(2), .c-compare td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; width: 28%; }
.c-compare tr.is-self td { background: color-mix(in srgb, var(--c-accent) 10%, transparent); }
.c-compare .is-up { color: #2f855a; font-weight: 700; }
.c-compare .is-down { color: #c05621; font-weight: 700; }
.c-compare-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; background: var(--c-accent); color: #fff; font-size: 11px; }
.c-compare-rank { display: inline-block; min-width: 1.8em; margin-right: 6px; color: var(--c-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* よくある質問（データから計算できることだけを載せる） */
.c-faq { margin: 26px 0 10px; }
.c-faq details.step { margin: 6px 0; }
.c-faq details.step > summary { font-weight: 700; }
.c-faq details.step p { margin: 8px 0 2px; }

/* 死亡報告カード（インディー型）: コード・人物・地点・時刻 → ヒント → 答え */
.i-db-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.i-order { color: var(--pi-muted); font-size: 12px; }
.i-hint { margin: 10px 0 0; padding: 8px 10px; background: #0b0a08; border-left: 3px solid var(--pi-green); font-size: 13.5px; line-height: 1.7; }
.i-hint b, .i-point b, .i-final b { display: inline-block; margin-right: 8px; font-size: 11px; letter-spacing: .12em; color: var(--pi-green); }
.i-point { margin: 10px 0 0; padding: 8px 10px; border: 1px dashed var(--pi-line); font-size: 13.5px; }
.i-final { margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--pi-red); font-size: 14px; font-weight: 700; }
.i-unlock { margin: 8px 0 0; color: var(--pi-muted); font-size: 13px; }
.i-empty { margin: 10px 0; padding: 12px; border: 1px dashed var(--pi-line); color: var(--pi-muted); font-size: 14px; text-align: center; }

/* インディー型のトップ: 赤帯見出し・橙ボタンを、暗い紙色の世界観に揃える */
.pattern-indie .article h2 { background: none; color: var(--pi-paper); border-radius: 0; border-bottom: 0; padding: 10px 0 0; }
.pattern-indie .article h2 .pr { color: var(--pi-muted); border-color: var(--pi-line); }
.pattern-indie .btn-buy,
.pattern-indie .btn-steam { background: transparent; color: var(--pi-paper); border: 1px solid var(--pi-line); text-decoration: none; }
.pattern-indie .btn-buy:hover,
.pattern-indie .btn-steam:hover { background: var(--pi-panel); color: var(--pi-green); border-color: var(--pi-green); }
.pattern-indie .rec-platform { background: var(--pi-panel); color: var(--pi-muted); border: 1px solid var(--pi-line); }
.pattern-indie .rec-list, .pattern-indie .rec-list li { border-color: var(--pi-line); }
.pattern-indie .rec-list p { color: var(--pi-muted); }
.pattern-indie .article-head h1 { color: var(--pi-paper); }
.i-tool-title { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .16em; color: var(--pi-green); }
.pattern-indie .i-list li::before { content: counter(i, decimal-leading-zero) "  "; }

/* メニュータイルの件数バッジ（例: 装備 454） */
.m-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--c-tint); border: 1px solid var(--c-line); color: var(--c-muted); font-size: 11px; font-variant-numeric: tabular-nums; vertical-align: 1px; }

/* 頭文字の索引（40件以上の一覧）。押すとその行だけに絞る（filter.js） */
.c-index { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 12px; }
.c-index-label { margin-right: 2px; font-size: 12px; color: var(--c-muted); }
.c-index button { padding: 3px 9px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: inherit; font: inherit; font-size: 13px; line-height: 1.6; cursor: pointer; }
.c-index button:hover { border-color: var(--c-accent); }
.c-index button.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.c-index-count { margin-left: 5px; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   F. インディー型の下層ページ: style.css の白い面・白グラデーションを暗い紙面へ
   トップ（i-* 部品）は元から暗い。一覧・個別・ツールが共通部品の白背景で
   浮いていたため、.pattern-indie の中だけ色を落とす（他ゲームには効かせない）。
   ========================================================================== */

/* おすすめ（PR）バッジは暗い面では紙色に寄せる（共通CSSの #6b6b6b は暗所で 3.26:1） */
.pattern-indie .pr { color: var(--pi-muted); border-color: var(--pi-line); }

/* 次に読む（全下層ページの記事下） */
.pattern-indie .read-next-list li { background: var(--pi-panel); border-color: var(--pi-line); }
.pattern-indie .read-next-list li:hover { background: #24211a; }
.pattern-indie .read-next-list a { color: var(--pi-paper); }

/* ヒント→答えの折りたたみ。共通CSSは白グラデーションと赤帯を持つ */
.pattern-indie details.step > summary { background: var(--pi-panel); border-left-color: var(--pi-green); }
.pattern-indie details.step > summary::after { color: var(--pi-muted); }
.pattern-indie details.answer > summary { border-left-color: var(--pi-red); }   /* 答えだけ赤を残す */

/* 個別ページのプロフィール枠（白グラデーション + 濃色文字） */
.pattern-indie .profile { background: var(--pi-panel); border-color: var(--pi-line); }
.pattern-indie .profile-name { color: var(--pi-paper); }
.pattern-indie .profile-name small,
.pattern-indie .profile-text { color: var(--pi-muted); }

/* 答え合わせツールのフォーム */
.pattern-indie #check-form { background: var(--pi-panel); border-color: var(--pi-line); }
.pattern-indie #check-form label { color: var(--pi-paper); }
.pattern-indie #check-form select { padding: 6px 8px; background: #0b0a08; color: var(--pi-paper); border: 1px solid var(--pi-line); border-radius: 3px; font: inherit; }
.pattern-indie #check-form select:focus { border-color: var(--pi-green); outline: 1px solid var(--pi-green); }
.pattern-indie #check-form option { background: #0b0a08; color: var(--pi-paper); }

/* データ表（答え一覧・フッターの商品表） */
.pattern-indie table.data th { background: var(--pi-panel); color: var(--pi-paper); }
.pattern-indie table.data tbody tr:hover { background: #24211a; }

@media (max-width: 760px) {
  /* 横スクロール時に先頭列を固定する共通CSSの白背景 */
  .pattern-indie table.data th:first-child { background: var(--pi-panel); }
  .pattern-indie table.data td:first-child { background: var(--pi-bg); }
  .pattern-indie table.data tbody tr:hover td:first-child { background: #24211a; }
}

/* 頭文字の索引ボタンを暗い面に（.c-index は共通CSSで白背景） */
.pattern-indie .c-index button { background: var(--pi-panel); border-color: var(--pi-line); color: var(--pi-paper); }
.pattern-indie .c-index button:hover { border-color: var(--pi-green); }
.pattern-indie .c-index button.is-active { background: var(--pi-paper); border-color: var(--pi-paper); color: var(--pi-bg); }
.pattern-indie .c-index-label { color: var(--pi-muted); }

/* ==========================================================================
   G. データベース型 × インディー型
   style.css の一覧・フィルタ・目次・カードは白背景のままなので、
   .pattern-indie の紙色文字が白地に沈む。この節だけで面を落とす。
   ========================================================================== */

.pattern-indie .gnav-more summary,
.pattern-indie .mnav summary { color: var(--pi-paper); }
.pattern-indie .gnav-more summary:hover,
.pattern-indie .gnav a:hover { background: var(--pi-panel); }
.pattern-indie .gnav a.current:hover { background: var(--pi-paper); color: var(--pi-bg); }
.pattern-indie .gnav ul.gnav-more-list { background: var(--pi-panel); border-color: var(--pi-line); color: var(--pi-paper); }
.pattern-indie .gnav .gnav-more-list li { border-bottom-color: var(--pi-line); }

.pattern-indie .article h3,
.pattern-indie .cat-grid h3 { color: var(--pi-paper); border-left-color: var(--pi-green); border-bottom-color: var(--pi-line); }
.pattern-indie .pickup time { color: var(--pi-red-ink); }
.pattern-indie .pickup li { border-bottom-color: var(--pi-line); }

.pattern-indie .toc,
.pattern-indie .toc-grid { border-color: var(--pi-line); }
.pattern-indie .toc li { border-top-color: var(--pi-line); }
.pattern-indie .toc-grid p { background: var(--pi-panel); color: var(--pi-paper); border-bottom-color: var(--pi-line); }
.pattern-indie .toc-grid li { border-color: var(--pi-line); }
.pattern-indie .toc-grid a:hover,
.pattern-indie .link-grid li:hover,
.pattern-indie .img-grid li:hover,
.pattern-indie .browse-cards li:hover,
.pattern-indie .game-cards li:hover { background: #24211a; }

.pattern-indie .filter-box { background: var(--pi-panel); border-color: var(--pi-line); color: var(--pi-paper); }
.pattern-indie .filter-box label,
.pattern-indie .filter-label { color: var(--pi-paper); }
.pattern-indie #entry-count { color: var(--pi-muted); }
.pattern-indie .filter-box input,
.pattern-indie .filter-box select,
.pattern-indie select {
  background: #0b0a08; color: var(--pi-paper); border-color: var(--pi-line);
}
.pattern-indie select option { background: #0b0a08; color: var(--pi-paper); }

.pattern-indie .card-grid li,
.pattern-indie .browse-cards li,
.pattern-indie .cat-tiles li,
.pattern-indie .related-box,
.pattern-indie .game-cards li,
.pattern-indie .textbox,
.pattern-indie .pickup-box,
.pattern-indie .callout,
.pattern-indie .products,
.pattern-indie .btn-link a,
.pattern-indie #check-result li { background: var(--pi-panel); border-color: var(--pi-line); color: var(--pi-paper); }
.pattern-indie .products table.data { background: transparent; }
.pattern-indie .card-body > a,
.pattern-indie .browse-cards a,
.pattern-indie .cat-tiles a { color: var(--pi-paper); }
.pattern-indie .card-body p,
.pattern-indie .browse-cards p,
.pattern-indie .browse-cards .count,
.pattern-indie .game-card-body p,
.pattern-indie .pickup-box p,
.pattern-indie .products-notes,
.pattern-indie .product-maker,
.pattern-indie .product-checked,
.pattern-indie .products .note { color: var(--pi-muted); }
.pattern-indie .article p.callout-title { background: var(--pi-bg); color: var(--pi-red-ink); }
.pattern-indie .callout { border-color: var(--pi-red); }

.pattern-indie .chip:not(.chip-blue):not(.chip-red):not(.chip-green):not(.chip-purple):not(.chip-amber):not(.chip-teal):not(.chip-dark) {
  background: var(--pi-panel); color: var(--pi-paper); border-color: var(--pi-line);
}
.pattern-indie a.chip { text-decoration: none; }
.pattern-indie a.chip-blue,
.pattern-indie a.chip-red,
.pattern-indie a.chip-green,
.pattern-indie a.chip-purple,
.pattern-indie a.chip-amber,
.pattern-indie a.chip-teal,
.pattern-indie a.chip-dark { color: #fff; }

.pattern-indie mark { background: #5c4a1e; color: var(--pi-paper); }
.pattern-indie .sec-icons img,
.pattern-indie .cat-tiles img,
.pattern-indie .eyecatch-icons img { background: var(--pi-panel); border-color: var(--pi-line); }
.pattern-indie .term-item:target { background: #3a3018; }
.pattern-indie .tab-bar { border-bottom-color: var(--pi-line); }
.pattern-indie .tab-bar button { background: var(--pi-panel); color: var(--pi-paper); border-color: var(--pi-line); }
.pattern-indie .tab-bar button.active { background: #0b0a08; color: var(--pi-green); border-color: var(--pi-green); }

/* インディーのデータベース型。金は線と文字に使い、大きい面には塗らない */
.pattern-indie .i-banner { display: block; width: 100%; height: auto; margin: 4px 0 22px; border: 1px solid #8a7040; box-shadow: 8px 8px 0 #080705; }
.pattern-indie.site-database .article { max-width: 780px; }
.pattern-indie.site-database .c-answer { background: transparent; border: 0; border-left: 4px solid #c4a15a; box-shadow: none; padding-top: 2px; padding-bottom: 2px; }
.pattern-indie.site-database .c-answer b:first-child { color: #e6c36a; }
.pattern-indie.site-database .article-head { margin-bottom: 8px; }
.pattern-indie.site-database .c-verified,
.pattern-indie.site-database .byline,
.pattern-indie.site-database .notice { margin-top: 4px; }
.pattern-indie.site-database .article .notice { padding: 0; background: transparent; border: 0; }
.pattern-indie.site-database .c-facts,
.pattern-indie .vault-home .c-facts { box-shadow: 6px 6px 0 #080705; }
.pattern-indie.site-database .c-facts th,
.pattern-indie .vault-home .c-facts th { color: #e6c36a; }
.pattern-indie.site-database .pickup { background: transparent; border: 0; border-top: 1px solid var(--pi-line); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.pattern-indie.site-database .pickup-label { background: #14120e; color: #e6c36a; border: 1px solid #8a7040; }
.pattern-indie.site-database .pickup time { color: #e6c36a; }
.pattern-indie.site-database .card-grid li,
.pattern-indie.site-database .browse-cards li,
.pattern-indie.site-database .menu-tiles li,
.pattern-indie.site-database .read-next-list li { border-color: var(--pi-line); box-shadow: none; }
.pattern-indie.site-database .p-card.is-primary { border-color: #8a7040; border-left: 4px solid #c4a15a; box-shadow: none; }
.pattern-indie .vault-home .i-tool { border-color: #8a7040; }
.pattern-indie .vault-home .i-tool-title { color: #e6c36a; }
.pattern-indie .vault-home .i-tool label { display: block; margin: 0 0 6px; color: var(--pi-muted); font-size: 13px; }
.pattern-indie .vault-home .p-card { background: var(--pi-panel); color: var(--pi-paper); border: 1px solid var(--pi-line); box-shadow: none; text-decoration: none; }
.pattern-indie .vault-home .p-card:hover { border-color: #e6c36a; background: #24211a; color: var(--pi-paper); }
.pattern-indie .vault-home .p-card small { color: var(--pi-muted); }
.pattern-indie .vault-home .c-next a { box-shadow: none; border-color: var(--pi-line); }
.pattern-indie .vault-home .c-next a:first-child { border-color: #8a7040; border-left: 4px solid #c4a15a; }
.pattern-indie .vault-home .c-next a:hover { border-color: #c4a15a; }
.pattern-indie .vault-home .menu-tiles li { background: var(--pi-panel); border-color: #8a7040; box-shadow: 6px 6px 0 #080705; }