/* ============ Sorcerer's Den — arcane theme v2 ============ */

/* 実カードのカード名と同じ書体（Sorcery: Contested Realm はFantaisie Artistiqueを使用） */
@font-face {
  font-family: "Fantaisie Artistique";
  src: url("../fonts/fantaisie-artistique.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-0: #0a0710;
  --bg-1: #161022;
  --panel: #1b1526;
  --panel-edge: #3a2d52;
  --ink: #e8e0ce;
  --ink-dim: #a99f8a;
  --gold: #c9a227;
  --gold-soft: #e4c96a;
  --gold-pale: #f4e3a5;
  --accent: #8f6fd8;
  /* 公式サイトからピックしたエレメント色 */
  --air: rgb(174, 181, 208);
  --earth: rgb(158, 159, 113);
  --fire: rgb(248, 116, 19);
  --water: rgb(27, 222, 255);
  --danger: #c0563f;
  --serif-en: "Cinzel", serif;
  --serif-display: "Cinzel Decorative", serif;
  --serif-ja: "Hina Mincho", serif; /* 日本語テキスト・セクションタイトル用 */
  --serif-en-text: "Shippori Mincho", serif; /* 英文ブロック用: Latin グリフが実カードのテキストに近く、Hina Mincho より字面が大きい */
  --serif-card: "Fantaisie Artistique", "Cinzel", serif; /* カード名専用（実カード準拠） */
  /* 角丸スケール（アルファカット基準）
     実カード画像の焼き込み角丸は実測 26.8px/380px幅 ＝ 幅の7.05%・高さの5.05%
     （63×88mm換算で約4.4mm ＝ MTG Alpha風のカド丸）。x/y比を保つと正円弧になる */
  --radius-card: 7.05% / 5.05%;
  --radius-lg: 24px;  /* パネル: 詳細画面のカード幅340px時の角丸(≒24px)と揃える */
  --radius-md: 12px;  /* 入力欄・リスト項目・小ボックス */
  --radius-sm: 8px;   /* ボタン・候補リスト項目 */
  --radius-xs: 4px;   /* 極小バッジ */
}

/* 英語モードはほぼ全文が英語のため、UI含め従来の英文向け書体へ戻す（--serif-ja 参照箇所すべてに効く） */
html:lang(en) {
  --serif-ja: var(--serif-en-text);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--serif-ja);
  font-size: 16px;
  line-height: 1.8;
  background: var(--bg-0);
  /* 長いURL・英単語が狭い画面で横はみ出しを起こさないよう全体で折り返す（継承される） */
  overflow-wrap: break-word;
}

/* 背景: 固定レイヤーにオーロラ状のグラデーション（fixed背景のジャンク回避） */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 700px at 18% -12%, #2c1e5266 0%, transparent 60%),
    radial-gradient(900px 620px at 86% 8%, #43206144 0%, transparent 62%),
    radial-gradient(1300px 900px at 50% 115%, #1a2a5530 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, #0c0915 45%, var(--bg-0) 100%);
}
/* 周辺減光（ヴィネット） */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, #05030acc 100%);
}

