/* ===========================================================================
   HOLLOW VEIL — in-raid HUD + raid-flow screens.

   Owned by: ui-hud.  Everything here is namespaced `#hv-…` / `.hv-…` and is
   built on the tokens and primitives in css/ui.css (--v-*, .v-panel, .v-btn,
   .v-bar, .v-tag, .v-toast, body.flare). Nothing in this file redefines the
   palette or a primitive.

   PERFORMANCE CONTRACT: every rule that a 60 fps update touches must be
   drivable by a CSS custom property or an opacity/transform. No layout-
   affecting property is written inside the frame loop.
   =========================================================================== */

/* ------------------------------------------------------------------ root */
#hv-root {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--f-mono); color: var(--v-text);
  --hv-pad: clamp(12px, 1.6vw, 24px);
  --hv-hp: var(--v-health);
  --hv-sh: var(--v-shield);
  --hv-edge-col: var(--v-hollow);
  --hv-edge-a: 0;
  --hv-low: 0;
  contain: layout style;
}
#hv-root[hidden] { display: none; }

#hv-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* low-health vignette — one static gradient, only opacity is animated */
#hv-vignette {
  position: absolute; inset: 0; opacity: 0; will-change: opacity;
  background: radial-gradient(ellipse at 50% 52%,
    rgba(0,0,0,0) 34%, rgba(140,0,20,.34) 72%, rgba(180,0,26,.78) 100%);
}
/* screen-edge pulse in the colour of whatever is about to be lost */
#hv-edge {
  position: absolute; inset: 0; opacity: var(--hv-edge-a); will-change: opacity;
  background:
    linear-gradient(90deg,  var(--hv-edge-col) 0, transparent 11%),
    linear-gradient(270deg, var(--hv-edge-col) 0, transparent 11%),
    linear-gradient(180deg, var(--hv-edge-col) 0, transparent 9%),
    linear-gradient(0deg,   var(--hv-edge-col) 0, transparent 9%);
}

/* --------------------------------------------------------------- layout */
.hv-col { position: absolute; display: flex; flex-direction: column; gap: 8px; }
#hv-tl { top: var(--hv-pad); left: var(--hv-pad); width: min(268px, 24vw); }
#hv-tr { top: var(--hv-pad); right: var(--hv-pad); width: min(286px, 26vw); align-items: flex-end; }
#hv-bl { bottom: var(--hv-pad); left: var(--hv-pad); width: min(320px, 30vw); }
#hv-br { bottom: var(--hv-pad); right: var(--hv-pad); width: min(300px, 28vw); align-items: flex-end; }
#hv-tc {
  top: calc(var(--hv-pad) + 52px); left: 50%; transform: translateX(-50%);
  width: min(560px, 70vw); align-items: center;
}
#hv-bc {
  bottom: calc(var(--hv-pad) + 4px); left: 50%; transform: translateX(-50%);
  /* 74vw ran the narrative line underneath the weapon panel (right) and the
     vitals block (left) on anything narrower than ~1400px. The side columns
     are ~290px each; cap the centre so all three always coexist. */
  width: clamp(320px, 100vw - 660px, 620px); align-items: center;
}

