/* The Quest Log, its journal, the sealed door and the Quest Completed banner. */
.quest-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
#hud .quest-row { width: 100%; display: grid; grid-template-columns: 10px 1fr 14px; align-items: center; gap: 10px; padding: 9px 10px; text-align: left; border: 1px solid #9a82564d; border-radius: 3px; background: #e9deca4d; color: var(--ink); cursor: pointer; }
#hud .quest-row:hover, #hud .quest-row:focus-visible { background: #e9deca99; border-color: #8e7045; }
.quest-row > i { width: 8px; height: 8px; border-radius: 50%; background: #a5927180; box-shadow: inset 0 0 0 1px #77624066; }
.quest-row.active > i { background: #c28f35; box-shadow: 0 0 0 2px #c28f3533; }
.quest-row.complete > i { background: #5f8a4e; box-shadow: 0 0 0 2px #5f8a4e33; }
.quest-row strong { display: block; font: 15px Georgia, serif; }
.quest-row.complete strong { color: #4f6f3f; }
.quest-row small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--muted); }
#hud .quest-row .icon { width: 12px; height: 12px; opacity: .55; }
/* Errands sit under the quest they lead into, indented on a thread. */
.quest-errands { list-style: none; margin: 4px 0 0 14px; padding: 0 0 0 10px; border-left: 2px solid #9a82564d; display: grid; gap: 4px; }
#hud .quest-row.quest-errand { padding: 6px 9px; background: #e9deca2e; }
#hud .quest-errand em { display: block; margin-bottom: 1px; font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#hud .quest-errand strong { font-size: 13px; }
#hud .quest-errand small { font-size: 10px; }

#hud .quest-journal-panel { width: min(860px, calc(100vw - 32px)); max-width: none; }
.quest-journal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: start; }
.quest-blurb { margin: 0 0 14px; font: italic 15px/1.5 Georgia, serif; color: var(--ink); }
.quest-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 16px; font-size: 12px; line-height: 1.45; }
.quest-facts dt { color: var(--muted); }
.quest-facts dd { margin: 0; color: var(--ink); }
.quest-facts h4 { margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid #9a82564d; font: 13px Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: var(--rubric); }
.quest-needs, .quest-won { list-style: none; margin: 0 0 16px; padding: 0; font-size: 12px; }
.quest-needs li { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.quest-needs li.soft { color: var(--muted); padding-left: 21px; }
.quest-needs i { width: 14px; height: 14px; flex: none; display: grid; place-items: center; font-style: normal; font-size: 11px; line-height: 1; border-radius: 50%; }
.quest-needs .met { color: #4f6f3f; background: #5f8a4e24; }
.quest-needs .unmet { box-shadow: inset 0 0 0 1px #8a4a3a80; }
.quest-won li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
#hud .quest-won .icon { width: 24px; height: 24px; flex: none; }
.quest-entries { max-height: min(62vh, 560px); overflow: auto; padding-right: 8px; }
.quest-entries article { position: relative; padding: 0 0 13px 15px; border-left: 2px solid #9a82564d; }
.quest-entries article::before { content: ''; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #b9a67f; }
.quest-entries article.current { border-left-color: #92683c; }
.quest-entries article.current::before { background: #92683c; box-shadow: 0 0 0 3px #92683c26; }
.quest-entries h5 { margin: 0 0 3px; font: 13px Georgia, serif; letter-spacing: .03em; color: var(--rubric); }
.quest-entries p { margin: 0; font: 14px/1.6 Georgia, serif; color: var(--ink); }
.quest-entries article.done h5, .quest-entries article.done p { color: #7b6d57; text-decoration: line-through; text-decoration-color: #7b6d5766; text-decoration-thickness: 1px; }
.quest-entries .quest-note-line { margin-top: 6px; font-style: italic; }
.quest-unstarted { font-style: italic; }
.quest-song { margin: 6px 0 0; padding: 14px 16px; background: #e9deca73; border: 1px solid #9a82564d; border-radius: 3px; }
.quest-song figcaption { margin-bottom: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.quest-song p { margin: 0 0 9px; }
.quest-song p:last-child { margin: 0; }
.quest-song span { display: block; font: italic 14px/1.55 Georgia, serif; color: var(--ink); }
.quest-song span.lost { color: #a5927180; font-style: normal; letter-spacing: .3em; }
.quest-page p { font: 15px/1.7 Georgia, serif; color: var(--ink); margin: 0 0 12px; }
#hud .quest-page-panel { width: min(520px, calc(100vw - 32px)); }
/* A readable: the thing itself tucked in the corner, and its parts set as what they are. */
.quest-page { display: flow-root; }
.quest-page-art { float: right; width: 88px; height: 88px; margin: -6px -4px 6px 18px; transform: rotate(5deg); filter: drop-shadow(0 4px 5px #4a35202e); }
#hud .quest-page-art .icon { width: 100%; height: 100%; }
.quest-page .qp-to { font-style: italic; }
.quest-page .qp-sign { clear: both; margin: 18px 0 12px auto; width: max-content; max-width: 78%; padding-top: 6px; border-top: 1px solid #9a825680; text-align: right; font-style: italic; }
.qp-form { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 4px 14px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #9a82564d; border-radius: 3px; background: #e9deca4d; }
.qp-form dt { font: 10px ui-sans-serif, sans-serif; letter-spacing: .12em; color: var(--muted); }
.qp-form dd { margin: 0; font: 15px/1.6 Georgia, serif; color: var(--ink); }
.qp-form dd:last-of-type { color: var(--rubric); }
.quest-page .qp-margin { margin: 0 6% 14px 18px; padding: 2px 0 2px 12px; border-left: 2px solid #b08a5e80; font-style: italic; color: #7a5232; transform: rotate(-.6deg); }
/* A form in sections (the freight docket): a dashed rule between them, and each section's last figure in red. */
.qp-form .qp-break { grid-column: 1 / -1; margin: 5px 0; border-top: 1px dashed #9a825673; }
.qp-form dd:has(+ .qp-break) { color: var(--rubric); }
/* A rule boxed in red pencil twice over (Pell's notes), and a line underlined twice (Orvek's plans). */
.quest-page .qp-key { clear: both; width: max-content; max-width: calc(100% - 16px); margin: 6px auto 18px; padding: 3px 14px; font-style: italic; color: #6e2c25; border: 1.5px solid #8c3f3abf; border-radius: 4px 7px 5px 6px; outline: 1px solid #8c3f3a73; outline-offset: 3px; transform: rotate(-.7deg); }
.quest-page .qp-twice { text-decoration: underline double #6b1e24b3; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.quest-page .qp-inscription { clear: both; margin: 2px 0 14px; padding: 9px 8px; border-block: 1px solid #a9874b80; text-align: center; font-size: 13px; letter-spacing: .14em; color: #7a5b25; }
/* The charter's foot: ten seals hanging on their tags from the fold, the tenth still wet. */
.qp-seals { clear: both; display: flex; gap: 10px; width: max-content; max-width: 100%; margin: 2px auto 18px; padding: 0 10px; border-top: 2px solid #c4b089; }
.qp-seals i { position: relative; flex: none; width: 20px; height: 20px; margin-top: 11px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #b06a45, #7c3f29 56%, #4f2a1b); box-shadow: 0 1px 2px #2a1a0a55, inset 0 0 0 3px #3a1d1022; }
.qp-seals i:nth-child(even) { margin-top: 17px; }
.qp-seals i::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 4px; height: 11px; margin-left: -2px; background: #c9b58c; }
.qp-seals i:nth-child(even)::before { height: 17px; background: #b29a6c; }
.qp-seals i.wet { background: radial-gradient(circle at 36% 32%, #9be9d4, #22a596 54%, #136a63); }
.qp-seals i.wet::after { content: ''; position: absolute; left: 50%; top: 100%; width: 6px; height: 8px; margin: 2px 0 0 -3px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #7be0c8; opacity: 0; animation: qp-drip 3.4s ease-in 1s infinite; }
@keyframes qp-drip { 0%, 45% { opacity: 0; transform: translateY(-5px) scale(.5); } 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(12px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .qp-seals i.wet::after { animation: none; opacity: 1; } }
.quest-rubbing { display: grid; justify-items: center; gap: 12px; text-align: center; font: italic 14px/1.6 Georgia, serif; }
.quest-rubbing .seal-art { width: min(320px, 72vw); }
/* The sealed door. Rings and dials turn on CSS transforms round their own middle (0 0), the short way round. */
.seal-art { display: block; width: 100%; height: auto; }
.seal-art .seal-turn, .seal-leaf { transform-origin: 0 0; }
.seal-turn { transition: transform .5s cubic-bezier(.3, 1.32, .52, 1); }
.still .seal-turn { transition: none; }
.seal-leaf-at { display: none; }
#seal-door.open .seal-leaf-at { display: inline; }
#seal-door.open .seal-leaf { animation: seal-leaf .55s cubic-bezier(.3, 1.45, .5, 1) .3s both; }
.seal-glow { opacity: 0; }
#seal-door.open .seal-glow { animation: seal-glow 1.7s ease-out .5s both; }
@keyframes seal-leaf { from { opacity: 0; transform: scale(1.35) rotate(-8deg); } }
@keyframes seal-glow { 25% { opacity: 1; } to { opacity: .3; } }
#hud .quest-rings-panel { width: min(740px, calc(100vw - 32px)); }
.quest-rings { display: grid; grid-template-columns: minmax(0, 1fr) 196px; grid-template-areas: 'stage aside' 'knobs aside' 'note note'; gap: 6px 26px; align-items: start; }
.seal-stage { grid-area: stage; border-radius: 50%; box-shadow: 0 12px 28px #2a1e1055, 0 2px 5px #2a1e1040; }
.quest-rings aside { grid-area: aside; display: grid; gap: 14px; font: 13px/1.6 Georgia, serif; color: var(--ink); }
.quest-rings aside p { margin: 0; }
.quest-rings figure { margin: 0; }
.quest-rings figure .seal-art { transform: rotate(-2deg); }
.quest-rings figcaption { margin-top: 8px; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Three knobs of worn brass: a turning arrow either side of a knurled dial that wears the knob's sign. */
.seal-knobs { grid-area: knobs; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding-top: 14px; }
.seal-knob { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-items: center; gap: 4px 7px; }
.seal-dial { grid-column: 2; grid-row: 1; position: relative; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fdf0c4, #d6aa5c 38%, #9a6e2e 72%, #5e4019); box-shadow: 0 3px 6px #2a1a0a5c, 0 0 0 1px #4a3212b3, inset 0 1px 1px #fff6d699; }
.seal-dial i { position: absolute; inset: 2px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #fff1c400 0 2.2deg, #4a2f1080 3.6deg 6.4deg, #fff1c400 7.8deg 10deg); }
.seal-dial i::after { content: ''; position: absolute; left: 50%; top: -1px; width: 4px; height: 9px; margin-left: -2px; border-radius: 0 0 2px 2px; background: #3a250c; box-shadow: 0 1px 0 #fff3c966; }
.seal-dial svg { position: absolute; inset: 9px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f5dc9a, #c99a4e 60%, #a1742f); box-shadow: inset 0 1px 2px #3a250c99, 0 1px 0 #fff3c966; }
#hud .seal-knob .seal-knob-name { grid-column: 1 / -1; grid-row: 2; font: 11px Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#hud .seal-knob button { grid-row: 1; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid #7a5726; background: radial-gradient(circle at 36% 30%, #fbecbf, #dcb46a 42%, #a97d39 85%); box-shadow: 0 2px 3px #3a28144d, inset 0 -2px 3px #6e4b1a59, inset 0 1px 1px #fff8dd; color: #3b2710; cursor: pointer; transition: filter .15s, transform .08s, box-shadow .08s; }
#hud .seal-knob button svg { width: 20px; height: 20px; }
#hud .seal-knob button:hover { filter: brightness(1.07) saturate(1.05); border-color: #6a4a1e; }
#hud .seal-knob button:active { transform: translateY(1px); box-shadow: 0 1px 1px #3a28144d, inset 0 2px 3px #6e4b1a73; }
#hud .seal-knob button:focus-visible { outline: 2px solid #8a5a24; outline-offset: 2px; }
#hud .quest-rings .seal-note { grid-area: note; min-height: 1.6em; margin: 4px 0 0; text-align: center; font: italic 14px/1.6 Georgia, serif; color: var(--rubric); }
@media (max-width: 760px) {
  .quest-rings { grid-template-areas: 'stage' 'knobs' 'note' 'aside'; }
  .quest-rings aside { display: flex; align-items: center; gap: 14px; }
  .quest-rings figure { flex: 0 0 112px; }
  .seal-knobs { gap: 8px; justify-content: space-evenly; padding-top: 10px; }
  .seal-knob { gap: 3px 0; }
  .seal-dial { width: 38px; height: 38px; }
  .seal-dial svg { inset: 7px; width: 24px; height: 24px; }
  #hud .seal-knob button { width: 30px; height: 30px; }
  #hud .seal-knob button svg { width: 18px; height: 18px; }
}
@media (max-width: 380px) {
  .seal-dial { width: 32px; height: 32px; }
  .seal-dial svg { inset: 5px; width: 22px; height: 22px; }
  #hud .seal-knob button { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .seal-turn, #hud .seal-knob button { transition: none; }
  #seal-door.open .seal-leaf, #seal-door.open .seal-glow { animation: none; }
}
#quest-lantern { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 7px; border-radius: 3px; background: #24191090; color: #f6e3b4; font: 13px Georgia, serif; backdrop-filter: blur(2px); pointer-events: none; }
#quest-lantern[hidden] { display: none; }
#hud #quest-lantern .icon { width: 26px; height: 26px; }
#quest-lantern small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
#quest-lantern b { font-weight: 400; font-size: 15px; font-variant-numeric: tabular-nums; }
#quest-lantern.low b { color: #ffb36b; }
@media (max-width: 760px) {
  .quest-journal, .quest-rings { grid-template-columns: minmax(0, 1fr); }
  .quest-entries { max-height: none; }
}

/* ---- Quest Completed: a standard unfurls, the tenth hand settles home. ---- */
.quest-banner { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; overflow: auto; background: radial-gradient(ellipse at 50% 34%, #2a1a0c55 0%, #120b05c9 62%, #080503e8 100%); opacity: 0; transition: opacity .55s ease; }
.quest-banner.shown { opacity: 1; }
.quest-banner.leaving { opacity: 0; transition-duration: .5s; }
.qb-leaves { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.qb-glow { position: fixed; left: 50%; top: 12vh; width: 900px; height: 900px; margin-left: -450px; pointer-events: none; background: conic-gradient(from 0deg, #f6d48a00, #f6d48a26 8%, #f6d48a00 16%, #f6d48a22 26%, #f6d48a00 36%, #f6d48a26 48%, #f6d48a00 58%, #f6d48a1f 70%, #f6d48a00 82%, #f6d48a24 92%, #f6d48a00); -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%); animation: qb-turn 46s linear infinite; opacity: 0; transition: opacity 1.6s ease 1s; }
.quest-banner.shown .qb-glow { opacity: 1; }
@keyframes qb-turn { to { transform: rotate(360deg); } }
.qb-standard { position: relative; z-index: 3; width: min(600px, calc(100vw - 24px)); margin: 0 0 40px; transform-origin: top center; }
.qb-rod { position: relative; height: 18px; margin: 0 -26px; border-radius: 9px; background: linear-gradient(180deg, #f3dca0, #b58f45 46%, #6e5226); box-shadow: 0 4px 10px #0007; }
.qb-rod i::before, .qb-rod i::after { content: ''; position: absolute; top: -5px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #f9e7b6, #b58f45 58%, #6e5226); box-shadow: 0 3px 8px #0006; }
.qb-rod i::before { left: -6px; } .qb-rod i::after { right: -6px; }
.qb-cloth { position: relative; padding: 28px 40px 74px; text-align: center; color: #f3e6c8; background: linear-gradient(90deg, #00000038, transparent 8% 92%, #00000038), repeating-linear-gradient(90deg, #ffffff05 0 2px, transparent 2px 7px), linear-gradient(178deg, #6b1f24 0%, #54181d 54%, #3f1217 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 46px), 0 100%); transform-origin: top center; animation: qb-unfurl 1.25s cubic-bezier(.2, .9, .25, 1.05) both .15s; box-shadow: 0 18px 50px #0009; }
.qb-cloth::before { content: ''; position: absolute; inset: 9px 9px 0; pointer-events: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 46px), 0 100%); background: linear-gradient(#d7b769, #d7b769) top / 100% 2px no-repeat, linear-gradient(#d7b769, #d7b769) left / 2px 100% no-repeat, linear-gradient(#d7b769, #d7b769) right / 2px 100% no-repeat; opacity: .75; }
@keyframes qb-unfurl { from { clip-path: polygon(0 0, 100% 0, 100% 0, 50% 0, 0 0); } }
.qb-crest { width: 148px; height: 148px; margin: 0 auto 4px; animation: qb-rise .8s cubic-bezier(.2, 1.3, .4, 1) both .9s; filter: drop-shadow(0 6px 14px #0007); }
.qb-crest svg, .qb-crest .icon { width: 100%; height: 100%; }
.qb-tenth { animation: qb-home 1.15s cubic-bezier(.3, 1.45, .5, 1) both 1.55s; transform-box: fill-box; transform-origin: center; }
@keyframes qb-home { from { opacity: 0; transform: translate(0, -26px) scale(1.5) rotate(-14deg); filter: brightness(2.6); } 70% { filter: brightness(1.9); } to { opacity: 1; transform: none; filter: none; } }
@keyframes qb-rise { from { opacity: 0; transform: translateY(16px) scale(.86); } }
.qb-kicker { margin: 0; font: 13px Georgia, serif; letter-spacing: .38em; text-transform: uppercase; color: #e9c877; animation: qb-rise .6s ease both 1.1s; }
.qb-cloth h2 { margin: 6px 0 2px; font: 46px/1.08 'Greenvale Serif', Georgia, serif; letter-spacing: .01em; color: #fff3d4; text-shadow: 0 2px 0 #2a0c0e, 0 0 26px #f0c56a59; animation: qb-rise .7s ease both 1.2s; }
.qb-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 10px; max-width: 260px; font-size: 11px; color: #d7b769; animation: qb-rise .6s ease both 1.3s; }
.qb-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d7b769); }
.qb-rule i:last-child { transform: scaleX(-1); }
.qb-closing { margin: 0 auto 8px; max-width: 460px; font: 14px/1.55 Georgia, serif; color: #ecdcbc; animation: qb-rise .7s ease both 1.4s; }
.qb-thanks { margin: 0 0 16px; font: italic 17px/1.4 Georgia, serif; color: #f6e6c4; animation: qb-rise .7s ease both 1.5s; }
.qb-thanks small { display: block; margin-top: 3px; font: 11px Georgia, serif; letter-spacing: .1em; color: #d4b98a; }
.qb-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; }
.qb-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 3px; border: 1px solid #d7b76955; background: #2a0e1166; animation: qb-card .5s cubic-bezier(.2, 1.3, .4, 1) both calc(1.7s + var(--i) * .11s); }
@keyframes qb-card { from { opacity: 0; transform: translateY(10px) scale(.94); } }
#hud .qb-card .icon, #hud .qb-card .coin-art { width: 40px; height: 40px; flex: none; }
.qb-card strong { display: block; font: 14px Georgia, serif; color: #fff0cc; }
.qb-card small { display: block; margin-top: 1px; font-size: 11px; line-height: 1.3; color: #d9c6a0; }
.qb-xp { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 10px; margin: 10px 0 8px; padding: 0; text-align: left; }
.qb-xp li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #f0e0bc; animation: qb-card .45s ease both calc(1.7s + var(--i) * .08s); }
.qb-xp b { font-weight: 400; }
#hud .qb-xp .icon { width: 20px; height: 20px; flex: none; }
.qb-perks { margin: 0 0 12px; font: italic 12px/1.5 Georgia, serif; color: #d9c6a0; }
#hud .qb-continue { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; border: 1px solid #e9c877; border-radius: 2px; background: linear-gradient(180deg, #d9b768, #a98640); color: #2a1a08; font: 15px Georgia, serif; cursor: pointer; animation: qb-rise .6s ease both 2.5s; }
#hud .qb-continue:hover, #hud .qb-continue:focus-visible { filter: brightness(1.1); outline: 2px solid #f6e3b4; outline-offset: 2px; }
#hud .qb-continue .icon { width: 14px; height: 14px; }
@media (max-width: 620px) {
  .qb-cloth { padding: 22px 18px 66px; }
  .qb-cloth h2 { font-size: 34px; }
  .qb-rewards, .qb-xp { grid-template-columns: minmax(0, 1fr); }
  .qb-rod { margin: 0 -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .qb-glow, .qb-cloth, .qb-crest, .qb-tenth, .qb-kicker, .qb-cloth h2, .qb-rule, .qb-closing, .qb-thanks, .qb-card, .qb-xp li, .qb-continue { animation: none; }
}