/* 星屑のヴェール（2層でゆっくり瞬く） */
.veil, .veil::after {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.veil {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, #d9cfae99 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 12%, #ffffff66 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 64%, #c9a22777 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 78%, #ffffff55 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 8% 92%, #c9a22766 50%, transparent 51%);
  animation: twinkle 9s ease-in-out infinite alternate;
}
.veil::after {
  content: "";
  background-image:
    radial-gradient(1.2px 1.2px at 48% 38%, #d9cfae77 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 88%, #ffffff44 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 52%, #ffffff44 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 60% 82%, #c9a22755 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 34%, #ffffff44 50%, transparent 51%);
  animation: twinkle 13s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle {
  0% { opacity: .35; }
  50% { opacity: 1; }
  100% { opacity: .55; }
}

header, main, footer { position: relative; z-index: 1; }
.site-header { z-index: 20; }

/* ---------- header ---------- */
.site-header {
  text-align: center;
  padding: 52px 16px 30px;
}
.lang-toggle {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  overflow: hidden;
  background: #1d1630cc;
  backdrop-filter: blur(4px);
  z-index: 30;
}
.lang-toggle button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim);
  font-family: var(--serif-ja);
  font-size: 12.5px;
  padding: 6px 14px;
  transition: background .15s, color .15s;
}
.lang-toggle button.active { background: #2c2145; color: var(--gold-soft); }

.site-title {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  text-decoration: none;
  font-family: var(--serif-display);
  font-size: clamp(30px, 5.5vw, 48px);
  letter-spacing: 0.05em;
}
.site-mark {
  width: clamp(58px, 8vw, 82px);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px #c9a22726) drop-shadow(0 4px 8px #00000099);
}
.title-main {
  background: linear-gradient(180deg, var(--gold-pale) 8%, var(--gold-soft) 45%, #b08a1e 85%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px #c9a22733) drop-shadow(0 2px 3px #000000cc);
}
.title-orn {
  font-size: 0.5em; color: var(--accent);
  text-shadow: 0 0 14px #8f6fd888;
  animation: ornPulse 4.5s ease-in-out infinite;
}
@keyframes ornPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 560px) {
  .site-title {
    gap: 8px;
    letter-spacing: 0.02em;
  }
  .site-mark { width: 50px; }
  .title-orn { display: none; }
}

/* タイトル下の飾り罫 */
.title-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 460px; margin: 10px auto 8px;
  color: var(--gold); font-size: 11px;
}
.title-rule::before, .title-rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, #c9a22788);
}
.title-rule::after { background: linear-gradient(90deg, #c9a22788, transparent); }

.site-sub {
  margin: 4px 0 26px;
  color: var(--ink-dim);
  font-size: 13.5px;
  letter-spacing: 0.16em;
}

/* ---------- search ---------- */
.search-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center;
  color: var(--gold); pointer-events: none;
  filter: drop-shadow(0 0 6px #c9a22755);
}
.search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: none; border: none; border-radius: 50%;
  color: var(--ink-dim); cursor: pointer;
  transition: color .15s, background .15s;
}
.search-clear:hover { color: var(--gold-soft); background: #ffffff14; }
#search:placeholder-shown ~ .search-clear { display: none; }
#search {
  width: 100%;
  padding: 16px 48px 16px 50px;
  font-family: var(--serif-ja);
  font-size: 16.5px;
  color: var(--ink);
  background: linear-gradient(180deg, #221a33ee, #181126ee);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-md);
  outline: none;
  box-shadow: 0 8px 32px #00000077, inset 0 1px 0 #ffffff0d;
  transition: border-color .25s, box-shadow .25s;
}
#search:focus {
  border-color: #c9a227aa;
  box-shadow: 0 8px 36px #c9a22726, 0 0 0 3px #c9a22718, inset 0 1px 0 #ffffff10;
}
#search::placeholder { color: #6f6653; }

#suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px;
  list-style: none;
  background: #1c152ef2;
  border: 1px solid #4a3a6a;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px #000000cc;
  backdrop-filter: blur(10px);
  z-index: 50;
  max-height: 420px;
  overflow-y: auto;
  text-align: left;
  animation: rise .18s ease both;
}
#suggestions li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .12s, border-color .12s;
}
#suggestions li.active, #suggestions li:hover {
  background: #2c2145;
  border-left-color: var(--gold);
}
#suggestions li { flex-wrap: nowrap; }
.sg-name { font-family: var(--serif-card); font-size: 16px; white-space: nowrap; }
.sg-ja { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.sg-meta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 560px) { .sg-meta .sg-type { display: none; } }
.sg-meta .sg-th {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 8px; min-width: 56px; justify-content: flex-end;
}
/* ピップは記号サイズぴったりの箱にして字詰めを詰める（18px箱だと間延びする） */
.sg-meta .th { width: 12px; height: 18px; min-width: 12px; margin: 0; vertical-align: 0; }
.sg-meta .mana { width: 18px; height: 18px; min-width: 18px; vertical-align: 0; }
.sg-meta .th svg { width: 10.5px; height: 10.5px; }
.sg-meta .mana { font-size: 11px; }
.sg-ja { color: var(--gold-soft); font-size: 14px; }
.sg-meta { margin-left: auto; color: var(--ink-dim); font-size: 12px; white-space: nowrap; }
.sg-badges { display: inline-flex; gap: 4px; }
.sg-none { color: var(--ink-dim); padding: 10px 12px; }