/* ----------------------------------------------------------- primitives */
.hv-panel {
  background: linear-gradient(180deg, rgba(200,220,255,.028), rgba(0,0,0,.34)), rgba(9,12,17,.72);
  border: var(--bord);
  border-left: 2px solid var(--v-line-hot);
  padding: 7px 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  width: 100%;
}
.hv-panel--r {
  border-left: var(--bord); border-right: 2px solid var(--v-line-hot);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.hv-lab {
  font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase;
  color: var(--v-text-faint); white-space: nowrap;
}
.hv-num { font-variant-numeric: tabular-nums; color: var(--v-text-hot); letter-spacing: .04em; }
.hv-row { display: flex; align-items: baseline; gap: 8px; }
.hv-row--sb { justify-content: space-between; }
.hv-hidden { display: none !important; }
.hv-sep { flex: 1; height: 1px; background: var(--v-line); }

/* --------------------------------------------------- segmented meters
   One element, one custom property. The repeating mask cuts the track AND the
   fill into segments, so a segment is either lit or dark — no partial slivers
   to misread under fire. */
.hv-seg {
  position: relative; height: 9px; width: 100%;
  background: rgba(255,255,255,.055);
  --n: 10; --t: 1;
  -webkit-mask-image: repeating-linear-gradient(90deg,
    #000 0 calc(100% / var(--n) - 3px), transparent calc(100% / var(--n) - 3px) calc(100% / var(--n)));
  mask-image: repeating-linear-gradient(90deg,
    #000 0 calc(100% / var(--n) - 3px), transparent calc(100% / var(--n) - 3px) calc(100% / var(--n)));
}
.hv-seg > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: calc(var(--t) * 100%); background: var(--col, var(--v-text));
  box-shadow: 0 0 10px -2px var(--col, var(--v-text));
}
/* the ghost trails the real value: you see how much you just lost */
.hv-seg > b {
  position: absolute; top: 0; bottom: 0; display: block;
  left: calc(var(--t, 1) * 100%);
  width: max(0%, calc((var(--g, 1) - var(--t, 1)) * 100%));
  background: rgba(255,90,110,.55);
}
.hv-seg--thin { height: 6px; }

/* shield regen delay: a pip that drains, so the wait is legible */
.hv-pip { height: 2px; width: 100%; background: rgba(74,168,255,.14); margin-top: 2px; }
.hv-pip > i { display: block; height: 100%; width: calc(var(--t) * 100%); background: var(--v-shield); opacity: .8; }

/* ---------------------------------------------------------------- vitals */
#hv-vitals { display: flex; flex-direction: column; gap: 5px; }
#hv-vitals .hv-vlab { display: flex; justify-content: space-between; align-items: baseline; }
#hv-hp-num { font-size: var(--t-xl); line-height: 1; }
#hv-sh-num { font-size: var(--t-md); color: var(--v-shield); }
#hv-hp-bar { --col: var(--hv-hp); }
#hv-sh-bar { --col: var(--hv-sh); height: 6px; }
#hv-vitals.crit #hv-hp-num { color: var(--v-bad); }
#hv-vitals.crit #hv-hp-bar { --col: var(--v-bad); }

#hv-stam { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .2s var(--ease); }
#hv-stam.on { opacity: 1; }
#hv-stam .hv-seg { --col: var(--v-stam); height: 4px; }

#hv-status { display: flex; flex-wrap: wrap; gap: 4px; }
#hv-status .v-tag { font-size: 9px; padding: 1px 5px; letter-spacing: .12em; }
.hv-t-bad { color: var(--v-bad); }
.hv-t-warn { color: var(--v-warn); }
.hv-t-echo { color: var(--v-echo); }
.hv-t-ok { color: var(--v-ok); }

/* ---------------------------------------------------------------- weapon */
#hv-weapon { text-align: right; }
#hv-w-name { font-size: var(--t-md); color: var(--v-text-hot); letter-spacing: .1em; }
#hv-w-name.rewritten { color: var(--v-hollow-glow); text-shadow: 0 0 14px var(--v-hollow-dim); }
#hv-w-rewrite { color: var(--v-hollow); border-color: currentColor; margin-left: 6px; }
#hv-w-stats { display: flex; gap: 10px; justify-content: flex-end; margin-top: 3px; font-size: var(--t-xs); }
#hv-w-stats span { color: var(--v-text-faint); }
#hv-w-stats span.up { color: var(--v-ok); }
#hv-w-stats span.down { color: var(--v-bad); }
.hv-ammo { display: flex; align-items: baseline; gap: 4px; justify-content: flex-end; margin-top: 4px; }
#hv-w-mag { font-size: var(--t-2xl); line-height: .92; }
#hv-w-mag.dry { color: var(--v-bad); }
#hv-w-mag.low { color: var(--v-warn); }
.hv-slash { color: var(--v-text-faint); font-size: var(--t-lg); }
#hv-w-res { font-size: var(--t-lg); color: var(--v-text-dim); }
#hv-w-mode { margin-left: 8px; color: var(--v-text-dim); align-self: center; }
#hv-w-rounds { display: flex; gap: 3px; justify-content: flex-end; margin-top: 5px; height: 12px; }
#hv-w-rounds > i {
  width: 4px; height: 12px; background: var(--v-star); display: block;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
#hv-w-rounds > i.spent { background: var(--v-line-hot); }
#hv-w-rounds > i.off { display: none; }
#hv-w-heat { --col: var(--v-star); margin-top: 6px; }
#hv-w-heat.hot { --col: var(--v-bad); }
#hv-util { display: flex; gap: 10px; justify-content: flex-end; margin-top: 5px; font-size: var(--t-xs); }
#hv-util .v-kbd { height: 15px; min-width: 15px; font-size: 9px; }

/* ------------------------------------------------------------- resonance */
#hv-cores { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.hv-core {
  position: relative;
  display: grid; grid-template-columns: 46px 1fr; gap: 9px; align-items: center;
  --core: var(--v-hollow);
  border-right: 2px solid var(--core);
  background: linear-gradient(270deg, color-mix(in srgb, var(--core) 12%, transparent), transparent 62%),
              rgba(9,12,17,.72);
  border-top: var(--bord); border-bottom: var(--bord);
  padding: 7px 10px 7px 8px;
}
.hv-core.expiring { animation: hv-corepulse .62s infinite steps(2); }
.hv-core.expiring .hv-ring { filter: saturate(.12) brightness(1.35); }
@keyframes hv-corepulse { 0%,100% { background-color: rgba(9,12,17,.72); } 50% { background-color: rgba(40,14,14,.82); } }
.hv-ring { width: 46px; height: 46px; display: block; overflow: visible; }
.hv-ring .trk { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 3; }
.hv-ring .fil {
  fill: none; stroke: var(--core); stroke-width: 3; stroke-linecap: butt;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  stroke-dasharray: var(--circ) var(--circ); stroke-dashoffset: var(--off);
  filter: drop-shadow(0 0 5px var(--core));
}
.hv-core-t {
  fill: var(--v-text-hot); font-family: var(--f-mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hv-core.expiring .hv-core-t { fill: var(--v-bad); }
.hv-core-name { font-size: var(--t-xs); letter-spacing: .16em; color: var(--core); }
.hv-core-ab { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.hv-core-ab .n { font-size: var(--t-xs); color: var(--v-text); }
.hv-core-ab .cd { font-size: var(--t-xs); color: var(--v-text-faint); }
.hv-core-ab .bar { flex: 1; height: 2px; background: rgba(255,255,255,.08); }
.hv-core-ab .bar > b { display: block; height: 100%; width: calc(var(--t) * 100%); background: var(--core); }
.hv-core-draw { font-size: 10px; color: var(--v-text-dim); line-height: 1.28; margin-top: 3px; }
.hv-core-lose { font-size: 10px; color: var(--v-bad); letter-spacing: .1em; margin-top: 2px; }

#hv-corrupt {
  border-right: 2px solid var(--v-bad);
  background: linear-gradient(270deg, rgba(244,63,94,.16), transparent 70%), rgba(20,7,10,.82);
  border-top: 1px solid #4a1a25; border-bottom: 1px solid #4a1a25;
  padding: 6px 10px; text-align: right;
}
#hv-corrupt .v { font-size: var(--t-lg); color: var(--v-bad); animation: v-pulse 1.1s infinite; }
#hv-corrupt .l { font-size: 10px; color: var(--v-text-dim); letter-spacing: .16em; }
#hv-corrupt .p { font-size: 10px; color: var(--v-text-faint); margin-top: 2px; }

/* ---------------------------------------------------------------- anchor */
#hv-anchorpanel { --col: var(--v-anchor); border-right-color: var(--col); }
#hv-ap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#hv-ap-name { color: var(--v-anchor); letter-spacing: .14em; font-size: var(--t-sm); }
#hv-ap-state { color: var(--col); }
#hv-ap-meta { display: flex; gap: 10px; justify-content: flex-end; font-size: var(--t-xs); color: var(--v-text-dim); margin-top: 3px; }
#hv-ap-meta b { color: var(--v-text-hot); font-weight: 400; }
.hv-alert {
  margin-top: 5px; padding: 3px 7px; font-size: 10px; letter-spacing: .14em;
  border-left: 2px solid currentColor; text-align: left;
}
#hv-ap-contest { color: var(--v-bad); background: rgba(244,63,94,.12); animation: v-pulse .8s infinite; }
#hv-ap-sabotage { color: var(--v-hollow-glow); background: rgba(139,92,255,.14); animation: v-pulse .8s infinite; }
#hv-ap-lift { color: var(--v-anchor); background: rgba(99,232,255,.12); }

/* ------------------------------------------------------------------ echo */
#hv-echo {
  --col: var(--v-echo); border-left-color: var(--col);
  background: linear-gradient(90deg, rgba(201,164,255,.12), transparent 66%), rgba(9,12,17,.74);
}
#hv-echo .hd { color: var(--v-echo); font-size: var(--t-xs); letter-spacing: .24em; display: flex; gap: 8px; align-items: baseline; }
#hv-echo .hd .t { color: var(--v-text-hot); margin-left: auto; }
#hv-echo .ln { font-size: 10px; color: var(--v-text-dim); margin-top: 3px; display: flex; gap: 6px; }
#hv-echo .ln b { color: var(--v-text); font-weight: 400; }
#hv-echo .bc { margin-top: 4px; }
#hv-echo .bc .hv-seg { --col: var(--v-echo); --n: 20; height: 4px; }
#hv-echo .bcl { font-size: 10px; color: var(--v-echo); letter-spacing: .12em; }
#hv-echo.imminent .bcl { color: var(--v-bad); animation: v-pulse .5s infinite; }

/* ----------------------------------------------------------------- flare */
#hv-flarepanel { --col: var(--v-flare); border-right-color: var(--col); }
#hv-flarepanel .hd { color: var(--v-flare); font-size: var(--t-xs); letter-spacing: .22em; }
#hv-flarepanel .big { font-size: var(--t-xl); color: var(--v-star-bright); line-height: 1; }
#hv-flarepanel.warn { animation: v-pulse .9s infinite; }
#hv-flarepanel.warn.urgent { animation: v-pulse .34s infinite; }
#hv-flare-supp { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; margin-top: 4px; }
#hv-flare-supp span {
  font-size: 9px; letter-spacing: .1em; padding: 1px 5px; color: var(--v-text-faint);
  border: 1px solid var(--v-line-hot); text-decoration: line-through;
}
#hv-exposed {
  margin-top: 5px; padding: 4px 8px; text-align: right;
  color: var(--v-star); border: 1px solid var(--v-star-dim);
  background: rgba(255,106,58,.12); animation: v-pulse .7s infinite;
}
#hv-exposed .v { font-size: var(--t-lg); }
#hv-exposed .l { font-size: 9px; letter-spacing: .18em; display: block; color: var(--v-flare); }

