/*
 * カード（トレカ）の見た目。ブックパックのカードを調整するときは、基本的にこのファイルだけを触ればよい。
 *
 * 構成
 *   1. トークン（:root）…… 枠の色・紙の色・箔の強さ・動きの速さ。ここを変えると全体に効く
 *   2. 1枚のカード（.bp-tcard）…… 置き方・傾き・裏返し
 *   3. 表面（.bp-cf-*）…… 実物のトレカと同じ並び：外枠／タイトル＋ジャンル／絵の窓／説明／収録・番号・レアリティ
 *   4. 裏面（.bp-tcard-back）…… シリーズの紋章
 *   5. 箔 …… 全体のつや（.bp-tcard-foil）と、絵の窓のホロ・ラメ（.bp-cf-holo）
 *        N：つやだけ／R：絵の窓だけホロ（実物の「ホロ」）／SR：ホロ＋ラメ／SSR：金枠＋全面の虹＋ラメ
 *   6. めくった瞬間の演出（一度きり）
 *   （図鑑のポケットとバインダーは binder.css）
 *
 * 文字の大きさはカードの幅を基準にした cqw で決めている。カードをどの大きさで置いても、同じ比率で縮む。
 *
 * 注意：アニメーションの長さは app.js の after(...) でも使っている（renderDeck / advanceCard）。
 *       ここの --move-ms・--flip-ms を変えたら app.js の数字も合わせること。
 */

/* ---- 1. トークン ---- */
:root {
  --card-radius: 4.5% / 3.3%; /* 実物の角丸に近い比率 */
  --font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;

  /* 外枠（シリーズごと）。金属の帯のように斜めに光が走るグラデーション */
  --frame-fiction: linear-gradient(135deg, #e3e6ec, #a9b1bf 35%, #f2f4f7 55%, #98a1b1 80%, #d5d9e0);
  --frame-bungo: linear-gradient(135deg, #f1dfb0, #b48a46 35%, #f7e8c2 55%, #a07834 80%, #e9d29c);
  --frame-travel: linear-gradient(135deg, #d9eef0, #8fb4bb 35%, #eef7f8 55%, #7ea4ab 80%, #cfe5e8);
  /* SR：細かい筋の入った銀の枠（実物の「エッチング加工」の銀枠） */
  --frame-sr:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #f4f6f9, #b2bac7 28%, #ffffff 48%, #9ea7b6 70%, #e9ecf1);
  /* SSR：金の枠（実物の「ゴールドレア」） */
  --frame-ssr:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #fff1b8, #d4a62a 30%, #fff6d0 50%, #c08d1c 72%, #ffe9a0);

  --panel: #f7f3ea; /* 内側の紙 */
  --panel-ink: #24222b; /* 文字 */
  --panel-muted: #6a6457;

  /* 箔の強さ（0〜1） */
  --glare-n: 0.25; /* N のつや */
  --glare-r: 0.35;
  --glare-sr: 0.45;
  --glare-ssr: 0.45; /* SSR の全面の虹（強すぎると題名が読めなくなる） */
  --holo-r: 0.45; /* ホロ（虹の帯）。overlay で重ねるので、絵の色は飛ばない */
  --holo-sr: 0.32;
  --holo-ssr: 0.22;
  --sparkle-sr: 0.75; /* ラメ */
  --sparkle-ssr: 1;

  --move-ms: 240ms; /* 横に流れて消えるまで */
  --flip-ms: 450ms; /* 裏返し */
}

/* ---- 2. 1枚のカード ---- */
/* 実物のトレカと同じ縦横比（63:88） */
.bp-tcard {
  --dx: 0px;
  --rot: 0deg;
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --frame: var(--frame-fiction);
  --back-frame: var(--frame-fiction); /* 裏面の枠はシリーズで決まり、レアリティでは変えない */
  --glare: var(--glare-n);
  --holo: 0;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  perspective: 900px;
  transform: translate(var(--dx), 0) rotate(var(--rot)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--move-ms) ease-out, opacity var(--move-ms) ease-out;
  cursor: grab;
  touch-action: none;
}

.bp-tcard.series-bungo { --frame: var(--frame-bungo); --back-frame: var(--frame-bungo); }
.bp-tcard.series-travel { --frame: var(--frame-travel); --back-frame: var(--frame-travel); }

.bp-tcard.is-r { --glare: var(--glare-r); --holo: var(--holo-r); }
.bp-tcard.is-sr {
  --frame: var(--frame-sr);
  --glare: var(--glare-sr);
  --holo: var(--holo-sr);
}

.bp-tcard.is-ssr {
  --frame: var(--frame-ssr);
  --glare: var(--glare-ssr);
  --holo: var(--holo-ssr);
}

.bp-deck-stage {
  perspective: 1000px;
}

.bp-deck-stage .bp-tcard {
  position: absolute;
  inset: 0;
}

.bp-tcard.is-top {
  z-index: 2;
}

.bp-tcard.is-under {
  transform: translate(6px, 6px) rotate(2.5deg);
  pointer-events: none;
}

.bp-tcard.is-dragging {
  transition: none;
  cursor: grabbing;
}

.bp-tcard.is-away {
  --dx: -150%;
  --rot: -16deg;
  opacity: 0;
}

.bp-tcard-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bp-tcard.is-up .bp-tcard-flip {
  transform: rotateY(180deg);
}

.bp-tcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.35);
}

/* ---- 3. 表面 ---- */
.bp-tcard-front {
  transform: rotateY(180deg);
  padding: 4.2cqw;
  background: var(--frame);
  color: var(--panel-ink);
}

/* 枠の内側のふち（金属の帯の内側に細い光） */
.bp-tcard-front::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.45), inset 0 0 0 0.9cqw rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.bp-cf {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.2cqw;
  height: 100%;
  padding: 3cqw 3cqw 2.4cqw;
  border-radius: 2.4cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 30%),
    var(--panel);
  box-shadow: inset 0 0 0 0.4cqw rgba(0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
}

