/* =====================================================================
   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)}
#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:auto;top:calc(232px + var(--st));right:calc(18px + var(--sr));font-size:26px}

/* ---------------- 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:radial-gradient(120% 70% at 50% 100%,#6a1c08 0%,#2a0d06 38%,#0b0706 70%) !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:not(.touch) #skillsT{width:792px}
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,body.hudbar #skillsT .barplate,body.hudbar #skillsT .hporb img,body.hudbar #skillsT .pworb img,#minimap,.mm-frame,#questT,#tracker{filter:saturate(.18) brightness(.92) contrast(1.05)}
body.hudbar #skillsT .barplate{filter:saturate(.18) brightness(.92) contrast(1.05) drop-shadow(0 2px 5px rgba(0,0,0,.7))}

/* ---------------- 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 */
body.hudbar:not(.touch) #skillsT .tbtn{border-radius:5px!important}
body.hudbar:not(.touch) #skillsT .tbtn .ic,body.hudbar:not(.touch) #skillsT .tbtn img,body.hudbar:not(.touch) #skillsT .tbtn canvas{border-radius:4px!important}
body.hudbar:not(.touch) #skillsT .tbtn.locked,body.hudbar:not(.touch) #skillsT .ultsock{border-radius:5px!important}
/* 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}

/* ---------------- steel-blue panels (docs/HG-GAPS.md #7): the inventory, the traders, the windows in machined steel with a cold blue cast;
   the items' own colours untouched (their icons and names stay out of the filter) ---------------- */
body.ashzone #inv,body.ashzone #shop,body.ashzone #skp,body.ashzone #qlog,body.ashzone #menu{background-color:#0c1218!important;background-image:linear-gradient(180deg,rgba(60,90,120,.18),rgba(10,16,24,.0) 40%),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,transparent 2px 6px)!important;box-shadow:inset 0 0 0 1px #3c5468,inset 0 0 0 3px #0a0f14,inset 0 0 0 4px #5a7890,0 10px 40px rgba(0,0,0,.7)!important;border-radius:4px}
body.ashzone #inv .plate-title,body.ashzone #shop .plate-title{color:#cfe2f0!important;text-shadow:0 0 8px rgba(80,160,220,.35),0 1px 2px #000!important;letter-spacing:.14em}
body.ashzone #inv .cell,body.ashzone #shop .cell{background:radial-gradient(circle at 50% 40%,#16222e,#080c12 75%)!important;box-shadow:inset 0 0 0 1px #2c3e50,inset 0 0 8px rgba(0,0,0,.8)!important}
body.ashzone #shop .shbg,body.ashzone #shop .shart{display:none!important}
body.ashzone #shop::before{background:linear-gradient(180deg,rgba(60,90,120,.16),rgba(8,12,18,.9))!important}
#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(200px + var(--st,0px));right:calc(12px + var(--sr,0px))}
#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 over it */
body.ashzone:not(.touch) #zone{top:calc(4px + var(--st,0px))!important}
body.ashzone:not(.touch) #minimapWrap{top:calc(60px + var(--st,0px))!important}
body.ashzone:not(.touch) #side{top:calc(60px + var(--st,0px))!important}
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) + 186px);bottom:11px;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:none}
#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}