/* =============================================================
   LWF Wiki ダークテーマ  （atwiki グローバルCSSへ貼り付け）
   方針: ダーク基調（calc/ゲーム準拠）＋見出しのみゲームフォント
   配置: 管理メニュー →「スタイルシート(CSS)編集」に丸ごと貼る
   注意:
     - HTMLタグは本文に書かない。装飾は #divclass / &spanclass で当てる。
     - !important は使わない（このCSSは既定スキンの後に読まれ、後勝ちで効く）。
     - 悪魔セルの色は各md側が直接ダーク色(BGCOLOR)を持つ（CSSでの上書きはしない）。
   ============================================================= */

/* --- ゲームフォント（見出し用のみ）---------------------------
   M PLUS 1 = ゲームの日本語フォント（見出しに使用）
   Limelight = ラテン専用の装飾フォント（wikiタイトル h1 のロゴ体に使用）   */
@import url('https://fonts.googleapis.com/css2?family=Limelight&family=M+PLUS+1:wght@700;800&display=swap');

:root{
  --bg:#1a1a1e; --panel:#26262c; --panel2:#2f2f37; --line:#3a3a44;
  --text:#e8e8ec; --sub:#9b9ba6; --accent:#7c9cff; --accent-bg:#2a3354;
  --good:#5ec98a; --bad:#e0728a; --warn:#e0a85e;
  --head:"M PLUS 1","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --body:system-ui,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

/* --- 全体ベース --------------------------------------------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
}
/* 本文コンテナ（atwikiのスキンにより id/class が異なる場合あり。
   効かない時は実ページの本文要素に合わせてセレクタを追記すること） */
#wikibody, #content, .wikibody, .main, #container{
  background:var(--bg);
  color:var(--text);
}

/* --- 本文タイポグラフィ（可読性）--------------------------------
   既定スキンは本文が小さめ＆行が詰まりがち。#wikibody/#content にだけ効かせ、
   メニュー・人気カード・サイトタイトルのサイズには影響させない。 */
#wikibody, #content{ font-size:15px; line-height:1.85; }
#wikibody p, #content p{ margin:.7em 0; }
/* 本文リスト：行間を空け、マーカーをアクセント色に（詰まって見えるのを解消） */
#wikibody ul, #wikibody ol, #content ul, #content ol{ margin:.6em 0 1em; padding-left:1.5em; }
#wikibody li, #content li{ margin:.5em 0; }
#wikibody ul li::marker, #content ul li::marker{ color:var(--accent); }

/* --- リンク（全領域：本文・メニュー・サイドバー含む）-------- */
a{ color:var(--accent); text-decoration:none; }
a:visited{ color:#b9a0e8; }
a:hover{ color:#a9c0ff; text-decoration:underline; }
/* 悪魔色セルの上のリンク（pacts上部ナビ等）は背景と被らないよう白＋下線 */
#wikibody td:has(> .cellLucifer) a,   #wikibody td:has(> .cellLeviathan) a,
#wikibody td:has(> .cellSatan) a,     #wikibody td:has(> .cellMammon) a,
#wikibody td:has(> .cellBelphegor) a, #wikibody td:has(> .cellGehenna) a{
  color:#fff; text-decoration:underline;
}

/* --- メニュー/サイドバー等の領域をダーク化 ------------------
   atwikiスキンの主要コンテナを広めにカバー（存在しないidは無害）。
   実機で白いまま残る領域があれば、その要素の id/class を追記する。 */
#menu, #menubar, #menubar1, #menubar2, #submenu, #rightmenu, #leftmenu, #sidebar,
#side1, #side2, #side, .menu, .menubar, .side, .sidebar,
#contents, #content-wrapper, #main, #wrapper, #container{
  background-color:var(--bg); color:var(--text);
}
#menu a, #menubar a, #menubar1 a, #menubar2 a, #submenu a, #sidebar a, .menu a, .menubar a{
  color:#aebbf0; font-size:14px;   /* メニューリンクを大きめ・明るめに */
}
/* メニュー項目の上下間隔（右の人気カード #menubar2 は除外） */
#menu li, #menubar li, #menubar1 li, #submenu li, #sidebar li, .menu li{ margin:5px 0; }
#menu h2, #menu h3, #menubar h2, #menubar h3,
.menu h2, .menu h3{ color:var(--text); border-color:var(--line); }