/* ---------------------------------------------------------- swarm/threat */
#hv-swarm .hd { display: flex; justify-content: space-between; align-items: baseline; }
#hv-swarm .tier { color: var(--v-hollow-glow); font-size: var(--t-sm); letter-spacing: .16em; }
#hv-swarm .hv-seg { --col: var(--v-hollow); --n: 5; height: 7px; margin-top: 3px; }
#hv-swarm.t3 .hv-seg { --col: var(--v-hollow-glow); }
#hv-swarm.t4 .hv-seg { --col: var(--v-bad); }
#hv-traits { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
#hv-traits span { font-size: 9px; letter-spacing: .1em; padding: 1px 5px; border: 1px solid currentColor; }

/* ------------------------------------------------------------------ squad */
#hv-squad { display: flex; flex-direction: column; gap: 4px; }
.hv-mate {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline;
  background: rgba(9,12,17,.66); border-left: 2px solid var(--v-info); padding: 4px 8px;
}
.hv-mate .nm { font-size: var(--t-xs); letter-spacing: .1em; color: var(--v-text); }
.hv-mate .ds { font-size: 10px; color: var(--v-text-faint); }
.hv-mate .bars { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.hv-mate .hv-seg { height: 4px; --n: 8; }
.hv-mate .hp { --col: var(--v-health); }
.hv-mate .sh { --col: var(--v-shield); }
.hv-mate.downed { border-left-color: var(--v-bad); }
.hv-mate.downed .nm { color: var(--v-bad); animation: v-pulse .8s infinite; }
.hv-mate.dead { opacity: .42; border-left-color: var(--v-text-faint); }

/* ------------------------------------------------------- timer / banners */
#hv-timer { text-align: center; padding: 5px 14px 6px; }
#hv-timer .v { font-size: var(--t-xl); line-height: 1; letter-spacing: .06em; }
#hv-timer .l { font-size: 9px; letter-spacing: .3em; color: var(--v-text-faint); display: block; }
#hv-timer .hv-seg { --col: var(--v-text-dim); --n: 30; height: 3px; margin-top: 4px; }
#hv-timer.warn .v { color: var(--v-warn); }
#hv-timer.warn .hv-seg { --col: var(--v-warn); }
#hv-timer.collapse { border-color: var(--v-bad); animation: v-pulse .7s infinite; }
#hv-timer.collapse .v { color: var(--v-bad); }
#hv-timer.collapse .l { color: var(--v-bad); }
#hv-timer.collapse .hv-seg { --col: var(--v-bad); }

#hv-banners { display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; }
.hv-banner {
  --col: var(--v-star);
  width: 100%; padding: 6px 14px; text-align: center;
  background: linear-gradient(90deg, transparent, rgba(9,12,17,.92) 12%, rgba(9,12,17,.92) 88%, transparent);
  border-top: 1px solid var(--col); border-bottom: 1px solid var(--col);
  font-size: var(--t-sm); letter-spacing: .2em; color: var(--col);
  animation: v-rise .24s var(--ease-snap) both;
}
.hv-banner .sub { display: block; font-size: 10px; letter-spacing: .14em; color: var(--v-text-dim); margin-top: 2px; }
.hv-banner.out { opacity: 0; transition: opacity .35s var(--ease-in); }

#hv-evolve {
  --col: var(--v-hollow-glow);
  width: 100%; padding: 9px 16px; text-align: center;
  background: linear-gradient(180deg, rgba(35,16,58,.94), rgba(9,12,17,.94));
  border: 1px solid var(--v-hollow-dim); border-left: 3px solid var(--v-hollow);
  animation: v-rise .3s var(--ease-snap) both;
}
#hv-evolve .k { font-size: 10px; letter-spacing: .36em; color: var(--v-hollow); }
#hv-evolve .n { font-size: var(--t-lg); letter-spacing: .16em; color: var(--col, var(--v-hollow-glow)); }
#hv-evolve .r { font-size: 10px; letter-spacing: .12em; color: var(--v-text-dim); margin-top: 2px; }
#hv-evolve .c { font-size: var(--t-xs); letter-spacing: .12em; color: var(--v-ok); margin-top: 4px; }
#hv-evolve .c b { color: var(--v-text-hot); font-weight: 400; }
#hv-evolve.out { opacity: 0; transition: opacity .5s var(--ease-in); }

