/* カルドセプト ビギンズ カードDB / ブックエディタ */

:root {
  --bg: #14120f;
  --bg-panel: #1e1b16;
  --bg-panel-2: #262219;
  --bg-input: #100e0b;
  --line: #3a3327;
  --line-soft: #2b2620;
  --text: #ece5d5;
  --text-dim: #a89e88;
  --text-faint: #7a7263;
  --gold: #d8b869;
  --gold-dim: #8d7740;
  --ok: #6aa84f;
  --warn: #d9a441;
  --err: #d9584f;

  --el-none: #9aa0a6;
  --el-fire: #d9584f;
  --el-water: #4a90d9;
  --el-earth: #6aa84f;
  --el-air: #d4b52e;

  --card-ratio: 445 / 800;
  --radius: 6px;
  /* PCのカード一覧とブックで共有する2段ヘッダーの高さ */
  /*
    カード一覧のツールバーとブック見出しの高さ。2つを同じにして、
    中身（カードの並び）が左右で同じ位置から始まるようにする。
    操作UIの倍率に追従させないと、メニューを大きくしたときに中身がはみ出す。
  */
  --panel-head-h: calc(46px * var(--ui-scale));

  /*
   * 文字サイズ。ヘッダーの2本のスライダーが倍率だけを差し替え、
   * 以下すべてがそれに追従する（js/font-scale.js）。
   *
   * 2段構えにしてあるのは、「カードの中身」と「操作UI」を別々に拡大できるようにするため。
   *   --size-*    … どちらの倍率も掛けない基準値。ここだけが数値を持つ
   *   --font-*    … 画面で使う値。基準値にカードの倍率を掛けたもの
   *   --font-scale … カードの中身の倍率（コスト・能力文・ブック・詳細・統計。カード名は固定）
   *   --ui-scale   … 操作UIの倍率。下の「操作UI」ブロックだけで使う
   *
   * 新しいサイズを足すときは --size-x と --font-x を対で足し、
   * 操作UIでも使うなら下のブロックにも1行足す（tools/test-font-scale.mjs が対応を見ている）。
   */
  --font-scale: 1;
  --ui-scale: 1;

  --size-base: 14px;
  --size-title: 17px;
  --size-table: 12.5px;
  --size-card: 11.5px;
  --size-small: 12px;
  --size-note: 12.5px;
  --size-mid: 13px;
  --size-count: 15px;
  --size-control: 16px;
  --size-code: 19px;
  --size-close: 22px;
  --size-large-icon: 26px;
  --size-xs: 11px;
  --size-xxs: 10px;
  --size-micro: 9.5px;
  --size-tile: 10.5px;
  --size-ability: 10px;

  --font-base: calc(var(--size-base) * var(--font-scale));
  --font-title: calc(var(--size-title) * var(--font-scale));
  --font-table: calc(var(--size-table) * var(--font-scale));
  --font-card: calc(var(--size-card) * var(--font-scale));
  --font-small: calc(var(--size-small) * var(--font-scale));
  --font-note: calc(var(--size-note) * var(--font-scale));
  --font-mid: calc(var(--size-mid) * var(--font-scale));
  --font-count: calc(var(--size-count) * var(--font-scale));
  --font-control: calc(var(--size-control) * var(--font-scale));
  --font-code: calc(var(--size-code) * var(--font-scale));
  --font-close: calc(var(--size-close) * var(--font-scale));
  --font-large-icon: calc(var(--size-large-icon) * var(--font-scale));
  --font-xs: calc(var(--size-xs) * var(--font-scale));
  --font-xxs: calc(var(--size-xxs) * var(--font-scale));
  --font-micro: calc(var(--size-micro) * var(--font-scale));
  --font-tile: calc(var(--size-tile) * var(--font-scale));
  --font-ability: calc(var(--size-ability) * var(--font-scale));
}

/*
  操作UI。ここに挙げたコンテナの中だけ、カードの倍率ではなく --ui-scale が効く。
  ボタン・タブ・入力欄・ツールバーは「メニューの文字」スライダーで別に変えられる。

  分けている理由は2つ。
    ・スマホでは操作UIまで一緒に大きくなると、肝心のカード一覧が押し出されてしまう
    ・PCは逆に、メニューを大きめ（既定140%）にしたまま
      カードの中身だけを控えめにする、といった組み合わせが要る

  --font-scale を上書きするだけでは効かない。カスタムプロパティの var() は
  「宣言した場所」（＝:root）で解決されるので、:root で組み立て済みの --font-* が
  そのまま降りてくるため。ここでは --font-* 自体を差し替える必要がある。
  font-size も指定しないと、body から継承した拡大後の px がそのまま残る。
*/
.app-header,
.active-filter-bar,
.panel-filters,
.toolbar,
.mobile-tabs,
.book-head,
.book-actions-toggle,
.modal-head,
.modal-foot {
  --font-scale: var(--ui-scale);
  --font-base: calc(var(--size-base) * var(--ui-scale));
  --font-title: calc(var(--size-title) * var(--ui-scale));
  --font-table: calc(var(--size-table) * var(--ui-scale));
  --font-card: calc(var(--size-card) * var(--ui-scale));
  --font-small: calc(var(--size-small) * var(--ui-scale));
  --font-note: calc(var(--size-note) * var(--ui-scale));
  --font-mid: calc(var(--size-mid) * var(--ui-scale));
  --font-count: calc(var(--size-count) * var(--ui-scale));
  --font-control: calc(var(--size-control) * var(--ui-scale));
  --font-code: calc(var(--size-code) * var(--ui-scale));
  --font-close: calc(var(--size-close) * var(--ui-scale));
  --font-large-icon: calc(var(--size-large-icon) * var(--ui-scale));
  --font-xs: calc(var(--size-xs) * var(--ui-scale));
  --font-xxs: calc(var(--size-xxs) * var(--ui-scale));
  --font-micro: calc(var(--size-micro) * var(--ui-scale));
  --font-tile: calc(var(--size-tile) * var(--ui-scale));
  --font-ability: calc(var(--size-ability) * var(--ui-scale));
  font-size: var(--font-base);
}

/*
  スライダーの置き場だけは、どちらの倍率からも外して基準値のまま使う。
  掴んでいる最中につまみと目盛りが伸縮すると、狙った値で離せない。
*/
.header-font-size {
  --ui-scale: 1;
  --font-xs: var(--size-xs);
  --font-small: var(--size-small);
  font-size: var(--size-base);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: var(--font-base);
  line-height: 1.6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/*
  押せるものは二重タップの拡大を切る。
  ＋追加などを続けて押すと、2回目が「ダブルタップ＝拡大」と解釈されて画面が拡大していた
  （実機で確認）。ページ全体の拡大は殺さないので、指2本の操作や
  ブラウザの拡大はそのまま使える。
*/
button,
a,
select,
input,
label,
.card-tile,
.book-tile,
.card-table tbody tr,
[role='button'] {
  touch-action: manipulation;
}

/*
  無効なボタンは、WebKit（iPhoneのSafari・Chrome）ではタップの当たり判定から外れる。
  指の下の判定が親へ抜けるため、親にも同じ指定が無いとそこで拡大が起きる。

  ブックに入れる前のクリーチャーを開くと、エースと除外はどちらも無効なので、
  続けて押すと2回目がダブルタップと解釈されて拡大していた（実機で報告あり）。
  閉じると追加は無効にならないので、この2つだけで起きていた。
  無効なボタンを置きうる入れ物に、まとめて足しておく。
*/
.detail-bar,
.detail-bar-buttons,
.detail-actions,
.detail-owned,
.detail-nav,
.modal-head,
.modal-foot,
.tile-actions,
.row-actions,
.showcase-top,
.showcase-bottom,
.showcase-choices {
  touch-action: manipulation;
}

/* ---------------------------------------------------------------- ヘッダー */

.app-header {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #241f18, #1a1712);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--font-title);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
}

.app-title-icon {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  object-fit: contain;
}

.app-title small {
  display: block;
  font-size: var(--font-xs);
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0;
}

.header-search {
  flex: 1;
  min-width: 240px;
  max-width: 460px;
  position: relative;
}

.header-search input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}

.header-search input:focus {
  border-color: var(--gold-dim);
}

.header-search .clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 2px 6px;
  font-size: var(--font-control);
  line-height: 1;
}

.header-search .clear:hover {
  color: var(--text);
}

/*
  設定メニューの開閉。下部タブバーの中にあり、そのタブバー自体が
  広い画面では出ないので、ここで隠す必要はない（見た目は下部タブの節）。
*/
.mobile-header-menu {
  color: var(--gold);
}

/*
  パネル上部の開閉バー（カード一覧・ブックで共通）。
  広い画面では畳む必要がないので出さない。
*/
.panel-collapse {
  display: none;
}

/* 絞り込みの開閉はPC専用。狭い画面は絞り込みが別タブなので畳む相手がいない */
.filters-collapse {
  display: none;
}

/* 設定メニューの閉じるボタン。スマホでポップアップを開いている間だけ出す */
.mobile-menu-close {
  display: none;
}

/*
  簡易切替（属性5つ＋アイテム＋スペル）。
  中身は同じで、置き場所だけ画面幅で変える。
    ・PC   … ツールバーの枚数の右（.in-toolbar）
    ・スマホ … カードタブでは検索欄の下（.in-header）、
               絞り込みタブでは上部が消えるのでパネルの先頭（.in-panel）
  出す・出さないはここで切り替え、js 側はすべてに同じものを作る。
*/
.quick-filter-bar {
  display: none;
}

.quick-filter-bar.in-toolbar {
  display: flex;
  gap: 4px;
}

.quick-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 5px;
}

.quick-filter-btn .ico {
  width: 1.5em;
  height: 1.5em;
}

.quick-filter-btn.on {
  background: var(--gold);
  border-color: var(--gold);
}

.header-font-size {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.header-font-size label {
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.header-font-size input[type='range'] {
  width: 78px;
  accent-color: var(--gold);
  cursor: pointer;
}

.header-font-size output {
  min-width: 36px;
  color: var(--text-dim);
  font-size: var(--font-xs);
  text-align: right;
}

#font-size-reset {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-xs);
  padding: 3px 7px;
}

#font-size-reset:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* 全カード / 所持カードの切り替えと、所持カードの取り込み入口 */
.header-owned {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
  見出しと説明は設定メニュー（スマホのポップアップ）だけで出す。
  PCのヘッダーは1行に収める必要があり、そこでは title 属性が同じ役目を果たす。
*/
.header-owned-title,
.header-owned-note {
  display: none;
}

.owned-mode-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.owned-mode-btn {
  background: var(--bg-panel-2);
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-xs);
  padding: 4px 10px;
  white-space: nowrap;
}

.owned-mode-btn + .owned-mode-btn {
  border-left: 1px solid var(--line);
}

.owned-mode-btn:hover {
  color: var(--gold);
}

.owned-mode-btn.on {
  background: var(--gold);
  color: #201b12;
  font-weight: 700;
}

.header-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-xs);
  color: var(--text-faint);
  text-align: right;
  white-space: nowrap;
}

.header-history-link {
  color: var(--text-dim);
  text-decoration: none;
}

.header-history-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/*
  条件が無いときも出したままにする。
  隠すとカード一覧全体が上下に動き、絞り込むたびに見ていた場所を見失う。
*/
.active-filter-bar {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: calc(var(--font-xs) * 2.2 + 14px);
  min-width: 0;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.active-filter-bar.is-empty {
  border-color: var(--line-soft);
}

.active-filter-title {
  color: var(--text-faint);
  font-size: var(--font-xs);
  font-weight: 600;
  line-height: 2.2;
  white-space: nowrap;
}

.active-filter-tags {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 5px;
  max-height: calc(var(--font-xs) * 5.2);
  min-width: 0;
  overflow-y: auto;
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  min-height: 2.2em;
  padding: 2px 7px 2px 9px;
  background: var(--bg-panel-2);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-xs);
  line-height: 1.35;
}

.active-filter-tag span {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.active-filter-tag b {
  color: var(--text-faint);
  font-size: var(--font-base);
  line-height: 1;
}

.active-filter-tag:hover {
  background: #30291d;
  border-color: var(--gold);
  color: var(--text);
}

.active-filter-tag:hover b {
  color: var(--gold);
}

.active-filter-tag[data-scope='creature'] {
  border-color: #8f584a;
}

.active-filter-tag[data-scope='item'] {
  border-color: #55758f;
}

.active-filter-tag[data-scope='spell'] {
  border-color: #665b91;
}

.active-filter-tag[data-scope='search'] {
  border-style: dashed;
}

/*
  「すべて解除」はタグより先（左端）に置く。
  右端に置いていたときは、タグの数と折り返しでボタンの位置が毎回変わり、
  狙って押せなかった。ここなら「適用中」の隣で常に同じ場所にある。
*/
.active-filter-clear {
  flex: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-xs);
  line-height: 1.35;
  min-height: 2.2em;
  padding: 2px 10px;
  white-space: nowrap;
}

.active-filter-clear:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.active-filter-clear:disabled {
  border-color: var(--line-soft);
  color: var(--text-faint);
  cursor: default;
  opacity: 0.55;
}

/* ---------------------------------------------------------------- レイアウト */

.app-body {
  flex: 1;
  min-height: 0;
  display: grid;
  /* 絞り込みは固定、残りをカードとブックで均等に分ける。--col-book が入ると保存幅になる */
  --col-filters: 250px;
  --col-book: minmax(240px, 1fr);
  grid-template-columns:
    var(--col-filters)
    minmax(240px, 1fr)
    6px
    var(--col-book);
  gap: 0;
}

