/* the operation's summary (js/fps/ashjobsum.js): the banner at its end, the ornate plate, the reports.
   Painted pieces only: assets/ui/cgx/banner.webp and panel_orn.webp as 9-slices that grow with the text, panel_crest, fl_l/fl_r, divider,
   hex_socket (icons at half its size, centred); the buttons the plates' own (js/ui/plates.js, --plate) */

/* ---------- the banner: no touch, gone after ~4 s ---------- */
#ashJSB{position:fixed;left:0;right:0;top:calc(150px * var(--hs,1));margin:0 auto;width:max-content;max-width:min(620px,86vw);z-index:56;display:none;flex-direction:column;align-items:center;pointer-events:none!important;opacity:0}
#ashJSB *{pointer-events:none!important}
#ashJSB.on{display:flex;animation:ashJSin 4.2s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes ashJSin{0%{opacity:0;transform:scale(1.18)}9%{opacity:1;transform:scale(1)}84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
#ashJSB .jbk{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:-3px;position:relative;z-index:1}
#ashJSB .jbk b{font:700 14px/1 var(--f-display);letter-spacing:.32em;text-transform:uppercase;color:#ffc27a;text-shadow:0 0 10px rgba(255,122,42,.8),0 0 2px #000,0 2px 3px #000;white-space:nowrap;padding-left:.32em}
#ashJSB .jfl,#ashJSB .jfr{display:block;width:78px;height:28px;background:url("../assets/ui/cgx/fl_l.webp") center/contain no-repeat;filter:drop-shadow(0 2px 3px #000)}
#ashJSB .jfr{background-image:url("../assets/ui/cgx/fl_r.webp")}
#ashJSB .jbp{box-sizing:border-box;min-width:340px;padding:0 6px;text-align:center;border-style:solid;border-width:18px 70px 21px 70px;border-image:url("../assets/ui/cgx/banner.webp") 60 234 70 234 fill / 18px 70px 21px 70px stretch;filter:drop-shadow(0 8px 16px rgba(0,0,0,.7))}
#ashJSB h2{margin:-4px 0 4px;font:700 23px/1.15 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#fff3e4;text-shadow:0 0 12px rgba(255,140,60,.45),0 2px 3px #000;white-space:nowrap}
#ashJSB p{margin:0 0 -4px;display:flex;align-items:center;justify-content:center;gap:9px;font:600 13.5px/1 var(--f-body);color:#e9dfcf;text-shadow:0 1px 2px #000;white-space:nowrap}
#ashJSB p em{font-style:normal;font-size:8px;color:#ff7a2a;opacity:.85}
#ashJSB p span{display:inline-flex;align-items:center;gap:5px}
#ashJSB p i{display:inline-block;width:16px;height:16px;background-position:center;background-size:contain;background-repeat:no-repeat}
#ashJSB p i svg{width:100%;height:100%;display:block}
#ashJSB .jc i,#ashJS i.cel{background-image:url("../assets/icons/cg2/celestine.webp")}
#ashJSB .jb i,#ashJS i.bag{background-image:url("../assets/icons/cg2/bag.webp")}
#ashJSB .jx{color:#ffcf8f}
body.touch #ashJSB{top:calc(62px + env(safe-area-inset-top,0px));max-width:min(410px,52vw)} /* (between the quest plate and the minimap, above the crosshair) */
body.touch #ashJSB .jbk b{font-size:11px}
body.touch #ashJSB .jfl,body.touch #ashJSB .jfr{width:54px;height:20px}
body.touch #ashJSB .jbp{min-width:0;border-width:13px 40px 15px 40px;border-image-width:13px 40px 15px 40px}
body.touch #ashJSB h2{font-size:16px;margin:-3px 0 3px}
body.touch #ashJSB p{font-size:10.5px;gap:5px}
body.touch #ashJSB p i{width:13px;height:13px}

