/* Colours come from the game's event popup: window tint (0.98, 0.91, 0.82), ink (0.31, 0.22, 0.11),
   banner text (1, 0.93, 0.84) and the outcome colours of its UI texts. */
:root {
  --ink: #4f381c;
  --ink-soft: #7d6447;
  --ink-faint: #a8916f;
  --paper: #fae8d1;
  --paper-deep: #f0dcc0;
  --banner-ink: #ffedd6;
  --good: #2a8f34;
  --bad: #a12a2a;
  --gold: #a5752c;
  --night: #1d1712;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --sans: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  background:
    radial-gradient(ellipse at 50% -10%, #4a3a2a 0%, transparent 60%),
    linear-gradient(#2a2119, var(--night));
  padding: 18px;
}
button, input, select { font: inherit; color: inherit; }

.window {
  max-width: 1500px;
  min-height: calc(100vh - 36px);
  margin: 0 auto;
  background: var(--paper) url(img/PaperBackground.webp) center / cover;
  background-blend-mode: multiply;
  box-shadow: 0 0 0 1px #6d5639, 0 18px 50px #000a;
  position: relative;
}
.frieze { height: 36px; background: url(img/frieze.webp) left top / 320px 36px repeat-x; }

/* ---- title bar: the game's FrameLabelV3 banner ---- */
.titlebar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin: 14px 18px 8px;
  padding: 6px 34px;
  min-height: 52px;
  border: 4px solid transparent;
  border-width: 3px 36px;
  border-image: url(img/FrameLabelV3.webp) 8 105 8 105 fill / 3px 36px / 0 stretch;
}
.titlebar h1 {
  margin: 0; font: 700 24px/1.2 var(--serif); letter-spacing: .18em; color: var(--banner-ink);
  text-shadow: 0 1px 2px #0008;
}
.tabs { display: flex; gap: 6px; margin-left: auto; }
.tabs button {
  border: 0; cursor: pointer; padding: 6px 16px;
  background: transparent; color: #e9d6bb; font-family: var(--serif); font-size: 16px; letter-spacing: .08em;
  border-bottom: 2px solid transparent;
}
.tabs button[aria-selected="true"] { color: #fff6e6; border-bottom-color: #f2cf96; }
.tabs button span { font-family: var(--sans); font-size: 14px; opacity: .8; }

.site-name { display: flex; align-items: center; gap: 12px; }
.site-name > img { width: 72px; height: 72px; object-fit: contain; }
.site-name h1 { letter-spacing: .05em; }
.site-name h1 span { display: block; margin-top: 5px; font: 400 16px/1.4 var(--sans); letter-spacing: .1em; }

/* ---- toolbar ---- */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 6px 22px 4px; }
.search { flex: 0 1 220px; margin-left: auto; min-width: 180px; }
.search input {
  width: 100%;
  padding: 8px 12px;
  background: #fffaf0cc;
  border: 10px solid transparent;
  border-image: url(img/GenericLineFrame.webp) 19 / 6px / 0 stretch;
  outline: none;
}
.search input:focus { background: #fffdf6; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 22px 10px; }
.chip {
  cursor: pointer; border: 1px solid #b89a72; background: #fff6e4aa; padding: 2px 10px; border-radius: 2px;
  font-size: 14px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink);
}
.chip img { height: 16px; }
.chip[aria-pressed="true"] { background: #6b4f2d; color: var(--banner-ink); border-color: #6b4f2d; }
.chip.trait-pick { padding: 0 2px 0 8px; }
.chip.trait-pick select { border: 0; background: transparent; padding: 2px; font-size: 14px; }

/* ---- panes ---- */
.panes { position: relative; display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 24px; padding: 0 18px 18px; }
.list-pane, .detail {
  border: 14px solid transparent;
  border-image: url(img/GeneralInnerFrameV2.webp) 25 22 28 27 / 12px / 0 stretch;
  background: #fff8ec80;
  min-height: 70vh;
}
.list-pane { display: flex; flex-direction: column; max-height: calc(100vh - 60px); position: sticky; top: 12px; }
.list-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 8px; font-size: 14px; color: var(--ink-soft); }
.list-head button { border: 0; background: none; color: var(--gold); cursor: pointer; text-decoration: underline; }
.list { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; }

.row {
  width: 100%; text-align: left; color: inherit; font: inherit;
  display: grid; grid-template-columns: 58px 1fr; gap: 10px;
  padding: 6px; margin-bottom: 6px; cursor: pointer; position: relative;
  background: #fffaf2b0;
  border: 7px solid transparent;
  border-image: url(img/GenericLineFrame.webp) 19 / 5px / 0 stretch;
}
.row:hover, .row[aria-current="true"] { background: #fffdf8; }
.row[aria-current="true"] { background: #f0dfbb; outline: 2px solid var(--gold); outline-offset: -2px; box-shadow: inset 5px 0 var(--gold); }
.row[aria-current="true"] .title { color: #704315; }
.opened-event { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; padding: 10px 14px; border-left: 5px solid var(--gold); background: #f0dfbb; }
.opened-event > img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.opened-event h2, .event-detail .opened-event h2 { font: 700 22px/1.4 var(--serif); margin: 0; }
.thumb { width: 58px; height: 58px; object-fit: cover; object-position: 50% 15%; border: 1px solid #8c6b45; background: #d9c3a0; }
.row .label {
  display: inline-block; font: 600 14px/1.6 var(--serif); color: var(--banner-ink); padding: 0 14px 0 8px; margin-bottom: 2px;
  background: url(img/OverviewLabelV2.webp) left center / auto 100% no-repeat, #7a6650;
  -webkit-mask: linear-gradient(90deg, #000 80%, transparent);
          mask: linear-gradient(90deg, #000 80%, transparent);
}
.row .snippet { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .title { display: block; font: 600 18px/1.4 var(--serif); }
.row .marks { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.mark { font-size: 14px; padding: 0 5px; border-radius: 2px; background: #e9d6b6; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 2px; }
.mark img { width: 24px; height: 24px; object-fit: contain; }
.mark.check img { width: 16px; padding: 2px; object-fit: contain; }
.mark.good { background: #d7ebcf; color: #24622a; }
.mark.bad { background: #f0d2cc; color: #8a2323; }
.mark.check { background: #e4dccd; }
.mark.stars { background: #f2dfb5; color: #694911; }
.empty { padding: 30px 10px; text-align: center; color: var(--ink-soft); }
mark.hit { background: #f2cf7a; color: inherit; padding: 0 1px; }

/* ---- detail: the event popup ---- */
.detail { padding: 6px 10px 18px; }
.quest-browser { padding: 4px 28px 30px; }
.reputation { overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; scrollbar-color: #a5752c transparent; }
.reputation-rail { min-width: 880px; position: relative; padding: 24px 0 0; }
.reputation-control { position: absolute; left: 6.25%; right: 6.25%; top: 22px; height: 28px; }
.reputation-track { position: absolute; inset: 0; border: 10px solid transparent; border-image: url(img/ProgressBarV2.webp) 30 48 fill / 10px 18px / 0 stretch; }
.reputation-fill { position: absolute; left: -1px; top: 0; height: 8px; background: linear-gradient(#dfad48, #a77724); transition: width .18s ease; }
#reputation-slider { position: absolute; z-index: 2; left: -15px; top: -8px; width: calc(100% + 30px); height: 44px; margin: 0; appearance: none; background: transparent; cursor: grab; touch-action: pan-y; }
#reputation-slider:active { cursor: grabbing; }
#reputation-slider::-webkit-slider-runnable-track { height: 0; background: transparent; }
#reputation-slider::-moz-range-track { height: 0; background: transparent; }
#reputation-slider::-webkit-slider-thumb { appearance: none; width: 30px; height: 30px; margin-top: -15px; border: 3px solid #805421; border-radius: 5px; transform: rotate(45deg); background: #f3cf7b; box-shadow: 0 0 0 3px #fae8d1, 0 0 12px #b9852c88; }
#reputation-slider::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid #805421; border-radius: 5px; transform: rotate(45deg); background: #f3cf7b; box-shadow: 0 0 0 3px #fae8d1, 0 0 12px #b9852c88; }
#reputation-slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 12px; }
.reputation-nodes { display: grid; grid-template-columns: repeat(8, 1fr); }
.reputation-nodes button { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; padding: 0 4px 8px; border: 0; background: none; cursor: pointer; font: 600 17px/1.5 var(--serif); color: var(--ink-soft); }
.reputation-dot { display: block; width: 24px; height: 24px; border: 3px solid #a5875d; border-radius: 50%; background: var(--paper); margin-bottom: 8px; box-shadow: 0 0 0 3px var(--paper); }
.reputation-nodes .reached .reputation-dot { background: #c69a46; border-color: #94672b; }
.reputation-nodes button[aria-pressed="true"] { color: #734318; text-shadow: 0 1px #fff8e5; outline: none; background: none; }
.reputation-nodes button[aria-pressed="true"] > span:nth-child(2) { transform: scale(1.12); }
.reputation-nodes button:hover { color: #734318; }
.reputation-nodes button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.reputation-nodes small { font: 500 13px/1.5 var(--sans); color: var(--ink-soft); }
.quest-catalog { padding: 6px 8px 0; }
.quest-type { position: absolute; z-index: 1; top: 8px; right: 0; padding: 3px 10px 3px 15px; background: #895b20; color: #fff7df; font: 700 13px/1.5 var(--serif); clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.quest-card-side .quest-type { background: #486269; }
.quest-card-side .quest-spine { background: linear-gradient(90deg, #c4d1cf, #e8efdf 70%, #b2c4c3); border-right-color: #829796; }
.quest-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.quest-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); width: 100%; max-width: 224px; aspect-ratio: 210 / 310; color: var(--ink); text-decoration: none; border: 7px solid transparent; border-image: url(img/GenericLineFrame.webp) 19 / 6px / 0 stretch; background: #eee0c6; box-shadow: 2px 4px 8px #63451f24; transition: transform .16s ease, box-shadow .16s ease; animation: quest-appear .2s ease both; }
.quest-card-main { border-image-source: url(img/GenericLineFrameHighlighted.webp); }
.quest-card:hover { transform: translateY(-4px); box-shadow: 2px 8px 14px #63451f40; }
.quest-card[aria-current="true"] { outline: 2px solid var(--gold); outline-offset: 3px; }
.quest-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.quest-spine { display: grid; grid-template-rows: 34px minmax(0, 1fr) auto; justify-items: center; gap: 5px; padding: 7px 3px; border-right: 1px solid #bca17c; background: linear-gradient(90deg, #e6cea3, #f8e8cd 70%, #dfc49a); }
.quest-icon { width: 32px; height: 32px; object-fit: contain; }
.quest-name { writing-mode: vertical-rl; text-orientation: upright; font: 700 18px/1.5 var(--serif); letter-spacing: .12em; min-height: 0; padding: 5px 0; }
.quest-art { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.quest-stars { display: inline-flex; justify-content: flex-end; max-width: 100%; white-space: nowrap; }
.quest-stars img { width: 18px; height: 21px; object-fit: contain; min-width: 0; }
.quest-spine .quest-stars { display: grid; grid-template-columns: repeat(3, 10px); gap: 1px; justify-content: center; filter: brightness(.45) sepia(1); }
.quest-spine .quest-stars img { width: 10px; height: 12px; }
.quest-view { display: block; }
.quest-view .detail { min-height: 0; padding: 8px 20px 22px; }
.quest-back { border: 0; border-bottom: 1px solid #b99b70; background: transparent; padding: 6px 0; margin: 0 0 16px; font: 600 16px/1.5 var(--serif); cursor: pointer; }
.quest-back:hover { color: #915219; }
@keyframes quest-appear { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .quest-card { animation: none; transition: none; }
  .reputation-fill { transition: none; }
}
.quest-overview { padding: 0 2px 10px; border-bottom: 1px solid #bca17c; }
.quest-heading { justify-content: space-between; flex-wrap: wrap; border-left: 0; background: transparent; padding: 0; margin: 4px 0 8px; gap: 8px; }
.quest-heading h2 { flex: 0 1 auto; }
.quest-unlock { flex: 1 1 300px; font: 400 14px/1.7 var(--sans); color: var(--ink-soft); }
.quest-heading .quest-stars { filter: brightness(.4) sepia(1); }
.quest-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; }
.quest-modifiers { display: inline-flex; gap: 4px; margin-left: auto; }
.quest-modifier { padding: 1px; background: #e3cfad; border: 1px solid #8c6b45; cursor: help; }
.quest-modifier img { display: block; width: 28px; height: 28px; object-fit: contain; }
.quest-notes { margin: 6px 0; font-size: 14px; color: #8a4b18; }
.quest-rewards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0; font-size: 14px; }
.quest-reward { display: inline-flex; align-items: center; gap: 4px; }
.quest-reward img { width: 24px; height: 24px; object-fit: contain; }
.quest-reward .experience-icon { background: #706a60; border-radius: 3px; }
.quest-description { font-size: 14px; color: var(--ink-soft); }
.quest-description > summary { width: fit-content; cursor: pointer; }
.quest-description > div { white-space: pre-line; padding: 8px 0; color: var(--ink); }
.quest-info { display: grid; align-items: start; gap: 12px 28px; margin-top: 8px; }
.quest-info:has(> .quest-bosses) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.quest-info > * { min-width: 0; }
.quest-bosses > h3 { margin: 0 0 8px; font: 400 14px/1.5 var(--sans); color: var(--ink-soft); }
.boss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.quest-bosses .battle-extra { margin: 4px 0 0; font-size: 14px; }
.boss-card { display: flex; align-items: start; gap: 10px; padding: 10px; background: #fff9efb0; border: 1px solid #c6ab84; border-radius: 4px; }
.boss-portrait { flex: 0 0 48px; width: 48px; height: 60px; object-fit: cover; object-position: 50% 20%; background: #645d50; border: 1px solid #a88c65; }
.boss-content { flex: 1; min-width: 0; }
.boss-card h4 { font: 600 16px/1.5 var(--serif); margin: 0 0 4px; }
.boss-drops { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.loot-item { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.item-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-bottom: 1px dotted currentColor; background: transparent; color: inherit; font: inherit; text-align: left; cursor: help; }
.item-trigger img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.item-tooltip { z-index: 101; font-size: 14px; }
.item-tooltip > strong { display: block; font: 600 17px/1.5 var(--serif); }
.item-tooltip p { margin: 7px 0 0; }
.item-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.loot-chance { color: var(--ink-soft); font: 400 14px/1.5 var(--sans); }
.loot-condition { font-size: 14px; border-bottom: 1px dotted; }
.drop-conditions { margin-top: 6px; font-size: 14px; }
.drop-conditions summary { cursor: pointer; }
.battle-link { display: block; margin: 8px 0; padding: 5px 12px; border: 1px solid #b79c75; border-radius: 3px; background: #f2e7d4; color: var(--ink); cursor: pointer; font: inherit; }
.battle-extra { color: #326039; }
.battle-setting { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.enemy-table { display: grid; gap: 6px; }
.enemy-row { display: flex; gap: 8px; padding: 8px; background: #f2e7d4; }
.enemy-row > div { min-width: 0; }
.enemy-origin { display: block; margin-bottom: 3px; font-size: 14px; color: var(--ink-soft); }
.enemy-row strong, .enemy-level { margin-right: 10px; }
.enemy-portrait { width: 36px; height: 45px; object-fit: cover; background: #645d50; }
.enemy-loot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; margin-top: 4px; }
.quest-events { margin: 12px 0 0; }
.quest-events > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 0 8px; font: 600 17px/1.5 var(--serif); }
.quest-events > h3 > span, .quest-events > h3 > small { font: 400 14px/1.5 var(--sans); color: var(--ink-soft); }
.quest-events > h3 > small { margin-left: auto; }
.map-timeline { display: flex; overflow-x: auto; gap: 30px; padding: 6px 3px 14px; margin-bottom: 10px; scrollbar-width: thin; }
.map-step { position: relative; flex: 0 0 232px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #bca17c; border-radius: 3px; background: #f7ecd8; cursor: pointer; text-align: left; }
.map-step:not(:last-child)::after { content: "→"; position: absolute; right: -26px; color: var(--gold); font-size: 22px; pointer-events: none; }
.map-step.map-alternative::after { content: "或"; right: -25px; font-size: 16px; }
.map-step[aria-selected="true"] { border-color: var(--gold); background: #ead3a7; box-shadow: inset 0 -3px var(--gold); }
.map-step .stage-title { font-size: 16px; }
.map-step .stage-meta { font-size: 12px; }
.quest-stages { min-width: 0; }
.quest-stage { border: 1px solid #bca17c; background: #fff7e9; border-radius: 5px; }
.stage-heading { flex: 1; min-width: 0; }
.stage-meta { display: block; font-size: 14px; color: var(--ink-soft); }
/* The native map objects and markers sit on a dark tile, as they do on the quest map. */
.event-icon { flex: 0 0 52px; width: 52px; height: 52px; padding: 4px; object-fit: contain; background: #4a3d2e; border: 1px solid #8c6b45; border-radius: 4px; }
.event-icon.point-marker { padding: 9px; }
/* The game's white star, tinted purple; a filter works on local files, where CSS masks are blocked. */
.start-marker { display: grid; place-items: center; padding: 9px; }
.start-marker img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(53%) sepia(43%) saturate(1195%) hue-rotate(234deg) brightness(88%) contrast(92%); }
.popup { display: grid; grid-template-columns: 250px 1fr; gap: 22px; }
.portrait { position: relative; aspect-ratio: 1180 / 1600; align-self: start; position: sticky; top: 12px; }
.portrait img.pic { position: absolute; inset: 3.2% 3.6%; width: 92.8%; height: 93.6%; object-fit: cover; object-position: 50% 20%; background: #cdb48c; }
.portrait img.frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portrait.none .pic { display: none; }
.portrait.none::before { content: "无插图"; position: absolute; inset: 3.2% 3.6%; display: grid; place-items: center; background: #e2cfae; color: var(--ink-faint); font-family: var(--serif); }

.where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
.place {
  font: 600 14px/1.5 var(--serif); padding: 1px 6px; cursor: pointer; color: #4a3313; background: none;
  border: 9px solid transparent; border-width: 5px 10px;
  border-image: url(img/MapLocationLabel.webp) 27 31 28 27 fill / 5px 10px / 0 stretch;
}
.place small { font: 400 14px var(--sans); opacity: .75; margin-left: 4px; }
.meta { font-size: 14px; color: var(--ink-soft); margin: 0 0 6px; }

.section-title {
  font: 700 18px/38px var(--serif); color: var(--banner-ink); letter-spacing: .12em; height: 38px; padding-left: 14px; margin: 14px 0 8px;
  background: url(img/OverviewLabelV2.webp) left center / auto 100% no-repeat;
  text-shadow: 0 1px 2px #0007;
}
.cv { color: #8a5a1c; font-weight: 600; }
.section-title .cv { color: #ffd98a; }

.choices { display: grid; gap: 12px; }
.choice { min-width: 0; background: #fffbf3; border: 1px solid #c6ab84; border-radius: 6px; overflow: clip; cursor: default; }
.choice-number { display: grid; place-items: center; flex-shrink: 0; min-width: 30px; min-height: 30px; max-width: 8em; overflow-wrap: anywhere; padding: 0 6px; background: #6b4f2d; color: #fff9ee; border-radius: 5px; font: 700 14px var(--sans); }
.choice-copy { display: grid; gap: 7px; min-width: 0; flex: 1 1 150px; }
.choice-title { display: block; font: 700 18px/1.5 var(--serif); overflow-wrap: anywhere; }
.choice-consequence { color: #24622a; font: 400 16px/1.6 var(--sans); }
.choice > .choice-summary { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 16px; text-align: left; }
button.choice-summary { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
button.choice-summary:hover { background: #f6ecd9; }
.choice:has(> button.choice-summary:not(:disabled)) { cursor: pointer; }
button.choice-summary:disabled { cursor: default; color: inherit; opacity: 1; }
button.choice-summary:disabled > .choice-chevron { display: none; }
.choice.is-open > button.choice-summary { background: #f3e6cd; margin-bottom: 12px; }
.choice.is-open > button.choice-summary > .choice-chevron { transform: rotate(225deg); }
.choice:not(.is-open) > .choice-body [data-child-flow] { display: none; }
.shared-following { color: #416b62; font-size: 14px; margin: 10px 0 4px; }
.result-following { margin-left: 10px; color: #416b62; font-size: 14px; }
.choice-chevron { flex: 0 0 9px; height: 9px; margin: 7px 2px 0 4px; border-right: 2px solid #8b6a3c; border-bottom: 2px solid #8b6a3c; transform: rotate(45deg); transition: transform .15s; }
.choice-body { padding: 0 16px 16px; }
.choice-body > .outcomes:first-child, .choice-body > .outcomes:first-child > .outcome > .story:first-child { margin-top: 0; }
.choice-note { font-size: 14px; color: var(--ink-soft); margin: 4px 0 12px; }
.choice-requirements { font-size: 14px; color: var(--ink-soft); }
.req { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; font-size: 14px; }
.req .scope { color: var(--ink-soft); }
.tag { padding: 0 5px; border-radius: 2px; background: #f1e8d7; }
.tag.no { border-color: #c48b80; }
.req .trait-trigger img, .who .trait-trigger img { width: 24px; height: 24px; }
.who .trait-trigger { font: inherit; }

.check-rule { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; padding: 6px 10px; background: #efe2c9; border-left: 3px solid var(--gold); font-size: 16px; }
.check-rule img, .mark.check img { background: #4a3a2b; border-radius: 50%; padding: 3px; }
.check-rule img { height: 30px; width: 30px; object-fit: contain; }
.check-rule b { font: 600 16px/1.5 var(--serif); }

.outcomes { display: grid; gap: 14px; margin: 12px 0 0 14px; border-left: 2px solid #c6ab84; }
.outcome { position: relative; padding-top: 2px; }
/* The chronological rail belongs to the event; a single result stays on the same reading level. */
.outcomes > .outcome { margin-left: 14px; }
.outcomes > .outcome::before { content: ""; position: absolute; width: 14px; height: 2px; background: #c6ab84; left: -16px; top: 13px; }
.outcomes.single { margin-left: 0; border-left: 0; }
.outcomes.single > .outcome { margin-left: 0; }
.outcomes.single > .outcome::before { content: none; }
.outcome > .outcome { margin-top: 8px; }
.branch-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.node-label { display: inline-block; color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.gated-outcome > .cond { padding: 4px 6px; background: #f4eee3; border-radius: 3px; margin: 5px 0; }
.when { display: inline-block; font: 700 14px/1.8 var(--serif); padding: 0 8px; margin-right: 6px; border-radius: 2px; color: #fff; background: #7a6650; }
.when.success { background: #3f7c37; }
.when.failure { background: #9b3a2f; }
.when.chance { background: #9a6b1f; }
.when.if, .when.else { background: #5b5f7a; }
.outcome .cond { font-size: 14px; color: var(--ink-soft); }
.result-text { font-size: 14px; white-space: pre-line; margin: 6px 0; color: #5b4429; }
.effects { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fx { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; padding: 1px 8px; border-radius: 2px; background: #eadbc0; }
.fx img { height: 18px; }
.fx.good { background: #d5eacb; color: #1f5b25; }
.fx.bad { background: #f1d0c9; color: #842020; }
.fx.battle { background: #3b2d22; color: #f3dfc0; }
.fx .who { font-size: inherit; }
.next { margin-top: 6px; }
.next button, .link {
  border: 0; background: none; cursor: pointer; color: #7a4b12; font: 600 14px var(--serif); padding: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px;
}
.chain { font-size: 14px; color: var(--ink-soft); margin: 2px 0 8px; }
.back { margin-bottom: 6px; }

.welcome { margin: 0; }
.detail:has(> .welcome) { align-self: start; min-height: 0; padding: 0; }
.welcome img { display: block; width: 100%; height: auto; }

.lookup { padding: 0 22px; }
.filter-options, .appearance-options { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.filter-options > span { font-weight: 700; white-space: nowrap; }
.filter-options button, .appearance { border: 1px solid #b79c75; background: #fff9ee; border-radius: 4px; padding: 5px 10px; cursor: pointer; }
button[aria-pressed="true"] { background: #e3c99f; outline: 2px solid var(--gold); outline-offset: 1px; }
.appearance { position: relative; width: 100px; min-height: 104px; display: grid; grid-template-rows: 52px auto; align-content: end; justify-items: center; gap: 4px; padding: 20px 8px 6px; }
.appearance img { width: 52px; height: 52px; object-fit: contain; }
.appearance span { font-size: 14px; white-space: nowrap; }
.appearance-count { position: absolute; top: 4px; right: 6px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.appearance small, .check-rule small { font-size: 14px; }
.appearance:disabled { opacity: .4; cursor: default; }
/* The reverse lookup sits in the toolbar; opened, its chips take a full row under it. */
.advanced { order: 1; margin-left: auto; }
.advanced[open] { flex-basis: 100%; order: 3; }
.toolbar .search { order: 2; margin-left: 0; }
.toolbar:has(.advanced[open]) .search { margin-left: auto; }
.advanced .chips { padding: 6px 0 4px; }
.advanced > summary, .story > summary { cursor: pointer; color: var(--ink-soft); }
.story { margin: 10px 0; font-size: 14px; }
.outcomes > .story { margin: 0; }
.story[open] { padding: 8px; background: #fff8ec; }
.event-detail h2 { font: 700 22px var(--serif); margin: 12px 0; }
.event-flow { border-left: 2px solid #b99b70; padding-left: 14px; }
.flow-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 12px 0 8px; }
.flow-heading h4 { margin: 0; font: 600 16px/1.6 var(--serif); overflow-wrap: anywhere; }
.flow-step { margin-top: 18px; padding-top: 4px; border-top: 1px solid #d7c3a5; }
.flow-step > .flow-heading::before { content: "↓"; color: var(--ink-soft); }
.menu-conditions { margin: 8px 0 12px; }
.menu-empty { font-size: 14px; color: var(--ink-soft); }
.menu-condition { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; }
.condition-title { font-size: 14px; }
.menu-condition > .versions { margin: 0; min-width: 0; max-width: 100%; }
.condition-detail { font-size: 14px; color: var(--ink-soft); margin: 6px 0; }
.condition-detail > summary { cursor: pointer; }
.condition-detail > p { margin: 6px 0; max-width: 55em; }
.menu-condition > .condition-detail[open] { flex-basis: 100%; }
.result-branches { display: grid; gap: 10px; margin-top: 12px; }
.result-branch { min-width: 0; border-bottom: 1px solid #dbc6a5; padding: 6px 0; }
.result-label { flex-shrink: 0; font: 600 16px/1.6 var(--serif); }
.result-branch.success > .result-label { color: #24622a; }
.result-branch.failure > .result-label { color: #8a2323; }
.nested-choices { display: grid; gap: 10px; margin-top: 8px; }
.nested-choices > .choice { background: #fffef9; }
.action-relation { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 4px 0; }
.action-relation.all { color: #416b62; }
.action-relation.exclusive { color: #825a32; }
.choice[data-action-relation="all"] { border-left: 4px solid #688d7c; }
.choice[data-action-relation="exclusive"] { border-left: 4px solid #aa8054; }
.choice[data-action-relation] + .choice:not([data-action-relation]) { margin-top: 12px; }
.completion-result { border-top: 1px solid #d8c4a2; margin-top: 10px; padding-top: 10px; }
.nested-choices .choice-number { background: #a18459; min-width: 34px; }
.quest-visit > h4 { margin: 10px 0 8px; font: 600 16px/1.6 var(--serif); }
.quest-visit + .quest-visit { margin-top: 16px; padding-top: 12px; border-top: 1px solid #d7c3a5; }
.common-effects { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.ending-guide { margin: 16px 0; padding: 12px 16px; border-left: 3px solid #56783e; background: #eef3e5; }
.ending-guide h3 { margin: 0 0 6px; font: 600 18px/1.6 var(--serif); color: #31542b; }
.ending-guide ul { margin: 0; padding-left: 20px; }
.ending-guide li { margin: 4px 0; }
.door-reset { margin: 12px 0 0; color: var(--bad); }
.room-mural { margin: 0 0 12px; text-align: center; }
.room-mural > img { width: 240px; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
.room-mural figcaption { font-size: 16px; }
.mural-icon { background: #d5c5aa; padding: 2px; }
.room-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.room-door { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border: 1px solid #c7a77b; background: var(--paper); cursor: pointer; min-width: 0; }
.room-door > img { width: 96px; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
.room-door small { display: block; font-size: 14px; color: var(--ink-soft); }
.room-door strong { font-size: 14px; color: var(--bad); }
.room-door.correct-door { border: 2px solid #56783e; background: #eef3e5; }
.room-door.correct-door strong, .door-success { color: #31542b; }
.room-door[aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 2px; }
.room-door-panel { padding: 12px; margin-top: 12px; background: #fffaf0; border: 1px solid #c7a77b; }
.room-door-panel > p { margin: 0 0 8px; }
.ending-condition { margin: 8px 0 12px; font-size: 16px; }
.note-mark { cursor: help; color: #9a5a1c; font-weight: 600; }

.trigger-rule { font-size: 14px; color: var(--ink-soft); line-height: 1.65; margin: 5px 0 10px; overflow-wrap: anywhere; }
.future { margin-top: 24px; padding-top: 12px; border-top: 2px solid #b39468; }
.future > summary { cursor: pointer; font: 600 16px/1.5 var(--serif); }
.delayed-event { margin: 14px 0 0 8px; padding: 10px 12px; border-left: 3px solid #70917b; background: #f2f5ec; }
.delayed-event h5 { margin: 3px 0 8px; font: 700 16px/1.5 var(--serif); }
.delayed-link { font-size: 14px; }
.delayed-link button { font-size: 14px; }
.condition-note { margin: 8px 0 12px; font-size: 14px; color: var(--ink-soft); }
.condition-note p { margin: 4px 0; }
.encounter-series { display: grid; gap: 14px; }
.encounter-stage { border: 1px solid #c6ab84; border-radius: 6px; background: #f9efdc; }
.encounter-stage > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 14px; list-style: none; }
.encounter-stage > summary::-webkit-details-marker { display: none; }
.encounter-stage > summary > span:nth-child(2) { flex: 1; min-width: 0; }
.encounter-stage[open] > summary { border-bottom: 1px solid #dbc6a5; }
.encounter-stage[open] > summary > .choice-chevron { transform: rotate(225deg); }
/* Opened, the stage shows its effects in full, so the summary keeps only its badges. */
.encounter-stage[open] > summary .stage-overview > .fx { display: none; }
.stage-number { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #dfc8a3; font-size: 14px; font-weight: 700; }
.stage-title { display: block; font: 600 18px/1.5 var(--serif); }
.stage-overview { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.stage-overview .fx { font-size: 16px; }
.stage-body { padding: 12px; }
/* Conditional alternatives share one segmented switch at every depth. */
.versions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-bottom: 10px; }
.version-tab { max-width: min(26em, 100%); overflow-wrap: anywhere; margin: 0 -1px 4px 0; border: 1px solid #a88a5f; background: #fff7e9; color: var(--ink); padding: 5px 12px; font: 14px/1.5 var(--sans); text-align: left; cursor: pointer; }
.version-tab:hover { background: #f3e6cd; }
.version-tab[aria-pressed="true"] { background: #6b4f2d; border-color: #6b4f2d; color: #fff9ee; outline: 0; }
.version-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.versions .version-tab:first-of-type { border-radius: 4px 0 0 4px; }
.versions .version-tab:last-of-type { border-radius: 0 4px 4px 0; }
/* A result's effect on the quest's own progress. */
.progress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; padding: 5px 10px; border-left: 3px solid #5b6f8c; background: #e9edf2; font-size: 14px; }
.outcome > .progress:first-child { margin-top: 4px; }
.no-change { font-size: 14px; color: var(--ink-soft); }
.progress-label { font: 600 14px/1.5 var(--serif); color: #3d4f69; }
.progress-label::before { content: "➜ "; }
.progress-change { padding: 0 6px; border-radius: 2px; background: #d6deea; color: #2f3f57; }
.progress-link { flex-basis: 100%; color: var(--ink-soft); }
.progress-link .link { font-size: 14px; }
.stage-body > .req { margin-bottom: 12px; }
.encounter-timing { margin-left: 8px; font-size: 14px; color: var(--ink-soft); }
.mark.series { background: #ddd8ec; color: #554277; }
.fx { flex-wrap: wrap; }
.trait-trigger { display: inline-flex; align-items: center; gap: 4px; border: 0; border-bottom: 1px dotted currentColor; background: transparent; padding: 1px; cursor: help; font: inherit; }
.trait-trigger img { width: 28px; height: 28px; object-fit: contain; }
.trait-tooltip { position: fixed; z-index: 100; width: max-content; max-width: min(350px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; background: #fff9ee; color: var(--ink); border: 2px solid var(--gold); border-radius: 4px; padding: 12px 16px; box-shadow: 0 5px 20px #0005; }
.trait-tooltip.battle-tooltip { width: 620px; max-width: calc(100vw - 16px); max-height: min(70vh, 600px); }
.battle-tooltip > strong { display: block; margin-bottom: 8px; font: 600 18px/1.5 var(--serif); }
.battle-tooltip .battle-setting { margin-bottom: 8px; }
.trait-tooltip ul { margin: 6px 0 0; padding-left: 20px; }
.check-rule small { flex-basis: 100%; }
.object-thumb { object-fit: contain; }
button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.return-candidates { display: none; }
[hidden] { display: none !important; }

@media (max-width: 900px) {
  .window { min-height: 100vh; }
  .quest-info:has(> .quest-bosses) { grid-template-columns: minmax(0, 1fr); }
  .quest-browser { padding: 4px 12px 24px; }
  .reputation-rail { min-width: 800px; }
  .quest-catalog { padding: 0; }
  .quest-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .quest-view .detail { padding: 6px 6px 16px; }
  .quest-heading .quest-stars img { width: 14px; height: 18px; }
  .quest-facts { gap: 4px 10px; }
  .quest-modifiers { margin-left: 0; }
  .return-candidates { display: inline-block; border: 1px solid #b79c75; background: #fff9ee; padding: 6px 10px; cursor: pointer; }
  body { padding: 0; }
  .titlebar { margin: 10px 8px 6px; border: 0; background: #59432c; padding: 10px; }
  .titlebar h1 { font-size: 24px; }
  .tabs { margin-left: 0; flex-wrap: wrap; }
  .tabs button { padding: 6px 8px; }
  .toolbar .filter-options { flex-basis: 100%; }
  .search { margin-left: 0; flex: 1 1 180px; max-width: 260px; }
  .lookup { padding: 0 12px; }
  .toolbar, .chips { padding-left: 12px; padding-right: 12px; }
  .panes { grid-template-columns: 1fr; padding: 0 8px 12px; }
  .choice > .choice-summary { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .choice-body { padding: 0 6px 10px; }
  .outcomes { margin-left: 0; }
  .outcomes > .outcome { margin-left: 8px; }
  .outcomes > .outcome::before { width: 8px; left: -10px; }
  .nested-choices .choice > .choice-summary { padding: 10px 30px 10px 8px; }
  .nested-choices .choice > .choice-body { padding: 0 3px 10px; }
  .stage-body { padding: 10px 8px; }
  .list-pane { position: static; max-height: 52vh; min-height: 0; }
  .popup { grid-template-columns: 1fr; }
  .portrait { position: relative; width: 160px; top: 0; }
}

@media (max-width: 480px) {
  .nested-choices > .choice { border: 0; border-top: 1px solid #c6ab84; border-radius: 0; background: transparent; }
  .nested-choices .choice > .choice-summary { padding: 10px 0; }
  .nested-choices .choice > .choice-body { padding: 0 0 10px; }
  .quest-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .quest-card { grid-template-columns: 40px minmax(0, 1fr); }
  .quest-name { font-size: 16px; letter-spacing: .06em; }
  .quest-spine { padding: 5px 2px; gap: 2px; }
}

/* Language menu: the same control as the other LudBase sites, in this site's colours. */
.language-menu { position: relative; flex: 0 0 40px; width: 40px; height: 40px; align-self: center; margin-left: 12px; }
.language-menu summary { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e9d6bb99; border-bottom-width: 3px; border-radius: 50%; background: #fff9ee1f; color: #fff6e6; font: 500 14px/1 var(--sans); cursor: pointer; list-style: none; user-select: none; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary:hover, .language-menu summary:focus-visible { border-color: #f2cf96; box-shadow: 0 4px 12px #f2cf9640; }
.language-menu-list { position: absolute; inset: calc(100% + 8px) 0 auto auto; z-index: 8; display: grid; min-width: 72px; overflow: hidden; border: 1px solid #b79c75; border-radius: 6px; background: #fff9ee; box-shadow: 0 8px 22px #2a211959; }
.language-menu-list a { padding: 8px 12px; color: var(--ink); font-size: 14px; text-align: center; text-decoration: none; }
.language-menu-list a:hover, .language-menu-list a[aria-current="true"] { background: #f0dcc0; color: #734318; }
@media (max-width: 900px) {
  .titlebar { position: relative; }
  .site-name { padding-right: 46px; }
  .language-menu { position: absolute; top: 10px; right: 10px; margin: 0; }
}

/* English page: Latin fonts, and the labels drawn by CSS. */
:root:lang(en) {
  --serif: "Noto Serif", Georgia, serif;
  --sans: "Noto Sans", "Segoe UI", Arial, sans-serif;
}
@media (max-width: 480px) { .site-name h1 { font-size: 20px; } }
:lang(en) .map-step.map-alternative::after { content: "or"; }
:lang(en) .portrait.none::before { content: "No art"; }
:lang(en) .quest-name { text-orientation: mixed; font-size: 16px; line-height: 1.25; letter-spacing: .02em; }
:lang(en) .appearance-options { align-items: stretch; }
:lang(en) .appearance { align-content: start; }
:lang(en) .appearance span { white-space: normal; text-align: center; font-size: 13px; line-height: 1.2; }