/*
  画面の割り方（PCのみ。狭い画面は下部タブが data-pane で切り替える）。
  DOMの並びは変えず、列の取り方と出し入れだけで切り替える。
    split … 3分割。カードとブックを見比べる
    cards … カード一覧を全幅。探すことに集中する
    book  … ブックを全幅。ゲーム内のブック表示のように40枚を一度に見渡す
*/
@media (min-width: 901px) {
  .app-body[data-layout='cards'] {
    grid-template-columns: var(--col-filters) minmax(0, 1fr);
  }

  .app-body[data-layout='cards'] .panel-resizer,
  .app-body[data-layout='cards'] .panel-book {
    display: none;
  }

  .app-body[data-layout='book'] {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-body[data-layout='book'] .panel-filters,
  .app-body[data-layout='book'] .panel-cards,
  .app-body[data-layout='book'] .panel-resizer {
    display: none;
  }

  /*
    全幅にしたパネルでは、操作を右端まで飛ばさず左に寄せる。
    1920pxの画面だと、枚数（左端）と 画像／一覧（右端）が1m以上離れていて
    どれがどの一覧の操作なのか目で追えなかった。
    合わせて「表示⚙」の中身も展開する（js/ui.js の applyInlineSettings）。
  */
  .app-body[data-layout='cards'] .panel-cards .toolbar-spacer,
  .app-body[data-layout='book'] .panel-book .toolbar-spacer {
    display: none;
  }

  /*
    隠すのは歯車だけ。中身がツールバーへ展開されるので、押す相手がいなくなるため。
    観賞は展開される中身を持たない独立した操作なので、全幅でも残す。
  */
  .app-body[data-layout='cards'] .panel-cards .settings-btn:not(.is-showcase):not(.is-quiz),
  .app-body[data-layout='book'] .panel-book .settings-btn:not(.is-showcase):not(.is-quiz) {
    display: none;
  }

  /*
    展開した設定は横に長い。全幅のブックでは、その先にある操作が
    右端からはみ出して切れていた（実測で133px。横スクロールしないと押せない）。
    はみ出すぶんは次の行へ送る。切るより1行増えるほうが、操作を見失わない。
  */
  .app-body[data-layout='cards'] .panel-cards .toolbar,
  .app-body[data-layout='book'] .panel-book .book-overview-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .app-body[data-layout='cards'] .panel-cards .toolbar,
  .app-body[data-layout='book'] .panel-book .book-head {
    height: auto;
    min-height: var(--panel-head-h);
  }

  /*
    左の絞り込みを畳んだ状態。列幅を0にして、空いたぶんは残りの列が受け取る。
    ブック全幅（book）では絞り込み自体が出ていないので、ボタンも出さない。
  */
  .filters-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 1.9em;
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-faint);
    cursor: pointer;
    font-size: var(--font-small);
    line-height: 1;
    padding: 5px 4px;
  }

  .filters-collapse:hover {
    border-color: var(--gold-dim);
    color: var(--gold);
  }

  .app-body.filters-collapsed {
    --col-filters: 0px;
  }

  /*
    display: none にはしない。グリッドの自動配置は「出ている要素」を順に詰めるので、
    絞り込みが消えるとカード一覧・仕切り・ブックが1列ずつ左へずれてしまう。
    列は残したまま幅0にして、中身だけを隠す。
  */
  .app-body.filters-collapsed .panel-filters {
    visibility: hidden;
    margin-right: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
  }
}

.header-layout {
  display: flex;
  gap: 4px;
}

.layout-btn {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-small);
  padding: 4px 10px;
}

.layout-btn:hover {
  border-color: var(--gold-dim);
  color: var(--text);
}

.layout-btn.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #201b12;
  font-weight: 600;
}

.panel {
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.panel-filters {
  margin-right: 8px;
  padding: 12px 14px 40px;
}

.panel-cards {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  container-name: cards-panel;
  container-type: inline-size;
}

.panel-book {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  container-name: book-panel;
  container-type: inline-size;
}

/* カード一覧とブックの境目。PCの3分割でだけ表示される */
.panel-resizer {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 6px;
  min-width: 6px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}

.panel-resizer::before {
  content: '';
  width: 2px;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.12s, box-shadow 0.12s;
}

.panel-resizer:hover::before,
.panel-resizer:focus-visible::before,
body.is-panel-resizing .panel-resizer::before {
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(216, 184, 105, 0.18);
}

body.is-panel-resizing {
  cursor: col-resize;
  user-select: none;
}

/* スクロールバー。内側のキーワード欄や横スクロールも同じテーマにそろえる */
* {
  scrollbar-color: #625846 #17140f;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  min-width: 30px;
  min-height: 30px;
  background: #625846;
  border: 2px solid #17140f;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dim);
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: #17140f;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------- フィルタ */

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.filter-head h2 {
  margin: 0;
  font-size: var(--font-mid);
  color: var(--gold);
  letter-spacing: 0.08em;
}

/*
  パネル先頭の検索欄・簡易切替・適用中タグ。
  スマホでこのタブに来ると上部（ヘッダーと適用中バー）が消えるので、その代わりに置く。
  PCでは同じものが常に画面上部にあるため出さない（簡易切替と同じ扱い）。
*/
.filter-search,
.filter-active {
  display: none;
  margin-bottom: 8px;
}

.filter-search input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}

.filter-search input:focus {
  border-color: var(--gold-dim);
}

.filter-active {
  padding: 6px 8px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.filter-active-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.filter-active-head b {
  color: var(--text-dim);
}

.filter-active .active-filter-tags {
  max-height: none;
}

.active-filter-none {
  color: var(--text-faint);
  font-size: var(--font-xs);
  line-height: 2.2;
}

.filter-logic-note {
  background: rgba(216, 184, 105, 0.06);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--text-faint);
  font-size: var(--font-tile);
  line-height: 1.55;
  margin: 0 0 8px;
  padding: 6px 8px;
}

.filter-logic-note b {
  color: var(--text-dim);
  font-weight: 600;
}

.filter-logic-note span {
  display: block;
}

.filter-section-caption {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  color: var(--gold);
  padding: 9px 9px 7px;
}

.filter-section-caption b {
  font-size: var(--font-xs);
  letter-spacing: 0.08em;
}

.filter-section-caption span {
  flex-basis: 100%;
  color: var(--text-faint);
  font-size: var(--font-micro);
  line-height: 1.45;
  text-align: left;
}

.filter-condition-section {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  margin-top: 9px;
  padding: 0 8px 2px;
}

.filter-condition-section.is-creature {
  background: rgba(179, 107, 87, 0.045);
  border-left-color: #b36b57;
}

.filter-condition-section.is-item {
  background: rgba(100, 136, 166, 0.045);
  border-left-color: #6488a6;
}

.filter-condition-section.is-spell {
  background: rgba(125, 112, 173, 0.05);
  border-left-color: #7d70ad;
}

.filter-condition-section.is-common {
  background: rgba(216, 184, 105, 0.035);
}

.filter-condition-section .filter-section-caption {
  margin: 0 -2px;
}

.filter-condition-section .filter-section-caption + .fgroup {
  border-top: 0;
  padding-top: 5px;
}

.btn-reset {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-xs);
  padding: 3px 8px;
}

.btn-reset:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

.fgroup {
  border-top: 1px solid var(--line-soft);
  padding: 10px 0;
}

.fgroup > h3 {
  margin: 0 0 7px;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-small);
  padding: 3px 10px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--gold-dim);
  color: var(--text);
}

.chip.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #201b12;
  font-weight: 600;
}

.chip .n {
  font-size: var(--font-xxs);
  opacity: 0.65;
  margin-left: 3px;
}

/* 「指定なし」は絞り込みなしの状態を表す。他のチップとは見た目を変える */
.chip-all {
  border-style: dashed;
}

.chip-all.on {
  background: var(--bg-panel-2);
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
  font-weight: 600;
}

/* 属性チップは色で見分けられるようにする */
.chip.el-none.on { background: var(--el-none); border-color: var(--el-none); }
.chip.el-fire.on { background: var(--el-fire); border-color: var(--el-fire); color: #fff; }
.chip.el-water.on { background: var(--el-water); border-color: var(--el-water); color: #fff; }
.chip.el-earth.on { background: var(--el-earth); border-color: var(--el-earth); color: #fff; }
.chip.el-air.on { background: var(--el-air); border-color: var(--el-air); }

.range-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.range-row input {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}

.range-row input:focus {
  border-color: var(--gold-dim);
}

.range-row span {
  color: var(--text-faint);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: var(--font-small);
}

.check-row input {
  accent-color: var(--gold);
}

.keyword-box {
  max-height: 190px;
  overflow-x: hidden;
  overflow-y: auto;
}

.keyword-box .chip {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.keyword-box .chip .n {
  flex: none;
}

/* ---------------------------------------------------------------- ツールバー */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
  flex-wrap: wrap;
}

/*
  ツールバーは1行。並べ替えとカード情報表示は「表示⚙」の中に入れてあるので、
  ここに残るのは 枚数・簡易切替7つ・画像/一覧・⚙ だけになる。

  2行に組んでいた時期があるが、見出しだけで118pxを占めてカード一覧を圧迫していた。
  3分割の既定幅（1パネル約500px）でも、この4つなら1行に収まる。
*/
.toolbar {
  flex-wrap: nowrap;
  gap: 6px;
  height: var(--panel-head-h);
  min-height: var(--panel-head-h);
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* 1行に収めるため、切替ボタンの左右の余白は詰める */
.toolbar .view-btn,
.toolbar .display-btn {
  padding-inline: 7px;
}

/* 簡易切替はアイコンぶんの幅だけ。伸ばすと7つで375pxを占めてしまう */
.toolbar .quick-filter-bar.in-toolbar {
  flex: none;
}

.toolbar .quick-filter-btn {
  min-width: 0;
  padding-inline: 2px;
}

.toolbar .quick-filter-btn .ico {
  width: 1.15em;
  height: 1.15em;
}

/* 「枚」はツールバーでは省く。1行に収めるための数pxがここで効く */
.toolbar .result-count-unit {
  display: none;
}

/*
  表示設定を開く歯車。
  「表示」の文字は幅が要るわりに、隣の 画像/一覧 と役割が紛らわしいので出さない。
  何が入っているかは title と aria-label で補う。
*/
.settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 2.2em;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-control);
  line-height: 1;
  padding: 5px 7px;
  white-space: nowrap;
}

.settings-btn .settings-btn-label {
  display: none;
}

.settings-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

.modal-view-settings {
  width: min(420px, 100%);
}

.settings-field + .settings-field {
  margin-top: 12px;
}

.settings-field > label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.settings-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-controls select {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  outline: none;
}

/*
  ツールバーへ展開したときの並べ替え・カード情報表示。
  モーダルでは縦積み・ラベルは上、ツールバーでは横1列・ラベルは左に置く。
  display: contents で、包みではなくツールバー自身の子として並ばせる。
*/
.toolbar-settings {
  display: contents;
}

.toolbar-settings .settings-fields {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
}

.toolbar-settings .settings-field,
.toolbar-settings .settings-field + .settings-field {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
}

.toolbar-settings .settings-field > label {
  flex: none;
  margin-bottom: 0;
  white-space: nowrap;
}

.toolbar-settings .settings-controls select {
  flex: none;
}

/* 「37 / 400 枚」。スマホでは間隔を詰め、「枚」を落として「37/400」にする */
.result-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--font-small);
  color: var(--text-dim);
}

.result-count b {
  color: var(--gold);
  font-size: var(--font-count);
}

.toolbar-spacer {
  flex: 1;
}

.toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
}

.toolbar label {
  font-size: var(--font-small);
  color: var(--text-faint);
  white-space: nowrap;
}

.toolbar select {
  max-width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 8px;
  outline: none;
}

.dir-btn,
.view-btn {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 10px;
  font-size: var(--font-small);
  white-space: nowrap;
}

.dir-btn:hover,
.view-btn:hover {
  border-color: var(--gold-dim);
  color: var(--text);
}

.view-btn.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #201b12;
  font-weight: 600;
}

.view-switch {
  display: flex;
  gap: 4px;
}

/*
  スマホ用の「3枚 / 5枚 / 一覧」。表示形式と横の枚数はどちらも見せ方の選択なので
  1つの排他スイッチにまとめ、狭い画面では画像／一覧の切替の代わりに出す。
*/
.display-switch {
  display: none;
  gap: 4px;
}

.display-btn {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  padding: 5px 10px;
  font-size: var(--font-small);
  white-space: nowrap;
}

.display-btn.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #201b12;
  font-weight: 600;
}

/* ---------------------------------------------------------------- カード一覧 */

.card-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 60px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  align-items: start;
  gap: 12px;
}

.card-tile {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 0.12s, transform 0.12s;
}

.card-tile.is-in-book {
  border-color: var(--gold);
  box-shadow:
    0 0 0 2px rgba(216, 184, 105, 0.28),
    inset 0 0 22px rgba(216, 184, 105, 0.08);
}

.card-tile.is-in-book .tile-info,
.card-tile.is-in-book .tile-name {
  background-color: #242016;
}

.card-tile:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* カード画像だけを対象にする。子孫セレクタにするとバッジ内のアイコンまで
   カードの縦横比に引き伸ばされてしまうため、直下の img に限定する */
.card-tile .tile-media {
  position: relative;
}

.card-tile .tile-media > img {
  display: block;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  object-fit: cover;
  background: #0c0a08;
}