/* --- 人気ページ等のリスト（#menubar2 > .plugin_popular）-----
   ただの箇条書きを順位付きカード風に。上位3件はメダルカラー。
   #menubar2 でスコープしてスキン既定のリスト装飾より詳細度を上げる。 */
#menubar2 .plugin_popular ul{ list-style:none; margin:0; padding:0; counter-reset:pop; }
#menubar2 .plugin_popular li{ margin:0 0 6px; counter-increment:pop; }
#menubar2 .plugin_popular li a{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:6px;
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  color:var(--text); text-decoration:none; font-size:13px;   /* 人気カードは現状サイズ維持 */
}
#menubar2 .plugin_popular li a::before{
  content:counter(pop);
  flex:0 0 1.5em; height:1.5em; line-height:1.5em; text-align:center;
  font-family:var(--head); font-weight:800; font-size:.8em;
  color:var(--accent); background:var(--accent-bg); border-radius:4px;
}
#menubar2 .plugin_popular li a:hover{ background:var(--panel2); border-color:var(--accent); }
#menubar2 .plugin_popular li:nth-child(1) a::before{ color:#1a1a1e; background:#e0c060; } /* 金 */
#menubar2 .plugin_popular li:nth-child(2) a::before{ color:#1a1a1e; background:#c4c8d0; } /* 銀 */
#menubar2 .plugin_popular li:nth-child(3) a::before{ color:#1a1a1e; background:#cf8a5e; } /* 銅 */

/* --- サイトタイトル(h1) / ページタイトル(h2) ----------------
   ヘッダ領域は #wikibody の外なのでグローバルに指定。 */
/* wikiタイトル(h1)はLatinロゴ体(Limelight)を先頭に、日本語はM PLUS 1へフォールバック。
   タイトルはスキン生成の #header h1 なので本文クラス(旧.lwfLogo)は当てられず、ここで直接指定する。 */
h1, #header h1, #wikiTitle, #wikiname, .wikiname{
  font-family:"Limelight",var(--head); font-weight:800; color:var(--text);
  letter-spacing:.06em;
}
h1 a, #header h1 a, .wikiname a{ color:var(--text); font-family:inherit; }   /* タイトルリンクは白系・フォント継承 */
h1 a:hover, #header h1 a:hover{ color:var(--accent); }
h2, #wikibody h2, #content h2, #pageTitle, .pagetitle, #pagename, .pagename{
  font-family:var(--head); font-weight:800; color:var(--text);
  border-bottom:2px solid var(--accent); padding-bottom:.2em;
}
h2 a, #wikibody h2 a, #content h2 a, #pageTitle a, .pagetitle a{ color:var(--text); }
/* ヘッダ内のページ名（#header > h2 > a 例:「トップページ」）は
   スキンが詳細度高めで暗色指定 → 直接上書き。小さいので下線・太装飾は外す。 */
#header h2{ border-bottom:none; padding-bottom:0; font-weight:600; }
#header h2, #header h2 a{ color:var(--accent); }
#header h2 a:hover{ color:#a9c0ff; }

/* --- 見出し（* / ** / *** → h3 / h4 / h5）------------------- */
#wikibody h3, #wikibody h4, #wikibody h5,
#content h3, #content h4{
  font-family:var(--head); font-weight:800; color:var(--text);
  border:none; letter-spacing:.02em;
}
/* 最上位見出し（*）に左アクセント帯 */
#wikibody h3, #content h3{
  border-left:4px solid var(--accent);
  padding-left:.5em; margin-top:1.8em; font-size:1.45em;
}
#wikibody h4, #content h4{ color:var(--sub); margin-top:1.35em; font-size:1.15em; }

/* --- 区切り線 ----------------------------------------------- */
#wikibody hr, #content hr{ border:none; border-top:1px solid var(--line); }

/* --- テーブル ----------------------------------------------- */
#wikibody table, #content table{
  border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line);
}
#wikibody td, #wikibody th, #content td, #content th{
  border:1px solid var(--line); color:var(--text); padding:4px 8px;
  height:32px; vertical-align:middle;   /* 全行の縦幅を揃える（縦結合セルの画像で行が潰れないように） */
}
/* セル内インラインアイコン（&ref(...,inline)）と文字の間隔・上下位置 */
#wikibody td img, #content td img{ margin-right:4px; vertical-align:middle; }
/* 見出しセル（|~…| → th）。md側でBGCOLOR指定がある悪魔ヘッダ等は
   そのインライン色が優先される（!important不要）。
   悪魔/使い魔セルの中央寄せは md 側の CENTER: で行う（CSSでは一律中央化しない）。 */
