/* Story surfaces: no animated filters, backdrop blur, or continuous paint effects. */
#boss-mechanic { margin-top: 7px; padding: 8px 10px; border-left: 2px solid #ae8860; background: #101114eb; color: #e9dcc7; font: 500 max(11px, calc(13px * var(--k)))/1.4 var(--text) }
#boss-mechanic strong { display: block; color: #c6aa7f; font-size: max(10px, calc(11px * var(--k))); margin-bottom: 3px; letter-spacing: .04em }
#boss-mechanic span { display: block }
#boss-mechanic[data-kind="shelter"], #boss-mechanic.safe { border-left-color: #8baab8 }
#boss-mechanic[data-kind="shelter"] strong, #boss-mechanic.safe strong { color: #acced8 }
#boss-mechanic .mechanic-time { display: none; height: 2px; margin-top: 7px; background: #7c6c5838; overflow: hidden }
#boss-mechanic.timed .mechanic-time { display: block }
#boss-mechanic-progress { display: block; width: 100%; height: 100%; transform-origin: left; background: #c9a87e }
#boss-mechanic.safe #boss-mechanic-progress { background: #8baab8 }
/* Quest tracker (HUD, top right): the active main thread, one sentence, a small arrow with the distance, the chapter count. Iron and gold only, no glow. */
.quest.story-quest { gap: 5px; width: min(calc(340px * var(--k)), 34vw); text-align: left; align-items: stretch; padding: 8px 4px 8px 12px; border-left: 1px solid #ad895440; background: #0c0d10a0 }
.story-quest #objective { font-size: calc(15px * var(--k)); line-height: 1.4; color: #dccfb4; font-weight: 500 }
.story-quest #objective::before { display: none }
#quest-tracker { display: block; order: -1 }
.quest-track-row { display: flex; align-items: center; gap: 8px; min-width: 0; color: #c9ab74 }
.quest-track-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11.5px * var(--k)); line-height: 1.3; color: inherit; font-weight: 600; letter-spacing: .1em; text-transform: uppercase }
.quest-track-row span::before { display: none }
.quest-track-row b { font-size: calc(12px * var(--k)); font-weight: 600; color: #b1a184; font-variant-numeric: tabular-nums }
.quest-seal { display: inline-block; width: 6px; height: 6px; border: 1px solid #c19958; transform: rotate(45deg); flex: none }
.quest-track-row.complete { color: #9aa891 }
.quest-track-row.complete .quest-seal { background: #8d9b8a; border-color: #a8b5a0 }
.quest-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 5px; border-top: 1px solid #a1854c24 }
.story-quest #kill-progress { font-size: calc(11px * var(--k)); font-weight: 500; color: #8f8268 }
.journal-panel { width: min(1000px, calc(100vw - 52px)); max-height: calc(100dvh - 64px); display: flex; flex-direction: column; padding: clamp(22px, 3vw, 40px); overflow: hidden }
.journal-panel .panel-head { flex: none; margin-bottom: 16px }
.journal-panel h2 { font-size: clamp(27px, 3vw, 38px); margin: 5px 0 0 }
#journal-intro { color: #bcb6a9; font: 400 15px/1.6 var(--text); max-width: 78ch; margin: 0 0 22px }
#journal-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; overflow-y: auto; min-height: 0; padding: 2px 8px 8px 2px; scrollbar-color: #766445 #141414 }
.journal-quest { min-width: 0; padding: 21px; border: 1px solid #8e734947; background: #0c1014e3; box-shadow: inset 0 1px 0 #dab97616 }
.journal-quest header { display: flex; gap: 14px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid #a18b6235 }
.journal-number { font: 500 23px/1.4 var(--display); font-style: normal; color: #cdb183; width: 42px; height: 42px; text-align: center; border: 1px solid #a88b584d; display: grid; place-items: center; flex: none }
.journal-quest h3 { color: #e5d8ba; font: 600 20px/1.3 var(--display); margin: 0 0 4px }
.journal-quest header small { color: #a9946c; font: 500 10px/1.3 var(--text); letter-spacing: .14em }
.journal-description { color: #b9b5ad; font: 400 13px/1.6 var(--text); margin: 15px 0 21px }
.journal-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.journal-steps li { display: flex; gap: 13px; padding: 0 0 22px; position: relative; color: #949394 }
.journal-steps li:last-child { padding-bottom: 0 }
.journal-steps li:not(:last-child)::after { content: ''; position: absolute; top: 15px; bottom: 4px; left: 5px; width: 1px; background: #63583e60 }
.journal-steps li>i { width: 10px; height: 10px; border: 1px solid #75674e; margin-top: 5px; flex: none; transform: rotate(45deg) }
.journal-steps b { font: 600 14px/1.4 var(--text) }
.journal-steps p { font: 400 12px/1.55 var(--text); margin: 6px 0 0; color: #888c8e }
.journal-steps .current { color: #efd19c }
.journal-steps .current>i { background: #9c7542; border-color: #e2be79 }
.journal-steps .current p { color: #c6b89d }
.journal-steps .done { color: #a5b49c }
.journal-steps .done>i { background: #7f9177; border-color: #a0b398 }
.journal-steps .done p { color: #a7a99f }
.journal-quest.complete header small { color: #a5b49c }
.journal-panel footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #a18b6235; padding-top: 19px; margin-top: 22px; flex: none }
#journal-gate { display: flex; gap: 11px; align-items: center; color: #b9a886; font: 400 13px/1.5 var(--text) }
#journal-gate.ready { color: #b5c4a6 }
#journal-gate .icon { width: 24px; height: 24px; flex: none }
#quest-notice { position: absolute; left: max(var(--left), 22px); top: 25%; width: min(420px, 35vw); padding: 17px 20px; border-left: 2px solid #b28b4f; background: #0b0d12ed; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease; text-shadow: none }
#quest-notice.show { opacity: 1; visibility: visible; z-index: 6 }   /* qa: above the toast stack, which otherwise printed over the card on short screens */
#quest-notice small { color: #b99b66; display: block; font: 500 10px/1.2 var(--text); letter-spacing: .18em; margin-bottom: 7px }
#quest-notice strong { color: #ead9ba; display: block; font: 600 21px/1.3 var(--display) }
#quest-notice p { color: #c0beb7; font: 400 14px/1.6 var(--text); margin: 9px 0 0 }
#quest-notice.complete { border-left-color: #9caf8f }
#quest-notice.complete small { color: #b4c4a6 }
@media (max-width: 800px) { .quest.story-quest { width: min(260px, 37vw); padding: 7px 8px } .story-quest #objective { font-size: 12px } .quest-track-row span { font-size: 10px } .quest-track-row b { font-size: 10px } .journal-panel { padding: 22px; max-height: calc(100dvh - 32px) } #journal-content { gap: 12px } .journal-quest { padding: 15px } #quest-notice { width: 35vw; padding: 12px } #quest-notice strong { font-size: 17px } #quest-notice p { font-size: 12px } }
@media (max-width: 580px) { #journal-content { grid-template-columns: 1fr } .journal-panel footer { align-items: flex-start; gap: 12px } #journal-intro { font-size: 13px; margin-bottom: 15px } #quest-notice { top: 24%; width: 45vw } }
@media (prefers-reduced-motion: reduce) { #quest-notice { transition: none } }
/* ajan:quests — quest kinds, progress bars, compass, side cards, finale */
#journal #journal-content { grid-auto-rows: max-content; align-content: start; align-items: start }
#journal #journal-content > .journal-quest { min-height: max-content }
.journal-section { grid-column: 1 / -1; margin: 6px 0 -4px; color: #b99b66; font: 500 11px/1.3 var(--text); letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid #a18b6235; padding-bottom: 7px }
.quest-bar { display: block; height: 3px; background: #6a5a3e40; overflow: hidden }
.quest-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #8e6a3c, #d9b77c); transform-origin: left; transform: scaleX(0); transition: transform .35s ease }
.journal-bar { margin: 12px 0 0 }
.journal-quest.complete .quest-bar > i { background: #8d9b8a }
.journal-quest h4 { color: #b99b66; font: 500 11px/1.3 var(--text); letter-spacing: .14em; margin: 14px 0 8px; text-transform: uppercase }
.journal-finale { grid-column: 1 / -1; border-color: #9d7a4590; background: radial-gradient(ellipse at top, #24170ff0, #0b0c0ff0) }
.journal-finale h3 { font-size: 26px !important }
.journal-quest[hidden] { display: none }
#quest-notice[data-kind="lore"] { border-left-color: #d6bf8c }
#quest-notice[data-kind="lore"] p { font-family: Georgia, 'Times New Roman', serif; font-style: italic }
#quest-notice[data-kind="rescue"] { border-left-color: #8fb39c }


/* Chapter title, one spoken subtitle lane, and manually paged documents. */
.qc-root { position: fixed; inset: 0; pointer-events: none; z-index: 34 }
.qc-bars .qc-bar { display: none }
.qc-caption { position: absolute; left: 50%; top: clamp(46px, 10vh, 98px); width: min(760px, calc(100vw - 48px)); box-sizing: border-box; padding: 8px 24px; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .45s ease; text-shadow: 0 2px 5px #000, 0 0 20px #000; color: #f2eadb; background: none; border: 0; box-shadow: none }
.qc-bars.show .qc-caption { opacity: 1 }
.qc-caption .qc-eyebrow { display: block; color: #c9a46a; font: 500 12px/1.3 var(--text); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 8px }
.qc-caption .qc-title { display: block; color: #f2dfb6; font: 600 clamp(24px, 2.2vw, 34px)/1.2 var(--display); letter-spacing: .025em }
body.chapter-fading .qc-bars { opacity: 0; transition: opacity .6s }
body:not([data-view="playing"]) .qc-bars { visibility: hidden }
/* Fixed center placement overrides the previous left-aligned duplicate box. */
body #hud #narration { left: 50% !important; transform: translateX(-50%) !important; width: min(760px, calc(100vw - 48px)) !important; max-width: 760px; box-sizing: border-box; display: block; padding: 8px 20px; text-align: center; border: 0; box-shadow: none; background: radial-gradient(ellipse at center, #060504c9, #06050465 60%, transparent 100%); pointer-events: none }
body #hud #narration::before, body #hud #narration::after, body #hud #narration .narrator-sigil { display: none }
body #hud #narration .narration-text { min-width: 0 }
body #hud #narration .narration-text span { display: block; color: #d7bb8a; font: 600 12px/1.35 var(--text); letter-spacing: .06em }
body #hud #narration .narration-text p { margin: 4px 0 0; color: #f4eddf; font: 500 clamp(17px, 1.4vw, 20px)/1.45 var(--text); text-shadow: 0 2px 4px #000, 0 0 8px #000; overflow-wrap: break-word; text-wrap: pretty }
body #hud #narration.tap { animation: none }
body:not([data-view="playing"]) #hud #narration { visibility: hidden }
.qc-reader { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; box-sizing: border-box; pointer-events: auto; background: #050504c9; opacity: 0; transition: opacity .45s ease }
.qc-reader.show { opacity: 1 }
.qc-reader[hidden] { display: none }
.qc-sheet { pointer-events: auto; position: relative; width: min(640px, 86vw); max-height: calc(100dvh - 48px); overflow: auto; box-sizing: border-box; padding: 38px 44px 30px; color: #2a1d12; background: radial-gradient(ellipse at 30% 20%, #e3d1ad 0%, #cdb487 55%, #a88a5c 100%); box-shadow: 0 30px 80px #000d, inset 0 0 60px #5a3b1a99, inset 0 0 4px #3a2410; transform: translateY(8px); transition: transform .6s cubic-bezier(.2,.7,.2,1); clip-path: polygon(0 2%, 6% 0, 18% 1.5%, 33% 0, 51% 1%, 68% 0, 84% 1.6%, 100% 0, 99% 22%, 100% 47%, 98.5% 73%, 100% 100%, 82% 98.4%, 61% 100%, 44% 98.6%, 26% 100%, 9% 98.5%, 0 100%, 1.4% 74%, 0 49%, 1.2% 25%) }
.qc-reader.show .qc-sheet { transform: none }
.qc-sheet::after { content: ''; position: absolute; right: 18px; bottom: 14px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, #6a0d0b 0%, #6a0d0b 42%, #6a0d0b00 70%); opacity: .55; transform: rotate(18deg) }
.qc-sheet .qc-eyebrow { display: block; color: #6b4a26; font: 600 11px/1.2 var(--text); letter-spacing: .26em }
.qc-sheet .qc-title { margin: 8px 0 16px; color: #3b220e; font: 600 26px/1.2 Georgia, 'Times New Roman', serif }
.qc-sheet .qc-text { margin: 0; color: #24190d; font: 400 clamp(18px, 1.5vw, 21px)/1.7 Georgia, 'Times New Roman', serif }
.qc-sheet .qc-note { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #5b3d1e55; color: #4a2f17; font: 400 14px/1.55 var(--text) }
.qc-close { pointer-events: auto; margin-top: 22px; padding: 7px 18px; border: 1px solid #5b3d1e; background: #2a1a0ccc; color: #ead8b2; font: 500 12px/1.2 var(--text); letter-spacing: .12em; cursor: pointer }
.qc-close:hover, .qc-close:focus-visible { background: #4a2c12; outline: 2px solid #51340e; outline-offset: 3px }
.qc-epilogue { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #000; opacity: 0; transition: opacity 1.6s ease; pointer-events: auto }
.qc-epilogue.show { opacity: 1 }
.qc-epilogue[hidden] { display: none }
.qc-epi-card { width: min(760px, 86vw); text-align: center }
.qc-epi-card .qc-eyebrow { color: #a8865a; font: 500 12px/1.2 var(--text); letter-spacing: .5em }
.qc-epi-card .qc-title { margin: 14px 0 30px; color: #efdcb5; font: 600 clamp(30px, 4vw, 52px)/1.1 var(--display) }
.qc-epi-card[data-ending="quill"] .qc-title { color: #d8857a }
.qc-epi-card[data-ending="burn"] .qc-title { color: #f0b46a }
.qc-para { margin: 0 0 18px; color: #d9cdb6; font: italic 400 clamp(16px, 1.6vw, 21px)/1.7 Georgia, 'Times New Roman', serif; opacity: 0; animation: qc-rise 2.4s ease forwards }
.qc-tally { margin-top: 26px; color: #8f8370; font: 400 13px/1.5 var(--text); letter-spacing: .08em }
@keyframes qc-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .qc-bars .qc-bar, .qc-caption, .qc-reader, .qc-sheet, .qc-epilogue { transition: none } .qc-para { animation: none; opacity: 1 } }
.qc-lastwords { display: block; margin-top: 16px; color: #e6c48e; font: italic 400 clamp(15px, 1.4vw, 19px)/1.6 Georgia, 'Times New Roman', serif }
.qc-root.reading { z-index: 400 }
@media (max-width: 1100px) { .qc-sheet { width: min(640px, 92vw); padding: 28px 28px 24px } }
@media (max-height: 600px) { .qc-caption { top: 22px } .qc-reader { padding: 12px } .qc-sheet { max-height: calc(100dvh - 24px); padding: 22px 28px } }
.qc-reader-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-right: 40px; position: relative; z-index: 1 }
.qc-reader-nav button { margin-top: 0; padding: 9px 14px; border: 1px solid #5b3d1e; background: #2a1a0ccc; color: #ead8b2; font: 600 13px/1.3 var(--text); cursor: pointer }
.qc-reader-nav button:disabled { opacity: .4; cursor: default }
.qc-reader-nav button[hidden] { display: none }
.qc-reader-nav button:focus-visible { outline: 2px solid #51340e; outline-offset: 3px }
.qc-reader-nav .qc-close { margin-left: auto }
.qc-page-counter { color: #4a2f17; font: 600 13px/1.3 var(--text); font-variant-numeric: tabular-nums }
.qc-sheet .qc-text { white-space: pre-line }


/* Quest HUD compass: a small arrow and the distance (shown only while the goal is far) */
.quest-compass { display: flex; align-items: center; gap: 6px; color: #b9a67f; font: 500 calc(12px * var(--k))/1.2 var(--text) }
.quest-compass[hidden] { display: none }
.quest-compass svg { width: calc(13px * var(--k)); height: calc(13px * var(--k)); fill: #b9a67f; flex: none }
.quest-compass span { min-width: 0; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a99b7c }
.quest-compass span:empty { display: none }
.quest-compass b { font-weight: 600; font-variant-numeric: tabular-nums; color: #cdb98f }
.quest.story-quest .quest-bottom #kill-progress { margin: 0 0 0 auto }
@media (max-width: 800px) { .quest-compass { font-size: 10px } }

/* Journal: optional threads as compact rows (state mark, name, state, one objective line, reward) */
.journal-optional { grid-column: 1 / -1; display: grid; gap: 8px }
.journal-opt { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border: 1px solid #6f5f4a47; border-left: 2px solid #8e734980; background: #100e0ce0 }
.journal-opt-mark { width: 9px; height: 9px; margin-top: 8px; border: 1px solid #9c8358; transform: rotate(45deg); flex: none }
.journal-opt.started .journal-opt-mark { background: #9c7542; border-color: #e2be79 }
.journal-opt[data-state="done"] .journal-opt-mark { background: #7f9177; border-color: #a0b398 }
.journal-opt[data-state="locked"] { opacity: .62 }
.journal-opt[data-state="locked"] .journal-opt-mark { border-color: #5d5445 }
.journal-opt-body { flex: 1; min-width: 0 }
.journal-opt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px }
.journal-opt h3 { color: #e5d8ba; font: 600 17px/1.3 var(--display); margin: 0 }
.journal-opt small { color: #a9946c; font: 500 11px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap }
.journal-opt[data-state="done"] small { color: #a5b49c }
.journal-opt[data-state="done"] h3 { color: #b4ad9d }
#journal .journal-opt-line { margin: 4px 0 0; color: #c9bda4; font: 400 14px/1.45 var(--text) }
.journal-opt-line[hidden], .journal-opt-reward[hidden], .journal-pages[hidden] { display: none }
#journal .journal-opt-reward { margin: 3px 0 0; color: #9d9382; font: 400 12px/1.4 var(--text) }
.journal-opt .journal-pages { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0 }
.journal-opt .journal-pages li { padding: 3px 10px; border: 1px solid #4b4234; color: #6f6a60; font: 500 12px/1.4 var(--text) }
.journal-opt .journal-pages li.found { border-color: #8e7349; color: #d7cbb2; cursor: pointer }
.journal-opt .journal-pages li.found:hover { background: #2a2216cc }
#journal-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
/* Main cards: the steps already say what to do, so the long description and the bar are dropped (one reading, no duplicate lines) */
#journal .journal-quest.kind-main .journal-description, #journal .journal-quest.kind-main .journal-bar { display: none }