/* HUD feel (js/hudfeel.js, 2026-10-14): DPS plaque, Skill Up cards, unspent-point badges.
   Small, low and quiet: hairline brass on soot, colour only for the information (Soot & Brass, gdtheme.css).
   Loaded before gdtheme.css; the shared hover glow token lives there. */

/* ------------------------------------------------------------ DPS plaque: on the action bar, left of EVADE */
#hfDps{position:fixed;left:222px;bottom:16px;z-index:7;display:none;pointer-events:auto;box-sizing:border-box;width:112px;padding:4px 8px 5px;
  font:max(11px,var(--qo-small,11px))/1.15 Georgia,serif;color:#d3ccbb;text-shadow:0 1px 0 #000;
  background:linear-gradient(180deg,rgba(24,22,19,.9),rgba(10,9,8,.92));border:1px solid rgba(168,148,106,.38);
  box-shadow:0 0 0 1px #000,0 3px 10px rgba(0,0,0,.6)}
#hfDps.on{display:block}
#hfDps .hfDpsRow{display:flex;align-items:baseline;gap:5px}
#hfDps .hfDpsNow{font:600 max(15px,var(--qo-small,12px))/1 Cinzel,Georgia,serif;color:#e6d9b6;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#hfDps .hfDpsLbl{letter-spacing:.2em;color:#a8946a}
#hfDps .hfDpsAvg{margin-top:2px;color:#8e8571;letter-spacing:.06em;font-variant-numeric:tabular-nums}
#hfDps .hfDpsAvg b{font-weight:normal;color:#c9bf9f}
#hfDps canvas{display:block;width:96px;height:20px;margin-top:3px;border-top:1px solid rgba(168,148,106,.22)}
html.qoTouch #hfDps{left:calc(12px + var(--qoSL,0px));bottom:auto;top:96px}

/* ------------------------------------------------------------ Skill Up cards: right side, above the mana globe */
#hfCards{position:fixed;right:18px;bottom:236px;z-index:8;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.hfCard{--hf-cls:#d8c592;display:flex;align-items:center;gap:10px;min-width:206px;max-width:260px;box-sizing:border-box;padding:7px 14px 7px 8px;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,9,8,.6),rgba(22,20,17,.94) 30%);border:1px solid rgba(168,148,106,.42);border-right:2px solid var(--hf-cls);
  box-shadow:0 0 0 1px #000,0 6px 16px rgba(0,0,0,.6);color:#d3ccbb;animation:hfCardIn .32s cubic-bezier(.2,.9,.25,1.15) both}
