:root {
  color-scheme: dark;

  /* 土台の色 ── 奥から手前へ。手前に来るほど明るい。
     面はほぼ無彩色にしてある。分類・良い/注意/危険の色に情報を持たせているので、
     地に色みがあるとそれらと競合する。特に水色（ユーティリティ／モジュール）は
     青灰色の地から 13.2 しか離れず、意味の色の中でいちばん危なかった。
     地の色みを抜くと 20.0 まで開く。 */
  --bg:#161819;           /* ページ全体と入力欄の中 */
  --sunken:#1e2123;       /* パネルの上に置かれる面。選択枠・カード・構成例・説明欄 */
  --panel:#282b2e;        /* パネル本体・構成例カード・確認ダイアログ */
  --raised:#35383c;       /* 操作するもの。タブ・ボタン・段階ボタン・選択中の帯 */
  --slot-active:#444954;  /* いま選んでいる枠の面。--accent と同じ色相にそろえてある
                             ── 線だけ変えると、選んでいる枠の面だけ色が取り残される */

  /* 文字と線 */
  --text:#f2f4f5;       /* 基本の文字 */
  --muted:#bec1c4;      /* 控えめな説明文 */
  --soft:#bce3f2;       /* 補足の小さい文字（水色） */
  --pale:#e4e9ed;       /* いちばん薄い面の文字。帯の文字、通知の文字、戻すボタンの枠 */
  /* ふつうの枠線。**操作できるものの輪郭を作っているのはこの線**で、
     面どうしの差（タブの地とページの地で 1.51、枠の面とパネルで 1.19）では
     部品の在り処を言えていない。WCAG 1.4.11 の 3.0 を満たすため、
     2026-08-05 の検査で L*40 → L*49 へ上げた。色相と彩度は据え置き。 */
  --line:#70757a;
  /* 意味を持たない構造の色。見出しの帯の既定値。
     ここに色みを与えてはいけない ── 分類・良い・注意・危険がすでに色相環に
     8つ散っており、9つ目の色相はどれかと紛れる。意味を持つ色は彩度 26〜48 で、
     この色は 1.5。**彩度そのものが「意味を持つかどうか」の目印**になっている。 */
  --structure:#9ea1a3;
  /* 選択中。タブの地、枠の左線、一覧の上線。
     意味を持つ色（分類・良い・注意・危険）は彩度 26〜48 で、これは 6。
     **彩度が「意味か状態か」を分ける**ので、色相環の空きを奪い合わずに済む。
     明るさ 82 は、本文の白（96）と帯の灰色（66）のちょうど中間 ── どちらへ
     寄せても片方と紛れる。以前はユーティリティの分類色と同じ値だった。 */
  --accent:#c7ccd7;     /* L* 82 C* 6 h 275 */
  --on-accent:#10222b;  /* 強調色の上に乗る文字 */
  --cost-text:#ffffff;  /* カードのコストの数字 */
  --slot-line:#82878c;  /* 枠・カード・候補の縁の線。同じ理由で L*50 → L*56 */

  /* ヘッダー（上の青い帯）── 上から下へ暗くなるグラデーション。
     下端をページの地に近づけて、帯とページの境目を溶かしている。

     色相は 268（CIELAB の角度）。意味を持つ色8つのどれからも 33°以上
     離れていて、色みを残したまま最も離れられる場所がここだった。
     以前の #3e7d97 は色相 239 で、ユーティリティ／モジュールの水色から
     4°しかなく、大きな面で意味の色と競合していた。

     明るさは上端 L*42・下端 L*27。文字は純白のままで、いちばん明るい
     上端でも 5.97 ある（以前は帯が一色 L*49 で 4.58 ＝ AAぎりぎりだった）。 */
  --header-top:#45658a;        /* 帯の上端 */
  --header-bg:#1d4264;         /* 帯の下端。グラデーションを使えない場合の地でもある */
  --header-text:#ffffff;       /* 帯の中の文字 */
  --header-button-bg:#213145;  /* 「初期状態に戻す」の背景 */
  --header-button-line:#bcc7d9;  /* 同じくその枠線 */

  /* フッター */
  --footer-summary:#9fc9d8;  /* 「このサイトについて」の見出し */
  --footer-link:#a9dce9;     /* 本文中のリンク */
  --footer-credit:#888c90;   /* 著作権表示 */

  /* 良い・注意・危険 */
  --good:#79be84;          /* 選択済みの印（緑） */
  --hint-bg:#19342d;       /* 操作のヒント欄の背景 */
  --hint-text:#d7f2df;     /* 同じくその文字 */
  --warn:#c78b52;          /* 注意。構成例カードと確認ダイアログの線 */
  --warn-bg:#3b2a1d;       /* デッキが未完成のときの帯 */
  --warn-text:#ffe3c1;     /* 同じくその文字 */
  --preset-title:#f4d6b1;  /* 構成例の見出し */
  --danger-line:#c26c64;   /* 「すべて消す」ボタンの枠 */
  --danger-bg:#71342f;     /* 同じくその背景 */

  /* 画面すみの通知 */
  --toast-line:#d3786a;       /* 枠線 */
  --toast-accent:#ef8c7d;     /* 左端の太い線 */
  --toast-bg:#3b1d21;         /* 背景 */
  --toast-text:#ffe1dc;       /* 文字 */
  /* 「知らせるだけ」の色。お知らせの通知と、任意の操作をすすめる断り書きで共有する */
  --info-line:#5a7d92;  /* 枠線 */
  --info-bg:#17303d;    /* 背景 */

  /* 分類の色 ── 枠線に使う方 */
  --category-creature:#6db8a0;  /* クリーチャー */
  --category-trap:#d59b67;      /* トラップ */
  --category-camera:#a28be0;    /* カメラ */
  --category-utility:#77b2ca;   /* ユーティリティ */
  --category-firearm:#a28be0;   /* 銃器。カメラと同じ色 */
  --category-effect:#d899ad;    /* 効果 */
  --category-mod:#77b2ca;       /* モジュール。ユーティリティと同じ色 */

  /* 分類の色 ── 文字に使う方。枠線用より明るい */
  --category-creature-text:#8dd7be;  /* クリーチャー */
  --category-trap-text:#f0b77d;      /* トラップ */
  --category-camera-text:#c0a9ff;    /* カメラ・銃器 */
  --category-utility-text:#9ad5eb;   /* ユーティリティ・モジュール */
  --category-effect-text:#f0abc1;    /* 効果 */

  /* 結果の表 ── ページと同じ暗い配色。値は書かず、面のランプから借りている。
     借りているのは、表の面がページの面と同じ理屈で並ぶようにするため。
     明るい表だったころは L* 89〜97 の狭い帯に面が6つ押し込まれていて、
     どれも ΔE 3 以下で見分けられていなかった。ランプは L* 8〜31 に
     5段階が開いているので、同じ役割を無理なく置ける。

     ここが別名になっているのは、表の中での役割を名前で残すため。
     いまは同じ色を指しているものもあるが、表だけ動かしたくなったときに
     ここ1か所で切り離せる。 */
  --table-bg:var(--panel);          /* 表の地 */
  --table-text:var(--text);         /* 表の文字 */
  --table-line:var(--line);         /* マス目の線 */
  --table-head-bg:var(--raised);    /* 見出し行。操作するものと同じ高さ */
  --table-hover-bg:var(--slot-active);  /* 行にマウスを乗せたとき */
  --table-detail-bg:var(--sunken);  /* 開いた内訳。一段沈む */
  --table-rule-line:var(--line);    /* 効果一覧の区切り線 */

  /* 内訳の中の文字 ── ここで --accent を使ってはいけない。
     --accent は「上に白文字が乗る面」でもあるため明るくできず、
     暗い地の上では文字として足りなくなる。--soft は常に明るい。 */
  --table-heading:var(--soft);      /* 内訳の小見出し */
  --table-mark:var(--soft);         /* ▸の印と数式の左線 */
  --table-sub:var(--muted);         /* 計算の注記 */

  --formula-bg:var(--bg);           /* 数式。いちばん深い凹み */
  --formula-text:var(--text);       /* 数式の文字 */

  /* 補足3種 ── 背景で分けるのをやめた。「ふつう」は内訳と同じ面＝無地にして
     左線だけで示し、色の付いた2種を浮き立たせる。明るい表のころは3種とも
     背景を持っていて、そのうち2つが ΔE 2.6 でほぼ同じ色だった。 */
  --note-bg:var(--sunken);              /* ふつう。内訳と同じ値＝無地 */
  --note-line:var(--slot-line);         /* 同じく左線 */
  --note-estimate-bg:var(--warn-bg);    /* 「独自検証・推定」。注意の暖色を借りる */
  --note-estimate-line:var(--warn);
  --note-revised-bg:var(--info-bg);     /* 「v2.0で変更」。知らせるだけの青を借りる */
  --note-revised-line:var(--info-line);
  --note-link:var(--footer-link);       /* 出典のリンク */

  /* 動きの速さ */
  --motion-fast:140ms;                      /* ボタンなどの色が変わる速さ */
  --motion-disclosure:180ms;                /* 開閉の速さ */
  --motion-ease:cubic-bezier(.2,.75,.3,1);  /* 動きの緩急 */
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* 地の色を先に置いてから画像を重ねる。グラデーションが効かない環境でも
   下端の色が残り、白い文字が読めなくなることはない。

   内側の影（inset 0 -5px）はやめた。あれは帯とページの段差を隠すための
   ものだったが、下端をページに近づけたので隠すべき段差がない。 */

.site-header {
  position:relative;
  background:var(--header-bg);
  background-image:linear-gradient(var(--header-top),var(--header-bg));
  padding:2rem max(1rem,calc((100% - 1100px)/2));
}

.site-header h1 {
  margin:.1rem 3rem .1rem 0;
  font-size:clamp(1.45rem,4vw,2.1rem);
}

.site-header p {
  margin:0;
  color:var(--header-text);
}

/* サイトが何かを一行で言う説明。本文（16px）と同じ大きさだと、見出しの続きなのか
   説明なのかが曖昧になるので、一段落とす。
   0.88rem は狭い画面で3行から2行に変わる分かれ目で、ヘッダーが 213px → 182px に縮む。
   これ以上小さくしても行数は減らず、読みにくくなるだけだった。 */

.site-tagline {
  font-size:.88rem;
}

.eyebrow {
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--header-text);
  font-size:.8rem;
}