.bp-cf-head {
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 0 0.6cqw;
}

.bp-cf-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-mincho);
  font-size: var(--title-size, 7cqw); /* app.js の titleSize() が題名とジャンル札の長さから決める */
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
}


.bp-cf-genre {
  flex: none;
  padding: 0.5cqw 2.2cqw;
  border-radius: 999px;
  background: rgba(36, 34, 43, 0.08);
  color: var(--panel-muted);
  font-size: 3.6cqw;
  font-weight: 700;
}

/* 絵の窓。イラストが入るまでは、カードごとの色相と題名の一文字で仮の絵にする */
.bp-cf-art {
  --art-h: 220;
  position: relative;
  flex: none;
  aspect-ratio: 1.2 / 1;
  border-radius: 1cqw;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 22%, hsl(var(--art-h) 70% 78% / 0.9), transparent 45%),
    radial-gradient(ellipse at 70% 85%, hsl(calc(var(--art-h) + 50) 55% 45% / 0.8), transparent 60%),
    linear-gradient(160deg, hsl(var(--art-h) 45% 52%), hsl(calc(var(--art-h) + 30) 40% 26%));
  box-shadow:
    0 0 0 0.7cqw #fff,
    0 0 0 1.2cqw rgba(36, 34, 43, 0.25),
    inset 0 0 6cqw rgba(0, 0, 0, 0.35);
}

/* 印刷の網目のような細かい同心円 */
.bp-cf-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.07) 0 0.8cqw, transparent 0.8cqw 2.4cqw);
}

/* 層の考え方（holo-card-studio の「人物・背景・線画・文字の層に分けて箔を重ねる」から）：
 *   背景層 = 絵の地（.bp-cf-art の背景）……ホロ（虹）を載せる
 *   人物層 = 中央の一文字（.bp-cf-art-glyph）……ホロの上に置き、虹をかぶらない。SR は銀、SSR は金の箔押し
 *   線画層 = エッチングの筋（.bp-cf-art::after）
 *   文字層 = 題名・説明（.bp-cf-head / .bp-cf-text）……箔を載せず読みやすさを守る
 * 絵が入ったら、人物層を切り抜いた画像に差し替えれば、同じ重ね方がそのまま使える。 */
.bp-cf-art-glyph {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mincho);
  font-size: 36cqw;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.24);
  text-shadow: 0 1cqw 4cqw rgba(0, 0, 0, 0.3);
}

