/* =============================================================================
   PATCHWORK DEAD × TapNow LP — characters（9人の紹介）
   ========================================================================== */
/* 批評R2/R3: 均一な3列グリッドが単調 → ネネ・ルカを先頭に大きくフィーチャー。
   残り7人は 4列 + 3列 の2段（12列グリッドで span3×4／span4×3）にし、
   最後の1枚だけ浮くレイアウト（2+3+3+1）を解消する。 */
.cast-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-6);
}
.cast-grid > li:nth-child(1), .cast-grid > li:nth-child(2) { grid-column: span 6; }
.cast-grid > li:nth-child(n+3):nth-child(-n+6) { grid-column: span 3; } /* 3,4,5,6 → 4枚の段 */
.cast-grid > li:nth-child(n+7) { grid-column: span 4; }                /* 7,8,9 → 3枚の段 */
@media (max-width: 1024px) {
  .cast-grid { grid-template-columns: repeat(2, 1fr); }
  .cast-grid > li { grid-column: span 1 !important; }
}
@media (max-width: 640px)  { .cast-grid { grid-template-columns: 1fr; } .cast-grid > li { grid-column: span 1 !important; } }

.cast-card {
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--e-2);
  border-top: 3px solid var(--cast, var(--accent));
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .cast-card:hover { transform: translateY(-6px); } }

/* ユーザー指示（切り抜き・シート表示は廃止）: 元の立ち絵
   （assets/chars/<asset>-orig.webp）だけを常に表示する。撮影台のソフトな
   グレーをカードの意匠として取り込み、「写真の台紙」のように見せる
   （暗いテーマの中にポッと明るい額装ができる）。箱は絵の縦横比（約0.58・
   縦長）に合わせて余白を消す。 */
.cast-visual {
  position: relative; aspect-ratio: 0.58;
  background: linear-gradient(175deg, #EDEAE1, #DCD5C4);
  padding: var(--s-3);
}
.cast-visual img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 0; border-radius: var(--r-sm);
  box-shadow: 0 1px 0 rgba(13,10,8,.06) inset, 0 10px 22px -12px rgba(13,10,8,.5);
}

/* フィーチャー2枚（ネネ・ルカ）: 箱を横広に保ったまま cover＋上寄せで
   顔まわりを大きく見せる（全身の contain だと余白が出るため） */
.cast-grid > li:nth-child(-n+2) .cast-visual { aspect-ratio: 3/4; padding: 0; }
.cast-grid > li:nth-child(-n+2) .cast-visual img {
  object-fit: cover; object-position: top center; border-radius: 0;
  box-shadow: none;
}
@media (max-width: 1024px) {
  .cast-grid > li:nth-child(-n+2) .cast-visual { aspect-ratio: 4/5; }
}

.cast-body { padding: var(--s-5); display: grid; gap: var(--s-3); flex: 1; }
.cast-name-row { display: flex; align-items: baseline; gap: var(--s-3); }
.cast-name { font-size: 1.3rem; }
.cast-kana { color: var(--ink-muted); font-size: var(--t-caption); }

/* 役どころ: 名前のすぐ下に置く、静かな小ラベル（.label・.cast-kana と同系統のトーン）
   WCAG AA 対応: --ink-faint（umber-400）は --surface 上で約4.14:1と AA(4.5:1)未達のため、
   --cast-line と同じ --ink-muted（umber-300）を使用（--surface 上で約8.3:1）。 */
.cast-role {
  font-size: var(--t-label); letter-spacing: .06em; color: var(--ink-muted);
}

.cast-line { color: var(--ink-muted); }
.cast-line b { color: var(--ink); font-weight: 700; }

.cast-traits { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.cast-trait {
  font-size: var(--t-caption); color: var(--ink-muted);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 2px var(--s-3);
}

.cast-still { margin-top: var(--s-2); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/9; }
.cast-still figcaption { padding: var(--s-2) 0 0; font-size: var(--t-caption); color: var(--ink-faint); }

/* ---- 出ない3人（元の立ち絵で、ほかの9人と統一した見せ方） --------------------- */
.cast-offscreen { margin-top: var(--s-8); }
.cast-offscreen-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.cast-offscreen-head h3 { font-size: var(--t-title); }
.cast-off-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 640px) { .cast-off-row { grid-template-columns: 1fr; } }
.cast-off-card {
  background: var(--surface); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--e-1);
}
.cast-off-card .cast-visual { aspect-ratio: 0.72; }
.cast-off-card .cast-off-body { padding: var(--s-4); display: grid; gap: var(--s-2); }
.cast-off-card .cast-name { font-size: 1rem; }
.cast-off-card .cast-line { font-size: var(--t-caption); color: var(--ink-muted); }
/* レンだけ元絵の撮影台が黒背景（ほかは明るいグレー）。台紙を明るくすると絵が
   浮いてしまうため、暗い面のまま統一しつつ、輪郭がはっきり分かるよう縁取りと
   本人の配色（青髪・ミントのパッチ）に寄せた縁色を足す。 */
.cast-off-card[data-dark-bg="true"] .cast-visual {
  background: linear-gradient(175deg, #1c2430, #0d1218);
  border: 1px solid color-mix(in srgb, var(--sky-400) 45%, transparent);
}
.cast-off-card[data-dark-bg="true"] .cast-visual img { box-shadow: none; }