/*
  カード名は画像の真上。境目が分かるよう下に線を引く。

  必ず1行に収める。折り返すとタイルごとに高さが変わって並びが揺れ、
  カードの文字サイズを上げると名前だけで2〜3行を占めてしまう。
  そのためここだけは倍率を掛けず、基準値のまま使う。
  長い名前は下の .is-long / .is-longest で字を詰めて収める。
*/
.card-tile .tile-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*
    高さは基準値から作る。要素自身の em にすると、下の is-long で字を詰めたタイルだけ
    背が低くなって並びが揃わない。図鑑番号を持たないカードもあるので固定しておく
  */
  height: calc(var(--size-card) * 2.6 + 11px);
  padding: 5px 6px 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--size-card);
  line-height: 1.35;
  text-align: center;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* カード名の1文字ぶんの幅を計算に入れるため、内側の要素も同じ扱いにする */
.card-tile .tile-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  全400種の名前は最長11文字。9文字以上は24件しかないので、2段階詰めれば
  幅132px（一番狭いタイル）でも「…」を出さずに収まる。
  名前の文字数はカードごとに決まっているので、判定は組み立て時に済ませる
  （js/ui-cards.js の cardTile）。実測は要らない。
*/
.card-tile .tile-name.is-long {
  font-size: calc(var(--size-card) * 0.92);
}

.card-tile .tile-name.is-longest {
  font-size: calc(var(--size-card) * 0.84);
}

/* カード名と同じく、ここも倍率を掛けない（名前の欄の高さを一定に保つため） */
.card-tile .tile-no {
  display: block;
  color: var(--text-faint);
  font-size: var(--size-xxs);
  letter-spacing: 0.03em;
}

/* 合体でのみ現れる＝ブックに入れられないカードの印 */
.card-tile .tile-locked {
  position: absolute;
  right: 5px;
  bottom: 6px;
  background: rgba(20, 18, 15, 0.85);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-faint);
  font-size: var(--font-xxs);
  padding: 1px 5px;
}

.row-locked {
  color: var(--text-faint);
}

.card-tile .tile-actions {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.12s, transform 0.12s;
  z-index: 3;
}

.card-tile .tile-action {
  min-width: 0;
  min-height: 30px;
  border-radius: 5px;
  border: 1px solid var(--gold-dim);
  background: rgba(20, 18, 15, 0.94);
  color: var(--gold);
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  padding: 5px 3px;
  transition: background 0.12s, color 0.12s;
}

.card-tile:hover .tile-actions,
.card-tile:focus-within .tile-actions {
  opacity: 1;
  transform: translateY(0);
}

.card-tile .tile-action:hover {
  background: var(--gold);
  color: #201b12;
}

.card-tile .tile-remove {
  border-color: #a45c55;
  color: #efaaa3;
}

.card-tile .tile-action[hidden] {
  display: none;
}

.card-tile .tile-actions:has(.tile-remove[hidden]) {
  grid-template-columns: 1fr;
}

/* 画像表示の情報パネル。基本表示は数値だけ、詳細表示で制限と能力まで展開する */
.tile-info {
  background: #17140f;
  border-top: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-size: var(--font-tile);
  padding: 5px 6px;
}

.tile-info-main {
  display: grid;
  grid-template-rows: repeat(2, minmax(1.9em, auto));
  min-height: 3.8em;
}

.tile-info-main.is-compact {
  grid-template-rows: minmax(1.9em, auto);
  min-height: 1.9em;
}

.tile-cost {
  display: flex;
  align-items: center;
  min-width: 0;
}

.tile-cost .cost-node {
  gap: 1px;
}

.tile-cost .cost-value {
  color: var(--text);
  font-size: var(--font-xs);
  font-weight: 700;
}

.tile-stat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.tile-stats-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.tile-stats-line.is-empty {
  color: var(--text-faint);
}

.tile-stat b {
  color: var(--text);
  font-size: var(--font-xs);
}

.tile-restrictions {
  display: grid;
  grid-template-rows: repeat(2, 1.4em);
  gap: 2px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 4px;
}

.tile-restriction {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.tile-restriction b {
  color: var(--text-faint);
  font-size: var(--font-xxs);
  font-weight: 600;
  margin-right: 1px;
}

.restriction-none {
  color: var(--text-faint);
  font-size: var(--font-xxs);
}

.tile-ability {
  border-top: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-size: var(--font-ability);
  line-height: 1.4;
  margin-top: 4px;
  padding-top: 4px;
}

.tile-ability .ability-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
}

/* クリーチャーの詳細表示は、制限欄2行＋能力欄3行＋カード名を固定して高さを揃える */
.card-tile.info-detail .tile-restrictions {
  align-content: flex-start;
  height: calc(2.8em + 10px);
  overflow: hidden;
}

.card-tile.info-detail .tile-info-main {
  min-height: 3.8em;
}

.card-tile.info-detail:not(.card-type-creature) .tile-info-main {
  min-height: 1.9em;
}

.card-tile.info-detail .tile-ability {
  height: calc(4.2em + 14px);
  overflow: hidden;
}

.card-tile.info-detail .tile-ability .ability-text {
  height: auto;
  min-height: 4.2em;
  padding-bottom: 2px;
}


/* ブックに入っている枚数のバッジ */
/*
  画像の上端に重ねる印の帯。左に枚数、右に所持と属性。
  3つを角へ absolute で貼っていた頃は、カードの文字サイズを上げると
  左右が伸びて重なっていた。1本の帯に入れて押し合わせれば重ならない。
*/
.tile-badges {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
}

.tile-badges-right {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  /* 枚数バッジが無いときも右端に残す */
  margin-left: auto;
}

/* エースのリボンが左上に出るぶんを空ける */
.card-tile.is-ace .tile-badges {
  padding-left: 30px;
}

.in-book-badge {
  flex: none;
  background: var(--gold);
  color: #201b12;
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  /*
    カード画像の明るい部分に重なると金色の縁が溶けて読めなくなるので、
    濃色の輪郭を1周付ける（枠を足すと帯の高さが変わるため box-shadow で描く）。
  */
  box-shadow: 0 0 0 1.5px rgba(12, 10, 8, 0.92), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 一覧表では帯に入らず、名前の後ろに並べる */
.in-book-badge.inline {
  margin-left: 6px;
  box-shadow: none;
}

/* エースカードの印。ゲーム内と同じくカードの左上に赤いリボンで A */
.ace-badge {
  position: absolute;
  top: 0;
  left: 8px;
  width: 1.7em;
  height: 2.2em;
  background: #a8243a;
  border: 1px solid #d8b869;
  border-top: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  color: #fff;
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 1.4em;
  text-align: center;
  z-index: 2;
}

/*
  5枚モードの枚数帯。カード名が出ないので、
  ブックの枚数（全カードモード）か「ブック内 / 手持ち」（所持カードモード）を1つにまとめる。

  隅の小さなバッジではなくタイル幅いっぱいの帯にする。
  3枚モードで「入っている」ことを伝えていたカード名欄の色がこの表示には無いため、
  その代わりとして遠目でも数えられるようにしている。
*/
.tile-count-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gold);
  color: #201b12;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.3;
  padding: 1px 2px;
  text-align: center;
  z-index: 2;
  /* 帯の上辺が画像に溶けないよう、濃色の線で区切る */
  box-shadow: inset 0 1px 0 rgba(12, 10, 8, 0.55);
}

/* 手持ちを超えて入れているカードは、ここだけが手掛かりになるので色を変える */
.tile-count-badge.is-over {
  background: var(--err);
  color: #fff;
}

.card-table .ace-badge {
  position: static;
  clip-path: none;
  display: inline-block;
  width: auto;
  height: auto;
  border: 1px solid #d8b869;
  border-radius: 3px;
  line-height: 1.4;
  margin-left: 6px;
  padding: 0 5px;
}

/* ブックのタイルにあるエース切り替え */
.ace-toggle {
  flex: none;
  width: 1.82em;
  height: 1.82em;
  padding: 0;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-faint);
  cursor: pointer;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1;
}

.ace-toggle:hover {
  border-color: #d8b869;
  color: var(--gold);
}

.ace-toggle.on {
  background: #a8243a;
  border-color: #d8b869;
  color: #fff;
}

.ace-spacer {
  flex: none;
  width: 1.82em;
}

.book-tile.is-ace .tile-name {
  color: var(--gold);
  font-weight: 600;
}

.icon-btn.ace-on {
  background: #a8243a;
  border-color: #d8b869;
  color: #fff;
}

/* 属性アイコン＋レア度アイコンを並べるバッジ */
/*
  属性（クリーチャー以外は種別）の印。
  レア度アイコンはここから外した。N・S・R は構築ルールに影響せず、
  幅を取るわりに選ぶときの助けにならないため。レア度そのものは
  一覧表・カード詳細・絞り込みで見られる。
  ただしEレア（エクストラ）はブックに1枚しか入れられないので、
  枠を金色にして、印を増やさずに見分けられるようにしてある。
*/
.element-badge {
  display: flex;
  align-items: center;
  flex: none;
  gap: 2px;
  background: rgba(16, 14, 11, 0.9);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: var(--font-small);
  padding: 2px 4px;
}

.tile-badges.r-E .element-badge {
  border-color: var(--gold);
  color: var(--gold);
}

/* リスト表示 */
.card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-table);
}

.card-table th {
  position: sticky;
  top: 0;
  background: var(--bg-panel-2);
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
  z-index: 1;
}

.card-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 5px 8px;
  vertical-align: middle;
}

.card-table th:last-child,
.card-table td:last-child {
  position: sticky;
  right: 0;
}

.card-table th:last-child {
  z-index: 3;
}

.card-table td:last-child {
  min-width: 124px;
  background: var(--bg);
  box-shadow: -8px 0 12px rgba(10, 8, 6, 0.72);
  z-index: 2;
}

.card-table tbody tr {
  cursor: pointer;
}

.card-table tbody tr:hover {
  background: var(--bg-panel);
}

.card-table tbody tr:hover td:last-child {
  background: var(--bg-panel);
}

.card-table tbody tr.is-in-book {
  background: rgba(216, 184, 105, 0.11);
  box-shadow: inset 4px 0 0 var(--gold);
}

.card-table tbody tr.is-in-book td:last-child {
  background: #211d14;
}

.card-table tbody tr.is-in-book:hover {
  background: rgba(216, 184, 105, 0.17);
}

.card-table tbody tr.is-in-book:hover td:last-child {
  background: #292318;
}

/* サムネイル専用。アイコンにこの縦横比が掛からないようクラスで限定する */
.card-table .card-thumb {
  display: block;
  width: 34px;
  aspect-ratio: var(--card-ratio);
  object-fit: cover;
  border-radius: 3px;
  background: #0c0a08;
}

.card-table .col-name {
  font-weight: 600;
  white-space: nowrap;
}

.card-table .col-text {
  color: var(--text-dim);
  font-size: var(--font-card);
  line-height: 1.45;
  min-width: 220px;
}

.card-table .col-no {
  color: var(--text-faint);
  font-size: var(--font-xs);
  text-align: right;
  white-space: nowrap;
}

.card-table .col-num {
  text-align: right;
  white-space: nowrap;
}

/* 「クリーチャー」が1文字ずつ折り返されないようにする */
.card-table .col-type {
  white-space: nowrap;
}

.row-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

.card-table .btn-card-row {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--gold);
  cursor: pointer;
  font-size: var(--font-xs);
  padding: 3px 7px;
}

.card-table .btn-card-row:hover {
  background: var(--gold);
  color: #201b12;
}

.card-table .btn-card-row.remove {
  border-color: #7f4641;
  color: #e89d96;
}

.card-table .btn-card-row[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- アイコン */

/* Culdcept Central の 64x64 アイコン。文字と並べたときに揃うよう em 基準にする */
.ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex: none;
  image-rendering: auto;
}

.ico.lg {
  width: 1.5em;
  height: 1.5em;
}