.site-title-reset {
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font:inherit;
  font-weight:inherit;
  text-align:left;
}

.site-title-reset:hover,
.site-title-reset:focus-visible {
  text-decoration:underline;
  outline:0;
}

.site-version {
  right:max(1rem,calc((100% - 1100px)/2));
  bottom:1.1rem;
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.page-shell {
  max-width:1100px;
  margin:1.5rem auto 4rem;
  padding:0 1rem;
}

.notice {
  padding:1rem;
  background:var(--panel);
  border:1px solid var(--line);
}

.tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.25rem;
  border-bottom:1px solid var(--line);
}

.toast {
  position:fixed;
  z-index:20;
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  max-width:min(32rem,calc(100vw - 2rem));
  padding:.75rem .85rem;
  border:1px solid var(--toast-line);
  border-left:4px solid var(--toast-accent);
  border-radius:.4rem;
  background:var(--toast-bg);
  color:var(--toast-text);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  font-size:.92rem;
}

.toast.is-info {
  border-color:var(--info-line);
  border-left-color:var(--accent);
  background:var(--info-bg);
  color:var(--pale);
}

.toast[hidden] {
  display:none;
}

.toast-close {
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font:inherit;
  font-size:1.25rem;
  line-height:1;
}

.tab,
.button {
  border:1px solid var(--line);
  background:var(--raised);
  color:var(--text);
  padding:.7rem .6rem;
  cursor:pointer;
  border-radius:.25rem;
  font:inherit;
}

.tab.is-active {
  background:var(--accent);
  color:var(--on-accent);
  font-weight:700;
}

.button:hover,
.tab:hover {
  filter:brightness(1.12);
}

.preset-section {
  margin:0;
  border:1px solid var(--line);
  border-top:0;
  background:var(--sunken);
}

.preset-section-toggle {
  width:100%;
  padding:1rem;
  border:0;
  background:transparent;
  color:var(--soft);
  cursor:pointer;
  font:inherit;
  font-size:1.05rem;
  font-weight:700;
  text-align:left;
}

.preset-section-toggle:hover,
.preset-section-toggle:focus-visible {
  background:var(--raised);
  outline:0;
}

.preset-section.is-open > .preset-section-toggle {
  border-bottom:1px solid var(--line);
}

.preset-section-content {
  padding:0 1rem 1rem;
}

.preset-section-content > .muted {
  margin:.75rem 0;
}

.preset-list {
  display:grid;
  gap:.7rem;
}

.preset-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.55rem 1rem;
  align-items:start;
  padding:.8rem .9rem;
  border-left:4px solid var(--warn);
  background:var(--panel);
}

.preset-card h3 {
  margin:0;
  color:var(--preset-title);
}

.preset-card details {
  grid-column:1;
}

.preset-card summary {
  cursor:pointer;
  color:var(--soft);
  font-weight:700;
}

.preset-card p {
  margin:.55rem 0 0;
  white-space:pre-wrap;
}

.preset-card .button {
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
}

/* パネルには帯を敷かない。以前はここに天井から降りる明るいグラデーションを
   置いていたが、**すでにパネルの枠線と面が言っていることを二度言っていた**。
   届く範囲（5.5rem）も意味のある境界ではなく見た目の都合の数字で、
   「何かの範囲を示しているように見えて、何の範囲でもない」状態だった。

   加えて、その霧の上端と h3 の帯の中ほどは **ΔE 0.4 ＝ 目には同じ色**で、
   階層の違う2つが同じ絵の具で描かれていた。区切りを言うのは h3 の帯だけにする。 */

.panel {
  background:var(--panel);
  padding:clamp(1rem,3vw,2rem);
  min-height:38rem;
  border:1px solid var(--line);
  border-top:0;
}

.panel h2 {
  margin-top:0;
}

.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

.muted {
  color:var(--muted);
  font-size:.92rem;
}

.selection-summary {
  margin:1.25rem 0;
  padding:1rem;
  background:var(--sunken);
  border-left:4px solid var(--accent);
}

#selected-summary {
  white-space:pre-wrap;
}

/* 装備を選ぶと一覧が閉じ、パネルが 608px まで縮む。ページ全体が短くなるので
   スクロール位置がその範囲に丸められ、下を見ていた人が上へ引き戻される
   （985px幅で最大649px）。次の枠を開くとまた下りることになるので、
   最低の高さを持たせて縮み幅を抑える。

   値はクリーチャーの一覧を開いたときの高さ（985px幅で930px）。作者の指定。
   これ以上伸ばすと、触る前から空いた領域が画面1つ分になる。

   狭い画面には掛けない ── 1列に積むため一覧が1700px以上になり、
   この程度の下限では引き戻しがほとんど減らないのに、空き領域だけが残る。 */

@media (min-width:761px) {
  .panel[data-panel="equipment"] {
    min-height:58rem;
  }
}

/* 表のあとに置く断り書き。表の一部ではないが、表を見ている人にしか要らない。
   詳細の中の本文（p）より小さく、参照表と同じ色の系統に寄せる。 */

.reference-table-note {
  margin:.35rem 0 0;
  font-size:.86em;
  color:var(--soft);
}

.equipment-layout {
  display:grid;
  grid-template-columns:minmax(190px, .8fr) minmax(0, 3fr);
  gap:1.25rem;
}

.equipment-slots {
  display:grid;
  align-content:start;
  gap:.65rem;
}

.equipment-slots h3 {
  margin:0;
}

/* 枠どうしを離す。デッキの枠と同じ .45rem。
   親の .equipment-slots の gap は「見出し・枠の入れ物・累積ポイント」の間隔で、
   枠そのものの間隔ではない ── 入れ物側に持たせないと枠が接したままになる。 */

#equipment-slots {
  display:grid;
  gap:.45rem;
}

