/* The memory book is a reading surface; all captions stay real, selectable text. */
.character-view .portrait-art { width: 42%; height: 265px; flex: 0 0 42%; filter: drop-shadow(0 8px 14px #020a14); }
.character-view { gap: 16px; }
.character-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.character-card { padding: 12px 4px; min-width: 0; }
.character-card.locked { opacity: 1; color: #b6c5c4; background: #172a34; }
svg.char-mini, .unknown-mini { display: block; width: 66px; height: 76px; background: none; }
.unknown-mini { display: grid; place-items: center; font: 38px Dalbit,serif; color:#a69b7e; }
.character-card small { font-size: 14px; line-height: 1.5; }
.character-card b { display:block; font-size:16px; font-weight:500; }
.char-copy p { font-size:16px; line-height:1.85; }
.char-copy .char-quote { font-size:14px !important; }
.collection-invite { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 20px 0; font-size:14px; color:#a8bdba; }
.region-list { display:block; }
.region-group { display:grid; gap:8px; margin-bottom:20px; }
.region-group > h3 { color:#abbbba; font:500 14px sans-serif; margin:0 0 4px; letter-spacing:.1em; }
.region-art { width:60px; height:65px; flex:0 0 60px; margin-left:auto; }
.region.locked { opacity:.7; }
.region > div { min-width:0; }
.region p { font-size:14px; line-height:1.6; }
.region-num { min-width:35px; }
.companion-selection { min-width:0; }
.departure { align-items:start; }
.departure-foot { position:sticky; bottom:-1px; background:#102631f5; padding:18px; z-index:1; box-shadow:0 -16px 20px #10263180; }
.weapon-art { display:inline-block; flex-shrink:0; }
.weapon-entry > svg.weapon-art { width:65px; height:65px; }
.weapon-entry .recipe { display:flex; gap:12px; align-items:center; }
.weapon-entry .recipe .relic-art { width:46px; height:48px; flex:0 0 46px; }
.secret-entry.locked-entry { opacity:1; background:#152a36; border-style:dashed; }
.unknown-symbol { font:500 60px Dalbit,serif; color:#b7a882; display:grid; place-items:center; min-height:80px; }
.collection-section-title { margin:32px 0 18px; font:500 21px Dalbit,serif; color:#e7d6b6; }
.relic-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.relic-catalog article { display:flex; gap:14px; padding:18px 12px; border-top:1px solid #b6b99533; align-items:center; }
.relic-catalog svg { width:62px; height:62px; }
.relic-catalog h3 { margin:0 0 5px; font-size:17px; }
.relic-catalog p { margin:0 0 4px; font-size:16px; line-height:1.6; }
.relic-catalog small { font-size:14px; color:#a7bdb9; line-height:1.6; }
.collection-counter { display:flex; align-items:center; gap:22px; padding:20px 0; border-bottom:1px solid #c1b37a40; }
.collection-counter strong { font:48px Dalbit,serif; color:#ecd18d; }
.collection-counter strong small { font-size:25px; color:#7f999d; }
.collection-counter > span { line-height:1.8; font-size:16px; color:#b7ccc5; }
.discovery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.discovery { background:linear-gradient(150deg,#1d3440,#102430); border:1px solid #a7b1a22e; padding:22px; position:relative; }
.discovery.undiscovered { border-style:dashed; }
.discovery-image { height:142px; display:flex; justify-content:center; margin-bottom:14px; }
.discovery-image .portrait-art { width:145px; height:142px; }
.discovery-image .weapon-art { width:120px; height:120px; align-self:center; }
.discovery h3 { font:30px Dalbit,serif; letter-spacing:3px; margin:12px 0; }
.discovery p { font-size:16px; line-height:1.9; color:#c3cebf; }
.sealed-caption { display:block; color:#98acac; font-size:14px; padding-top:14px; border-top:1px solid #a6b1a324; }
.discovered { border-color:#d2b57780; }
.story-shelf { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.story-volume { display:flex; gap:22px; align-items:center; padding:25px; border:1px solid #a8b1a52b; border-left:5px solid #b49b66; background:#152e3a; }
.volume-art { width:130px; flex:0 0 130px; }
.volume-art .portrait-art { width:130px; height:180px; }
.story-volume h3 { font:26px Dalbit,serif; margin:10px 0; line-height:1.5; }
.story-volume p { font-size:16px; line-height:1.85; color:#b7c9c3; }
.story-volume .eyebrow { line-height:1.7; }
.unread-volume { border-left-color:#415666; }
.story-volume > div:last-child { min-width:0; }
.memory-pages { display:flex; gap:3px; flex-wrap:wrap; align-items:center; margin:16px 0; }
.memory-pages > span { width:calc((100% - 42px)/15); max-width:16px; height:5px; background:#3a5160; }
.memory-pages > span.on { background:#d9bf85; }
.memory-pages small { flex-basis:100%; font-size:14px; line-height:1.7; color:#acbbb8; }
.comic-reader { width:100%; height:100%; height:100dvh; overflow-y:auto; overflow-x:hidden; background:#07151f; scrollbar-color:#716851 #112633; }
.comic-top { position:sticky; top:0; z-index:3; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:16px max(20px,calc((100% - 880px)/2)); background:#112630f5; border-bottom:1px solid #a0b0a026; }
.comic-top > span { font-size:14px; color:#c0cebf; white-space:nowrap; }
.comic-cover { max-width:780px; margin:0 auto; text-align:center; padding:72px 24px 56px; }
.comic-cover h1 { font:clamp(32px,5vw,56px)/1.45 Dalbit,serif; letter-spacing:3px; margin:18px 0; }
.comic-cover p { font-size:17px; line-height:1.9; color:#b8c7c4; }
.comic-toc { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:580px; margin:32px auto 0; }
.comic-toc .btn { white-space:normal; font-size:15px; line-height:1.65; padding:13px 12px; word-break:keep-all; }
.comic-toc .btn:disabled { opacity:.55; cursor:default; }
.comic-read-hint { display:block; margin-top:32px; color:#a99b7d; font-size:14px; }
.comic-strip { width:min(100%,720px); margin:auto; }
.comic-chapter { text-align:center; margin:24px 20px 30px; padding:34px 0 16px; border-top:1px solid #b5a57544; scroll-margin-top:85px; }
.comic-chapter > span { font-size:14px; color:#b9a876; letter-spacing:.18em; }
.comic-chapter h2 { font:clamp(24px,4vw,32px)/1.65 Dalbit,serif; color:#e6d8b7; margin:12px 0; word-break:keep-all; }
.comic-panel { margin:0 0 54px; }
.panel-index { padding:20px 26px 12px; color:#c7b793; font-size:14px; letter-spacing:.12em; }
.comic-panel-art { position:relative; width:100%; display:block; overflow:hidden; background:#0e212b; isolation:isolate; }
.comic-panel-art > img { position:absolute; display:block; max-width:none; max-height:none; object-fit:fill; margin:0; padding:0; }
.comic-panel figcaption { padding:32px clamp(24px,6vw,66px) 14px; text-align:center; }
.comic-panel p { color:#c8d2c7; white-space:normal; font-size:17px; line-height:2.2; margin:0; word-break:keep-all; overflow-wrap:anywhere; }
.comic-dialogue { display:flex; flex-direction:column; gap:22px; margin:32px 0 12px; }
.dialogue-line { display:flex; flex-direction:column; align-items:flex-start; text-align:left; max-width:92%; }
.dialogue-speaker { color:#a5bab9; font-size:14px; margin:0 0 8px 3px; line-height:1.6; }
.comic-panel blockquote { margin:0; padding:17px 23px; background:#d8e3df; color:#172b35; font:19px/1.95 Dalbit,serif; border-radius:3px 12px 12px 12px; word-break:keep-all; overflow-wrap:anywhere; }
.dialogue-protagonist { align-self:flex-end; align-items:flex-end; }
.dialogue-protagonist blockquote { background:#eae1cc; border-radius:12px 3px 12px 12px; }
.dialogue-thought { align-self:center; align-items:center; text-align:center; }
.dialogue-thought blockquote { background:transparent; color:#d6c7a5; border-top:1px solid #9c947d38; border-bottom:1px solid #9c947d38; border-radius:0; }
.sealed-panel { margin:20px 24px 70px; padding:50px 24px; text-align:center; background:#142832; border:1px dashed #a9b29855; scroll-margin-top:85px; }
.sealed-panel h2 { font:24px/1.6 Dalbit,serif; margin:20px 0; }
.sealed-panel p { font-size:16px; line-height:2; color:#b9c9c1; }
.comic-bottom { display:flex; flex-direction:column; align-items:center; gap:22px; padding:24px 20px 70px; text-align:center; color:#adbdba; font-size:16px; }
.comic-bottom > div { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.discovery-result { border-top:1px solid #c8b77c45; margin-top:14px; padding:16px 0; display:flex; flex-direction:column; gap:6px; }
.discovery-result > span,.discovery-result > small { font-size:14px; line-height:1.7; }
.discovery-result > strong { font:27px Dalbit,serif; color:#edd49e; }
.record-art { width:90px; height:100px; object-fit:contain; flex-shrink:0; }
.story-art { display:block; width:180px; height:180px; margin:16px auto; }
.equip-small svg { width:100%; height:100%; padding:4px; }
.choice-card > svg { display:block; width:85px; height:90px; margin:12px auto; }
@media(min-width:1000px) { .companion-selection { position:sticky; top:90px; } }
@media(max-width:980px) { .story-shelf { grid-template-columns:1fr; } .discovery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .relic-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) {
  .character-view { min-height:255px; gap:10px; }
  .character-view .portrait-art { width:33%; flex-basis:33%; height:230px; }
  .char-copy h2 { font-size:32px; }
  .char-copy p { font-size:14px; }
  .character-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
  svg.char-mini,.unknown-mini { width:52px; height:66px; }
  .departure-foot { position:static; padding:18px 0; box-shadow:none; flex-wrap:wrap; }
  .departure-foot > .btn { width:100%; }
  .discovery-grid { grid-template-columns:1fr; }
  .discovery { display:flex; gap:18px; align-items:center; padding:20px; }
  .discovery-image { width:90px; height:120px; flex:0 0 90px; }
  .discovery-image .portrait-art { width:90px; height:120px; }
  .discovery-image .weapon-art { width:85px; height:85px; }
  .story-volume { padding:18px; gap:16px; }
  .volume-art { width:90px; flex-basis:90px; }
  .volume-art .portrait-art { width:90px; height:150px; }
  .story-volume h3 { font-size:23px; }
  .comic-top { padding:12px; }
  .comic-top > span { order:3; width:100%; text-align:center; }
  .comic-top .btn { font-size:14px; padding:10px 12px; }
  .comic-cover { padding:42px 20px 28px; }
  .comic-toc { gap:8px; }
  .comic-toc .btn { font-size:14px; }
  .comic-chapter,.sealed-panel { scroll-margin-top:130px; }
  .comic-panel figcaption { padding:24px 22px 14px; }
  .comic-panel p { font-size:16px; }
  .comic-panel blockquote { font-size:17px; padding:14px 18px; }
  .relic-catalog { grid-template-columns:1fr; }
  .region-art { width:46px; flex-basis:46px; }
  .region { gap:10px; padding:12px; }
  .record-art { width:65px; height:82px; }
}