/* アイコンと文字を並べるときの共通コンテナ */
.inline-ico {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inline-ico.wrap {
  flex-wrap: wrap;
}

/* コスト表示: G アイコン＋数値＋土地アイコン＋カード消費アイコン */
.cost-node {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.cost-node > span {
  margin-right: 2px;
}

.cost-node .cost-plus {
  color: var(--text-faint);
  font-size: 0.82em;
  margin: 0;
}

.detail-cost .cost-node {
  gap: 4px;
  font-size: inherit;
}

.detail-cost .cost-value {
  color: var(--text);
  font-size: inherit;
  font-weight: 400;
}

.detail-cost .cost-node > .ico:first-child {
  /* 詳細画面でも AT・HP・土地コストと同じ視覚サイズにそろえる */
  width: 1.15em;
  height: 1.15em;
}

.detail-cost .cost-plus {
  font-size: var(--font-small);
}

.sub-note {
  color: var(--text-faint);
  font-size: var(--font-card);
  margin-top: 2px;
}

.el-tag {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  border-radius: 3px;
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 0 4px;
  color: #14120f;
}

.el-tag.el-none { background: var(--el-none); }
.el-tag.el-fire { background: var(--el-fire); color: #fff; }
.el-tag.el-water { background: var(--el-water); color: #fff; }
.el-tag.el-earth { background: var(--el-earth); color: #fff; }
.el-tag.el-air { background: var(--el-air); }

.empty-note {
  padding: 50px 20px;
  text-align: center;
  color: var(--text-faint);
}

/* ---------------------------------------------------------------- ブックパネル */

/*
  カード一覧の .toolbar と同じ高さ・同じ1行構成にする。
  左右のパネルで同じ位置に同じ役割が来るので、どちらを見ていても操作を探し直さずに済む。
*/
.book-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--panel-head-h);
  min-height: var(--panel-head-h);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel-2);
  overflow: hidden;
}

.book-overview-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.book-view-switch {
  display: flex;
  flex: none;
  gap: 4px;
}

/* 1行に収めるため、カード一覧のツールバーと同じだけ左右の余白を詰める */
.book-overview-row .view-btn,
.book-overview-row .display-btn {
  padding-inline: 7px;
}

/* ブック選択はメニューの中。幅いっぱいに置いて、指でも押しやすくする */
.book-select {
  width: 100%;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  font-size: var(--font-base);
  padding: 7px 8px;
  outline: none;
}

.icon-btn {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  padding: 3px 8px;
  font-size: var(--font-small);
}

.icon-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

.icon-btn.danger:hover {
  border-color: var(--err);
  color: var(--err);
}

.book-count {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
  color: var(--text-dim);
  font-size: var(--font-xs);
  line-height: 1.2;
  white-space: nowrap;
}

.book-total {
  display: inline-flex;
  align-items: baseline;
  flex: none;
  gap: 2px;
}

.book-count .num {
  font-size: var(--font-count);
  font-weight: 700;
  line-height: 1;
  color: var(--warn);
}

.book-count.is-full .num {
  color: var(--ok);
}

.book-count.is-over .num {
  color: var(--err);
}

.book-count .of {
  color: var(--text-faint);
  font-size: var(--font-xs);
}

/*
  種類の比率と平均コスト。カード一覧のツールバーで簡易切替が占めている場所に置く。
  数字だけでは何の数字か分からないので、ゲーム内と同じアイコンを添える。
*/
.book-ratio {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
}

.book-ratio-item,
.book-average {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 2px;
}

.book-ratio-num,
.book-average-num {
  font-size: var(--font-mid);
  font-weight: 700;
  color: var(--text);
}

/* 3分割の端に近い幅では、字を落として1行のまま全項目を残す。 */
@container book-panel (max-width: 420px) {
  .book-count {
    gap: 6px;
    font-size: var(--font-xxs);
  }

  .book-ratio {
    gap: 4px;
  }
}

.book-msgs {
  padding: 0 12px;
}

.book-msg {
  border-radius: var(--radius);
  font-size: var(--font-card);
  line-height: 1.45;
  margin-top: 8px;
  padding: 6px 9px;
}

.book-msg.err {
  background: rgba(217, 88, 79, 0.12);
  border: 1px solid rgba(217, 88, 79, 0.4);
  color: #f0a49e;
}

.book-msg.warn {
  background: rgba(217, 164, 65, 0.1);
  border: 1px solid rgba(217, 164, 65, 0.35);
  color: #e7c689;
}

/*
  収録カードの一覧。カード一覧とまったく同じタイル（.card-tile）で並べる。
  文字だけの行だと、ゲーム内のブック画面ともカード一覧とも見え方が違い、
  何が入っているのかを絵で掴めなかった。

  並びは .card-grid をそのまま使うので、幅に応じて列数が変わる。
  サイドバーでは2〜3列、レイアウトを「ブック」にして全幅にすれば40枚を見渡せる。
*/
.book-list {
  flex: 1;
  overflow-y: auto;
  /*
    行は必ず中身の高さにする。
    ここはスクロール枠とグリッドを兼ねていて高さが確定するため、既定の auto 行だと
    「容器の高さを行数で割る」形に潰され、タイル同士が重なって表示されてしまう
    （実測: タイル497pxに対して行の高さ22px）。
    カード一覧側はグリッドの高さが確定しないので、この指定が要るのはブックだけ。
  */
  grid-auto-rows: max-content;
  align-content: start;
  padding: 8px 12px 20px;
}

.book-list.card-grid .empty-note {
  grid-column: 1 / -1;
}

.book-qty-btn {
  min-width: 28px;
  min-height: 28px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-small);
  line-height: 1;
  padding: 2px 6px;
}

.book-qty-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* 同名の上限（Eレアは1枚、それ以外は4枚）を超えている印 */
.book-row-count.is-over {
  color: var(--err);
}

.book-table .book-row-actions {
  align-items: center;
}

.book-table .book-qty-btn {
  min-height: 26px;
  min-width: 26px;
  padding: 2px 4px;
}

.in-book-badge.is-over {
  background: var(--err);
  color: #fff;
}

/* ブックメニューを開くボタン。見出しの左側、枚数・比率・平均の隣に置く */
.book-actions-toggle {
  flex: none;
  min-height: 30px;
  padding: 5px 9px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--gold);
  cursor: pointer;
  font-size: var(--font-small);
  font-weight: 700;
}

/*
  40枚そろった合図。
  画像出力・共有・ブックコードはブックメニューの中にあり、組み終わってから初めて要る操作。
  そろった瞬間だけ光らせて、その存在に気づいてもらう。
  枠を太らせると周りが動くので、光は box-shadow だけで出す。
*/
body.book-ready .book-actions-toggle {
  border-color: var(--gold);
  color: var(--gold);
  animation: book-ready-glow 2.2s ease-in-out infinite;
}

@keyframes book-ready-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(216, 184, 105, 0);
  }
  50% {
    box-shadow: 0 0 10px 2px rgba(216, 184, 105, 0.55);
  }
}

.book-actions-toggle:hover {
  border-color: var(--gold-dim);
}

.modal-book-menu {
  width: min(460px, 100%);
}

.book-action-group + .book-action-group {
  border-top: 1px solid var(--line-soft);
  margin-top: 7px;
  padding-top: 7px;
}

.book-action-group h3 {
  color: var(--text-faint);
  font-size: var(--font-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0 0 5px;
}

.book-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.book-check-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.book-action-buttons .icon-btn,
.book-action-danger .icon-btn {
  min-height: 2.4em;
}

.book-data-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.book-data-buttons .icon-btn {
  min-height: 2.65em;
}

.book-data-buttons .share-x-button {
  background: #050505;
  border-color: #6d6d6d;
  color: #fff;
  font-weight: 700;
}

.book-data-buttons .share-x-button:hover {
  background: #1d1d1d;
  border-color: #aaa;
  color: #fff;
}

/*
 * ラベルは意味の区切りで <span> に分けてある（例: 「統計」「を見る」）。
 * 文字を拡大したときにその境目で折り返すためのもので、1行に収まるときは
 * continuous な1語に見えてほしいので column-gap は空けない。
 */
.book-action-buttons .icon-btn,
.book-data-buttons .icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 0;
  line-height: 1.25;
  padding: 5px 7px;
  text-align: center;
}

.book-action-buttons .icon-btn span,
.book-data-buttons .icon-btn span {
  white-space: nowrap;
}

.book-action-danger .icon-btn {
  width: 100%;
}

.header-feedback-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}

.header-feedback-link small {
  color: var(--text-faint);
  font-size: var(--font-xxs);
}

/* ---------------------------------------------------------------- モーダル */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 6, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*
  高さを決め打ちする。
  中身に合わせて伸び縮みさせると、矢印で隣のカードへ送るたびに枠が動いて落ち着かない
  （実測で357px〜606pxの39通りあった）。一番背の高いカードでも収まる高さに固定し、
  短いカードは下が余る形にする。文字サイズを上げて収まらなくなったら本文側が巻き取る。
*/
.modal-detail {
  width: min(760px, 100%);
  height: min(88vh, 640px);
}

/* 高さを決め打ちしたぶん、本文が余りを引き受ける（足の位置を動かさないため） */
.modal-detail .modal-body {
  flex: 1;
  min-height: 0;
}

.modal-stats {
  width: min(760px, 100%);
}

.modal-draw {
  width: min(920px, 100%);
}

.modal-image {
  width: min(880px, 100%);
}

.x-post-preview-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
}

.x-post-preview-layout.is-export-only {
  grid-template-columns: minmax(0, 1fr);
}

.x-post-preview {
  background: rgba(7, 12, 24, 0.82);
  border: 1px solid rgba(87, 184, 224, 0.38);
  border-radius: 8px;
  padding: 12px;
}

.x-post-preview[hidden],
#image-post-x[hidden] {
  display: none;
}

.x-post-preview-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 8px;
}

.x-post-preview-head h3 {
  color: var(--text);
  font-size: var(--font-mid);
  margin: 0;
}

.x-post-preview-head span,
.x-post-preview p {
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.x-post-preview textarea {
  background: #090d17;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-sizing: border-box;
  color: var(--text);
  font: inherit;
  line-height: 1.55;
  min-height: 8.3em;
  padding: 9px 11px;
  resize: vertical;
  width: 100%;
}

.x-post-preview textarea:focus {
  border-color: #57b8e0;
  outline: none;
}

.x-post-preview-url {
  align-items: baseline;
  display: grid;
  font-size: var(--font-xs);
  gap: 4px 10px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 9px;
}

.x-post-preview-url b {
  color: var(--text-dim);
}

.x-post-preview-url span {
  color: #7bd4f5;
  overflow-wrap: anywhere;
}

.x-post-preview p {
  line-height: 1.55;
  margin: 8px 0 0;
}

@media (max-width: 720px) {
  .x-post-preview-layout {
    display: block;
  }

  .x-post-preview {
    margin-top: 14px;
  }
}

.modal-image-import {
  width: min(820px, 100%);
}

.modal-book-code {
  width: min(680px, 100%);
}

.modal-ai {
  width: min(880px, 100%);
}

.book-code-help {
  color: var(--text-dim);
  font-size: var(--font-note);
  line-height: 1.65;
  margin: 0 0 10px;
}

.book-code-text {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: ui-monospace, Consolas, "Yu Gothic UI", monospace;
  font-size: var(--font-code);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  padding: 12px;
  outline: none;
  resize: vertical;
  white-space: pre;
}

.book-code-text:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 2px rgba(216, 184, 105, 0.1);
}

.book-code-summary {
  min-height: 20px;
  margin-top: 8px;
  color: var(--text-faint);
  font-size: var(--font-small);
}

.book-code-summary.ok {
  color: var(--ok);
}

.book-code-summary.err {
  color: var(--error);
}

.ai-help {
  color: var(--text-dim);
  font-size: var(--font-note);
  line-height: 1.6;
  margin: 0 0 10px;
}

.ai-help b {
  color: var(--gold);
  font-weight: 600;
}

.ai-prompt-setting {
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr);
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 9px 10px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ai-prompt-setting label {
  color: var(--text-dim);
  font-size: var(--font-small);
}

.ai-prompt-setting select {
  min-width: 0;
  padding: 5px 7px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ai-prompt-setting small {
  grid-column: 1 / -1;
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.ai-owned-setting {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel-2);
  color: var(--text);
  cursor: pointer;
}

.ai-owned-setting input {
  margin-top: 3px;
}

.ai-owned-setting span {
  display: grid;
  gap: 2px;
}

.ai-owned-setting b {
  color: var(--gold);
  font-size: var(--font-small);
}

.ai-owned-setting small {
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.ai-owned-setting:has(input:disabled) {
  cursor: default;
  opacity: 0.58;
}

.ai-notice {
  margin: 0 0 10px;
  padding: 9px 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: var(--font-small);
}

.ai-notice b {
  color: var(--gold);
}

.ai-matchup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 10px;
}

.ai-matchup-row label {
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.ai-matchup-row select {
  flex: 1 1 180px;
  min-width: 0;
  padding: 5px 8px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--font-small);
}

.ai-matchup-group {
  display: grid;
  gap: 3px;
  margin: 0 0 10px;
}

/* display: grid は [hidden] より強い。相手ブックの欄が出しっぱなしになっていた */
.ai-matchup-group[hidden] {
  display: none;
}

.ai-matchup-group b {
  color: var(--gold);
  font-size: var(--font-small);
}

.ai-matchup-group small {
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.ai-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-height: 168px;
  overflow-y: auto;
  margin-top: 3px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel-2);
}

.ai-check-list label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: var(--font-xs);
  cursor: pointer;
  white-space: nowrap;
}

.ai-check-list p {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.ai-text {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: ui-monospace, Consolas, "Yu Gothic UI", monospace;
  font-size: var(--font-xs);
  line-height: 1.55;
  padding: 10px;
  outline: none;
  resize: vertical;
  white-space: pre;
}

.ai-text:focus {
  border-color: var(--gold-dim);
}

.ai-sections {
  display: grid;
  gap: 8px;
}

.ai-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel-2);
  overflow: hidden;
}

.ai-section summary {
  color: var(--gold);
  cursor: pointer;
  font-size: var(--font-small);
  font-weight: 700;
  padding: 8px 10px;
  user-select: none;
}

.ai-section summary span {
  color: var(--text-faint);
  font-size: var(--font-xs);
  font-weight: 400;
  margin-left: 6px;
}

.ai-section > p {
  color: var(--text-faint);
  font-size: var(--font-xs);
  margin: 0;
  padding: 0 10px 7px;
}

.ai-section .ai-text {
  display: block;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  min-height: 110px;
  resize: vertical;
}

.ai-section .ai-concept-text {
  color: var(--text);
  min-height: 130px;
}

.ai-section .ai-concept-text:focus {
  background: #15110d;
  box-shadow: inset 0 0 0 1px var(--gold-dim);
}

.ability-text,
.flavor,
.warn-note,
.book-code-help,
.ai-help,
.ai-text {
  overflow-wrap: anywhere;
}

.modal-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 11px 15px;
  border-top: 1px solid var(--line);
  background: var(--bg-panel-2);
}