/* ------------------------------------------------------------------ feeds */
#hv-killfeed { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.hv-kill {
  display: flex; gap: 7px; align-items: baseline; font-size: var(--t-xs);
  background: rgba(9,12,17,.7); padding: 3px 8px; letter-spacing: .06em;
  border-right: 2px solid var(--v-line-hot);
}
.hv-kill .a { color: var(--v-text-hot); }
.hv-kill .w { color: var(--v-star); }
.hv-kill .b { color: var(--v-text-dim); }
.hv-kill.you { border-right-color: var(--v-star); background: rgba(40,18,8,.8); }
.hv-kill.hollow { border-right-color: var(--v-hollow); }
.hv-kill.victim-you { border-right-color: var(--v-bad); }

#hv-lootfeed { display: flex; flex-direction: column; gap: 2px; }
.hv-loot { font-size: var(--t-xs); letter-spacing: .06em; display: flex; gap: 6px; }
.hv-loot .q { color: var(--v-text-faint); }

#hv-narrative {
  font-size: var(--t-sm); letter-spacing: .14em; color: var(--v-text-dim);
  text-align: center; max-width: 100%; text-shadow: 0 0 18px #000;
  animation: v-rise .5s var(--ease-snap) both;
}
#hv-narrative.out { opacity: 0; transition: opacity 1s var(--ease-in); }

