/* Characters: an index of the whole cast. The covers say which game; the names do the rest. */
.cast-page { margin:0; color:var(--ink); background:var(--paper); font:400 var(--type-body)/1.6 var(--font-sans); }
.cast-page * { box-sizing:border-box; }
.cast-main { width:var(--page-width); margin:auto; }
:where(.cast-main) a { color:inherit; text-decoration:none; }
.cast-main :where(h1,h2,p) { margin:0; }

/* Header: the title and one sentence; the index below is the page. */
.cast-intro { max-width:44rem; padding-block:clamp(1.5rem,4vw,3.5rem) var(--space-12); }
.cast-intro h1 { font:500 var(--type-h1)/1.04 var(--font-sans); letter-spacing:var(--track-display); color:var(--ink-strong); }
.cast-intro h1 + p { max-width:32em; margin-top:var(--space-5); font-size:var(--type-lead); line-height:1.5; color:var(--ink-muted); }

/* Index: a quiet sidebar, then one group per world. */
.cast-layout { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:clamp(2rem,6vw,6rem); padding-top:var(--space-10); border-top:1px solid var(--line); }
.cast-index { position:sticky; top:var(--space-8); align-self:start; min-width:0; }
.cast-index label { display:block; margin-bottom:var(--space-2); font-size:var(--type-small); font-weight:500; color:var(--ink-strong); }
.cast-index input {
  width:100%; min-height:44px; padding:0 var(--space-3); border:1px solid var(--line-strong); border-radius:var(--radius-control);
  background:var(--paper-raised); color:var(--ink); font:var(--type-body) var(--font-sans);
  transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out);
}
.cast-index input:hover { border-color:var(--ink-muted); }
.cast-index input:focus { outline:none; border-color:var(--action); box-shadow:0 0 0 3px var(--action-soft); }
.cast-index > p { margin-block:var(--space-3) var(--space-6); color:var(--ink-muted); font-size:var(--type-small); }
#castWorlds { display:grid; gap:2px; }
#castWorlds a {
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); margin-inline:calc(-1 * var(--space-3));
  border-radius:var(--radius-control); color:var(--ink-muted); font-size:var(--type-body); line-height:1.3;
  transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);
  width:calc(100% + 2 * var(--space-3));
}
#castWorlds a:hover { background:var(--paper-sunk); color:var(--ink-strong); }
#castWorlds a[aria-current="true"] { background:var(--paper-sunk); color:var(--ink-strong); font-weight:500; }
#castWorlds a[aria-current="true"]::before { background:var(--current); }
#castWorlds a span { font-size:var(--type-small); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.cast-list { min-width:0; }
.cast-world + .cast-world { margin-top:var(--space-16); }
.cast-world > header { display:flex; gap:var(--space-5); align-items:center; margin-bottom:var(--space-5); }
.cast-world > header img { flex:none; width:128px; aspect-ratio:460/215; height:auto; object-fit:cover; border-radius:var(--radius-media); box-shadow:0 0 0 1px var(--line); }
.cast-world h2 { font:500 var(--type-h2)/1.15 var(--font-sans); letter-spacing:var(--track-heading); color:var(--ink-strong); }
.cast-world > header p { margin-top:2px; font-size:var(--type-small); color:var(--ink-muted); }
.cast-names { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--space-10); }
.cast-person { display:grid; gap:2px; padding-block:var(--space-3) var(--space-4); border-top:1px solid var(--line); }
.cast-person strong { font-size:var(--type-lead); font-weight:500; line-height:1.3; color:var(--ink-strong); transition:color var(--motion-fast) var(--ease-out); }
.cast-person small { font-size:var(--type-small); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.cast-person:is(:hover,:focus-visible) strong { color:var(--action); }
.cast-empty { padding-block:var(--space-10); }
.cast-empty h2 { font:500 var(--type-h3) var(--font-sans); color:var(--ink-strong); }
.cast-empty p { margin-block:var(--space-3) var(--space-4); color:var(--ink-muted); }
.cast-empty a { font-weight:500; color:var(--action); text-decoration:underline; text-underline-offset:5px; }
.cast-footer { margin-top:var(--space-16); padding-top:var(--space-6); border-top:1px solid var(--line); color:var(--ink-muted); }
.cast-footer a { margin-left:var(--space-2); font-weight:500; color:var(--ink-strong); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:5px; transition:color var(--motion-fast) var(--ease-out); }
.cast-footer a:hover { color:var(--action); }

/* World switches cross-fade the list (characters.js uses a view transition). */
.cast-list { view-transition-name:cast-list; }
::view-transition-old(cast-list) { animation:bank-page-out var(--motion-fast) var(--ease-standard) both; }
::view-transition-new(cast-list) { animation:bank-page-in var(--motion-slow) var(--ease-out) both; }

@media(max-width:1180px) { .cast-names { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:860px) {
  .cast-layout { grid-template-columns:1fr; gap:var(--space-6); }
  .cast-index { position:static; }
  .cast-index > p { margin-bottom:var(--space-3); }
  #castWorlds { display:flex; gap:var(--space-2); overflow-x:auto; margin-inline:calc(-1 * var(--gutter)); padding:0 var(--gutter) var(--space-2); scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  #castWorlds::-webkit-scrollbar { display:none; }
  #castWorlds a { flex:none; width:auto; margin:0; padding:var(--space-2) var(--space-4); border:1px solid var(--line); border-radius:var(--radius-pill,999px); white-space:nowrap; font-size:var(--type-small); }
  #castWorlds a[aria-current="true"] { border-color:var(--ink-strong); }
}
@media(max-width:560px) {
  .cast-footer a { display:inline-flex; margin:var(--space-2) 0 0; }
  .cast-names { grid-template-columns:1fr; }
  .cast-world > header img { width:96px; }
  .cast-world + .cast-world { margin-top:var(--space-12); }
}