.bp-cf-text {
  flex: 1;
  margin: 0;
  padding: 1.6cqw 1.6cqw 0;
  border-top: 0.4cqw solid rgba(36, 34, 43, 0.14);
  font-family: var(--font-mincho);
  font-size: 4.4cqw;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bp-cf-foot {
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 1.4cqw 0.6cqw 0;
  border-top: 0.4cqw solid rgba(36, 34, 43, 0.14);
  color: var(--panel-muted);
  font-size: 3.4cqw;
  font-weight: 700;
}

/* 収録マーク（シリーズの紋章を小さく） */
.bp-cf-set {
  display: grid;
  place-items: center;
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  background: var(--panel-ink);
  color: var(--panel);
  font-family: var(--font-mincho);
  font-size: 3.6cqw;
  font-weight: 800;
}

.bp-cf-no {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.bp-cf-rarity {
  margin-left: auto;
  color: var(--panel-ink);
  letter-spacing: 0.04em;
}

.bp-tcard.is-r .bp-cf-rarity { color: var(--rarity-r); }
.bp-tcard.is-sr .bp-cf-rarity { color: var(--rarity-sr); }

.bp-tcard.is-ssr .bp-cf-rarity {
  background: linear-gradient(180deg, #e9b938, #a8781a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 特別版の札（例「自装本バージョン」）。同じ作品の珍しい版であることを、絵の左上に示す */
.bp-cf-variant {
  position: absolute;
  z-index: 3;
  top: 2cqw;
  left: 2cqw;
  max-width: 70%;
  padding: 0.6cqw 2.4cqw;
  border-radius: 0.8cqw;
  background: linear-gradient(180deg, #fff6d0, #e7bf55 55%, #b88a24);
  color: #3e2a05;
  font-size: 3.6cqw;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0.6cqw 2cqw rgba(0, 0, 0, 0.35);
}

/* フルアートでは題名の帯の下に置く */
.bp-tcard.is-sr .bp-cf-variant,
.bp-tcard.is-ssr .bp-cf-variant {
  top: 14cqw;
  left: 4cqw;
}

/* SSR は地が金色なので、札は濃い地に金の文字で浮かせる */
.bp-tcard.is-ssr .bp-cf-variant {
  background: rgba(48, 28, 2, 0.85);
  color: #ffe9a8;
  box-shadow: inset 0 0 0 0.3cqw #e7bf55, 0 0.6cqw 2cqw rgba(0, 0, 0, 0.35);
}

/* NEW と所持数は、絵の窓の角に札として貼る */
.bp-tcard .bp-new,
.bp-cf-count {
  position: absolute;
  z-index: 3;
  padding: 0.6cqw 2.6cqw;
  border-radius: 999px;
  font-size: 4cqw;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.bp-tcard .bp-new {
  top: 2cqw;
  right: 2cqw;
  background: var(--bp-accent);
  color: #fff;
  box-shadow: 0 0.6cqw 2cqw rgba(0, 0, 0, 0.35);
}

.bp-cf-count {
  right: 2cqw;
  bottom: 2cqw;
  background: rgba(20, 22, 32, 0.72);
  color: #fff;
}

/* ---- 3.5 レアリティごとの作り（実物のトレカの段階にならう） ----
 *   N   ：通常の枠。絵の窓は印刷のまま（箔なし）
 *   R   ：絵の窓だけが虹色に光る「ホロ」
 *   SR  ：絵がカード全面に広がる「フルアート」＋エッチングの銀枠＋ラメ
 *   SSR ：全面が金色の「ゴールドレア」。金枠・金の絵・全体の筋目・虹のラメ
 */

/* N は箔がないので、絵の窓を少し落ち着いた色にして R 以上との差を出す */
.bp-tcard.is-n .bp-cf-art {
  filter: saturate(0.75);
}

/* SR・SSR：フルアート。絵の窓をカードの内側いっぱいに広げ、文字は絵の上に帯で載せる */
.bp-tcard.is-sr .bp-cf,
.bp-tcard.is-ssr .bp-cf {
  background: none;
  color: #fff;
}

.bp-tcard.is-sr .bp-cf-art,
.bp-tcard.is-ssr .bp-cf-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border-radius: inherit;
  box-shadow: inset 0 0 10cqw rgba(0, 0, 0, 0.45);
}

.bp-tcard.is-sr .bp-cf-art-glyph,
.bp-tcard.is-ssr .bp-cf-art-glyph {
  font-size: 62cqw;
}

/* 人物層の箔押し。SR は銀 */
.bp-tcard.is-sr .bp-cf-art-glyph {
  background: linear-gradient(160deg, #ffffff, #c9d0db 35%, #8a93a3 55%, #f4f6f9 75%, #aeb6c3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.45));
}

/* エッチング（細かい斜めの筋目）。実物の SR 以上の手触りのある加工 */
.bp-tcard.is-sr .bp-cf-art::after,
.bp-tcard.is-ssr .bp-cf-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.09) 0 0.35cqw, transparent 0.35cqw 1.4cqw),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.07) 0 0.35cqw, transparent 0.35cqw 1.4cqw);
  mix-blend-mode: overlay;
}

.bp-tcard.is-sr .bp-cf-head,
.bp-tcard.is-sr .bp-cf-text,
.bp-tcard.is-sr .bp-cf-foot,
.bp-tcard.is-ssr .bp-cf-head,
.bp-tcard.is-ssr .bp-cf-text,
.bp-tcard.is-ssr .bp-cf-foot {
  position: relative;
  z-index: 1;
}

.bp-tcard.is-sr .bp-cf-head,
.bp-tcard.is-ssr .bp-cf-head {
  margin: -3cqw -3cqw 0;
  padding: 3cqw 3.6cqw 5cqw;
  background: linear-gradient(180deg, rgba(8, 10, 22, 0.6), rgba(8, 10, 22, 0));
}

.bp-tcard.is-sr .bp-cf-title,
.bp-tcard.is-ssr .bp-cf-title {
  text-shadow: 0 0.4cqw 1.5cqw rgba(0, 0, 0, 0.6);
}

.bp-tcard.is-sr .bp-cf-genre,
.bp-tcard.is-ssr .bp-cf-genre {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.bp-tcard.is-sr .bp-cf-text,
.bp-tcard.is-ssr .bp-cf-text {
  flex: none;
  margin-top: auto;
  padding: 2cqw 2.6cqw;
  border: none;
  border-radius: 1.6cqw;
  background: rgba(8, 10, 22, 0.5);
}

.bp-tcard.is-sr .bp-cf-foot,
.bp-tcard.is-ssr .bp-cf-foot {
  border: none;
  color: rgba(255, 255, 255, 0.85);
}

.bp-tcard.is-sr .bp-cf-set,
.bp-tcard.is-ssr .bp-cf-set {
  background: #fff;
  color: var(--panel-ink);
}

.bp-tcard.is-sr .bp-cf-rarity { color: #e2c6ff; }

/* フルアートでは、NEW と所持数を帯に重ならない位置へ */
.bp-tcard.is-sr .bp-new,
.bp-tcard.is-ssr .bp-new {
  top: 14cqw;
  right: 4cqw;
}

.bp-tcard.is-sr .bp-cf-count,
.bp-tcard.is-ssr .bp-cf-count {
  right: 4cqw;
  bottom: 34cqw;
}

/* SSR：絵も金色に。題名は金の箔押し */
.bp-tcard.is-ssr .bp-cf-art {
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 248, 220, 0.6), transparent 45%),
    radial-gradient(ellipse at 75% 85%, rgba(150, 95, 10, 0.7), transparent 60%),
    linear-gradient(160deg, #f1cf72, #c4932c 50%, #7a5414);
}

/* 人物層の箔押し。SSR は金 */
.bp-tcard.is-ssr .bp-cf-art-glyph {
  background: linear-gradient(160deg, #fffbe6, #f3d27a 30%, #a8761c 52%, #ffeaa0 72%, #c99a35);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0.8cqw 0 rgba(90, 58, 6, 0.55)) drop-shadow(0 1.2cqw 3cqw rgba(60, 38, 4, 0.5));
}

.bp-tcard.is-ssr .bp-cf-head {
  background: linear-gradient(180deg, rgba(48, 28, 2, 0.85), rgba(48, 28, 2, 0.4) 70%, rgba(48, 28, 2, 0));
}

/* 金の文字は全面の虹と重なると読めなくなるので、明るい金色の地の色＋濃い影で読ませる */
.bp-tcard.is-ssr .bp-cf-title {
  color: #fff1bf;
  text-shadow: 0 0.3cqw 0 #6b4708, 0 0.5cqw 1.6cqw rgba(0, 0, 0, 0.7);
}

.bp-tcard.is-ssr .bp-cf-text {
  background: rgba(48, 28, 2, 0.62);
}

.bp-tcard.is-ssr .bp-cf-rarity {
  background: linear-gradient(180deg, #fff6d0, #f0c650);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---- 3.6 絵（イラスト） ----
 * 絵のあるカード（.has-art）は、絵の窓に絵を敷く。SR・SSR はフルアートなので、カード全面に広がる。
 * 主役の透過画像（.bp-cf-art-subject）があれば手前に重ね、傾けたとき背景より大きく動かす（層の視差）。
 * 絵は少し大きめ（-4%）に敷き、視差で動いても端が見えないようにする。
 */
.bp-cf-art-img,
.bp-cf-art-subject {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  transition: transform 0.15s ease-out;
}

.bp-cf-art-img {
  transform: translate(calc(var(--tx) * -1.2cqw * var(--depth)), calc(var(--ty) * -1.2cqw * var(--depth)));
}

.bp-cf-art-subject {
  z-index: 1;
  transform: translate(calc(var(--tx) * 1.8cqw * var(--depth)), calc(var(--ty) * 1.8cqw * var(--depth)));
}

/* 仮の絵のための飾り（同心円）と色の調整は、絵があるときは外す */
.bp-tcard.has-art .bp-cf-art::before {
  content: none;
}

.bp-tcard.has-art.is-n .bp-cf-art {
  filter: none;
}

/* 絵があるときは、虹の加工を控えめにする（強いと絵が虹色に染まる。2026-10-10 に見本で確認） */
.bp-tcard.has-art.is-r { --holo: 0.16; }
.bp-tcard.has-art.is-sr { --holo: 0.14; }

.bp-tcard.has-art.is-ssr {
  --holo: 0.12;
  --glare: 0.3;
}

/* ---- 4. 裏面 ---- */
.bp-tcard-back {
  --back-a: #3a5288;
  --back-b: #1d2a44;
  --back-c: #0f1729;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6cqw;
  /* 裏面は全カード共通（レアリティで枠を変えると、めくる前に当たりが分かってしまう） */
  background: var(--back-frame);
}

.bp-tcard.series-bungo .bp-tcard-back { --back-a: #8a4632; --back-b: #4a2018; --back-c: #2a110c; }
.bp-tcard.series-travel .bp-tcard-back { --back-a: #3a8595; --back-b: #1b4652; --back-c: #0e2830; }

/* 枠の内側：放射状の光と、中心から外への陰影 */
.bp-tcard-back::before {
  content: "";
  position: absolute;
  inset: 4.2cqw;
  border-radius: 2.4cqw;
  background:
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(255, 255, 255, 0.07) 0 4deg, transparent 4deg 10deg),
    radial-gradient(circle at 50% 44%, var(--back-a), var(--back-b) 55%, var(--back-c));
  box-shadow: inset 0 0 0 0.6cqw rgba(255, 255, 255, 0.25);
}

.bp-back-medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: 44cqw;
  aspect-ratio: 1;
  margin-top: 6cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6f7fa, #9aa3b3);
  box-shadow:
    0 0 0 1.4cqw var(--back-b),
    0 0 0 2.2cqw #d6dbe3,
    0 2cqw 5cqw rgba(0, 0, 0, 0.5);
}

.bp-back-mark {
  font-family: var(--font-mincho);
  font-size: 22cqw;
  font-weight: 800;
  line-height: 1;
  color: var(--back-b);
}

.bp-back-logo {
  position: relative;
  font-family: var(--font-mincho);
  font-size: 7.5cqw;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #fff, #d6dbe3 45%, #8f98a8 55%, #d6dbe3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- 5. 箔 ---- */
/* 全体のつや。指の位置に光が映る。SSR は全面に虹色が乗る */
.bp-tcard-foil {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: var(--card-radius);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.95), transparent 55%);
  transition: opacity 0.3s ease;
}

.bp-tcard.is-up .bp-tcard-foil {
  opacity: var(--glare);
}

/* color-dodge だと明るい紙の上で文字まで白く飛ぶ。overlay なら文字の濃さを残したまま虹色が乗る */
.bp-tcard.is-ssr .bp-tcard-foil {
  mix-blend-mode: overlay;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.8), transparent 55%),
    linear-gradient(115deg,
      hsl(330 90% 70% / 0.5), hsl(50 95% 65% / 0.5), hsl(150 80% 60% / 0.5),
      hsl(200 90% 65% / 0.5), hsl(270 85% 72% / 0.5), hsl(330 90% 70% / 0.5));
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--mx) var(--my);
}

/* ホロ（実物の「ホロ」カードの虹の帯）。R は絵の窓だけ、SR・SSR はフルアートなのでカード全面。
   overlay で重ねるので絵の色は残り、止まっていても虹の帯が見える。指の位置で帯が流れる。 */
.bp-cf-holo {
  position: absolute;
  inset: 0;
  opacity: var(--holo);
  mix-blend-mode: overlay;
  background:
    /* 斜めに走る光の筋 */
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.85) 45%, transparent 58%),
    /* 虹の帯 */
    repeating-linear-gradient(115deg,
      hsl(0 95% 60%) 0, hsl(45 95% 60%) 6cqw, hsl(120 85% 55%) 12cqw,
      hsl(190 95% 60%) 18cqw, hsl(260 90% 66%) 24cqw, hsl(320 95% 62%) 30cqw, hsl(360 95% 60%) 36cqw);
  background-size: 260% 260%, 200% 200%;
  background-position: var(--mx) var(--my), calc(100% - var(--mx)) var(--my);
}

