/* Free Realms HUD, laid out after the 2012-14 client (work/ref/hud2013/6-9.jpg), built from the client's own art.
   Every block is designed for 1280x720 and scaled from its own corner by --hud (hud.js fit(): .62 - 1.6). */
:root { --hud: 1; }
.client-topbar { display: none; }
.hud-player, .hud-nav, .hud-map, .hud-quest, .hud-dock, .hud-chatlog, .hud-chatctl { position: fixed; z-index: 5; font-family: "Trebuchet MS", system-ui, sans-serif; color: #fff; user-select: none; }
.hud-player button, .hud-nav button, .hud-map button, .hud-dock button, .hud-quest button, .hud-chatctl button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; }
.hud-player img, .hud-nav img, .hud-map img, .hud-dock img, .hud-quest img, .hud-chatctl img { display: block; pointer-events: none; }

/* ---- player frame (top-left) ---- */
.hud-player { left: 10px; top: 8px; transform: scale(var(--hud)); transform-origin: top left; display: flex; gap: 8px; align-items: center; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.hp-portrait { position: relative; width: 70px; height: 70px; flex: none; border-radius: 50%; overflow: hidden; cursor: pointer; border: 3px solid #eaf2ff; box-shadow: 0 0 0 2px #3a5a8c, 0 3px 8px rgba(0,0,0,.55), inset 0 0 8px rgba(0,20,60,.6); }
.hp-portrait img { position: absolute; }
.hp-portrait .hp-disc { inset: -8px; width: 86px; height: 86px; }
.hp-portrait .hp-ring { inset: 0; width: 70px; height: 70px; z-index: 2; opacity: .35; }
.hp-initial { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 800 30px Georgia, serif; color: #ffe8a8; }
.hp-face { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hp-portrait.has-face .hp-initial { display: none; }
.hp-info { display: grid; gap: 2px; }
.hp-top { display: flex; align-items: center; gap: 4px; min-height: 24px; }
.hp-switch { display: flex; align-items: center; position: relative; }
.hp-switch .hp-arrow { width: 18px; height: 18px; } .hp-switch .hp-wing { width: 28px; height: 28px; margin-left: -2px; }
.hp-switch:hover img { filter: brightness(1.25); }
.hp-name { font-weight: 800; font-size: 14px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.hp-job { display: flex; align-items: center; }
.hp-level { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; text-shadow: 0 1px 1px #5a3000; background: radial-gradient(circle at 35% 30%, #fff1a6, #f2b92b 55%, #a86a00); box-shadow: 0 0 0 2px #fff6d0, 0 2px 3px rgba(0,0,0,.5); }
.hp-jobbar { position: relative; margin-left: -6px !important; width: 140px; height: 22px; padding: 4px 6px 4px 10px !important; box-sizing: border-box; background-size: 100% 100% !important; background-repeat: no-repeat !important; }
.hp-jobbar i { display: block; height: 100%; border-radius: 7px; background-size: 100% 100%; min-width: 8px; }
.hp-jobname { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 6px; font-size: 11.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px #6b3400, 0 0 3px #6b3400; }
.hp-coins { display: flex; gap: 12px; align-items: center; font-weight: 800; font-size: 13px; margin-left: 4px; }
.hp-coins span { display: flex; align-items: center; gap: 4px; }
.hp-coins .gold i { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3a8, #f0b81c 55%, #a06a00); box-shadow: 0 0 0 1px #6b4600; }

/* ---- menu strip (top-centre) ---- */
.hud-nav { left: 50%; top: 3px; transform: translateX(-50%) scale(var(--hud)); transform-origin: top center; }
.hn-bar { display: flex; gap: 2px; align-items: center; padding: 3px 14px 4px; background-size: 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.hn-bar button { position: relative; width: 28px; height: 26px; display: grid; place-items: center; }
.hn-bar button img { width: 24px; height: 24px; transition: transform .1s; }
.hn-bar button:hover img { transform: scale(1.18); }
.hn-bar .key-badge { right: -2px; bottom: -4px; min-width: 11px; height: 11px; font-size: 8px; line-height: 11px; padding: 0 2px; opacity: 0; transition: opacity .15s; }
.hn-bar button:hover .key-badge, .hud-nav:hover .key-badge { opacity: 1; }

/* ---- minimap (top-right) ---- */
.hud-map { right: 10px; top: 8px; width: 156px; transform: scale(var(--hud)); transform-origin: top right; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hm-disc { position: relative; width: 146px; height: 146px; }
.hm-disc .hm-frame { position: absolute; inset: -5px; width: 156px; height: 156px; }
.hm-disc canvas { position: absolute; inset: 9px; width: 128px; height: 128px; border-radius: 50%; }
.hm-disc .hm-ring { position: absolute; inset: 5px; width: 136px; height: 136px; opacity: .9; }
.hm-disc button { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f2e3c9, #b89a6a) !important; box-shadow: 0 0 0 2px #6a4a24, 0 2px 3px rgba(0,0,0,.4); }
.hm-disc button img { width: 20px; margin: 2px; }
.hm-zin { right: -6px; bottom: 30px; } .hm-zout { right: 8px; bottom: 2px; }
.hm-label { display: grid; text-align: center; line-height: 1.15; padding: 2px 10px; border-radius: 10px; background: linear-gradient(rgba(60,64,120,.85), rgba(36,40,82,.85)); border: 1px solid #9fa7d8; max-width: 156px; }
.hm-area { font-weight: 800; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-clock { font-weight: 700; font-size: 10.5px; color: #dfe6ff; white-space: nowrap; }

/* ---- quest tracker in the social panel's slot (right, under the minimap) ---- */
.hud-quest { right: 10px; top: calc(8px + 196px * var(--hud)); width: 176px; transform: scale(var(--hud)); transform-origin: top right; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.hud-quest[hidden] { display: none; }
.hq-top { position: relative; height: 34px; background-size: 100% 100%; background-repeat: no-repeat; }
.hq-icon { position: absolute; right: 4px; top: -10px; width: 40px; height: 40px; z-index: 2; }
.hq-head { position: absolute !important; left: 6px; right: 34px; top: 9px; height: 22px; display: flex !important; align-items: center; gap: 4px; padding: 0 8px 0 18px !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; font-weight: 800 !important; font-size: 12px !important; text-shadow: 0 1px 1px #7a3000; }
.hq-head small { font-size: 10.5px; opacity: .95; }
.hq-fold { margin-left: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #fff; }
.hud-quest.collapsed .hq-fold { border-bottom: 0; border-top: 6px solid #fff; }
.hq-body { padding: 6px 10px 6px; background: linear-gradient(#3e5c8e, #34507f); border-left: 6px solid #4b4381; border-right: 6px solid #4b4381; font-size: 12px; text-shadow: 0 1px 1px #0b1a38; }
.hq-body b { display: block; color: #ffd24a; font-size: 13px; margin-bottom: 1px; }
.hq-body p { margin: 0 0 4px; color: #cfdcff; font-size: 11px; }
.hq-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.hq-body li { display: flex; gap: 5px; align-items: flex-start; color: #eef3ff; }
.hq-body li img { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.hq-body li.done { color: #a9b6e8; }
.hq-foot { height: 32px; margin-top: -2px; display: flex; justify-content: center; align-items: center; gap: 12px; background-size: 100% 100%; background-repeat: no-repeat; padding-bottom: 8px; box-sizing: border-box; }
.hq-foot button { position: relative; width: 26px; height: 26px; display: grid; place-items: center; }
.hq-foot button img { width: 24px; height: 24px; }
.hq-foot button img.flip { transform: scaleX(-1); }
.hq-foot button[disabled] { opacity: .35; cursor: default; }
.hq-foot .hq-round { position: absolute; inset: 0; width: 26px; height: 26px; }
.hq-foot .hq-j { position: relative; width: 20px !important; height: 20px !important; }
.hq-foot button:not([disabled]):hover img { filter: brightness(1.2); }
.hud-quest.collapsed .hq-body, .hud-quest.collapsed .hq-foot { display: none; }
.hq-tip { margin-top: 6px; padding: 4px 6px; border-radius: 6px; background: #ffd24a26; border: 1px solid #ffd24a66; color: #fff3c4; font-size: 11px; line-height: 1.3; }
.hq-tip::before { content: "Tip: "; font-weight: 800; color: #ffd24a; }
/* the job-shift box sits under the minimap; the quest panel moves down while a shift is on */
.shift-tracker { top: calc(8px + 196px * var(--hud)) !important; }
body:has(.shift-tracker:not([hidden])) .hud-quest { top: calc(8px + 262px * var(--hud)); }
/* inside a dungeon its own objective box is the one on screen */
body:has(.quest-tracker:not([hidden])) .hud-quest { display: none; }

/* ---- status dock (bottom-centre) ---- */
.hud-dock { left: 50%; bottom: 0; transform: translateX(-50%) scale(var(--hud)); transform-origin: bottom center; width: 480px; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 -1px 4px rgba(0,0,0,.35)); }
.hd-top { position: relative; width: 392px; height: 30px; background-size: 100% 100%; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; margin-bottom: -4px; z-index: 1; }
.hd-swirl { position: absolute; top: -8px; width: 36px; height: 36px; }
.hd-swirl.l { left: -14px; transform: scaleX(-1); } .hd-swirl.r { right: -14px; }
.hp-bars { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.hp-bars .bar { position: relative; width: 150px; height: 20px; padding: 4px 5px; box-sizing: border-box; background-size: 100% 100%; background-repeat: no-repeat; }
.hp-bars .bar i { display: block; height: 100%; border-radius: 5px; background-size: 100% 100%; transition: width .2s; }
.hp-bars .bar .v { position: absolute; inset: 0; display: grid; place-items: center; font: 800 11px "Trebuchet MS", sans-serif; color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; pointer-events: none; }
.hd-swords { position: relative; width: 36px; height: 18px; }
.hd-swords img { position: absolute; inset: 0; width: 36px; height: 18px; }
.hd-swords .on, .hd-swords.engaged .off { opacity: 0; } .hd-swords.engaged .on { opacity: 1; }
.hd-body { width: 480px; height: 56px; display: flex; align-items: center; gap: 6px; padding: 4px 8px 0; box-sizing: border-box; background-size: 100% 100%; background-repeat: no-repeat; border-radius: 14px 14px 0 0; }
.hd-end { position: relative; width: 46px; height: 46px; flex: none; }
.hd-end .hd-endbg { position: absolute; inset: 0; width: 46px; height: 46px; }
.hd-end .hd-endic { position: absolute; inset: 7px; width: 32px; height: 32px; transition: transform .1s; }
.hd-end:hover .hd-endic { transform: scale(1.15); }
.hd-body .slot.mount { position: relative; width: 38px; height: 38px; flex: none; }
.hd-body .slot.mount img { width: 38px; height: 38px; transition: transform .1s; }
.hd-body .slot.mount:hover img { transform: scale(1.12); }
.hd-slots { flex: 1; display: flex; justify-content: center; gap: 3px; }
.ab-slot { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; }
.ab-slot .ab-glass { position: absolute; inset: 0; width: 38px; height: 38px; }
.ab-slot .ab-ic { position: absolute; inset: 4px; border-radius: 50%; background: center / cover no-repeat; display: grid; place-items: center; font: 900 12px "Trebuchet MS", sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.ab-slot:not(.empty) .ab-ic:empty { background-color: transparent; }
.ab-slot:not(.empty) .ab-ic:not(:empty) { background: radial-gradient(circle at 40% 35%, #6f8fd0, #2d4682); }
.ab-slot .ab-cd { position: absolute; inset: 4px; border-radius: 50%; pointer-events: none; }
.ab-slot .ab-n { position: absolute; right: -2px; bottom: -3px; font: 800 10px "Trebuchet MS", sans-serif; font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
.ab-slot .ab-key { position: absolute; left: -3px; top: -4px; min-width: 12px; height: 13px; padding: 0 2px; border-radius: 4px; background: linear-gradient(#34477a, #1b2648); border: 1px solid #a9c0ea; font: 700 9px/13px "Trebuchet MS", sans-serif; text-align: center; color: #fff; }
.ab-slot .ab-key:empty { display: none; }
.ab-slot:hover:not(.empty) .ab-glass { filter: brightness(1.25) drop-shadow(0 0 4px #9fd0ff); }
.ab-slot.empty { cursor: default; } .ab-slot.disabled .ab-ic { filter: grayscale(1) brightness(.7); }
.ab-slot.pressed { animation: abpress .18s; } @keyframes abpress { 50% { transform: scale(.88); } }

/* ---- chat (bottom-left) ---- */
.hud-chatctl { left: 10px; bottom: 6px; transform: scale(var(--hud)); transform-origin: bottom left; display: flex; align-items: center; gap: 6px; }
.hud-chatctl > button img { width: 28px; height: 28px; transition: transform .1s; }
.hud-chatctl > button:hover img { transform: scale(1.15); }
.hud-chatctl .hc-tri img { width: 28px; height: 14px; }
.hud-chatctl.log-off .hc-tri img { transform: scaleY(-1); }
.hud-chatctl .hd-chat { position: absolute; left: 0; bottom: 36px; width: 300px; height: 28px; padding: 3px 10px; box-sizing: border-box; background-size: 100% 100%; background-repeat: no-repeat; }
.hud-chatctl .hd-chat input { width: 100%; height: 100%; box-sizing: border-box; border: 0; outline: 0; background: transparent; color: #234; font: 13px "Trebuchet MS", sans-serif; }
.hc-emotes { position: absolute; left: 60px; bottom: 36px; display: flex; flex-wrap: wrap; gap: 4px; width: 260px; padding: 6px; border-radius: 10px; background: linear-gradient(#3e5c8e, #2a3f6c); border: 2px solid #9fb6e0; }
.hc-emotes button { padding: 2px 8px !important; border-radius: 10px; background: #fff3d0 !important; color: #4a2a00 !important; font: 700 12px "Trebuchet MS", sans-serif !important; }
.hc-emotes button:hover { background: #ffd36b !important; }
.hc-emotes span { font-size: 12px; }
.hud-chatlog { left: 12px; bottom: calc(44px * var(--hud)); width: max(220px, min(400px, calc(50vw - 260px * var(--hud) - 20px))); font-size: calc(13px * var(--hud)); text-shadow: 0 1px 2px #000, 0 0 3px #000; display: grid; gap: 2px; pointer-events: none; max-height: 25vh; overflow: hidden; align-content: end; }
.hud-chatlog.hidden-log { display: none; }
.hud-chatlog b { color: #ffd24a; }
.hud-chatlog .old { opacity: .35; transition: opacity 2s; }
.hud-chatlog > div { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* bag opens from the dock (B) */
.bag { display: none; }
.bag.open { display: block; top: auto; bottom: calc(100px * var(--hud)); right: 50%; transform: translateX(310px); }
.controls-hint { bottom: calc(96px * var(--hud)); }
.dialog { bottom: calc(96px * var(--hud)); }
@media (max-width: 640px) { .hud-nav { display: none; } }

/* ---- quest offer / turn-in: the 2013 speech bubble (quests.js dialog -> hud.js HudQuestUI.bubble) ---- */
#qbubble.quest-bubble { position: fixed !important; right: auto !important; bottom: auto !important; width: 280px !important; max-width: none !important; transform: scale(var(--hud)) !important; transform-origin: top left !important;
  border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; z-index: 55;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); color: #1d2c4a !important; font: 13px/1.35 "Trebuchet MS", sans-serif !important; text-shadow: none !important; transition: left .15s, top .15s; }
#qbubble > * { margin: 0 !important; }
#qbubble .qb-panel { position: relative; padding: 9px 10px 10px; background: var(--qb-top) top / 100% 24px no-repeat, var(--qb-mid) 0 24px / 100% calc(100% - 24px) no-repeat; border-bottom: 2px solid #4f7396; border-radius: 0 0 10px 10px; }
#qbubble .qb-title { font: 800 13px "Trebuchet MS", sans-serif; color: #24375a; padding: 0 2px 5px; }
#qbubble .qb-inner { padding: 6px; border-radius: 10px; background: linear-gradient(#a7bad6, #7c95bd); border: 1px solid #5a77a3; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
#qbubble .qb-head { display: flex; align-items: flex-start; justify-content: space-between; }
#qbubble .qb-icon { width: 36px; height: 36px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
#qbubble .qb-det { cursor: pointer; font: 700 11px "Trebuchet MS", sans-serif; color: #fff; text-shadow: 0 1px 1px #24375a; padding: 1px 4px; }
#qbubble .qb-det i { font-style: normal; font-size: 8px; vertical-align: 1px; }
#qbubble .qb-det:hover { color: #fff6c8; }
#qbubble .qb-details { margin-top: 5px; padding: 8px 10px; border-radius: 8px; background: var(--qb-det) center / 100% 100% no-repeat; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); color: #fff; }
#qbubble .qb-who { font: 800 11px "Trebuchet MS", sans-serif; color: #ffd76a; margin-bottom: 3px; text-shadow: 0 1px 1px #0b1a38; }
#qbubble .qb-text { margin: 0 !important; color: #f2f6ff !important; font-size: 12.5px; text-shadow: 0 1px 1px #0b1a38; }
#qbubble .qb-text font { text-shadow: none; }
#qbubble.qb-closed .qb-details { display: none; }
#qbubble .qb-resp { position: relative; margin-top: 6px !important; padding: 5px 8px 3px; border-radius: 10px; background: var(--qb-resp) center / 100% 100% no-repeat; border: 2px solid #4f7396; }
#qbubble .opt.qb-btn { display: flex !important; align-items: center; gap: 8px; height: 32px; margin: 3px 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 8px !important; cursor: pointer;
  background: var(--qb-g0) center / 100% 100% no-repeat !important; color: #fff !important; font: 800 13px "Trebuchet MS", sans-serif !important; text-shadow: 0 1px 1px #1f4a0a, 0 0 2px #1f4a0a !important; box-shadow: none !important; }
#qbubble .opt.qb-btn:hover, #qbubble .opt.qb-btn.pad-focus { background-image: var(--qb-g1) !important; }
#qbubble .opt.qb-btn:active { background-image: var(--qb-g2) !important; }
#qbubble .opt.qb-no { background-image: var(--qb-t0) !important; color: #4b2a07 !important; text-shadow: 0 1px 0 rgba(255,255,255,.6) !important; }
#qbubble .opt.qb-no:hover, #qbubble .opt.qb-no.pad-focus { background-image: var(--qb-t1) !important; }
#qbubble .opt.qb-no:active { background-image: var(--qb-t2) !important; }
#qbubble .qb-glyph { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
#qbubble .qb-btn kbd { margin-left: auto; min-width: 14px; padding: 0 3px; border-radius: 4px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.5); font: 700 10px/14px "Trebuchet MS", sans-serif; text-align: center; color: #fff; text-shadow: none; }
#qbubble .qb-esc { display: block; text-align: right; font: 700 9.5px "Trebuchet MS", sans-serif !important; color: #46628c !important; margin: 0 !important; }
#qbubble .qb-tail { position: absolute; top: var(--qb-tail-y, 60px); width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-top: -13px; }
#qbubble[data-side="right"] .qb-tail { right: -15px; border-left: 16px solid #c4d3e8; filter: drop-shadow(2px 0 0 #4f7396); }
#qbubble[data-side="left"] .qb-tail { left: -15px; border-right: 16px solid #c4d3e8; filter: drop-shadow(-2px 0 0 #4f7396); }
#qbubble[data-side="none"] .qb-tail { display: none; }

/* ---- Journal "Quests" page: the 2013 quest book (quests.js html -> hud.js HudQuestUI.book). Parchment and cover are
   CSS (ADAPTED: the questjournal page art is not in the exported data); icons and buttons are the client's art. ---- */
.journal:has(#qbook) { width: min(920px, 96vw) !important; border: 0 !important; border-image: none !important; background: none !important; padding: 0 !important; filter: drop-shadow(0 14px 26px rgba(0,0,0,.6)); }
.journal:has(#qbook) > strong:first-child, .journal:has(#qbook) > small:last-child { display: none !important; }
.journal:has(#qbook) > .shop-tabs { margin: 0 44px -4px !important; flex-wrap: wrap; position: relative; z-index: 0; }
.journal:has(#qbook) .jr-body { max-height: none !important; overflow: visible !important; }
#qbook { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: min(540px, calc(100vh - 110px)); padding: 14px 16px; box-sizing: border-box; border-radius: 12px;
  background: linear-gradient(#7a8db0, #50648a); border: 3px solid #36486e; box-shadow: inset 0 0 0 2px #a9bbd8, 0 0 0 2px #2b3a5c; color: #3b2a14; text-shadow: none; font: 13px/1.35 "Trebuchet MS", sans-serif; }
#qbook::before, #qbook::after { content: ""; position: absolute; width: 26px; height: 26px; background: linear-gradient(135deg, #c7d3e6, #6f82a6); border: 2px solid #36486e; z-index: 2; }
#qbook::before { left: -6px; top: -6px; border-radius: 6px 0 12px 0; } #qbook::after { right: -6px; bottom: -6px; border-radius: 12px 0 6px 0; }
#qbook .qb-page { position: relative; padding: 12px 16px; overflow: hidden; display: flex; flex-direction: column; min-height: 0;
  background: radial-gradient(ellipse at 50% 45%, #f8f2e2 0%, #efe4cb 60%, #ddcaa3 100%); }
#qbook .qb-page.l { border-radius: 6px 2px 2px 6px; box-shadow: inset -18px 0 22px -14px rgba(90,60,20,.55), inset 0 0 0 1px rgba(120,90,40,.35); }
#qbook .qb-page.r { border-radius: 2px 6px 6px 2px; box-shadow: inset 18px 0 22px -14px rgba(90,60,20,.55), inset 0 0 0 1px rgba(120,90,40,.35); }
#qbook button { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0; color: inherit !important; font: inherit !important; text-shadow: none !important; cursor: pointer; transform: none !important; filter: none; }
#qbook button img { display: block; pointer-events: none; }
#qbook small { display: inline !important; text-align: inherit !important; margin: 0 !important; color: inherit !important; }
#qbook b { color: inherit; }
#qbook .qb-close { position: absolute; right: -14px; top: -14px; z-index: 3; width: 34px; height: 34px; }
#qbook .qb-close img { width: 34px; height: 34px; }
#qbook .qb-flags { position: absolute; right: -40px; top: 46px; display: grid; gap: 6px; }
#qbook .qb-flag { width: 38px; height: 104px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 0 10px 10px 0 !important;
  background: linear-gradient(90deg, #c4561d, #f08a32 40%, #e2702a) !important; box-shadow: 2px 2px 4px rgba(0,0,0,.4), inset 0 0 0 1px #ffc58a !important; color: #fff !important; text-shadow: 0 1px 1px #6b2a00 !important; font: 800 11px "Trebuchet MS", sans-serif !important; opacity: .82; }
#qbook .qb-flag span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
#qbook .qb-flag small { font-size: 10px !important; background: rgba(0,0,0,.25); border-radius: 6px; padding: 0 4px; }
#qbook .qb-flag.on { opacity: 1; width: 44px !important; background: linear-gradient(90deg, #a6400f, #e46f1e 40%, #cf5c16) !important; }
#qbook .qb-flag:hover { opacity: 1; }
#qbook .qb-ph { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin-bottom: 6px; }
#qbook .qb-ph b { font: 700 17px Georgia, serif; color: #5b3d16; }
#qbook .qb-ph span { font: 700 12px Georgia, serif; color: #7a5a2c; }
#qbook .qb-map { position: relative; flex: none; aspect-ratio: 2 / 1; max-height: 34%; margin: 0 auto 8px; width: 100%; background-size: 0 0; background-repeat: no-repeat; border: 2px solid #9b7a48; border-radius: 3px; overflow: hidden; }
#qbook .qb-map::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-size: 100% 100%; filter: sepia(.95) saturate(.55) contrast(1.15) brightness(1.08); opacity: .85; }
#qbook .qb-corner { position: absolute; width: 0; height: 0; border: 14px solid transparent; z-index: 1; }
#qbook .qb-corner.a { left: 0; top: 0; border-left-color: #5e4c7e; border-top-color: #5e4c7e; }
#qbook .qb-corner.b { right: 0; bottom: 0; border-right-color: #5e4c7e; border-bottom-color: #5e4c7e; }
#qbook .qb-mk { position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e2463b; box-shadow: 0 0 0 2px #fff3c4, 0 0 8px #e2463b; animation: qbmk 1s infinite alternate; }
@keyframes qbmk { to { transform: scale(1.35); } }
#qbook .q-rows { display: grid; align-content: start; gap: 2px; flex: 1; min-height: 0; }
#qbook .q-row { display: flex; align-items: center; gap: 6px; height: 27px; padding: 0 6px; border-radius: 4px; background: rgba(150,120,70,.12); cursor: pointer; }
#qbook .q-row:hover { background: rgba(150,120,70,.22); }
#qbook .q-row.sel { background: rgba(170,130,60,.32); box-shadow: inset 0 0 0 1px rgba(120,80,20,.4); }
#qbook .qr-icon { width: 22px; height: 22px; flex: none; }
#qbook .qr-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: #3b2a14; }
#qbook .qr-track { width: 18px; height: 18px; flex: none; } #qbook .qr-track img { width: 16px; height: 16px; margin: 1px; }
#qbook .qr-track.on { cursor: default; }
#qbook .qr-ab, #qbook .qr-ok, #qbook .qr-no { position: relative; width: 22px; height: 22px; flex: none; }
#qbook .qr-ab img { position: absolute; inset: 0; width: 22px; height: 22px; } #qbook .qr-ab .qr-abx { inset: 3px; width: 16px; height: 16px; }
#qbook .qr-ok img, #qbook .qr-no img { width: 20px; height: 20px; margin: 1px; }
#qbook .qr-ab:hover, #qbook .qr-ok:hover, #qbook .qr-no:hover, #qbook .qr-track:hover { filter: brightness(1.2); }
#qbook .qr-ask { font-weight: 800; color: #9a2a10; font-size: 12px; }
#qbook .q-none { padding: 10px 4px; color: #6b4a1e; font-style: italic; }
#qbook .qb-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; font: 700 12px Georgia, serif; color: #5b3d16; }
#qbook .qb-pager button { width: 28px; height: 28px; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
#qbook .qb-pager button.prev { transform: scaleX(-1) !important; }
#qbook .qb-page.r h3 { margin: 4px 0 0; font: 700 18px Georgia, serif; color: #5b3d16; text-align: center; }
#qbook .qb-line { text-align: center; font-style: italic; font-size: 11.5px; color: #7a5a2c; }
#qbook .qb-page.r h4 { margin: 12px 0 8px; font: 700 15px Georgia, serif; color: #6b4a1e; text-align: center; border-bottom: 1px solid rgba(120,90,40,.35); padding-bottom: 3px; }
#qbook .q-obj { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; overflow: hidden; }
#qbook .q-obj li { display: flex; gap: 8px; align-items: flex-start; }
#qbook .q-obj li img { width: 16px; height: 16px; flex: none; margin-top: 2px; }
#qbook .q-obj li b { display: block; font-weight: 700; color: #2e2010; }
#qbook .q-obj li small { display: block !important; font-size: 11.5px; color: #6b4a1e !important; }
#qbook .q-obj li.done { opacity: .62; }
#qbook .q-tip { margin-top: 10px; padding: 5px 8px; border-radius: 6px; background: rgba(240,180,60,.18); border: 1px solid rgba(160,110,30,.45); font-size: 11.5px; color: #5b3d16; }
#qbook .q-tip::before { content: "Tip: "; font-weight: 800; }
@media (max-width: 760px) { #qbook { grid-template-columns: 1fr; } #qbook .qb-page.r { display: none; } }

/* the creator hides the HUD and dialogs */
body.creating .hud-dock, body.creating .hud-quest, body.creating .hud-chatlog, body.creating .hud-chatctl, body.creating .hud-nav, body.creating .controls-hint, body.creating .talk-prompt, body.creating #enter, body.creating #qbubble { display: none !important; }
body.creating .hud-map, body.creating .hud-player { display: none !important; }

/* character creator */
.creator { position: fixed; right: 3vw; top: 50%; transform: translateY(-50%); z-index: 20; font-family: "Trebuchet MS", system-ui, sans-serif; }
.cr-panel { width: 330px; padding: 16px 18px 12px; border-radius: 16px; background: linear-gradient(#24346eef, #2b2a6cef); border: 3px solid #9fb0f0; box-shadow: 0 8px 26px rgba(0,0,0,.55); color: #fff; }
.cr-panel h2 { margin: 0 0 10px; text-align: center; font: 800 20px Georgia, serif; color: #ffd24a; text-shadow: 0 2px 0 #6b3a00; }
.cr-name { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; }
.cr-name input { flex: 1; height: 26px; border-radius: 12px; border: 2px solid #c5d6ef; padding: 0 10px; font: 14px "Trebuchet MS", sans-serif; }
.cr-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.cr-label { width: 92px; font-weight: 700; font-size: 13px; color: #cfe0ff; }
.cr-val { flex: 1; text-align: center; font-weight: 800; font-size: 14px; background: rgba(0,0,30,.35); border-radius: 10px; padding: 3px 4px; }
.cr-row button { width: 28px; height: 26px; border-radius: 50%; border: 2px solid #fff3c4; background: linear-gradient(#ffd36b, #f08a14); color: #5a2a00; font-weight: 900; cursor: pointer; }
.cr-swatches { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.cr-swatches i { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.cr-swatches i.on { box-shadow: 0 0 0 3px #ffd24a; }
.cr-buttons { display: flex; gap: 8px; margin-top: 12px; }
.cr-buttons button { flex: 1; height: 36px; border-radius: 18px; border: 2px solid #fff3c4; font: 800 14px "Trebuchet MS", sans-serif; cursor: pointer; }
.cr-random { background: linear-gradient(#9fc2ff, #4a74d8); color: #fff; }
.cr-done { background: linear-gradient(#ffd36b, #f08a14); color: #4a2000; }
.cr-hint { margin: 8px 0 0; font-size: 11px; color: #b9c6ef; text-align: center; }

/* jobs */
.jobs-panel { bottom: auto; top: 14%; }
.job-row { display: block; }
.job-row .lv { float: right; font-size: 12px; color: #7a5520; }
.job-row .xp { height: 6px; border-radius: 3px; background: rgba(0,0,0,.15); margin: 3px 0; overflow: hidden; }
.job-row .xp i { display: block; height: 100%; background: linear-gradient(90deg, #6fd04a, #2f9a1a); }
.job-row small { display: block; text-align: left; color: #5a3a10; font-weight: 600; }
.shift-tracker { position: fixed; right: 10px; top: 240px; z-index: 6; display: grid; gap: 1px; min-width: 150px; padding: 6px 10px; border-radius: 10px; background: linear-gradient(#6b3a10ee, #4a2508ee); border: 2px solid #f5a623; color: #fff; font: 13px "Trebuchet MS", sans-serif; }
.shift-tracker b { color: #ffd24a; } .shift-tracker .pay { color: #b9f06b; font-weight: 800; }
/* fishing */
.fishing-ui { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 7; min-width: 280px; padding: 8px 14px; border-radius: 14px; text-align: center; background: rgba(19,48,94,.9); border: 2px solid #9fd0ff; color: #fff; font: 600 14px "Trebuchet MS", sans-serif; }
.fishing-ui.bite { border-color: #ffd24a; animation: pulse .3s infinite alternate; } @keyframes pulse { to { transform: translateX(-50%) scale(1.06); } }
.fishing-ui.caught.rare { border-color: #c97cff; } .fishing-ui.caught.legendary { border-color: #ffb300; box-shadow: 0 0 18px #ffb300; }
.fishing-ui .bar { position: relative; height: 18px; margin-top: 6px; border-radius: 9px; background: #0d2244; box-shadow: inset 0 0 0 2px #9fd0ff; }
.fishing-ui .zone { position: absolute; top: 2px; bottom: 2px; border-radius: 7px; background: #4cd05a; }
.fishing-ui .mark { position: absolute; top: -3px; width: 6px; height: 24px; margin-left: -3px; border-radius: 3px; background: #ffd24a; box-shadow: 0 0 6px #000; }
.fish-book { bottom: auto; top: 6%; max-height: 80vh; overflow: auto; width: min(680px, 94vw); }
.fb-region { margin: 8px 0; } .fb-region > span { float: right; font-weight: 800; }
.fb-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.fb { padding: 3px 8px; border-radius: 8px; background: #fff7df; border: 2px solid #c8a060; font-weight: 700; font-size: 13px; }
.fb small { display: block; font-weight: 500; font-size: 11px; color: #7a5520; }
.fb.uncommon { border-color: #4caf50; } .fb.rare { border-color: #9c4dff; } .fb.legendary { border-color: #ff9800; background: #fff1cc; }
.fb.unknown { opacity: .75; background: #efe6cc; }
.fb-reward { color: #8a4a00; }

.shop .shop-tabs { display: flex; gap: 6px; margin: 6px 0; }
.shop .shop-tabs button, .shop-row button { border-radius: 12px; border: 2px solid #c8781a; background: #fff3d0; font-weight: 800; cursor: pointer; padding: 3px 10px; }
.shop .shop-tabs button.on { background: linear-gradient(#ffd36b, #f08a14); }
.shop-row { display: flex; align-items: center; gap: 8px; } .shop-row span { flex: 1; } .shop-row em { font-size: 12px; color: #7a5520; }

/* Journal (journal.js) */
.journal{width:min(560px,92vw);top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%);z-index:60;max-height:80vh}
.journal .jr-body{max-height:56vh;overflow:auto}
.journal .jr-entry small{display:block;opacity:.7;font-size:11px}
.journal .jr-discovery{border-left:3px solid #f5b83d}
.journal .jr-milestone{border-left:3px solid #6fd16f}
.journal .jr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.journal .jr-item small{display:block;opacity:.75;font-size:11px}
.journal .jr-unknown{opacity:.45;text-align:center}
.journal .hearts{color:#e2557a;font-size:14px;letter-spacing:1px}
.journal .hearts small{color:#8a6b4a;font-size:10px;margin-left:4px}
.journal .jr-rumour{border-left:3px solid #8f7ad8;font-style:italic}
.journal .jr-story{border-left:3px solid #e07b39}

/* Ending (achievements.js) */
.ending{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(circle,rgba(30,40,90,.85),rgba(5,8,25,.95));color:#fff;text-align:center;animation:endfade 2s ease}
.ending>div{max-width:min(560px,90vw);padding:24px}
.ending img{width:min(320px,70vw)}
.ending h1{font-family:Georgia,serif;color:#ffd75e;font-size:clamp(28px,6vw,46px);margin:.3em 0;text-shadow:0 2px 8px #000}
.ending .credits{opacity:.7;font-size:12px;margin-top:2em}
.ending button{margin-top:1em;padding:.6em 1.6em;border-radius:20px;border:0;background:linear-gradient(#ffcf4a,#f29a1b);font-weight:bold;cursor:pointer}
@keyframes endfade{from{opacity:0}to{opacity:1}}

/* Minigames (minigames.js) */
.minigame{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:70;width:min(420px,90vw);padding:12px 16px;border-radius:14px;background:linear-gradient(#fff8e6,#f3dfb4);border:3px solid #c98d2a;box-shadow:0 6px 18px rgba(0,0,0,.35);font:14px/1.3 Verdana,sans-serif;color:#4a2f12;text-align:center}
.minigame b{display:block;font-size:16px;margin-bottom:6px}
.mg-bar{position:relative;height:22px;border-radius:11px;background:#6b4a2b;overflow:hidden;box-shadow:inset 0 2px 4px #0006}
.mg-bar.hit{animation:mgshake .25s}
.mg-seam{position:absolute;top:0;bottom:0;width:12%;background:radial-gradient(#fff6a8,#f0b82c 60%,transparent);}
.mg-mark{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 6px #fff}
.mg-seq{display:flex;gap:6px;justify-content:center;margin:6px 0}
.mg-seq span{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:4px;border-radius:8px;background:#fff;border:2px solid #d9b98a;font-size:20px}
.mg-seq span em{font-size:10px;font-style:normal;color:#8a6b4a}
.mg-seq span.ok{background:#c9f3b5;border-color:#5fb53a}
.mg-seq span.bad{background:#f8b4b4;border-color:#d34b4b}
.mg-time{height:6px;border-radius:3px;background:#e0c79b;overflow:hidden}.mg-time i{display:block;height:100%;background:#e07b39}
.mg-msg{margin:6px 0 0}
@keyframes mgshake{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}

/* Pause menu + world map (worldmap.js) */
.pause-menu{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:rgba(10,18,40,.55);backdrop-filter:blur(2px)}
.pm-frame{width:min(1080px,96vw);padding:10px 14px 12px;border-radius:18px;background:linear-gradient(#fff6dd,#f1d9a4);border:4px solid #b9802c;box-shadow:0 10px 40px rgba(0,0,0,.5);font:13px Verdana,sans-serif;color:#4a2f12;text-align:center}
.pm-head{display:flex;gap:14px;align-items:baseline;justify-content:center;margin-bottom:6px}
.pm-head b{font:bold 22px Georgia,serif;color:#7a3f0c}
.pm-pct{color:#2f6b2a;font-weight:bold}
.pm-mapwrap{border-radius:10px;overflow:hidden;border:3px solid #8a5a1e;box-shadow:inset 0 0 20px rgba(0,0,0,.4)}
.pm-map{display:block;width:100%;height:auto;background:#1a4c7a}
.pm-buttons{display:flex;gap:10px;justify-content:center;margin:10px 0 4px;flex-wrap:wrap}
.pm-buttons button{padding:.5em 1.4em;border-radius:16px;border:2px solid #b06a12;background:linear-gradient(#ffd767,#f3a02a);font-weight:bold;color:#4a2400;cursor:pointer}


/* owner: no ring over the minimap (it had been removed before; the 2013 HUD rebuild brought it back) */
.hm-disc .hm-ring { display: none !important; }