/* 累積ポイントは装備枠の直下。ゲーム内と同じ位置で、枠を選び替えている
   手元から目を離さずに読める。パネル見出しの右端に置いていたときは、
   操作している場所から遠くて目に入らなかった。 */

.equipment-points-line {
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}

.equipment-points-line strong {
  color:var(--text);
  font-size:1.05rem;
  font-variant-numeric:tabular-nums;
}

.equipment-slot {
  width:100%;
  min-height:3.6rem;
  padding:.65rem;
  text-align:left;
  border:1px solid var(--line);
  border-left:5px solid var(--slot-line);
  border-radius:.25rem;
  background:var(--sunken);
  color:var(--text);
  cursor:pointer;
  font:inherit;
}

.equipment-slot.is-active {
  border-left-color:var(--accent);
  background:var(--slot-active);
}

/* 空の枠は文字を弱める。ぱっと見てどこが空いているか分かるようにするため。
   明るさは「選択中」が使い切っているので、地には触らず文字だけを落とす。
   まずこれだけで足りるかを見る ── 足りなければ破線の枠などを足す。 */

.equipment-slot.is-empty,
.deck-slot.is-empty {
  color:var(--muted);
}

/* 選べないものは明るくしない。押せないのに手応えを返すと、押せるように見える。 */

.equipment-slot:hover,
.equipment-tier:not([aria-disabled="true"]):hover {
  filter:brightness(1.14);
}

.equipment-browser {
  min-width:0;
}

/* 分類タブは下の一覧を絞り込むものなので、上より下を狭くする。
   帯の下にあった 10.4px を 6.4px と 4px に振り分けており、一覧の位置は動かない。 */

.category-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-bottom:.25rem;
}

.category-tab {
  padding:.45rem .75rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--sunken);
  color:var(--text);
  cursor:pointer;
  font:inherit;
}

/* 未選択のタブは輪郭で分類を言う。**塗りつぶしか輪郭かが「選んでいるか」を言い、
   色は分類だけを言う** ── 色に2つの意味を持たせずに済む。

   地には入れない。分類色を暗く薄めて敷く形も試したが、8%まで落とすと
   クリーチャーの緑とユーティリティの水色が **ΔE 2.2** まで詰まり、
   「色が付いているのに読めない」といういちばん困る状態になる
   （分類の帯 `3277078` でも同じペアで同じことが起きた）。
   **全彩度の線なら分類どうしは最小でも ΔE 28** あり、薄める話自体が要らない。

   分類ごとの規則は書かなくてよい。--cat は既にこれらのタブに付いている。 */

.category-tab:not(.is-active) {
  border-color:var(--cat,var(--line));
}

.category-tab.is-active {
  color:var(--on-accent);
  font-weight:700;
}

.category-tab.category-creature.is-active {
  background:var(--category-creature);
  border-color:var(--category-creature);
}

.category-tab.category-trap.is-active {
  background:var(--category-trap);
  border-color:var(--category-trap);
}

.category-tab.category-camera.is-active,
.category-tab.category-firearm.is-active {
  background:var(--category-camera);
  border-color:var(--category-camera);
}

.category-tab.category-utility.is-active,
.category-tab.category-mod.is-active {
  background:var(--category-utility);
  border-color:var(--category-utility);
}

.category-tab.category-effect.is-active {
  background:var(--category-effect);
  border-color:var(--category-effect);
}

.equipment-content {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);
  gap:1rem;
  align-items:start;
}

.equipment-list {
  display:grid;
  gap:.38rem;
}

.equipment-family {
  display:grid;
  grid-template-columns:minmax(7.5rem,1fr) minmax(0,2fr);
  gap:.5rem;
  align-items:center;
  padding:.45rem .55rem;
  border-left:4px solid var(--line);
  background:var(--sunken);
}

.equipment-list[data-category="Creature"] .equipment-family {
  border-left-color:var(--category-creature);
}

.equipment-list[data-category="Trap"] .equipment-family {
  border-left-color:var(--category-trap);
}

.equipment-list[data-category="Camera"] .equipment-family {
  border-left-color:var(--category-camera);
}

.equipment-list[data-category="Utility"] .equipment-family {
  border-left-color:var(--category-utility);
}