.hfCard.out{animation:hfCardOut .4s ease-in both}
.hfCard .hfIc{position:relative;flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#1b2125,#090c0e);border:1px solid rgba(168,148,106,.6);box-shadow:inset 0 0 10px #000;font-size:22px;line-height:1}
.hfCard .hfIc .skImg{width:38px;height:38px;display:block}
.hfCard .hfGl{position:relative;z-index:1;display:flex}
/* the icon bursts in the class colour: a ring that blooms out and fades, plus a brief inner flare */
.hfCard .hfBurst{position:absolute;inset:-2px;z-index:2;pointer-events:none;border:2px solid var(--hf-cls);border-radius:50%;opacity:0;
  box-shadow:0 0 12px var(--hf-cls),inset 0 0 10px var(--hf-cls);animation:hfBurst .75s .08s ease-out both}
.hfCard .hfIc::after{content:'';position:absolute;inset:0;z-index:2;background:radial-gradient(circle,var(--hf-cls),transparent 70%);opacity:0;animation:hfFlare .6s .05s ease-out both;mix-blend-mode:screen}
.hfCard .hfHd{font:600 max(11px,var(--qo-small,11px))/1 Cinzel,Georgia,serif;letter-spacing:.24em;color:var(--hf-cls);text-shadow:0 1px 0 #000}
.hfCard .hfNm{margin-top:3px;font:max(14px,var(--qo-small,12px))/1.15 Georgia,serif;color:#e6d9b6}
.hfCard .hfRk{margin-top:2px;font:max(11px,var(--qo-small,11px))/1.2 Georgia,serif;letter-spacing:.14em;color:#8e8571}
.hfCard .hfRk em{font-style:normal;color:var(--hf-cls);letter-spacing:.2em;text-shadow:0 0 8px var(--hf-cls)}
.hfCard.tier{border-color:rgba(216,197,146,.6);padding-top:9px;padding-bottom:9px}
.hfCard.tier .hfBurst{animation:hfBurst .75s .08s ease-out both,hfBurst .9s .55s ease-out both}
@keyframes hfCardIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes hfCardOut{to{opacity:0;transform:translateX(40px)}}
@keyframes hfBurst{0%{opacity:.95;transform:scale(.55)}100%{opacity:0;transform:scale(1.75)}}
@keyframes hfFlare{0%{opacity:.9}100%{opacity:0}}
html.qoTouch #hfCards{right:auto;left:calc(12px + var(--qoSL,0px));bottom:auto;top:150px;align-items:flex-start}
html.qoTouch .hfCard{animation-name:hfCardInL}
@keyframes hfCardInL{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ unspent points: a small red count, pulsing
   js/hudfeel.js writes data-hfn only when the count changes (#ptsBadge, the touch SKILLS / HERO buttons) */
:is(#ptsBadge,#qoTUI .tb)[data-hfn]::after{content:attr(data-hfn);position:absolute;top:-8px;right:-8px;z-index:3;min-width:18px;height:18px;box-sizing:border-box;padding:0 4px;border-radius:9px;
  font:700 11px/16px Georgia,serif;color:#fff4e8;text-align:center;text-shadow:0 1px 0 #3a0000;letter-spacing:0;pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#e0473c,#9b1912 70%);border:1px solid #2a0705;box-shadow:0 0 0 1px rgba(255,200,170,.25),0 1px 3px #000}
/* the pulse is a glow behind the count fading in and out: opacity only, so the compositor runs it without repaints */
:is(#ptsBadge,#qoTUI .tb)[data-hfn]::before{content:'';position:absolute;top:-11px;right:-11px;width:24px;height:24px;border-radius:12px;z-index:2;pointer-events:none;
  box-shadow:0 0 10px 3px rgba(224,64,48,.8);opacity:0;animation:hfBadgePulse 1.8s ease-in-out infinite}
@keyframes hfBadgePulse{50%{opacity:1}}
/* the touch buttons clip their overflow: the count sits inside the corner there */
#qoTUI .tb[data-hfn]::after{top:3px;right:3px}
#qoTUI .tb[data-hfn]::before{top:0;right:0}
/* the slim menu dock (touch.js .db, 2026-10-15 HUD skin) keeps ::before as its taller touch target and ::after as the
   open-window underline: the count takes ::after only (html raises it over .db.on::after), no pulse ring */
html #qoTUI .db[data-hfn]::after{content:attr(data-hfn);position:absolute;top:-3px;right:2px;left:auto;bottom:auto;z-index:3;min-width:16px;height:16px;box-sizing:border-box;padding:0 4px;border-radius:8px;
  font:700 10px/14px Georgia,serif;color:#fff4e8;text-align:center;text-shadow:0 1px 0 #3a0000;letter-spacing:0;pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#e0473c,#9b1912 70%);border:1px solid #2a0705;box-shadow:0 0 6px 1px rgba(224,64,48,.7),0 1px 3px #000}

@media(prefers-reduced-motion:reduce){
  .hfCard,.hfCard.out{animation-duration:.01s}
  .hfCard .hfBurst,.hfCard .hfIc::after,:is(#ptsBadge,#qoTUI .tb)[data-hfn]::before{animation:none;opacity:.6}
}