@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600;700&display=swap');

:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --panel: #fff;
  --line: #e5e1da;
  --muted: #667078;
  --text: #252b2d;
  --accent: #71548a;
  --video: #a8463d;
  --apps: #197869;
  --books: #956824;
  --movies: #7654a0;
  --dialogue: #267486;
}

body { background: var(--bg); color: var(--text); }
a:hover { color: var(--accent); }
.skip { color: #fff; }
.site-header { min-height: 100px; border-color: var(--line); }
.brand { color: var(--text); }
.brand-mark { color: #fff; border-radius: 6px; box-shadow: 3px 3px 0 #ddd1e4; }
.brand small, .edition { color: var(--muted); }
.edition span { border-color: var(--line); }
nav a { color: #505960; }
nav a:hover { background: #f0ede8; color: var(--text); }
nav a.active { color: var(--accent); background: #f2edf5; }
main { padding-top: 46px; }
h1, .collection-heading h1, .section-bar h2, .card-body h2, dialog h2,
.companion h2, .dialogue-sidebar h2 { font-family: 'Noto Serif JP', Georgia, serif; }
h1 { letter-spacing: 0; }
.eyebrow::before { box-shadow: none; }

.world-panel, .companion, .guide, .quick-card, .content-card,
.dialogue-transcript, .dialogue-sidebar { background: var(--panel); border-color: var(--line); }
.world-panel, .content-card, .quick-card, .companion, .guide,
.dialogue-transcript, .dialogue-sidebar { border-radius: 7px; }
.world-toolbar { background: #f5f2ed; border-color: var(--line); }
.world-number { color: var(--muted); margin-left: 9px; }
.world-toolbar i { background: #6da779; }
.map { background: #d9edfa; }
.map::after { box-shadow: inset 0 0 35px #fff5; }
.map-location { background: #fffffff2; border-color: color-mix(in srgb, var(--category) 65%, white); box-shadow: 0 4px 14px #28334438; }
.map-location:hover { background: #fff; }
.map-location[data-destination="dialogue"] { background: #fffef5f2; box-shadow: 0 4px 16px #26748666; }
.map-location[data-destination="dialogue"]:hover { background: #fff; }
.dog-tag { background: #fffef0e8; color: #4d4238; box-shadow: 0 1px 6px #0003; }
.map-caption { color: #59636b; border-color: var(--line); background: #fff; }
.map-caption kbd { color: var(--text); background: #f6f3ee; border-color: #d5d1ca; }
.panel-heading { color: var(--muted); }
.panel-heading .heart { color: #c7677b; }
.speech, .speech::before { background: #f8f5ef; border-color: #e8e0d4; }
.guide-step b { background: #f2edf5; color: var(--accent); }
.category-icon { background: color-mix(in srgb, var(--category) 9%, white); border-color: color-mix(in srgb, var(--category) 19%, white); }
.quick-card > .icon { color: #9aa0a3; }
.quick-card:hover, .content-card:hover { border-color: #d1c9bd; }
.home-note, footer, .footer-brand { color: var(--muted); }
footer { border-color: var(--line); }

.content-card { box-shadow: 0 2px 14px #403a2b08; }
.card-body p { color: #626b70; }
.button { color: var(--text); background: #fff; border-color: #d6d1c8; }
.button:hover { color: var(--text); background: #f5f2ed; border-color: #aea79f; }
.button.primary { color: #fff; }
.button.primary:hover { color: #fff; filter: brightness(.9); }
.content-note { border-color: var(--line); }
.cover-duration, .video-thumbnail span { color: #fff; }
.book-cover { background: #f2eee8; }
.review-cover { background: #f3f0ea; }
.review-source { border-color: var(--line); }
.review-cover > span:last-child, .review-art-cover .review-art-link { background: #fffef6ed; color: #344047; }
.video-channel-bar, .dialogue-intro { background: #f7f4ee; border-color: var(--line); }
.dialogue-intro p { color: #4d6269; }
.dialogue-card-art { background: radial-gradient(circle at 50% 65%, #cbece8 0%, #e5f1ef 35%, #f2f5ef 76%); }
.dialogue-card-art .icon { color: var(--dialogue); filter: none; }
.dialogue-orbit { border-color: #86bfc338; box-shadow: 0 0 0 32px #86bfc315, 0 0 0 68px #86bfc30b; }
.dialogue-turn p { color: var(--text); background: #f6f7f5; border-color: #e0e5e2; }
.dialogue-turn.from-question p { background: #f4f0f6; border-color: #e4dbe8; }
.dialogue-turn.from-question .dialogue-speaker { color: var(--accent); }
.dialogue-sidebar a { color: #4b6068; }

.book-filter-panel, .book-filter-empty { background: #f8f6f1; border-color: var(--line); }
.book-filter-heading h2, .book-filter-empty p { color: var(--text); }
.book-filter-chip { background: #fff; border-color: #d8d2c7; color: #4f5556; }
.book-filter-chip span { color: var(--muted); }
.book-filter-chip:hover { background: #f5efe2; }
.book-filter-chip.active { color: #fff; background: var(--books); border-color: var(--books); }
.book-filter-chip.active span { color: #fff9; }
.book-filter-extra:not(.is-collapsed) { scrollbar-color: #c9bdad #f3eee6; }
.review-card-tags button { background: #f8f5ef; border-color: #ded5c8; color: #785523; }
.review-card-tags button:hover { background: #f1e9d9; }
.review-card-tags button.active { background: #eee1c8; border-color: var(--books); color: #674719; }
.movie-filter-panel .book-filter-chip.active { color: #282039; background: var(--movies); border-color: var(--movies); }
.movie-filter-panel .book-filter-chip.active span { color: #4b3a65; }
.movie-card-tags button { background: #f4f0fb; border-color: #d7cbed; color: #60448e; }
.movie-card-tags button:hover, .movie-card-tags button.active { background: #e7dcf8; border-color: var(--movies); color: #442669; }
.review-page-number { background: #fff; border-color: #d7d1c7; color: var(--text); }
.review-page-number:hover { background: #f4eee3; }
.review-page-number[aria-current="page"] { color: #fff; }
.book-filter-chip:focus-visible, .book-filter-more:focus-visible,
.review-card-tags button:focus-visible, .review-page-number:focus-visible { outline-color: var(--accent); }

dialog { background: #fffefa; color: var(--text); border-color: #ddd7cd; box-shadow: 0 25px 90px #2620264d; }
dialog::backdrop { background: #27313c80; }
.dialog-close { color: #626a70; }
.dialog-close:hover { color: var(--text); }
dialog p, dialog .review-meta { color: #535d63; }
dialog .disclaimer { background: #f5f1e9; }
.spoiler-pill { border-color: #c6b1cd; color: var(--accent); }
.spoiler-review { border-color: #ded5e1; }

@media (max-width: 520px) {
  main { padding-top: 28px; }
  .map::after { box-shadow: inset 0 0 20px #fff5; }
}