/* ------------------------------------------------------- interact/downed */
/* aligned with the canvas progress arc drawn at 62% viewport height */
#hv-interact.fail { border-color: var(--v-bad); }
#hv-interact.fail .verb { color: var(--v-bad); }
#hv-interact {
  position: absolute; top: calc(62% + 40px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px; padding: 5px 12px; white-space: nowrap;
  background: rgba(9,12,17,.76); border: var(--bord);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
#hv-interact .verb { font-size: var(--t-sm); letter-spacing: .18em; color: var(--v-text-hot); }
#hv-interact .obj { font-size: var(--t-sm); letter-spacing: .1em; color: var(--v-star-bright); }

#hv-downed {
  text-align: center; padding: 8px 18px;
  border-top: 1px solid var(--v-bad); border-bottom: 1px solid var(--v-bad);
  background: linear-gradient(90deg, transparent, rgba(28,6,12,.92) 14%, rgba(28,6,12,.92) 86%, transparent);
}
#hv-downed .t { font-size: var(--t-lg); letter-spacing: .34em; color: var(--v-bad); }
#hv-downed .s { font-size: var(--t-xs); letter-spacing: .16em; color: var(--v-text-dim); margin-top: 3px; }
#hv-downed.reviving .t { color: var(--v-ok); }