.data-status { color: #6f6653; font-size: 12px; margin-top: 14px; letter-spacing: 0.08em; }

/* ---------- layout / panels ---------- */
#main { max-width: 1060px; margin: 0 auto; padding: 8px 18px 60px; }

.panel {
  position: relative;
  background: linear-gradient(170deg, #201936f0, #171126f0);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 20px 0;
  box-shadow: 0 12px 40px #00000059, inset 0 1px 0 #ffffff08;
  animation: rise .45s ease both;
}
/* コーナーの金の飾り枠（パネル角丸のアークを覆える大きさを確保） */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 38px; height: 38px;
  pointer-events: none; opacity: .75;
}
.panel::before {
  top: -1px; left: -1px;
  border-top: 1px solid #c9a22766; border-left: 1px solid #c9a22766;
  border-top-left-radius: var(--radius-lg);
}
.panel::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid #c9a22766; border-right: 1px solid #c9a22766;
  border-bottom-right-radius: var(--radius-lg);
}
#home .panel:nth-child(2) { animation-delay: .07s; }
#home .panel:nth-child(3) { animation-delay: .14s; }
#home .panel:nth-child(4) { animation-delay: .21s; }
.card-layout > div:last-child .panel:nth-child(2) { animation-delay: .07s; }
.card-layout > div:last-child .panel:nth-child(3) { animation-delay: .14s; }
.card-layout > div:last-child .panel:nth-child(4) { animation-delay: .21s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.panel-title {
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--gold-soft);
  letter-spacing: 0.14em;
  padding-bottom: 10px;
  position: relative;
}
.panel-title::before { content: "❖ "; color: var(--accent); font-size: .85em; }
.panel-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, #c9a22766, #3a2d5266 45%, transparent);
}

