.main-nav { gap: 28px; }
.character-library { margin-top: 40px; }
.character-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
.character-heading h1 { margin-top: 9px; font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -1.2px; }
.character-count { padding: 7px 14px; border: 1px solid #57405d; border-radius: 999px; color: var(--pink); font-size: 14px; white-space: nowrap; }
.character-scope { color: var(--muted); margin-top: 14px; max-width: 760px; }
.character-grid { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 20px; }
.character-grid > li { min-width: 0; }
.character-card { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--surface); transition: border-color .18s, transform .18s; }
.character-card:hover { border-color: var(--pink); transform: translateY(-3px); }
.character-portrait { position: relative; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: #2b2035; }
.character-portrait img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; object-position: center; }
.character-card-name { min-height: 5rem; padding: 14px 16px; font-size: 16px; font-weight: 650; line-height: 1.4; }
.character-grid > li[hidden] { display: none; }
.character-search { max-width: 540px; margin-top: 24px; }
.character-search label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.character-search input { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid #5e4867; border-radius: 10px; background: #19151f; font-size: 16px; }
.character-empty { padding: 40px 20px; margin-top: 24px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; color: var(--muted); }
.character-empty[hidden] { display: none; }
.character-status, .character-library > .navigation-error { position: fixed; bottom: 24px; left: 50%; width: max-content; max-width: calc(100% - 40px); transform: translateX(-50%); z-index: 10; border: 1px solid var(--pink); border-radius: 10px; padding: 12px 20px; background: #271c31; box-shadow: 0 8px 28px #0008; }
.character-status[hidden] { display: none; }
.character-dialog { color: var(--text); padding: 0; border: 1px solid #735078; border-radius: 18px; width: min(920px, calc(100% - 40px)); max-height: calc(100dvh - 48px); background: #19151f; overscroll-behavior: contain; }
.character-dialog::backdrop { background: #0b0713db; backdrop-filter: blur(5px); }
.character-profile { max-width: 920px; margin: 35px auto; background: #19151f; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.character-dialog .character-profile { margin: 0; border: 0; border-radius: 0; overflow: visible; }
.character-toolbar { position: sticky; top: 0; z-index: 1; background: #19151f; display: flex; justify-content: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.character-profile-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
.character-profile-portrait { position: relative; aspect-ratio: 4 / 3; min-height: 0; background: radial-gradient(ellipse at center, #56335c, #231c30 85%); }
.character-profile-portrait img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; }
.character-identity { padding: 32px; align-self: center; }
.character-identity h1 { font-size: clamp(26px, 4vw, 38px); margin: 8px 0 16px; letter-spacing: -.8px; overflow-wrap: anywhere; }
.character-original-name { font-size: 14px; color: var(--pink); margin-top: -8px; margin-bottom: 18px; }
.character-identity > p:last-child { color: #d4ccd9; }
.character-story { padding: 30px 36px 34px; }
.character-story section + section { margin-top: 26px; }
.character-story h2 { font-size: 21px; margin-bottom: 10px; color: var(--pink); }
.character-story section > p { color: #d4ccd9; }
.character-source { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 20px; color: var(--muted); font-size: 14px; }
.character-source a { display: inline-block; margin-top: 8px; text-decoration: underline; text-underline-offset: 4px; color: var(--violet); }
@media (max-width: 820px) {
  .header-inner { flex-wrap: wrap; gap: 20px; }
  .main-nav { gap: 24px; }
}
@media (max-width: 580px) {
  .character-library { margin-top: 28px; }
  .character-heading { gap: 12px; }
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
  .character-card-name { font-size: 14px; padding: 12px; }
  .character-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .character-profile-heading { grid-template-columns: minmax(0, 1fr); }
  .character-identity { padding: 24px; }
  .character-story { padding: 0 24px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .character-card { transition: none; }
}

html:has(.character-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.character-source p + p { margin-top: 8px; }

.character-story section > p + p { margin-top: 16px; }
.character-appearances-note { margin-top: 6px; font-size: 14px; color: var(--muted); }
.character-episode-list { list-style: none; padding: 0; margin: 18px 0 0; }
.character-episode { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.character-episode-information { min-width: 0; }
.character-episode-meta { color: var(--pink); font-size: 14px; margin-bottom: 5px; }
.character-episode h3 { font-size: 16px; line-height: 1.5; }
.character-episode-original, .character-episode-note { font-size: 14px; color: var(--muted); margin-top: 4px; }
.character-episode .button { flex-shrink: 0; }
.character-episode-source { flex-shrink: 0; max-width: 130px; text-align: right; color: var(--violet); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.character-more-appearances { margin-top: 16px; }
.character-more-appearances > summary { cursor: pointer; color: var(--pink); font-size: 14px; padding: 8px 0; }
@media (max-width: 580px) {
  .character-episode { align-items: flex-start; flex-direction: column; gap: 12px; }
  .character-episode-source { max-width: none; text-align: left; }
}