/* --------------------------------------------------------------- netgraph */
#hv-netgraph {
  position: absolute; top: var(--hv-pad); left: 50%; transform: translateX(-50%);
  background: rgba(5,7,10,.9); border: var(--bord); padding: 6px 10px;
  font-size: 10px; color: var(--v-text-dim); letter-spacing: .08em;
  display: grid; grid-template-columns: repeat(4, auto); gap: 2px 14px;
}
#hv-netgraph b { color: var(--v-text-hot); font-weight: 400; }
#hv-netgraph .bad { color: var(--v-bad); }
#hv-netgraph .warn { color: var(--v-warn); }

/* ---------------------------------------------------------------- toasts */
/* left of centre, clear of the banner stack above and the vitals below */
#hv-toasts {
  position: absolute; top: 32%; left: var(--hv-pad);
  width: min(340px, 28vw); display: flex; flex-direction: column; gap: 5px; align-items: stretch;
}

/* ============================================================ FLARE DEGRADE
   Degrade the chrome, never the numbers. Panels desaturate, borders rot,
   labels split — the digits keep full contrast. */
body.flare #hv-root .hv-panel,
body.flare #hv-root .hv-core,
body.flare #hv-root .hv-mate {
  filter: saturate(.42) contrast(1.08);
  border-color: #4a2c18;
}
body.flare #hv-root .hv-lab,
body.flare #hv-root .hv-core-draw { color: #8a6a4c; }
body.flare #hv-root .hv-num,
body.flare #hv-root #hv-w-mag,
body.flare #hv-root #hv-timer .v {
  text-shadow: 1.2px 0 rgba(255,40,80,.62), -1.2px 0 rgba(0,220,255,.52);
}
body.flare #hv-root .hv-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,150,60,.06) 0 1px, transparent 1px 3px);
}
body.flare #hv-root .hv-panel { position: relative; }
#hv-root.degraded #hv-tl, #hv-root.degraded #hv-bl { animation: hv-jitL 2.7s infinite steps(3); }
#hv-root.degraded #hv-tr, #hv-root.degraded #hv-br { animation: hv-jitR 3.1s infinite steps(3); }
@keyframes hv-jitL { 0%,88%,100% { transform: none; } 90% { transform: translateX(-2px); } 94% { transform: translateX(1px); } }
@keyframes hv-jitR { 0%,84%,100% { transform: none; } 87% { transform: translateX(2px); } 92% { transform: translateX(-1px); } }
#hv-root.restored #hv-tl, #hv-root.restored #hv-tr,
#hv-root.restored #hv-bl, #hv-root.restored #hv-br { animation: v-flicker .9s 1 steps(1); }