#wikibody th, #content th,
#wikibody td.style_th, #content td.style_th{
  background:var(--panel2); color:var(--text); font-weight:700;
}
/* 見出しは折り返さない。buff.md の入手経路列（初期/注文/電話…）のように
   セルの中身が ● と - だけの細い列だと、2文字の見出しが縦に割れて読めなくなるため。 */
#wikibody th, #content th{ white-space:nowrap; }

/* --- #region 折りたたみ（atwiki_plugin_region）--------------------
   #region は <table class="atwiki_plugin_region"> で描画される“レイアウト用”
   テーブル。上の汎用 table/td 装飾（枠線・背景・padding・height:32px・
   vertical-align:middle）がこのテーブルにも当たると、本体セル(td:3番目)の
   高さが32pxに固定＋中央寄せされ、中の <pre>（CSS全文）がはみ出して後続
   セクションと重なる。データ表ではないので装飾を解除し、本体を自然な高さ・
   上寄せにする（これで折りたたみ開閉が正常にレイアウトされる）。 */
#wikibody table.atwiki_plugin_region,
#content  table.atwiki_plugin_region{
  background:transparent; border:none; width:auto;
}
#wikibody table.atwiki_plugin_region > tbody > tr > td,
#content  table.atwiki_plugin_region > tbody > tr > td{
  border:none; background:transparent; padding:0;
  height:auto; vertical-align:top;
}
#wikibody table.atwiki_plugin_region pre,
#content  table.atwiki_plugin_region pre{
  margin:0; white-space:pre; overflow:auto;   /* 長い行は折返さずスクロール */
}

/* --- 悪魔バンド（行全体塗り）-------------------------------
   md側の &spanclass(悪魔名){…} マーカーを :has() で拾い、その行の
   全セル(td/th)を悪魔色で塗る。#wikibody 配下にスコープして
   既定の th ルールより詳細度を上げている（!important 不要）。
   :has() 非対応ブラウザでは塗られず素のダークになる（許容）。
   重要: マーカーは「行の直下セルの直下」にある場合だけ効かせる
   （tr:has(> セル > .クラス)）。単なる tr:has(.クラス) だと、
   #region のラッパー<tr>（中身全体を含む）までマッチし、折りたたみ内の
   全セルが後勝ちの1色で塗り潰される（2026-07-24 portal.mdで実証）。 */
#wikibody tr:has(> :is(td,th) > .lucifer)   :is(td,th),
#content  tr:has(> :is(td,th) > .lucifer)   :is(td,th){ background:#233a23; }
#wikibody tr:has(> :is(td,th) > .leviathan) :is(td,th),
#content  tr:has(> :is(td,th) > .leviathan) :is(td,th){ background:#3a3520; }
#wikibody tr:has(> :is(td,th) > .satan)     :is(td,th),
#content  tr:has(> :is(td,th) > .satan)     :is(td,th){ background:#3a2326; }
#wikibody tr:has(> :is(td,th) > .mammon)    :is(td,th),
#content  tr:has(> :is(td,th) > .mammon)    :is(td,th){ background:#2f2340; }
#wikibody tr:has(> :is(td,th) > .belphegor) :is(td,th),
#content  tr:has(> :is(td,th) > .belphegor) :is(td,th){ background:#1f2f3a; }
#wikibody tr:has(> :is(td,th) > .gehenna)   :is(td,th),
#content  tr:has(> :is(td,th) > .gehenna)   :is(td,th){ background:#3a2530; }

/* --- 悪魔セル単体の色（pacts.md 上部のキャラナビ等）---------
   行ではなく個々のセルを悪魔色に塗る。セルに &spanclass(cell悪魔名){…}
   を入れ、:has() でそのセルだけ塗る（td/thどちらでも可。見出しセル
   |~…| に空マーカーを入れる使い方はvote.mdのポータル名列など）。
   行バンド用クラス(.lucifer等)とは別名なので、6悪魔が並ぶナビ行でも
   競合しない。 */
/* 悪魔バンド（tr:has(...) :is(td,th)）より詳細度を上げるため table tr を挟む。
   挟まないと、バンドの効いた行の中で個別セル色が負けて塗られない（2026-08-24 headless で判明）。 */