.modal-foot-note {
  color: var(--text-faint);
  font-size: var(--font-xs);
  margin-left: auto;
}

/* 保存・コピーができない環境であることの注意書き */
.modal-foot-note.is-error {
  color: var(--err);
}

.modal-foot .btn-primary:disabled,
.modal-foot .icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel-2);
}

.modal-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--font-control);
  color: var(--gold);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.modal-head .en {
  color: var(--text-faint);
  font-size: var(--font-small);
}

.modal-close {
  flex: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-close);
  line-height: 1;
  padding: 0 4px;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  overflow-y: auto;
  padding: 16px;
}

/*
  カード詳細だけは余白を1枚ぶんの中身（.detail-page）側へ移す。
  横なぞりの移動量は本文の幅そのままにしたいので、本文に余白があると
  脇へ置いた隣のカードとの間に余白2枚ぶんの隙間ができてしまう。
*/
.modal-detail .modal-body {
  padding: 0;
  /* 脇に置いた隣のカードで横スクロールが生まれないようにする */
  overflow-x: hidden;
}

.detail-track {
  position: relative;
  /* 縦のなぞりはブラウザに任せ、横だけこちらで受け取る */
  touch-action: pan-y;
}

.detail-page {
  padding: 16px;
}

/*
  なぞっている間だけ脇に置く隣のカード。
  高さを本文に足さないよう浮かせる（足すと縦スクロールの範囲が伸びてしまう）。
*/
.detail-page.is-neighbor {
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
}

/* 前後のカードへの移動。カード名の右、閉じるの手前に置く */
.detail-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 同じく display: flex が [hidden] より強い。1枚だけの並びでも矢印が残ってしまう */
.detail-nav[hidden] {
  display: none;
}

.detail-nav-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-small);
  line-height: 1;
  /* 指で押せる大きさを確保する。見た目は文字だけでも標的は44px近く取る */
  padding: 10px 8px;
}

.detail-nav-btn:hover:not(:disabled) {
  color: var(--gold);
}

.detail-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.detail-nav-pos {
  color: var(--text-faint);
  font-size: var(--font-note);
  /* 枚数が変わっても矢印が動かないよう、桁数ぶんの幅を先に取る */
  min-width: 4.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.detail-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
}

.detail-image img {
  width: 100%;
  border-radius: 8px;
  display: block;
  background: #0c0a08;
}

.detail-image .img-note {
  color: var(--text-faint);
  font-size: var(--font-tile);
  margin-top: 6px;
  text-align: center;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-mid);
}

.spec-table th {
  color: var(--text-faint);
  font-size: var(--font-card);
  font-weight: 600;
  padding: 5px 10px 5px 0;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  width: 7.5em;
}

.spec-table td {
  padding: 5px 0;
  vertical-align: top;
}

.spec-table tr + tr th,
.spec-table tr + tr td {
  border-top: 1px solid var(--line-soft);
}

.ability-text {
  white-space: pre-wrap;
  line-height: 1.65;
}

.kw-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.kw {
  background: var(--bg-panel-2);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--gold);
  font-size: var(--font-xs);
  padding: 1px 7px;
}

/* 説明文が取れているキーワードはホバーで読めることを示す */
.kw.has-desc {
  border-style: dashed;
  cursor: help;
}

/* アドバイス・物語などの読み物 */
.flavor {
  color: var(--text-dim);
  line-height: 1.7;
  white-space: pre-wrap;
}

.flavor.story {
  color: var(--text-faint);
  font-style: italic;
}

/* 本文の手直し */
.link-btn {
  background: none;
  border: none;
  color: var(--gold-dim);
  cursor: pointer;
  font-size: var(--font-xs);
  padding: 0;
  text-decoration: underline;
}

.link-btn:hover {
  color: var(--gold);
}

.edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.edited-mark {
  color: var(--gold-dim);
  font-size: var(--font-tile);
}

.flavor.empty {
  color: var(--text-faint);
  font-style: normal;
}

.text-edit {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--font-mid);
  line-height: 1.6;
  padding: 7px 9px;
  outline: none;
  resize: vertical;
}

.warn-note {
  background: rgba(217, 164, 65, 0.1);
  border: 1px solid rgba(217, 164, 65, 0.35);
  border-radius: var(--radius);
  color: #e7c689;
  font-size: var(--font-small);
  line-height: 1.55;
  padding: 6px 9px;
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: #201b12;
  cursor: pointer;
  font-weight: 700;
  padding: 7px 16px;
}

.btn-primary:hover {
  background: #e6c67a;
}

.btn-primary:disabled {
  background: var(--bg-panel-2);
  border-color: var(--line);
  color: var(--text-faint);
  cursor: not-allowed;
}

.btn-x {
  background: #050505;
  border: 1px solid #777;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  padding: 7px 16px;
}

.btn-x:hover {
  background: #1d1d1d;
  border-color: #aaa;
}

.btn-x:disabled {
  background: var(--bg-panel-2);
  border-color: var(--line);
  color: var(--text-faint);
  cursor: not-allowed;
}

.detail-actions .in-book {
  color: var(--text-dim);
  font-size: var(--font-small);
}

/*
  スマホの操作バー。本文の外（モーダルの足）に置くので、
  カードの情報量が違っても位置が動かない。PCでは js 側が hidden にしている。
  見た目の土台は他のモーダルと同じ .modal-foot で、ここは詳細だけの上書き。
*/
.detail-foot {
  padding: 8px 10px;
  /* ホームバーのある端末で、一番下のボタンが指の届かない位置に来ないようにする */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* .modal-foot の display: flex は [hidden] より強いので、隠す指定を足す */
.detail-foot[hidden] {
  display: none;
}

.detail-bar {
  flex: 1;
}

.detail-bar-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.detail-bar-count .in-book {
  color: var(--text-dim);
  font-size: var(--font-small);
}

.detail-bar-pos {
  flex: none;
  color: var(--text-faint);
  font-size: var(--font-note);
  font-variant-numeric: tabular-nums;
}

/* 親指の届く右側へ寄せる */
.detail-bar-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bar-btn {
  flex: 1;
  max-width: 6.5em;
  min-height: 44px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-small);
  padding: 4px 6px;
}

.bar-btn.is-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #201b12;
  font-weight: 700;
}

.bar-btn.ace-on {
  background: #a8243a;
  border-color: #d8b869;
  color: #fff;
}

/* ブックに入っていないあいだも場所は空けておく（追加ボタンを動かさないため） */
.bar-btn:disabled {
  background: var(--bg-panel-2);
  border-color: var(--line-soft);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* 統計モーダル */
.stat-block + .stat-block {
  margin-top: 18px;
}

.stat-block h3 {
  margin: 0 0 8px;
  font-size: var(--font-small);
  color: var(--gold);
  letter-spacing: 0.06em;
}

.stat-heading {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-heading .stat-sub {
  margin-left: 4px;
}

.stat-sub {
  color: var(--text-faint);
  font-size: var(--font-xs);
  font-weight: 400;
  letter-spacing: 0;
}

.bar-row {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr) 3em;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--font-small);
}

.bar-row .lbl {
  color: var(--text-dim);
  text-align: right;
}

.bar-row .lbl.has-icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 18px;
}