.equipment-family-options {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.equipment-tier {
  display:grid;
  grid-template-columns:auto auto;
  gap:.25rem;
  align-items:baseline;
  min-width:3.9rem;
  padding:.35rem .42rem;
  border:1px solid var(--slot-line);
  border-radius:.25rem;
  background:var(--raised);
  color:var(--text);
  cursor:pointer;
  font:inherit;
}

.equipment-tier small {
  color:var(--soft);
  font-size:.72rem;
}

/* 「もう選んである」は状態なので淡い色。緑（--good）だったころは彩度 40.8 で、
   分類の色（22〜48）と同じ土俵に立っていた。クリーチャーの分類色とは ΔE 18.5
   しか離れておらず、同系色として当たってもいた。

   状態は色ではなく**形**で言い分ける ── 全周の輪が「もう選んである」、
   枠の左辺が「いま選んでいる」、枠の下辺が「手札保持」。
   緑は知らせ（操作のヒント、選択が変わったときの点滅）に残してある。 */

.equipment-tier.is-selected {
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}

/* 選べないものは薄くする。理由は見た目で区別しない ── ポイント超過も重複も、
   コード上は同じ blocked で、読み上げにも同じ aria-disabled を出している。
   見た目だけ別々（超過は薄く、重複は橙の破線）になっていて、
   **読み上げには同じことを伝えているのに、目には違う言い方をしていた**。

   印を aria-disabled に付けているのは、その属性が「選べない」の正本だから。
   理由は title と読み上げ名に入っていて、押せばトーストにも出る。

   薄くするのは注意色より役に立つ。候補18枚のうち選べないのは3枚で、
   探しているのは残る15枚の方 ── 橙の破線は、選べない側に目を引いてしまう。 */

.deck-card[aria-disabled="true"],
.equipment-tier[aria-disabled="true"] {
  opacity:.52;
}

.equipment-detail {
  position:sticky;
  top:1rem;
  min-height:12rem;
  padding:1rem;
  border:1px solid var(--line);
  /* パネルの天井なので構造の色。--accent は「いまここ」を指す色で、
     説明欄そのものが選択中なわけではない。 */
  border-top:4px solid var(--structure);
  background:var(--sunken);
}

.equipment-detail h3 {
  margin:.25rem 0 .7rem;
}

.equipment-detail p {
  margin:.45rem 0;
}

.detail-category {
  font-weight:700;
}

.detail-category.category-Creature {
  color:var(--category-creature-text);
}

.detail-category.category-Trap {
  color:var(--category-trap-text);
}

.detail-category.category-Camera {
  color:var(--category-camera-text);
}

.detail-category.category-Utility {
  color:var(--category-utility-text);
}

.detail-points {
  color:var(--soft);
  font-weight:700;
}

.detail-values {
  color:var(--muted);
}

label,
.card-slot {
  display:grid;
  gap:.35rem;
  font-weight:700;
}

select {
  width:100%;
  min-height:2.7rem;
  padding:.45rem;
  border:1px solid var(--line);
  border-radius:.25rem;
  background:var(--bg);
  color:var(--text);
  font:inherit;
}

.card-slot {
  padding:.75rem;
  border:1px solid var(--line);
  background:var(--sunken);
}

.reserve {
  display:flex;
  gap:.45rem;
  align-items:center;
  font-weight:400;
}

/* 枠の下辺と同じ色にそろえる。緑（--good）は「選択済み」の色で、
   手札保持はそれとは別のことを言っている。 */

.reserve input {
  accent-color:var(--accent);
}

table {
  width:100%;
  border-collapse:collapse;
  margin:1rem 0 1.8rem;
  background:var(--table-bg);
  color:var(--table-text);
}

th,
td {
  padding:.55rem .7rem;
  border:1px solid var(--table-line);
  text-align:left;
}

th {
  background:var(--table-head-bg);
}

td:last-child {
  width:35%;
  font-variant-numeric:tabular-nums;
}

/* 結果タブの分類だけは枠で囲う。ここだけ**表がいくつも縦に続く**ので、
   どこからどこまでが1つの分類かを帯だけでは追いきれない。
   他のタブでは枠を付けていない ── 中の選択枠やカードと同じ 1px の明るい線が
   増えて、同じようなものが並んでしまうため。表は中に線を持たないので、
   ここでは枠が増えても紛れない。 */

.result-category {
  margin-top:1.7rem;
  padding:.7rem .75rem .8rem;
  border:1px solid var(--line);
  border-radius:.2rem;
}

/* 分類の見出しの色は「見出しの帯」の一群で付けている（下の方にある）。
   以前はここで左の縦線を引いていた。 */

.result-row {
  cursor:pointer;
}

.result-row:hover,
.result-row:has(.result-row-opener:focus-visible) {
  background:var(--table-hover-bg);
}

.result-row td:first-child {
  padding:0;
}

.result-row-opener {
  display:block;
  width:100%;
  padding:.55rem .7rem;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
  font:inherit;
  text-align:left;
}

.result-row-opener::before {
  content:'▸';
  display:inline-block;
  width:1.1rem;
  color:var(--table-mark);
  transition:transform .15s ease;
}

.result-row.is-expanded .result-row-opener::before {
  transform:rotate(90deg);
}

.result-detail-row td {
  padding:0;
  background:var(--table-detail-bg);
}

.result-breakdown {
  padding:.8rem 1rem 1rem 1.8rem;
}

.result-effects,
.result-calculation,
.result-note {
  margin:.8rem 0;
}

.result-effects h4,
.result-calculation h4,
.result-note h4 {
  margin:0 0 .25rem;
  color:var(--table-heading);
  font-size:.9rem;
}

.result-effects ul,
.result-calculation ul {
  margin:0;
  padding:0;
  list-style:none;
}

.result-effects li {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  max-width:44rem;
  padding:.18rem 0;
  border-bottom:1px solid var(--table-rule-line);
}

.result-effects li strong {
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.result-calculation li {
  padding:.18rem 0;
}

.result-formula {
  display:inline-block;
  margin:.55rem 0 0;
  padding:.45rem .65rem;
  border-left:3px solid var(--table-mark);
  background:var(--formula-bg);
  color:var(--formula-text);
  font-family:ui-monospace,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}

.result-calculation-note {
  margin:.4rem 0 0;
  color:var(--table-sub);
  font-size:.88rem;
}

.result-note {
  max-width:52rem;
  padding:.75rem .9rem;
  border-left:3px solid var(--note-line);
  background:var(--note-bg);
}

.result-note.is-estimate {
  border-left-color:var(--note-estimate-line);
  background:var(--note-estimate-bg);
}

.result-note.is-revised {
  border-left-color:var(--note-revised-line);
  background:var(--note-revised-bg);
}

.result-note-summary {
  margin:.2rem 0;
}

.result-note details {
  margin-top:.45rem;
}

.result-note summary {
  cursor:pointer;
  color:var(--table-heading);
  font-weight:700;
}

/* 計算対象外の効果 ── 表の外の暗いパネルなので、表の色は使えない。
   中身が --muted と --soft を使っているのに合わせる。 */
.result-omissions summary {
  cursor:pointer;
  color:var(--soft);
  font-weight:700;
}

.result-note details p {
  margin:.5rem 0 0;
}

.result-omissions {
  margin:1rem 0;
  padding:.7rem .9rem;
  border:1px solid var(--line);
  border-left:4px solid var(--note-line);
  background:var(--sunken);
}

.result-omissions > summary {
  font-size:.95rem;
}

.result-omissions-content {
  color:var(--muted);
}

.result-omissions-content p {
  margin:.6rem 0;
}

.result-omissions-content section {
  margin:.65rem 0;
}

.result-omissions-content h4 {
  margin:0 0 .15rem;
  color:var(--soft);
  font-size:.9rem;
}

.result-omissions-content ul {
  margin:.2rem 0;
  padding-left:1.2rem;
}

/* 構成についての断り書き。結果の数字の直前に置く ── どちらも誤りではないが、
   何が結果に入っていないかを、読む前に知らせる必要がある。

   強さは2段階。既定は「ゲームが要求していること」（デッキ10枚）で、
   .is-optional は「やってもよいこと」（モジュールの手札保持）。 */

.build-notice {
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin:0;
  padding:.65rem .8rem;
  border-left:4px solid var(--warn);
  background:var(--warn-bg);
  color:var(--warn-text);
}

.build-notice.is-optional {
  border-left-color:var(--info-line);
  background:var(--info-bg);
  color:var(--pale);
}

/* display を指定した要素は、それだけでブラウザ既定の [hidden]{display:none} に
   勝ってしまう。この手当てがないと hidden を立てても欄が消えない。
   通知（.toast）には同じ手当てが入っているが、ここには漏れていた。 */

.build-notice[hidden] {
  display:none;
}

/* 条件を満たせば消える印。currentColor なので、強さの色をそのまま受け継ぐ。
   丸で囲んだ「！」に見える字は環境によって出ないため、丸はCSSで描く。 */

.notice-mark {
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:1.3rem;
  height:1.3rem;
  margin-top:.1rem;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:.85rem;
  font-weight:700;
  line-height:1;
}

#build-notices {
  display:grid;
  gap:.5rem;
  margin:1rem 0 0;
}

#build-notices:not(:has(.build-notice:not([hidden]))) {
  margin:0;
}

@media (max-width:760px) {
  .equipment-layout,
  .equipment-content {
    grid-template-columns:1fr;
  }

  /* 枠を2列に並べる。列指定は枠を包んでいる入れ物（#equipment-slots）に置く。
     親の .equipment-slots に置いても、入れ物がその左の列を占めるだけで、
     枠は縦に積まれたまま右半分が空いた。デッキの枠は入れ物側に置いてある。
     display と gap は上の既定がそのまま効く。 */

  #equipment-slots {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px) {
  .tabs {
    grid-template-columns:repeat(2,1fr);
  }

  .panel-heading {
    align-items:flex-start;
    flex-direction:column;
  }

  .panel {
    padding:1rem;
  }

  .equipment-list {
    grid-template-columns:1fr;
  }
}

.deck-layout {
  display:grid;
  gap:1.25rem;
}

.deck-slots {
  display:grid;
  align-content:start;
  gap:.55rem;
}

.deck-slots h3 {
  margin:0;
}

.deck-slots > div {
  display:grid;
  gap:.45rem;
}

.deck-slot {
  padding:.5rem;
  text-align:left;
  border:1px solid var(--line);
  border-left:4px solid var(--slot-line);
  border-radius:.25rem;
  background:var(--sunken);
  color:var(--text);
  cursor:pointer;
  font:inherit;
  overflow-wrap:anywhere;
}

.deck-slot.is-active {
  border-left-color:var(--accent);
  background:var(--slot-active);
}

/* 埋まっている枠は上辺に分類の帯。候補一覧のカードと同じ位置・同じ太さなので、
   選んだものと選ぶ元が同じ言葉で読める。

   狙いは1枚の分類を当てることではなく、**デッキ全体の内訳を一目で掴むこと**。
   10枠を見渡して「トラップが1枚もない」に気づけるようにするためのもの。
   だから帯は全彩度で置く ── 薄い色だと分類どうしが ΔE 3 まで詰まって、
   色が付いているのに読めないという、いちばん困る状態になる。

   空の枠には帯を付けない。太さの違い（1px と 4px）そのものが
   「埋まっているか」を言うので、印を1つ増やさずに済む。 */

/* 分類の帯そのものは、4種類の枠で共通なので下の「分類の帯」の一群にある。 */

/* 手札保持は「状態」なので淡い色にする。--good（緑）は「選択済み」の色で、
   候補一覧・装備の段階・MMの候補で共通に使っている。手札保持は選択済みとは
   別のことなので、もともと別の意味が1色に相乗りしていた。

   加えて、上辺にクリーチャーの帯（緑寄り）が来ると下辺の緑と当たる。

   どの状態かは色ではなく**位置**で言う ── 左辺が選択中、下辺が手札保持。
   色を増やさずに済み、彩度は状態のまま低く保てる。 */