/* ---------- the plate ---------- */
#ashJS{position:fixed;inset:0;z-index:72;display:none;align-items:center;justify-content:center;pointer-events:none}
#ashJS.on{display:flex}
#ashJS .jsp{position:relative;box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 56px);display:flex;flex-direction:column;padding:12px 46px 50px;isolation:isolate;pointer-events:auto;color:#d9dcdf}
#ashJS .jsp::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}
#ashJS .jsp::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, over the plate's top rim between its flourishes */
#ashJS .jsban{align-self:center;box-sizing:border-box;width:76%;margin:-2px 0 6px;padding:2px 10px 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;position:relative;z-index:1}
#ashJS .jsban small{display:block;margin:-6px 0 3px;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}
#ashJS .jsban h2{margin:0 0 -6px;font:700 17px/1.15 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:#fff1e0;text-shadow:0 1px 2px #000}
#ashJS .jsbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#6a3a1c transparent;padding:2px 4px}
/* three tiles: XP, Celestine, items — equal columns, each socket centred over its number */
#ashJS .jsrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:4px 0 8px}
#ashJS .jst{display:flex;flex-direction:column;align-items:center;text-align:center}
#ashJS .jsk{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat}
#ashJS .jsk>svg,#ashJS .jsk>i,#ashJS .jsk>img{display:block;width:50%;height:50%;object-fit:contain;background-position:center;background-size:contain;background-repeat:no-repeat}
#ashJS .jst b{margin-top:4px;font:700 19px/1 var(--f-display);color:#fff3e4;text-shadow:0 1px 2px #000}
#ashJS .jst.x b{color:#ffcf8f}
#ashJS .jst small{margin-top:3px;font:600 10px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#a99c88}
/* the level's bar */
#ashJS .jslv{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 8px}
#ashJS .jslv span{font:600 12.5px/1 var(--f-display);letter-spacing:.08em;color:#ddd0b6}
#ashJS .jslv span b{color:#fff;font-size:14px}
#ashJS .jslv span em{font-style:normal;margin-left:6px;color:#ffb469;text-shadow:0 0 6px rgba(255,122,42,.6);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
#ashJS .jslv i{display:block;align-self:stretch;height:7px;border-radius:4px;background:linear-gradient(#0b0b0c,#1d1d20);box-shadow:inset 0 1px 2px #000,0 0 0 1px #3a2a1e}
#ashJS .jslv u{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#a3410f,#ff9a3c);box-shadow:0 0 8px rgba(255,122,42,.55)}
/* the dividers and the section heads */
#ashJS i.jsdv{display:block;height:20px;margin:9px 6px 5px;background:url("../assets/ui/cgx/divider.webp") center/contain no-repeat;opacity:.95}
#ashJS h4{margin:0 0 6px;text-align:center;font:700 11px/1.2 var(--f-display);letter-spacing:.24em;padding-left:.24em;text-transform:uppercase;color:#ffb469;text-shadow:0 0 6px rgba(255,122,42,.4),0 1px 2px #000}
#ashJS ul{list-style:none;margin:0;padding:0}
#ashJS .jsd li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 8px;font:400 13px/1.3 var(--f-body);border-bottom:1px solid rgba(255,255,255,.05)}
#ashJS .jsd li:last-child{border-bottom:0}
#ashJS .jsd li span{color:#a99c88;white-space:nowrap}
#ashJS .jsd li b{font-weight:600;color:#f1e8da;text-align:right}
#ashJS .jsd li b small{color:#a99c88;font-weight:400}
#ashJS .jsd i.cel{display:inline-block;width:14px;height:14px;margin:0 3px 0 2px;vertical-align:-2px;background-position:center;background-size:contain;background-repeat:no-repeat}
/* the items: a socket with the icon at half its size and the rarity's glow, the name in the rarity's colour */
#ashJS .jsi li{display:flex;align-items:center;gap:10px;padding:3px 6px}
#ashJS .jsi .jsk{width:42px;height:42px;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,radial-gradient(circle,color-mix(in srgb,var(--rc) 38%,transparent) 0 34%,transparent 60%) center/100% 100% no-repeat}
#ashJS .jsi .jsk img{width:54%;height:54%}
#ashJS .jsn{display:flex;flex-direction:column;min-width:0;gap:2px}
#ashJS .jsn b{font:600 13.5px/1.2 var(--f-body);color:var(--rc,#f1e8da);text-shadow:0 1px 2px #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ashJS .jsn small{font:400 11px/1.2 var(--f-body);color:#8f8578}
#ashJS p.jsnone{margin:2px 0 4px;text-align:center;font:italic 400 12.5px/1.35 var(--f-body);color:#8f8578}
/* the reports */
#ashJS .jsl{list-style:none;margin:2px 0;padding:0}
#ashJS .jsl li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;margin:0 0 5px;cursor:pointer;background:linear-gradient(90deg,rgba(255,122,42,.07),rgba(255,122,42,.02));box-shadow:inset 0 0 0 1px rgba(255,140,60,.16)}
#ashJS .jsl li:hover{box-shadow:inset 0 0 0 1px rgba(255,140,60,.45)}
#ashJS .jsl .jsn b{color:#f1e8da}
#ashJS .jsv{display:flex;align-items:center;gap:10px;flex:none;font:600 12px/1 var(--f-display)}
#ashJS .jsv em{font-style:normal;display:inline-flex;align-items:center;gap:4px;color:#ddd0b6}
#ashJS .jsv em.jx{color:#ffcf8f}
#ashJS .jsv i{display:inline-block;width:14px;height:14px;background-position:center;background-size:contain;background-repeat:no-repeat}
#ashJS .jsv .jc i{background-image:url("../assets/icons/cg2/celestine.webp")}
#ashJS .jsv .jb i{background-image:url("../assets/icons/cg2/bag.webp")}
/* the buttons: the plates' own, equal and centred */
#ashJS .jsft{display:flex;justify-content:center;gap:12px;margin-top:10px;flex:none}
html body #ashJS .jsft button{--plate:dark;box-sizing:border-box;width:150px;height:36px;padding:0 14px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:600 11.5px/1 var(--f-display)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#ddd0b6!important;text-shadow:0 1px 2px #000!important;cursor:pointer}
html body #ashJS .jsft button.pri{--plate:gold;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
/* a phone: the frame at its smaller cut, tighter rows */
body.touch #ashJS .jsp{width:min(430px,calc(100vw - 32px));max-height:calc(100vh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:8px 28px 30px}
body.touch #ashJS .jsp::before{border-width:40px 27px 44px 27px;border-image-width:40px 27px 44px 27px}
body.touch #ashJS .jsp::after{top:-11px;width:22px;height:26px;margin-left:-11px}
body.touch #ashJS .jsban{width:80%;border-width:12px 44px 14px 44px;border-image-width:12px 44px 14px 44px;margin:-2px 0 4px}
body.touch #ashJS .jsban small{font-size:9px;margin:-4px 0 2px}
body.touch #ashJS .jsban h2{font-size:14px;margin-bottom:-4px}
body.touch #ashJS .jsk{width:40px;height:40px}
body.touch #ashJS .jst b{font-size:16px}
body.touch #ashJS .jsi .jsk{width:34px;height:34px}
body.touch #ashJS .jsd li{font-size:12px;padding:3px 6px}
body.touch #ashJS i.jsdv{height:16px;margin:6px 4px 4px}
body.touch #ashJS .jsft{margin-top:6px}
html body.touch #ashJS .jsft button{width:132px;height:32px}