/* =====================================================================
   ASHFALL — the sibling's look over Kharos' stylesheets (css/game.css, css/organic.css kept as they are):
   the logo in type (no image this round), a colder steel and an ember red where Kharos had bronze and gold,
   the shooter's HUD pieces (crosshair, ammo, hit marker) — js/fps/hud.js builds them
   ===================================================================== */
:root{--ember:#ff5a1f;--ember-lo:#7a1e08;--steel:#9aa3ad;--steel-lo:#4a5058;--bronze:#7a5a3a}

/* the logo: two words in the display face, the second spaced wide under a hot rule; embers glow in the first */
.hglogo{display:flex;flex-direction:column;align-items:center;gap:.1em;line-height:1;text-transform:uppercase;user-select:none;pointer-events:none}
.hglogo b{font:700 clamp(36px,6.4vw,96px)/.9 'Cinzel',Georgia,serif;letter-spacing:.08em;color:#f2e6d4;
  background:linear-gradient(180deg,#fff6e6 0%,#f0d2a8 38%,#d0662a 72%,#5a1406 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,90,31,.45)) drop-shadow(0 3px 2px rgba(0,0,0,.9))}
.hglogo i{position:relative;font:600 clamp(16px,2.6vw,34px)/1 'Cinzel',Georgia,serif;font-style:normal;letter-spacing:.62em;margin-right:-.62em;color:#c9ced4;padding-top:.5em;text-shadow:0 2px 3px #000}
.hglogo i::before{content:"";position:absolute;left:8%;right:calc(8% + .62em);top:0;height:2px;background:linear-gradient(90deg,transparent,#ff5a1f 30%,#ffd2a0 50%,#ff5a1f 70%,transparent);box-shadow:0 0 10px rgba(255,90,31,.8)}
#loading #splash{display:flex;justify-content:center;width:min(86%,760px)}
#rotate .logo{display:flex;justify-content:center}

/* ---------------- the shooter's HUD (js/fps/guns.js FPSHud) ---------------- */
#lookZone{position:absolute;right:0;top:0;width:54%;height:100%;pointer-events:auto;touch-action:none}
body:not(.touch) #lookZone{display:none}
#fpsHud{position:fixed;inset:0;pointer-events:none;z-index:19}
#fpsHud .xh{--gap:8px;position:absolute;left:50%;top:50%;width:0;height:0;transition:opacity .15s}
#fpsHud .xh i{position:absolute;background:rgba(255,244,230,.92);box-shadow:0 0 0 1px rgba(0,0,0,.55);transition:transform .06s linear}
#fpsHud .xh .t,#fpsHud .xh .b{width:2px;height:9px;left:-1px}#fpsHud .xh .t{top:calc(-9px - var(--gap))}#fpsHud .xh .b{top:var(--gap)}
#fpsHud .xh .l,#fpsHud .xh .r{height:2px;width:9px;top:-1px}#fpsHud .xh .l{left:calc(-9px - var(--gap))}#fpsHud .xh .r{left:var(--gap)}
#fpsHud .xh b{position:absolute;left:-1.5px;top:-1.5px;width:3px;height:3px;border-radius:50%;background:#ff5a1f;box-shadow:0 0 4px #ff5a1f}
#fpsHud .xh.ads i{opacity:.35}
#fpsHud .hm{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transform:scale(.7) rotate(45deg)}
#fpsHud .hm::before,#fpsHud .hm::after{content:"";position:absolute;background:#fff;box-shadow:0 0 3px rgba(0,0,0,.8)}
#fpsHud .hm::before{left:12px;top:0;width:2px;height:26px;-webkit-mask:linear-gradient(#000 0 35%,transparent 35% 65%,#000 65%);mask:linear-gradient(#000 0 35%,transparent 35% 65%,#000 65%)}
#fpsHud .hm::after{top:12px;left:0;height:2px;width:26px;-webkit-mask:linear-gradient(90deg,#000 0 35%,transparent 35% 65%,#000 65%);mask:linear-gradient(90deg,#000 0 35%,transparent 35% 65%,#000 65%)}
#fpsHud .hm.on{opacity:1;transform:scale(1) rotate(45deg);transition:none}
#fpsHud .hm.crit::before,#fpsHud .hm.crit::after{background:#ffb02e}
#fpsHud .hm.kill::before,#fpsHud .hm.kill::after{background:#ff3a1a}
#fpsHud .hm.kill{transform:scale(1.35) rotate(45deg)}
/* the hit markers (01.11., js/fps/ashimpact.js): pooled .hx, four diagonal ticks round the crosshair's middle, a ring and a skull for a kill; colour --c, width --w, gap --g set per hit, the rest animated (Web Animations) */
#fpsHud .hmx{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
#fpsHud .hx{position:absolute;left:0;top:0;width:0;height:0;opacity:0;--c:#fff;--w:2px;--g:7px;--l:9px;will-change:transform,opacity}
#fpsHud .hx u{position:absolute;transform-origin:50% 0;left:calc(var(--w) / -2);top:0;width:var(--w);height:var(--l);background:var(--c);border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.62),0 0 7px var(--c)}
#fpsHud .hx u:nth-of-type(1){transform:rotate(45deg) translateY(var(--g))}#fpsHud .hx u:nth-of-type(2){transform:rotate(135deg) translateY(var(--g))}#fpsHud .hx u:nth-of-type(3){transform:rotate(225deg) translateY(var(--g))}#fpsHud .hx u:nth-of-type(4){transform:rotate(315deg) translateY(var(--g))}
#fpsHud .hx em{position:absolute;left:-17px;top:-17px;width:30px;height:30px;border:2px solid var(--c);border-radius:50%;opacity:0;box-shadow:0 0 8px var(--c)}
#fpsHud .hx s{display:none!important} /* (no skull on a kill: the user, 01.11. — the big red X and the ring stay) */
#fpsHud .hx s{position:absolute;left:-10px;top:-10px;width:20px;height:20px;opacity:0;text-decoration:none;filter:drop-shadow(0 0 3px rgba(0,0,0,.9))}
#fpsHud .hx s svg{width:100%;height:100%;display:block;fill:#fff;stroke:#2a0500;stroke-width:1.1;paint-order:stroke}
body.touch #fpsHud .hx{--l:12px}body.touch #fpsHud .hx s{left:-13px;top:-13px;width:26px;height:26px}body.touch #fpsHud .hx em{left:-21px;top:-21px;width:38px;height:38px}
#fpsHud .ammo{position:absolute;right:calc(28px + var(--sr));bottom:calc(150px * var(--hs,1));display:flex;align-items:baseline;gap:8px;font:700 34px/1 'Cinzel',Georgia,serif;color:#f2e6d4;text-shadow:0 2px 3px #000,0 0 10px rgba(0,0,0,.8)}
#fpsHud .ammo .n.low{color:#ff5a1f}
#fpsHud .ammo .m{font-size:18px;color:#a8a29a}
#fpsHud .ammo .gname{position:absolute;right:0;top:-22px;white-space:nowrap;font:600 12px/1 'Alegreya SC',Georgia,serif;letter-spacing:.12em;font-style:normal}
#fpsHud .reload{position:absolute;left:50%;top:calc(50% + 34px);transform:translateX(-50%);font:600 12px 'Alegreya SC',Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:#ffd2a0;opacity:0;text-shadow:0 1px 2px #000}
#fpsHud .reload.on{opacity:1;animation:hgblink .5s ease-in-out infinite alternate}
@keyframes hgblink{from{opacity:.45}to{opacity:1}}
body.touch #fpsHud .ammo{bottom:calc(14px + var(--sb,0px));top:auto;right:calc(300px + var(--sr));font-size:24px;pointer-events:none} /* (left of the jump button, under the crosshair's right: it stood behind the skill buttons, the user 20.10.) */
body.touch #fpsHud .ammo .gname{font-size:10px;top:-16px}

/* ---------------- a gun's card (js/fps/gunloot.js) ---------------- */
.ip.gunip .gdps{display:flex;align-items:baseline;justify-content:space-between;margin:.35em 0 .3em;padding:.25em .1em;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);font:600 .8em 'Alegreya SC',Georgia,serif;letter-spacing:.14em;color:#a9b2bc}
.ip.gunip .gdps b{font:700 1.9em/1 'Cinzel',Georgia,serif;letter-spacing:0;color:#f2e6d4}
.ip.gunip .ln.gs{display:flex;justify-content:space-between;gap:1em;color:#b8bec6}
.ip.gunip .ln.gs b{color:#ece6da;font-weight:600}
.ip.gunip .ln em.up{color:#7ddc6a;font-style:normal;margin-left:.3em}.ip.gunip .ln em.dn{color:#ff6a4a;font-style:normal;margin-left:.3em}
.ip.gunip .ln.gel{font-weight:600}

/* the loading screen without a painting (js/fps/ashstart.js): a burning dusk over a dark street line */
#zload.ash .zl-img{background-color:#0b0706!important;background-size:cover!important;background-position:center!important}
#zload.ash .zl-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.85));-webkit-mask:linear-gradient(#000,#000);opacity:.9}

/* ---------------- the two orbs round the bar (js/fps/ashhud.js) ---------------- */
body.hudbar #skillsT .pworb{position:absolute;left:672px;top:-14px;width:112px;height:126px;pointer-events:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75))}
body.hudbar #skillsT .pworb canvas{position:absolute;inset:0;width:100%;height:100%}
body.hudbar #skillsT .pworb img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}
body.hudbar #skillsT .pworb .pwv{position:absolute;left:54.5%;top:52%;transform:translate(-50%,-50%);white-space:nowrap;font:600 11px/1 'Alegreya SC',Georgia,serif;letter-spacing:.06em;color:#fff1dc;text-shadow:0 1px 2px #000;opacity:.0;transition:opacity .15s}
body.hudbar #skillsT .pworb:hover .pwv,body.hudbar #skillsT .pworb.full .pwv{opacity:1}
body.hudbar #skillsT .pworb.full{filter:drop-shadow(0 0 10px rgba(255,120,30,.7)) drop-shadow(0 2px 5px rgba(0,0,0,.75))}
body.hudbar:not(.touch) #fpsHud .ammo{right:auto;left:calc(50% + 330px * var(--hs,1));bottom:calc(132px * var(--hs,1))}

/* the splash: Ashfall's title scene drawn in code (js/ui/ashtitle.js) in place of Kharos' key art */
#loading::before{background:none!important;animation:none!important}
#loading #ashTitle{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#loading .warm-art{display:none!important}
#help .hpage{background:var(--o-c-br) right 6px bottom 6px/40px 40px no-repeat,var(--o-c-bl) left 22px bottom 6px/40px 40px no-repeat,var(--o-c-tl) left 22px top 6px/40px 40px no-repeat,linear-gradient(90deg,rgba(22,23,26,.99) 35%,rgba(22,23,26,.9)),var(--an-2)!important}

/* ---------------- machined dark steel instead of Kharos' gold (19.10., the Hellgate feeling) ---------------- */
#banner .bn-plate,#banner .bn-rod,.mm-frame,#questT,#tracker{filter:saturate(.18) brightness(.92) contrast(1.05)} /* (the bar keeps Kharos' painted colours: the user, 20.10.) (the minimap's canvas greys its land and ring itself, js/ui/ui.js mmSteel: under this filter its quest pin and every marker had gone grey, 23.10.) */

/* ---------------- the Hellgate HUD pieces (js/fps/ashhud.js; docs/HG-GAPS.md #1) ---------------- */
#ashTarget{position:fixed;left:50%;top:calc(14px + var(--st,0px));transform:translateX(-50%);min-width:260px;padding:6px 14px 9px;display:none;grid-template-columns:1fr auto;gap:1px 14px;align-items:baseline;pointer-events:none;z-index:20;
  background:linear-gradient(180deg,rgba(40,8,6,.92),rgba(16,4,4,.92));border:1.5px solid #8a1a12;box-shadow:inset 0 0 0 1px rgba(255,90,60,.18),0 3px 10px rgba(0,0,0,.6);border-radius:3px}
#ashTarget.on{display:grid}
#ashTarget .tn{font:700 15px/1.1 'Cinzel',Georgia,serif;letter-spacing:.06em;color:#f6e4d2;text-shadow:0 1px 2px #000}
#ashTarget .tl{font:700 12px/1 'Arial Narrow','Roboto Condensed',sans-serif;letter-spacing:.06em;color:#ffcc66;text-transform:uppercase}
#ashTarget .tk{grid-column:1 / -1;font:600 11px/1.2 'Arial Narrow','Roboto Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d08a7a}
#ashTarget .tb{grid-column:1 / -1;position:relative;height:6px;margin-top:4px;background:#1a0606;border:1px solid #5a1410;border-radius:2px;overflow:hidden}
#ashTarget .tb>i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(180deg,#ff5a3a,#a0180e);transition:width .12s linear}
#ashTarget.elite{border-color:#d0a030}#ashTarget.boss{border-color:#ff7a2a;box-shadow:inset 0 0 0 1px rgba(255,160,60,.3),0 0 18px rgba(255,90,30,.35)}
body.touch #ashTarget{top:calc(8px + var(--st,0px));min-width:200px;padding:4px 10px 7px}
/* the numbers in the orbs, always; the power orb's label */
body.hudbar #skillsT .hporb .hpv{opacity:1!important;font:700 15px/1 'Arial Narrow','Roboto Condensed',sans-serif;letter-spacing:.02em}
body.hudbar #skillsT .pworb .pwv{opacity:1!important;font:700 13px/1 'Arial Narrow','Roboto Condensed',sans-serif}
/* square steel slots, numbered, as in the reference's hotbar */
/* (Kharos' round slots kept) */
/* the gun's badge by the health orb */
body.hudbar #skillsT .ashwpn{position:absolute;left:96px;top:58px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#1a2a3a,#06090e 72%);box-shadow:0 0 0 2px #3a4048,0 0 0 3.5px var(--rc,#888),0 2px 6px rgba(0,0,0,.8);overflow:hidden;pointer-events:none;z-index:2}
body.hudbar #skillsT .ashwpn img{position:absolute;left:-6px;top:4px;width:58px;height:38px;object-fit:contain}
/* quest titles in the faction's red */
#quest .qt{color:#e0443a!important}
body.ashzone #target{display:none!important}

/* the scope (js/fps/gunmore.js): a black ring round a clear circle, a fine reticle */
body.ashscope #fpsHud::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 min(34vh,34vw),rgba(0,0,0,.92) calc(min(34vh,34vw) + 2px));pointer-events:none}
body.ashscope #fpsHud .xh{--gap:0px}body.ashscope #fpsHud .xh i{background:rgba(10,10,10,.9);box-shadow:none}body.ashscope #fpsHud .xh .t,body.ashscope #fpsHud .xh .b{height:32vh}body.ashscope #fpsHud .xh .t{top:-32vh}body.ashscope #fpsHud .xh .l,body.ashscope #fpsHud .xh .r{width:32vh}body.ashscope #fpsHud .xh .l{left:-32vh}

/* (the panels in Kharos' own painted look: the user, 20.10.: 'Inventar von Kharos kopieren' — the steel-blue cast off) */
#zload canvas.ashsig{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.8}

/* the prologue (js/fps/ashstart.js) */
#ashIntro{position:fixed;inset:0;z-index:90;background:#060506;transition:opacity .9s}#ashIntro.out{opacity:0}
#ashIntro canvas{position:absolute;inset:0;width:100%;height:100%}
#ashIntro p{position:absolute;left:8%;right:8%;bottom:16%;margin:0;text-align:center;font:400 clamp(18px,2.6vw,32px)/1.4 'Cinzel',Georgia,serif;letter-spacing:.06em;color:#e8dcc8;text-shadow:0 2px 8px #000;opacity:0;transition:opacity .8s}
#ashIntro p.on{opacity:1}
#ashIntro .skip{position:absolute;right:calc(18px + var(--sr,0px));bottom:calc(14px + var(--sb,0px));font:600 12px 'Alegreya SC',Georgia,serif;letter-spacing:.14em;color:rgba(232,220,200,.5);text-transform:uppercase}

/* ---------------- the HUD after the references (js/fps/ashhud2.js): the steel console, the orbs in steel rings, the numbered slots ---------------- */
:root{--hg-steel:linear-gradient(180deg,#6c7178 0%,#3c4046 18%,#24272b 55%,#17191c 100%);--hg-edge:#8a9098}
body.hudbar:not(.touch) #skillsT.hgbar{width:1080px!important;height:124px}
body.hudbar:not(.touch) #skillsT.hgbar .barplate{position:absolute;background:var(--hg-steel)!important;border:0!important;border-radius:6px 6px 2px 2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.6),inset 0 0 0 1px #0a0b0c,0 3px 10px rgba(0,0,0,.7)!important;filter:none!important;background-image:radial-gradient(circle at 10px 10px,#9aa0a8 0 2px,#2a2d31 2.5px,transparent 3.5px),radial-gradient(circle at calc(100% - 10px) 10px,#9aa0a8 0 2px,#2a2d31 2.5px,transparent 3.5px),var(--hg-steel)!important}
body.hudbar:not(.touch) #skillsT.hgbar .barplate::before,body.hudbar:not(.touch) #skillsT.hgbar .barplate::after,body.hudbar:not(.touch) #skillsT.hgbar .barrod{display:none!important}
body.hudbar:not(.touch) #skillsT.hgbar .barxp{position:absolute!important;left:62px!important;right:62px!important;bottom:5px!important;top:auto!important;height:4px!important;background:#0a0c0e!important;border:1px solid #000!important;border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.12)!important}
body.hudbar:not(.touch) #skillsT.hgbar .barxp>i{background:linear-gradient(90deg,#3a8a2a,#8adf4a)!important;box-shadow:0 0 6px rgba(140,230,80,.5)!important}
body.hudbar:not(.touch) #skillsT.hgbar .tbtn,body.hudbar:not(.touch) #skillsT.hgbar .hgslot,body.hudbar:not(.touch) #skillsT.hgbar .ultsock{position:absolute;border-radius:3px!important;background:linear-gradient(180deg,#0e1113,#1c2024)!important;box-shadow:inset 0 0 0 1px #000,inset 0 2px 6px rgba(0,0,0,.9),0 0 0 2px #4a4f56,0 0 0 3px #15171a,0 1px 0 3px rgba(255,255,255,.08)!important;border:0!important;outline:0!important}
body.hudbar:not(.touch) #skillsT.hgbar .tbtn canvas,body.hudbar:not(.touch) #skillsT.hgbar .tbtn img.hgun{position:absolute;inset:2px;width:calc(100% - 4px)!important;height:calc(100% - 4px)!important;border-radius:2px!important;object-fit:contain}
body.hudbar:not(.touch) #skillsT.hgbar .tbtn img.hgun{background:radial-gradient(circle at 50% 45%,#1e2a36,#080b10 75%);transform:none}
body.hudbar:not(.touch) #skillsT.hgbar kbd{position:absolute;left:3px;top:2px;right:auto;bottom:auto;font:700 11px/1 'Arial Narrow','Roboto Condensed',sans-serif;color:#d8dde2;text-shadow:0 1px 1px #000,0 0 3px #000;background:none!important;border:0!important;padding:0!important;min-width:0;z-index:3}
body.hudbar:not(.touch) #skillsT.hgbar .hgslot{pointer-events:none}
body.hudbar:not(.touch) #skillsT.hgbar .tbtn.main kbd{font-size:9px}
body.hudbar:not(.touch) #skillsT.hgbar .ultsock::after{content:"F";position:absolute;left:3px;top:2px;font:700 11px/1 'Arial Narrow',sans-serif;color:#d8dde2;text-shadow:0 1px 1px #000}
/* the orbs: Kharos' painted frames off, a thick ring of turned steel round each, the orbs grown */
body.hudbar:not(.touch) #skillsT.hgbar .hporb,body.hudbar:not(.touch) #skillsT.hgbar .pworb{transform:scale(1.42);transform-origin:50% 60%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.8))!important}
body.hudbar:not(.touch) #skillsT.hgbar .hporb img,body.hudbar:not(.touch) #skillsT.hgbar .pworb img{display:none!important}
body.hudbar:not(.touch) #skillsT.hgbar .hporb::after,body.hudbar:not(.touch) #skillsT.hgbar .pworb::after{content:"";position:absolute;width:92px;height:92px;top:calc(52.4% - 46px);border-radius:50%;pointer-events:none;background:conic-gradient(from 210deg,#b8bec6,#4a4e54 12%,#d6dadf 24%,#3a3d42 38%,#9aa0a8 52%,#2a2c30 66%,#c4c8ce 80%,#4a4e54 90%,#b8bec6);-webkit-mask:radial-gradient(circle,transparent 0 34.5px,#000 35.5px 45px,transparent 46px);mask:radial-gradient(circle,transparent 0 34.5px,#000 35.5px 45px,transparent 46px)}
body.hudbar:not(.touch) #skillsT.hgbar .hporb::after{left:calc(45.5% - 46px)}
body.hudbar:not(.touch) #skillsT.hgbar .pworb::after{left:calc(54.5% - 46px)}
body.hudbar:not(.touch) #skillsT.hgbar .hporb::before,body.hudbar:not(.touch) #skillsT.hgbar .pworb::before{content:"";position:absolute;width:76px;height:76px;top:calc(52.4% - 38px);border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(0,0,0,.85),inset 0 3px 8px rgba(0,0,0,.7);z-index:1}
body.hudbar:not(.touch) #skillsT.hgbar .hporb::before{left:calc(45.5% - 38px)}body.hudbar:not(.touch) #skillsT.hgbar .pworb::before{left:calc(54.5% - 38px)}
body.hudbar:not(.touch) #skillsT.hgbar .hporb .hpv,body.hudbar:not(.touch) #skillsT.hgbar .pworb .pwv{z-index:2;font:400 19px/1 'Cinzel',Georgia,serif!important;letter-spacing:.02em;color:#fff6ec!important;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9)!important;opacity:1!important}
body.hudbar:not(.touch) #skillsT.hgbar .pworb.rel .pwv{font-size:10px!important;letter-spacing:.12em;text-transform:uppercase}
body.hudbar:not(.touch) #skillsT.hgbar .pworb .pwu{position:absolute;right:-4px;top:2px;transform:scale(.72);transform-origin:right top;font:700 12px/1 'Arial Narrow','Roboto Condensed',sans-serif;color:#9af07a;text-shadow:0 1px 2px #000;white-space:nowrap;z-index:2}
body.hudbar:not(.touch) #skillsT.hgbar .hporb .hplv{z-index:2}
body.hudbar:not(.touch) #skillsT.hgbar .ashwpn{left:104px!important;top:68px!important;width:50px!important;height:50px!important;background:radial-gradient(circle at 50% 42%,#2a3e52,#070a10 70%)!important;box-shadow:0 0 0 3px #50555c,0 0 0 4px #121416,inset 0 2px 6px rgba(0,0,0,.9),0 3px 6px rgba(0,0,0,.7)!important;z-index:2}
body.hudbar:not(.touch) #skillsT.hgbar .tpot{border-radius:50%!important;background:radial-gradient(circle at 50% 42%,#3a1010,#0a0405 70%)!important;box-shadow:0 0 0 3px #50555c,0 0 0 4px #121416,inset 0 2px 6px rgba(0,0,0,.9)!important;z-index:2}
body.hudbar:not(.touch) #fpsHud .ammo{display:none}
/* the log: bottom left, yellow type */
body.ashzone:not(.touch) #feed{top:auto!important;bottom:calc(178px * var(--hs,1))!important;left:calc(20px + var(--sl,0px))!important;max-width:calc(460px * var(--hs,1))!important;opacity:1!important}
body.ashzone.touch #feed{top:auto!important;bottom:calc(182px + var(--sb,0px))!important;left:calc(14px + var(--sl,0px))!important;max-width:38vw!important;opacity:1!important}
body.ashzone.touch #feed .feedline{font-size:10.5px!important}
body.ashzone #feed .feedline{font:600 calc(14px * var(--hs,1))/1.3 'Courier New',Courier,ui-monospace,monospace!important;font-style:normal!important;color:#f0d050!important;text-shadow:0 1px 1px #000,0 0 3px #000!important;background:none!important;border:0!important;padding:0!important;letter-spacing:0!important;transition:opacity .8s}
/* the buffs on the right */
#hgBuffs{position:fixed;right:calc(18px + var(--sr,0px));top:calc(292px * var(--hs,1));display:flex;gap:6px;flex-direction:row-reverse;pointer-events:none;z-index:21}
body.touch #hgBuffs .hgb{width:40px;height:40px}
body.touch #hgBuffs{top:calc(82px + var(--st,0px));left:calc(40px + var(--sl,0px));right:auto;flex-direction:row} /* (under the hero's plate, top left: at the right it had lain over the third skill button — the user, 22.10.: 'die zusätzliche Kachel, wo 4s steht') */
#hgBuffs .hgb{position:relative;width:calc(40px * var(--hs,1));height:calc(40px * var(--hs,1));border-radius:3px;overflow:hidden;box-shadow:0 0 0 2px #4a4f56,0 0 0 3px #111,0 2px 6px rgba(0,0,0,.7)}
#hgBuffs .hgb canvas{width:100%;height:100%;display:block}
#hgBuffs .hgb i{position:absolute;left:0;right:0;top:0;background:rgba(0,0,0,.55)}
#hgBuffs .hgb b{position:absolute;left:0;right:0;bottom:1px;text-align:center;font:700 calc(11px * var(--hs,1))/1 'Arial Narrow',sans-serif;color:#fff;text-shadow:0 1px 2px #000}
/* the target: a steel-framed banner, its bar green */
body.ashzone #ashTarget{background:linear-gradient(180deg,rgba(70,16,40,.92),rgba(36,8,24,.94))!important;border:0!important;border-radius:2px!important;box-shadow:0 0 0 2px #7a8088,0 0 0 4px #1a1c1f,0 0 0 5px #5a6068,inset 0 0 18px rgba(120,30,90,.45),0 4px 14px rgba(0,0,0,.7)!important;min-width:320px!important;padding:8px 18px 10px!important}
body.ashzone #ashTarget .tn{font:600 17px/1.1 'Cinzel',Georgia,serif!important;letter-spacing:.08em;color:#d8b8f0!important;text-transform:uppercase}
body.ashzone #ashTarget .tk{color:#e0a0c8!important;font-family:'Cinzel',Georgia,serif!important;letter-spacing:.12em!important}
body.ashzone #ashTarget .tb{height:8px!important;background:#061006!important;border:1px solid #0a0a0a!important;box-shadow:0 0 0 1px #4a4f56}
body.ashzone #ashTarget .tb>i{background:linear-gradient(180deg,#8af06a,#2a9a1a 60%,#1a6a10)!important}
/* the map: the area's name under it on a desktop too, as on the phone (the user, 27.10.: 'der Text oben an der Minimap macht keinen Sinn'); the map and its buttons at the top again */
body.ashzone #zone .z{color:#e8e2d8!important;letter-spacing:.24em!important}
#skillsT .tbtn.main:has(img.hgun) canvas{display:none!important}
#skillsT .tbtn.main img.hgun{position:absolute;left:12%;top:12%;width:76%;height:76%;object-fit:contain;border-radius:50%;background:radial-gradient(circle at 50% 45%,#1e2a36,#06090e 72%);z-index:1;pointer-events:none}
body.hudbar:not(.touch) #skillsT.hgbar .tbtn.main img.hgun{left:2px;top:2px;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:2px}
/* the quest list: on the right under the buffs (a desktop), titles in pink-violet serif caps, the details white */
body.ashzone:not(.touch) #quest{left:auto!important;right:calc(18px + var(--sr,0px))!important;top:calc(344px * var(--hs,1))!important;max-width:calc(270px * var(--hs,1))!important}
body.ashzone #quest .qt{font:600 calc(13px * var(--hs,1))/1.2 'Cinzel',Georgia,serif!important;letter-spacing:.1em!important;color:#d88ae6!important;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9)}
body.ashzone #quest .qt::before{background:#d88ae6!important}
body.ashzone #quest .qo{color:#f2f0ec!important;font-family:Georgia,'Times New Roman',serif!important}

/* the view's switch under the map's menu button (js/fps/fps.js fpsCamSync), mirrored from the town portal's place on the right */
#camTog{left:-6px;top:calc(-4px + 32px * var(--k) + 12px);display:flex;align-items:center;justify-content:center;color:var(--bone,#e8dcc4)}
#camTog[hidden]{display:none}
#camTog svg{width:calc(19px * var(--k));height:calc(19px * var(--k))}
/* the phone's jump (js/fps/fps.js): one of the touch ring's own buttons (.tbtn: the bronze ring round the dark face), the small skills' size, left of the ring at the bottom */
#jumpT{right:calc(var(--sr,0px) + 260px);bottom:67px; /* (free of Kharos fixed places: left of the talk and use buttons — the user, 20.10.) */width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#e8b46a;z-index:6}
#jumpT[hidden]{display:none}
#jumpT svg{width:56%;height:56%}
body:not(.touch) #jumpT{display:none}
/* multiplayer (js/net/ashnet.js): the others' names, the party's frame top left, the trade's table, the dialogs in the install dialog's frame */
.npc-label.ashpeer span{color:#bfe4ff}
.npc-label.ashpeer i{display:block;font:italic 600 calc(10px * var(--k,1))/1.2 var(--f-body,serif);color:#9fb6c8;font-style:normal;letter-spacing:.04em}
#ashParty{position:fixed;left:calc(14px + var(--sl,0px));top:calc(96px * var(--k,1));z-index:21;display:flex;flex-direction:column;gap:6px;pointer-events:auto;cursor:pointer}
#ashParty .apm{min-width:150px;padding:6px 10px 7px;background:linear-gradient(180deg,#14171a,#0b0d0f);border:1px solid #6b5530;box-shadow:0 0 0 1px #000,0 2px 6px rgba(0,0,0,.6);border-radius:4px}
#ashParty .apm b{display:block;font:600 12px/1.2 Cinzel,serif;color:#e8dcc4;letter-spacing:.06em}
#ashParty .apm span{display:block;font:500 10px/1.3 var(--f-body,serif);color:#9fb6c8}
#ashParty .apm i{display:block;height:5px;margin-top:4px;background:#2a0c0c;border:1px solid #000}
#ashParty .apm u{display:block;height:100%;background:linear-gradient(90deg,#8a1a14,#d0392a);text-decoration:none}
#ashAsk.mm-confirm,#ashTrade.mm-confirm{position:fixed;z-index:86}
#ashAsk.mm-confirm.on,#ashTrade.mm-confirm.on{display:flex}
#ashAsk .mm-cbtns,#ashTrade .mm-cbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#ashTrade .atr{display:flex;gap:14px;max-height:50vh;overflow:auto}
#ashTrade .atr>div{flex:1;min-width:140px}
#ashTrade h4{font:600 11px/1.4 Cinzel,serif;color:#c9a266;letter-spacing:.08em;margin:6px 0}
#ashTrade ul{list-style:none;margin:0;padding:0}
#ashTrade li{font:500 12px/1.6 var(--f-body,serif);color:#d8ccb4;padding:2px 6px;border-radius:3px;cursor:pointer}
#ashTrade li.on{background:rgba(201,162,102,.22);color:#fff}
#ashToast{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:87;padding:7px 14px;background:rgba(10,11,12,.85);border:1px solid #6b5530;color:#e8dcc4;font:500 13px/1.3 var(--f-body,serif);opacity:0;transition:opacity .3s;pointer-events:none}
#ashToast.on{opacity:1}
/* the foe's plate under the area's banner, not over it (the user's shot, 20.10.: the two overlapped at the top) */
body.touch #ashTarget{top:calc(78px + var(--st,0px))!important}
body:not(.touch) #ashTarget{top:calc(190px * var(--hs,1))!important}

/* the party frame and the quick messages in Cindergate's anthracite (js/net/ashnet.js AshQuickChat) */
#ashParty .apm{background:linear-gradient(180deg,#2b2e33,#1c1e22)!important;border:1px solid #4a5058!important;border-left:2px solid #ff7a2a!important;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
#ashParty .apm b{font-family:var(--f-display)!important;color:#e8eaec!important}#ashParty .apm span{color:#9aa0a8!important}
#ashParty .apm u{background:linear-gradient(90deg,#c8301a,#ff7a2a)!important}
/* the party's quick messages (js/net/ashnet.js AshQuickChat; the user, 01.11.: 'Das Gruppenpanel bitte schnörkeliger raufhübschen'): the ornate frame (panel_orn, a 9-slice that
   grows with the lines) with its crest; the tabs and the lines on the buttons' plates (--plate, js/ui/plates.js: dark, the active tab gold and lit), a small sign in an eq_slot socket
   before each line (the stroke at 70 % of the socket, centred), 'Leave party' on the red plate, the close and delete buttons round (btn_round, their cross at about half) */
#ashQC{position:fixed;left:calc(14px + var(--sl,0px));top:calc(160px * var(--k,1));z-index:60;display:none;flex-direction:column;box-sizing:border-box;width:min(326px,calc(100vw - 24px));max-height:calc(100vh - 12px);padding:32px 30px 36px;isolation:isolate;pointer-events:auto}
#ashQC.on{display:flex;animation:qcIn .2s cubic-bezier(.2,.8,.3,1) both}
@keyframes qcIn{from{opacity:0;margin-top:-8px}to{opacity:1;margin-top:0}}
#ashQC::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-width:40px 27px 44px 27px;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 40px 27px 44px 27px stretch;filter:drop-shadow(0 8px 18px rgba(0,0,0,.75));pointer-events:none}
#ashQC::after{content:"";position:absolute;left:50%;top:-5px;width:22px;height:26px;margin-left:-11px;background:url("../assets/ui/cgx/panel_crest.webp") center/contain no-repeat;pointer-events:none}
#ashQC svg{display:block;width:70%;height:70%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#ashQC .qct{display:flex;align-items:center;gap:6px;flex:none}
html body #ashQC .qct button{--plate:dark;box-sizing:border-box;flex:1 1 0;min-width:0;height:34px;padding:0 8px;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:#858c94!important;text-shadow:0 1px 2px #000!important;cursor:pointer;filter:brightness(.7);transition:filter .15s,color .15s}
html body #ashQC .qct button.on{--plate:gold;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.6),0 1px 2px #000!important;filter:brightness(1.12) drop-shadow(0 0 7px rgba(255,122,42,.65))}
html body #ashQC .qct button:not(.on):not(.x):hover{filter:brightness(1);color:#e8dcc4!important}
html body #ashQC .qct button.x,html body #ashQC .qcd{--plate:none;flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;color:#e6e8ea!important;background:url("../assets/ui/cgx/btn_round.webp") center/100% 100% no-repeat!important;filter:none}
html body #ashQC .qct button.x svg,#ashQC .qcd svg{width:80%;height:80%}
html body #ashQC .qct button.x:hover,html body #ashQC .qcd:hover{filter:drop-shadow(0 0 6px rgba(255,122,42,.85)) brightness(1.25);color:#fff!important}
html body #ashQC .qct button.x:active,html body #ashQC .qcd:active{filter:drop-shadow(0 0 4px rgba(255,122,42,.9)) brightness(1.45);transform:translateY(1px)}
#ashQC .qcdv{display:block;flex:none;height:14px;margin:8px 0 7px;background:url("../assets/ui/cgx/divider.webp") center/contain no-repeat;opacity:.9}
#ashQC .qcb{display:flex;flex-direction:column;gap:5px;min-height:0;margin:-4px -6px;padding:4px 6px;overflow-y:auto;overscroll-behavior:contain}
#ashQC .qcrow{display:flex;align-items:center;gap:6px}
html body #ashQC .qcl{--plate:dark;display:flex;align-items:center;gap:9px;box-sizing:border-box;flex:1 1 auto;min-width:0;width:100%;height:38px;padding:0 16px 0 12px;text-align:left;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:500 13.5px/1.15 var(--f-body)!important;color:#e8eaec!important;text-shadow:0 1px 2px #000!important;cursor:pointer;transition:filter .12s}
#ashQC .qcl span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ashQC .qci{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat;color:#ff9a5a;transition:color .12s,filter .12s}
html body #ashQC .qcl:hover,html body #ashQC .qcl:focus-visible{filter:drop-shadow(0 0 7px rgba(255,122,42,.8)) brightness(1.3);color:#fff!important;outline:0}
html body #ashQC .qcl:hover .qci{color:#ffd9bf;filter:drop-shadow(0 0 4px rgba(255,138,58,.9))}
html body #ashQC .qcl:active{filter:drop-shadow(0 0 5px rgba(255,122,42,.95)) brightness(1.5);transform:translateY(1px)}
#ashQC .qcin{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
html body #ashQC .qcin input{--plate:dark;box-sizing:border-box;flex:1 1 100%;min-width:0;height:38px;padding:0 16px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0;font:500 13.5px/1 var(--f-body)!important;color:#fff!important;user-select:text;-webkit-user-select:text}
#ashQC .qcin input::placeholder{color:#7d848c;font-style:italic}
html body #ashQC .qcin input:focus{filter:drop-shadow(0 0 7px rgba(255,122,42,.7)) brightness(1.15)}
html body #ashQC .qcin button{--plate:dark;box-sizing:border-box;flex:1 1 0;height:34px;padding:0 10px;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;transition:filter .12s}
html body #ashQC .qcin button.pri{--plate:gold;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
html body #ashQC .qcin button:hover{filter:drop-shadow(0 0 7px rgba(255,122,42,.8)) brightness(1.25)}
html body #ashQC .qcin button:active{filter:brightness(1.5);transform:translateY(1px)}
#ashQC .qce{margin:8px 4px 4px;text-align:center;color:#9aa0a8;font:italic 12.5px/1.4 var(--f-body)}
#ashQC .qcft{flex:none;margin-top:9px;padding-top:9px;background:linear-gradient(90deg,transparent,rgba(255,138,58,.6),transparent) top/100% 1px no-repeat}
html body #ashQC .qcft .lv{--plate:red;display:block;box-sizing:border-box;width:100%;height:34px;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:#ffb4a0!important;text-shadow:0 0 6px rgba(255,60,30,.5),0 1px 2px #000!important;cursor:pointer;transition:filter .12s}
html body #ashQC .qcft .lv:hover{filter:drop-shadow(0 0 7px rgba(255,70,40,.85)) brightness(1.25);color:#ffd6cb!important}
html body #ashQC .qcft .lv:active{filter:brightness(1.5);transform:translateY(1px)}
/* the phone: smaller frame and plates, in the middle of the screen (it is only 375 high) */
body.touch #ashQC{left:50%;top:50%;translate:-50% -50%;width:min(296px,calc(100vw - 24px));padding:26px 24px 29px}
body.touch #ashQC::before{border-width:30px 21px 33px 21px;border-image-width:30px 21px 33px 21px}
body.touch #ashQC .qcdv{height:11px;margin:6px 0 5px}
body.touch #ashQC .qcb{gap:4px}
html body.touch #ashQC .qct button{height:30px;font-size:10.5px!important}
html body.touch #ashQC .qct button.x,html body.touch #ashQC .qcd{width:30px;height:30px}
html body.touch #ashQC .qcl{height:32px;font-size:12.5px!important;padding:0 12px 0 9px;gap:8px}
body.touch #ashQC .qci{width:23px;height:23px}
html body.touch #ashQC .qcin input{height:32px;font-size:12.5px!important}
html body.touch #ashQC .qcin button{height:30px}
html body.touch #ashQC .qcft{margin-top:6px;padding-top:7px}
html body.touch #ashQC .qcft .lv{height:30px}
/* ---- the Order's terminal (js/fps/ashterm.js): the class panel's plate round a phosphor screen; full screen on a phone, the same flourishes ---- */
#ashTerm{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(14,8,3,.55),rgba(0,0,0,.82));pointer-events:auto}
#ashTerm.on{display:flex}
#ashTerm .atp{position:relative;width:min(1100px,94vw);height:min(740px,90vh);isolation:isolate;--k:1}
/* the frame over the screen: panel_orn_open is the plate with its face cut out (from panel_orn_t's own mask), the flourishes solid, so the glass runs right to the frame's inner edge and under the flourishes */
#ashTerm .atp::before{content:"";position:absolute;inset:-18px -12px;z-index:-1;border-style:solid;border-width:71px 48px 78px 48px;border-image:url("../assets/ui/cgx/panel_orn_open.webp") 222.5 150 245 150 fill / 71px 48px 78px 48px stretch;pointer-events:none}
#ashTerm .atp::after{content:"";position:absolute;left:50%;top:-18px;width:31px;height:37px;margin-left:-15.5px;background:url("../assets/ui/cgx/panel_crest.webp") center/contain no-repeat;pointer-events:none}
#ashTerm .ats{position:absolute;inset:-2px 5px 1px;z-index:-2;display:flex;flex-direction:column;padding:54px 41px 53px;overflow:hidden;color:#f6cf9e;font-family:var(--f-body);text-shadow:0 0 6px rgba(255,138,58,.42);
  background:radial-gradient(ellipse at 50% 42%,#2a1707 0%,#170c04 58%,#080401 100%);box-shadow:inset 0 0 70px rgba(0,0,0,.8),inset 0 0 16px rgba(0,0,0,.65);animation:atFlick 5s infinite steps(1)}
@keyframes atFlick{0%,100%{opacity:1}31%{opacity:.965}32%{opacity:1}67%{opacity:.98}68%{opacity:1}84%{opacity:.955}85%{opacity:1}}
#ashTerm .atcrt{position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 56%,rgba(0,0,0,.62) 100%)}
#ashTerm .atcrt::after{content:"";position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(180deg,transparent,rgba(255,170,90,.05),transparent);animation:atRoll 7s linear infinite}
@keyframes atRoll{from{transform:translateY(-110%)}to{transform:translateY(470%)}}
#ashTerm header{text-align:center;flex:none;padding-bottom:16px;background:url("../assets/ui/cgx/divider.webp") center bottom/auto 12px no-repeat;margin-bottom:12px}
#ashTerm h2{margin:0;font:600 19px/1.2 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:#ffdcb4}
#ashTerm .atsub{margin:4px 0 0;font:500 12px/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#c98a52}
/* the carousel (the user, 29.10.: 'wie ein Karussell … damit man die Bilder auch mal groß sieht'): the stage, the briefing under it */
#ashTerm .atb{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,31%);grid-template-areas:"st" "pp" "dt";gap:6px}
#ashTerm .atstage{grid-area:st;position:relative;min-height:0;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;z-index:1}
#ashTerm .atstage.drag{cursor:grabbing}
#ashTerm .atrail{position:absolute;inset:0;perspective:1150px;perspective-origin:50% 46%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} /* (the perspective on the cards' own parent; the stage's ends fade) */
#ashTerm .atcard{position:absolute;left:50%;top:50%;width:var(--cw,480px);height:var(--ch,270px);transition:transform .62s cubic-bezier(.2,.85,.25,1),opacity .45s ease;will-change:transform;background:#0c0702;box-shadow:0 18px 40px rgba(0,0,0,.75),0 0 0 1px rgba(255,138,58,.22)}
#ashTerm .atcard.on{box-shadow:0 22px 52px rgba(0,0,0,.82),0 0 0 1px rgba(255,170,100,.6),0 0 36px rgba(255,120,40,.3)}
#ashTerm .atstage.drag .atcard,#ashTerm .atstage.drag .atshade{transition:none}
#ashTerm .atpw{position:absolute;inset:0;overflow:hidden}
#ashTerm .atimg{position:absolute;inset:-1%;background-size:cover;background-position:center 42%;background-repeat:no-repeat;filter:sepia(.45) saturate(1.2) hue-rotate(-8deg) contrast(1.1) brightness(.95);transform-origin:50% 45%}
#ashTerm .atcard.on .atimg{animation:atKB 22s ease-in-out infinite alternate}
@keyframes atKB{from{transform:scale(1.02)}to{transform:scale(1.13) translate(-2%,-1.4%)}}
#ashTerm .atcard.done .atimg,#ashTerm .atcard.low .atimg{filter:sepia(.85) saturate(.7) contrast(1.05) brightness(.62)}
#ashTerm .atshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,5,1,.5),rgba(6,3,0,.82));pointer-events:none;transition:opacity .45s}
/* the glass's sheen running over the chosen one now and then; the feed tuning in when it comes to the middle */
#ashTerm .atglare{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#ashTerm .atglare::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,214,160,.1) 42%,rgba(255,232,196,.2) 50%,transparent 62%);transform:skewX(-14deg);opacity:0}
#ashTerm .atcard.on .atglare::before{animation:atSheen 8s ease-in-out 1.4s infinite}
@keyframes atSheen{0%{left:-60%;opacity:0}5%{opacity:1}24%{left:125%;opacity:1}25%,100%{left:125%;opacity:0}}
#ashTerm .atcard.tune .atpw{animation:atTune .6s linear 1}
@keyframes atTune{0%{transform:translateX(-8px) skewX(5deg);filter:brightness(2.3) contrast(1.5)}9%{transform:translateX(7px) skewX(-3deg);filter:brightness(1.8) contrast(1.3)}18%{transform:translateX(-3px);filter:brightness(1.4)}30%{transform:translateX(2px);filter:brightness(1.15)}45%,100%{transform:none;filter:none}}
#ashTerm .atcard.tune .atpw::after{content:"";position:absolute;left:0;right:0;top:-30%;height:26%;background:linear-gradient(180deg,transparent,rgba(255,206,150,.32) 60%,rgba(255,236,200,.5),transparent);animation:atBand .55s ease-out 1 forwards}
@keyframes atBand{from{top:-30%}to{top:110%}}
/* its words over the picture's foot, its threat and marks */
#ashTerm .atcap{position:absolute;left:0;right:0;bottom:0;padding:46px 22px 15px;background:linear-gradient(180deg,transparent,rgba(8,4,1,.7) 46%,rgba(5,2,0,.93));pointer-events:none}
#ashTerm .atcard:not(.on) .atcap b,#ashTerm .atcard:not(.on) .atcap .atr{opacity:0;transition:opacity .25s}
#ashTerm .atcard.on .atcap b,#ashTerm .atcard.on .atcap .atr{opacity:1;transition:opacity .4s .2s}
#ashTerm .atcap b{display:block;font:600 25px/1.12 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#ffe2c2;text-shadow:0 0 12px rgba(255,138,58,.55),0 2px 3px #000}
#ashTerm .atcap .atr{display:block;margin-top:5px;font:500 13px/1.3 var(--f-display);letter-spacing:.08em;color:#ffb27a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ashTerm .attier{position:absolute;right:14px;top:13px;padding:5px 10px 6px;font:500 13px/1 var(--f-display);font-style:normal;letter-spacing:.14em;color:#ff9a4a;background:rgba(10,5,1,.74);box-shadow:0 0 0 1px rgba(255,138,58,.38);text-shadow:0 0 6px rgba(255,110,40,.6);pointer-events:none}
#ashTerm .atnew{position:absolute;left:14px;top:13px;padding:5px 11px 6px;font:600 11px/1 var(--f-display);text-decoration:none;letter-spacing:.22em;text-transform:uppercase;color:#1c0e03;background:#ff9a4a;box-shadow:0 0 16px rgba(255,138,58,.6);text-shadow:none;pointer-events:none}
#ashTerm .atstamp{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-7deg);padding:8px 18px;font:700 18px/1 var(--f-display);text-decoration:none;letter-spacing:.24em;text-transform:uppercase;color:#ffe39a;border:2px solid rgba(255,227,154,.75);background:rgba(20,10,2,.55);text-shadow:0 0 8px rgba(255,210,110,.55);box-shadow:0 0 18px rgba(255,190,90,.25),inset 0 0 12px rgba(255,190,90,.2);white-space:nowrap;pointer-events:none}
/* the panel's own corner brackets close round the chosen one */
#ashTerm .atk{position:absolute;width:36px;height:33px;background:center/contain no-repeat;opacity:0;transition:opacity .35s,transform .5s cubic-bezier(.2,.85,.25,1);pointer-events:none;filter:drop-shadow(0 0 5px rgba(255,120,40,.5)) drop-shadow(0 2px 3px #000)}
#ashTerm .atk.tl{left:-10px;top:-10px;background-image:url("../assets/ui/cgx/c_tl.webp");transform:translate(-12px,-12px)}
#ashTerm .atk.tr{right:-10px;top:-10px;background-image:url("../assets/ui/cgx/c_tr.webp");transform:translate(12px,-12px)}
#ashTerm .atk.bl{left:-10px;bottom:-10px;background-image:url("../assets/ui/cgx/c_bl.webp");transform:translate(-12px,12px)}
#ashTerm .atk.br{right:-10px;bottom:-10px;background-image:url("../assets/ui/cgx/c_br.webp");transform:translate(12px,12px)}
#ashTerm .atcard.on .atk{opacity:1;transform:none}
#ashTerm .atstage{padding:0}
/* the arrows: the flourishes fl_l / fl_r */
#ashTerm .atarr{position:absolute;top:50%;z-index:200;width:96px;height:48px;margin-top:-24px;background:center/84px auto no-repeat;cursor:pointer;filter:sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(1.9) drop-shadow(0 0 7px rgba(255,120,40,.6)) drop-shadow(0 2px 4px #000);transition:filter .2s,transform .2s,opacity .2s}
#ashTerm .atprev{left:2px;background-image:url("../assets/ui/cgx/fl_l.webp")}
#ashTerm .atnext{right:2px;background-image:url("../assets/ui/cgx/fl_r.webp")}
#ashTerm .atarr:hover{filter:sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(2.5) drop-shadow(0 0 11px rgba(255,140,60,.9)) drop-shadow(0 2px 4px #000)}
#ashTerm .atprev:active{transform:translateX(-4px)}
#ashTerm .atnext:active{transform:translateX(4px)}
#ashTerm .atarr.off{opacity:.22;pointer-events:none}
/* the pips: one diamond each, the chosen one lit */
#ashTerm .atpips{grid-area:pp;display:flex;justify-content:center;gap:9px;padding:2px 0 4px}
#ashTerm .atpips i{width:9px;height:9px;transform:rotate(45deg);border:1px solid rgba(255,138,58,.55);background:rgba(255,138,58,.08);cursor:pointer;transition:background .3s,box-shadow .3s,transform .3s}
#ashTerm .atpips i.done{border-color:rgba(255,227,154,.5)}
#ashTerm .atpips i.on{background:#ff9a4a;box-shadow:0 0 10px rgba(255,138,58,.8);transform:rotate(45deg) scale(1.25)}
/* the briefing */
#ashTerm .atd{grid-area:dt;overflow:auto;min-height:0;display:grid;grid-template-columns:1.25fr 1fr;gap:6px 26px;align-content:start;padding:6px 8px 0 4px;border-top:1px solid rgba(255,138,58,.18)}
#ashTerm .atd.in{animation:atIn .45s ease-out}
@keyframes atIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
#ashTerm .atd dl{align-content:start}
#ashTerm .atd .atgoals{font:500 13px/1.45 var(--f-body);color:#f6dcbc}
#ashTerm .atd{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 16px),transparent);padding-bottom:12px}
#ashTerm .atd h4{margin:0 0 3px;font:600 11px/1.4 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#b87b45}
#ashTerm .atroute{margin:0 0 8px;font:500 12.5px/1.4 var(--f-display);letter-spacing:.06em;color:#ffb27a}
#ashTerm .atbrief{margin:0 0 10px;font:400 14px/1.5 var(--f-body);color:#f0cfa6}
#ashTerm dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;align-items:baseline}
#ashTerm dt{font:600 11px/1.4 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#b87b45}
#ashTerm dd{margin:0;font:500 13px/1.45 var(--f-body);color:#f6dcbc}
#ashTerm dd b{color:#ffcf9a;font-weight:600}
#ashTerm dd.tier{color:#ff9a4a;letter-spacing:.12em;text-shadow:0 0 6px rgba(255,110,40,.55)}
#ashTerm dd.run{color:#ffcf9a}
#ashTerm dd span{display:inline-block;margin-right:16px;white-space:nowrap}
#ashTerm .atcel i{display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:-3px;background:url("../assets/icons/cg2/celestine.webp") center/contain no-repeat}
#ashTerm .atbox{color:#ffd59a}
#ashTerm .atgoals{margin:0;padding:0 0 0 1.2em}
#ashTerm .atgoals li{margin:0 0 2px;padding-left:2px}
#ashTerm .atgoals li::marker{color:#ff8a3a;font-family:var(--f-display)}
#ashTerm .atno{color:#a98564}
#ashTerm .atf{flex:none;display:flex;justify-content:center;gap:14px;margin-top:14px;position:relative;z-index:4}
html body #ashTerm .atf button{height:46px;min-width:190px;padding:0 26px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:600 14px/1 var(--f-display)!important;letter-spacing:.16em!important;text-transform:uppercase;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
html body #ashTerm .atf button.atgo{--plate:gold;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
html body #ashTerm .atf button.atx{--plate:dark;color:#f3c89a!important;text-shadow:0 1px 2px #000!important}
html body #ashTerm .atf button:disabled{opacity:.42;filter:sepia(.6) saturate(.5);cursor:default}
/* a phone: the whole screen, the same plate and flourishes at its smaller size */
body.touch #ashTerm{background:#000}
body.touch #ashTerm .atp{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))}
body.touch #ashTerm .atp::before{inset:0;border-width:49px 33px 54px 33px;border-image:url("../assets/ui/cgx/panel_orn_open.webp") 222.5 150 245 150 fill / 49px 33px 54px 33px stretch}
body.touch #ashTerm .atp::after{top:0;width:22px;height:26px;margin-left:-11px}
body.touch #ashTerm .ats{inset:10px 11px 12px;padding:21px 22px 22px}
body.touch #ashTerm header{padding-bottom:9px;margin-bottom:7px;background-size:auto 8px}
body.touch #ashTerm h2{font-size:13.5px;letter-spacing:.2em}
body.touch #ashTerm .atsub{font-size:9.5px;margin-top:2px}
/* a phone: the stage on the left as big as the screen lets it, the briefing beside it */
body.touch #ashTerm .atb{gap:4px 14px;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"st dt" "pp dt"}
body.touch #ashTerm .atd{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid rgba(255,138,58,.18);padding:0 4px 0 12px}
body.touch #ashTerm .atrail{perspective:800px}
body.touch #ashTerm .atgoals{font-size:10.5px;line-height:1.4}
body.touch #ashTerm .atcap{padding:30px 12px 8px}
body.touch #ashTerm .atcap b{font-size:14px;letter-spacing:.13em}
body.touch #ashTerm .atcap .atr{font-size:9.5px;margin-top:2px}
body.touch #ashTerm .attier{right:8px;top:7px;padding:3px 6px 4px;font-size:9.5px}
body.touch #ashTerm .atnew{left:8px;top:7px;padding:3px 7px 4px;font-size:8.5px}
body.touch #ashTerm .atstamp{font-size:11.5px;padding:5px 11px}
body.touch #ashTerm .atk{width:22px;height:20px}
body.touch #ashTerm .atk.tl{left:-6px;top:-6px}
body.touch #ashTerm .atk.tr{right:-6px;top:-6px}
body.touch #ashTerm .atk.bl{left:-6px;bottom:-6px}
body.touch #ashTerm .atk.br{right:-6px;bottom:-6px}
body.touch #ashTerm .atarr{width:56px;height:52px;margin-top:-26px;background-size:50px auto}
body.touch #ashTerm .atpips{gap:7px;padding:1px 0 0}
body.touch #ashTerm .atpips i{width:7px;height:7px}
body.touch #ashTerm .atd h4{font-size:9px}
/* the briefing scrolls by touch (the page's touch-action:none had held it) */
body.touch #ashTerm .atd{-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
body.touch #ashTerm .atroute{font-size:10px;margin-bottom:4px}
body.touch #ashTerm .atbrief{font-size:11px;line-height:1.4;margin-bottom:6px}
body.touch #ashTerm dt{font-size:9px}
body.touch #ashTerm dd{font-size:10.5px}
body.touch #ashTerm .atf{margin-top:8px;gap:10px}
html body.touch #ashTerm .atf button{height:34px;min-width:150px;padding:0 16px;font-size:11px!important}
/* ---- the hand-in (the user, 01.11.: 'den Abgabe-Dialog noch mal deutlich hübscher — Grafik generieren'): a finished operation waiting shows the terminal as its hand-in alone. The Order's seal (rays and embers round it), the operation's name, the reward on a painted strip (3-slice: its wings are the caps, it grows with the words), one big glowing button on a painted plate (3-slice, a calm layer and a lit layer breathing over it), and when it is handed in a stamp slams down before the normal terminal returns. Art: assets/ui/cgx/handin/ (generated, tools/art/handin_prep.mjs) ---- */
#ashTerm .ath{display:none}
#ashTerm.hand .atstage,#ashTerm.hand .atpips,#ashTerm.hand .atd{display:none!important}
#ashTerm.hand .atb,body.touch #ashTerm.hand .atb{display:flex;align-items:center;justify-content:center}
#ashTerm.hand .ath{position:relative;display:flex;flex:1;min-height:0;align-items:center;justify-content:center;width:100%}
#ashTerm .athc{position:relative;max-width:96%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0}
/* the seal: the iron disc breathing, a ring of rays slowly turning behind it, the light on the floor of the screen */
#ashTerm .athseal{position:relative;width:148px;height:148px;margin:0 auto 6px;flex:none}
#ashTerm .athseal::before{content:"";position:absolute;left:50%;top:50%;width:430px;height:430px;margin:-215px 0 0 -215px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,150,60,.2) 0 4deg,rgba(255,150,60,0) 4deg 15deg);-webkit-mask-image:radial-gradient(circle,transparent 17%,#000 22%,transparent 68%);mask-image:radial-gradient(circle,transparent 17%,#000 22%,transparent 68%);animation:athRays 40s linear infinite;pointer-events:none}
#ashTerm .athseal::after{content:"";position:absolute;left:50%;top:50%;width:520px;height:340px;margin:-170px 0 0 -260px;background:radial-gradient(ellipse at center,rgba(255,138,58,.34),rgba(255,138,58,.1) 44%,rgba(255,138,58,0) 70%);animation:athGlow 2.6s ease-in-out infinite;pointer-events:none}
#ashTerm .athsl{position:absolute;inset:0;z-index:1;background:url("../assets/ui/cgx/handin/seal.webp") center/contain no-repeat;filter:drop-shadow(0 0 14px rgba(255,130,40,.7)) drop-shadow(0 5px 7px rgba(0,0,0,.7));animation:athSeal 2.6s ease-in-out infinite}
#ashTerm .athhd{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
#ashTerm .athtx{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
#ashTerm .athc h3{position:relative;z-index:1;margin:2px 0 0;font:700 36px/1.15 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#fff0dc;text-shadow:0 0 18px rgba(255,138,58,.7),0 2px 3px #000}
#ashTerm .athdone{position:relative;z-index:1;margin:8px auto 0;padding:14px 8px 0;background:url("../assets/ui/cgx/divider.webp") center top/auto 12px no-repeat;font:600 14px/1.4 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#ffcf8f;text-shadow:0 0 10px rgba(255,170,90,.55)}
/* the reward strip: the painted strip as a 3-slice (the caps measured on the art: 125 of 1000 px, scaled to the strip's height), XP, Celestine and the loot box with its own picture on it, centred on the face */
#ashTerm .athrew{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0;min-height:76px;margin-top:20px;padding:0 4px;border-style:solid;border-width:0 72px;border-image:url("../assets/ui/cgx/handin/strip.webp") 0 125 0 125 fill / 0 72px 0 72px stretch;font:600 22px/1 var(--f-display);letter-spacing:.08em;color:#ffe2c2;text-shadow:0 0 8px rgba(255,138,58,.5),0 1px 2px #000;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
#ashTerm .athrew span{display:inline-flex;align-items:center;white-space:nowrap;padding:0 22px}
#ashTerm .athrew u{flex:none;width:7px;height:7px;transform:rotate(45deg);background:#ff8a3a;box-shadow:0 0 8px rgba(255,138,58,.9);opacity:.8}
#ashTerm .athrew .atxp b{font:700 26px/1 var(--f-display);margin-right:7px;color:#fff3df}
#ashTerm .athrew .atcel i{width:30px;height:30px;margin-right:9px;vertical-align:0;filter:drop-shadow(0 0 6px rgba(80,190,255,.6))}
#ashTerm .athrew .atbox{color:#ffd59a;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
#ashTerm .athrew .atbox i{display:block;flex:none;width:58px;height:40px;margin-right:10px;background:center/contain no-repeat;filter:drop-shadow(0 0 7px rgba(255,130,40,.55)) drop-shadow(0 3px 3px rgba(0,0,0,.7))}
#ashTerm .athrew .atbox i.iron{background-image:url("../assets/ui/cgx/handin/chest_iron.webp")}
#ashTerm .athrew .atbox i.ornate{background-image:url("../assets/ui/cgx/handin/chest_ornate.webp");animation:athChest 2.2s ease-in-out infinite}
/* the embers rising over the whole screen */
#ashTerm .athem{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#ashTerm .athem i{position:absolute;bottom:-8px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#ffe2a8 0,#ff9a3a 45%,rgba(255,110,30,0) 72%);opacity:0;animation:athRise var(--d) linear var(--w) infinite}
/* the button: the calm plate with the lit plate breathing over it (both 3-slice: the wings are the caps), the halo behind it on the footer */
html body #ashTerm.hand .atf{position:relative;margin-top:6px;padding:12px 0 4px}
html body #ashTerm.hand .atf::before{content:"";position:absolute;left:50%;top:50%;width:640px;height:190px;margin:-95px 0 0 -320px;background:radial-gradient(ellipse at center,rgba(255,150,60,.5),rgba(255,120,40,.16) 48%,rgba(255,120,40,0) 70%);animation:athHalo 1.7s ease-in-out infinite;pointer-events:none;z-index:0}
html body #ashTerm .atf button.athand{--plate:none;position:relative;z-index:1;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:84px;min-width:0;padding:0 58px;border-style:solid!important;border-width:0 67px!important;border-image:url("../assets/ui/cgx/handin/btn_hand_calm.webp") 0 135 0 135 fill / 0 67px 0 67px stretch!important;background:none!important;filter:none;font-size:25px!important;letter-spacing:.26em!important;color:#fff5e6!important;text-shadow:0 0 14px rgba(255,170,80,1),0 0 4px rgba(255,140,40,.8),0 2px 3px #000!important;transition:transform .12s}
html body #ashTerm .atf button.athand::after{content:"";position:absolute;top:0;bottom:0;left:-67px;right:-67px;box-sizing:border-box;border-style:solid;border-width:0 67px;border-image:url("../assets/ui/cgx/handin/btn_hand.webp") 0 135 0 135 fill / 0 67px 0 67px stretch;pointer-events:none;z-index:-1;animation:athLit 1.7s ease-in-out infinite}
html body #ashTerm .atf button.athand:active{transform:scale(.97)}
html body #ashTerm .atf button.athand:hover::after{animation:none;opacity:1}
/* the stamp, once handed in: it slams down onto the screen, the panel jolts, a ring of light runs out, then the normal terminal returns */
#ashTerm .athstamp{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(12,6,2,.95),rgba(6,3,0,.97));animation:athVeil .3s ease-out both;pointer-events:auto}
#ashTerm .athstamp.out{animation:athVeilOut .4s ease-in both}
#ashTerm .athsm{position:relative;width:360px;height:360px;margin-bottom:34px;transform:rotate(-8deg);animation:athSlam 2.1s cubic-bezier(.3,0,.3,1) both}
#ashTerm .athsm::before{content:"";position:absolute;inset:0;background:url("../assets/ui/cgx/handin/stamp.webp") center/contain no-repeat;filter:drop-shadow(0 0 12px rgba(220,70,30,.3))}
#ashTerm .athsm::after{content:"";position:absolute;inset:6%;border-radius:50%;border:3px solid rgba(255,170,90,.9);box-shadow:0 0 24px rgba(255,130,40,.9);opacity:0;animation:athWave 2.1s ease-out both}
#ashTerm .athsm b{position:absolute;left:10%;right:10%;top:49.6%;height:12%;display:flex;align-items:center;justify-content:center;font:800 20px/1 var(--f-display);letter-spacing:.05em;white-space:nowrap;text-transform:uppercase;color:#d8431f;text-shadow:0 0 1px #8a2410,0 0 9px rgba(220,70,30,.45)}
#ashTerm .athsm span{position:absolute;left:-20%;right:-20%;top:100%;margin-top:16px;font:700 15px/1.3 var(--f-display);letter-spacing:.14em;text-align:center;text-transform:uppercase;color:#ffcf8f;text-shadow:0 0 10px rgba(255,150,60,.7),0 1px 2px #000}
#ashTerm .athflash{position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,236,200,.85),rgba(255,150,60,.5) 40%,rgba(255,120,40,0) 75%);opacity:0;animation:athFlash 2.1s ease-out both}
#ashTerm .atp.shake{animation:athShake .38s linear 1}
@keyframes athRays{to{transform:rotate(360deg)}}
@keyframes athSeal{0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(255,130,40,.55)) drop-shadow(0 5px 7px rgba(0,0,0,.7))}50%{transform:scale(1.035);filter:drop-shadow(0 0 22px rgba(255,160,70,.95)) drop-shadow(0 5px 7px rgba(0,0,0,.7))}}
@keyframes athChest{0%,100%{filter:drop-shadow(0 0 5px rgba(255,130,40,.45)) drop-shadow(0 3px 3px rgba(0,0,0,.7))}50%{filter:drop-shadow(0 0 14px rgba(255,170,70,1)) drop-shadow(0 3px 3px rgba(0,0,0,.7))}}
@keyframes athLit{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes athHalo{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes athGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes athRise{0%{transform:translate(0,0) scale(.6);opacity:0}12%{opacity:.95}70%{opacity:.5}100%{transform:translate(var(--dx),var(--h)) scale(.2);opacity:0}}
@keyframes athVeil{from{opacity:0}to{opacity:1}}
@keyframes athVeilOut{from{opacity:1}to{opacity:0}}
@keyframes athSlam{0%{transform:rotate(-8deg) scale(3.4);opacity:0}13%{transform:rotate(-8deg) scale(3.4);opacity:0}25%{transform:rotate(-8deg) scale(.94);opacity:1}29%{transform:rotate(-8deg) scale(1.05)}34%,92%{transform:rotate(-8deg) scale(1);opacity:1}100%{transform:rotate(-8deg) scale(1);opacity:1}}
@keyframes athWave{0%,24%{transform:scale(1);opacity:0}25%{transform:scale(1);opacity:.95}60%{transform:scale(2.2);opacity:0}100%{transform:scale(2.2);opacity:0}}
@keyframes athFlash{0%,22%{opacity:0}25%{opacity:1}48%,100%{opacity:0}}
@keyframes athShake{0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,4px)}30%{transform:translate(6px,-5px)}45%{transform:translate(-5px,-3px)}60%{transform:translate(4px,4px)}80%{transform:translate(-2px,1px)}}
/* a phone: the same pieces, smaller (the seal beside the words), nothing past the screen */
body.touch #ashTerm .athhd{flex-direction:row;align-items:center;justify-content:center;column-gap:14px}
body.touch #ashTerm .athseal{width:78px;height:78px;margin:0}
body.touch #ashTerm .athseal::before{width:240px;height:240px;margin:-120px 0 0 -120px}
body.touch #ashTerm .athseal::after{width:300px;height:200px;margin:-100px 0 0 -150px}
body.touch #ashTerm .athtx{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
body.touch #ashTerm .athc h3{font-size:19px;letter-spacing:.1em;margin:0}
body.touch #ashTerm .athdone{margin:4px 0 0;padding:8px 0 0;font-size:10px;letter-spacing:.12em;background-position:left top;background-size:auto 8px}
body.touch #ashTerm .athrew{flex:none;min-height:46px;margin-top:8px;border-width:0 38px;border-image-width:0 38px;border-image-source:url("../assets/ui/cgx/handin/strip.webp");font-size:15px}
body.touch #ashTerm .athrew span{padding:0 11px}
body.touch #ashTerm .athrew .atxp b{font-size:17px;margin-right:5px}
body.touch #ashTerm .athrew .atcel i{width:20px;height:20px;margin-right:6px}
body.touch #ashTerm .athrew .atbox{font-size:10.5px}
body.touch #ashTerm .athrew .atbox i{width:38px;height:27px;margin-right:7px}
body.touch #ashTerm .athrew u{width:5px;height:5px}
html body.touch #ashTerm.hand .atf{margin-top:0;padding:6px 0 2px}
html body.touch #ashTerm.hand .atf::before{width:440px;height:120px;margin:-60px 0 0 -220px}
html body.touch #ashTerm .atf button.athand{height:54px;padding:0 36px;border-width:0 43px!important;border-image-width:0 43px!important;font-size:16px!important;letter-spacing:.22em!important}
html body.touch #ashTerm .atf button.athand::after{left:-43px;right:-43px;border-width:0 43px;border-image-width:0 43px}
body.touch #ashTerm .athsm{width:230px;height:230px}
body.touch #ashTerm .athsm b{font-size:12.5px}
body.touch #ashTerm .athsm span{margin-top:8px;font-size:11px}
@media (prefers-reduced-motion:reduce){#ashTerm .athseal::before,#ashTerm .athseal::after,#ashTerm .athsl,#ashTerm .athem i,#ashTerm .atf::before,#ashTerm .atf button.athand::after,#ashTerm .athrew .atbox i{animation:none}#ashTerm .athem{display:none}}
/* the tracker while a hand-in waits: its plate breathes ember */
html body #quest.hq{animation:athQuest 1.9s ease-in-out infinite}
html body #quest.hq .qo{color:#ffd9a0!important;text-shadow:0 0 8px rgba(255,150,60,.7)}
@keyframes athQuest{0%,100%{filter:drop-shadow(0 0 3px rgba(255,138,58,.35))}50%{filter:drop-shadow(0 0 13px rgba(255,170,80,.95)) brightness(1.15)}}
/* ---- London's map in the quest log (js/fps/ashmap.js): the legend's signs as on the map ---- */
#qlog .mi.ap{background:#1a1208;border-color:#eea24a}
#qlog .mi.ap.hold,#qlog .mi.ap.spot{background:#eea24a;border-color:#1a1208}
#qlog .mi.ap.spot{border-radius:50%;transform:scale(.8)}
#qlog .mi.ap.hell{background:#ff5a2a;border-color:#1a1208}
#qlog .mi.ap.dim{opacity:.55}
#qlog .mrow[data-ap].sel b{color:#ffd08a}
/* ---- the loot's plates never take a finger on a phone (the user, 25.10.: 'konnte mit dem rechten Finger nicht mehr richtig drehen', in a heavy fight, until the level was loaded again): the plates stand over the touch layer (#labels, z-index 21: Kharos taps them anywhere), so a thumb landing on one turned nothing and walked nothing — and with the view held still they stayed where the thumb rests. Every touch goes through to the look and the stick now; a clean tap on a plate still picks it up (js/fps/ashtouch.js) ---- */
body.touch #labels .loot-label{pointer-events:none}
/* ---- and nothing else in the label layer or the aim's HUD takes a finger on a phone either (the user, 25.10. late: 'das Zielen ging nur im ganz rechten Bereich über den Buttons'): the people's name plates (the traders' with their signs, the field trader's, the room's others), the signs over the ways out — a drag begun on one had started a talk, opened a shop or walked her off. A clean tap on one is handed to it (js/fps/ashtouch.js); only real buttons, outside these layers, take touches */
body.touch #labels,body.touch #labels *,body.touch #fpsHud,body.touch #fpsHud *{pointer-events:none!important}

/* every skill slot always in its place (the user, 26.10.): a slot not open yet, or with nothing on it, grey with a padlock at half its width, centred (js/fps/ashtouch.js ASH_LOCK_SVG); on a phone it takes the finger so a drag begun on it turns the look like any button, a tap does nothing */
html body #skillsT .tbtn .tlock{display:none}
html body #skillsT .tbtn.locked,html body #skillsT .tbtn.empty{display:block!important;opacity:1!important;filter:grayscale(1) brightness(.62)}
html body.touch #skillsT .tbtn.locked,html body.touch #skillsT .tbtn.empty{pointer-events:auto!important}
html body #skillsT .tbtn.locked>*,html body #skillsT .tbtn.empty>*{visibility:hidden}
html body #skillsT .tbtn.locked .tlock,html body #skillsT .tbtn.empty .tlock{display:block;visibility:visible;position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);pointer-events:none;z-index:2}
html body #skillsT .tbtn .tlock path{stroke:#b4b8bc!important;fill:none}
html body #skillsT .tbtn .tlock rect{fill:#b4b8bc;stroke:none!important}
html body #skillsT .tbtn .tlock path.kh{stroke:#1a1c1f!important}

/* a ground skill's button while its circle is being placed (js/fps/ashtouch.js; the user, 26.10.: 'gut, wenn der Button pulsiert, während man in der Vorschau ist') */
body.touch #skillsT .tbtn:not(.main).ash-charging::before,body.touch #skillsT .tbtn:not(.main).ash-charging::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;margin:-50% 0 0 -50%;border-radius:50%;z-index:4;pointer-events:none;box-sizing:border-box}body.touch #skillsT .tbtn:not(.main).ash-charging::before{border:2px dashed rgba(255,160,70,.9);box-shadow:0 0 10px rgba(255,130,40,.8),inset 0 0 10px rgba(255,130,40,.6);animation:ashSuckA .4s .1s cubic-bezier(.55,0,1,.45) both}body.touch #skillsT .tbtn:not(.main).ash-charging::after{border:1.5px solid rgba(255,200,120,.85);box-shadow:0 0 12px rgba(255,140,50,.9);animation:ashSuckB .3s .2s cubic-bezier(.55,0,1,.45) both}@keyframes ashSuckA{0%{transform:scale(2.8) rotate(0);opacity:.2}20%{opacity:1}100%{transform:scale(1) rotate(-220deg);opacity:.9}}@keyframes ashSuckB{0%{transform:scale(2.3);opacity:0}30%{opacity:1}100%{transform:scale(1);opacity:.85}}body.touch #skillsT .tbtn.ash-aiming{animation:ashAim .55s ease-in-out infinite alternate}@keyframes ashAim{from{filter:drop-shadow(0 0 2px rgba(255,150,60,.6)) brightness(1)}to{filter:drop-shadow(0 0 12px rgba(255,150,60,1)) brightness(1.4)}}

/* ---- the map without its legend leaf (the user, 27.10.: 'Legende weg, ist selbsterklärend'; js/fps/ashui.js): the map takes its room ---- */
html body #qlog .mlist.ll,html body #qlog .ldock[data-dock="ll"]{display:none!important}
/* ---- the minimap takes its tap on a phone (the user, 27.10.: 'Tap auf Minimap oben rechts sollte Map öffnen'): it lay under the look zone (#touch, z 20) on the streets, so the finger turned the view; now over it, under the menu buttons (#side, z 22) ---- */
body.touch:not(.maptour) #minimapWrap{z-index:21}
/* ---- the skills page (the user, 27.10.: 'der Übergang vom oberen zum unteren Panel ist zu unschön … vielleicht mit einer Textur besser; es fehlen hübsche Animationen, z. B. Pulse-Glow bei Auswahl'):
   the page lets the window's plated metal run on under the title (it had its own near-opaque fill, a hard seam below the title), only darkened toward the foot;
   the chosen skill's row breathes an ember glow, its icon springs in; the sockets it fits pulse ---- */
html body #skills .sbody .spage{background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(255,122,42,.05),rgba(0,0,0,0) 70%),linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.12) 30%,rgba(0,0,0,.34) 100%)!important;background-color:transparent!important;box-shadow:inset 3px 0 0 0 #ff7a2a!important} /* (its own dark fill and a light hairline round it were the seam) */
html body #skills .slist .sk.sel{animation:cgSkSel 2.2s ease-in-out infinite}
@keyframes cgSkSel{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,140,60,.35),0 0 0 rgba(255,122,42,0)}50%{box-shadow:inset 0 0 0 1px rgba(255,160,80,.75),0 0 14px rgba(255,122,42,.45)}}
html body #skills .slist .sk.sel canvas,html body #skills .slist .sk.sel img{animation:cgSkPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes cgSkPop{0%{transform:scale(.7)}100%{transform:scale(1)}}
html body #skills .spage .sock.ok{animation:cgSockPulse 1.3s ease-in-out infinite}
@keyframes cgSockPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} /* (their glow is a fixed !important drop-shadow, cindergate-ui.css: the pulse is in the size) */
/* the list's icons free on the row, no dark tile behind them (the user, 27.10.: 'ein schwarzes Rechteck bei den schon erlernten Fähigkeiten'): every skill has its painted, transparent icon now */
html body #skills .sk canvas{background:none!important;border-radius:0!important}
/* the Order's choice (js/net/ashnet.js choose / ask; the user, 29.10.: 'Das Fenster ist hässlich und braucht ein Makeover'): the ornate plate as a
   9-slice that grows with the question, its crest, the divider between flourishes, the answers on the plates' gold and dark */
#ashAsk.mm-confirm{background:radial-gradient(ellipse at center,rgba(14,8,3,.5),rgba(0,0,0,.78))}
#ashAsk .aqp{position:relative;box-sizing:border-box;width:min(470px,calc(100vw - 32px));padding:30px 50px 40px;isolation:isolate;text-align:center;pointer-events:auto;animation:aqIn .22s cubic-bezier(.2,.8,.3,1) both}
@keyframes aqIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
#ashAsk .aqp::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}
#ashAsk .aqp::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;pointer-events:none}
#ashAsk h3{margin:6px 0 0;font:700 18px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#fff1e0;text-shadow:0 0 12px rgba(255,140,60,.35),0 2px 3px #000;white-space:normal;overflow-wrap:break-word;hyphens:auto}
#ashAsk .aqdiv{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px auto 16px;width:86%}
#ashAsk .aqfl,#ashAsk .aqfr{flex:none;width:56px;height:20px;background:url("../assets/ui/cgx/fl_l.webp") center/contain no-repeat;filter:sepia(1) saturate(2) hue-rotate(-12deg) brightness(1.6) drop-shadow(0 1px 2px #000)}
#ashAsk .aqfr{background-image:url("../assets/ui/cgx/fl_r.webp")}
#ashAsk .aqln{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,138,58,.7),transparent)}
#ashAsk .mm-cbtns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
html body #ashAsk .mm-cbtns button{height:44px;min-width:150px;padding:0 24px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:600 14px/1 var(--f-display)!important;letter-spacing:.16em!important;text-transform:uppercase;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
html body #ashAsk .mm-cbtns button.aqgo{--plate:gold;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
html body #ashAsk .mm-cbtns button.aqno{--plate:dark;color:#f3c89a!important;text-shadow:0 1px 2px #000!important}
body.touch #ashAsk .aqp{width:min(420px,calc(100vw - 24px));padding:22px 36px 30px}
body.touch #ashAsk .aqp::before{border-width:49px 33px 54px 33px;border-image-width:49px 33px 54px 33px}
body.touch #ashAsk .aqp::after{top:-12px;width:22px;height:26px;margin-left:-11px}
body.touch #ashAsk h3{font-size:14px}
body.touch #ashAsk .aqdiv{margin:8px auto 11px}
html body.touch #ashAsk .mm-cbtns button{height:36px;min-width:120px;font-size:12px!important}
/* a party member out of the picture: an arrow on the screen's rim toward him, his name and the metres (js/net/ashnet.js ashEdgeMark) */
.ash-edge{position:fixed;left:0;top:0;z-index:30;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform}
.ash-edge i{width:0;height:0;border-left:14px solid #5fd8ff;border-top:8px solid transparent;border-bottom:8px solid transparent;filter:drop-shadow(0 0 3px rgba(0,0,0,.9)) drop-shadow(0 0 6px rgba(95,216,255,.5))}
.ash-edge b{font:600 11px/1.1 Cinzel,serif;letter-spacing:.05em;color:#9fe6ff;white-space:nowrap;text-shadow:0 0 3px #000,0 1px 2px #000}
/* the list of finished operations to claim (js/fps/ashterm.js renderHand, more than one): a line each, its reward, its own Claim */
#ashTerm .athlist{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;width:min(560px,92vw);max-height:34vh;overflow:auto;margin-top:14px;text-align:left}
#ashTerm .athrow{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;background:linear-gradient(90deg,rgba(255,122,42,.14),rgba(16,18,21,.85) 40%);border-left:3px solid #ff7a2a}
#ashTerm .athrow b{flex:1;min-width:0;font:600 14px/1.2 var(--f-display);letter-spacing:.04em;color:#fff3df;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ashTerm .athrow small{flex:none;font:500 12px/1.2 'Barlow',sans-serif;color:#c8d2da;white-space:nowrap}
html body #ashTerm .athrow button.athone{--plate:dark;flex:none;box-sizing:border-box;width:118px;height:32px;padding:0 10px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:600 11px/1 var(--f-display)!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#ffd9bf!important;text-shadow:0 1px 2px #000!important;cursor:pointer}
#ashTerm.hand.list .athrew{display:none}
#ashTerm.hand.list .athlist{max-height:min(40vh,320px)}
body.touch #ashTerm .athlist{max-height:27vh;margin-top:8px}
body.touch #ashTerm .athrow{padding:5px 8px 5px 10px}
body.touch #ashTerm .athrow small{font-size:11px}
/* the chat (js/net/ashnet.js AshChat): the lines low on the left in each speaker's colour, fading; Enter's line to type under them */
#ashChat{position:fixed;left:calc(16px + var(--sl,0px));bottom:260px;z-index:40;width:min(400px,40vw);display:none;flex-direction:column;gap:4px;pointer-events:none}
#ashChat.on{display:flex}
#ashChat .acl{display:flex;flex-direction:column;gap:2px}
#ashChat .acr{padding:3px 9px 3px 8px;background:linear-gradient(90deg,rgba(10,11,13,.72),rgba(10,11,13,.38) 80%,rgba(10,11,13,0));border-left:2px solid rgba(255,122,42,.55);font:500 13px/1.3 'Barlow',sans-serif;color:#eef0f2;text-shadow:0 1px 2px #000;overflow-wrap:anywhere;transition:opacity 1.5s}
#ashChat .acr b{font:600 12.5px/1.3 var(--f-display);letter-spacing:.03em}
#ashChat .acr.old{opacity:.35}
#ashChat .aci{display:none;align-items:center;gap:8px;padding:5px 8px;background:rgba(14,16,19,.94);border:1px solid rgba(255,122,42,.7);pointer-events:auto}
#ashChat.open .aci{display:flex}
#ashChat.open .acl{max-height:40vh;overflow:hidden}
#ashChat .aci b{flex:none;font:600 11px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#ff9a4a}
#ashChat .aci input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:500 14px/1.3 'Barlow',sans-serif;color:#fff}
body.touch #ashChat{left:calc(12px + var(--sl,0px));bottom:auto;top:44%;width:44vw}
body.touch #ashChat .acr{font-size:11.5px}
body.touch #ashChat .acr b{font-size:11px}
/* the chat wheel (js/net/ashnet.js AshWheel): eight lines round a dark ring, the picked one lit; the ping's mark in its setter's colour */
#ashWheel{position:fixed;inset:0;z-index:60;display:none;pointer-events:none}
#ashWheel.on{display:block}
#ashWheel .awr{position:absolute;width:0;height:0}
#ashWheel .awr::before{content:"";position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(10,11,13,.82) 0 34%,rgba(10,11,13,.55) 35% 62%,rgba(10,11,13,0) 72%);box-shadow:inset 0 0 0 1px rgba(255,122,42,.25)}
#ashWheel .awc{position:absolute;left:-7px;top:-7px;width:14px;height:14px;transform:rotate(45deg);background:#ff8a3a;box-shadow:0 0 10px rgba(255,138,58,.9)}
#ashWheel .aww{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);min-width:96px;padding:7px 11px;text-align:center;white-space:nowrap;background:linear-gradient(180deg,rgba(40,43,48,.96),rgba(20,22,25,.97));border:1px solid #4a5058;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);font:600 12px/1.2 var(--f-display);letter-spacing:.05em;color:#e6e8ea;text-shadow:0 1px 2px #000;transition:transform .08s}
#ashWheel .aww.on{border-color:#ff7a2a;background:linear-gradient(180deg,rgba(120,52,18,.97),rgba(60,24,10,.97));color:#ffe2c8;transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 12px rgba(255,122,42,.6)}
.ash-ping{position:fixed;left:0;top:0;z-index:29;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.ash-ping i{width:16px;height:16px;transform:rotate(45deg);background:var(--mate,#ffd9bf);box-shadow:0 0 0 2px rgba(0,0,0,.7),0 0 14px var(--mate,#ffd9bf);animation:ashPing 1s ease-in-out infinite alternate}
.ash-ping b{font:600 11px/1.1 Cinzel,serif;color:var(--mate,#ffd9bf);text-shadow:0 0 3px #000,0 1px 2px #000;white-space:nowrap}
.ash-ping b::after{content:" · " attr(data-d);color:#e8eaec}
@keyframes ashPing{from{transform:rotate(45deg) scale(.85)}to{transform:rotate(45deg) scale(1.1)}}
/* the party tab of the quick panel (js/net/ashnet.js): a line per member — his name in his colour, level and where he is — and the leader's buttons on the dark plate */
#ashQC .qcmem{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:7px 8px 7px 12px;background:linear-gradient(90deg,rgba(255,122,42,.1),rgba(16,18,21,.6) 50%);border-left:2px solid rgba(255,122,42,.5)}
#ashQC .qcmn{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:2px}
#ashQC .qcmn b{font:600 13px/1.2 var(--f-display);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ashQC .qcmn small{font:500 11px/1.2 'Barlow',sans-serif;color:#b8c2ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ashQC .qcma{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px}
#ashQC .qcma:empty{display:none}
html body #ashQC .qcma button{--plate:dark;box-sizing:border-box;height:30px;padding:0 12px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:600 10.5px/1 var(--f-display)!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#ffd9bf!important;text-shadow:0 1px 2px #000!important;cursor:pointer;white-space:nowrap}
html body #ashQC .qcma button[data-a="kick"]{--plate:red}
/* the panel's 'Call to me' on the gold plate (it had come out as the browser's own white button) */
html body #ashQC .qcft .pri{--plate:gold;display:block;box-sizing:border-box;width:100%;height:34px;margin-bottom:7px;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:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important;cursor:pointer}
html body.touch #ashQC .qcft .pri{height:30px}
/* the players' list (the quick panel's Players tab): a search line, a star to keep one as a friend, the online ones lit */
#ashQC .qcsrch{margin-bottom:6px}
#ashQC .qcsrch input{flex:1}
#ashQC .qcst{display:inline-block;margin-right:3px;text-decoration:none;color:#5a5f66;cursor:pointer;pointer-events:auto}
#ashQC .qcst.fav{color:#ffc94a;text-shadow:0 0 6px rgba(255,201,74,.6)}
#ashQC .qcmem.on{border-left-color:#9be15d}
#ashQC .qcmem.on small{color:#cfe8b8}
body:not(.inparty) #gmenu .tile[data-go="party"]{display:none!important}
/* the wheel, second round: each pick its sign before its words, the page pick in ember, a line of light running out from the middle to the pick, the page's name in the middle */
#ashWheel .aww{display:flex;align-items:center;gap:7px;padding:7px 12px 7px 9px}
#ashWheel .aww svg{flex:none;width:18px;height:18px;fill:none;stroke:#ffb27a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(255,122,42,.5))}
#ashWheel .aww.on svg{stroke:#fff1e0}
#ashWheel .aww.pg{border-color:#ff7a2a;color:#ffcfa6;background:linear-gradient(180deg,rgba(70,34,16,.96),rgba(34,16,8,.97))}
#ashWheel .awl{position:absolute;left:0;top:-2px;height:4px;width:0;transform-origin:0 50%;opacity:0;transition:opacity .12s,transform .08s;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,138,58,0) 0,rgba(255,138,58,.9) 30%,#ffe2c4 100%),repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.55) 8px 12px);background-size:100% 100%,24px 100%;animation:awFlow .5s linear infinite;box-shadow:0 0 10px rgba(255,138,58,.8)}
@keyframes awFlow{from{background-position:0 0,0 0}to{background-position:0 0,24px 0}}
#ashWheel .awt{position:absolute;left:0;top:22px;transform:translateX(-50%);font:600 11px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#ff9a4a;text-shadow:0 1px 2px #000;white-space:nowrap}
body.touch #ashWheel .aww{min-width:0;padding:6px 9px 6px 7px;font-size:11px}
body.touch #ashWheel .aww svg{width:15px;height:15px}
html body #ashQC button.qcjoin{--plate:gold;display:block;box-sizing:border-box;width:100%;height:34px;margin:0 0 8px;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:.12em!important;text-transform:uppercase!important;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important;cursor:pointer}
.ash-emo{position:fixed;left:0;top:0;z-index:28;pointer-events:none;font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 8px var(--mate,transparent));animation:ashEmo 3.2s ease-out forwards}
@keyframes ashEmo{0%{opacity:0;margin-top:10px}10%{opacity:1;margin-top:0}80%{opacity:1}100%{opacity:0;margin-top:-24px}}
/* the wheel left open after a tap on one's portrait: its picks tapped */
#ashWheel.sticky{pointer-events:auto;background:rgba(0,0,0,.18)}
#ashWheel.sticky .aww{pointer-events:auto;cursor:pointer}
/* the wheel's page laid in like an old screen coming on: a bright line opens out over the ring, scanlines roll through it, each pick fades in after the last with a jolt, the title flickers */
#ashWheel .awr::after{content:"";position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50%;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,rgba(255,170,100,.12) 0 2px,transparent 2px 4px)}
#ashWheel .awr.crt::after{animation:awScan .65s ease-out}
#ashWheel .awr.crt::before{animation:awTube .38s cubic-bezier(.2,.9,.3,1)}
#ashWheel .awr.crt .aww{animation:awIn .34s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:var(--d,0ms)}
#ashWheel .awr.crt .awt{animation:awFlick .5s steps(1) both}
@keyframes awTube{0%{transform:scaleY(.02) scaleX(1.15);filter:brightness(3)}45%{transform:scaleY(.08) scaleX(1);filter:brightness(2.2)}100%{transform:none;filter:none}}
@keyframes awScan{0%{opacity:.9;background-position:0 0}100%{opacity:0;background-position:0 40px}}
@keyframes awIn{0%{opacity:0;transform:translate(-50%,-50%) translate(calc(var(--x) * -.35),calc(var(--y) * -.35)) scale(.6);filter:brightness(2.4) blur(1.5px)}60%{opacity:1;filter:brightness(1.6)}100%{opacity:1;transform:translate(-50%,-50%);filter:none}}
@keyframes awFlick{0%{opacity:0}15%{opacity:1}25%{opacity:.2}40%{opacity:1}55%{opacity:.5}70%,100%{opacity:1}}
/* ===== the kill announcer (js/fps/ashannounce.js): a word slammed in over the picture — ember metal, a shockwave, sparks, light streaks, the rim glowing ===== */
#ashAnn{position:fixed;left:50%;top:31%;z-index:54;width:0;height:0;pointer-events:none;display:none;--c1:#fff4e6;--c2:#ffb27a;--c3:#ff5a1f;--glow:rgba(255,110,40,.85);--fs:clamp(40px,6.4vw,92px)}
#ashAnn.on{display:block}
#ashAnn[data-kind="head"]{--c1:#fff1ec;--c2:#ff8c7a;--c3:#c41a10;--glow:rgba(230,40,30,.85);--fs:clamp(34px,4.8vw,66px)}
#ashAnn[data-kind="spree"]{--c1:#fff6dc;--c2:#ffd36a;--c3:#b04aff;--glow:rgba(190,90,255,.9)}
#ashAnn[data-lv="3"],#ashAnn[data-lv="4"]{--fs:clamp(48px,7.6vw,110px)}
#ashAnn[data-lv="5"],#ashAnn[data-lv="6"],#ashAnn[data-lv="7"],#ashAnn[data-lv="8"]{--fs:clamp(52px,8.4vw,124px)}
/* the word, its line and the headshot's stamp stacked in one column round the anchor (they had been placed by the smallest size and ran into the big words) */
#ashAnn .an-col{position:absolute;left:0;top:0;width:0;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateY(calc(var(--fs) * -.55))}
#ashAnn .an-band{position:absolute;left:50%;top:-16px;bottom:-16px;width:min(84vw,1100px);z-index:-1;background:linear-gradient(90deg,transparent,rgba(10,4,2,.36) 26%,rgba(10,4,2,.36) 74%,transparent);transform:translateX(-50%) scaleY(0);animation:anBand .45s .11s cubic-bezier(.2,1.4,.4,1) both}
#ashAnn .an-wbox{position:relative;white-space:nowrap;font:700 var(--fs)/1 'Chakra Petch','Barlow Semi Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase}
#ashAnn[data-lv="3"] .an-wbox,#ashAnn[data-lv="4"] .an-wbox,#ashAnn[data-lv="5"] .an-wbox,#ashAnn[data-lv="6"] .an-wbox,#ashAnn[data-lv="7"] .an-wbox,#ashAnn[data-lv="8"] .an-wbox{animation:anQuake .09s .11s linear 5}
#ashAnn .an-word{position:relative;background:linear-gradient(180deg,var(--c1) 0%,var(--c1) 30%,var(--c2) 52%,var(--c3) 78%,#5a1404 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 2px #000) drop-shadow(0 4px 0 #1a0802) drop-shadow(0 0 18px var(--glow)) drop-shadow(0 0 46px var(--glow));animation:anSlam .44s cubic-bezier(.3,0,.25,1) both}
#ashAnn .an-word::after{content:attr(data-w);position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.95) 48%,transparent 62%) -150% 0/60% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:anSheen .8s .2s ease-out both}
#ashAnn .an-gh{position:absolute;left:0;top:0;color:rgba(255,50,40,.9);mix-blend-mode:screen;opacity:0;animation:anGhC .55s linear both}
#ashAnn .an-gh.m{color:rgba(40,210,255,.9);animation-name:anGhM}
#ashAnn .an-sub{display:flex;align-items:center;gap:8px;white-space:nowrap;font:700 clamp(12px,1.3vw,17px)/1 'Chakra Petch';letter-spacing:.32em;color:var(--c2);text-shadow:0 0 10px var(--glow),0 1px 2px #000;animation:anSub .45s .2s ease-out both}
#ashAnn .an-sub i{width:9px;height:9px;transform:rotate(45deg);background:var(--c3);box-shadow:0 0 8px var(--glow)}
#ashAnn .an-head{display:flex;align-items:center;gap:7px;padding:4px 12px 4px 9px;white-space:nowrap;background:linear-gradient(90deg,rgba(120,8,4,0),rgba(150,14,8,.9) 18%,rgba(150,14,8,.9) 82%,rgba(120,8,4,0));font:700 clamp(11px,1.15vw,15px)/1 'Chakra Petch';letter-spacing:.28em;text-transform:uppercase;color:#ffe4dc;text-shadow:0 1px 2px #000;animation:anStamp .35s .32s cubic-bezier(.2,1.6,.4,1) both}
#ashAnn .an-head b{width:18px;height:18px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffe4dc'%3E%3Cpath d='M12 2C7 2 4 5.6 4 10c0 2.6 1.2 4.4 3 5.5V19a1 1 0 0 0 1 1h1v-2h2v2h2v-2h2v2h1a1 1 0 0 0 1-1v-3.5c1.8-1.1 3-2.9 3-5.5 0-4.4-3-8-8-8zM8.5 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E")}
#ashAnn .an-ring{position:absolute;left:-80px;top:-80px;width:160px;height:160px;border-radius:50%;border:4px solid var(--c2);box-shadow:0 0 26px var(--glow),inset 0 0 20px var(--glow);opacity:0;animation:anRing .6s .11s ease-out both}
#ashAnn .an-ring.r2{border-width:2px;animation:anRing2 .85s .15s ease-out both}
#ashAnn .an-streak{position:absolute;top:-3px;height:6px;width:50vw;max-width:760px;opacity:0;background:linear-gradient(90deg,transparent,var(--c2) 40%,#fff 50%,var(--c2) 60%,transparent);box-shadow:0 0 16px var(--glow)}
#ashAnn .an-streak.l{right:0;transform-origin:100% 50%;animation:anStreak .5s .11s ease-out both}
#ashAnn .an-streak.r{left:0;transform-origin:0 50%;animation:anStreak .5s .11s ease-out both}
#ashAnn .spk{position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--c1);box-shadow:0 0 8px var(--c2),0 0 18px var(--glow);opacity:0;animation:anSpark .8s var(--d) cubic-bezier(.1,.8,.3,1) both}
#ashAnn.out{animation:anOut .35s ease-in forwards}
#ashAnnFlash{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 50%,rgba(255,90,30,.5) 100%)}
#ashAnnFlash::before{content:'';position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 70% 45% at 50% 31%,rgba(255,240,220,.6),rgba(255,150,80,.2) 45%,transparent 75%)}
#ashAnnFlash[data-kind="head"]{background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 58%,rgba(200,20,10,.4) 100%)}
#ashAnnFlash[data-kind="head"]::before{background:radial-gradient(ellipse 60% 40% at 50% 31%,rgba(255,220,210,.4),rgba(220,40,20,.15) 45%,transparent 75%)}
#ashAnnFlash[data-kind="spree"]{background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,rgba(170,70,255,.55) 100%)}
#ashAnnFlash[data-kind="spree"]::before{background:radial-gradient(ellipse 70% 45% at 50% 31%,rgba(255,245,230,.65),rgba(180,90,255,.25) 45%,transparent 75%)}
#ashAnnFlash.on{animation:anFlash .9s ease-out}
#ashAnnFlash.on::before{animation:anWhite .3s ease-out}
@keyframes anSlam{0%{opacity:0;transform:scale(4.2);filter:blur(16px) brightness(3)}25%{opacity:1;transform:scale(.86);filter:drop-shadow(0 0 2px #000) drop-shadow(0 4px 0 #1a0802) drop-shadow(0 0 40px var(--glow)) brightness(2.4)}45%{transform:scale(1.07)}68%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
@keyframes anGhC{0%{opacity:0;transform:translate(-60px,0) scale(3.2)}20%{opacity:.9;transform:translate(-16px,3px) scale(1.04)}30%{opacity:.85;transform:translate(-7px,-1px)}45%{opacity:.5;transform:translate(-3px,0)}100%{opacity:0;transform:none}}
@keyframes anGhM{0%{opacity:0;transform:translate(60px,0) scale(3.2)}20%{opacity:.9;transform:translate(16px,-3px) scale(1.04)}30%{opacity:.85;transform:translate(7px,1px)}45%{opacity:.5;transform:translate(3px,0)}100%{opacity:0;transform:none}}
@keyframes anBand{0%{transform:translateX(-50%) scaleY(0)}100%{transform:translateX(-50%) scaleY(1)}}
@keyframes anSheen{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes anQuake{0%,100%{transform:none}25%{transform:translate(-5px,2px)}75%{transform:translate(5px,-2px)}}
@keyframes anSub{0%{opacity:0;letter-spacing:1em}100%{opacity:1;letter-spacing:.32em}}
@keyframes anStamp{0%{opacity:0;transform:scale(2.2)}100%{opacity:1;transform:scale(1)}}
@keyframes anRing{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(5)}}
@keyframes anRing2{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(7.5)}}
@keyframes anStreak{0%{opacity:0;transform:scaleX(0)}25%{opacity:1}100%{opacity:0;transform:scaleX(1)}}
@keyframes anSpark{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(1.5)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--r)) scale(.3)}}
@keyframes anOut{0%{opacity:1;filter:none;transform:none}100%{opacity:0;filter:blur(8px);transform:translateY(-22px) scale(1.12)}}
@keyframes anFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes anWhite{0%{opacity:1}100%{opacity:0}}
body.touch #ashAnn{top:28%}
/* the painted wordmark in the word's place: as tall as the tier's size allows (the drips and flames hang over its letters), never wider than the screen */
#ashAnn .an-pic img{display:block;height:calc(var(--fs) * 1.7);width:auto;max-width:94vw;object-fit:contain}
#ashAnn .an-pic img.an-word{background:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.75)) drop-shadow(0 0 30px var(--glow))}
#ashAnn .an-pic img.an-gh{position:absolute;left:0;top:0;mix-blend-mode:screen}
#ashAnn .an-pic img.an-gh.c{filter:sepia(1) saturate(9) hue-rotate(-40deg) brightness(.9)}
#ashAnn .an-pic img.an-gh.m{filter:sepia(1) saturate(6) hue-rotate(160deg) brightness(.9)}
#ashAnn.pic .an-col{gap:0;transform:translateY(calc(var(--fs) * -1.2))}
#ashAnn.pic .an-band{top:-8px;bottom:-8px}
body.touch #ashAnn .an-pic img{height:calc(var(--fs) * 1.2)}
body.touch #ashAnn.pic .an-col{transform:translateY(calc(var(--fs) * -1.05))} /* (the column's foot, the headshot's stamp, clear of the crosshair: measured 02.11.) */
/* a newer deploy is out: a bar at the top, a tap reloads (js/fps/ashversion.js) */
#ashNewVer{position:fixed;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);z-index:9000;padding:9px 18px;border:1px solid #ff8a3a;border-radius:6px;background:rgba(26,14,8,.94);color:#ffd2b0;font:600 14px 'Chakra Petch',sans-serif;letter-spacing:.04em;box-shadow:0 0 18px rgba(255,120,40,.45);cursor:pointer;animation:anNewVer 1.6s ease-in-out infinite}
#ashNewVer.party{padding:13px 24px;border:2px solid #ff4a2a;background:rgba(70,10,6,.96);color:#fff0e6;font-size:17px;box-shadow:0 0 30px rgba(255,60,30,.7)} /* (the party on two versions: loud — the user, 03.11.: 'definitiv Warnungen') */
@keyframes anNewVer{50%{box-shadow:0 0 30px rgba(255,120,40,.8)}}
/* the ultimate's cast (js/fps/ashult.js AshUltCast): bars, the class's rim glow; its name in the announcer's slam, in the class's colours */
#ultCine{position:fixed;inset:0;z-index:3;pointer-events:none;display:none;--ug:rgba(255,120,40,.55)}
#ultCine.on{display:block}
#ultCine .b{position:absolute;left:0;right:0;height:8vh;background:#000;transform:translateY(-100%);animation:ucBar 1.6s cubic-bezier(.2,.8,.2,1) both}
#ultCine .b.u{bottom:0;transform:translateY(100%);animation-name:ucBarU}
#ultCine .v{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 72% 66% at 50% 50%,transparent 42%,var(--ug) 100%);animation:ucVig 1.5s ease-out both}
#ultCine[data-cls="warrior"]{--ug:rgba(255,214,120,.6)}#ultCine[data-cls="ranger"]{--ug:rgba(80,170,255,.6)}#ultCine[data-cls="necromancer"]{--ug:rgba(220,70,200,.6)}
@keyframes ucBar{0%{transform:translateY(-100%)}22%,72%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes ucBarU{0%{transform:translateY(100%)}22%,72%{transform:translateY(0)}100%{transform:translateY(100%)}}
@keyframes ucVig{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
#ashAnn[data-kind="ult"]{--fs:clamp(40px,6.6vw,104px)}
#ashAnn[data-kind="ult"][data-cls="warrior"]{--c1:#fffdf0;--c2:#ffe08a;--c3:#d89a1c;--glow:rgba(255,206,110,.9)}
#ashAnn[data-kind="ult"][data-cls="ranger"]{--c1:#f0faff;--c2:#94d6ff;--c3:#2a78e0;--glow:rgba(80,170,255,.9)}
#ashAnn[data-kind="ult"][data-cls="necromancer"]{--c1:#fff0fb;--c2:#ff92dc;--c3:#a8209a;--glow:rgba(225,80,205,.9)}
#ashAnnFlash[data-kind="ult"][data-cls="warrior"]{background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,rgba(255,210,110,.55) 100%)}
#ashAnnFlash[data-kind="ult"][data-cls="ranger"]{background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,rgba(80,170,255,.55) 100%)}
#ashAnnFlash[data-kind="ult"][data-cls="necromancer"]{background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,rgba(220,70,200,.55) 100%)}
#ultCine[data-cls="zealot"]{--ug:rgba(182,124,255,.6)}
#ashAnn[data-kind="ult"][data-cls="zealot"]{--c1:#f8f0ff;--c2:#c9a0ff;--c3:#7a3ae0;--glow:rgba(170,110,255,.9)}
#ashAnnFlash[data-kind="ult"][data-cls="zealot"]{background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,rgba(170,110,255,.55) 100%)}
#fpsHud .ammo .gname{display:none!important} /* (the gun's name under the crosshair away — the ammo is on the fire button: the user, 04.11., 'der Name der Waffe soll weg') */
/* the Zealot's dash: lines rushing round the screen while he is gone (js/fps/ashzealot6.js zj6Rush) */
#zjRush{position:fixed;inset:-10%;z-index:3;pointer-events:none;opacity:0;transition:opacity .22s ease-out;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg 2.6deg,rgba(214,182,255,.42) 2.6deg 3deg,transparent 3deg 5.3deg,rgba(255,240,255,.28) 5.3deg 5.5deg,transparent 5.5deg 9deg);-webkit-mask-image:radial-gradient(ellipse 50% 48% at 50% 50%,transparent 45%,#000 100%);mask-image:radial-gradient(ellipse 50% 48% at 50% 50%,transparent 45%,#000 100%)}
#zjRush.on{opacity:1;transition:opacity .05s;animation:zjRush .12s steps(3) infinite}
@keyframes zjRush{0%{transform:rotate(0) scale(1)}50%{transform:rotate(1.4deg) scale(1.04)}100%{transform:rotate(-1deg) scale(1.02)}}
#zjRush.kn{background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg 2.6deg,rgba(255,214,140,.42) 2.6deg 3deg,transparent 3deg 5.3deg,rgba(255,246,220,.28) 5.3deg 5.5deg,transparent 5.5deg 9deg)}
#zj7Rim{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s;box-shadow:inset 0 0 90px 18px rgba(150,70,255,.55),inset 0 0 26px 4px rgba(220,170,255,.35)} /* (the Zealot's Psi Frenzy: js/fps/ashzealot7.js) */
#gn3Flash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fff 0,#f4f8ff 55%,rgba(230,240,255,.85) 100%)}#gn3Flash.on{animation:gn3Flash .9s ease-out}@keyframes gn3Flash{0%{opacity:0}6%{opacity:.92}30%{opacity:.6}100%{opacity:0}} /* (the Gunner's Flashbang: js/fps/ashgun3.js) */
/* the announcer cheap on a phone (the iPhone 16 Pro died in the Abyss at ~650 MB right after a kill call, 02.11.: its full-screen flash and the rings scaled to 800-1200 px with their glows were their own GPU layers, 18 -> 46 MB): no full-screen flash, the rings small and unglowed, the streaks without their glow */
body.touch #ashAnnFlash{display:none}
body.touch #ashAnn .an-ring{box-shadow:none;animation-name:anRingS}
body.touch #ashAnn .an-ring.r2{animation-name:anRingS2}
body.touch #ashAnn .an-streak{box-shadow:none}
@keyframes anRingS{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(2.2)}}
@keyframes anRingS2{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(3)}}
/* the brightness setting on the menu windows (js/ui/ui.js picSync sets --uib, 0.7-1.3, and body.uib only while it is not 100 %): every window with a close cross, and the game menu */
body.uib :is(#inv,#cmp,#dialogue,#qlog,#skills,#mainmenu,#chron,#gmenu,#help,#icard,#shop,#petp),body.uib > div:has(> .xclose){filter:brightness(var(--uib,1))}
body.uisoft.uib :is(#inv,#cmp,#dialogue,#qlog,#skills,#mainmenu,#chron,#gmenu,#help,#icard,#shop,#petp),body.uisoft.uib > div:has(> .xclose){filter:blur(.35px) brightness(var(--uib,1))}   /* (with the soft interface's own blur: css/game.css body.uisoft) */
/* the skill tester (js/fps/ashskilltest.js): a panel at the right, the classes then the skills in the order they open */
#ashSkillTest{position:fixed;right:12px;top:70px;z-index:58;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 90px);overflow:auto;padding:12px 12px 14px;background:rgba(12,13,15,.9);border:1px solid rgba(212,129,81,.45);border-radius:6px;pointer-events:auto;font:600 13px/1.2 'Chakra Petch',sans-serif;color:#e8dccb}
#ashSkillTest .xclose{position:absolute;right:6px;top:6px}
#ashSkillTest .st-h{letter-spacing:.2em;text-transform:uppercase;color:#d48151;margin:0 30px 10px 2px;font-size:12px}
#ashSkillTest .seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#ashSkillTest .st-sk .opt{flex:1 1 140px;text-align:left;display:flex;gap:8px;align-items:center}
#ashSkillTest .opt i{font-style:normal;min-width:20px;color:#d48151;opacity:.85}
#ashSkillTestOpen{position:fixed;right:12px;top:70px;z-index:58;pointer-events:auto}
#ashSkillTest .opt,#ashSkillTestOpen{appearance:none;cursor:pointer;padding:7px 9px;border-radius:4px;border:1px solid rgba(212,129,81,.35);background:linear-gradient(180deg,#2a2c30,#1a1b1e);color:#e8dccb;font:600 12px/1.15 'Chakra Petch',sans-serif;letter-spacing:.03em}
#ashSkillTest .opt:hover,#ashSkillTestOpen:hover{border-color:#ff8a3a;color:#fff}
#ashSkillTest .opt:active{transform:translateY(1px);background:#3a2a20}
#ashSkillTest .opt.on{border-color:#ff8a3a;box-shadow:0 0 0 1px #ff8a3a inset;color:#fff}