/* デッキ枠と、デッキタブに出る追加カードの表示。どちらにも手札保持のチェックが
   出るので、印も同じにする。以前は下辺の印がデッキ枠にしか付いていなかった。 */

.deck-slot.is-held,
.card-slot.is-held {
  border-bottom-color:var(--accent);
  box-shadow:inset 0 -2px 0 var(--accent);
}

.deck-browser {
  min-width:0;
}

.deck-content {
  display:grid;
  gap:1rem;
  align-items:start;
}

.deck-list {
  display:grid;
  gap:.55rem;
}

.deck-card {
  display:grid;
  align-content:start;
  gap:.4rem;
  text-align:left;
  border:1px solid var(--line);
  border-top:4px solid var(--slot-line);
  border-radius:.3rem;
  background:var(--sunken);
  color:var(--text);
  cursor:pointer;
  font:inherit;
}

.deck-card strong {
  overflow-wrap:anywhere;
}

.deck-card small {
  color:var(--soft);
}

.deck-list[data-category="creature"] .deck-card {
  border-top-color:var(--category-creature);
}

.deck-list[data-category="trap"] .deck-card {
  border-top-color:var(--category-trap);
}

.deck-list[data-category="firearm"] .deck-card {
  border-top-color:var(--category-firearm);
}

.deck-list[data-category="effect"] .deck-card {
  border-top-color:var(--category-effect);
}

.deck-list[data-category="mod"] .deck-card {
  border-top-color:var(--category-mod);
}

/* 上辺は分類の帯が持つ（詳細度でこちらが負ける）。理屈は
   .equipment-tier.is-selected のところに書いてある。 */

.deck-card.is-selected {
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}

/* 重複しているカードを薄くするのは、上の aria-disabled の規則がまとめて行う。 */

.deck-detail {
  min-height:12rem;
  padding:1rem;
  border:1px solid var(--line);
  /* パネルの天井なので構造の色。--accent は「いまここ」を指す色で、
     説明欄そのものが選択中なわけではない。 */
  border-top:4px solid var(--structure);
  background:var(--sunken);
}

.deck-detail h3 {
  margin:.25rem 0 .7rem;
}

.deck-detail p {
  margin:.45rem 0;
}

.card-category-creature {
  color:var(--category-creature-text);
}

.card-category-trap {
  color:var(--category-trap-text);
}

.card-category-firearm {
  color:var(--category-camera-text);
}

.card-category-effect {
  color:var(--category-effect-text);
}

.card-category-mod {
  color:var(--category-utility-text);
}

@media (max-width:760px) {
  .deck-layout,
  .deck-content {
    grid-template-columns:1fr;
  }
}

@media (max-width:460px) {
  .deck-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .deck-slot {
    min-height:3.9rem;
    font-size:.86rem;
  }
}

.deck-card {
  min-height:3.1rem;
  padding:.5rem .7rem;
}

.deck-card strong {
  font-weight:600;
}

.deck-slot {
  min-height:5.1rem;
}

.deck-slots > div {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (max-width:900px) {
  .deck-slots {
    max-width:38rem;
  }

  .deck-list {
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  }
}

.site-footer {
  max-width:1100px;
  margin:1rem auto 2.5rem;
  padding:0 1rem;
  color:var(--muted);
  font-size:.86rem;
}

.site-footer details {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.site-footer summary {
  padding:.8rem .1rem;
  cursor:pointer;
  color:var(--footer-summary);
  font-weight:700;
}

.site-footer-content {
  padding:0 .1rem .9rem;
  line-height:1.65;
}

.site-footer-content p {
  margin:.55rem 0;
}

.site-footer-content a {
  color:var(--footer-link);
}

.site-footer-credit {
  color:var(--footer-credit);
}

.reset-dialog {
  width:min(32rem,calc(100vw - 2rem));
  padding:0;
  border:1px solid var(--line);
  border-top:4px solid var(--warn);
  border-radius:.4rem;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 18px 48px rgba(0,0,0,.5);
}

.reset-dialog::backdrop {
  background:rgba(0,0,0,.68);
}

.reset-dialog form {
  padding:1.25rem;
}

.reset-dialog h2 {
  margin:0;
  font-size:1.2rem;
}

.reset-dialog p {
  color:var(--muted);
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.25rem;
}

.button-danger {
  border-color:var(--danger-line);
  background:var(--danger-bg);
}

@media (max-width:620px) {
  .preset-card {
    grid-template-columns:1fr;
  }

  .preset-card .button {
    grid-column:1;
    grid-row:auto;
    justify-self:start;
  }
}

/* 選択情報のコピー操作と、補足内の静的な参照データ。 */

.selection-summary-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.selection-summary-heading h3 {
  margin:0;
}

.selection-summary-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

/* 結果の絞り込み。すぐ下の「選択情報をコピー／共有URLを表示」は gap で離した
   独立した操作が2つだが、こちらは択一なので線を共有して繋げる。
   **輪郭の違いが、2つの意味の違いを言っている** ── 選択中の色だけで
   区別しようとすると、色を強くする以外に打つ手がなくなる。 */
.result-filter {
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:.3rem;
  overflow:hidden;
}

.result-filter button {
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.88rem;
  padding:.5rem .75rem;
  cursor:pointer;
  white-space:nowrap;
}

.result-filter button + button {
  border-left:1px solid var(--line);
}

.result-filter button.is-on {
  background:var(--accent);
  color:var(--on-accent);
  font-weight:700;
  /* 選ばれている方は押しても何も起きないので、押せる見た目にしない。 */
  cursor:default;
}

.selection-summary-actions .button:disabled {
  cursor:not-allowed;
  opacity:.55;
}

.copy-status {
  min-height:1.5rem;
  margin:.5rem 0 0;
  color:var(--soft);
  font-size:.9rem;
}

.result-note h5 {
  margin:.8rem 0 .2rem;
  color:var(--table-heading);
  font-size:.9rem;
}

.reference-table {
  width:auto;
  max-width:100%;
  margin:.35rem 0 .25rem;
  font-size:.84rem;
}

.reference-table th,
.reference-table td {
  padding:.3rem .45rem;
  white-space:nowrap;
}

.reference-table td:last-child {
  width:auto;
}

/* 参照表は列名を折り返さないので、狭い画面では本文の幅を超える。途中に切る器も
   スクロールする器も無いため、はみ出した幅が body まで伝わって、ページ全体が
   横に動く（表を開いていない人にも起きる）。ここだけ折り返しを許すと表が縮む。
   #46 の表で 366px → 204px、結果の表も 445px → 283px に収まった。

   上の nowrap と同じ強さなので、必ずそれより後ろに置くこと。 */
@media (max-width:460px) {
  .reference-table th,
  .reference-table td {
    white-space:normal;
    /* 銃器の表は列が5つある（1発と1マガジン × 通常とターゲット化）。
       既定の余白のままだと表が252pxになり、外側の結果の表を押して
       ページ全体が1px横に動いた。左右だけ詰める ── 上下は行の高さに効く。 */
    padding-left:.35rem;
    padding-right:.35rem;
  }

  /* 日本語はどこでも改行できるので、放っておくと「未確認」が「未確／認」に
     割れる。値の列だけ語で切らせない。見出し（th）は除く ── 「基礎時間」を
     1行に保つと列が広がり、そのぶん左のキー列が潰れて逆に読めなくなる。 */
  .reference-table td + td {
    word-break:keep-all;
  }

  /* 値の列が幅を取るぶん、左のキー列が先に潰れる。放っておくと
     「その他ゾンビ」が1文字ずつ6行に割れた。6em あれば6文字が1行に収まり、
     #14 の表で 244px→296px（枠は309px）。7em にすると枠に触る。 */
  .reference-table th:first-child,
  .reference-table td:first-child {
    min-width:6em;
  }
}

/* 2段見出しの上の段。束ねている範囲が見えないと、下の段の「通常」が
   どちらに属するのか読めない。左右の区切りで囲いを示す。 */
.reference-table thead tr:first-child th {
  border-bottom:0;
  text-align:center;
}

.reference-table thead tr:first-child th + th {
  border-left:1px solid var(--line);
}

.reference-table thead tr:first-child th.is-blank {
  background:none;
  border:0;
}

.result-note-sources {
  margin:.25rem 0 0;
  padding-left:1.2rem;
}

.result-note-sources a {
  color:var(--note-link);
}

@media (max-width:620px) {
  .selection-summary-heading {
    align-items:flex-start;
    flex-direction:column;
  }

}

/* デッキ枠はカード名の長さに影響されない固定サイズにする。 */

#deck-slots {
  grid-auto-rows:8.25rem;
}

.deck-slot-wrapper {
  height:8.25rem;
}

.deck-slot-wrapper .deck-slot {
  display:-webkit-box;
  height:100%;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-height:1.35;
}

.deck-detail {
  min-width:0;
}

/* フェーズ3: 共有・選択操作の導線と小画面表示。 */

.site-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.site-header h1 {
  margin-right:0;
  color:var(--header-text);
  text-shadow:0 1px 1px rgba(0,0,0,.22);
}

.header-actions {
  display:grid;
  justify-items:end;
  gap:.55rem;
  flex:0 0 auto;
}

.header-reset {
  min-height:2.5rem;
  border-color:var(--header-button-line);
  background:var(--header-button-bg);
  color:var(--header-text);
}

.site-version {
  position:static;
  color:var(--header-text);
}

.site-header h1 .site-version {
  display:inline-block;
  margin-left:.45rem;
  color:var(--header-text);
  font-size:.45em;
  font-weight:600;
  line-height:1;
  vertical-align:baseline;
}

.panel > .preset-section {
  margin:0 0 1.25rem;
  border-top:1px solid var(--line);
  background:var(--sunken);
}

.panel > .preset-section > .preset-section-toggle {
  padding:.72rem .8rem;
  font-size:.95rem;
}

.preset-section-close {
  display:block;
  width:100%;
  margin-top:.9rem;
}

/* 「外す」は枠が空のとき消える。消えたぶん行が縮み、下の候補一覧が 12px 跳ねる。
   ボタン1つぶんの高さを行そのものに確保しておく ── 帯に持たせると、
   行の高さがどの子がいちばん背が高いかに左右される。

   内訳は .button の 上下padding .7rem×2 ＋ 行の高さ 1.55em ＋ 枠線 1px×2 で 49.2px。
   em で書いてあるので、文字を大きくしても一緒に伸びる。 */

.selection-browser-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-height:calc(1.4rem + 1.55em + 2px);
  margin-bottom:.4rem;
}