#wikibody table tr :is(td,th):has(> .cellLucifer),   #content table tr :is(td,th):has(> .cellLucifer)  { background:#233a23; }
#wikibody table tr :is(td,th):has(> .cellLeviathan), #content table tr :is(td,th):has(> .cellLeviathan){ background:#3a3520; }
#wikibody table tr :is(td,th):has(> .cellSatan),     #content table tr :is(td,th):has(> .cellSatan)    { background:#3a2326; }
#wikibody table tr :is(td,th):has(> .cellMammon),    #content table tr :is(td,th):has(> .cellMammon)   { background:#2f2340; }
#wikibody table tr :is(td,th):has(> .cellBelphegor), #content table tr :is(td,th):has(> .cellBelphegor){ background:#1f2f3a; }
#wikibody table tr :is(td,th):has(> .cellGehenna),   #content table tr :is(td,th):has(> .cellGehenna)  { background:#3a2530; }

/* --- バンドを打ち消す中立セル（cellPlain）-------------------
   rowspan で複数行にまたがる見出しセル（recipe.md の使い魔列など）は
   HTML上は「先頭行の<tr>」に属する。その行に悪魔マーカーがあると
   バンド規則が使い魔セルまで塗ってしまい、行ごとに解放元が違うのに
   1つの悪魔色が付いて誤解を招く（2026-08-21 headless Edge で再現）。
   セルの先頭に空マーカー &spanclass(cellPlain){} を置いて既定色へ戻す。
   バンド規則と詳細度を揃えてある（ともに 1id+1class+3type）ので、
   必ずこのブロックをバンド規則より後ろに置いて後勝ちさせること。 */
#wikibody table tr :is(td,th):has(> .cellPlain),
#content  table tr :is(td,th):has(> .cellPlain){ background:var(--panel2); }

/* --- レアリティ色（pacts.md のレア列セルのみ）---------------
   レア名を &spanclass(レアクラス){…} で包む。:has() でその行の
   th（=レア列セル・rowspan）だけを塗る（行全体は塗らない）。
   悪魔バンド同様、#regionラッパー行の誤マッチ防止のため直下限定。 */
#wikibody tr:has(> th > .common)    th, #content tr:has(> th > .common)    th{ background:#6b5836; color:#fff; }
#wikibody tr:has(> th > .uncommon)  th, #content tr:has(> th > .uncommon)  th{ background:#2e6b3e; color:#fff; }
#wikibody tr:has(> th > .rare)      th, #content tr:has(> th > .rare)      th{ background:#2d2e6b; color:#fff; }
#wikibody tr:has(> th > .epic)      th, #content tr:has(> th > .epic)      th{ background:#6b2d8c; color:#fff; }
#wikibody tr:has(> th > .legendary) th, #content tr:has(> th > .legendary) th{ background:#b34a2e; color:#fff; }

/* =============================================================
   共通装飾クラス（本文では #divclass / &spanclass で当てる）
   クラス名は半角英数字のみ・lwf プレフィックス（CLAUDE.md準拠）
   ============================================================= */

/* 注意box（各ページ冒頭の「※注意」用） */
.lwfNote{
  border-left:4px solid var(--warn); background:#2c281f;
  padding:.6em .9em; margin:.8em 0; border-radius:4px; color:var(--text);
}
/* カード（囲み） */
.lwfCard{
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:12px 14px; margin:.8em 0;
}
/* 見出し帯（セクション小見出しを目立たせたい時） */
.lwfBand{
  background:var(--accent-bg); border-left:4px solid var(--accent);
  padding:.4em .8em; font-family:var(--head); font-weight:700;
}
/* 目立たせたい導線ボタン（本文: &spanclass(lwfBtn){&blanklink(表示){URL}} ）
   ボタン内は a:visited の色（薄紫）に埋もれないよう色を固定する */
