/* Silver, smoke and garnet. All ornament lives outside the WebGL scene. */
.globe{width:208px;height:208px;bottom:0;z-index:6}
.orbWell,.orbGlass{left:20%;top:17.5%;width:60%;height:60%}
.orbWell .fill{visibility:hidden}
.orbLiquid{position:absolute;inset:0;width:100%;height:100%}
.orbWell{box-shadow:inset 0 0 22px #000,0 0 12px #000}
.orbGlass{z-index:2;box-shadow:inset 2px 2px 3px #d9f4ffb3,inset -3px -2px 4px #010408,inset 0 0 12px #050811;
 background:radial-gradient(ellipse 24% 12% at 32% 18%,#ffffffb0,transparent 90%),radial-gradient(ellipse 70% 48% at 40% -2%,#b7dbf04d,transparent 90%),radial-gradient(ellipse 38% 13% at 62% 88%,#7adeff42,transparent 95%),radial-gradient(circle at 44% 38%,transparent 38%,#03051099 96%)}
.orbGlass::before{content:'';position:absolute;left:12%;top:7%;width:68%;height:28%;border-radius:50%;border-top:2px solid #efffffbc;transform:rotate(-24deg)}
.orbGlass::after{content:'';position:absolute;inset:5%;border-right:2px solid #c9eeff88;border-bottom:1px solid #c9eeff55;border-radius:50%;transform:rotate(24deg)}
.orbFrame{z-index:3}
.globe .globeTxt{top:auto;bottom:28px;font:600 max(13px,var(--qo-small,12px))/1.1 Georgia,serif;letter-spacing:.02em;color:#f4eee1;white-space:nowrap;text-shadow:0 2px 3px #000,0 0 5px #000}
.orbLbl{bottom:0;color:#c8c8ba;font:max(12px,var(--qo-small,12px)) Georgia,serif;letter-spacing:.32em}
#hpGlobe.low .orbWell{animation:orbDanger 1.4s ease-in-out infinite}
@keyframes orbDanger{50%{box-shadow:0 0 22px #c9214580,inset 0 0 12px #df365066}}
#vcardRoot{position:fixed;inset:0;pointer-events:none;z-index:7;overflow:hidden}
.vcard{position:absolute;left:0;top:0;width:224px;height:76px;text-align:center;color:#d5c7a7;will-change:transform}
.vcard .vi{position:absolute;left:94px;bottom:0;width:36px;height:36px;box-sizing:border-box;border:1px solid #a99c7555;border-radius:50%;background:radial-gradient(circle,#191e21c9,#080c1099);box-shadow:0 2px 9px #0006;animation:sigilFloat 4.6s ease-in-out infinite;transition:color .25s,filter .25s}
.vcard .vi::after{content:'';position:absolute;inset:-4px;border:1px solid #c7b58822;border-radius:50%;border-top-color:#c7b58888;border-bottom-color:#c7b58888}
.vcard svg{width:24px;height:24px;margin:5px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.vcard .vt{position:absolute;bottom:48px;left:0;right:0;opacity:0;transform:translateY(4px);transition:opacity .22s,transform .22s;padding:7px 8px 6px;background:linear-gradient(90deg,#06090c00,#090d12ed 12%,#090d12ed 88%,#06090c00);border-top:1px solid #a69b7155;border-bottom:1px solid #a69b7133;text-shadow:0 1px 3px #000}
.vcard .vn{font:600 max(12px,var(--qo-small,12px))/1.2 Cinzel,Georgia,serif;letter-spacing:.045em;color:#e7e0cf}
.vcard .vk{font:max(12px,var(--qo-small,12px))/1.5 Georgia,serif;text-transform:uppercase;letter-spacing:.22em;color:#b1a78e;margin-top:3px}
.vcard.active .vt{opacity:1;transform:none}
/* v2 run 36: a trader with a quest for you: gold sigil ring + a gold quest line on the open card */
.vcard .vq{display:none;font:600 max(12px,var(--qo-small,12px))/1.3 Cinzel,Georgia,serif;letter-spacing:.04em;color:#ffd36a;margin-top:4px;padding-top:4px;border-top:1px solid #e9b94a44}
.vcard.quest .vq{display:block}
.vcard.quest .vi{border-color:#e9b94acc;color:#ffd36a;box-shadow:0 2px 9px #0006,0 0 10px #ffb84a55}
.vcard.turnin .vq{color:#ffe9a8}
.vcard.active .vi{color:#e5d5ab;filter:drop-shadow(0 0 4px #c8ad7055)}
.vcard.hover .vi{filter:drop-shadow(0 0 7px #eed3a4aa)}
@keyframes sigilFloat{50%{transform:translateY(-4px)}}
#flickerWrap{top:14px;width:360px;pointer-events:auto}
#flickerBar{height:4px}
#flickerBar::before,#flickerBar::after{width:6px;height:6px;margin-top:-3px;background:linear-gradient(135deg,#b3b6ad,#323d46);box-shadow:0 0 0 1px #06090c}
#flickerLbl{font-size:max(12px,var(--qo-small,12px));letter-spacing:.18em;color:#bac7c3;margin-top:7px}
#corrWrap,#resWrap{position:fixed;top:47px;width:168px;pointer-events:auto;text-align:center;transform:none}
#corrWrap{left:calc(50% - 176px)}
#resWrap{left:calc(50% + 8px)}
#corrBar,#resBar{height:4px;position:relative;background:#070b10;box-shadow:0 0 0 1px #3f4850,0 0 0 2px #05080b}
#corrBar::before,#resBar::before{content:'';position:absolute;inset:-3px -5px;border-left:1px solid #9c9d8c;border-right:1px solid #9c9d8c;pointer-events:none}
#corrBar::after,#resBar::after{content:'';position:absolute;inset:-1px 0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#b0b1a578 calc(25% - 1px),#b0b1a578 25%);pointer-events:none}
#corrFill,#resFill{height:100%;position:relative;overflow:hidden;background:linear-gradient(90deg,#321729,#b7506c);transition:width .3s}
#resFill{background:linear-gradient(90deg,#214643,#90bcb0)}
#corrFill::after,#resFill::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#eee9d74d 50%,transparent 70%);background-size:200% 100%;animation:shimmer 5s linear infinite}
#corrLbl,#resLbl{margin-top:6px;font:max(12px,var(--qo-small,12px)) Georgia,serif;text-transform:uppercase;letter-spacing:.12em;color:#dbc5cd;text-shadow:0 1px 3px #000}
#resLbl{color:#b4d6ca}
#corrWrap:hover,#resWrap:hover,#flickerWrap:hover{filter:brightness(1.25)}
#bossWrap{top:92px;width:420px;--foe:#a43d4b;--foe-hi:#e28381;pointer-events:none;padding-top:24px;filter:drop-shadow(0 3px 5px #000)}
body.foeEngaged #navObj{visibility:hidden}
#bossWrap[data-rank=elite],.ebar[data-rank=elite]{--foe:#88723d;--foe-hi:#d6b979}
#bossWrap[data-rank=champion],.ebar[data-rank=champion]{--foe:#3b6785;--foe-hi:#8ebfcb}
#bossBar{height:9px;border:1px solid #a2947c;background:linear-gradient(#040608,#23151b);box-shadow:0 0 0 2px #090b0f,0 0 0 3px #3a4148,inset 0 2px 4px #000}
#bossBar::before,#bossBar::after{width:10px;height:10px;margin-top:-5px;background:linear-gradient(135deg,#b2a896,#252d36);border:1px solid #626c73;box-shadow:0 0 0 2px #070a0d;z-index:4}
#bossWrap[data-rank=boss] #bossBar::before,#bossWrap[data-rank=boss] #bossBar::after{width:14px;height:14px;margin-top:-7px}
#bossFill,.ebarFill{position:relative;z-index:2;background:linear-gradient(180deg,var(--foe-hi),var(--foe) 45%,#190e18)!important;box-shadow:inset 0 1px 0 #ffe5c233;transition:width .09s linear}
#bossFill::after{content:none}
#bossBar{background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#c4b6a844 calc(25% - 1px),#c4b6a844 25%)}
.foeTicks{position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#1a101bcc calc(25% - 1px),#1a101bcc 25%)}
#bossWrap[data-ey] .foeTicks{display:none}
#bossBar .eyN{z-index:4}
.foeChip{position:absolute;left:0;top:0;height:100%;width:100%;transform-origin:0 50%;transition:transform .09s linear;background:#bdb19a;opacity:.7;z-index:1;pointer-events:none}
#bossLbl{position:absolute;top:0;left:0;right:0;margin:0;font:600 max(15px,var(--qo-small,12px))/1.4 Cinzel,Georgia,serif;letter-spacing:.16em;color:#e4d7c2}
#foeAffixes{margin-top:9px;text-align:center;font:max(12px,var(--qo-small,12px))/1.2 Georgia,serif;color:#c1b096;letter-spacing:.17em}
#foeValue{text-align:center;margin-top:5px;font:max(12px,var(--qo-small,12px)) Georgia,serif;color:#c2bdb2;font-variant-numeric:tabular-nums}
.ebar{--foe:#94313d;--foe-hi:#d57879;width:60px;height:5px;transform:translateX(-9px);overflow:visible;border:1px solid #9d8f7966;border-radius:0;background:#090b10;box-shadow:0 0 0 1px #080a0d,0 2px 4px #000}
.ebar .foeName{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;color:#dbceb5;font:max(12px,var(--qo-small,12px)) Georgia,serif;text-shadow:0 1px 3px #000,0 0 4px #000}
.ebar[data-rank=elite],.ebar[data-rank=champion],.ebar[data-rank=boss]{width:80px;transform:translateX(-19px);height:6px;border-color:#aca082}
#mmHud div.mmRim{inset:5.5%;border:1px solid #7f8886;box-shadow:0 0 0 2px #080d12,0 4px 16px #000b,inset 0 0 12px #000}
#mmHud .mmCompass{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 1px 1px #000)}
#mmHud div.mmB{border:1px solid #727d7a;background:linear-gradient(#283138,#080c10);color:#cdc7b7}
#mmHud div.mmZone{color:#c7c4b5;letter-spacing:.15em}
.mmLegendBtn{position:absolute;left:calc(50% - 21px);bottom:-2px;width:42px;height:22px;border:1px solid #656e6b;background:linear-gradient(#232c33,#080c10);color:#d3cbb9;font:max(12px,var(--qo-small,12px)) Georgia;letter-spacing:.12em;cursor:pointer}
#mmLegend{position:absolute;right:0;top:calc(100% + 30px);width:202px;box-sizing:border-box;padding:12px 14px;background:linear-gradient(120deg,#1b242cf5,#080c11fa);border:1px solid #7d8074;box-shadow:0 8px 24px #000b,inset 0 0 0 3px #111820;z-index:60;color:#d7d3c5}
#mmLegend[hidden]{display:none}
.mmKeyHead{font:max(12px,var(--qo-small,12px)) Georgia;letter-spacing:.2em;border-bottom:1px solid #72786b55;padding:0 0 9px;margin-bottom:6px;color:#bcb29a}
.mmKeyHead button{float:right;color:#d7d3c5;background:none;border:0;cursor:pointer;font:18px/12px Georgia}
.mmKeyRow{display:flex;align-items:center;gap:10px;min-height:29px;font:max(12px,var(--qo-small,12px)) Georgia,serif}
.mmKeyRow canvas{position:static!important;width:26px!important;height:26px!important;flex:none;border-radius:0!important}
html.qoTouch .globe .globeTxt{font-size:max(17px,var(--qo-small,12px))}
html.qoTouch .orbLbl{font-size:max(12px,var(--qo-small,12px))}
html.qoTouch .vcard .vn{font-size:max(15px,var(--qo-small,12px))}
html.qoTouch .vcard .vk{font-size:max(12px,var(--qo-small,12px))}
html.qoTouch .vcard .vq{font-size:max(14px,var(--qo-small,12px))}
html.qoTouch #hud #mpGlobe,html.qoTouch #hud #hpGlobe{bottom:10px!important}
html.qoTouch #mmHud .mmLegendBtn{height:30px;bottom:-5px;font-size:max(12px,var(--qo-small,12px));width:48px;left:calc(50% - 24px)}
html.qoTouch #mmLegend{width:238px;max-height:calc(100vh - 270px);overflow:auto;touch-action:pan-y}
html.qoTouch .mmKeyRow{font-size:max(14px,var(--qo-small,12px));min-height:34px}
html.qoTouch .mmKeyHead button{width:32px;height:24px}
@media(prefers-reduced-motion:reduce){.vcard .vi,#corrFill::after,#resFill::after,#flickerFill::after,#hpGlobe.low .orbWell{animation:none}}

/* The legend opens beside the phone map, clear of the combat controls. */
html.qoTouch #mmHud #mmLegend{position:fixed;left:50%;right:auto;top:74px;transform:translateX(-50%);width:360px;max-height:calc(100vh - 138px);padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:0 12px;background:#0c131bf7}
html.qoTouch #mmHud #mmLegend[hidden]{display:none}
html.qoTouch #mmLegend .mmKeyHead{grid-column:1/-1}
html.qoTouch #mmLegend .mmKeyRow{font-size:max(13px,var(--qo-small,12px));min-height:34px}
html.qoTouch #hud .orbLbl{bottom:0}
html.qoTouch #hud .globe .globeTxt{font-size:max(17px,var(--qo-small,12px));bottom:27px}
html.qoTouch #hud #corrLbl,html.qoTouch #hud #resLbl{font-size:max(12px,var(--qo-small,12px))}

/* Critical values remain above the world's low-life vignette. */
#hud{z-index:6}
#corrLbl,#resLbl{white-space:nowrap;font-size:max(12px,var(--qo-small,12px));letter-spacing:.1em}
#resFill{background:linear-gradient(90deg,#315f63,#b2dccd);box-shadow:0 0 6px #94caba55}
#corrFill{background:linear-gradient(90deg,#59263f,#d4748b);box-shadow:0 0 6px #bd667555}
#bossWrap{padding-top:27px}
#bossWrap::after{content:'';position:absolute;left:24px;right:24px;top:42px;height:5px;border-top:1px solid #8a827057;clip-path:polygon(0 0,100% 0,98% 100%,2% 100%);background:linear-gradient(90deg,#a79b7133,transparent 25%,transparent 75%,#a79b7133)}
#bossWrap[data-rank=boss] #bossBar::before,#bossWrap[data-rank=boss] #bossBar::after{background:linear-gradient(135deg,#d3ccba,#6f7b81 48%,#182530 51%,#9ba5a1);border:1px solid #b5b1a0;box-shadow:0 0 0 2px #070a0d,inset 0 0 0 3px #1b2831}
#bossWrap[data-rank=normal]{width:320px}
#foeAffixes{color:#d4c3a5;font-size:max(12px,var(--qo-small,12px))}
#foeValue{color:#e1d9c8;font-size:max(12px,var(--qo-small,12px))}
#bossLbl{color:#f0e5d1}
#mmLegend{border-color:#687773}
#mmHud:has(#mmLegend:not([hidden])){z-index:44}
html.qoTouch #mmHud #mmLegend{width:440px;padding:16px 20px}
html.qoTouch #mmLegend .mmKeyRow{font-size:18px;min-height:40px}
html.qoTouch #mmLegend .mmKeyHead{font-size:max(14px,var(--qo-small,12px))}
html.qoTouch #mmLegend .mmKeyHead button{width:44px;height:36px;font-size:26px}
/* Rare encounters can keep their own world-boss panel alongside a selected foe. */
/* 2026-10-13: thin elite bar (worldboss.js); under the selected foe's bar, high on screen */
body.foeEngaged #wbBar:not(.wbIn){top:172px}
body #wbBar .fg{filter:saturate(.65);box-shadow:inset 0 1px 0 #e6ebdf88,inset 0 -3px 4px #070d1b88}

/* lane B 2026-10-05 (G7/P): bar fills SCALE instead of resizing - the writers (ui.js, hudpolish.js, eyrie.js) set transform:scaleX(f); a width change re-laid the bar out every update */
#corrFill,#resFill,#bossFill,.ebarFill{width:100%!important;transform-origin:0 50%;transition:transform .09s linear}
#corrFill,#resFill{transition:transform .3s}