.active-slot-band {
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:.45rem .6rem;
  border-left:4px solid var(--accent);
  background:var(--raised);
  color:var(--pale);
  font-size:.9rem;
  font-weight:700;
}

.selection-browser-heading .button {
  min-height:2.5rem;
}

.result-row.is-zero {
  opacity:.65;
}

.result-row.is-zero:hover,
.result-row.is-zero:focus-visible {
  opacity:1;
}

@media (max-width:620px) {
  .site-header {
    padding-top:1.35rem;
    padding-bottom:1.35rem;
  }

  .header-actions {
    gap:.35rem;
  }

  .header-reset {
    font-size:.88rem;
  }

  /* 縦積みになると、確保する高さがボタン1行ぶん丸ごとになる。
     狭い画面でそれだけ空けておくのは高くつくので、ここでは確保しない。 */

  .selection-browser-heading {
    align-items:stretch;
    flex-direction:column;
    min-height:0;
  }

  .selection-browser-heading .button {
    width:100%;
  }

  .active-slot-band {
    min-height:2.5rem;
  }

  .tab,
  .button,
  .equipment-slot,
  .deck-slot,
  .mm-slot,
  .category-tab,
  .equipment-tier {
    min-height:2.5rem;
  }
}

.mm-layout {
  display:grid;
  grid-template-columns:minmax(270px,.85fr) minmax(0,2.15fr);
  gap:1.25rem;
}

.mm-slots {
  display:grid;
  align-content:start;
  gap:.55rem;
}

.mm-slots h3 {
  margin:0;
}

/* 枠の上に、その枠が何を選ぶところかを置く。枠は隙間なく積むので、
   この見出しの余白が枠どうしの区切りも兼ねる。 */

.mm-slot-label {
  margin:.75rem 0 .3rem;
  color:var(--soft);
  font-size:.92rem;
}

.mm-slot-label:first-child {
  margin-top:0;
}

/* カードのコスト。ゲーム内のカードと同じ、枠の左上に貼り付けた数字。
   位置が意味を運ぶので数字だけで足りる。読み方は説明欄の「コスト：4」が教える。

   背の高い枠は名前を下へ、背の低い候補は名前を右へ逃がす。候補で下へ逃がすと
   一覧が縦に伸びてしまい、一覧の丈を抑えたいという元の意図に反する。 */

.has-cost {
  position:relative;
}