/* ラメ（SR・SSR）。全体にうっすら散らし、指の近くほど強く光る */
.bp-cf-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle, #fff 0 0.35cqw, transparent 0.65cqw) 0 0 / 4.2cqw 4.2cqw,
    radial-gradient(circle, #fff 0 0.25cqw, transparent 0.5cqw) 2.1cqw 1.6cqw / 6.4cqw 5.2cqw,
    radial-gradient(circle, #ffe9a8 0 0.3cqw, transparent 0.55cqw) 1cqw 3cqw / 9cqw 7.5cqw;
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), #000, rgba(0, 0, 0, 0.3) 65%);
  mask: radial-gradient(circle at var(--mx) var(--my), #000, rgba(0, 0, 0, 0.3) 65%);
}

.bp-tcard.is-sr .bp-cf-holo::after { opacity: var(--sparkle-sr); }
.bp-tcard.is-ssr .bp-cf-holo::after { opacity: var(--sparkle-ssr); }

/* ---- 5.5 層の視差（データのカードならではの演出） ----
 * 傾き（--tx, --ty：-1〜1。指の位置かスマホの傾きで決まる）に合わせて、層ごとに違う量だけ動かす。
 *   背景の模様 …… 傾きと逆に少し（奥にあるように見える）
 *   人物の層（中央の一文字）…… 傾きと同じ向きに大きく。影は光と反対へ伸びる（手前に浮いて見える）
 *   文字の層（題名・説明）…… 動かさない（いちばん手前のガラス）
 * --depth で奥行きの深さを変える。SR・SSR は深い。
 */
.bp-tcard {
  --tx: 0;
  --ty: 0;
  --depth: 1;
}

.bp-tcard.is-sr { --depth: 1.7; }
.bp-tcard.is-ssr { --depth: 2.2; }

.bp-cf-art::before {
  transform: translate(calc(var(--tx) * -1.6cqw * var(--depth)), calc(var(--ty) * -1.6cqw * var(--depth))) scale(1.08);
  transition: transform 0.15s ease-out;
}

.bp-cf-art-glyph {
  transform: translate(calc(var(--tx) * 2.4cqw * var(--depth)), calc(var(--ty) * 2.4cqw * var(--depth)));
  transition: transform 0.15s ease-out, filter 0.15s ease-out;
}

/* 人物の層の影：光の反対側へ伸びる */
.bp-tcard.is-sr .bp-cf-art-glyph {
  filter: drop-shadow(calc(var(--tx) * -1.6cqw) calc(0.8cqw + var(--ty) * -1.6cqw) 1.6cqw rgba(0, 0, 0, 0.5));
}

.bp-tcard.is-ssr .bp-cf-art-glyph {
  filter:
    drop-shadow(0 0.8cqw 0 rgba(90, 58, 6, 0.55))
    drop-shadow(calc(var(--tx) * -2cqw) calc(1.2cqw + var(--ty) * -2cqw) 3cqw rgba(60, 38, 4, 0.55));
}

/* 傾けているあいだは、拡大表示の平置きのカードにもつやを出す（スマホにはカーソルが無いため） */
.bp-tcard.is-flat.is-tilting .bp-tcard-foil {
  opacity: var(--glare);
}

/* SSR：ラメがゆっくり立ちのぼり続ける「生きている箔」（実物の箔は動かない） */
.bp-tcard.is-ssr .bp-cf-holo::after {
  animation: bp-glitter-rise 7s linear infinite;
}

@keyframes bp-glitter-rise {
  from { background-position: 0 0, 2.1cqw 1.6cqw, 1cqw 3cqw; }
  to { background-position: 0 -42cqw, 2.1cqw -50.4cqw, 1cqw -72cqw; }
}

/* ---- 6. めくった瞬間だけ出る演出（一度きり） ---- */
.bp-tcard.is-r.is-revealed .bp-tcard-front {
  animation: bp-fx-r 1.2s ease-out 1;
}

.bp-tcard.is-sr.is-revealed .bp-tcard-front::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-130%) skewX(-16deg);
  animation: bp-fx-sweep 1s ease-out 0.15s 1 forwards;
  pointer-events: none;
}