.lwfBtn a, .lwfBtn a:visited{
  display:inline-block; margin:.3em 0; padding:.5em 1.4em; border-radius:8px;
  background:var(--accent-bg); border:1px solid var(--accent); color:var(--accent);
  font-family:var(--head); font-weight:800; font-size:1.2em; text-decoration:none;
}
.lwfBtn a:hover{ background:var(--accent); color:#16161c; text-decoration:none; }

/* 中央寄せ / 補足テキスト */
.lwfCenter{ text-align:center; }
.lwfSub{ color:var(--sub); font-size:.9em; }

/* --- 統計カード（メニューの counter/update 表示）------------------
   メニューに #divclass(lwfStat){{ … }} で囲んで使う。数字(counter出力)は
   地色(--text)で明るく、ラベル語は .lwfDim で薄く小さくして数字を目立たせる。
   メニュー幅が狭いので、ラベル・数値の行割りはメニューmd側の改行で固定する
   （rightMenu.md参照。桁が増えても崩れないよう更新日・累計は独立行）。
   ラベルは見出し行。block にすると atwiki の自動<br>と二重改行になり
   空行が出るため inline-block のまま余白だけ付ける。 */
.lwfStat{
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:8px 11px; margin:10px 0;
  color:var(--text); font-size:13px; line-height:1.7;
}
.lwfStat .lwfStatLabel{
  display:inline-block; margin:.6em 0 .1em;
  color:var(--accent); font-family:var(--head); font-weight:800; font-size:.85em;
}
.lwfStat .lwfStatLabel:first-child{ margin-top:0; }
.lwfStat .lwfDim{ color:var(--sub); font-size:.85em; }

/* --- 投票ページのナビ（vote.md冒頭のページ内リンク表）------------
   #divclass(voteNav){{ 表 }} で包むと、スクロールしても画面上部に
   貼り付く（長いページでもすぐ各セクションへ飛べる）。
   中身は表だが「データ表」ではないので、汎用のtable装飾（枠線・padding・
   height:32px）を解除して独立したピル型のバーに作り替える。
   悪魔色は既存の :has(> .cell悪魔名) と同詳細度で潰し合うため、このブロック内で塗り直す。 */
.voteNav{
  position:sticky; top:0; z-index:20;
  background:var(--bg); padding:6px 0 7px; margin-bottom:.6em;
  border-bottom:1px solid var(--line);
}
#wikibody .voteNav table, #content .voteNav table{
  background:transparent; border:none;
  border-collapse:separate; border-spacing:5px 0;
}
#wikibody .voteNav :is(td,th), #content .voteNav :is(td,th){
  border:none; border-radius:999px; padding:.25em 1em;
  height:auto; text-align:center; font-weight:700; font-size:.95em;
  background:var(--panel2);
}
#wikibody .voteNav :is(td,th) a, #content .voteNav :is(td,th) a{
  color:#fff; text-decoration:none; display:block;
}
/* 悪魔色。上の既定色（--panel2）と同詳細度なので、必ずこの後に置いて後勝ちさせる
   （順序を入れ替えると全部グレーに戻る。2026-08-18に踏んだ） */
#wikibody .voteNav :is(td,th):has(> .cellLucifer),   #content .voteNav :is(td,th):has(> .cellLucifer)  { background:#2f5130; }
#wikibody .voteNav :is(td,th):has(> .cellLeviathan), #content .voteNav :is(td,th):has(> .cellLeviathan){ background:#54492a; }
#wikibody .voteNav :is(td,th):has(> .cellSatan),     #content .voteNav :is(td,th):has(> .cellSatan)    { background:#552f34; }
#wikibody .voteNav :is(td,th):has(> .cellMammon),    #content .voteNav :is(td,th):has(> .cellMammon)   { background:#43315c; }
#wikibody .voteNav :is(td,th):has(> .cellBelphegor), #content .voteNav :is(td,th):has(> .cellBelphegor){ background:#2b4353; }
#wikibody .voteNav :is(td,th):has(> .cellGehenna),   #content .voteNav :is(td,th):has(> .cellGehenna)  { background:#533648; }
#wikibody .voteNav :is(td,th):hover, #content .voteNav :is(td,th):hover{
  filter:brightness(1.35);
}

/* --- vote.md 見出し装飾 --------------------------------------
   悪魔見出し（**）は「&spanclass(cell悪魔名){} 空マーカー＋&ref顔
   アイコン＋名前」で書き、:has() で見出し全体を悪魔色の帯にする。
   レアリティ見出し（***）は &spanclass(レアクラス){名前} を直接
   バッジに塗る（「エピック+レジェンダリー」のような複合見出しでも
   それぞれの色が出せるよう、:has()ではなくspan自体を塗る）。
   ※スキンにより */**/*** が h3〜h5 のどれに割り当たるかブレるため
   :is() で複数レベルをまとめて対象にしている。 */
