/* カード画像に重ねるバッジ群（#35）＋ カード本文側の裏面注記（.flip-hit・#46）
   トップページ（カードDB）とデッキ構築ツールの検索結果で共用する。
   ⚠️ このファイルの中身は「全部が画像の上」ではない。末尾の .flip-hit は本文（画像の外）に出る行で、
      共用する理由が同じ（両画面に出る）ためここに同居している。
   ⚠️ デッキ構築は root の style.css を読み込まないため、ここに置いて両方から <link> する。
      片方だけにコピーを作らないこと（#35 の不具合そのものが「デッキ構築だけ別実装」に起因する）。

   カード画像の上端2隅には常に情報がある（左上＝コスト・右上＝属性シンボル）。
   そのためバッジは左下（.badges-bl）に縦積みする。積む順は下から
   「禁止 → シーズン禁止 → 両面 → イラスト切替」＝ 情報を下・操作を上（#25 → #34 → #35 の経緯）。

   ⚠️ 右下・左上に「もう1つだけ」置く誘惑に負けないこと。座標を分けると幅次第で必ず重なる
   （実例: #35 で 🎨 を右下に残したところ、版prefixで幅が倍になり左下バッジと重なった）。
   縦積みなら重ならないことが構造で保証される。 */

/* 左下バッジ群（format-badge / season-badge / flip-badge）を縦積みして座標衝突を防ぐ（issue #25） */
.badges-bl {
  position: absolute; left: 8px; bottom: 8px;
  display: flex; flex-direction: column-reverse;  /* DOM先頭(format)を下に、順に上へ積む */
  align-items: flex-start; gap: 6px;
}

/* フォーマット別バッジ（検索結果カード）：禁止フォーマット／専用フォーマットのどちらかを表示 */
.format-badge {
  position: static;
  font-size: .7rem; padding: 2px 8px; border-radius: 999px;
  color: #fff; font-weight: 700;
}
.format-banned   { background: #b91c1c; }
.format-pantheon { background: #7c3aed; }
.format-draft    { background: #0e7490; }
.format-standard { background: #b45309; }

/* シーズン禁止バッジ（#34）。恒久禁止（🚫 .format-banned）とは別概念のため色を分ける。
   ⚠️ ホバー非依存で常時表示する（初心者に気づかせるのが要件） */
.season-badge {
  position: static;
  font-size: .68rem; font-weight: 700; line-height: 1.25;
  padding: 3px 8px; border-radius: 999px;
  color: #fff; border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  cursor: help; white-space: nowrap;
}
.season-announced { background: #a16207; } /* 予告（まだ使える） */
.season-active    { background: #86198f; } /* 発効後（使用不可） */

/* 両面カード：一覧の表裏切替バッジ（.badges-bl 内で縦積み・🎨 の下）。
   ⚠️ font-family: inherit は必須。<button> の既定フォント（Arial 等）のままだと、
   読み込む側に `button { font: inherit }` があるかどうかで見た目が変わる
   （デッキ構築にはあり・トップには無い）。共通部品なので部品の側で閉じる（#35） */
.flip-badge {
  position: static;
  border: none; border-radius: 999px;
  background: rgba(15, 17, 21, .82);
  color: #fff; font-family: inherit; font-size: .7rem; line-height: 1;
  padding: 4px 8px; cursor: pointer; font-weight: 700;
}
.flip-badge:hover { background: var(--accent-2); }

/* イラスト/版の切替バッジ（.badges-bl 内で縦積み・最上段）。
   ⚠️ 文言に版のprefix（例「🎨 7・DOA Alter」）が入って幅が伸びるため、
   右下に絶対配置すると左下のバッジと重なる（#35）。必ず縦積みの中に置くこと。
   font-family: inherit の理由は上の .flip-badge のコメントと同じ */
.art-badge {
  position: static;
  border: none; border-radius: 8px;
  background: rgba(15, 17, 21, .82);
  color: #fff; font-family: inherit; font-size: .72rem; line-height: 1;
  padding: 4px 8px; cursor: pointer;
}
.art-badge:hover { background: var(--accent-2); }

/* 右上バッジ群（#34・左下の .badges-bl と同じ方式）。
   #35 でシーズン禁止を左下へ移したため、現在の中身は印刷ボタン（.card-add）だけ。
   将来また右上にバッジを足すときの受け皿として残す。
   ⚠️ .card-add は opacity:0 でもレイアウト上の場所は占める */
.badges-tr {
  position: absolute; top: 8px; right: 8px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  pointer-events: none; /* 画像上の空白がクリックを奪わないように。子だけが受ける */
}
.badges-tr > * { pointer-events: auto; }

/* 裏面が一致したことを本文で示す行（#46）。
   ⚠️ これは画像の上ではない。画像上のバッジは .badges-bl の縦積みに合流させること（#35）。
   overflow-wrap: anywhere は必須（`束縛の憤怒のチーター` が 375px の2カラムで折り返す） */
.flip-hit {
  margin: 4px 0 0;
  font-size: .74rem;
  color: var(--accent-2);
  display: flex; gap: 4px; align-items: baseline;
}
.flip-hit-lbl  { flex: 0 0 auto; opacity: .85; }
.flip-hit-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }

/* スマホ（root style.css の一覧スマホ調整と同じブレークポイント） */
@media (max-width: 640px) {
  .badges-tr { top: 6px; right: 6px; gap: 4px; }
  .season-badge { font-size: .62rem; padding: 2px 7px; }
  .art-badge { padding: 6px 10px; font-size: .74rem; }
}