.ico.ico-stat {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.bar-track {
  background: var(--bg-input);
  border-radius: 3px;
  height: 15px;
  overflow: hidden;
}

.bar-track > i {
  display: block;
  height: 100%;
  background: var(--gold-dim);
  border-radius: 3px;
  min-width: 0;
}

.bar-track > i.el-none { background: var(--el-none); }
.bar-track > i.el-fire { background: var(--el-fire); }
.bar-track > i.el-water { background: var(--el-water); }
.bar-track > i.el-earth { background: var(--el-earth); }
.bar-track > i.el-air { background: var(--el-air); }
.bar-track > i.bar-all { background: #8b7b5d; }
.bar-track > i.bar-creature { background: #b36b57; }
.bar-track > i.bar-item { background: #6488a6; }
.bar-track > i.bar-spell { background: #7d70ad; }
.bar-track > i.bar-at { background: #ce7f49; }
.bar-track > i.bar-hp { background: #b45e75; }
.bar-track > i.bar-rarity-n { background: #8d9399; }
.bar-track > i.bar-rarity-s { background: #5186b6; }
.bar-track > i.bar-rarity-r { background: #b99a49; }
.bar-track > i.bar-rarity-e { background: #8b68ad; }

.bar-row .val {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

.stat-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--text-dim);
  font-size: var(--font-small);
}

.stat-summary b {
  color: var(--gold);
  font-size: var(--font-count);
}

.stat-cost-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.stat-cost-title {
  color: var(--text-faint);
  font-size: var(--font-xs);
  margin-right: 2px;
}

.stat-cost-chip {
  gap: 4px;
  min-height: 25px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: var(--font-xs);
}

.stat-cost-chip .ico {
  width: 18px;
  height: 18px;
}

.stat-cost-chip b {
  color: var(--gold);
  font-size: var(--font-mid);
}

.stat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: -2px 0 8px 70px;
  color: var(--text-faint);
  font-size: var(--font-tile);
}

.stat-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--gold-dim);
}

.stat-swatch.bar-all { background: #8b7b5d; }
.stat-swatch.bar-creature { background: #b36b57; }
.stat-swatch.bar-item { background: #6488a6; }
.stat-swatch.bar-spell { background: #7d70ad; }
.stat-swatch.el-none { background: var(--el-none); }
.stat-swatch.el-fire { background: var(--el-fire); }
.stat-swatch.el-water { background: var(--el-water); }
.stat-swatch.el-earth { background: var(--el-earth); }
.stat-swatch.el-air { background: var(--el-air); }
.stat-swatch.bar-rarity-n { background: #8d9399; }
.stat-swatch.bar-rarity-s { background: #5186b6; }
.stat-swatch.bar-rarity-r { background: #b99a49; }
.stat-swatch.bar-rarity-e { background: #8b68ad; }

.cost-curve-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cost-curve-card {
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 8px;
}

.cost-curve-card h3 {
  color: var(--text-dim);
  margin-bottom: 6px;
}

.cost-curve-card .bar-row {
  grid-template-columns: 4.55em minmax(0, 1fr) 2.4em;
  gap: 6px;
  font-size: var(--font-xs);
}

.cost-curve-card .bar-track {
  height: 12px;
}

/* カード別ドロー確率 */
.draw-prob-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 9px 11px;
  background: rgba(216, 184, 105, 0.05);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--text-dim);
}

.draw-prob-head b {
  color: var(--gold);
}

.draw-prob-head p {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--font-xs);
  text-align: right;
}

.draw-prob-empty {
  padding: 28px 12px;
  color: var(--text-faint);
  text-align: center;
}

.draw-type-section {
  margin-top: 12px;
  padding: 9px 10px 10px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
}

.draw-type-section.type-creature {
  border-left-color: #b36b57;
}

.draw-type-section.type-item {
  border-left-color: #6488a6;
}

.draw-type-section.type-spell {
  border-left-color: #7d70ad;
}

.draw-type-section > h3 {
  margin: 0 0 7px;
  color: var(--gold);
  font-size: var(--font-small);
}

.draw-card-scroll {
  overflow-x: auto;
}

.draw-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-small);
}

.draw-card-table th,
.draw-card-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 5px 7px;
  text-align: right;
  white-space: nowrap;
}

.draw-card-table thead th {
  color: var(--text-faint);
  font-size: var(--font-xs);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.draw-card-table th:first-child,
.draw-card-table td:first-child {
  text-align: left;
  width: 100%;
}

.draw-card-table tbody td {
  color: var(--text);
}

.draw-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 180px;
}

.draw-card-name .ico {
  flex: none;
  width: 17px;
  height: 17px;
}

.draw-qty {
  display: inline-grid;
  grid-template-columns: 2.1em 1.9em 2.1em;
  align-items: center;
  gap: 3px;
}

.draw-qty button {
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1;
}

.draw-qty button:hover:not(:disabled) {
  border-color: var(--gold-dim);
  color: var(--gold);
}

.draw-qty button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.draw-qty b {
  text-align: center;
}

/* 画像読込 */
.image-import-help {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: var(--font-small);
}

.image-import-help b {
  color: var(--gold);
}

.image-layout-guide {
  padding: 9px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.image-layout-guide h3 {
  margin: 0 0 7px;
  color: var(--gold);
  font-size: var(--font-xs);
  letter-spacing: 0.05em;
}

.image-layout-guide > p {
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: var(--font-tile);
}

.game-image-sample {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 5px;
  object-fit: contain;
}

.image-import-drop {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  margin-top: 11px;
  overflow: hidden;
  background: var(--bg-input);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}

.image-import-drop:hover,
.image-import-drop:focus,
.image-import-drop.is-dragging {
  background: rgba(216, 184, 105, 0.045);
  border-color: var(--gold);
}

.image-import-placeholder {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 18px;
  color: var(--text-faint);
  text-align: center;
}

.image-import-placeholder b {
  color: var(--text);
  font-size: var(--font-mid);
}

.image-import-placeholder span {
  font-size: var(--font-card);
}

.image-import-placeholder small {
  color: var(--gold-dim);
}

.image-import-preview {
  display: block;
  width: 100%;
  max-height: 330px;
  object-fit: contain;
}

.image-import-preview[hidden],
.image-import-placeholder[hidden] {
  display: none;
}

.image-import-status {
  min-height: 20px;
  padding-top: 5px;
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.image-import-status.is-working {
  color: var(--gold);
}

.image-import-status.is-ok {
  color: var(--ok);
}

.image-import-status.is-error {
  color: var(--err);
}

/* ---------------------------------------------------------------- トースト */

/* ---------------------------------------------------------------- 観賞モード */

/*
  イラストだけを見せる画面。モーダル（z-index: 50）より上に重ね、
  下の画面が透けないよう地は黒に寄せる。
  トースト（80）はこの上に出したいので、それより下に置く。
*/
.showcase {
  position: fixed;
  inset: 0;
  /*
    iPhoneのSafariでは、アドレスバーが伸び縮みするぶん inset: 0 の高さと
    実際に見えている高さがずれ、下端の操作が隠れることがある。
    dvh は「今見えている高さ」なので、対応していればそちらを優先させる。
  */
  height: 100dvh;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070605;
  /* 縦にも横にもなぞりたいので、ブラウザ側のスクロールには渡さない */
  touch-action: none;
  user-select: none;
}

/*
  .showcase の display: flex は [hidden] より強いので、隠す指定を足す。
  これが無いと、閉じても画面いっぱいの板が残り続け、
  後ろのカード一覧までタップが一切届かなくなる（開く前から覆っている）。
*/
.showcase[hidden] {
  display: none;
}

/* 観賞中は後ろの一覧を動かさない（戻ったときに見ていた場所が変わってしまう） */
body.showcase-on {
  overflow: hidden;
}

/*
  画面に合わせて拡大も縮小もする。眺めるための画面なので、
  大きなモニタで元の445×800のまま中央にぽつんと出るのは避ける。
  ただし引き伸ばしは2倍まで。それを超えると粗さのほうが目につく。
*/
.showcase-image {
  width: 100%;
  height: 100%;
  max-width: 890px;
  max-height: 1600px;
  object-fit: contain;
  transition: opacity 220ms ease;
}

/* 差し替えの瞬間だけ薄くする。眺める画面なので、切り替えは主張させない */
.showcase-image.is-changing {
  opacity: 0;
  transition: none;
}

/* 高精細版の準備中であることを、操作と一緒に控えめに知らせる。 */
.showcase-hd-notice {
  position: absolute;
  left: 50%;
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 54px));
  z-index: 1;
  margin: 0;
  padding: 5px 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-note);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

/*
  操作一式。普段は消しておき、触れたときだけ出す。
  枠そのものは指を通し（pointer-events: none）、押せるのは中のボタンだけにする。
  そうしないと、消えている操作が画面全体を覆って、なぞりもタップも届かなくなる。
*/
.showcase-chrome {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms;
}

.showcase-chrome.is-visible {
  opacity: 1;
  visibility: visible;
}

.showcase-chrome button,
.showcase-panel {
  pointer-events: auto;
}

/*
  上下の帯。明るいイラストの上でも文字とボタンが読めるよう、
  帯の内側だけを暗く落とす（画面全体を暗くするとイラストが沈む）。
*/
.showcase-top,
.showcase-bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.showcase-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

.showcase-bottom {
  bottom: 0;
  justify-content: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

.showcase-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: var(--font-control);
  overflow-wrap: anywhere;
}

.showcase-pos {
  flex: none;
  color: var(--text-dim);
  font-size: var(--font-note);
  font-variant-numeric: tabular-nums;
}

.showcase-btn {
  flex: none;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(236, 229, 213, 0.25);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  font-size: var(--font-small);
  /* 暗い画面で狙うので、見た目より広く取る */
  min-width: 48px;
  min-height: 44px;
  padding: 4px 10px;
}

.showcase-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.showcase-btn.is-play {
  min-width: 60px;
}

/* 設定。上下の帯と重ならないよう、下の帯のすぐ上へ出す */
.showcase-panel {
  position: absolute;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  width: min(320px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(16, 14, 11, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

/* ここも display: flex が [hidden] より強い。畳んだつもりが開いたままになる */
.showcase-panel[hidden] {
  display: none;
}

.showcase-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.showcase-field-label {
  color: var(--text-dim);
  font-size: var(--font-note);
}

.showcase-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.showcase-choice {
  flex: 1;
  min-width: 3.5em;
  min-height: 38px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-small);
  padding: 4px 6px;
}

.showcase-choice.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #201b12;
  font-weight: 700;
}

/* カード詳細から観賞モードへ入る入口。画像の真下に小さく置く */
.detail-showcase {
  display: block;
  width: 100%;
  margin-top: 6px;
  text-align: center;
  font-size: var(--font-tile);
}

/* 動きを減らす設定のときは、切り替えを瞬時にする */
@media (prefers-reduced-motion: reduce) {
  .showcase-image,
  .showcase-chrome {
    transition: none;
  }

  /* 40枚の合図も、点滅させず光ったままにする（伝えたいのは存在であって動きではない） */
  body.book-ready .book-actions-toggle,
  body.book-ready .app-body.book-controls-collapsed .panel-book .panel-collapse {
    animation: none;
    box-shadow: 0 0 10px 2px rgba(216, 184, 105, 0.55);
  }
}

.toast-wrap {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 80;
  pointer-events: none;
}

.toast {
  background: #2a251c;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: var(--font-note);
  padding: 8px 15px;
  animation: toast-in 0.16s ease-out;
}

.toast.err {
  border-left-color: var(--err);
}

.toast.ok {
  border-left-color: var(--ok);
}

/* 禁止ではないが見逃すと困ること（所持枚数の超過など） */
.toast.warn {
  border-left-color: var(--warn);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* 文字サイズ切替で、小さな補助文字もまとめて読みやすくする */
.filter-head h2 {
  font-size: var(--font-mid);
}

.btn-reset,
.fgroup > h3,
.card-tile .tile-locked,
.card-table th,
.card-table .col-no,
.book-ratio,
.book-action-group h3,
.modal-foot-note,
.detail-image .img-note,
.spec-table th,
.stat-sub {
  font-size: var(--font-xs);
}

.chip .n,
.tile-restriction b,
.restriction-none {
  font-size: var(--font-xxs);
}

.chip,
.check-row,
.result-count,
.toolbar label,
.dir-btn,
.view-btn,
.element-badge,
.icon-btn,
.book-row .nm,
.book-row .cost,
.book-row .qty button,
.book-row .qty .c,
.book-msg,
.book-code-summary,
.ai-help,
.bar-row,
.draw-card-table,
.detail-actions .in-book,
.toast {
  font-size: var(--font-small);
}

.card-table .col-text,
.sub-note {
  font-size: var(--font-card);
}

.spec-table {
  font-size: var(--font-mid);
}

.book-code-help {
  font-size: var(--font-note);
}

/* ---------------------------------------------------------------- 狭い画面 */

@media (max-width: 1180px) {
  .app-body {
    --col-filters: 220px;
  }
}

/* スマホ用タブ。広い画面では出さない */
.mobile-tabs {
  display: none;
}

@media (max-width: 900px) {
  /* 狭い画面では3列を諦め、タブで1枚ずつ切り替える */
  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }

  /*
    上部に出すのはカードタブのときだけ。
    絞り込みとブックのタブでは検索欄も簡易切替も使わないうえ、
    パネルをスクロールしても上に残り続けて画面を狭くしていた。
  */
  body[data-pane='filters'] .app-header,
  body[data-pane='book'] .app-header {
    display: none;
  }

  /*
    設定メニュー（≡）。画面いっぱいのポップアップとして、どのタブの上にも重ねる。
    タブは切り替えないので、閉じれば開く前の画面がそのまま戻ってくる。
  */
  .app-header.mobile-menu-open {
    display: grid !important;
    position: fixed;
    /* 下部タブバーの上までで止める。タブを押せば閉じて、そのタブへ移れる */
    inset: 0 0 var(--mobile-tabs-h, 52px) 0;
    z-index: 45;
    align-content: start;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 12px 24px;
    background: var(--bg-panel);
  }

  /* ポップアップ中は本来の中身（検索欄・簡易切替・畳むバー）を出さない */
  .app-header.mobile-menu-open .header-search,
  .app-header.mobile-menu-open .quick-filter-bar {
    display: none;
  }

  .app-header.mobile-menu-open .mobile-menu-close {
    display: block;
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: 0;
    color: var(--text-dim);
    cursor: pointer;
    font-size: var(--font-close);
    line-height: 1;
    padding: 6px 10px;
  }

  /* 画面の割り方は下部タブが担うので、スイッチ自体を出さない */
  .header-layout {
    display: none;
  }

  .app-title,
  .header-font-size,
  .header-owned,
  .header-meta {
    display: none;
  }

  .app-header.mobile-menu-open .app-title {
    display: flex;
    grid-column: 1 / -1;
    font-size: var(--font-count);
  }

  .app-header.mobile-menu-open .app-title small {
    display: block;
  }

  .app-header.mobile-menu-open .header-font-size,
  .app-header.mobile-menu-open .header-owned,
  .app-header.mobile-menu-open .header-meta {
    display: flex;
    grid-column: 1 / -1;
  }

  /*
    「全カード」「所持カード」だけでは何の切り替えか分からないので、
    見出しで文脈を作り、選んでいる側の意味を1行で添える。
  */
  .app-header.mobile-menu-open .header-owned {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .app-header.mobile-menu-open .header-owned-title {
    display: block;
    color: var(--text-dim);
    font-size: var(--font-xs);
  }

  .app-header.mobile-menu-open .header-owned-note {
    display: block;
    color: var(--text-faint);
    font-size: var(--font-xs);
    line-height: 1.5;
  }

  .app-header.mobile-menu-open .owned-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-header.mobile-menu-open .owned-mode-btn {
    min-height: 36px;
    padding: 4px 6px;
  }

  /*
    更新履歴・要望・不具合報告。
    ヘッダーでは字を薄くして脇役にしているが、ポップアップでは
    そこだけが並ぶので、押せると分からないまま素通りされてしまう。
    枠で囲って行いっぱいに広げ、矢印で「移動する」ことを示す。
  */
  .app-header.mobile-menu-open .header-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0;
    justify-content: flex-start;
    text-align: left;
  }

  .app-header.mobile-menu-open .header-history-link {
    display: flex;
    align-items: center;
    gap: 0.4em;
    min-height: 40px;
    padding: 8px 12px;
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--gold);
    font-size: var(--font-base);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* 行の右端に矢印。別タブで開くものは外向きの矢印にして区別する */
  .app-header.mobile-menu-open .header-history-link::after {
    content: '›';
    margin-left: auto;
    color: var(--text-faint);
    font-size: var(--font-control);
    text-decoration: none;
  }

  .app-header.mobile-menu-open .header-feedback-link::after {
    content: '↗';
    font-size: var(--font-small);
  }

  .app-header.mobile-menu-open .header-history-link small {
    color: var(--text-faint);
  }

  /*
    文字サイズ。1行に詰めると幅375pxの端末で右へはみ出していたので、
    「ラベル / スライダー / 数値」の3列に組んで2本を縦に積む。
    スライダーは残りの幅いっぱい（min-width:0 が無いとグリッドが縮まない）。
  */
  .app-header.mobile-menu-open .header-font-size {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    white-space: normal;
  }

  .app-header.mobile-menu-open .header-font-size input[type='range'] {
    width: auto;
    min-width: 0;
  }

  .app-header.mobile-menu-open #font-size-reset {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .header-search {
    min-width: 0;
    max-width: none;
  }

  /*
    簡易切替は検索欄の下に1行で固定する。
    7つなら幅390pxの端末でも横スクロールなしに収まるので、隠れる選択肢を作らない。
    ツールバー側は場所を取るうえ横スクロールで隠れるので、狭い画面では出さない。
  */
  .quick-filter-bar.in-toolbar {
    display: none;
  }

  .quick-filter-bar.in-header,
  .quick-filter-bar.in-panel {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .quick-filter-bar.in-panel {
    margin-bottom: 10px;
  }

  /* 上部が消えるぶんの代わり。カードタブ側と同じ操作をここに出す */
  .filter-search,
  .filter-active {
    display: block;
  }

  /* 指で押せるよう、スマホ側だけ大きくする */
  .quick-filter-btn {
    min-height: 36px;
    padding: 0;
  }

  /*
    パネル上部の開閉バー。カード一覧・ブックのどちらも、畳む対象の真下＝
    一覧の直上に置く。畳む範囲がバーの上側だけになるので、押す前に分かる。
  */
  .panel-collapse {
    display: block;
    flex: none;
    width: 100%;
    min-height: 22px;
    padding: 0;
    background: var(--bg-panel);
    border: 0;
    border-bottom: 1px dashed var(--line);
    color: var(--text-faint);
    cursor: pointer;
    font-size: var(--font-xxs);
    letter-spacing: 0.06em;
  }

  /* 畳んだあとは戻す入口そのものなので、少しはっきり見せる */
  .app-body.card-controls-collapsed .panel-cards .panel-collapse,
  .app-body.book-controls-collapsed .panel-book .panel-collapse {
    color: var(--text-dim);
  }

  /*
    40枚そろったのに畳んでいると、光らせたブックメニューごと隠れてしまう。
    そのときは畳んだバー自身を光らせて、この下に何かあることを伝える。
    バーを開けばブックメニューが光っているので、視線がそのまま繋がる。
  */
  body.book-ready .app-body.book-controls-collapsed .panel-book .panel-collapse {
    color: var(--gold);
    border-bottom-color: var(--gold);
    animation: book-ready-glow 2.2s ease-in-out infinite;
  }

  /* カードタブ：検索欄・簡易切替と、3枚／5枚／一覧・⚙の行をまとめて畳む */
  body[data-pane='cards'] .app-header.header-collapsed {
    display: none;
  }

  .app-body.card-controls-collapsed .panel-cards .toolbar {
    display: none;
  }

  /*
    ブックタブ：畳むのは操作（メニュー・表示形式・⚙）だけ。
    枚数・比率・平均コストは、カードを足しながら見続けたいので残す。
  */
  .app-body.book-controls-collapsed .book-head {
    padding-block: 2px;
  }

  .app-body.book-controls-collapsed .book-head .book-actions-toggle,
  .app-body.book-controls-collapsed .book-head .view-switch,
  .app-body.book-controls-collapsed .book-head .display-switch,
  .app-body.book-controls-collapsed .book-head .settings-btn {
    display: none;
  }

  /*
    上部バーはスマホでは出さない。高さのわりに情報が薄く、カード一覧を押し出していた。
    何件絞っているかは下部タブのバッジ、個別の解除は絞り込みタブのタグで足りる。
  */
  .active-filter-bar {
    display: none;
  }

  /*
    下余白は下部タブバーの実測値（js/ui.js が --mobile-tabs-h に入れる）。
    「メニューの文字」を大きくするとバーも伸びるので、固定値だと末尾が隠れる。
  */
  .app-body {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    padding-bottom: var(--mobile-tabs-h, 52px);
  }

  .panel-filters,
  .panel-cards,
  .panel-book {
    border: none;
    display: none;
  }

  .panel-filters {
    margin-right: 0;
  }

  .panel-resizer {
    display: none;
  }

  .app-body[data-pane='filters'] .panel-filters,
  .app-body[data-pane='book'] .panel-book {
    display: flex;
    flex-direction: column;
  }

  .app-body[data-pane='filters'] .panel-filters {
    display: block;
  }

  .app-body[data-pane='cards'] .panel-cards {
    display: flex;
  }

  /*
    3つのタブ＋設定メニュー。メニューは文字を持たないぶん幅を詰める。
    ≡ の列も文字と一緒に伸ばす（固定幅だと拡大時にタブ名が潰れる）。
  */
  .mobile-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) calc(52px * var(--ui-scale));
    background: var(--bg-panel-2);
    border-top: 1px solid var(--line);
  }

  .mobile-tabs button {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: var(--font-small);
    padding: 13px 4px;
  }

  .mobile-tabs button.on {
    background: var(--bg-panel);
    color: var(--gold);
    font-weight: 700;
    box-shadow: inset 0 2px 0 var(--gold);
  }

  .mobile-header-menu {
    border-left: 1px solid var(--line);
    font-size: var(--font-control);
    line-height: 1;
  }

  #mobile-book-count,
  #mobile-filter-count {
    background: var(--gold);
    border-radius: 999px;
    color: #201b12;
    font-size: var(--font-xxs);
    font-weight: 700;
    padding: 1px 6px;
    display: inline-block;
  }

  #mobile-filter-count[hidden] {
    display: none;
  }

  /* 枚数が動いたことの合図。トーストを出さない代わりに、ここを一瞬だけ強調する */
  #mobile-book-count.is-changed {
    animation: book-count-pop 0.32s ease-out;
  }

  @keyframes book-count-pop {
    50% {
      transform: scale(1.45);
      background: #fff2cf;
    }
  }

  /* 指で押しやすいサイズに寄せる */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
  }

  /*
    5枚モード。幅390pxの端末でタイルは70px前後になるため、
    載せるのは画像・枚数バッジ・コスト・AT・HPまで（中身は js/ui-cards.js 側でも省いている）。
  */
  .card-grid.is-dense {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;

    /*
      バッジと情報行の文字だけは倍率を等倍で頭打ちにする。
      文字を大きくしたい人と、たくさん並べたい人は同じ人のことが多いので、
      スライダー自体には上限を設けず、潰れるここだけを抑える。
    */
    --font-xxs: calc(var(--size-xxs) * min(var(--font-scale), 1));
    --font-small: calc(var(--size-small) * min(var(--font-scale), 1));
    --font-tile: calc(var(--size-tile) * min(var(--font-scale), 1));
  }

  /*
    5枚モードの情報欄。コストの段とAT・HPの段で2行。
    段の高さは中身に関わらず固定して、同じ行に並ぶタイルの背を揃える。
  */
  .card-grid.is-dense .tile-info-dense {
    display: grid;
    grid-template-rows: repeat(2, 1.5em);
    padding: 2px 1px;
  }

  /*
    「詳細」を選んだときだけ足す能力文。幅66pxでは1行に数文字しか入らないので、
    2行で切って「能力があるか・その頭」だけを見せる。全文はタップして開く詳細で読む。
  */
  .card-grid.is-dense .tile-info-dense:has(.tile-dense-ability) {
    grid-template-rows: repeat(2, 1.5em) auto;
  }

  .tile-dense-ability {
    font-size: var(--font-micro);
    line-height: 1.25;
    color: var(--text-dim);
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    margin-top: 2px;
    padding-top: 2px;
  }

  .tile-dense-ability .ability-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 2.5em;
    white-space: normal;
    word-break: break-all;
  }

  .tile-dense-ability .ico {
    width: 1em;
    height: 1em;
  }

  .tile-dense-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
  }

  .tile-dense-stat {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    min-width: 0;
  }

  .tile-dense-stat .ico {
    width: 1.15em;
    height: 1.15em;
  }

  .tile-dense-stat b {
    color: var(--text);
    font-size: var(--font-xxs);
  }

  /* 属性の印は、この大きさでは画像を覆うだけなので出さない */
  .card-grid.is-dense .tile-badges {
    display: none;
  }

  /*
    ブックに入っているカードの枠。
    54px幅のタイルでは1pxの枠線と薄いにじみでは気づけないので、内側に2pxの金枠を描く。

    border を太くすると画像が縮んで並びが揺れ、box-shadow の inset は
    画像（子要素）の下に隠れてしまうため、画像の上に重なる擬似要素で描く。
  */
  .card-grid.is-dense .card-tile.is-in-book {
    box-shadow: none;
  }

  .card-grid.is-dense .card-tile.is-in-book .tile-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--gold);
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
  }

  .card-scroll {
    padding: 10px 10px 30px;
  }

  .card-tile .tile-actions {
    opacity: 1;
    transform: none;
  }

  /*
    一覧表は12列あり、そのままでは幅375pxの端末で910px必要になる。
    横スクロールで2.5画面ぶんを送ることになるうえ、右端の固定列（追加／除外）が
    画面の3分の1を覆い続ける。
    スマホでは画像・カード名・数値・所持・操作の5列だけを組み立て
    （js/ui-cards.js の COMPACT_TABLE_HEADERS）、コスト・AT・HPは1つの欄にまとめる。
    隠した項目はカードをタップした詳細で読める。
  */
  .card-table th {
    padding: 6px;
  }

  .card-table td {
    padding: 4px 6px;
  }

  /* コスト行とAT・HP行の2段。1行に並べると数値が右端の固定列に潜り込む */
  .card-table .col-stats {
    white-space: nowrap;
  }

  .row-stats-line {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .row-stats-line + .row-stats-line {
    margin-top: 2px;
  }

  .row-stats-line b {
    margin-right: 4px;
  }

  /* 長いカード名は折り返してよい。横へ伸ばすと他の列が押し出される */
  .card-table .col-name {
    white-space: normal;
  }

  /* 追加／除外は横並びだと110px近く要るので、狭い画面では縦に積む */
  .card-table td:last-child {
    min-width: 0;
  }

  .card-table .row-actions {
    flex-direction: column;
  }

  /*
    横スクロールにすると、隠れた操作に気づけないうえ指で送る手間が増える。
    幅が足りなければ改行する。並びは 状況 → 表示スイッチ → ⚙ で、
    PC・スマホ・カード一覧・ブックの4画面すべて同じ順にしてある。
  */
  .toolbar,
  .book-overview-row {
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: visible;
  }

  .toolbar {
    height: auto;
    min-height: 0;
    padding: 6px 8px;
  }

  .toolbar-spacer {
    display: none;
  }

  /*
    トーストは画面上部へ。下だとタブバーや詳細の操作バーと重なり、
    押したいボタンの上に文字が乗ってしまう。
  */
  .toast-wrap {
    top: 8px;
    bottom: auto;
  }

  .toolbar-field,
  .display-switch {
    flex: none;
  }

  /* 画像／一覧の切替は「3枚 / 5枚 / 一覧」に含めるので、狭い画面では出さない */
  .view-switch {
    display: none;
  }

  .display-switch {
    display: flex;
  }

  /*
    ブック見出しは2段に分ける。
    1段目は枚数・比率・平均コストだけ。カードを足しながら数字を追う場所なので、
    操作と混ぜると目が行き来する。
    2段目に操作を並べる（ブックメニュー → 3枚・5枚・一覧 → ⚙ → 観賞）。
    順番はHTMLの並びのままなので、ここでは1段目を1行ぶん占有させるだけでよい。
  */
  .book-count {
    flex-basis: 100%;
  }

  /*
    2段目の5つ（ブックメニュー・3枚・5枚・一覧・⚙・観賞）を1行に収める。
    幅375pxでは既定の余白のままだと12px足りず、観賞だけが3行目に落ちていた。
    文字は削らず、押せる高さも変えずに、余白だけを詰めて幅を作る。
  */
  .book-overview-row {
    gap: 5px;
  }

  .book-overview-row .book-actions-toggle {
    padding-inline: 7px;
  }

  .book-overview-row .settings-btn {
    padding-inline: 4px;
  }

  .result-count {
    flex: none;
    gap: 1px;
    white-space: nowrap;
  }

  /* 「枚」は無くても意味が通る。ツールバーは横スクロールなので1文字でも効く */
  .result-count-unit {
    display: none;
  }

  .toolbar label {
    display: none;
  }

  .draw-prob-head {
    display: block;
  }

  .draw-prob-head p {
    margin-top: 4px;
    text-align: left;
  }

  .stat-legend {
    margin-left: 0;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  /*
    画像を210px幅（＝高さ378px）のままにすると最初の画面が画像で埋まり、
    能力・効果までスクロールが要る。上を目で追って下を親指で押す使い方に合わせて縮める。
  */
  .detail-image {
    max-width: 130px;
    margin: 0 auto;
  }

  /*
    詳細は画面いっぱいの高さにする。中身に合わせて伸び縮みすると、
    カードごとに操作バーの位置が変わってしまう（実測で最大230pxずれていた）。
    PC側は決め打ちの高さ（.modal-detail）だが、スマホは画面を使い切る。
    本文が余りを引き受ける指定は、PC側と共通のものがそのまま効く。
  */
  .modal-detail {
    height: 100%;
  }

  /*
    ヘッダーはカード名と英名で埋まる。長い名前だと矢印と位置表示を足したぶん
    名前が2行3行に折れて、本文が押し下げられる（実測で45px→88px）。
    位置は下の操作バーへ移し、ここには矢印だけを詰めて残す。
    なぞって動かせるので、矢印は見つけるための手がかりとして置いておく。
  */
  .detail-nav-pos {
    display: none;
  }

  .detail-nav-btn {
    padding: 10px 5px;
  }

  .modal-backdrop {
    padding: 10px;
  }

  .book-actions-toggle {
    min-height: 36px;
  }

  .book-head {
    display: flex;
    gap: 5px;
    height: auto;
    min-height: 0;
    padding: 6px 8px;
    overflow: hidden;
  }

  .book-count {
    font-size: var(--font-xxs);
    line-height: 1.25;
  }


  /* 幅が狭いぶん、余白だけ詰める（並べ方は広い画面と同じ） */
  .book-list {
    padding: 6px 8px 16px;
  }
}

/* ---------------------------------------------------------------- 更新履歴 */

body.updates-page {
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: auto;
}

.updates-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 28px 18px 48px;
}

.updates-head {
  margin-bottom: 24px;
  padding: 22px;
  background: linear-gradient(180deg, #241f18, #1a1712);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.updates-back,
.updates-foot a {
  color: var(--gold);
  text-decoration: none;
}

.updates-back:hover,
.updates-foot a:hover {
  text-decoration: underline;
}

.updates-kicker {
  margin: 20px 0 3px;
  color: var(--text-faint);
  font-size: var(--font-xxs);
  letter-spacing: 0.16em;
}

.updates-head h1 {
  margin: 0;
  color: var(--gold);
  font-size: var(--font-title);
  line-height: 1.3;
}

.updates-head > p:last-child {
  margin: 9px 0 0;
  color: var(--text-dim);
}

.updates-notice {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--bg-panel-2);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--text-dim);
}

.updates-notice b {
  color: var(--gold);
}

.updates-list {
  display: grid;
  gap: 12px;
}

.update-entry {
  padding: 18px 20px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.update-entry time {
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.update-entry h2 {
  margin: 3px 0 8px;
  color: var(--text);
  font-size: var(--font-count);
}

.update-entry ul {
  margin: 0;
  padding-left: 1.3em;
  color: var(--text-dim);
}

.update-entry li + li {
  margin-top: 4px;
}

.updates-foot {
  padding-top: 24px;
  text-align: center;
}

@media (max-width: 600px) {
  .updates-shell {
    padding: 12px 10px 36px;
  }

  .updates-head,
  .update-entry {
    padding: 15px;
  }
}

@media (max-width: 420px) {
  body {
    padding: 5px;
    gap: 5px;
  }

  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }

  .tile-info-main {
    gap: 3px;
  }

  .tile-info {
    padding-inline: 4px;
  }

  .cost-curve-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================ 所持カード */

/* 所持枚数のバッジ。ブックの枚数バッジ（金色・左上）と区別できるよう右上に置く */
.owned-badge {
  flex: none;
  background: rgba(20, 18, 15, 0.88);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: var(--font-xxs);
  font-weight: 700;
  padding: 1px 6px;
  z-index: 2;
}

.owned-badge.is-none {
  color: var(--text-faint);
  border-style: dashed;
}

/* 全カードモードでは所持数を出さない。
   所持枚数の確認は「所持カード」モード、変更は所持カード専用画面で行う。 */
body:not(.owned-mode) .owned-badge,
body:not(.owned-mode) .card-table .col-owned,
body:not(.owned-mode) .detail-owned {
  display: none;
}

/* 未所持の薄表示は所持カードモードのときだけ効かせる */
body.owned-mode .card-tile.is-unowned .tile-media > img {
  opacity: 0.28;
  filter: grayscale(0.85);
}

body.owned-mode .card-tile.is-unowned .tile-info,
body.owned-mode .card-tile.is-unowned .tile-name {
  opacity: 0.5;
}

body.owned-mode .card-table tbody tr.is-unowned td {
  opacity: 0.5;
}

/*
  カード一覧に所持枚数の増減ボタンは置かない。
  ブックの追加／除外ボタンと20px差で隣り合うため押し間違えが起きやすく、
  間違えると所持記録という別のデータが黙って書き換わってしまう。
  一覧では枚数を「見る」だけにして、変更は所持カード画面へ集める。
*/

/* 一覧表の所持列 */
.row-owned-value {
  min-width: 1.8em;
  text-align: center;
  color: var(--text);
  font-weight: 700;
}

.card-table .col-owned {
  white-space: nowrap;
}

/* 取り込みモーダル */
.modal-owned {
  width: min(780px, 100%);
}

.modal-owned .owned-summary {
  font-size: var(--font-base);
  color: var(--text-dim);
  margin-bottom: 8px;
}

.modal-owned .owned-summary b {
  color: var(--gold);
  font-size: var(--font-count);
}

.owned-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-panel-2);
}

.owned-tab {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-small);
  font-weight: 700;
}