.card-cost {
  position:absolute;
  top:0;
  left:0;
  padding:.18rem .36rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:.22rem 0 .22rem 0;
  background:var(--bg);
  color:var(--cost-text);
  font-size:.95rem;
  font-weight:700;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* 背の低い候補タイルでは、数字を絶対配置にしない。`リルート` のコストは
   `10/9/8/0` で、決め打ちの余白では数字が名前に重なる。列として置き、
   負のマージンで枠の角へ寄せると、名前の位置が数字の幅に追随する。

   数字の大きさは一覧の丈とのつり合いで決めた。モジュールの16枚（名前がいちばん
   長い）で測ると、これより大きくすると折り返しが 3枚 → 4枚 → 6枚 と増え、
   小さくしても 3枚から減らない。 */

.deck-card.has-cost,
.mm-choice.has-cost {
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  column-gap:.5rem;
}

.deck-card.has-cost .card-cost,
.mm-choice.has-cost .card-cost {
  position:static;
  align-self:start;
}

.deck-card.has-cost .card-cost {
  margin:-.5rem 0 -.5rem -.7rem;
}

.mm-choice.has-cost .card-cost {
  margin:-.55rem 0 -.55rem -.65rem;
}

.mm-slot.has-cost,
.card-slot.has-cost {
  padding-top:2.1rem;
}

.mm-slot {
  width:100%;
  min-height:3.25rem;
  padding:.55rem .65rem;
  text-align:left;
  border:1px solid var(--line);
  border-left:4px solid var(--slot-line);
  border-radius:.25rem;
  background:var(--sunken);
  color:var(--text);
  cursor:pointer;
  font:inherit;
}

/* 分類の帯 ─────────────────────────────────────────────
   埋まっている枠は上辺に分類の色を置く。候補一覧のカードと同じ位置・同じ太さ。

   狙いは1枚の分類を当てることではなく、**構成の内訳を一目で掴むこと**。
   10枠を見渡して「トラップが1枚もない」に気づけるようにするためのもの。
   だから全彩度で置く ── 薄めると分類どうしが ΔE 3 まで詰まり、
   色が付いているのに読めないという、いちばん困る状態になる。

   分類は --cat（色）と --cat-width（太さ）の2つで渡す。分類を持たない枠には
   どちらも無いので、下の規則がそのまま元の 1px の線に戻る。空の枠に帯を
   付けないのはこの仕組みによる ── 太さの違いそのものが「埋まっているか」を
   言うので、印を1つ増やさずに済む。

   これらのクラスは分類タブ（.category-tab）にも付く。あちらは --cat を
   未選択の枠線に使っている（--cat-width は使わない）。

   **この一群は、枠の border 一括指定より後ろに置くこと。**
   前に置くと .mm-slot などの `border:1px solid` に border-top を潰される。 */

.category-creature {
  --cat:var(--category-creature);
  --cat-width:4px;
}

.category-trap {
  --cat:var(--category-trap);
  --cat-width:4px;
}

.category-camera {
  --cat:var(--category-camera);
  --cat-width:4px;
}

.category-firearm {
  --cat:var(--category-firearm);
  --cat-width:4px;
}

.category-utility {
  --cat:var(--category-utility);
  --cat-width:4px;
}

.category-effect {
  --cat:var(--category-effect);
  --cat-width:4px;
}

.category-mod {
  --cat:var(--category-mod);
  --cat-width:4px;
}

/* 帯を引くのは「分類の帯を引く」の1か所（このファイルの後ろの方）。
   .mm-choice の border 一括指定より後ろに置く必要があるため、そこにまとめてある。 */

.mm-slot.is-active {
  border-left-color:var(--accent);
  background:var(--slot-active);
}

/* 区切りの線は置かない。見出しの帯が「ここから下は追加カード」を言うので、
   線を足すと 13px の間に横線が2本並ぶ。分類の見出しで左の縦線を帯に統合したのと
   同じ理由。余白だけで離す。デッキタブ側の同じ区画には元から線がない。 */

.mm-extra-card-section {
  margin-top:1.45rem;
}

.mm-extra-card-section h3 {
  margin:0 0 .45rem;
}

/* 見出しの帯 ──────────────────────────────────────────────
   **見出しの行は一段沈んでいる。** 帯は面の上に乗せる膜ではなく、
   サイトの面のランプ（--bg → --sunken → --panel → --raised → --slot-active）を
   下へたどったもの ── 「沈んだ面」はこのサイトが選択枠にもカードにも
   結果の内訳にも使っている言い方で、帯だけが新しい語彙を持ち込まずに済む。

   以前は明るい膜だった。明るい膜はランプのどこにも属さない余所者で、
   どう調整しても「もや」にしかならなかった（作者の指摘で気づいた）。

   幅と終わり方が「その見出しが受け持つ範囲」を言う。
   **入れ物の幅いっぱいに伸ばし、端で切る。** 以前は右へ薄れて消えており、
   受け持ちの右端をどこにも示せていなかった。

   この一群は、上にある .mm-slots h3 などの margin 指定より
   **後ろに置く必要がある**。詳細度が同じ（class + 要素）ため、
   前に置くと margin を上書きできない。

   色は各見出しが --band を1つ持ち、そこから帯と線を作る。
   分類の見出しは --band を差し替えるだけでよい。 */

.mm-select-section > h3,
.mm-slots > h3,
.mm-extra-card-section > h3,
.equipment-slots > h3,
.deck-slots > h3,
.deck-extra-card-section > h3,
.selection-summary-heading,
.result-category > h3 {
  /* 既定は無彩色。**帯の色＝その見出しが受け持つ分類の色、分類がなければ灰色**
     という一般則にしてある。以前は既定が強調色（水色）で、分類を持たない
     「機能向上その他」だけを灰色に落とす特例を書いていた。 */
  --band:var(--structure);
  position:relative;
  /* 帯は見出しが受け持つ入れ物の幅いっぱいに伸ばす。文字幅に合わせていたころは
     長さが語ごとにばらつき、揃っていないだけの模様に見えた。入れ物の幅なら
     「この見出しが受け持つ範囲」を帯がそのまま覆う。 */
  margin:0 0 .5rem;
  padding:.3rem .7rem .34rem .55rem;
  /* 帯を ::before に逃がすための入れ物。これがないと ::before の z-index:-1 が
     パネルの背景より後ろへ回り、帯ごと見えなくなる。 */
  isolation:isolate;
}

/* 帯そのもの。**文字と同じ要素に置いてはいけない** ── 背景を別の層に分けて
   おかないと、帯に掛ける処理が文字まで巻き込む（右へ薄れさせていたころ、
   実際に文字まで薄れていた）。

   黒45%は、パネル(L*17.3)の上でページの地(--bg L*8.1)とほぼ同じ深さになる量。
   色ではなく透過で指定しているので、**分類色の見出しでも同じだけ沈む**。 */

.mm-select-section > h3::before,
.mm-slots > h3::before,
.mm-extra-card-section > h3::before,
.equipment-slots > h3::before,
.deck-slots > h3::before,
.deck-extra-card-section > h3::before,
.selection-summary-heading::before,
.result-category > h3::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:.15rem .15rem 0 0;
  background:linear-gradient(to bottom, transparent 28%, color-mix(in srgb, #000 45%, transparent) 100%);
}

/* 下端の線は帯の底。**帯と同じ場所で終わる**（どちらも入れ物の右端まで）。
   分類色が出るのはここだけ ── 帯は黒なので色を持たない。 */

.mm-select-section > h3::after,
.mm-slots > h3::after,
.mm-extra-card-section > h3::after,
.equipment-slots > h3::after,
.deck-slots > h3::after,
.deck-extra-card-section > h3::after,
.selection-summary-heading::after,
.result-category > h3::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--band);
}

/* 「選択情報一覧」だけは見出しの右にボタンが並ぶ。帯は h3 ではなく**行そのもの**に
   持たせて、ボタンごと覆う ── h2 の帯をパネルに持たせたのと同じ理屈。
   h3 に持たせると帯がボタンの手前で切れ、ここだけ短くなる（687px 対 1002px）。 */

.selection-summary-heading > h3 {
  position:relative;
  margin:0;
}

/* 分類の見出しは帯の色で分類を示す。以前は左の縦線でこれをやっていたが、
   線と帯の両方だとうるさいので帯へ統合した。 */

.result-category-creature > h3 {
  --band:var(--category-creature);
}

.result-category-trap > h3 {
  --band:var(--category-trap);
}

.result-category-camera > h3 {
  --band:var(--category-camera);
}

/* 「機能向上その他」は分類を持たないので、上の既定（無彩色）のまま。
   ここに規則は要らない。 */

/* 選択欄の上に置く見出し。枠と同じ間隔で下に選択欄が続く。 */

.mm-select-section {
  margin-bottom:1rem;
}

.mm-browser {
  min-width:0;
}

.mm-content {
  display:grid;
  /* 左に下限を置かない。170px と 240px の両方を下限にすると合計 426px が要り、
     .mm-browser がそれより狭くなる幅（760pxの折り返しのすぐ上）で説明欄が
     入れ物からはみ出していた。装備タブが壊れないのは、あちらの左列が
     minmax(0,1fr) で縮めるため。同じ形に揃える。

     4fr/6fr は .8fr/1.2fr と同じ比率。説明欄が下限の240pxで止まったあと、
     残るのは左列だけになる。このとき fr が1未満だと、CSSは残り幅を埋めずに
     その割合ぶんしか使わない（.8fr なら 137px のうち 110px しか取らず、
     27px が空いたままになる）。1以上にして埋め切らせる。 */
  grid-template-columns:minmax(0,4fr) minmax(240px,6fr);
  gap:1rem;
  align-items:start;
}

.mm-choice-list {
  display:grid;
  gap:.5rem;
}

.mm-choice {
  display:grid;
  /* 中身を縦の中央に。これがないと grid の既定で中身が枠の高さまで
     引き伸ばされ、文字だけが箱の上端に貼り付いて上寄りに見える
     （実測：strong の高さが 25px → 32px に伸びていた）。
     コスト付きの候補には下の規則で入っていたので、そこだけ中央だった。 */
  align-items:center;
  gap:.25rem;
  min-height:3.25rem;
  padding:.55rem .65rem;
  text-align:left;
  border:1px solid var(--line);
  border-left:4px solid var(--slot-line);
  border-radius:.3rem;
  background:var(--sunken);
  color:var(--text);
  cursor:pointer;
  font:inherit;
}

.mm-choice:hover {
  filter:brightness(1.14);
}

/* 上辺だけは分類の帯に譲る。border-color の一括指定で塗ると帯が消えるので、
   3辺を個別に指定している。デッキの候補一覧も、詳細度の関係で同じ結果になっている
   （分類色が上辺を持ち、輪は残りの辺）。 */

.mm-choice.is-selected {
  border-right-color:var(--accent);
  border-bottom-color:var(--accent);
  border-left-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}

.mm-choice small {
  color:var(--soft);
}

/* 分類の帯を引く ── 枠と候補で共通。**枠の border 一括指定より後ろに置くこと。**
   前に置くと .mm-slot や .mm-choice の `border:1px solid` に上辺を潰される。
   色と太さは上の .category-* が渡す。分類を持たないもの（スキルの枠と候補、
   空の枠）は変数が無いので、そのまま 1px の線に戻る。 */

