/* =========================================================================
   The chase (js/ancients.js, charmhunt.js, glyphforge.js, hunt.js, buildimpact.js):
   ancient / unique-charm item styling, the Chronicle hunt list, the HUD button,
   the "what it does for you" comparison, and the larger character screen.
   ========================================================================= */
:root{--anc:#ff4a5e;--anc-deep:#5a0612;--uch:#c99bff;--gw:#9fe86a}

/* ------------------------------------------------------------ tooltip ---- */
#tooltip.ancTip{border-color:#ff4a5ecc!important;box-shadow:0 4px 28px #000d,0 0 22px #ff204055!important}
#tooltip.ancTip .tname{color:var(--anc)!important;text-shadow:0 0 12px #ff204099;font-weight:700}
#tooltip.ancTip > div:first-child{background:linear-gradient(135deg,#4a0814,#0b0806)!important;border-bottom-color:#ff4a5e88!important}
#tooltip.ancTip div:has(> .ancMarker){background:#2a0610cc!important;border-color:#ff4a5e77!important}
#tooltip .ancDown{margin-top:4px;color:#ff8a7a;font-size:max(12px,var(--qo-small,12px))}
#tooltip .ancSrc{margin-top:4px;font-size:max(12px,var(--qo-small,12px));color:#c9a8ad}
#tooltip .ancSrc b{font-weight:600;letter-spacing:1px;color:#ff8a9a;font-size:max(12px,var(--qo-small,12px))}
#tooltip .gchLine{margin:-2px 0 6px;padding:5px 8px;font-size:max(12px,var(--qo-small,12px));color:#e8d8ff;background:#1c1230cc;border:1px solid #c99bff55;border-radius:5px}
#tooltip .gchLine b{color:#fff;font-weight:600}
#tooltip .gchLine i{color:#a99fbf}
#tooltip .gchLine span{font-size:max(12px,var(--qo-small,12px));color:#8a7fa0;letter-spacing:.5px}

/* ground labels (qol.js .gLbl) */
.gLbl.ancLbl{color:#ff5a6e!important;border-color:#ff4a5ecc!important;box-shadow:0 0 14px #ff2040aa!important;background:#1a0408e6!important}
.gLbl.uchLbl{color:#d8b8ff!important;border-color:#c99bffcc!important;box-shadow:0 0 12px #a060ff99!important}

/* --------------------------------------------- bag cells / equipped slots ---- */
.item:has(> .ancCell){border-color:var(--anc)!important;box-shadow:inset 0 0 14px #ff204066,0 0 10px #ff204055!important;animation:ancPulse 2.4s ease-in-out infinite}
.item:has(> .uchCell){border-color:var(--uch)!important;box-shadow:inset 0 0 12px #a060ff55,0 0 8px #a060ff44!important}
.item:has(> .gchCell){border-color:#e8ca58!important}
.item .ancCell,.item .uchCell,.item .gchCell{position:absolute;top:2px;left:3px;font:700 max(12px,var(--qo-small,12px))/1 Cinzel,serif;pointer-events:none;text-shadow:0 0 4px #000}
.item .ancCell::after{content:'✸';color:var(--anc)}
.item .uchCell::after{content:'◆';color:var(--uch)}
.item .gchCell::after{content:'+1';color:#ffe08a}
/* build-defining (rewrites a hotbar skill): js/buildimpact.js */
.item .bdM{position:absolute;left:3px;bottom:2px;font:700 max(12px,var(--qo-small,12px))/1 Cinzel,serif;color:#ff6a7a;text-shadow:0 0 6px #ff2040,0 0 2px #000;pointer-events:none}
@keyframes ancPulse{0%,100%{box-shadow:inset 0 0 14px #ff204066,0 0 8px #ff204044}50%{box-shadow:inset 0 0 20px #ff2040aa,0 0 16px #ff204077}}
.eq.anc{background:radial-gradient(80% 80% at 50% 40%,rgba(255,40,70,.32),transparent 70%) padding-box,linear-gradient(180deg,#160a0c,#06080c) padding-box,linear-gradient(160deg,#ffd0d6,#6a0a1a 50%,#ff4a5e) border-box!important}
.cslot.uch{box-shadow:inset 0 0 0 1px var(--uch),0 0 12px #a060ff88!important;border-color:var(--uch)!important}
.cslot.gch{box-shadow:inset 0 0 0 1px #e8ca58,0 0 8px #e8ca5866!important;border-color:#e8ca58!important}
/* the charm satchel: eight real places, art you can see (the diamond clip cut charms to a 30 px sliver) */
#invPanel #charmBag{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px}
#invPanel #charmBag .cslot{width:auto;height:58px;clip-path:none;border-radius:3px}
#invPanel #charmBag .cslot img{width:100%!important;height:100%!important;object-fit:cover;display:block}

/* ------------------------------------------------- comparison: build impact ---- */
#tooltip.biWide{width:600px!important;max-width:96vw;column-count:2;column-gap:18px;column-rule:1px solid #3a455644}
#tooltip.biWide > div,#tooltip.biWide .biBox{break-inside:avoid}
#tooltip.biWide > div:first-child{column-span:all}
.biBox{margin-top:6px;padding:6px 8px;background:#0e141bcc;border:1px solid #5a7a9a44;border-radius:5px}
.biHd{font-size:max(12px,var(--qo-small,12px));letter-spacing:2px;color:#8fb0c8;margin-bottom:3px}
.biDef{margin:-2px -4px 5px;padding:3px 6px;text-align:center;font:700 max(12px,var(--qo-small,12px))/1.3 Cinzel,serif;letter-spacing:1.5px;color:#ffd0d6;background:linear-gradient(90deg,transparent,#5a0612cc,transparent)}
.biRow{display:flex;justify-content:space-between;gap:12px;font-size:max(12px,var(--qo-small,12px));padding:1px 0;color:#9a917f}
.biRow b{font-weight:600}.biRow .up{color:#8fd66a}.biRow .dn{color:#e88a7a}.biRow i{font-style:normal;font-size:max(12px,var(--qo-small,12px))}
.biRw{margin-top:4px;font-size:max(12px,var(--qo-small,12px));color:#e8dcc0}
.biRw b{font-size:max(12px,var(--qo-small,12px));letter-spacing:1.5px;color:#ff8a9a;font-weight:600}
.biRw span.bar{color:#fff;font-weight:600}
.biRw.none{color:#7a7264;font-style:italic}
.biRw.lose b{color:#e8a05a}
.biLine{font-size:max(12px,var(--qo-small,12px));color:#b8ad98;font-weight:normal}

/* ---------------------------------------------------- the hunt (Chronicle) ---- */
#codexPanel.huntOn{width:min(1180px,96vw);top:3vh;bottom:11vh}
#codexPanel.huntOn > h2 + div,#codexPanel.huntOn > h2 + div + div{display:none}
/* seven tabs (THE HUNT + six) were 556 px in a 500 px panel: centred flex squeezed THE KEPT onto two lines and
   clipped THE HUNT and COLLECTION at both edges. A slightly wider book, tighter tabs, and a wrap as the backstop. */
#codexPanel:not(.huntOn){width:640px}
#codexPanel #chronTabs{flex-wrap:wrap;row-gap:4px;gap:5px}
#codexPanel #chronTabs .tabBtn{flex:0 0 auto;white-space:nowrap;letter-spacing:.16em;padding:5px 11px}
/* not-yet-found rows still carry the hint (where a letter rests, what a set is) but sat at ~1.5:1 on the page
   (#4a453c / #3a352c on #0b0d10): unreadable. Keep them dim against the gold of found rows, but legible (~4:1). */
#codexPanel .letRow:not(.on),#codexPanel [style*="color:#4a453c"]{color:#786f5e!important}
#codexPanel .keptCard .kn{color:#75828e}
#codexPanel .keptCard .ko{color:#66717c}
#codexPanel td[style*="color:#3a352c"]{color:#575143!important}
#codexPanel .hTab{color:#ffd27a!important;border-color:#c9a45a!important}
#codexPanel .hTab.on{background:linear-gradient(180deg,#5a3a10,#2a1a08)!important;color:#fff3d0!important;box-shadow:0 0 12px #c9a45a66}
.hBox{margin-top:8px}
.hHead{text-align:center;margin-bottom:6px}
.hTitle{font:900 26px/1 "Cinzel Decorative",Cinzel,serif;letter-spacing:.12em;color:#ffd9a0;text-shadow:0 0 16px #ff9a3c66}
.hSum{font-size:max(12.5px,var(--qo-small,12px));color:#d8c8a8;margin-top:4px}
.hBarBig{height:7px;margin:6px auto 4px;width:min(520px,90%);border:1px solid #5a4326;background:#0a0705;overflow:hidden}
.hBarBig i{display:block;height:100%;background:linear-gradient(90deg,#c9a227,#ff9a3c,#ff4a5e)}
.hRenown{font:600 max(12px,var(--qo-small,12px))/1.3 Cinzel,serif;letter-spacing:.14em;color:#ffd27a}
.hSec{display:flex;align-items:baseline;gap:10px;margin:14px 0 7px;padding-bottom:4px;border-bottom:1px solid #6a4f2a66;font:700 max(13px,var(--qo-small,12px))/1 Cinzel,serif;letter-spacing:.2em;color:#e6c98a}
.hSec em{font-style:normal;font-size:max(12px,var(--qo-small,12px));color:#b08a5a;letter-spacing:.05em}
.hSec span{margin-left:auto;font:italic 500 max(12px,var(--qo-small,12px))/1.2 "Cormorant Garamond",serif;letter-spacing:0;color:#8a7a62}
.hTrail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hT{display:flex;gap:9px;align-items:center;padding:6px 8px;border:1px solid #ff4a5e55;background:linear-gradient(90deg,#2a0610aa,#0e0806aa);border-radius:5px}
.hT img{width:44px;height:44px;border-radius:4px;filter:grayscale(.85) brightness(.5);box-shadow:0 0 0 1px #ff4a5e55}
.hT b{display:block;font:600 max(12.5px,var(--qo-small,12px))/1.2 Cinzel,serif;color:#ffd0d6}
.hT span{font-size:max(12px,var(--qo-small,12px));color:#c99a9f}
.hMarkWarm{margin:2px 0 8px;padding:7px 10px;border:1px solid #ff4a5e99;box-shadow:inset 0 0 18px #ff2a4422;background:linear-gradient(90deg,#3a0812cc,#120806aa);font:500 max(12.5px,var(--qo-small,12px))/1.35 "Cormorant Garamond",serif;color:#ffc4cc}
.hMarkWarm b{font:600 max(12.5px,var(--qo-small,12px))/1 Cinzel,serif;color:#ffe0e4}
.hMarks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 4px}
.hMk0{flex:0 0 100%;font:600 max(12px,var(--qo-small,12px))/1.2 Cinzel,serif;letter-spacing:.14em;color:#c99a9f}
.hMk{display:flex;gap:7px;align-items:center;padding:4px 8px 4px 4px;border:1px solid #6a4f2a88;background:#140e08cc;border-radius:4px;max-width:calc(50% - 6px)}
.hMk img,.hMk i{width:30px;height:30px;border-radius:3px;flex:none;font-style:normal;text-align:center;line-height:30px;color:#ff4a5e}
.hMk b{font:600 max(12px,var(--qo-small,12px))/1.15 Cinzel,serif;color:#ffd0d6}
.hMk span{display:block;font-size:max(12px,var(--qo-small,12px));color:#a08a72}
.hMk.ok{border-color:#ff9a3c99}.hMk.ok span{color:#ffb070}
.hMk.gone img{filter:grayscale(.9) brightness(.45)}.hMk.gone b{color:#9a7a80}
.hFilt{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:12px 0 2px}
.hFilt button{all:unset;cursor:pointer;padding:4px 10px;font:700 max(12px,var(--qo-small,12px))/1 Cinzel,serif;letter-spacing:.15em;color:#c9a45a;border:1px solid #6a4f2a;background:#140e08}
.hFilt button.on{color:#140e08;background:#e6c98a;border-color:#e6c98a}
.hFilt label{margin-left:10px;font-size:max(12px,var(--qo-small,12px));color:#a8987a;cursor:pointer}
.hGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.hCard{display:grid;grid-template-columns:72px minmax(0,1fr);gap:9px;padding:7px;border:1px solid #3a2e20;background:linear-gradient(180deg,#140f0a,#0b0806);border-radius:5px;min-width:0}
/* H7 (2026-10-15): the codex holds ~140 cards (~1900 nodes), ~4 on screen: off-screen cards skip style/layout/paint. Per card, not per
   grid: a grid's paint containment would clip the ancient cards' 14 px glow. 195 px = the median card, so the scroll height stays within 3% */
#codexPanel .hCard{content-visibility:auto;contain-intrinsic-size:auto 195px}
.hCard.got{border-color:#6a4f2a}
.hCard.k-ancient{border-color:#5a1420}.hCard.k-ancient.got{border-color:#ff4a5eaa;box-shadow:0 0 14px #ff204033}
.hCard.k-charm{border-color:#3e2a5a}.hCard.k-charm.got{border-color:#c99bffaa}
.hCard.other{opacity:.45}
.hArt{position:relative;width:72px;height:72px;border-radius:4px;overflow:hidden;background:#050403;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #3a2e20}
.hArt img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.34) contrast(1.35);transition:filter .25s}
.hCard:not(.got):hover .hArt img{filter:grayscale(.55) brightness(.62) contrast(1.15)}
.hCard.got .hArt img{filter:none}
.hArt > i{font-style:normal;font-size:28px;color:#3a2e20}
.hCard.got .hArt > i{color:#ff9a3c}
.hLock,.hTick{position:absolute;right:3px;bottom:2px;font:700 max(13px,var(--qo-small,12px))/1 Cinzel,serif;color:#6a5a48;text-shadow:0 0 4px #000}
.hTick{color:#8fd66a}
.hSeq{display:flex;flex-direction:column;align-items:center;gap:1px}
.hSeq em{font:700 max(12px,var(--qo-small,12px))/1.1 Cinzel,serif;font-style:normal;letter-spacing:.12em}
.hTag{font:700 max(12px,var(--qo-small,12px))/1 Cinzel,serif;letter-spacing:.18em;color:#8a7a62}
.k-ancient .hTag{color:#ff6a7a}.k-charm .hTag{color:var(--uch)}.k-word .hTag{color:var(--gw)}.k-leg .hTag{color:#ff9a3c}.k-set .hTag{color:#5fd07a}.k-keep .hTag{color:#dcb0ff}
.hName{margin:3px 0 2px;font:700 max(13.5px,var(--qo-small,12px))/1.15 Cinzel,serif;color:#cdbb98}
.hCard.got .hName{color:#fff1cf}
.k-ancient.got .hName{color:#ffd0d6}
.hPow{font-size:max(12px,var(--qo-small,12px));line-height:1.35;color:#d8c8a8}
.hDown{font-size:max(12px,var(--qo-small,12px));color:#e88a7a;margin-top:2px}
.hWhere{margin-top:3px;font-size:max(12px,var(--qo-small,12px));line-height:1.3;color:#9a8a72}
.hWhere b{font:700 max(12px,var(--qo-small,12px))/1 Cinzel,serif;letter-spacing:.15em;color:#c9a45a}
.hWhere span{margin-right:5px;color:#5a5046}.hWhere span.on{color:#5fd07a}
.hPity{display:flex;align-items:center;gap:6px;margin-top:4px}
.hBar{flex:1;height:5px;background:#0a0705;border:1px solid #3a2e20;overflow:hidden}
.hBar i{display:block;height:100%;background:linear-gradient(90deg,#7a1020,#ff4a5e)}
.hBar.w i{background:linear-gradient(90deg,#3a6a2a,#9fe86a)}
.hPity span{font-size:max(12px,var(--qo-small,12px));color:#c99a9f;white-space:nowrap}
.hOther{font-size:max(12px,var(--qo-small,12px));color:#7a7264;font-style:italic;margin-top:2px}

/* -------------------------------------------------------------- HUD button ---- */
#huntBtn{position:fixed;left:14px;top:38px;z-index:20;pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:6px 11px 6px 10px;border:1px solid #8a6a3a;background:linear-gradient(180deg,#24180ccc,#120c06e6);box-shadow:0 2px 10px #000a,inset 0 0 0 1px #00000066;color:#e6c98a}
#huntBtn:hover{border-color:#ffd27a;box-shadow:0 0 12px #c9a45a66}
#huntBtn b{font:700 max(12px,var(--qo-small,12px))/1 Cinzel,serif;letter-spacing:.16em;color:#ffd9a0}
#huntBtn span{font-size:max(12px,var(--qo-small,12px));color:#c9b48a}
#huntBtn em{font-style:normal;font-size:max(12px,var(--qo-small,12px));color:#ff8a9a}

/* ---------------------------------------------- character screen: bigger ---- */
#invPanel .ivHero{grid-template-columns:minmax(0,1fr) 330px}
#invPanel .ivHeroDoll{padding:10px 8px 8px 12px}
#invPanel .ivHero #doll.dollBig{padding:10px 10px;gap:8px 10px;
  grid-template-columns:60px 60px minmax(0,1fr) 60px 60px;grid-template-rows:repeat(6,68px);
  grid-template-areas:"helm helm st amu amu" "chest chest st rl rr" "chest chest st off off" "wpn wpn st off off" "wpn wpn st off off" "wpn wpn st boots boots"}
#invPanel .ivHero #dollStage{grid-column:3;grid-row:1 / span 6}
#invPanel .ivHero .eq{height:auto;min-height:0;overflow:hidden}
#invPanel .ivHero .eq img{width:100%!important;height:100%!important;object-fit:contain;margin:0!important;padding:9px 9px 18px;box-sizing:border-box}
/* (2026-10-03) legendary portraits fit the slot whole (cover cropped + zoomed them past the frame), a little smaller */
#invPanel .ivHero .eq img.tall{object-fit:contain;padding:10px 10px 19px}
#invPanel .ivHero .eq .slotSil{width:40%;height:40%}
#invPanel .ivPower{gap:8px;padding:12px 16px 10px}
#invPanel .ivPower .pwStat b{font-size:20px}
#invPanel .ivPower .pwStat.pwDmg b{font-size:30px}
#invPanel .ivBody.ivT-bag .ivMain.ivBag{padding:10px 16px 12px}

/* the hunt in the character screen's power column */
.pwHunt{display:flex;flex-direction:column;gap:5px}
.pwHunt .pwRen{font:600 max(12px,var(--qo-small,12px))/1.3 Cinzel,serif;letter-spacing:.08em;color:#ffd27a}
.pwTr{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center;padding:4px 6px 4px 4px;background:linear-gradient(90deg,#2a0610aa,transparent);box-shadow:inset 0 0 0 1px #ff4a5e33}
.pwTr img{width:40px;height:40px;filter:grayscale(.8) brightness(.55)}
.pwTr b{display:block;font-weight:normal;font-size:max(12.5px,var(--qo-small,12px));color:#ffd0d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwTr span{display:block;font-size:max(12px,var(--qo-small,12px));color:#c99a9f}
.pwTr i{display:block;height:3px;margin-top:3px;background:#0a0705}
.pwTr i em{display:block;height:100%;background:linear-gradient(90deg,#7a1020,#ff4a5e)}

/* (2026-10-03) Pavel: charms and runes were hard to tell apart in the bag. Charms are HEXAGONS in a gold
   hex outline (bag and charm grid); runes (glyphs) stay round. */
.item.charmItem{background:radial-gradient(circle at 50% 45%,rgba(60,44,16,.55),rgba(8,6,3,.9))!important}
.item.charmItem::before,#invPanel #charmBag .cslot.filled::before{content:'';position:absolute;inset:1px;z-index:0;pointer-events:none;
  background:linear-gradient(160deg,#f3d58a,#9a6e22 55%,#5a3d10);clip-path:polygon(25% 2%,75% 2%,99% 50%,75% 98%,25% 98%,1% 50%)}
.item.charmItem img,#invPanel #charmBag .cslot.filled img{position:relative;z-index:1;clip-path:polygon(26% 6%,74% 6%,96% 50%,74% 94%,26% 94%,4% 50%)}
.item.charmItem .cnt{z-index:2}
.item.glyphItem img{border-radius:50%}
#invPanel #charmBag .cslot.filled{position:relative}
/* (2026-10-03 b) the charm grid slot is a wide box: draw a TRUE hexagon centred in it, no square rarity
   frame around it; the hex rim carries the colour (gold, unique violet --uch) and glows through drop-shadow. */
#invPanel #charmBag .cslot.filled{border-color:transparent!important;background:none!important;box-shadow:none!important;
  --hc:#d9b45a;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--hc) 55%,transparent))}
#invPanel #charmBag .cslot.filled.uch{--hc:var(--uch)}
#invPanel #charmBag .cslot.filled::before{inset:auto;top:0;bottom:0;left:50%;transform:translateX(-50%);height:100%;aspect-ratio:1.155;
  background:linear-gradient(160deg,color-mix(in srgb,var(--hc) 60%,#fff),var(--hc) 55%,color-mix(in srgb,var(--hc) 45%,#000))}
#invPanel #charmBag .cslot.filled img{width:auto!important;height:100%!important;aspect-ratio:1.155;margin:0 auto;object-fit:cover}
#invPanel #charmBag .cslot:not(.filled){position:relative;border-color:transparent!important;background:none!important;box-shadow:none!important}
#invPanel #charmBag .cslot:not(.filled)::before,#invPanel #charmBag .cslot:not(.filled)::after{content:'';position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);height:100%;aspect-ratio:1.155;pointer-events:none;clip-path:polygon(25% 2%,75% 2%,99% 50%,75% 98%,25% 98%,1% 50%)}
#invPanel #charmBag .cslot:not(.filled)::before{background:rgba(90,216,198,.28)}
#invPanel #charmBag .cslot:not(.filled)::after{height:calc(100% - 4px);top:2px;bottom:auto;background:#0b1214}