/* the Reliquary (js/fps/ashrelic.js): the ornate plate round a dark well of brass rings and amber relics.
   Painted pieces only: assets/ui/cgx/panel_orn.webp as a 9-slice that grows with the window, panel_crest, banner (9-slice), fl_l/fl_r, divider,
   hex_socket (the keystones), orb_frame (the medallion), eq_slot (the square buttons, their signs at half their size, centred; the user 27.10.: 'eckige statt runde'); the buttons the plates' own (--plate) */
#ashRelq{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(16,9,4,.62),rgba(0,0,0,.88));pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
#ashRelq.on{display:flex}
#ashRelq .rqp{position:relative;box-sizing:border-box;width:min(1180px,94vw);height:min(780px,90vh);display:flex;flex-direction:column;padding:16px 46px 50px;isolation:isolate;color:#d9dcdf}
#ashRelq .rqp::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-width:71px 48px 78px 48px;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 71px 48px 78px 48px stretch;filter:drop-shadow(0 10px 24px rgba(0,0,0,.8));pointer-events:none}
#ashRelq .rqp::after{content:"";position:absolute;left:50%;top:-17px;width:31px;height:37px;margin-left:-15.5px;background:url("../assets/ui/cgx/panel_crest.webp") center/100% 100% no-repeat;z-index:2;pointer-events:none}
/* the title on the banner between its flourishes */
#ashRelq .rqh{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px}
#ashRelq .rqfl,#ashRelq .rqfr{display:block;flex:none;width:78px;height:28px;background:url("../assets/ui/cgx/fl_l.webp") center/contain no-repeat}
#ashRelq .rqfr{background-image:url("../assets/ui/cgx/fl_r.webp")}
#ashRelq .rqban{box-sizing:border-box;min-width:300px;padding:2px 16px 4px;text-align:center;border-style:solid;border-width:16px 58px 19px 58px;border-image:url("../assets/ui/cgx/banner.webp") 60 234 70 234 fill / 16px 58px 19px 58px stretch}
#ashRelq .rqban small{display:block;margin:5px 0 -6px;font:700 10.5px/1 var(--f-display);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:#ffb469;text-shadow:0 0 8px rgba(255,122,42,.6),0 1px 2px #000}
#ashRelq .rqban h2{margin:-3px 0 0;font:700 19px/1.15 var(--f-display);letter-spacing:.22em;padding-left:.22em;text-transform:uppercase;color:#fff1e0;text-shadow:0 0 10px rgba(255,140,60,.4),0 1px 2px #000;white-space:nowrap}
/* close: the square plate, its sign centred at half its size */
#ashRelq .rqx{--plate:none;position:absolute;z-index:3;top:22px;right:44px;width:42px;height:42px;padding:0;border:0;border-radius:0;background:url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important;box-shadow:none;cursor:pointer}
#ashRelq .rqx::after{content:"";position:absolute;inset:25%;background:url("../assets/icons/cg2/close.webp?v=5") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
#ashRelq .rqx:active{transform:scale(.93)}
/* the column on the left, the board on the right (the user 27.10.: 'links und rechts tauschen') */
#ashRelq .rqb{flex:1 1 auto;min-height:0;display:flex;flex-direction:row-reverse;gap:14px}
#ashRelq .rqboard{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(ellipse at 50% 50%,#1a120b 0%,#0d0b09 70%,#080706 100%);box-shadow:inset 0 0 0 1px rgba(255,150,70,.2),inset 0 0 50px rgba(0,0,0,.85)}
#ashRelq .rqboard:active{cursor:grabbing}
#ashRelq .rqboard>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#ashRelq .rqzoom{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:6px;z-index:2}
#ashRelq .rqzoom button{--plate:none;position:relative;width:40px;height:40px;padding:0;border:0;border-radius:0;background:url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important;box-shadow:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
#ashRelq .rqzoom button svg{width:50%;height:50%;fill:none;stroke:#ffc98e;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #000)}
#ashRelq .rqzoom button:active{transform:scale(.93)}
/* the chart */
#ashRelq .disc{stroke:none}
#ashRelq .ring{fill:none;stroke:#8a6a3c;stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:3 7}
#ashRelq .rim{fill:none;stroke:#b8894a;stroke-opacity:.55;stroke-width:1.6}
#ashRelq .rim2{fill:none;stroke:#6a4a22;stroke-opacity:.7;stroke-width:3}
#ashRelq .tick{fill:none;stroke:#8a6a3c;stroke-opacity:.45;stroke-width:1.2}
#ashRelq .tick2{fill:none;stroke:#d0a060;stroke-opacity:.7;stroke-width:2}
#ashRelq .sect{fill:none;stroke:#8a6a3c;stroke-opacity:.16;stroke-width:1.2;stroke-dasharray:2 10}
#ashRelq .pname text{font:700 17px var(--f-display);letter-spacing:.2em;text-transform:uppercase;fill:var(--c,#d8b47a);paint-order:stroke;stroke:#0b0806;stroke-width:4px;stroke-linejoin:round}
#ashRelq .e{fill:none;stroke-linecap:round}
#ashRelq .e.dim{stroke:#5c4428;stroke-width:1.6;stroke-opacity:.7}
#ashRelq .e.next{stroke:#d8aa64;stroke-width:2;stroke-opacity:.9}
#ashRelq .e.plan{stroke:#ffd9a0;stroke-width:2.2;stroke-dasharray:5 5}
#ashRelq .e.litg{stroke:#ff6a1a;stroke-width:8;stroke-opacity:.3}
/* the paths' pencil figures behind their relics: faint, never in the way of a tap */
#ashRelq .rqfigs{pointer-events:none}
#ashRelq .rqfigs .fig image{opacity:calc(.42 + .58 * var(--lf, 0));transition:opacity .6s ease-out}
#ashRelq .e.lit{stroke:#ffb05a;stroke-width:2.6}
/* a relic: unlit dull brass, the next one bright brass, lit an ember */
#ashRelq .ln .gl{opacity:0}
#ashRelq .ln.got .gl{opacity:1}
#ashRelq .ln .o{fill:#17110b;stroke:url(#rqBrass);stroke-width:2.2}
#ashRelq .ln .o2{fill:none;stroke:#8a6a3c;stroke-width:1.4;stroke-opacity:.8}
#ashRelq .ln .i{fill:#4f3c26}
#ashRelq .ln.can .o{stroke:#ffe6b8;stroke-width:2.4}
#ashRelq .ln.can .i{fill:#d8aa64}
#ashRelq .ln.can .o2{stroke:#ffe6b8;stroke-opacity:.9}
#ashRelq .ln.got .o{fill:var(--c,#ff8a30);stroke:#fff1dc}
#ashRelq .ln.got .o2{stroke:var(--c,#ffb05a);stroke-opacity:1}
#ashRelq .ln.got .i{fill:#fff3dc}
#ashRelq .ln.plan .o{stroke:#ffd9a0;stroke-dasharray:3 2}
#ashRelq .ln.far{opacity:.5}
#ashRelq .ln .sr{fill:none;stroke:#ffeccb;stroke-width:1.6;stroke-dasharray:4 3;opacity:0}
#ashRelq .ln.sel .sr{opacity:1}
/* the life in it (Kharos' Lodestar; the user 27.10.: 'Animationen beim Auswählen und Skillen fehlten'): the chosen relic's mark turning and its glow breathing, the ones that can be lit next breathing faintly, a lit one springing in */
#ashRelq .ln .sr,#ashRelq .ln.pop>*{transform-box:fill-box;transform-origin:center}
#ashRelq .ln.sel .sr{animation:rqSpin 9s linear infinite}
#ashRelq .ln.sel .gl{opacity:1;animation:rqBreath 1.5s ease-in-out infinite}
#ashRelq .ln.can:not(.sel) .gl{opacity:.5;animation:rqBreath 2.6s ease-in-out infinite}
/* lit (the user 28.10.: 'more love, länger, epischer'): dim while the fire runs to it, a breath in, the burst, settling with a swing; its glow blown up white-hot and burning down (js/fps/ashrelic.js ignite) */
#ashRelq .ln.pop>:not(.gl){animation:rqSpring 1.3s var(--pd,0s) both}
#ashRelq .ln.pop .gl{animation:rqPop 1.9s var(--pd,0s) both}
#ashRelq .rqburst{pointer-events:none}
#ashRelq .rqburst *{transform-box:fill-box;transform-origin:center}
#ashRelq .rqburst .run,#ashRelq .rqburst .rung{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:rqRun .55s ease-in both}
#ashRelq .rqburst .rung{stroke-opacity:.35}
#ashRelq .rqburst .hd{fill:#fff3dc;opacity:0;transform-box:view-box;transform-origin:0 0;animation:rqHead .55s ease-in both}
#ashRelq .rqburst .inh{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;animation:rqInhale .55s ease-in both}
#ashRelq .rqburst .fl{fill:#fff6e6;opacity:0;animation:rqWhite .8s ease-out both}
#ashRelq .rqburst .rg{fill:none;vector-effect:non-scaling-stroke;opacity:0;animation:rqRing 1.1s cubic-bezier(.1,.7,.3,1) both}
#ashRelq .rqburst .sp{opacity:0;animation:rqSpark 1.2s cubic-bezier(.05,.75,.3,1) both}
#ashRelq .rqburst .ry{opacity:0;animation:rqRays 2.2s ease-out both}
#ashRelq .rqburst .wv,#ashRelq .rqburst .wvg{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;transform-origin:50% 51.55%;animation:rqWave 1.6s cubic-bezier(.2,.6,.35,1) both}
#ashRelq .rqfigs .fig.flare image{animation:rqFig 2.4s var(--fd,0s) ease-out both}
#ashRelq .pname.flare text{transform-box:fill-box;transform-origin:center;animation:rqName 2s var(--fd,0s) ease-out both}
#ashRelq .rqboard.quake>svg{animation:rqQuake .5s var(--qd,0s) linear both}
#ashRelq .rqflash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 30%,var(--c) 130%);opacity:0;animation:rqFlash 1.8s ease-out both}
#ashRelq .rqdone.stamp{display:inline-block;animation:rqStamp .9s ease-out both}
@keyframes rqRun{to{stroke-dashoffset:0}}
@keyframes rqHead{0%{opacity:0;transform:translate(var(--x0),var(--y0))}8%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(var(--x1),var(--y1))}}
@keyframes rqInhale{0%{opacity:0;transform:scale(3.2)}60%{opacity:.9}100%{opacity:1;transform:scale(.35)}}
@keyframes rqWhite{0%{opacity:0;transform:scale(.2)}12%{opacity:.85;transform:scale(1.5)}100%{opacity:0;transform:scale(2.4)}}
@keyframes rqRing{0%{opacity:0;transform:scale(.3);stroke-width:7px}6%{opacity:1}100%{opacity:0;transform:scale(3.6);stroke-width:.5px}}
@keyframes rqSpark{0%{opacity:0;transform:translate(0,0) scale(1.4)}6%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
@keyframes rqRays{0%{opacity:0;transform:scale(.2) rotate(0)}15%{opacity:.7;transform:scale(1) rotate(8deg)}100%{opacity:0;transform:scale(1.25) rotate(40deg)}}
#ashRelq .rqburst .wvg{stroke-width:12;--wo:.22}
@keyframes rqWave{0%{opacity:0;transform:scale(1)}8%{opacity:var(--wo,.8)}100%{opacity:0;transform:scale(var(--ws,7))}}
@keyframes rqFig{0%{opacity:calc(.42 + .58 * var(--lf, 0))}25%{opacity:1}100%{opacity:calc(.42 + .58 * var(--lf, 0))}}
@keyframes rqName{0%{fill:var(--c,#d8b47a);transform:scale(1)}15%{fill:#fff6e6;transform:scale(1.22)}100%{fill:var(--c,#d8b47a);transform:scale(1)}}
@keyframes rqQuake{0%,100%{transform:translate(0,0)}15%{transform:translate(-5px,3px)}30%{transform:translate(4px,-4px)}45%{transform:translate(-3px,-2px)}60%{transform:translate(3px,2px)}80%{transform:translate(-1px,1px)}}
@keyframes rqFlash{0%{opacity:0}10%{opacity:.35}100%{opacity:0}}
@keyframes rqStamp{0%{opacity:0;transform:scale(2.2);letter-spacing:.6em}30%{opacity:1;transform:scale(.94)}55%{transform:scale(1.04);text-shadow:0 0 18px #ffb05a}100%{transform:scale(1);text-shadow:0 0 6px rgba(255,122,42,.5)}}
@keyframes rqSpin{to{transform:rotate(360deg)}}
@keyframes rqBreath{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes rqSpring{0%{transform:scale(1);opacity:.3}11%{transform:scale(.55);opacity:.8}24%{transform:scale(2.2);opacity:1}42%{transform:scale(.88)}60%{transform:scale(1.08)}78%{transform:scale(.98)}100%{transform:scale(1);opacity:1}}
#ashRelq .ln .kf{fill:#120d09}
#ashRelq .ln .kg path{fill:none;stroke:#b8915a;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
#ashRelq .ln.can .kg path{stroke:#ffe6b8}
#ashRelq .ln.got .kf{fill:url(#rqKey)}
#ashRelq .ln.got .kg path{stroke:#fff3dc}
@keyframes rqPop{0%{transform:scale(.3);opacity:0}8%{transform:scale(.3);opacity:0}20%{transform:scale(3.2);opacity:1}45%{transform:scale(1.7);opacity:1}100%{transform:scale(1);opacity:1}}
#ashRelq .cost rect{fill:#1a120b;stroke:#ffd9a0;stroke-width:1.6}
#ashRelq .cost text{font:700 13px var(--f-display);fill:#ffe6b8}
/* the column (on the left): its own scroll */
#ashRelq .rqinfo{flex:0 0 300px;min-height:0;display:flex;flex-direction:column;gap:9px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#6a3a1c transparent;padding:2px 4px 2px 0}
#ashRelq .rqpts{flex:none;display:flex;align-items:center;gap:10px;padding:6px 12px;background:linear-gradient(90deg,rgba(255,122,42,.08),rgba(255,122,42,.02));box-shadow:inset 0 0 0 1px rgba(255,140,60,.18)}
#ashRelq .rqpts b{font:700 24px/1 var(--f-display);color:#a99c88;min-width:1.1em;text-align:center}
#ashRelq .rqpts span{font:600 11px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#a99c88}
#ashRelq .rqpts.has b{color:#ffc27a;text-shadow:0 0 10px rgba(255,122,42,.7)}
#ashRelq .rqpts.has span{color:#ffd9b0}
#ashRelq .rqcard{flex:none;padding:10px 12px 12px;background:linear-gradient(180deg,rgba(43,46,51,.6),rgba(18,19,22,.75));box-shadow:inset 0 0 0 1px rgba(255,140,60,.2);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
#ashRelq .rqcard.empty p{margin:2px 0 4px;font:400 13px/1.4 var(--f-body);color:#d0c4b0}
#ashRelq .rqcard.empty p.tip{color:#8f8578;font-style:italic;font-size:12px}
#ashRelq .rqch{display:flex;align-items:center;gap:10px}
#ashRelq .rqni{flex:none;width:46px;height:46px;overflow:visible}
#ashRelq .rqch b{display:block;font:700 15px/1.2 var(--f-display);letter-spacing:.06em;color:#fff1e0;text-shadow:0 1px 2px #000}
#ashRelq .rqch small{display:block;margin-top:3px;font:600 10.5px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#c9955a}
#ashRelq i.rqrule{display:block;height:14px;margin:7px 0 5px;background:url("../assets/ui/cgx/divider.webp") center/contain no-repeat;opacity:.9}
#ashRelq ul{list-style:none;margin:0;padding:0}
#ashRelq .rqfx li,#ashRelq .rqtot li{position:relative;padding:3px 0 3px 14px;font:500 13px/1.35 var(--f-body);color:#ecdfca}
#ashRelq .rqfx li::before,#ashRelq .rqtot li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;transform:rotate(45deg);background:#ff9a4a;box-shadow:0 0 4px rgba(255,122,42,.7)}
#ashRelq li.neg{color:#ff9a80}
#ashRelq li.neg::before{background:#c0402a;box-shadow:none}
#ashRelq .rqact{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;flex-wrap:wrap}
html body #ashRelq .rqbtn,html body #ashRelq .rqreset{--plate:gold;height:40px;min-width:150px;padding:0 20px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:600 12.5px/1 var(--f-display)!important;letter-spacing:.14em!important;text-transform:uppercase;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
html body #ashRelq .rqbtn.neg,html body #ashRelq .rqreset{--plate:dark;color:#f3c89a!important;text-shadow:0 1px 2px #000!important}
#ashRelq .rqbtn:active,#ashRelq .rqreset:active{transform:scale(.96)}
#ashRelq .rqdone{font:600 11.5px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#ffc27a;text-shadow:0 0 6px rgba(255,122,42,.5)}
#ashRelq .rqdone.dim{color:#8f8578;text-shadow:none}
#ashRelq i.cel{display:inline-block;width:14px;height:14px;vertical-align:-2px;background:url("../assets/icons/cg2/celestine.webp") center/contain no-repeat}
#ashRelq .rqtot{flex:none;padding:8px 10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);background:rgba(0,0,0,.25)}
#ashRelq .rqtot h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 5px;font:700 11px/1.2 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#ffb469}
#ashRelq .rqtot h4 em{font-style:normal;color:#d0c4b0;letter-spacing:.06em}
#ashRelq .rqtot li{font-size:12px;padding:2px 0 2px 13px}
#ashRelq .rqtot p{margin:2px 0;font:italic 400 12px/1.35 var(--f-body);color:#8f8578}
#ashRelq .rqfoot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 4px}
#ashRelq .rqfoot small{font:500 11px/1.2 var(--f-body);color:#a99c88;text-align:right}
/* the menu's tile: there in Cindergate (the lodestar's and the mastery's are not), the lantern its sign until the Reliquary's own is painted (docs/ASSETS-TODO.md); the menu button's dot while a point waits */
html body.ashzone #gmenu .tile[data-go="lode"].rq{display:flex!important;--cgic:url("../assets/icons/cgsk/lanternburst.webp")}
#side.rqfresh .sbtn[data-open="menu"] .dot{display:block;animation:freshdot 1.8s ease-in-out infinite}
/* a phone (landscape): the whole screen, the same plate and flourishes at their smaller size */
body.touch #ashRelq{background:#000}
body.touch #ashRelq .rqp{width:auto;height:auto;position:fixed;inset:max(4px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));padding:18px 28px 30px}
body.touch #ashRelq .rqp::before{border-width:49px 33px 54px 33px;border-image-width:49px 33px 54px 33px}
body.touch #ashRelq .rqp::after{top:0;width:22px;height:26px;margin-left:-11px}
body.touch #ashRelq .rqh{margin-bottom:4px;gap:6px}
body.touch #ashRelq .rqfl,body.touch #ashRelq .rqfr{width:50px;height:18px}
body.touch #ashRelq .rqban{min-width:200px;padding:1px 10px 2px;border-width:11px 40px 13px 40px;border-image-width:11px 40px 13px 40px}
body.touch #ashRelq .rqban small{font-size:8px;margin:3px 0 -4px}
body.touch #ashRelq .rqban h2{font-size:13.5px;margin-top:-2px}
body.touch #ashRelq .rqx{top:10px;right:26px;width:34px;height:34px}
body.touch #ashRelq .rqb{gap:9px}
body.touch #ashRelq .rqinfo{flex-basis:236px;gap:6px}
body.touch #ashRelq .rqzoom{right:6px;bottom:6px;gap:5px}
body.touch #ashRelq .rqzoom button{width:34px;height:34px}
body.touch #ashRelq .rqpts{padding:4px 10px}
body.touch #ashRelq .rqpts b{font-size:19px}
body.touch #ashRelq .rqpts span{font-size:9.5px}
body.touch #ashRelq .rqcard{padding:8px 10px 9px}
body.touch #ashRelq .rqni{width:36px;height:36px}
body.touch #ashRelq .rqch b{font-size:13px}
body.touch #ashRelq .rqch small{font-size:9px}
body.touch #ashRelq i.rqrule{height:10px;margin:5px 0 3px}
body.touch #ashRelq .rqfx li{font-size:11.5px;padding:2px 0 2px 12px}
body.touch #ashRelq .rqtot li{font-size:10.5px}
body.touch #ashRelq .rqtot h4{font-size:9.5px}
body.touch #ashRelq .rqcard.empty p{font-size:11.5px}
html body.touch #ashRelq .rqbtn,html body.touch #ashRelq .rqreset{height:34px;min-width:128px;padding:0 14px;font-size:11px!important}
body.touch #ashRelq .rqact{margin-top:7px}
body.touch #ashRelq .rqfoot small{font-size:9.5px}
#ashRelq .rqastro polygon{stroke-linejoin:miter;stroke-miterlimit:8}