/* chars.css — キャラ画像の表示（サイト設計図v3 ⑦-2 が正）
 *
 *   場面                              画像
 *   -----------------------------------------------------------------------
 *   結果ページ・スマホ幅（1カラム）     顔版 _face（600×600）
 *   結果ページ・PC幅（2カラム左sticky） 全身 _md（幅800）。Retina／大画面は _lg を srcset
 *   一覧・サムネイル・ボタン類          全身 _sm（幅400）
 *
 * どれを読むかは <picture> の media／srcset（js/chars.js が jobs.json から組む）。
 * 切替条件は theme.css 冒頭の1本：(min-width: 900px) and (min-height: 600px) and (orientation: landscape)
 *
 * glow：全42体。明度を持ち上げる方式は不採用。drop-shadow を3段重ね、強度は theme.css の変数2つで制御。
 *   光36（.is-light）… 温白。--glow-light（初期 0.35）
 *   闇6 （.is-dark） … 青灰（bg_result に合わせた白灰〜青灰）。--dark-glow（既定 0.7 に固定）
 *   光／闇の判定は jobs.json の dark に含まれるか（js/chars.js isDark）。
 * 顔版（スマホ幅）の丸い切り抜きは確定（2026-09-14）。
 */

/* ---- 結果ページの2カラム骨格 ---- */
.result-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.result-figure { position: relative; }
.result-body { min-width: 0; }

@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .result-layout {
    grid-template-columns: minmax(300px, 38%) 1fr;
    gap: clamp(24px, 4vw, 64px);
  }
  .result-figure {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100svh - 48px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
}

/* ---- キャラ本体 ---- */
.char-figure {
  margin: 0;
  display: grid;
  place-items: center;
  width: 100%;
}
.char-figure picture { display: contents; }
/* --char-scale：職業ごとの倍率。jobs.json images.scale[和名] を js/chars.js が figure に載せる（未指定＝1） */
.char-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* 結果ページ・スマホ幅（<picture> が顔版を選ぶ側）＝丸く切って中央に（確定）。PC 幅では全身なので解除 */
.char-figure[data-context="result"] .char-img {
  width: calc(min(62vw, 300px) * var(--char-scale, 1));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: radial-gradient(circle at 50% 40%, rgba(212, 175, 55, 0.10), rgba(4, 7, 15, 0) 70%);
}
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  /* PC・全身＝高さ基準で揃える。幅は auto、max-width で溢れ止め（contain なので潰れない） */
  .char-figure[data-context="result"] .char-img {
    height: calc(min(78vh, 900px) * var(--char-scale, 1));
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
    background: none;
  }
}

/* ---- glow ---- */
/* 光36：温白 */
.char-figure.is-light .char-img {
  filter:
    drop-shadow(0 0  6px rgb(255 244 222 / calc(0.55 * var(--glow-light))))
    drop-shadow(0 0 18px rgb(250 232 196 / calc(0.40 * var(--glow-light))))
    drop-shadow(0 0 44px rgb(235 210 160 / calc(0.32 * var(--glow-light))));
}
/* 闇6：青灰 */
.char-figure.is-dark .char-img {
  filter:
    drop-shadow(0 0  6px rgb(180 190 220 / calc(0.55 * var(--dark-glow))))
    drop-shadow(0 0 18px rgb(160 172 210 / calc(0.40 * var(--dark-glow))))
    drop-shadow(0 0 44px rgb(130 145 195 / calc(0.32 * var(--dark-glow))));
}

/* ---- 全身カード（タップで開く・js/card_viewer.js） ----
 * 正＝シェア文面 v1-2 §5。画像は縦 1080×1350（gen_cards.js）。画面の高さに収め、下に「画像を保存」と「閉じる」 */
