/* The Shattered Core's journey (rpg/ui-quests.js storyPanel). Owner, 2026-10-10: "i dont like the current quest style at
   all.. must have images to showcase each level.. and make it look a lot cooler", then "a nice one and more theme oriented
   for each topic of quests.. not for every single one" (one picture a chapter, rpg/quest-scenes.js), then, 2026-10-11, on
   the row of chapter medallions: "more like [a phone game's level map] but less goofy... and vertical.. with the quests
   on the side.. on landscape... but using the game map... kinda areas.. but not yet revealing the other areas". A
   campaign screen in ZAZA's navy and gold: on the left the story's map (rpg/journey-map.js), a road up the game's own map
   past every quest, chapter by chapter (--hc: green Easy, gold Medium, orange Hard, red Very hard), the chapters past
   yours under clouds; beside it the header (how far along you are in a gold orb, your quest, where you stand among the
   heroes) and the quest picked as a page under its chapter's picture, its objectives each with the monster's or the
   material's picture and a bar, and its reward as chips. */
.jq-book { container-type: inline-size; --jq-deep: #070d2c; --jq-card: #121c55; --jq-line: #26357a; }

/* ---- the header */
.jq-head { --hc: var(--gold); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "orb text rank"; align-items: center; gap: 12px 16px; margin: 8px 0 0; padding: 16px 16px 12px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--hc) 50%, #2a3a7a); background: radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--hc) 24%, transparent), transparent 55%), radial-gradient(80% 120% at 100% 100%, rgba(58, 102, 255, 0.24), transparent 60%), linear-gradient(180deg, #15226a, var(--jq-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 22px rgba(0, 0, 0, 0.35); }
/* how far along the story you are: a gold orb filling from the bottom, with a glass shine */
.jq-orb { --p: 0; grid-area: orb; position: relative; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: #000; box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 5px #000a2e, 0 0 22px rgba(255, 210, 63, 0.35); }
.jq-orb::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: linear-gradient(0deg, #b07d12, var(--gold) calc(var(--p) * 1% - 3%), #fff3a0 calc(var(--p) * 1% - 3%) calc(var(--p) * 1%), #0b1440 0); box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.45), inset 0 3px 7px rgba(0, 0, 0, 0.7); }
.jq-orb::after { content: ""; position: absolute; left: 17%; top: 9%; width: 42%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.38), transparent); pointer-events: none; }
.jq-orb b { position: relative; z-index: 1; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1; color: #fff; text-shadow: 0 2px 0 #000a2e, 0 0 6px rgba(0, 0, 0, 0.8); -webkit-text-stroke: 1px #2a1a00; paint-order: stroke fill; }
.jq-orb b small { font-size: 14px; }
.jq-head-text { grid-area: text; min-width: 0; }
.jq-kicker { font-size: 15px; letter-spacing: 0.04em; color: var(--gold); opacity: 0.9; }
.jq-head h3 { margin: 1px 0 2px; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.05; color: var(--gold); background: linear-gradient(180deg, #fff6c0 10%, var(--gold) 55%, #f0a800); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #000a2e); }
.jq-head h3 span { font-size: 22px; -webkit-text-fill-color: #fff; }
.jq-where { margin: 0; font-size: 18px; color: #dfe6ff; }
/* a chapter's difficulty: its colour on a dark chip */
.jq-hard { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 99px; font-size: 14px; line-height: 19px; vertical-align: 1px; color: #0a0f2e; }
.jq-hard.h-easy { background: #6fdc8c; }
.jq-hard.h-medium { background: #ffd23f; }
.jq-hard.h-hard { background: #ff9a3c; }
.jq-hard.h-vhard { background: #ff5a5a; }
.jq-head .jr-rank { grid-area: rank; margin: 0; }

/* ---- the window: the story's map beside your journey's header and the quest picked, each scrolling on its own (a
   narrow window: one column, the header, the map, then the quest) */
.jq-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; height: max(260px, calc(100dvh - 128px)); margin-top: 8px; } /* a window's height: a phone on its side too */
.jq-side { position: relative; container-type: inline-size; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--gold-2) transparent; }
.jq-side > .jq-head { margin-top: 0; }
.jq-after .jq-note { margin: 0 0 6px; font-size: 15px; line-height: 1.3; color: var(--muted); }

/* ---- the story's map (rpg/journey-map.js; ui-quests.js storyPanel): a road up the game's own map from Pip's quest in
   ZAZA Town past every quest to the crown, each chapter on its piece of the map behind its gate, the chapters past yours
   under clouds; the road in sand (a faint trail through the clouds), walked in gold up to you. */
.jq-mapcol { position: relative; min-height: 0; border-radius: 16px; overflow: hidden; border: 2px solid #2a3a7a; background: #17225a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.35); }
.jq-vmap { height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gold-2) rgba(3, 10, 44, 0.7); }
.jv-in { position: relative; width: 100%; }
.jv-ground { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.jv-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jv-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jv-rim { stroke: rgba(6, 10, 34, 0.55); stroke-width: 12; }
.jv-sand { stroke: #fff4d6; stroke-width: 5; stroke-dasharray: 0.5 11; }
.jv-mist { stroke: rgba(222, 232, 255, 0.6); stroke-width: 3.5; stroke-dasharray: 0.5 9; }
.jv-walk { stroke: var(--gold); stroke-width: 6; filter: drop-shadow(0 0 3px rgba(255, 210, 63, 0.85)); }
.jv-spur { stroke: #fff4d6; stroke-width: 4; stroke-dasharray: 0.5 8; }
.jv-stops { margin: 0; padding: 0; list-style: none; }
.jv-stop, .jv-gate { position: absolute; width: 0; height: 0; }
/* a stop: its number on a dark stone ringed in its chapter's colour */
.jv-stop button { position: absolute; left: 0; top: 0; z-index: 3; translate: -50% -50%; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--hc); background: radial-gradient(circle at 50% 32%, #34479a, #0e1748 72%); color: #fff; font: 400 15px/1 var(--display); cursor: pointer; box-shadow: 0 0 0 2px #050a26, 0 3px 0 2px #050a26; transition: transform 0.15s; }
.jv-stop button b { font-weight: 400; text-shadow: 0 1px 0 #000a2e; }
.jv-stop button:hover { transform: translateY(-2px) scale(1.06); }
.jv-stop button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.jv-stop button[aria-pressed="true"] { box-shadow: 0 0 0 2px #050a26, 0 0 0 5px #fff, 0 3px 0 5px #050a26, 0 0 16px color-mix(in srgb, var(--hc) 70%, transparent); }
/* done: green with a ✓ (owner, 2026-10-11: "the completed quests, maybe then like green shade over"), paler when passed
   at your level; a chapter's last quest a size up */
.jv-stop:is(.done, .skip) button { border-color: #0f5a28; background: radial-gradient(circle at 50% 30%, #c8ffd0, #4fd877 45%, #1f8a44); color: #05300f; }
.jv-stop:is(.done, .skip) button b { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.jv-stop.skip button { filter: saturate(0.5) brightness(0.95); }
.jv-stop.last button { width: 42px; height: 42px; border-width: 4px; font-size: 16px; }
.jv-ok, .jv-lock, .jv-todo { position: absolute; right: -7px; bottom: -6px; display: grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid #050a26; font: 400 10px/1 var(--display); font-style: normal; }
.jv-ok { color: #fff; background: #1f8a44; }
.jv-lock { color: #c4cbea; background: #2c3b78; }
.jv-lock svg { width: 8px; height: 10px; }
.jv-todo { color: #1b1424; background: var(--gold); }
/* yours: bigger and gold, glowing in its chapter's colour, a ring going out from it */
.jv-stop.now button { width: 50px; height: 50px; font-size: 20px; border-color: #fff6c0; background: radial-gradient(circle at 50% 30%, #fff6c0, var(--gold) 50%, #c98a06); color: #1b1424; box-shadow: 0 0 0 2px #050a26, 0 3px 0 2px #050a26, 0 0 24px color-mix(in srgb, var(--hc) 85%, transparent); }
.jv-stop.now button b { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.jv-stop.now button::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--hc); animation: jv-ring 1.8s ease-out infinite; pointer-events: none; }
@keyframes jv-ring { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 1.45; } }
.jv-stop.lock button { opacity: 0.88; }
.jv-stop.lock button b { opacity: 0.7; }
/* past your chapter, in the clouds; in a closed land, in its smoke */
.jv-stop.fog button { border-color: color-mix(in srgb, var(--hc) 45%, #6a77aa); background: rgba(12, 20, 64, 0.85); }
.jv-stop.fog button b { color: #c4cbea; }
.jv-stop.shut button { border-color: #6d6880; background: rgba(34, 31, 51, 0.92); }
/* Pip's quest, El Camino's side quest, the crown, the Open World */
.jv-stop.pip button { width: 46px; height: 46px; padding: 0; }
.jv-face { display: grid; place-items: end center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a66ff, #0c1a5e); }
.jv-face img { width: 26px; height: 29px; image-rendering: pixelated; }
.jv-stop.pip.done button { border-color: #5fe86f; background: none; color: inherit; }
.jv-stop.camino img { width: 22px; height: 22px; image-rendering: pixelated; }
/* the Storm Watch's side stop (rpg/watch.js): a storm cloud on Sable's storm blue, brighter while you're on her quests */
.jv-stop.watch button { background: radial-gradient(circle at 50% 35%, #3b3f8e, #12164a); font-size: 17px; }
.jv-stop.watch.on button { border-color: #d6ceff; background: radial-gradient(circle at 50% 30%, #d6ceff, var(--hc) 55%, #2c2280); }
.jv-stop.watch .jv-you { bottom: auto; top: 30px; } /* under it: the stop before sits just above */
.jv-stop.watch .jv-you::after { bottom: auto; top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--gold); }
.jv-stop.watch:has(.jv-you) .jv-name { top: 56px; }
.jv-stop.name-l .jv-name { translate: calc(-100% + 24px) 0; }
.jv-stop.name-r .jv-name { translate: -24px 0; }
.jv-spur.walked { stroke: var(--gold); stroke-width: 5; stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(255, 210, 63, 0.85)); }
.jr-way.watch { grid-column: 1 / -1; border-color: rgba(143, 125, 255, 0.7); }
.jq-kick.jq-six { margin: 14px 0 6px; }
ol.jq-six { gap: 4px; }
ol.jq-six > li { align-items: center; padding: 4px 10px 4px 4px; }
ol.jq-six .jq-oi { width: 30px; height: 30px; border-radius: 8px; }
ol.jq-six .jq-oi > b { font-size: 15px; }
ol.jq-six .jq-ob { padding-top: 0; }
ol.jq-six .jq-ot { font-size: 16px; }
.jv-stop.crown button { width: 60px; height: 60px; border-color: #ffd23f; background: radial-gradient(circle at 50% 35%, #7a5a14, #2a1a00); font-size: 28px; box-shadow: 0 0 0 2px #050a26, 0 3px 0 2px #050a26, 0 0 28px rgba(255, 196, 80, 0.75); }
.jv-stop.ow button { width: 48px; height: 48px; background: radial-gradient(circle at 50% 40%, #4fb8f0, #0b4a78); }
.jv-stop.ow.lock .jq-isle { filter: saturate(0.5) brightness(0.8); }
/* over a stop: YOU and your face on yours; the heroes on it now (the strongest one's face, how many) */
.jv-you { position: absolute; left: 0; bottom: 31px; z-index: 5; translate: -50% 0; display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 3px; border-radius: 99px; white-space: nowrap; background: linear-gradient(180deg, #ffe778, var(--gold)); box-shadow: 0 2px 0 #000a2e, 0 0 10px rgba(255, 210, 63, 0.6); pointer-events: none; }
.jv-you::after { content: ""; position: absolute; left: 50%; bottom: -5px; translate: -50% 0; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--gold); }
.jv-you img, .jv-who img { width: 15px; height: 16px; image-rendering: pixelated; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 40%, #3a66ff, #0c1a5e); }
.jv-you i { font: 400 11px/1 var(--display); font-style: normal; letter-spacing: 0.06em; color: #1b1424; }
.jv-you b { margin-left: 2px; padding: 0 4px; border-radius: 99px; font: 400 10px/14px var(--display); color: #fff; background: #1b1424; }
.jv-who { position: absolute; left: 11px; bottom: 11px; z-index: 4; display: flex; align-items: center; gap: 2px; height: 18px; padding: 0 5px 0 2px; border-radius: 99px; background: rgba(3, 10, 44, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 0 #000a2e; pointer-events: none; }
.jv-who b { font: 400 11px/1 var(--display); color: #fff; }
/* its name: on yours, Pip's, the crown's, the Open World's, the one picked and the one under the pointer (under the other
   stops and the gates, which stay in view) */
.jv-name { position: absolute; left: 0; top: 23px; z-index: 2; translate: -50% 0; display: none; max-width: 180px; padding: 2px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 12px/1.2 var(--display); text-align: center; color: #fff; background: rgba(3, 10, 44, 0.92); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 55%, transparent); pointer-events: none; }
.jv-stop.now .jv-name { top: 31px; color: var(--gold); }
.jv-stop:is(.crown, .ow) .jv-name { top: 34px; }
.jv-stop:is(.now, .pip, .crown, .ow, :has(button[aria-pressed="true"], button:hover, button:focus-visible)) .jv-name { display: block; }
/* a chapter's gate across the road: its number, its name, how hard, its levels, how many of its quests are behind you */
.jv-gate { left: 50%; z-index: 6; }
.jv-gate button { position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; align-items: center; gap: 6px; max-width: 370px; padding: 3px 10px 3px 3px; box-sizing: border-box; border-radius: 10px; border: 2px solid var(--hc); white-space: nowrap; background: linear-gradient(180deg, rgba(26, 39, 102, 0.96), rgba(8, 15, 51, 0.96)); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 3px 0 #000a2e, 0 0 14px color-mix(in srgb, var(--hc) 35%, transparent); }
.jv-gate button:hover { filter: brightness(1.12); }
.jv-gate button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jv-gate b { flex: none; display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 5px; box-sizing: border-box; border-radius: 7px; font: 400 13px/1 var(--display); color: #0a0f2e; background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 50%, #fff), var(--hc)); }
.jv-gate span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 14px/1.1 var(--display); }
.jv-gate .jq-hard { flex: none; margin: 0; font-style: normal; font-size: 12px; line-height: 17px; }
.jv-gate em { flex: none; font-style: normal; font-size: 14px; color: color-mix(in srgb, var(--hc) 55%, #c4cbea); }
.jv-gate em.n { padding: 0 6px; border-radius: 6px; font: 400 12px/18px var(--display); color: #fff; background: rgba(3, 10, 44, 0.9); }
.jv-gate.done em.n { color: #052a10; background: #5fe86f; }
.jv-gate.now button { box-shadow: 0 3px 0 #000a2e, 0 0 20px color-mix(in srgb, var(--hc) 60%, transparent); }
.jv-gate.fog button { border-color: color-mix(in srgb, var(--hc) 55%, #6a77aa); background: linear-gradient(180deg, rgba(36, 50, 110, 0.94), rgba(16, 24, 70, 0.94)); }
.jv-gate.shut em { color: #c4cbea; }
.jv-gate.shut em svg { vertical-align: -1px; }
/* back to your quest, over the map's corner */
.jq-me { position: absolute; right: 10px; bottom: 10px; z-index: 7; padding: 5px 14px; border-radius: 99px; border: 2px solid #0b1022; background: linear-gradient(180deg, #ffe778, var(--gold-2)); color: var(--navy-900); font: 400 14px/1.2 var(--display); cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #000a2e; }
.jq-me:hover { filter: brightness(1.08); }
.jq-sea { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(60% 55% at 50% 55%, rgba(127, 212, 255, 0.35), transparent 70%), repeating-linear-gradient(170deg, transparent 0 9px, rgba(255, 255, 255, 0.07) 9px 11px), linear-gradient(180deg, #2a9fd8, #0b4a78); }
.jq-isle { display: block; filter: drop-shadow(0 2px 0 rgba(0, 10, 46, 0.55)); }
/* a picture still painted by the game (what has no drawn picture yet): pixel-sharp, fading in once painted (fillPics) */
.jq-img { display: block; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transition: opacity 0.3s; }
.jq-img.on { opacity: 1; }

/* ---- the quest picked: a page under its chapter's picture */
.jq-page { --hc: var(--gold); margin: 14px 0 12px; padding: 0 0 6px; border-radius: 16px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--hc) 55%, #2a3a7a); background: radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--hc) 12%, transparent), transparent 60%), linear-gradient(180deg, #121d5a, #080f33); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); animation: jq-page 0.3s ease-out both; }
.jq-page.still { animation: none; }
@keyframes jq-page { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.jq-page > :not(.jq-banner) { margin-left: 16px; margin-right: 16px; }
.jq-banner { position: relative; overflow: hidden; margin: 0 0 12px; aspect-ratio: 1680 / 713; background: linear-gradient(180deg, #24357e, #0e1848); border-bottom: 2px solid color-mix(in srgb, var(--hc) 60%, #000); }
.jq-banner :is(.jq-img, .jq-art) { position: absolute; inset: 0; width: 100%; height: 100%; }
.jq-banner .jq-img { object-fit: cover; }
.jq-banner .jq-sea { position: absolute; inset: 0; width: auto; height: auto; }
.jq-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.jq-giver { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a66ff, #0c1a5e); box-shadow: 0 0 0 2px var(--hc), 0 3px 0 2px #000a2e; overflow: hidden; }
.jq-giver img { width: 40px; height: 44px; margin-top: 6px; image-rendering: pixelated; }
.jq-title-text { flex: 1; min-width: 0; }
.jq-kick { margin: 0; font-size: 16px; color: color-mix(in srgb, var(--hc) 55%, #c9d3ff); }
.jq-title h3 { margin: 1px 0 2px; font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1.1; color: var(--gold); text-shadow: 0 2px 0 #000a2e; }
.jq-title h3 span { color: #fff; }
.jq-title small { display: block; font-size: 16px; color: var(--muted); }
.jq-title small b { font-weight: 400; color: var(--rs-orange); }
.jq-st { flex: none; display: inline-block; padding: 3px 12px; border-radius: 99px; border: 2px solid rgba(255, 255, 255, 0.2); font-style: normal; font-family: var(--display); font-size: 13px; line-height: 1.2; color: #dfe6ff; background: rgba(3, 10, 44, 0.6); }
.jq-st.ok { color: #5fe86f; border-color: rgba(95, 232, 111, 0.55); }
.jq-st.now { color: #1b1424; border-color: #000a2e; background: linear-gradient(180deg, #ffe778, var(--gold)); }
.jq-st.lock { color: var(--muted); }
.jq-log { margin-top: 0; margin-bottom: 12px; padding: 10px 12px; border-left: 3px solid var(--hc); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, 0.045); font-size: 17px; line-height: 1.4; font-style: italic; color: #d6defa; }
.jq-wait, .jq-ready, .jq-hint { margin-top: 0; margin-bottom: 12px; padding: 8px 12px; border-radius: 10px; font-size: 17px; }
.jq-wait { color: #ffb4a8; background: rgba(255, 90, 90, 0.1); border: 1px solid rgba(255, 90, 90, 0.45); }
.jq-ready { color: var(--gold); background: rgba(255, 210, 63, 0.1); border: 2px solid var(--gold); font-family: var(--display); font-size: 16px; }
.jq-hint { color: #dfe6ff; background: rgba(95, 208, 255, 0.08); border: 1px solid rgba(95, 208, 255, 0.35); }
.jq-hint b { color: var(--cyan); font-weight: 400; }
/* the objectives: a picture each (the monster, the material, who to talk to), what to do, your count and a bar */
.jq-objs { list-style: none; margin-top: 0; margin-bottom: 12px; padding: 0; display: grid; gap: 8px; }
.jq-objs > li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: rgba(3, 10, 44, 0.55); border: 1px solid var(--jq-line); }
.jq-objs > li.now { border-color: color-mix(in srgb, var(--gold) 65%, transparent); background: linear-gradient(90deg, rgba(255, 210, 63, 0.08), rgba(3, 10, 44, 0.55) 60%); }
.jq-oi { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--hc) 30%, #24357e), #0b1440 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 0 #000a2e; }
.jq-oi img { width: 32px; height: 32px; image-rendering: pixelated; }
.jq-oi img[data-pic] { width: 46px; height: 46px; image-rendering: auto; opacity: 0; transition: opacity 0.3s; }
.jq-oi img[data-pic].on { opacity: 1; }
.jq-oi img[width="30"] { width: 30px; height: 33px; margin-top: 6px; } /* a face: who to talk to */
.jq-oi > b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--hc); }
.jq-objs > li.done .jq-oi::after { content: "✓"; position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #000a2e; background: #5fe86f; color: #052a10; font: 400 12px/1 var(--display); }
.jq-ob { flex: 1; min-width: 0; padding-top: 2px; }
.jq-ot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 19px; line-height: 1.2; }
.jq-ot b { font-weight: 400; color: #fff; }
.jq-ot s { color: var(--muted); text-decoration-thickness: 2px; }
.jq-ot em { flex: none; font-style: normal; font-family: var(--display); font-size: 15px; color: var(--gold); }
.jq-objs > li.done .jq-ot em { color: #5fe86f; }
.jq-bar { display: block; height: 8px; margin-top: 6px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.jq-bar i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(180deg, #fff3a0, var(--gold) 45%, #d99a0b); }
.jq-objs > li.done .jq-bar i { background: linear-gradient(180deg, #b6ffbe, #3ad06a); }
.jq-ob > p { margin: 6px 0 0; font-size: 16px; line-height: 1.35; color: #c3cdee; }
.jq-ob > .btn { margin-top: 8px; }
.jq-objs > li.next { opacity: 0.8; }
/* the reward: one chip a thing, with its picture */
.jq-reward { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; border: 2px solid rgba(255, 210, 63, 0.45); background: linear-gradient(180deg, rgba(255, 210, 63, 0.1), rgba(255, 152, 31, 0.04)); }
.jq-reward > b { display: block; margin-bottom: 8px; font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--gold); }
.jq-reward ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jq-reward li { display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px; border-radius: 99px; background: rgba(3, 10, 44, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.35); font-size: 17px; color: #fff; }
.jq-reward li img { width: 24px; height: 24px; image-rendering: pixelated; }
.jq-reward li:not(:has(img)) { padding-left: 12px; }
/* ⏩ Skip with $ZAZA (skip-shop.js): a price on each step left, on the quest and on the rest of its chapter, then Pay */
.jq-skip { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; border: 2px dashed rgba(255, 210, 63, 0.55); background: rgba(3, 10, 44, 0.55); }
.jq-skip-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 8px; }
.jq-skip-h b { font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--gold); }
.jq-skip-h small { font-size: 15px; color: var(--muted); }
.jq-skip-tip { margin: 0 0 8px; font-size: 15px; color: #c3cdee; }
.jq-skip-tip:empty { display: none; }
.jq-skip-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 8px; }
.jq-skip-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 8px 12px; text-align: left; }
.jq-skip-b span { font-size: 16px; }
.jq-skip-b b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--gold); }
.jq-skip-b small { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.jq-skip-b.on, .jq-skip-step.on { box-shadow: 0 0 0 2px var(--gold); }
/* A step's own ⏩ price sits in the step box's bottom right corner (owner, 2026-10-14: "put the price to skip faster on the
   right hand corner of that section, isntead of the left"). */
.jq-skip-step { display: block; width: fit-content; margin: 8px 0 0 auto; padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.1); color: var(--gold); font: 400 14px/1.3 var(--display); cursor: pointer; }
.jq-skip-step:hover:not(:disabled) { background: rgba(255, 210, 63, 0.2); }
.jq-skip-step:disabled { opacity: 0.5; cursor: default; }
.jq-skip-ok { display: grid; gap: 8px; margin-bottom: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 210, 63, 0.08); }
.jq-skip-ok p { margin: 0; display: grid; gap: 2px; }
.jq-skip-ok p b { font-weight: 400; font-size: 16px; color: #fff; }
.jq-skip-ok p span { font-size: 15px; color: #c3cdee; }
.jq-skip-ok div { display: flex; flex-wrap: wrap; gap: 8px; }
.jq-skip-act:empty { display: none; }
.jq-skip-act .xpb-msg { margin: 0 0 8px; }
.jq-skip-note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.jq-skip-paid { margin: 0 0 10px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(95, 232, 111, 0.45); background: rgba(95, 232, 111, 0.1); font-size: 16px; color: #b8f5c4; }
.jq-done { display: inline-block; margin-top: 0; margin-bottom: 12px; padding: 4px 14px; border-radius: 8px; border: 3px solid #5fe86f; font-family: var(--display); font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; color: #5fe86f; rotate: -2deg; box-shadow: 0 0 14px rgba(95, 232, 111, 0.25); }
.jq-note-s { margin-top: -4px; margin-bottom: 10px; font-size: 15px; color: var(--muted); }
.jq-side-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.jq-side-acts:empty { display: none; }
/* who's on it */
.jq-here { margin-bottom: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(3, 10, 44, 0.45); border: 1px solid var(--jq-line); }
.jq-here b { font-weight: 400; font-size: 17px; color: var(--gold); }
.jq-here ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.jq-here li { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.jq-here li img { width: 20px; height: 22px; image-rendering: pixelated; }
.jq-here li small { font-size: 15px; color: var(--muted); }
.jq-here li.you span { color: var(--gold); }
.jq-here li.more { color: var(--muted); }

/* ---- a narrow window (an upright phone, a small laptop): one column, the header, the map (a window's height of it), the
   quest; a narrow column: the rank box on its own row, a smaller title */
@container (max-width: 720px) {
  .jq-grid { display: flex; flex-direction: column; gap: 0; height: auto; }
  .jq-side { display: contents; container-type: normal; } /* its children ask the window's width then */
  .jq-mapcol { order: 1; height: min(64dvh, 600px); margin-top: 12px; }
  .jq-page, .jq-after { order: 2; }
}
@container (max-width: 620px) {
  .jq-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "orb text" "rank rank"; padding: 14px 12px 10px; }
  .jq-head .jr-rank { width: auto; grid-template-areas: "m k" "m b" "m p" "l l"; }
  .jq-head .jrk-push { margin-top: 1px; text-align: left; font-size: 15px; }
  .jq-orb { width: 64px; height: 64px; }
  .jq-orb b { font-size: 19px; }
  .jq-head h3 { font-size: 25px; }
  .jq-page > :not(.jq-banner) { margin-left: 12px; margin-right: 12px; }
  .jq-title { flex-wrap: wrap; }
  .jq-title-text { flex-basis: calc(100% - 64px); }
  .jq-title .jq-st { margin-left: 62px; }
  .jq-title h3 { font-size: 23px; }
  .jq-oi { width: 44px; height: 44px; }
  .jq-oi img[data-pic] { width: 40px; height: 40px; }
  .jq-ot { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .jq-page, .jq-img, .jv-stop button, .jv-stop button::after { animation: none !important; transition: none !important; } }