/* Quest UI, later passes: dialog services, scrollbars, zone banner strip, HUD clearance, waypoint list, act titles, and the quest log (the character window's Quests tab, at the end). Linked after quest.css. */
.quest-dialog { scrollbar-color: #a9772c #100b06; scrollbar-width: thin; }
.quest-dialog::-webkit-scrollbar { width: 8px; }
.quest-dialog::-webkit-scrollbar-track { background: #100b06; box-shadow: inset 0 0 0 1px rgba(205, 157, 65, .2); }
.quest-dialog::-webkit-scrollbar-thumb { border: 2px solid #100b06; border-radius: 6px; background: linear-gradient(90deg, #6f4819, #c29442, #704917); }
.quest-dialog::-webkit-scrollbar-thumb:hover { background: #d1a651; }
/* The zone art already communicates discovery with its crest. Removing the
redundant kicker keeps the title clear, while the area metadata gets its own
opaque reading strip instead of sitting on the world behind the frame. */
.zone-banner { padding: 19px 24px 22px; }
.zone-banner > small { display: none; }
.zone-banner strong { margin: 0 0 9px; }
.zone-banner span { display: block; width: fit-content; margin: 0 auto; padding: 3px 11px 4px; color: #e1cda3; font-size: 14px; line-height: 1.25; background: rgba(13, 8, 4, .88); box-shadow: 0 0 0 1px rgba(210, 166, 77, .22), 0 5px 12px rgba(0, 0, 0, .3); }
/* Compact HUD clearance. */
.quest-panel { top:220px; max-height:calc(100vh - 220px - var(--hud-height,70px) - 98px); }
.level-addons { top:auto; bottom:calc(var(--hud-height,70px) + 90px); }
#questUI button:not(.quest-row):not(.waypoint-row):not([aria-label]) { border:12px solid transparent; border-image:url('assets/gen/ui/button.webp') 38 90 fill / 12px 28px / 0 stretch; background:none; padding:3px 18px; }
#questUI button:not(.quest-row):not(.waypoint-row):not([aria-label]):hover { border-image-source:url('assets/gen/ui/button_hover.webp'); background:none; }
#questUI header > button,#questUI .quest-panel > header button { border-image:none; border:1px solid #81613b; background:#211810; min-width:40px; height:40px; padding:0; }
@media (max-width:759px) { .quest-panel { top:220px; right:12px; width:min(270px,calc(100vw - 24px)); max-height:calc(100vh - 420px); } .level-addons { bottom:220px; } }
.quest-panel { top:calc(clamp(168px,14vw,248px) + 62px); max-height:calc(100vh - clamp(168px,14vw,248px) - 62px - var(--hud-height,70px) - 105px); }
@media (max-width:759px) { .quest-panel { top:220px; max-height:calc(100vh - 420px); } }
#questUI button:not(.quest-row):not(.waypoint-row):not([aria-label]),#questUI button:not(.quest-row):not(.waypoint-row):not([aria-label]):hover { border-image:none; border:1px solid #98703c; background:linear-gradient(#43301e,#21170f); padding:7px 14px; }
#questUI .quest-panel > header button,#questUI .quest-dialog > header button { border-image:none; background:#211810; }
@media (max-width:759px) { .quest-panel { top:290px; max-height:calc(100vh - 550px); } .level-addons { bottom:280px; } }
/* Waypoints: a clean list instead of stacked ornate buttons */
.waypoint-dialog { width: min(560px, calc(100vw - 32px)); }
.waypoint-dialog > header { position: relative; }
.waypoint-dialog h3 { margin: 18px 4px 8px; color: #d9c08a; font: 700 13px Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
#questUI .waypoint-row { display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; min-height: 54px; margin: 0 0 6px; padding: 8px 14px; border: 1px solid rgba(214, 170, 92, .2); border-image: none; border-radius: 8px; background: linear-gradient(rgba(255, 244, 220, .045), rgba(0, 0, 0, .18)); color: #f2e6c8; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
#questUI .waypoint-row:hover { border-color: rgba(255, 212, 110, .6); background: linear-gradient(rgba(255, 212, 110, .12), rgba(0, 0, 0, .12)); }
#questUI .waypoint-row:active { transform: scale(.99); }
.waypoint-row .waypoint-gem { grid-row: 1 / 3; width: 14px; height: 14px; margin-left: 5px; transform: rotate(45deg); border: 1px solid #bfe6ff; background: radial-gradient(circle at 35% 35%, #e9f8ff, #4aa7ff 55%, #1a4a8c); box-shadow: 0 0 10px rgba(90, 170, 255, .75); }
.waypoint-row span { font: 600 17px/1.15 'EB Garamond', Georgia, serif; }
.waypoint-row small { grid-column: 2; color: #b9ae96; font: 13px/1.2 'EB Garamond', Georgia, serif; }
.waypoint-row em { grid-row: 1 / 3; grid-column: 3; padding: 3px 9px; border: 1px solid rgba(214, 170, 92, .35); border-radius: 999px; color: #e8d8a8; font: 600 13px Cinzel, Georgia, serif; font-style: normal; }
#questUI .waypoint-row.here { border-color: rgba(255, 212, 90, .85); background: linear-gradient(rgba(255, 212, 90, .16), rgba(0, 0, 0, .1)); cursor: default; }
.waypoint-row.here small { color: #ffd45a; }
#questUI .waypoint-row.off { opacity: .5; cursor: default; }
#questUI .waypoint-row.off:hover { border-color: rgba(214, 170, 92, .2); background: linear-gradient(rgba(255, 244, 220, .045), rgba(0, 0, 0, .18)); }
.waypoint-row.off .waypoint-gem { border-color: #6d6a64; background: radial-gradient(circle at 35% 35%, #9a968d, #4a4741 60%, #26241f); box-shadow: none; }
.waypoint-row .waypoint-objective { display: inline-block; width: 8px; height: 8px; margin: 0 0 2px 8px; border-radius: 50%; background: #ffd45a; box-shadow: 0 0 6px #ffd45a; vertical-align: middle; }
#questUI .waypoint-close { position: absolute; right: 2px; top: 4px; display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0 0 2px; border: 1px solid rgba(214, 170, 92, .5); border-image: none; border-radius: 50%; background: rgba(20, 13, 8, .7); color: #f2e6c8; font: 400 24px/1 Georgia, serif; }
#questUI .waypoint-close:hover { border-color: #ffd45a; color: #fff4d6; }
/* ACT III: act titles stay legible over the ornament (a long title crosses its centre gem). */
.act-title strong { position: relative; text-shadow: 0 0 2px #0b0704, 0 0 4px #0b0704, 0 2px 10px rgba(0, 0, 0, .9); }
.act-title small, .act-title span { position: relative; text-shadow: 0 0 3px #000, 0 0 6px #000; }
/* END ACT III */
/* ============ The quest log: the character window's Quests tab (src/questui/log.js, after the owner's mockup) ============
The window keeps the shared frame (ui-windows.css .cw-frame: panel_frame.webp as a nine-slice whose corner scrollwork
sits wholly in its corner slices; only the plain rails stretch) and its close medallion, with no nameplate: the sidebar
opens with its own "Quests" heading. It is 1000 px wide (src/ui/character.js QUEST_WINDOW_WIDTH) and its content
keeps 36 px from the window's edge on all four sides, with no inner gold rule for the content to cross. The pictures:
the owner's quest-window sheet (assets/gen/ui/questlog, tools/cut_questlog_art.py), the game's marker and reward art,
and each quest's header and thumbnail (src/data/questArt.js). Phones: mobile.css. */
:root { --ql-gold: #eac46c; --ql-ink: #f2e5c6; --ql-dim: #b5a585; --ql-line: rgba(214, 170, 92, .3); }
#characterWindow[data-tab="quests"] { width: 1000px; }
#characterWindow[data-tab="quests"] .cw-frame::before { box-shadow: inset 0 0 45px rgba(0, 0, 0, .66); }
#characterWindow[data-tab="quests"] .cw-body { inset: 14px; }
.cw-quest-host { height: 100%; color: var(--ql-ink); }
.ql { display: grid; grid-template-columns: 306px minmax(0, 1fr); column-gap: 24px; height: 100%; min-height: 0; }
.ql img { -webkit-user-drag: none; user-select: none; }
/* ---- the sidebar: "Quests", the groups and their cards, the quest options ---- */
.ql-side { display: flex; flex-direction: column; min-height: 0; padding-right: 16px; border-right: 1px solid var(--ql-line); }
.ql-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 2px 12px; }
.ql-side-head h2 { margin: 0; color: #f4e3b9; font: 700 34px/1 Cinzel, Georgia, serif; letter-spacing: .03em; text-shadow: 0 2px 3px #000; }
.ql-diff { color: var(--ql-dim); font: 700 11px/1 Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.ql-list { position: relative; flex: 1; min-height: 0; overflow: hidden auto; margin-right: -10px; padding: 2px 10px 6px 2px; overscroll-behavior: contain; }
.ql-group + .ql-group { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(214, 170, 92, .18); }
.ql-group h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px 2px; color: var(--ql-gold); font: 700 15px/1 Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.ql-group h3 b { font-weight: 700; }
.ql-gi { flex: none; width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.ql-empty { margin: 8px 2px; color: var(--ql-dim); font: italic 16px/1.4 'EB Garamond', Georgia, serif; }
/* A card: its picture with the state marker on its left edge, the name and "Lv N · zone", and the tracked quest's pin.
Two IDs outrank the shared bronze button rules (ui-layout.css) without !important. */
#ui #characterWindow .ql-card { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 68px; margin: 0 0 8px; padding: 6px 10px 6px 7px; border: 1px solid rgba(176, 134, 68, .42); border-radius: 6px; background: linear-gradient(rgba(36, 26, 16, .82), rgba(14, 10, 6, .9)); box-shadow: inset 0 1px rgba(255, 230, 170, .05); color: var(--ql-ink); text-align: left; cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s; }
#ui #characterWindow .ql-card:hover { border-color: rgba(236, 190, 100, .8); background: linear-gradient(rgba(52, 37, 21, .86), rgba(18, 12, 7, .92)); }
#ui #characterWindow .ql-card.selected { border: 1px solid #f0c060; background: linear-gradient(rgba(84, 58, 26, .78), rgba(28, 18, 9, .92)); box-shadow: 0 0 0 1px rgba(46, 28, 8, .95), 0 0 14px rgba(245, 185, 80, .38), inset 0 0 16px rgba(255, 205, 115, .12); }
#ui #characterWindow .ql-card:active { transform: scale(.99); }
#ui #characterWindow .ql-card:focus-visible { outline: 2px solid #ffd66c; outline-offset: 2px; }
.ql-thumb { position: relative; flex: none; width: 88px; height: 55px; }
.ql-thumb .qa { border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 2px 5px rgba(0, 0, 0, .5); }
.ql-mark { position: absolute; z-index: 2; left: 2px; top: 50%; display: grid; place-items: center; width: 28px; height: 30px; transform: translateY(-50%); filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 3px rgba(0, 0, 0, .7)); }
.ql-mark img { width: 100%; height: 100%; object-fit: contain; }
.ql-mark-main img { width: 26px; height: 26px; }
/* The check of a finished quest (and of the Completed heading): a small green seal drawn in CSS. */
.ql-check { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid #c8f0b0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6fd06a, #2f8a36 60%, #1c5a22); box-shadow: 0 0 0 1px #0d2a10, 0 0 6px rgba(90, 200, 90, .45); }
.ql-check::after { content: ''; width: 9px; height: 5px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.ql-mark.ql-check { width: 24px; height: 24px; left: 4px; }
/* A completed quest's check sits in the card's top-right corner, off the picture (owner, 2026-09-26). */
.ql-card > .ql-mark-done.ql-check { left: auto; right: 7px; top: 7px; width: 20px; height: 20px; transform: none; }
.ql-card.ql-done .ql-card-text { padding-right: 22px; } /* (a long title wraps before the check) */
.ql-gi.ql-check { width: 22px; height: 22px; }
.ql-card-text { display: grid; flex: 1; gap: 4px; min-width: 0; }
.ql-card-text b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #f5e8c7; font: 600 17px/1.15 'EB Garamond', Georgia, serif; text-wrap: balance; }
.ql-card-text small { overflow: hidden; color: var(--ql-dim); font: 14px/1.2 'EB Garamond', Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.ql-card.ql-done .ql-card-text b { color: #d6c9ad; }
.ql-pin { flex: none; width: 21px; height: auto; margin-left: -2px; filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 5px rgba(255, 190, 80, .35)); }
.ql-options { flex: none; margin: 8px 0 0; padding: 10px 2px 0; border-top: 1px solid rgba(214, 170, 92, .18); color: var(--ql-dim); font: 15px/1.3 'EB Garamond', Georgia, serif; }
.ql-options summary { cursor: pointer; color: #c3ad7b; font: 700 12px/1 Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase; list-style: none; }
.ql-options summary::-webkit-details-marker { display: none; }
.ql-options summary::before { content: '▸'; display: inline-block; width: 14px; }
.ql-options[open] summary::before { content: '▾'; }
.ql-options-body { display: grid; gap: 8px; padding: 10px 0 2px; }
.ql-options label { display: flex; align-items: center; gap: 8px; }
.ql-options select { min-height: 30px; padding: 0 8px; border: 1px solid rgba(200, 160, 74, .4); border-radius: 4px; color: #f2e6c8; background: #1d140c; font: inherit; }
.ql-options small { line-height: 1.3; }
/* ---- a quest's picture: painted art, or a placeholder (src/data/questArt.js): a scene cropped with object-position,
or the zone's terrain tiled at its painted scale under a dusk shade with the subject standing on it ---- */
.qa { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; background: #150f0a; }
.qa-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qa-ground { position: absolute; inset: 0; background: center / 256px repeat; }
.qa-thumb .qa-ground { background-size: 96px; }
.qa-terrain::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 80% at 62% 42%, rgba(255, 196, 110, .1), transparent 60%), linear-gradient(rgba(10, 7, 4, .34), rgba(10, 7, 4, .58)); }
.qa-header.qa-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10, 7, 4, 0) 34%, rgba(10, 7, 4, .5) 62%, rgba(10, 7, 4, .78)); } /* a painted scene is busy: a shade under the title keeps it legible */
.qa-subject { position: absolute; z-index: 2; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .8)); }
.qa-header .qa-subject { right: 9%; top: 9%; width: 26%; height: 56%; object-position: 50% 50%; }
.qa-header .qa-trophy { top: auto; bottom: 6%; right: 6%; width: 32%; height: 88%; object-position: 50% 100%; }
.qa-thumb .qa-subject { inset: 9% 16%; width: 68%; height: 82%; object-position: 50% 50%; }
.qa-subject:not(.qa-trophy) { filter: drop-shadow(0 0 8px rgba(255, 190, 90, .35)) drop-shadow(0 4px 6px rgba(0, 0, 0, .8)); }
/* ---- the detail pane: the picture with the title over its lower edge, then the sections, then the buttons ---- */
.ql-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ql-scroll { flex: 1; min-height: 0; overflow: hidden auto; margin-right: -14px; padding: 0 14px 10px 0; overscroll-behavior: contain; }
.ql-hero { position: relative; height: 176px; }
.ql-hero .qa { position: absolute; inset: 0; border-radius: 5px 5px 0 0; -webkit-mask-image: linear-gradient(#000 48%, rgba(0, 0, 0, .55) 74%, transparent 100%); mask-image: linear-gradient(#000 48%, rgba(0, 0, 0, .55) 74%, transparent 100%); }
.ql-title { position: absolute; z-index: 3; left: 16px; right: 18px; bottom: 0; display: flex; align-items: flex-end; gap: 14px; }
.ql-banner { flex: none; width: 48px; height: auto; margin-bottom: 4px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .85)); } /* the quest's banner (src/data/questArt.js), as on the HUD tracker */
.ql-title-text { min-width: 0; }
.qa-terrain:has(.qa-trophy) + .ql-title { right: 34%; } /* a trophy stands on the right, down to the ground: the title wraps before it */
.ql-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--ql-gold); font: 700 13px/1 Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .9); }
.ql-kicker-icon { width: 20px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.ql-title h2 { margin: 0; color: #fcedcc; font: 700 34px/1.06 Cinzel, Georgia, serif; letter-spacing: .01em; text-shadow: 0 2px 4px #000, 0 0 18px rgba(0, 0, 0, .85); text-wrap: balance; }
.ql-meta { margin: 5px 0 0; color: #eadbb9; font: 18px/1.2 'EB Garamond', Georgia, serif; text-shadow: 0 1px 3px #000; }
/* Dividers from the owner's sheet: the ends and centre ornament keep their painted size; only the plain rule repeats. */
.ql-div { display: flex; align-items: center; height: 22px; margin: 14px 0; }
.ql-div > img { flex: none; width: auto; height: 100%; }
.ql-div-rule { flex: 1; height: 100%; background: url('assets/gen/ui/questlog/divider_thin_rule.webp') left center / auto 100% repeat-x; }
.ql-div-ornate { height: 26px; margin: 6px 0 8px; }
.ql-div-ornate .ql-div-rule { background-image: url('assets/gen/ui/questlog/divider_ornate_rule.webp'); }
.ql-div-plain { height: 12px; margin: 9px 0; opacity: .88; }
.ql-div-plain .ql-div-rule { background-image: url('assets/gen/ui/questlog/divider_plain_rule.webp'); }
.ql-copy { margin: 0; color: #efe2c6; font: 18px/1.38 'EB Garamond', Georgia, serif; text-wrap: pretty; }
.ql-section h3 { margin: 0 0 8px; color: var(--ql-gold); font: 700 15px/1 Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
/* Objectives: done ones checked, the current ones open with their progress, later ones locked as "???". */
.ql-objectives ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ql-obj { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 14px; }
.ql-box { width: 21px; height: 21px; margin-top: 1px; border: 1.5px solid #c99a4c; border-radius: 3px; background: rgba(10, 7, 4, .65); box-shadow: inset 0 0 5px #000, 0 0 0 1px rgba(0, 0, 0, .5); }
.ql-obj-done .ql-box { border-color: #e2b45a; background: url("data:image/svg+xml;utf8,") center / 16px no-repeat, rgba(40, 28, 12, .8); }
.ql-lock { border-color: rgba(170, 138, 90, .45); background: url("data:image/svg+xml;utf8,") center / 14px no-repeat, rgba(10, 7, 4, .55); }
.ql-obj > span { display: grid; gap: 2px; min-width: 0; }
.ql-obj > span > b { color: #f4e7c8; font: 500 17px/1.3 'EB Garamond', Georgia, serif; text-wrap: pretty; }
.ql-obj > span > small, .ql-obj time, .ql-obj em { color: var(--ql-dim); font: 14px/1.25 'EB Garamond', Georgia, serif; }
.ql-obj em { color: #ffb080; font-style: italic; }
.ql-obj time { color: #ffcf8a; font-variant-numeric: tabular-nums; }
.ql-obj-done > span > b { color: #b4a68a; }
.ql-obj-locked > span > b { color: #8e826b; letter-spacing: .24em; }
.ql-obj-return > span > b { color: var(--ql-gold); }
.ql-progress { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.ql-progress i { width: 132px; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.ql-progress i b { display: block; height: 100%; background: linear-gradient(90deg, #b6771f, #ffd45a); }
/* Rewards: a tile per reward with its picture, then the amount and what it is. A random item shows its slot's picture
in a rim of its quality's colour (src/items/core.js QCOLOR) with a "?", and reads "Rare weapon", "Random". */
.ql-rewards ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px 10px; margin: 0; padding: 0; list-style: none; }
.ql-reward { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; text-align: center; }
.ql-tile { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(196, 150, 76, .6); border-radius: 5px; background: radial-gradient(circle at 50% 42%, #2c2015, #0f0b07 76%); box-shadow: inset 0 0 12px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .55); }
.ql-tile img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)); }
.ql-r-item .ql-tile img, .ql-r-potion .ql-tile img { width: 48px; height: 48px; }
.ql-reward[class*=" q-"] .ql-tile { border: 1.5px solid var(--q-rim); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), inset 0 0 18px color-mix(in srgb, var(--q-rim) 26%, transparent), 0 0 10px color-mix(in srgb, var(--q-rim) 38%, transparent); }
.ql-random .ql-tile img { opacity: .82; filter: saturate(.55) brightness(.82) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)); }
.ql-q { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--q-rim, #c8a86a); box-shadow: 0 0 0 1.5px rgba(16, 10, 4, .9), 0 0 6px var(--q-rim, #c8a86a); color: #170e05; font: 700 13px/1 Georgia, serif; font-style: normal; }
.ql-rv { display: grid; gap: 2px; min-width: 0; }
.ql-rv b { color: #f5e9cd; font: 600 16px/1.15 'EB Garamond', Georgia, serif; text-wrap: balance; }
.ql-rv small { color: var(--ql-dim); font: 14px/1.2 'EB Garamond', Georgia, serif; }
.ql-r-xp .ql-rv b, .ql-r-gold .ql-rv b { font: 700 19px/1.1 'EB Garamond', Georgia, serif; font-variant-numeric: tabular-nums; }
.ql-r-xp .ql-rv small, .ql-r-gold .ql-rv small { color: var(--ql-gold); }
.ql-reward[class*=" q-"] .ql-rv b { color: var(--q-rim); }
.ql-reward.q-magic .ql-rv b { color: #9a9aff; } /* the magic blue, lifted for reading on the dark panel */
.ql-done .ql-rewards .ql-tile { opacity: .82; }
/* The giver's line. */
.ql-quote { margin: 0; padding: 0 24px; text-align: center; }
.ql-quote p { margin: 0; color: #dccdb0; font: italic 18px/1.4 'EB Garamond', Georgia, serif; text-wrap: balance; }
.ql-quote footer { margin: 5px 0 0; color: #bba985; font: italic 16px/1.2 'EB Garamond', Georgia, serif; }
/* The buttons: Track quest (Tracking on the tracked quest), Show on map, and Abandon for a side quest under way. */
.ql-actions { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 0 0; border-top: 1px solid rgba(214, 170, 92, .18); }
.ql-actions-note p { margin: 0; color: var(--ql-dim); font: italic 17px/1.3 'EB Garamond', Georgia, serif; }
.ql-actions-note b { color: var(--ql-ink); font-style: normal; }
#ui #characterWindow .ql-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 0; margin: 0; cursor: pointer; transition: filter .14s, box-shadow .14s, transform .14s; }
#ui #characterWindow .ql-btn:active { transform: scale(.97); }
#ui #characterWindow .ql-btn:focus-visible { outline: 2px solid #ffd66c; outline-offset: 2px; }
.ql-btn-icon { flex: none; width: auto; height: 26px; filter: drop-shadow(0 1px 2px #000); }
#ui #characterWindow .ql-track { min-width: 232px; height: 48px; padding: 0 26px; border: 1.5px solid #d9a64e; border-radius: 6px; background: linear-gradient(180deg, #6a4019 0%, #452711 50%, #2b170a 100%); box-shadow: inset 0 1px rgba(255, 216, 150, .32), inset 0 -2px 6px rgba(0, 0, 0, .45), 0 3px 10px rgba(0, 0, 0, .5); color: #fff0c8; font: 700 17px/1 Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 3px #140800; }
#ui #characterWindow .ql-track:hover { filter: brightness(1.12); box-shadow: inset 0 1px rgba(255, 216, 150, .4), inset 0 -2px 6px rgba(0, 0, 0, .4), 0 0 16px rgba(240, 170, 60, .45); }
#ui #characterWindow .ql-track.on { border-color: #ffd36a; background: linear-gradient(180deg, #7d5220 0%, #54330f 50%, #331c08 100%); box-shadow: inset 0 1px rgba(255, 226, 160, .45), inset 0 -2px 6px rgba(0, 0, 0, .4), 0 0 14px rgba(255, 196, 80, .5); }
#ui #characterWindow .ql-map { height: 44px; padding: 0 20px; border: 1px solid rgba(214, 170, 92, .62); border-radius: 5px; background: linear-gradient(rgba(40, 29, 17, .9), rgba(16, 11, 6, .95)); box-shadow: inset 0 1px rgba(255, 230, 170, .08), 0 2px 6px rgba(0, 0, 0, .45); color: #f1dfb2; font: 700 14px/1 Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
#ui #characterWindow .ql-map:hover { border-color: #f0c060; filter: brightness(1.12); }
#ui #characterWindow .ql-map .ql-btn-icon { height: 24px; }
#ui #characterWindow .ql-abandon { height: 40px; margin-left: auto; padding: 0 6px; border: 0; background: none; color: #cf9a86; font: 15px/1 'EB Garamond', Georgia, serif; }
#ui #characterWindow .ql-abandon:hover { color: #ffb8a0; text-decoration: underline; }
/* Scrollbars: thin and gold, like the other windows'. */
.ql-list, .ql-scroll { scrollbar-color: #a9772c #100b06; scrollbar-width: thin; }
.ql-list::-webkit-scrollbar, .ql-scroll::-webkit-scrollbar { width: 8px; }
.ql-list::-webkit-scrollbar-track, .ql-scroll::-webkit-scrollbar-track { background: #100b06; box-shadow: inset 0 0 0 1px rgba(205, 157, 65, .2); }
.ql-list::-webkit-scrollbar-thumb, .ql-scroll::-webkit-scrollbar-thumb { border: 2px solid #100b06; border-radius: 6px; background: linear-gradient(90deg, #6f4819, #c29442, #704917); }
@media (prefers-reduced-motion: reduce) { #ui #characterWindow :is(.ql-card, .ql-btn) { transition: none; } }
/* ============ The HUD quest tracker (#questTracker, src/questui/tracker.js, after the owner's mockup) ============
Under the square minimap, where the old tracker stood, and as compact: 340 px wide, the tracked quest expanded and at
most two more quests as cards. Three IDs outrank the generic button art (ui-layout.css), which stretched button.webp
around the old tracker's blocks. The phone's quest card restyles the same markup (mobile.css). */
#ui #questUI #questTracker { padding: 0 0 6px; border: 1px solid rgba(206, 162, 82, .45); border-radius: 10px; background: linear-gradient(rgba(26, 19, 12, .88), rgba(10, 8, 6, .86)); box-shadow: 0 10px 28px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 238, 190, .07); scrollbar-width: thin; scrollbar-color: #a9772c transparent; }
#ui #questUI #questTracker.collapsed { padding: 0; border-radius: 24px; }
#questTracker .qt-head { display: flex; align-items: center; gap: 8px; height: 42px; min-height: 0; padding: 0 7px 0 10px; }
#questTracker.collapsed .qt-head { gap: 6px; padding: 0 7px 0 8px; }
#ui #questUI #questTracker .qt-title { display: flex; align-items: center; gap: 8px; flex: none; width: auto; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-image: none; background: none; color: #f4e2b4; font: 700 19px/1 Cinzel, Georgia, serif; letter-spacing: .06em; text-shadow: 0 2px 3px #000; cursor: pointer; }
#questTracker .qt-emblem { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 5px rgba(255, 190, 80, .3)); }
#questTracker .qt-rule { flex: 1; display: flex; align-items: center; min-width: 0; height: 14px; }
#questTracker .qt-rule img { flex: none; width: auto; height: 100%; }
#questTracker .qt-rule i { flex: 1; height: 100%; background: url('assets/gen/ui/questlog/divider_thin_rule.webp') left center / auto 100% repeat-x; }
#ui #questUI #questTracker .qt-toggle { flex: none; display: grid; place-items: center; width: 30px; min-width: 0; height: 30px; min-height: 0; aspect-ratio: 1; /* (a true circle: the generic button's 40 px min-height made it an oval) */ margin: 0; padding: 0; border: 1.5px solid #b98b45; border-image: none; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2816, #120c07 75%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 220, 150, .15); cursor: pointer; }
#ui #questUI #questTracker .qt-toggle:hover { border-color: #f0c060; filter: brightness(1.15); }
#questTracker .qt-toggle i { width: 8px; height: 8px; margin-top: 4px; border: solid #f0cf86; border-width: 2px 0 0 2px; transform: rotate(45deg); }
#questTracker .qt-toggle.closed i { margin-top: -3px; transform: rotate(225deg); }
/* The cards: the tracked quest open (a lit gold bar down its left edge), the others compact with their progress. */
#questTracker .qt-list { display: grid; gap: 5px; padding: 0 7px; }
#ui #questUI #questTracker .qt-card { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; min-height: 0; margin: 0; padding: 6px 9px 7px 7px; border: 1px solid rgba(176, 134, 68, .36); border-image: none; border-radius: 6px; background: linear-gradient(rgba(40, 29, 18, .72), rgba(16, 11, 7, .8)); box-shadow: inset 0 1px rgba(255, 230, 170, .05); color: #ede1c4; text-align: left; transform: none; cursor: pointer; transition: border-color .14s, background .14s; }
#ui #questUI #questTracker .qt-card:hover { border-color: rgba(236, 190, 100, .7); background: linear-gradient(rgba(54, 39, 22, .8), rgba(20, 14, 8, .86)); }
#ui #questUI #questTracker .qt-card:active { transform: scale(.985); }
#ui #questUI #questTracker .qt-card:focus-visible { outline: 2px solid #ffd66c; outline-offset: 1px; }
#ui #questUI #questTracker .qt-open { padding-left: 13px; border-color: rgba(226, 180, 90, .72); background: linear-gradient(rgba(58, 41, 21, .8), rgba(20, 14, 8, .88)); }
#questTracker .qt-open::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: linear-gradient(#ffe7a1, #f0b84a 35%, #c98a2a); box-shadow: 0 0 8px rgba(255, 196, 80, .75); }
#questTracker .qt-banner { width: 34px; height: auto; margin-top: 1px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
#questTracker .qt-body { display: grid; gap: 1px; min-width: 0; }
#questTracker .qt-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: inherit; font: inherit; }
#questTracker .qt-name b { overflow: hidden; color: #f3e7ca; font: 600 17px/1.2 'EB Garamond', Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
#questTracker .qt-open .qt-name b { color: #f6c95e; font-weight: 700; }
#questTracker .qt-name small { flex: none; color: #c7b184; font: 14px/1 'EB Garamond', Georgia, serif; }
#questTracker .qt-sum { display: block; margin: 0; overflow: hidden; color: #cbbe9f; font: 14px/1.25 'EB Garamond', Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
#questTracker .qt-card .q-return { display: none; }
/* The open card's objectives: the current ones with a gold dot and gold count, done ones grey, later steps "???". */
#questTracker .qt-objs { display: grid; gap: 2px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(214, 170, 92, .22); }
#questTracker .qt-obj { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; column-gap: 7px; color: #b8ac92; font: 14px/1.3 'EB Garamond', Georgia, serif; }
#questTracker .qt-obj > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#questTracker .qt-obj b { color: #ab9f86; font: 600 14px/1 'EB Garamond', Georgia, serif; font-variant-numeric: tabular-nums; }
#questTracker .qt-current { align-items: start; color: #f1e4c6; }
#questTracker .qt-current > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
#questTracker .qt-current b { padding-top: 3px; color: #ffd45a; }
#questTracker .qt-dot { width: 12px; height: 12px; box-sizing: border-box; border: 1.5px solid #756c5c; border-radius: 50%; }
#questTracker .qt-current .qt-dot { margin-top: 3px; border-color: #f4c24f; background: radial-gradient(circle, #ffe08a 0 2.5px, #d99a2b 3.2px, transparent 3.8px); box-shadow: 0 0 6px rgba(255, 196, 80, .55); }
#questTracker .qt-done .qt-dot { border-color: #8a806c; background: radial-gradient(circle, #8a806c 0 2.5px, transparent 3px); }
#questTracker .qt-done > span { color: #9d927b; }
#questTracker .qt-locked .qt-dot { border-style: dotted; }
#questTracker .qt-locked > span { color: #857a66; letter-spacing: .2em; }
#questTracker .qt-obj time { color: #ffcf8a; font-variant-numeric: tabular-nums; }
#questTracker .counter-pop .qt-obj b { animation: counter-pop .2s; }
/* A compact card's progress: gold while under way, green with a check when ready to hand in. */
#questTracker .qt-bar { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
#questTracker .qt-track { flex: 1; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
#questTracker .qt-track b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b8781d, #ffd45a); }
#questTracker .qt-bar em { color: #e8d6a6; font: 600 14px/1 'EB Garamond', Georgia, serif; font-style: normal; font-variant-numeric: tabular-nums; }
#questTracker .qt-ready .qt-track b { background: linear-gradient(90deg, #3d9a3b, #86e274); box-shadow: 0 0 6px rgba(120, 225, 110, .5); }
#questTracker .qt-ready .qt-bar em { color: #93e684; }
#questTracker .qt-check { flex: none; display: grid; place-items: center; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid #9ff08e; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #56c152, #1f6d24); }
#questTracker .qt-check::after { content: ''; width: 6px; height: 3px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
/* "+N more", the Completed row and its list, the guide's Next line and a waiting reward. */
#ui #questUI #questTracker .qt-more { flex: none; width: auto; min-width: 0; height: 22px; margin: 0; padding: 0 7px; border: 1px solid rgba(214, 170, 92, .5); border-image: none; border-radius: 11px; background: rgba(40, 28, 15, .8); color: #e6cf98; font: 700 13px/1 'EB Garamond', Georgia, serif; cursor: pointer; }
#ui #questUI #questTracker .qt-more:hover { border-color: #f0c060; color: #fff0c8; }
#questTracker .qt-done { margin: 6px 7px 0; border-top: 1px solid rgba(214, 170, 92, .22); }
#ui #questUI #questTracker .qt-done-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 28px; margin: 0; padding: 0 4px; border: 0; border-image: none; background: none; color: #d0b986; font: 700 12px/1 Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#questTracker .qt-done-toggle b { font-weight: 700; }
#questTracker .qt-chev { width: 7px; height: 7px; margin: -4px 2px 0 3px; border: solid #d8bb7a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#questTracker .qt-done.open .qt-chev { margin-top: 3px; transform: rotate(225deg); }
#questTracker .qt-done-list { display: grid; gap: 1px; padding: 0 0 2px; }
#ui #questUI #questTracker .qt-done-item { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 3px 4px; border: 0; border-image: none; background: none; color: #cfc3a6; font: 14px/1.2 'EB Garamond', Georgia, serif; text-align: left; cursor: pointer; }
#ui #questUI #questTracker .qt-done-item:hover { color: #f6e7c4; }
#questTracker .qt-done-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#questTracker .qt-next .tracker-title { display: block; color: #f6c95e; font: 600 16px/1.25 'EB Garamond', Georgia, serif; }
#questTracker .qt-next .tracker-next-where { margin-top: 2px; color: #cbbe9f; font: 14px/1.3 'EB Garamond', Georgia, serif; }
#ui #questUI #questTracker .reward-waiting { display: block; width: calc(100% - 16px); min-height: 36px; margin: 8px 8px 0; padding: 0 10px; border: 1px solid rgba(255, 212, 90, .55); border-image: none; border-radius: 6px; background: rgba(255, 212, 90, .1); color: #ffe59b; font: 600 15px/1 'EB Garamond', Georgia, serif; }
@media (prefers-reduced-motion: reduce) { #ui #questUI #questTracker .qt-card { transition: none; } }