/* ============================================================ RAID SCREENS */
#hv-screens {
  position: absolute; inset: 0; display: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(20,12,10,.86), rgba(5,7,10,.97) 70%);
  font-family: var(--f-mono); overflow: hidden;
}
#hv-screens.on { display: grid; place-items: center; }
.hv-scr { display: none; width: min(920px, 92vw); max-height: 92vh; overflow: auto; }
.hv-scr.on { display: block; animation: v-rise .38s var(--ease-snap) both; }
.hv-scr-hd {
  display: flex; align-items: baseline; gap: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--v-line-hot); margin-bottom: 14px;
}
.hv-scr-hd .big { font-size: var(--t-2xl); letter-spacing: .18em; line-height: 1; }
.hv-scr-hd .sub { font-size: var(--t-xs); letter-spacing: .28em; color: var(--v-text-faint); }
.hv-scr-hd .rt { margin-left: auto; font-size: var(--t-xs); letter-spacing: .2em; color: var(--v-text-dim); }
.hv-scr-body { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.hv-scr-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.hv-scr-foot .v-btn { pointer-events: auto; }

.hv-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: var(--t-sm); }
.hv-kv dt { color: var(--v-text-faint); font-size: var(--t-xs); letter-spacing: .18em; }
.hv-kv dd { margin: 0; color: var(--v-text-hot); font-variant-numeric: tabular-nums; }

#hv-death .hv-scr-hd .big { color: var(--v-bad); }
#hv-death-by {
  padding: 12px 16px; border-left: 2px solid var(--v-bad); background: rgba(30,8,14,.6); margin-bottom: 14px;
}
#hv-death-by .who { font-size: var(--t-xl); letter-spacing: .12em; color: var(--v-text-hot); }
#hv-death-by .how { font-size: var(--t-sm); color: var(--v-text-dim); margin-top: 4px; letter-spacing: .08em; }
#hv-death-map { display: block; width: 100%; height: 210px; border: var(--bord); background: rgba(5,7,10,.7); }
#hv-death-echo { font-size: var(--t-xs); letter-spacing: .14em; color: var(--v-echo); margin-top: 6px; }
#hv-death-cd { font-size: var(--t-xs); letter-spacing: .2em; color: var(--v-text-faint); }