.intro-panel p { margin: 8px 0; color: #cfc6b2; }

/* 統計カード */
.stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.stat {
  flex: 1; min-width: 130px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: linear-gradient(180deg, #261d42, #1c1533);
  border: 1px solid var(--panel-edge);
  padding: 14px 18px 10px;
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-align: center;
}
.stat b {
  font-family: var(--serif-en);
  font-size: 30px; line-height: 1.2;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-soft) 60%, #b08a1e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* クイックフィルター */
.fgroup {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0; flex-wrap: wrap;
}
.fgroup-label {
  flex: 0 0 92px;
  color: var(--ink-dim); font-size: 12px; letter-spacing: .12em;
  padding-top: 5px;
}
.fbtns { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 220px; }
.fbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #221a37;
  border: 1px solid var(--panel-edge);
  color: var(--ink-dim);
  font-family: var(--serif-en-text); /* ボタンの中身はゲーム用語＝英語表記のため英文用書体 */
  font-size: 12.5px;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.fbtn:hover { border-color: #6b5a92; color: var(--ink); }
.fbtn.on {
  background: linear-gradient(180deg, #3a2d5c, #2c2145);
  border-color: var(--gold);
  color: var(--gold-soft);
  box-shadow: 0 0 12px #c9a22722, inset 0 1px 0 #ffffff10;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
  border: 1px solid #00000055;
  box-shadow: inset 0 -1px 2px #00000044;
}
.dot.air { background: var(--air); }
.dot.earth { background: var(--earth); }
.dot.fire { background: var(--fire); }
.dot.water { background: var(--water); }
.dot.none { background: #6f6653; }

.fbtn.zero {
  opacity: .35;
}
.fbtn.zero:hover { border-color: var(--panel-edge); color: var(--ink-dim); }

/* 該当0枚の空状態: カード1枚分の高さを確保して誤認を防ぐ */
.browse-empty {
  display: flex; align-items: center; gap: 22px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ghost-card {
  flex: 0 0 148px;
  aspect-ratio: 3 / 4.2;
  border: 1px dashed var(--panel-edge);
  border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  color: #4a3a6a; font-size: 30px;
  background: radial-gradient(closest-side, #221a3766, transparent);
}
.be-main { color: var(--ink); font-size: 15.5px; margin: 0 0 6px; }
.be-hint { color: var(--ink-dim); font-size: 13px; margin: 0; }

.browse-meta {
  display: flex; align-items: baseline; gap: 16px;
  margin: 16px 0 4px;
  color: var(--gold-soft); font-size: 14px;
}
.browse-hint { color: var(--ink-dim); font-style: italic; font-size: 13.5px; margin: 14px 0 2px; }
#browse-results .pick-row { margin-top: 14px; }
.pick-missing {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 3 / 4.2; padding: 12px;
  border-radius: var(--radius-card);
  border: 1px dashed var(--panel-edge);
  background: radial-gradient(closest-side, #241b3a, #171126);
  color: var(--ink-dim);
  font-family: var(--serif-en); font-size: 14px;
}
.more-wrap { text-align: center; margin-top: 18px; }
.more-btn {
  font-family: var(--serif-ja);
  background: none;
  border: 1px solid var(--panel-edge);
  color: var(--ink);
  font-size: 13.5px;
  padding: 8px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.more-btn:hover { border-color: var(--gold); color: var(--gold-soft); box-shadow: 0 4px 14px #00000055; }

/* ピックアップ: カード画像ギャラリー */
.pick-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 18px 14px;
}
@media (max-width: 520px) {
  .pick-row { grid-template-columns: repeat(2, 1fr); }
}
.pick-card { display: block; text-decoration: none; text-align: center; }
.pick-card img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 26px #00000099, 0 0 0 1px #3a2d52;
  transition: transform .28s ease, box-shadow .28s ease;
}
.pick-card:hover img {
  transform: translateY(-7px) scale(1.03) rotate(-.6deg);
  box-shadow: 0 22px 44px #000000cc, 0 0 26px #c9a22730, 0 0 0 1px #c9a22766;
}
.pick-name {
  display: block; margin-top: 9px;
  color: var(--ink); font-size: 13px; line-height: 1.4;
  transition: color .2s;
}
.pick-card:hover .pick-name { color: var(--gold-soft); }
.pick-name .en { display: block; color: #6f6653; font-size: 11px; font-family: var(--serif-en); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: #241b3a;
  border: 1px solid var(--panel-edge);
  color: var(--ink);
  font-family: var(--serif-ja);
  font-size: 13px;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.chip:hover {
  border-color: var(--gold);
  background: #2c2145;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #00000066;
}
.chip .en { color: var(--ink-dim); font-size: 11.5px; margin-left: 5px; }

/* ---------- card view ---------- */
/* 左カラム（グリッドアイテム）は右カラムと同じ高さに伸ばし、
   その内側の .card-side が下端まで追従できるようにする */
.card-layout { display: grid; grid-template-columns: 340px 1fr; gap: 24px; }
/* グリッド子要素の min-width:auto を打ち消し、
   長い英語カード名やFAQ内URLが右カラム幅を押し広げないようにする */
.card-layout > div { min-width: 0; }
/* タブレット帯では画像カラムを縮めて2カラムを維持する */
@media (max-width: 860px) {
  .card-layout { grid-template-columns: minmax(230px, 300px) 1fr; gap: 20px; }
}
@media (max-width: 700px) { .card-layout { grid-template-columns: 1fr; } }

/* margin-top はパネルの上マージン(20px)と同値。
   2カラム時はカード画像の天面を右カラム先頭パネルに揃え、
   1カラム時（スマホ）も各ブロック共通の20pxリズムを保つ */
.card-side { position: sticky; top: 18px; margin-top: 20px; }
@media (max-width: 700px) {
  /* 1カラム表示では追従せず、画像は2カラム時と同じ幅上限で中央寄せ
     （全幅にすると画面1枚分を画像が占有してしまう） */
  .card-side { position: static; max-width: 340px; margin: 20px auto 0; }
}
.card-image-box img {
  width: 100%; border-radius: var(--radius-card);
  box-shadow: 0 18px 48px #000000cc, 0 0 0 1px #3a2d52;
  transition: transform .35s ease, box-shadow .35s ease;
}
.card-image-box:not(.landscape):hover img {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 26px 60px #000000dd, 0 0 34px #c9a22726, 0 0 0 1px #c9a22755;
}
/* Siteカードは物理カードが横向きのため、90度回転して表示する */
.card-image-box.landscape { position: relative; aspect-ratio: 4.2 / 3; } /* 絶対配置の基準 */
.card-image-box.landscape img {
  position: absolute; top: 50%; left: 50%;
  width: 71.4%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.card-image-missing {
  aspect-ratio: 3 / 4.2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px dashed var(--panel-edge);
  background: radial-gradient(closest-side, #241b3a, #171126);
  color: var(--ink-dim);
  font-family: var(--serif-en);
  font-size: 20px;
}
.img-note { color: #6f6653; font-size: 11.5px; text-align: center; margin-top: 10px; }

.card-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.card-name-ja {
  font-size: 31px; font-weight: 800; margin: 0; line-height: 1.3;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-soft) 65%, #c29a2a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-name-en { font-family: var(--serif-card); font-size: 21px; color: var(--ink-dim); }
/* 英語モードの見出し（実カードと同じ書体で大きく） */
.card-name-latin {
  font-family: var(--serif-card);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: 0.02em;
}

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; align-items: center; }
.badge {
  font-size: 12.5px; padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, #271e44, #1e1637);
  color: var(--ink);
  letter-spacing: 0.06em;
  font-family: var(--serif-en-text); /* バッジの中身はゲーム用語＝英語表記のため英文用書体 */
}
.badge.rarity { color: var(--gold-soft); border-color: #c9a22755; }

.th { /* element symbol（公式準拠: 丸囲みなし・記号自体をエレメント色で着色） */
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  vertical-align: -4px; margin: 0 1px;
}
.th svg { width: 15px; height: 15px; display: block; filter: drop-shadow(0 1px 1px #00000066); }
.th.air { color: var(--air); }
.th.earth { color: var(--earth); }
.th.fire { color: var(--fire); }
.th.water { color: var(--water); }
/* フィルターボタン内の元素記号（円なし・エレメント色の線画） */
.fsym { display: inline-flex; }
.fsym svg { width: 13px; height: 13px; display: block; }
.fsym.air { color: var(--air); }
.fsym.earth { color: var(--earth); }
.fsym.fire { color: var(--fire); }
.fsym.water { color: var(--water); }
.badge { display: inline-flex; align-items: center; gap: 6px; }
.badge .th { width: 17px; height: 17px; margin: 0; vertical-align: 0; }
/* 連続するピップは字詰めを詰める（gap 6px はピップ⇔テキスト間には残す） */
.badge .th + .th { margin-left: -4px; }
.badge .th svg { width: 10px; height: 10px; }
.mana {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; border-radius: 50%; padding: 0 4px;
  background: linear-gradient(180deg, #453a61, #322a4a);
  color: #efe8d8; font-size: 12px; font-weight: 600;
  vertical-align: -4px; margin: 0 1px;
  border: 1px solid #5a4b7e;
  box-shadow: inset 0 1px 0 #ffffff14, 0 1px 2px #00000055;
}
.statline { display: flex; gap: 18px; margin: 6px 0 0; color: var(--ink-dim); font-size: 14px; flex-wrap: wrap; }
.statline b { color: var(--ink); font-size: 16px; font-family: var(--serif-en); }

.rules-block { margin-top: 18px; }
.rules-label {
  font-size: 11.5px; letter-spacing: 0.22em; color: var(--accent);
  margin-bottom: 7px; text-transform: uppercase;
}
.rules-ja {
  background: linear-gradient(170deg, #241d3a, #201a33);
  border-left: 3px solid var(--gold);
  padding: 15px 19px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 16.5px;
  white-space: pre-wrap;
  box-shadow: inset 0 1px 0 #ffffff08;
}
.rules-en {
  color: #b6ac96; font-size: 14.5px; white-space: pre-wrap;
  padding: 12px 19px; border-left: 3px solid #3a2d52;
  font-family: var(--serif-en-text); /* 英文のみのブロックなので日本語用書体にしない */
}
.rules-none {
  color: var(--ink-dim); font-style: italic;
  padding: 12px 19px; border-left: 3px solid #3a2d52; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: #201a32;
}
.updated-badge {
  display: inline-block; background: #5a2d2d; color: #f0c9a0;
  font-size: 11px; border-radius: var(--radius-xs); padding: 1px 7px; margin-right: 6px;
  vertical-align: 2px;
}
/* ルール変更履歴 */
.errata-item {
  border-left: 3px solid #8f6fd866;
  padding: 8px 16px;
  margin: 8px 0;
  background: #1f1833;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.errata-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 13px; }
.errata-date {
  font-family: var(--serif-en);
  color: var(--gold-soft);
  letter-spacing: .06em;
}
.errata-head a { color: #a99ad4; }
.errata-head a:hover { color: var(--gold-soft); }
.errata-eff { color: #6f6653; font-size: 11.5px; }
.errata-note { margin: 6px 0 2px; color: #cfc6b2; font-size: 14px; }

.type-text { color: var(--ink-dim); font-style: italic; margin-top: 14px; }
.flavor-text {
  color: #9a8f77; font-style: italic; margin-top: 8px; white-space: pre-wrap;
  padding-left: 16px; position: relative;
}
.flavor-text::before {
  content: "❝"; position: absolute; left: 0; top: 0;
  color: #c9a22755; font-style: normal;
}
.card-meta { color: #6f6653; font-size: 12.5px; margin-top: 16px; }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid #3a2d5266; border-radius: var(--radius-md);
  margin: 10px 0; overflow: hidden;
  background: linear-gradient(180deg, #211a37, #1d1631);
  transition: border-color .2s;
}
.faq-item:hover { border-color: #4a3a6a; }
.faq-item summary {
  cursor: pointer; padding: 12px 16px;
  font-weight: 600; color: #e8ddc0;
  list-style: none; position: relative; padding-right: 40px;
  transition: background .15s;
}
.faq-item summary:hover { background: #251d3f; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "✦"; position: absolute; right: 16px; top: 12px;
  color: var(--accent); transition: transform .25s, color .25s;
}
.faq-item[open] summary::after { transform: rotate(90deg); color: var(--gold); }
.faq-badge {
  display: inline-block;
  font-size: 10.5px; letter-spacing: .1em;
  padding: 1px 9px; border-radius: var(--radius-xs);
  margin-right: 9px; vertical-align: 1.5px;
}
.faq-badge.official { background: #c9a22722; color: var(--gold-soft); border: 1px solid #c9a22755; }
.faq-badge.judge { background: #8f6fd822; color: #b7a4e8; border: 1px solid #8f6fd855; }
.faq-a a { color: #8f83b8; }
.faq-a a:hover { color: var(--gold-soft); }
.faq-a {
  padding: 4px 16px 14px; color: #cfc6b2; white-space: pre-wrap;
  border-top: 1px dashed #3a2d5266; font-size: 15px;
}
.faq-a::before { content: "A. "; color: var(--accent); font-family: var(--serif-en); }
.faq-qdate { display: block; text-align: right; color: #6f6653; font-size: 11px; margin-top: 6px; font-family: var(--serif-en); }
/* 和訳FAQに併記する英語原文（折りたたみ） */
.faq-orig { margin-top: 10px; border-top: 1px dashed #3a2d5266; padding-top: 8px; }
.faq-orig summary {
  cursor: pointer; color: #8f83b8; font-size: 12px;
  font-family: var(--serif-en); list-style: none; user-select: none;
}
.faq-orig summary::-webkit-details-marker { display: none; }
.faq-orig summary::before { content: "▸ "; color: var(--accent); }
.faq-orig[open] summary::before { content: "▾ "; }
.faq-orig summary:hover { color: var(--gold-soft); }
/* 原文は長文になるため、小文字がスモールキャップスの Cinzel ではなく英文本文用の書体で */
.faq-orig-body { color: #a99f8c; font-size: 13.5px; margin-top: 6px; font-family: var(--serif-en-text); }
.faq-source { color: #6f6653; font-size: 12px; margin-top: 10px; }
.faq-source a { color: #8f83b8; }
.none-note { color: var(--ink-dim); font-style: italic; }

/* ---------- Curio 目撃録 ----------
   公式未発表の絵違い版。図鑑ではなく「噂・目撃記録」の体裁。
   入口はパネル右下の封蝋✦のみ: 全カードに置くが装飾に紛れる暗さにし、
   目撃例のあるカードだけかすかに明滅する。パネルは押して初めて開く */
.curio-seal {
  position: absolute; right: 14px; bottom: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim); opacity: .28; font-size: 15px; line-height: 1;
  padding: 4px 7px;
  transition: opacity .25s, color .25s, transform .25s;
}
.curio-seal:hover, .curio-seal:focus-visible { opacity: .95; color: var(--gold-soft); transform: scale(1.15); }
.curio-seal.lit { color: var(--gold-soft); animation: curio-glint 3.2s ease-in-out infinite; }
.curio-seal.lit:hover, .curio-seal.lit:focus-visible { animation: none; opacity: 1; }
@keyframes curio-glint {
  0%, 100% { opacity: .4; }
  50% { opacity: .95; }
}
.sg-curio { color: var(--gold-soft); font-size: 11px; }

.curio-title::before { content: "✦ "; color: var(--gold); }
.curio-intro { color: var(--ink-dim); font-style: italic; margin: 4px 0 16px; }
.curio-entry { margin: 14px 0; }
.curio-set {
  display: inline-block; font-size: 11.5px; color: var(--gold-soft);
  border: 1px solid #c9a22744; border-radius: 999px; padding: 1px 10px;
  letter-spacing: .06em;
}
.curio-diff { margin: 6px 0 0; color: #cfc6b2; }
.curio-evidence { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.curio-photo {
  margin: 0; background: #f5f1e6; border-radius: 4px; padding: 8px 8px 6px;
  width: 180px; box-shadow: 0 6px 18px #00000059;
}
.curio-photo img { width: 100%; border-radius: 2px; display: block; }
.curio-photo figcaption { font-size: 11px; color: #5a5347; padding-top: 6px; line-height: 1.5; }
.curio-photo figcaption a { color: #7a6a3d; }
.curio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 18px; }
.curio-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed #4a4162; border-radius: 4px; width: 180px; min-height: 96px;
  padding: 12px; text-align: center;
  color: var(--ink-dim); font-size: 12px; line-height: 1.6;
}
.curio-empty-star { color: #6a5f8a; font-size: 17px; }
.curio-pending { color: #6f6653; font-size: 12.5px; margin: 0; }
.curio-refs { color: #6f6653; font-size: 12px; margin: 16px 0 0; }
.curio-refs a { color: #8f83b8; }
.curio-disclaimer { color: #6f6653; font-size: 11.5px; margin: 8px 0 0; font-style: italic; }

/* ---------- Q&A board ---------- */
.qa-note { color: var(--ink-dim); font-size: 13.5px; margin: 4px 0 14px; }
#qa-board { min-height: 120px; }

/* 誤訳報告リンク（日本語訳ブロックの直下・控えめに右寄せ） */
.report-link { margin: 6px 0 0; font-size: 12px; text-align: right; }
.report-link a { color: #8f83b8; transition: color .15s; }
.report-link a:hover { color: var(--gold-soft); }

.btn-gold {
  font-family: var(--serif-ja);
  background: linear-gradient(180deg, #e9c765, #c9a227 55%, #a3821e);
  color: #201803; font-weight: 600; font-size: 14.5px;
  border: none; border-radius: var(--radius-sm); padding: 9px 28px; cursor: pointer;
  box-shadow: 0 4px 16px #c9a22740, inset 0 1px 0 #ffffff55;
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.btn-gold:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 7px 20px #c9a22750, inset 0 1px 0 #ffffff55;
}
.btn-gold:active { transform: none; }

/* ---------- footer ---------- */
.site-footer {
  max-width: 1060px; margin: 0 auto; padding: 30px 18px 48px;
  color: #6f6653; font-size: 12.5px; text-align: center;
  position: relative;
}
.site-footer::before {
  content: "✦";
  display: block;
  color: #c9a22755; font-size: 11px;
  margin-bottom: 18px;
  position: relative;
}
.site-footer a { color: #8f83b8; transition: color .15s; }
.site-footer a:hover { color: var(--gold-soft); }
.linklike {
  background: none; border: none; color: #8f83b8; cursor: pointer;
  font-family: var(--serif-ja); font-size: 12.5px; text-decoration: underline; padding: 0;
  transition: color .15s;
}
.linklike:hover { color: var(--gold-soft); }
.cache-age { color: #6f6653; }

::selection { background: #c9a22755; }

/* ---------- responsive ---------- */
/* ワイド画面: 本文カラムを広げ、ピックアップ／検索結果のカード列数を増やす */
@media (min-width: 1400px) {
  #main, .site-footer { max-width: 1180px; }
}

/* スマホ: 余白と装飾を圧縮して、限られた幅を本文に使う */
@media (max-width: 520px) {
  .site-header { padding: 46px 14px 22px; }
  /* タイトルは1行に収める（2行に折り返すと画面上部を占有しすぎる） */
  .site-title { gap: 10px; font-size: clamp(22px, 7vw, 30px); }
  .site-sub { font-size: 12px; letter-spacing: 0.1em; margin-bottom: 20px; }
  #main { padding: 8px 12px 48px; }
  .panel { padding: 20px 16px; margin: 16px 0; }
  .card-name-ja { font-size: 26px; }
  .card-name-en { font-size: 18px; }
  .card-name-latin { font-size: 31px; }
  .rules-ja { padding: 13px 15px; }
  .site-footer { padding: 24px 14px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}