.bp-tcard.is-ssr.is-revealed .bp-tcard-front {
  animation: bp-fx-ssr 1.4s ease-out 1;
}

@keyframes bp-fx-r {
  0%, 100% { box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.35); }
  35% { box-shadow: 0 0 26px 6px rgba(59, 123, 214, 0.8); }
}

@keyframes bp-fx-sweep {
  to { transform: translateX(250%) skewX(-16deg); }
}

@keyframes bp-fx-ssr {
  0% { box-shadow: 0 0 0 rgba(217, 165, 32, 0); }
  40% { box-shadow: 0 0 34px 10px rgba(240, 190, 60, 0.85); }
  100% { box-shadow: 0 0 16px 3px rgba(217, 165, 32, 0.5); }
}

/* SSR が出たときだけ、画面全体が一度金色に光る */
.bp-opening.is-ssr-flash::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 214, 110, 0.5), transparent 60%);
  animation: bp-fx-flash 1.5s ease-out 1 both;
}

@keyframes bp-fx-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- 6.5 めくりの演出（レア度ごと）。長さは app.js の RARITY_FX ----
 *   ため（.is-charging）：裏のまま揺れて、縁から光が漏れる。R は小さく、SR は強く、SSR はだんだん激しく
 *   光の筋（.bp-deck-rays）：カードの背後で回る放射状の光。SR・SSR は強い
 *   光の粒（.bp-deck-sparks）：表に返った瞬間に中心から飛び散る
 *   画面の揺れ（.is-quake）：SSR だけ
 */