.deck-slot,
.equipment-slot,
.mm-slot,
.card-slot,
.mm-choice {
  border-top:var(--cat-width,1px) solid var(--cat,var(--line));
}

.mm-detail {
  position:sticky;
  top:1rem;
  min-height:12rem;
  padding:1rem;
  border:1px solid var(--line);
  /* パネルの天井なので構造の色。--accent は「いまここ」を指す色で、
     説明欄そのものが選択中なわけではない。 */
  border-top:4px solid var(--structure);
  background:var(--sunken);
}

.mm-detail h3 {
  margin:.25rem 0 .7rem;
}

.mm-detail p {
  margin:.45rem 0;
}

@media (max-width:760px) {
  .mm-layout,
  .mm-content {
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:no-preference) {
  .tab,
  .button,
  .site-title-reset,
  .preset-section-toggle,
  .mm-slot,
  .mm-choice,
  .equipment-slot,
  .equipment-tier,
  .category-tab,
  .deck-slot,
  .deck-card {
    transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,filter var(--motion-fast) ease;
  }

  #mm-browser:not([hidden]),
  .result-breakdown {
    animation:section-reveal var(--motion-disclosure) var(--motion-ease) both;
  }

  #equipment-browser:not([hidden]),
  #deck-browser:not([hidden]) {
    animation:fade-reveal var(--motion-disclosure) var(--motion-ease) both;
  }

  #mm-browser.is-closing,
  #equipment-browser.is-closing,
  #deck-browser.is-closing {
    pointer-events:none;
    animation:selection-confirm var(--motion-disclosure) var(--motion-ease) both;
  }

  .preset-section-content.is-opening {
    animation:preset-reveal var(--motion-disclosure) var(--motion-ease) both;
  }

  .preset-section-content.is-closing {
    pointer-events:none;
    animation:preset-collapse var(--motion-disclosure) var(--motion-ease) both;
  }

  #results.is-refreshing {
    animation:results-refresh var(--motion-disclosure) var(--motion-ease) both;
  }

  #mm-select.is-updated {
    animation:mm-select-updated var(--motion-disclosure) var(--motion-ease) both;
  }

  .toast:not([hidden]) {
    animation:toast-enter var(--motion-disclosure) var(--motion-ease) both;
  }

  .toast.is-closing {
    pointer-events:none;
    animation:toast-exit var(--motion-disclosure) var(--motion-ease) both;
  }

  @supports selector(details::details-content) {
    :root {
      interpolate-size:allow-keywords;
    }

    details::details-content {
      block-size:0;
      opacity:0;
      overflow:clip;
      transition:content-visibility var(--motion-disclosure) allow-discrete,block-size var(--motion-disclosure) var(--motion-ease),opacity var(--motion-fast) ease;
    }

    details[open]::details-content {
      block-size:auto;
      opacity:1;
    }
  }
}

@keyframes section-reveal {
  from {
    opacity:0;
    transform:translateY(-4px);
  }

  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fade-reveal {
  from {
    opacity:0;
  }

  to {
    opacity:1;
  }
}

@keyframes selection-confirm {
  0%,
  35% {
    opacity:1;
    transform:translateY(0);
  }

  100% {
    opacity:0;
    transform:translateY(-4px);
  }
}

@keyframes preset-reveal {
  from {
    opacity:0;
    transform:translateY(-4px);
  }

  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes preset-collapse {
  0%,
  35% {
    opacity:1;
    transform:translateY(0);
  }

  100% {
    opacity:0;
    transform:translateY(-4px);
  }
}

@keyframes results-refresh {
  from {
    opacity:.62;
  }

  to {
    opacity:1;
  }
}

@keyframes mm-select-updated {
  0%,
  100% {
    box-shadow:none;
  }

  40% {
    border-color:var(--good);
    box-shadow:0 0 0 3px rgba(121,190,132,.28);
  }
}

@keyframes toast-enter {
  from {
    opacity:0;
    transform:translateX(12px);
  }

  to {
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes toast-exit {
  from {
    opacity:1;
    transform:translateX(0);
  }

  to {
    opacity:0;
    transform:translateX(12px);
  }
}

/* デッキ領域を優先し、各枠を常に3等分の横幅へ揃える。 */

#deck-slots {
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.deck-slot-wrapper,
.deck-slot-wrapper .deck-slot {
  width:100%;
  max-width:none;
}

/* デッキはカード詳細を常時見ながら選べるよう、一覧と詳細を横に固定する。 */

.deck-layout {
  grid-template-columns:minmax(320px,1.05fr) minmax(0,1.7fr);
}

/* 一覧と詳細を同じ幅にする。詳細は文章なので折り返しても読めるが、一覧の
   カード名が折り返すと一覧そのものが縦に伸びる。モジュールの16枚で測ると、
   同じ幅なら折り返しは0枚で、コストを入れる前と同じ丈に収まる。 */

.deck-content {
  grid-template-columns:minmax(160px,1fr) minmax(200px,1fr);
}

.deck-list {
  grid-template-columns:1fr;
}

.deck-detail {
  position:sticky;
  top:1rem;
}

.deck-slot-wrapper {
  position:relative;
}

.deck-slot-wrapper .deck-slot {
  min-height:6.2rem;
  padding:.5rem .5rem 1.75rem;
}

/* コストを貼った枠は、名前をその下へ落とす。3行の制限は残したいので、
   下の余白（手札保持のチェック用）はそのまま。 */

.deck-slot-wrapper .deck-slot.has-cost {
  padding-top:2.1rem;
  -webkit-line-clamp:2;
}

/* コストの数字の右下を、ぼんやり明るくする。数字は枠の左上に貼ってあるだけで
   枠から浮いていないため、光を回して角の存在を出す。

   背景に描いているのは、文字より後ろに置くため ── 疑似要素で描くと
   位置指定した要素は本文より前に出てしまい、カード名に薄い膜がかかる。

   指定するのは background-image だけ。地の色は .is-active が
   background の一括指定で塗り替えるので、そこには触らない。
   この一群は状態の規則より後ろに置くこと（詳細度が同じため）。

   円の中心は数字の板の中心。板は padding box の左上に position:absolute で
   置かれ、1桁なら実測 21×24px なので、その中心が (10.5px, 12px) にあたる。

   板の幅は桁数で動く（1桁 21px／2桁 27.1px／エリア追加カードの `10/9/8/0` は
   71.3px）が、**CSS からは桁数が分からない**ので、いちばん多い1桁に合わせている。
   2桁だと中心が 2.5px ずれるだけで目には分からない。エリア追加カードの
   長い板では光が板の左寄りに来る。

   板は不透明なので、円の左上はその裏に隠れ、見えるのは右と下を回り込む形。 */

.deck-slot.has-cost,
.mm-slot.has-cost,
.card-slot.has-cost {
  background-image:radial-gradient(
    circle at 11px 12px,
    color-mix(in srgb, var(--text) 13%, transparent),
    transparent 1.6rem
  );
}

.deck-slot-wrapper .reserve {
  position:absolute;
  left:.45rem;
  bottom:.35rem;
  margin:0;
  font-size:.75rem;
  white-space:nowrap;
}

.deck-extra-card-display {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:900px) {
  .deck-layout {
    grid-template-columns:1fr;
  }

  .deck-content {
    grid-template-columns:minmax(0,1fr) minmax(220px,.9fr);
  }

  .deck-detail {
    position:sticky;
  }
}

@media (max-width:760px) {
  .deck-content {
    grid-template-columns:1fr;
  }
}

/* スマホでは詳細を候補一覧の上に固定し、内容を見比べながら選べるようにする。 */

@media (max-width:760px) {
  .mm-detail,
  .equipment-detail,
  .deck-detail {
    position:sticky;
    top:.5rem;
    z-index:2;
    order:-1;
    height:clamp(12rem,34vh,17rem);
    min-height:0;
    max-height:17rem;
    overflow:auto;
    box-shadow:0 8px 18px rgba(0,0,0,.24);
  }
}

.detail-selection-hint {
  margin:.75rem 0 0;
  padding:.45rem .6rem;
  border-left:3px solid var(--good);
  background:var(--hint-bg);
  color:var(--hint-text);
  font-size:.88rem;
}