#wikibody :is(h3,h4,h5):has(.cellLucifer),   #content :is(h3,h4,h5):has(.cellLucifer),
#wikibody :is(h3,h4,h5):has(.cellLeviathan), #content :is(h3,h4,h5):has(.cellLeviathan),
#wikibody :is(h3,h4,h5):has(.cellSatan),     #content :is(h3,h4,h5):has(.cellSatan),
#wikibody :is(h3,h4,h5):has(.cellMammon),    #content :is(h3,h4,h5):has(.cellMammon),
#wikibody :is(h3,h4,h5):has(.cellBelphegor), #content :is(h3,h4,h5):has(.cellBelphegor),
#wikibody :is(h3,h4,h5):has(.cellGehenna),   #content :is(h3,h4,h5):has(.cellGehenna){
  color:var(--text); padding:.25em .6em; border-radius:6px;
  display:flex; align-items:center; gap:8px;
}
#wikibody :is(h3,h4,h5):has(.cellLucifer),   #content :is(h3,h4,h5):has(.cellLucifer)  { background:#233a23; }
#wikibody :is(h3,h4,h5):has(.cellLeviathan), #content :is(h3,h4,h5):has(.cellLeviathan){ background:#3a3520; }
#wikibody :is(h3,h4,h5):has(.cellSatan),     #content :is(h3,h4,h5):has(.cellSatan)    { background:#3a2326; }
#wikibody :is(h3,h4,h5):has(.cellMammon),    #content :is(h3,h4,h5):has(.cellMammon)   { background:#2f2340; }
#wikibody :is(h3,h4,h5):has(.cellBelphegor), #content :is(h3,h4,h5):has(.cellBelphegor){ background:#1f2f3a; }
#wikibody :is(h3,h4,h5):has(.cellGehenna),   #content :is(h3,h4,h5):has(.cellGehenna)  { background:#3a2530; }
/* 見出し内のレアリティバッジ（色はレアリティカラー表と同じ）。
   スキンにより ***見出し が h4〜h6 のどれに割り当たっても効くよう
   :is() で全見出しレベルを対象にする（表内の .common 等には効かない） */
#wikibody :is(h3,h4,h5,h6) .common,    #content :is(h3,h4,h5,h6) .common,
#wikibody :is(h3,h4,h5,h6) .uncommon,  #content :is(h3,h4,h5,h6) .uncommon,
#wikibody :is(h3,h4,h5,h6) .rare,      #content :is(h3,h4,h5,h6) .rare,
#wikibody :is(h3,h4,h5,h6) .epic,      #content :is(h3,h4,h5,h6) .epic,
#wikibody :is(h3,h4,h5,h6) .legendary, #content :is(h3,h4,h5,h6) .legendary{
  display:inline-block; padding:.05em .55em; border-radius:4px;
  color:#fff; font-size:.9em;
}
#wikibody :is(h3,h4,h5,h6) .common,    #content :is(h3,h4,h5,h6) .common   { background:#6b5836; }
#wikibody :is(h3,h4,h5,h6) .uncommon,  #content :is(h3,h4,h5,h6) .uncommon { background:#2e6b3e; }
#wikibody :is(h3,h4,h5,h6) .rare,      #content :is(h3,h4,h5,h6) .rare     { background:#2d2e6b; }
#wikibody :is(h3,h4,h5,h6) .epic,      #content :is(h3,h4,h5,h6) .epic     { background:#6b2d8c; }
#wikibody :is(h3,h4,h5,h6) .legendary, #content :is(h3,h4,h5,h6) .legendary{ background:#b34a2e; }

/* --- 文中のレアリティバッジ（本文・表のセル内で使う）-----------------
   &spanclass(chipRare){レア} のように書くと小さな色ラベルになる。
   表のレアリティ列（th）ごと塗る .common 等とは別クラスにしてあるので、
   セルの背景色を巻き込まずに文章の途中へ置ける。 */
#wikibody .chipCommon,    #content .chipCommon,
#wikibody .chipUncommon,  #content .chipUncommon,
#wikibody .chipRare,      #content .chipRare,
#wikibody .chipEpic,      #content .chipEpic,
#wikibody .chipLegendary, #content .chipLegendary{
  display:inline-block; padding:.05em .55em; border-radius:4px;
  color:#fff; font-size:.9em; line-height:1.5;
}
#wikibody .chipCommon,    #content .chipCommon   { background:#6b5836; }
#wikibody .chipUncommon,  #content .chipUncommon { background:#2e6b3e; }
#wikibody .chipRare,      #content .chipRare     { background:#2d2e6b; }
#wikibody .chipEpic,      #content .chipEpic     { background:#6b2d8c; }
#wikibody .chipLegendary, #content .chipLegendary{ background:#b34a2e; }