.card-trigger { cursor: zoom-in; }
.card-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
html.card-open { overflow: hidden; }
.card-viewer {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border: 0;
  background: rgba(3, 5, 12, 0.97);
  color: var(--fg);
}
.card-viewer[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.card-viewer::backdrop { background: rgba(3, 5, 12, 0.6); }
.card-viewer .card-frame { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.card-viewer .card-img {
  display: block;
  max-width: min(100%, 540px);
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 1080 / 1350;
  border-radius: 8px;
  background: #05070f;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.card-viewer .card-actions { flex: none; display: flex; gap: 12px; align-items: center; }
.card-viewer .card-close {
  appearance: none;
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}
.card-viewer .card-close:hover { color: var(--fg); border-color: var(--gold-dim); }

/* 闇に飲まれる時：闇落ち先の顔（丸・タップで全身カード） */
.dark-face { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; width: fit-content; }
.dark-face img { width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(180, 190, 220, 0.35); background: radial-gradient(circle at 50% 40%, rgba(180, 190, 220, 0.14), rgba(4, 7, 15, 0) 70%);
  filter: drop-shadow(0 0 6px rgb(180 190 220 / calc(0.5 * var(--dark-glow)))); }
.dark-face span { color: rgba(210, 216, 236, 0.95); font-family: var(--font-serif); letter-spacing: 0.08em; }
.dark-face span small { display: block; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--fg-muted); }

/* ---- 職業一覧 /chars/（_sm） ----
 * データは src/content/chars_list.json（build_chars.js の生成物）。段＝属性（赤→茶→紫→橙→黄→青）、段内＝モードの固定順、最下段＝闇6。
 * 列数：〜767px＝2列／768px〜＝3列／1200px〜＝4列（2026-09-18 確定。属性1段は 4+2 で折り返し、最終行の余りは中央寄せ）。
 * grid は最終行を中央に寄せられないので flex-wrap＋列幅の計算で組む（--cols・--gap）。行内の高さは flex の stretch で揃う。
 *
 * キャラの大きさ＝トップのギャラリー（index.html .gallery）と同じ方式。倍率は掛けない（2026-09-18 確定）。
 * 枠 .frame は列幅 × 567/400（4体の中で最も横に広い魔法使いの比率）で高さを決め、画像は高さ100%・幅auto・下寄せ・contain。
 * 切らない（overflow は既定）。横広の体は max-width で幅に収まる分だけ低くなる。名前ラベルは枠の外の固定行なので高さが揃う。 */
.char-grid {
  --cols: 2;
  --gap: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.char-grid > li {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  display: flex; /* カードを行の高さいっぱいに */
}
@media (min-width: 768px) { .char-grid { --cols: 3; --gap: 14px; } }
@media (min-width: 1200px) { .char-grid { --cols: 4; } }

.char-card {
  container-type: inline-size; /* 枠と画像の高さは列幅（cqw）から決める。% だと flex の min-height:auto で枠が画像の実寸まで伸びる */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
  text-decoration: none;
  color: var(--fg);
  padding: 10px 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
  transition: border-color 0.2s, transform 0.2s;
}
a.char-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
/* 枠の高さ＝内側の幅（100cqw − 左右 padding）× 567/400。aspect-ratio ではなく高さを明示するのは、
 * flex の子では aspect-ratio 由来の高さが「確定」扱いにならず、画像の height:100% が解決しないため */
.char-card { --frame-h: calc((100cqw - 12px) * 567 / 400); }
.char-card .frame {
  flex: none; /* 一言の行数で枠が縮むと名前の高さがカード間でずれる */
  width: 100%;
  height: var(--frame-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.char-card .thumb {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.char-card .name {
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  color: var(--gold-light);
}
.char-card .name small { display: block; color: var(--fg-muted); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.14em; margin-top: 2px; }
.char-card .desc {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--fg-muted);
  text-align: center;
  overflow-wrap: anywhere;
}
.char-card.is-light .thumb { filter: drop-shadow(0 0 6px rgb(255 244 222 / calc(0.5 * var(--glow-light)))) drop-shadow(0 0 16px rgb(235 210 160 / calc(0.35 * var(--glow-light)))); }
.char-card.is-dark  .thumb { filter: drop-shadow(0 0 6px rgb(180 190 220 / calc(0.5 * var(--dark-glow)))) drop-shadow(0 0 16px rgb(140 155 200 / calc(0.35 * var(--dark-glow)))); }
/* 闇6はリンクなし（設計図 §2：闇に独立ページは無い）。カード自体は光と同じ様式 */
.char-card.is-dark { cursor: default; }

/* 段の見出し：属性名＋属性紋章（黒単色 SVG を --glyph-ink で金にする。八芒星とは別系統）
 * 大きさ（2026-09-18 確定）：スマホ＝紋章 40px／属性名 24px、1200px〜＝64px／32px。段の間隔 45px（30px の1.5倍）で区切りを強く。
 * 見出しの右に金の細罫線（1px・不透明度 .3）を画面端まで伸ばす（負のマージンで .screen-inner の外へ。はみ出しは main で clip）。
 * 雷の紋章だけ SVG の余白が大きいので 1.25 倍（レイアウト上の箱は変えず、負のマージンで相殺） */
.chars.screen { overflow-x: clip; }
.char-section { margin: 0 0 45px; --emblem-size: 40px; --heading-size: 24px; }
@media (min-width: 1200px) { .char-section { --emblem-size: 64px; --heading-size: 32px; } }
.char-section h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 calc(50% - 50vw) 16px 0; /* 右端＝画面端 */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--heading-size);
  letter-spacing: 0.14em;
  color: var(--gold-light);
  --glyph-ink: var(--gold);
}
.char-section h2::after { content: ''; flex: 1; height: 1px; margin-left: 10px; background: rgba(212, 175, 55, 0.3); }
.char-section.is-dark h2::after { background: rgba(180, 190, 220, 0.3); }
.char-section h2 .emblem { display: block; width: var(--emblem-size); height: var(--emblem-size); flex: none; }
.char-section h2 .emblem[data-glyph="emblem_thunder"] { width: calc(var(--emblem-size) * 1.25); height: calc(var(--emblem-size) * 1.25); margin: calc(var(--emblem-size) * -0.125); }
.char-section h2 .emblem svg { display: block; width: 100%; height: 100%; }
.char-section h2 .emblem.is-fallback { display: none; }
.char-section.is-dark h2 { --glyph-ink: rgba(180, 190, 220, 0.85); color: rgba(200, 208, 230, 0.95); }
.char-section .lead { margin: -4px 0 12px; font-size: 0.85rem; color: var(--fg-muted); }

/* 並び替えトグル（属性順／あいうえお順） */
.sort-toggle { display: inline-flex; gap: 0; margin: 14px 0 26px; border: 1px solid var(--card-border); border-radius: 999px; padding: 3px; background: rgba(4, 7, 15, 0.45); }
.sort-toggle button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sort-toggle button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(212, 175, 55, 0.35), rgba(212, 175, 55, 0.14)); color: var(--gold-light); }
.sort-toggle button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }