/* ═══════════════════════════════════════════════════════
   Merchant's Beginnings: the first quest (static/quest.js).
   The quest line under a page's title, the quest journal drawn like the
   game's own, its quest complete scroll, and the yellow "journal updated"
   line. Only drawn while quest.js is on the page.

   Two faces, both the game's own at its own pixel size (16px is one game
   pixel a CSS pixel; RuneStar's OSRS fonts, CC0): Plain 12 for every line
   of text, Quill 8 for titles. Nothing is bold: the game's journal isn't,
   and RuneScape UF (the site's display face) is RS3's heavier cut, which is
   what made the first version read as small and bold.
   ═══════════════════════════════════════════════════════ */

@font-face {
    font-family: 'RuneScape Plain 12';
    src: url('/static/fonts/RuneScape-Plain-12.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'RuneScape Quill 8';
    src: url('/static/fonts/RuneScape-Quill-8.woff2') format('woff2');
    font-display: swap;
}

.qst-line,
.qst-scroll,
.qst-toast {
    font-family: 'RuneScape Plain 12', 'RuneScape UF', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    font-synthesis: none;
    -webkit-font-smoothing: none;
}

/* The quest line under the page title, in the quest list's colours: one
   row, the quest and then its reward. It only wraps on the narrowest phones. */
.qst-line {
    all: unset;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    margin: 6px 0 2px;
    cursor: pointer;
    font-family: 'RuneScape Plain 12', 'RuneScape UF', system-ui, sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-synthesis: none;
    -webkit-font-smoothing: none;
    text-shadow: 1px 1px 0 #000;
}
.qst-line[hidden] { display: none !important; }
.qst-line .qst-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.qst-line .qst-reward { color: #FF981F; white-space: nowrap; }
/* Its middle on the middle of the letters (mostly lowercase, so below the
   capitals' middle): measured, 10.5px down a line whose letters' ink centres
   at 10. Whole pixels, so it stays crisp. */
.qst-line .qst-icon { width: 15px; height: 15px; margin-right: 5px; vertical-align: -4px; }
.qst-line .qst-cape { width: 7px; height: 8px; margin-right: 5px; vertical-align: 0; }
.qst-line .qst-crown { width: 10px; height: 6px; margin-right: 5px; vertical-align: 1px; }
@media (max-width: 420px) { .qst-line .qst-rl { display: none; } }
.qst-line[data-state="red"] { color: #FF0000; }
.qst-line[data-state="yellow"] { color: #FFFF00; }
.qst-line[data-state="green"] { color: #0DC10D; }
.qst-line:focus-visible { outline: 2px solid #5B9FED; outline-offset: 3px; border-radius: 4px; }

/* On the Dashboard the line sits alone between the top of the page and the
   prediction strip, and it's centred in that gap without adding to it:
   measured, it had 22px over it and 2 under on a computer, 18 and 2 under a
   phone's top bar. Only when it leads the page (an email-verified notice can
   come first) and only while it shows. */
.qst-slot--dash.is-on:first-child { margin: -10px 0 10px; }
@media (max-width: 800px) { .qst-slot--dash.is-on:first-child { margin: -8px 0 8px; } }

/* The overlay the scroll opens in. */
.qst-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 16px 8px calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(3, 6, 14, 0.62);
    overflow-y: auto;
}
.qst-overlay[hidden] { display: none !important; }
/* The sign-up greeting (premium_gate.js) waits while the journal is open,
   and is back as it was when it closes: the same way it gives way to the
   phone's cube panel (theme.css). */
body.qst-open .welcome-greeting { display: none; }
.qst-overlay:focus { outline: none; }

/* The scroll: the journal's measures, in game pixels. Two rolls (24px),
   the sheet tucked 10px in from their ends, text 17px from its left, and
   the scrollbar 19px from its right with the close cross over it. */
.qst-scroll {
    position: relative;
    width: min(480px, 100%);
    color: #000080;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}
.qst-roll { display: block; width: 100%; height: 24px; image-rendering: pixelated; position: relative; z-index: 2; }
.qst-reel { position: relative; z-index: 1; margin: -2px 10px; }
.qst-sheet {
    padding: 4px 19px 7px 17px;
    background-color: #9D8A68;
    background-size: 96px 96px;
    image-rendering: pixelated;
    text-align: center;
}
.qst-sheet p { margin: 0; }
.qst-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.qst-title {
    margin: 6px 0 0;
    font-family: 'RuneScape Quill 8', 'RuneScape Plain 12', serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #7F0000;
    text-align: left;
}
/* The game's gold cross, 24 x 23; its tap area reaches past it. */
.qst-close { all: unset; flex: none; padding: 5px; margin: -2px -5px -3px 0; line-height: 0; cursor: pointer; }
.qst-close canvas { display: block; width: 24px; height: 23px; image-rendering: pixelated; }
.qst-close:focus-visible canvas { outline: 1px dotted #7F0000; outline-offset: 2px; }
/* The text and, beside it, the scrollbar: drawn by quest.js over the
   hidden native one, never adding to the layout. */
.qst-page { position: relative; margin-top: 6px; padding-right: 22px; }
.qst-body {
    position: relative;
    max-height: calc(100vh - 152px);
    max-height: calc(100dvh - 152px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.qst-body::-webkit-scrollbar { display: none; }
.qst-bar { position: absolute; right: 0; top: 0; width: 16px; height: 100%; image-rendering: pixelated; touch-action: none; cursor: pointer; }
/* The foot: the parts left, under a rule, outside the scrolling text (which
   gives up its height). Squared pips, whole pixels, as the game draws. */
.qst-sheet.has-foot .qst-body { max-height: calc(100vh - 182px); max-height: calc(100dvh - 182px); }
.qst-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 22px 0 0;
    padding-top: 5px;
    border-top: 1px solid #33281A;
    line-height: 20px;
}
.qst-foot[hidden] { display: none; }
/* With the Quest List link: the parts left on the left, the link on the right. */
.qst-foot.has-list { justify-content: space-between; }
.qst-foot-l { display: inline-flex; align-items: center; gap: 8px; }
.qst-foot-list { white-space: nowrap; }
.qst-pips { display: inline-flex; gap: 3px; }
.qst-pips i { width: 5px; height: 5px; border: 1px solid #33281A; }
.qst-pips i.is-done { background: #006400; border-color: #003C00; }

/* What's written on it: navy, red for names and facts, bright blue for a
   link, and a section's lines under a navy heading. */
.qst-r { color: #800000; }
.qst-a { all: unset; color: #0000C8; cursor: pointer; }
.qst-a:hover { text-decoration: underline; text-underline-offset: 2px; }
.qst-a:focus-visible { outline: 1px dotted #0000C8; outline-offset: 1px; }
.qst-a[disabled] { opacity: 0.5; cursor: default; }
.qst-rule { height: 1px; margin: 9px 0 11px; background: #33281A; }
.qst-step { max-width: 34em; margin: 0 auto 6px; }
.qst-step:last-child { margin-bottom: 0; }
.qst-step.is-done { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: #000; }
.qst-done-line { color: #800000; }
/* Rocky's face on his reward: 22px, with its margins drawn in so it doesn't
   make its line taller than the 20px the others are. */
.qst-face { width: 22px; height: 22px; margin: -3px 5px -3px 0; vertical-align: middle; }
.qst-note { margin-top: 6px !important; }
/* The journal's way to the quest list, and the list itself: the game's
   quest tab colours, darkened for parchment. */
.qst-qpline { display: flex; align-items: center; justify-content: center; gap: 6px; }
.qst-list { display: grid; gap: 4px; }
.qst-qrow { all: unset; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; color: #800000; }
.qst-qrow[data-status="done"] { color: #006400; }
.qst-qrow[data-status="started"] { color: #806000; }
.qst-qrow:hover span:first-child { text-decoration: underline; text-underline-offset: 2px; }
.qst-qrow:focus-visible { outline: 1px dotted #000080; outline-offset: 1px; }
.qst-qrow-qp { color: #000080; }
.qst-preview p + p { margin-top: 2px; }

/* The quest complete scroll: the big reward on a gold ribbon, in Plain 12
   at twice the game's size so it stays crisp. Not Quill: its 3 reads as 8. */
.qst-grand { display: grid; justify-items: center; gap: 8px; margin: 6px 0 2px; }
.qst-sleeper { position: relative; width: 120px; height: 84px; }
.qst-caped { width: 120px; height: 84px; display: grid; place-items: end center; }
.qst-caped canvas { width: 90px; height: 78px; image-rendering: pixelated; }
.qst-bigicon { line-height: 0; padding: 6px 0; }
/* Rocky in the quest cape, on its reward line: his size, drawn in. */
.qst-rcape { width: 30px; height: 26px; margin: -6px 5px -4px 0; vertical-align: middle; image-rendering: pixelated; }
.qst-sleeper canvas { position: absolute; left: 15px; bottom: 0; width: 90px; height: 78px; image-rendering: pixelated; transform-origin: 45px 72px; animation: qst-breathe 2.4s ease-in-out infinite; }
.qst-zzz { position: absolute; left: 30px; bottom: 44px; pointer-events: none; color: #000080; }
.qst-zzz i { position: absolute; left: 0; bottom: 0; font-style: normal; opacity: 0; animation: qst-z 3.6s linear infinite; }
.qst-zzz i:nth-child(2) { animation-delay: 1.2s; }
.qst-zzz i:nth-child(3) { animation-delay: 2.4s; }
@keyframes qst-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.02, 1.05); } }
@keyframes qst-z { 0% { transform: translate(0, 0); opacity: 0; } 12%, 70% { opacity: 1; } 100% { transform: translate(16px, -44px); opacity: 0; } }
.qst-ribbon {
    padding: 8px 30px 6px;
    color: #3A2600;
    background: linear-gradient(180deg, #FFE27A 0 22%, #F4C338 22% 62%, #D99E17 62% 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
.qst-ribbon b { display: block; font-weight: 400; font-size: 32px; line-height: 36px; white-space: nowrap; }
@media (max-width: 400px) { .qst-ribbon { padding: 8px 20px 6px; } }
.qst-qp { color: #800000; text-align: left; margin-top: 12px !important; }
.qst-fireworks { position: absolute; left: -10px; top: -40px; width: calc(100% + 20px); height: calc(100% + 80px); pointer-events: none; z-index: 3; image-rendering: pixelated; }

/* "Your quest journal has been updated." The game's own yellow line, where
   Rocky's pet message goes. */
.qst-toast {
    position: fixed;
    left: 0;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 2100;
    width: max-content;
    max-width: calc(100vw - 24px);
    transform: translateY(8px);
    color: #FFFF00;
    text-shadow: 1px 1px 0 #000, 0 0 4px rgba(5, 8, 20, 0.95), 0 0 10px rgba(5, 8, 20, 0.9), 0 0 18px rgba(5, 8, 20, 0.75);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.qst-toast.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .qst-sleeper canvas, .qst-zzz i { animation: none; }
    .qst-zzz i:first-child { opacity: 1; }
    .qst-toast { transition: none; }
}