.bp-tcard.is-r { --glow: rgba(90, 150, 255, 0.75); --spark: #a9cbff; }
.bp-tcard.is-sr { --glow: rgba(190, 120, 255, 0.85); --spark: #e6c8ff; }
.bp-tcard.is-ssr { --glow: rgba(255, 205, 90, 0.95); --spark: #ffe08a; }

.bp-deck-stage.fx-r { --ray: rgba(110, 170, 255, 0.22); --spark: #a9cbff; }
.bp-deck-stage.fx-sr { --ray: rgba(200, 150, 255, 0.34); --spark: #e6c8ff; }
.bp-deck-stage.fx-ssr { --ray: rgba(255, 214, 110, 0.5); --spark: #ffe08a; }

/* 縁から漏れる光（カードの後ろ） */
.bp-tcard::before {
  content: "";
  position: absolute;
  inset: 2%;
  z-index: -1;
  border-radius: var(--card-radius);
  opacity: 0;
  box-shadow: 0 0 28px 10px var(--glow, transparent);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.bp-tcard.is-charging::before {
  opacity: 1;
  animation: bp-glow-pulse 0.35s ease-in-out infinite alternate;
}

.bp-tcard.is-ssr.is-charging::before {
  box-shadow: 0 0 40px 18px var(--glow);
}

@keyframes bp-glow-pulse {
  from { transform: scale(0.98); filter: brightness(0.85); }
  to { transform: scale(1.04); filter: brightness(1.25); }
}

/* 揺れ（裏返る前のカード） */
.bp-tcard.is-charging.is-r .bp-tcard-flip {
  animation: bp-charge-r 0.19s ease-in-out 2;
}

.bp-tcard.is-charging.is-sr .bp-tcard-flip {
  animation: bp-charge-sr 0.1s linear 8;
}

.bp-tcard.is-charging.is-ssr .bp-tcard-flip {
  animation: bp-charge-ssr 1.3s ease-in both;
}

@keyframes bp-charge-r {
  0%, 100% { transform: none; }
  30% { transform: rotate(-1.6deg); }
  70% { transform: rotate(1.6deg); }
}

@keyframes bp-charge-sr {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-3px) rotate(-2.2deg); }
  75% { transform: translateX(3px) rotate(2.2deg); }
}

/* SSR：小刻みな揺れが、だんだん大きく、最後に少し浮き上がる */
@keyframes bp-charge-ssr {
  0% { transform: none; }
  10% { transform: translateX(-1px) rotate(-0.6deg); }
  20% { transform: translateX(1px) rotate(0.6deg); }
  30% { transform: translateX(-2px) rotate(-1.2deg); }
  40% { transform: translateX(2px) rotate(1.2deg); }
  50% { transform: translateX(-3px) rotate(-2deg); }
  58% { transform: translateX(3px) rotate(2deg); }
  66% { transform: translateX(-4px) rotate(-3deg) scale(1.02); }
  74% { transform: translateX(4px) rotate(3deg) scale(1.03); }
  82% { transform: translateX(-5px) rotate(-3.5deg) scale(1.04); }
  90% { transform: translateX(5px) rotate(3.5deg) scale(1.05); }
  100% { transform: translateY(-4%) scale(1.06); }
}

/* 背後で回る光の筋 */
.bp-deck-rays {
  position: absolute;
  inset: -55%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, var(--ray, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%);
  mask: radial-gradient(circle, #000 12%, transparent 62%);
  transition: opacity 0.5s ease;
  animation: bp-rays-spin 9s linear infinite;
}

.bp-deck-stage.fx-r .bp-deck-rays { opacity: 0.6; }
.bp-deck-stage.fx-sr .bp-deck-rays { opacity: 1; }

.bp-deck-stage.fx-ssr .bp-deck-rays {
  opacity: 1;
  animation-duration: 5s;
}

@keyframes bp-rays-spin {
  to { transform: rotate(360deg); }
}

.bp-deck-stage .bp-tcard {
  z-index: 1;
}

.bp-deck-stage .bp-tcard.is-top {
  z-index: 2;
}

/* 光の粒（中心から飛び散る） */
.bp-deck-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  pointer-events: none;
}

.bp-deck-sparks i {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: var(--spark, #fff);
  box-shadow: 0 0 6px 2px var(--spark, #fff);
  animation: bp-spark 1s cubic-bezier(0.15, 0.7, 0.3, 1) var(--delay) both;
}

@keyframes bp-spark {
  from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; }
  to { transform: rotate(var(--a)) translateX(var(--d)) scale(0.2); opacity: 0; }
}

/* SSR：画面が一度揺れる */
.bp-opening.is-quake .bp-opening-inner {
  animation: bp-quake 0.45s ease-out 1;
}

@keyframes bp-quake {
  0%, 100% { transform: none; }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  .bp-tcard,
  .bp-tcard-flip,
  .bp-tcard-foil {
    transition: none;
  }

  .bp-deck-stage.is-emerge,
  .bp-tcard.is-r.is-revealed .bp-tcard-front,
  .bp-tcard.is-sr.is-revealed .bp-tcard-front::after,
  .bp-tcard.is-ssr.is-revealed .bp-tcard-front,
  .bp-opening.is-ssr-flash::before,
  .bp-tcard.is-charging::before,
  .bp-tcard.is-charging .bp-tcard-flip,
  .bp-deck-rays,
  .bp-opening.is-quake .bp-opening-inner,
  .bp-tcard.is-ssr .bp-cf-holo::after {
    animation: none;
  }
}

/* ---- 9. レアリティの札 ----
 * めくって表に返ったとき、カードの上に出す（.bp-deck-stage.is-banner で現れる）。
 * N は控えめ、R は青、SR は虹がかった銀、SSR は金で光が走る。結果の一覧では小さい札（.is-compact）。
 * 札はカードの外に置くので、filter や mix-blend を使ってよい（3D の面の中ではないため）。
 */
.bp-rarity-banner {
  --rb-size: 1.1rem;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.bp-rb-code {
  font-family: Georgia, "Times New Roman", var(--font-mincho), serif;
  font-size: var(--rb-size);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.08em;
  color: #dfe3ea;
}

.bp-rb-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(235, 238, 245, 0.75);
}

/* 開封の山：カードの上に置き、表に返ったら弾むように出す */
.bp-deck-stage {
  margin-top: 64px;
}

.bp-deck-stage > .bp-rarity-banner {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.6);
}

.bp-deck-stage.is-banner > .bp-rarity-banner {
  animation: bp-banner-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}

@keyframes bp-banner-in {
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* R：青い宝石色 */
.bp-rarity-banner.is-r {
  --rb-size: 1.6rem;
}

.bp-rarity-banner.is-r .bp-rb-code {
  background: linear-gradient(180deg, #d6f0ff, #5fb4ff 55%, #2c6fd1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(80, 160, 255, 0.55));
}

.bp-rarity-banner.is-r .bp-rb-label {
  color: #a9d6ff;
}

/* SR：虹がかった銀。色がゆっくり流れる */
.bp-rarity-banner.is-sr {
  --rb-size: 2.2rem;
}

.bp-rarity-banner.is-sr .bp-rb-code {
  background: linear-gradient(100deg, #ffffff, #c3ccff 20%, #ffd2f2 40%, #c8fff1 60%, #fff3c4 80%, #ffffff);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(190, 160, 255, 0.7)) drop-shadow(0 2px 0 rgba(60, 40, 110, 0.6));
  animation: bp-banner-flow 3s linear infinite;
}

.bp-rarity-banner.is-sr .bp-rb-label {
  color: #e2d8ff;
  text-shadow: 0 0 10px rgba(190, 160, 255, 0.6);
}

/* SSR：金の文字に光が走り、両脇に飾りの線と星。背後に金の光 */
.bp-rarity-banner.is-ssr {
  --rb-size: 3rem;
}

.bp-rarity-banner.is-ssr::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 210, 90, 0.55), rgba(255, 190, 60, 0.15) 60%, transparent);
}

.bp-rarity-banner.is-ssr .bp-rb-code {
  position: relative;
  padding: 0 0.15em;
  background:
    linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%),
    linear-gradient(180deg, #fffbe0, #ffe07a 40%, #c98a12 55%, #ffe9a0 80%, #fff6cf);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #6b4708) drop-shadow(0 0 14px rgba(255, 196, 60, 0.85));
  animation: bp-banner-shine 2.4s ease-in-out infinite;
}

.bp-rarity-banner.is-ssr .bp-rb-code::before,
.bp-rarity-banner.is-ssr .bp-rb-code::after {
  content: "✦";
  position: absolute;
  top: 50%;
  font-size: 0.32em;
  font-style: normal;
  color: #ffe9a0;
  -webkit-text-fill-color: #ffe9a0;
  text-shadow: 0 0 8px rgba(255, 210, 90, 0.9);
  transform: translateY(-50%);
}

.bp-rarity-banner.is-ssr .bp-rb-code::before { right: 100%; }
.bp-rarity-banner.is-ssr .bp-rb-code::after { left: 100%; }

.bp-rarity-banner.is-ssr .bp-rb-label {
  padding: 3px 12px;
  border-top: 1px solid rgba(255, 220, 130, 0.7);
  border-bottom: 1px solid rgba(255, 220, 130, 0.7);
  color: #ffe9a0;
  text-shadow: 0 0 10px rgba(255, 200, 80, 0.8);
}

@keyframes bp-banner-flow {
  to { background-position: -250% 0; }
}

@keyframes bp-banner-shine {
  0% { background-position: 150% 0, 0 0; }
  60%, 100% { background-position: -150% 0, 0 0; }
}

/* 結果の一覧と拡大表示の小さい札：呼び名を省き、カードの上に添える */
.bp-rarity-banner.is-compact {
  --rb-size: 0.9rem;
  min-height: 1.6rem;
  justify-content: flex-end;
}

.bp-rarity-banner.is-compact.is-r { --rb-size: 1.1rem; }
.bp-rarity-banner.is-compact.is-sr { --rb-size: 1.35rem; }
.bp-rarity-banner.is-compact.is-ssr { --rb-size: 1.6rem; }

.bp-rarity-banner.is-compact.is-ssr::before {
  inset: -30% -20%;
}

@media (prefers-reduced-motion: reduce) {
  .bp-deck-stage.is-banner > .bp-rarity-banner {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .bp-rarity-banner .bp-rb-code {
    animation: none;
  }
}