.owned-tab:hover {
  color: var(--text);
}

.owned-tab.on {
  background: var(--bg-panel);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-dim);
}

.owned-panel[hidden] {
  display: none;
}

.owned-help {
  max-width: 66ch;
  color: var(--text-dim);
  font-size: var(--font-small);
  line-height: 1.6;
  margin: 0 0 8px;
}

.owned-help-note {
  color: var(--text-faint);
}

/* こちらも display: flex が [hidden] より強い（中身が空のうちは高さ0で気づけなかった） */
.owned-file-list[hidden] {
  display: none;
}

.owned-file-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 10px;
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.owned-file {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owned-diff {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
}

.owned-diff[hidden] {
  display: none;
}

.owned-diff-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: var(--font-small);
  color: var(--text-dim);
  margin-bottom: 6px;
}

.owned-diff-head b {
  color: var(--gold);
}

.owned-diff-list {
  max-height: 40vh;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}

.owned-diff-row {
  display: grid;
  grid-template-columns: 4.5em 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: var(--font-small);
  padding: 2px 4px;
  border-radius: 3px;
}

.owned-diff-row:nth-child(odd) {
  background: var(--bg-panel-2);
}

.owned-diff-row.is-drop .owned-diff-value {
  color: #efaaa3;
}

.owned-diff-no {
  color: var(--text-faint);
  font-size: var(--font-xxs);
}