#hv-extract .hv-scr-hd .big { color: var(--v-anchor); }
#hv-ex-best {
  padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid var(--v-line-hot); border-left: 3px solid var(--r-veiled);
  background: linear-gradient(90deg, rgba(255,176,58,.09), transparent 60%);
}
#hv-ex-best .l { font-size: 9px; letter-spacing: .32em; color: var(--v-text-faint); }
#hv-ex-best .n { font-size: var(--t-xl); letter-spacing: .1em; }
#hv-ex-best .v { font-size: var(--t-sm); color: var(--v-text-dim); }
.hv-items { display: flex; flex-direction: column; gap: 1px; max-height: 46vh; overflow: auto; }
.hv-item {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 4px 8px; background: rgba(255,255,255,.014); font-size: var(--t-sm);
  animation: v-rise .3s var(--ease-snap) both;
}
.hv-item .sw { width: 6px; height: 6px; background: currentColor; }
.hv-item .q { color: var(--v-text-faint); font-size: var(--t-xs); }
.hv-item .val { color: var(--v-text-hot); font-variant-numeric: tabular-nums; }
.hv-item.lost { opacity: .5; text-decoration: line-through; }
#hv-ex-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--v-line-hot); }
#hv-ex-total .v { font-size: var(--t-2xl); color: var(--r-veiled); line-height: 1; }
#hv-ex-cores { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.hv-corechip {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  border-left: 2px solid var(--core, var(--v-hollow)); background: rgba(255,255,255,.02);
  font-size: var(--t-xs); letter-spacing: .12em; color: var(--core, var(--v-hollow));
}
#hv-xp { margin-top: 14px; }
#hv-xp .row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-xs); letter-spacing: .16em; }
#hv-xp .lvl { font-size: var(--t-xl); color: var(--v-star-bright); }
#hv-xp-bar { height: 10px; background: rgba(255,255,255,.06); margin-top: 5px; position: relative; overflow: hidden; }
#hv-xp-bar > i { display: block; height: 100%; width: calc(var(--t) * 100%); background: linear-gradient(90deg, var(--v-star-dim), var(--v-star)); box-shadow: 0 0 14px -2px var(--v-star); }
#hv-xp-bar > b { position: absolute; inset: 0 auto 0 0; width: calc(var(--g) * 100%); background: rgba(255,255,255,.1); }
#hv-xp-gain { font-size: var(--t-lg); color: var(--v-star); }

#hv-results table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
#hv-results th {
  text-align: left; font-size: 9px; letter-spacing: .24em; color: var(--v-text-faint);
  font-weight: 400; padding: 0 8px 6px; border-bottom: 1px solid var(--v-line-hot);
}
#hv-results td { padding: 6px 8px; border-bottom: 1px solid rgba(30,40,54,.5); font-variant-numeric: tabular-nums; }
#hv-results tr.you td { background: rgba(255,106,58,.08); color: var(--v-text-hot); }
#hv-results td.st { color: var(--v-text-dim); font-size: var(--t-xs); letter-spacing: .08em; }
#hv-results td.out { color: var(--v-ok); }
#hv-results td.dead { color: var(--v-bad); }

#hv-spectate { text-align: center; }
#hv-spectate .who { font-size: var(--t-2xl); letter-spacing: .16em; color: var(--v-text-hot); }
#hv-spectate .meta { font-size: var(--t-sm); color: var(--v-text-dim); letter-spacing: .16em; margin-top: 6px; }
#hv-spectate .nav { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
#hv-spectate .nav .v-btn { pointer-events: auto; }
#hv-spectate.thin { background: none; }

#hv-disconnect { text-align: center; }
#hv-disconnect .big { font-size: var(--t-2xl); letter-spacing: .2em; color: var(--v-bad); }
#hv-disconnect .why { font-size: var(--t-sm); color: var(--v-text-dim); margin-top: 10px; letter-spacing: .12em; }

@media (max-width: 900px) {
  .hv-scr-body { grid-template-columns: 1fr; }
  #hv-tl, #hv-tr, #hv-bl, #hv-br { width: min(46vw, 240px); }
}