.owned-diff-value {
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
}

.owned-diff-empty {
  color: var(--text-faint);
  font-size: var(--font-small);
  padding: 6px 4px;
}

.owned-diff-warn {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.6;
}

.owned-diff-warn b {
  display: block;
  color: #e4c07a;
}

/* カード詳細の手持ち枚数。ブック操作とは別の行に置いて混同を避ける */
.detail-owned {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}

.detail-owned-label {
  color: var(--text-dim);
  font-size: var(--font-small);
}

.detail-owned-value {
  min-width: 2em;
  text-align: center;
  color: var(--gold);
  font-size: var(--font-count);
}

.detail-owned-note {
  color: var(--text-faint);
  font-size: var(--font-xs);
}

.owned-diff-warn.is-drop b {
  color: #efaaa3;
}

.owned-diff-names {
  display: block;
  margin-top: 4px;
  color: var(--gold);
}

.owned-import-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.owned-import-actions[hidden] {
  display: none;
}

.owned-manual-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0 8px;
}

.owned-manual-tools input[type='search'] {
  flex: 1;
  min-width: 10em;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
  padding: 7px 9px;
}

.owned-manual-tools label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: var(--font-small);
}

.owned-manual-list {
  max-height: min(56vh, 620px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.owned-manual-row {
  display: grid;
  grid-template-columns: 36px 4.5em minmax(8em, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line-soft);
}

.owned-manual-row:last-child {
  border-bottom: 0;
}

.owned-manual-row.is-unowned {
  color: var(--text-faint);
}

.owned-manual-row > img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
}

.owned-manual-row.is-unowned > img {
  opacity: 0.35;
  filter: grayscale(0.8);
}

.owned-manual-no {
  color: var(--text-faint);
  font-size: var(--font-xxs);
}

.owned-manual-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-small);
}

.owned-manual-actions {
  display: inline-grid;
  grid-template-columns: 32px 2.5em 32px;
  gap: 4px;
  align-items: center;
}

.owned-manual-step {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-panel-2);
  color: var(--gold);
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 700;
}

.owned-manual-step:disabled {
  cursor: default;
  opacity: 0.28;
}

.owned-manual-value {
  text-align: center;
  color: var(--text);
  font-weight: 700;
}

.owned-manual-empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--font-small);
}

@media (max-width: 600px) {
  .owned-manual-tools {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .owned-manual-row {
    grid-template-columns: 32px minmax(7em, 1fr) auto;
    gap: 6px;
    padding-inline: 6px;
  }

  .owned-manual-no {
    display: none;
  }
}

/* ============================================================ カードクイズ */

/*
  観賞モードと同じく全画面で重ねる。
  [hidden] より display の指定が強くなるので、隠す指定を必ず添える
  （これが無いと閉じても板が残り、後ろの一覧に一切触れなくなる）。
*/
.quiz {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.quiz[hidden] {
  display: none;
}

/* クイズ中は後ろの一覧を動かさない（戻ったとき見ていた場所が変わってしまう） */
body.quiz-on {
  overflow: hidden;
}

.quiz-shell {
  width: 100%;
  max-width: 680px;
  padding: 12px 16px 48px;
}

.quiz-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}

.quiz-score {
  color: var(--gold);
  font-size: var(--font-base);
  font-variant-numeric: tabular-nums;
}

.quiz-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: var(--font-close);
  line-height: 1;
  cursor: pointer;
}

.quiz-close:hover {
  border-color: var(--gold-dim);
}

/* ---------------------------------------------------- 開始画面・結果画面 */

.quiz-start {
  padding: 28px 0;
  text-align: center;
}

.quiz-title {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: var(--font-title);
}

.quiz-lead,
.quiz-note,
.quiz-result {
  margin: 0 0 16px;
  color: var(--text-dim);
  font-size: var(--font-base);
  line-height: 1.7;
}

.quiz-result {
  color: var(--text);
  font-size: var(--font-title);
}

.quiz-scope {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 20px;
}

.quiz-scope-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: var(--font-base);
  text-align: left;
  cursor: pointer;
}

.quiz-scope-btn small {
  color: var(--text-faint);
}

.quiz-scope-btn.is-on {
  border-color: var(--gold);
  background: var(--bg-panel-2);
}

.quiz-scope-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quiz-primary,
.quiz-secondary {
  padding: 11px 26px;
  border-radius: var(--radius);
  font-size: var(--font-base);
  cursor: pointer;
}

.quiz-primary {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #1a1610;
  font-weight: 700;
}

.quiz-secondary {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--text-dim);
}

.quiz-secondary:hover {
  border-color: var(--gold-dim);
  color: var(--text);
}

/* -------------------------------------------------------------- 出題画面 */

.quiz-question {
  padding: 18px 0 8px;
}

.quiz-kind {
  margin: 0 0 6px;
  color: var(--text-faint);
  font-size: var(--font-small);
}

.quiz-prompt {
  margin: 0 0 16px;
  font-size: var(--font-title);
  line-height: 1.5;
}

/*
  イラスト当てで使う。高さを抑えないと、選択肢が画面の外へ押し出されて
  「何を答えるのか」と「選択肢」が同時に見えなくなる。
  カードは縦長（445:800）なので、高さで止めないといくらでも伸びる。
  4つの選択肢（1つ約58px）と見出しが同じ画面に収まる高さを上限にしてある。
*/
.quiz-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 34vh;
  margin: 0 auto 18px;
  border-radius: var(--radius);
}

.quiz-choices {
  display: grid;
  gap: 8px;
}

.quiz-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: var(--font-base);
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
}

.quiz-choice:hover:not(:disabled) {
  border-color: var(--gold-dim);
  background: var(--bg-panel-2);
}

/* キーボードの1〜4で答えられるので、その番号を見せておく */
.quiz-choice-key {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-faint);
  font-size: var(--font-small);
  text-align: center;
  line-height: 22px;
}

.quiz-choice:disabled {
  cursor: default;
  opacity: 0.75;
}

/* 押した選択肢だけでなく正解にも印を付ける。正解が分からないと学べない */
.quiz-choice.is-correct {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 18%, var(--bg-panel));
  opacity: 1;
}

.quiz-choice.is-wrong {
  border-color: var(--err);
  background: color-mix(in srgb, var(--err) 18%, var(--bg-panel));
  opacity: 1;
}

/* -------------------------------------------------------------- 正誤表示 */

.quiz-verdict {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.quiz-verdict.is-right {
  border-color: var(--ok);
}

.quiz-verdict.is-wrong {
  border-color: var(--err);
}

.quiz-verdict-head {
  margin: 0 0 6px;
  font-size: var(--font-base);
  font-weight: 700;
}

.quiz-verdict.is-right .quiz-verdict-head {
  color: var(--ok);
}

.quiz-verdict.is-wrong .quiz-verdict-head {
  color: var(--err);
}

.quiz-explain {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--font-base);
  line-height: 1.7;
}

/* 間違えたカードをその場で確かめられるように、画像と数値を添える */
.quiz-card {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.quiz-card-image {
  flex: none;
  width: 62px;
  border-radius: 4px;
}

.quiz-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: var(--font-base);
}

.quiz-card-body small {
  color: var(--text-faint);
  font-size: var(--font-small);
  line-height: 1.6;
}

.quiz-card-text {
  color: var(--text-dim) !important;
}

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 560px) {
  .quiz-shell {
    padding: 10px 12px 40px;
  }

  .quiz-scope-btn {
    min-width: 0;
    width: 100%;
  }

  /* 画面が低いと、イラストが選択肢を押し出してしまう */
  .quiz-image {
    max-height: 30vh;
  }

  .quiz-actions .quiz-primary,
  .quiz-actions .quiz-secondary {
    flex: 1 1 auto;
  }
}

/* 選択肢に添える属性・レア度・種別のアイコン */
.quiz-choice .ico {
  flex: none;
  width: 20px;
  height: 20px;
}

/* 逆引き問題で選択肢に添える小さなカード絵。絵に能力は書かれていないので答えは割れない */
.quiz-choice-card {
  flex: none;
  width: 26px;
  border-radius: 3px;
}

.quiz-choice-label {
  min-width: 0;
}

.quiz-choice.has-card {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* 間違いに気づくのは正誤を見た直後なので、報告の入口はそこに置く */
.quiz-report {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--font-small);
}

.quiz-report a {
  color: var(--text-faint);
  text-decoration: underline;
}

.quiz-report a:hover {
  color: var(--gold);
}

/* 「火属性・地属性」のように答えに属性が複数入るとき、その数だけアイコンを並べる */
.quiz-choice-icons {
  display: inline-flex;
  flex: none;
  gap: 2px;
}

/* -------------------------------------------------- 出題する問題の選択 */

.quiz-kinds {
  margin: 0 0 18px;
  text-align: left;
}

/*
  38種を平らに並べると探せないので、普段は畳んでおく。
  見出しに「38種中 12種」と出しておけば、開かなくても絞り込み中だと分かる。
*/
.quiz-kinds-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: var(--font-base);
  cursor: pointer;
}

.quiz-kinds-toggle:hover {
  border-color: var(--gold-dim);
}

.quiz-kinds-panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-panel-2);
}

.quiz-kinds-bulk {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
}

.quiz-link-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--text-faint);
  font-size: var(--font-small);
  text-decoration: underline;
  cursor: pointer;
}

.quiz-link-btn:hover {
  color: var(--gold);
}

.quiz-kinds-group {
  margin: 0 0 10px;
  padding: 0;
  border: none;
}

.quiz-kinds-group legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--gold-dim);
  font-size: var(--font-small);
}

.quiz-kind-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 12px 4px 0;
  font-size: var(--font-small);
  cursor: pointer;
}

/* 材料が足りず作れない種類。消すと「前はあったのに」と戸惑うので、薄くして残す */
.quiz-kind-item.is-off {
  opacity: 0.4;
  cursor: not-allowed;
}

.quiz-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* クイズが調整中であることの断り。開始画面の最初に出す */
.quiz-beta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: var(--font-small);
  line-height: 1.6;
  text-align: left;
}

.quiz-beta b {
  flex: none;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--warn);
  color: #1a1610;
}