/* Built from dev/hud/hud.css by dev/release.js: edit it there and run `node dev/release.js` again. */
/* Elusive HUD widgets for the website: Keybinds, Potion, Armor, Binds, Target and Notifications.
   Every size here is the client's own value at 1080p (HudDraw.hpp, HudNotes.cpp, HudTarget.cpp, HudBinds.cpp),
   so 1 CSS px = 1 game pixel on a 1920x1080 screen. Scale a whole HUD with `zoom` or `transform` on its root. */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff') format('woff'); }

/* ---------- Theme tokens ----------
   Dark = the client's default "Blue" theme: content (3,3,6) -> footer (0,0,3), darkened by 12% (glass Depth) and laid
   over the blurred world at alpha 168, with an opaque 1 px border (16,16,21). Ink is accentLight in dark themes. */
.hud-w {
  --hud-accent: #7ea6f4;
  --hud-accent-light: color-mix(in srgb, var(--hud-accent) 75%, #fff);
  --hud-ink: var(--hud-accent-light);
  --hud-switch-on: color-mix(in srgb, var(--hud-accent) 80%, var(--hud-accent-light));
  --hud-glass-top: rgba(3, 3, 5, .659);
  --hud-glass-bottom: rgba(0, 0, 3, .659);
  --hud-backdrop: blur(18px) brightness(.9);
  --hud-edge: #101015;
  --hud-shadow: none;
  --hud-title: #dadade;
  --hud-text: #cacad0;
  --hud-text-on: #d4d4d9;
  --hud-dim: #c8c8cd;
  --hud-veil: 218, 218, 222;
  --hud-switch-off: #131317;
  --hud-knob-off: #707078;
  --hud-knob-on: #fff;
  --hud-ghost: rgba(255, 255, 255, .314);
  --hud-pie: rgba(0, 0, 0, .62);
  --hud-red: #e5484d;
  --hud-gold: #f4c84a;
  --hud-sync: 0s;
  --hud-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Light = the client's light themes (Paper): near-white glass at alpha 240 without depth, #E4E4E4 edge, black text,
   and Ink switches to the accent itself. The glass is a bit more see-through here so it reads as frosted on the site. */
:root[data-theme='light'] .hud-w:not([data-hud-theme='dark']),
.hud-w[data-hud-theme='light'] {
  --hud-ink: color-mix(in srgb, var(--hud-accent) 82%, #0b1430);
  --hud-glass-top: rgba(250, 250, 250, .86);
  --hud-glass-bottom: rgba(244, 244, 244, .86);
  --hud-backdrop: blur(18px) saturate(1.5);
  --hud-edge: #e4e4e4;
  --hud-shadow: 0 6px 22px rgba(10, 14, 30, .09);
  --hud-title: #000;
  --hud-text: #121212;
  --hud-text-on: #0a0a0a;
  --hud-dim: #2a2a2a;
  --hud-veil: 0, 0, 0;
  --hud-switch-off: #dedede;
  --hud-knob-off: #fff;
  --hud-knob-on: #fff;
  --hud-ghost: rgba(60, 60, 60, .43);
  --hud-pie: rgba(16, 20, 34, .5);
}

/* ---------- Shared pieces ---------- */
.hud-w, .hud-w * { box-sizing: border-box; }
.hud-w {
  font-family: var(--hud-font);
  /* ImGui draws plain glyph advances: no kerning and no contextual colon lift in "1:32". */
  font-kerning: none;
  font-feature-settings: 'calt' 0, 'kern' 0;
  font-variant-ligatures: none;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  color: var(--hud-title);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.hud-w svg { display: block; overflow: visible; }
/* Every animated SVG part is drawn around its own origin, so scale and spin about its bounding-box centre. */
.hud-w svg * { transform-box: fill-box; transform-origin: 50% 50%; }

/* MenuWindowRect: rounded glass with a vertical content->footer gradient and a 1 px opaque edge. */
.hud-glass {
  position: relative;
  border: 1px solid var(--hud-edge);
  border-radius: 10px;
  background: linear-gradient(var(--hud-glass-top), var(--hud-glass-bottom));
  -webkit-backdrop-filter: var(--hud-backdrop);
  backdrop-filter: var(--hud-backdrop);
  box-shadow: var(--hud-shadow);
}

/* Panels slide 8 px from the left and fade in, like Panel::shown easing toward 1 at kSpeed 14. Filled backwards only:
   a finished entrance that kept holding its last frame would keep the panel on its own layer, and its text softer. */
.hud-panel { animation: hud-enter-x .36s cubic-bezier(.2, .75, .3, 1) backwards; }
.hud-target { animation: hud-enter-y .36s cubic-bezier(.2, .75, .3, 1) backwards; }
@keyframes hud-enter-x { from { opacity: 0; transform: translateX(-8px); } }
@keyframes hud-enter-y { from { opacity: 0; transform: translateY(6px); } }
/* the entrance is never held by the off-screen pause below: held at its first frame, a panel mounted out of sight
   would stay invisible until it happened to come into view in a frame the browser drew */
.hud-paused.hud-panel, .hud-paused .hud-panel, .hud-paused.hud-target, .hud-paused .hud-target { animation-play-state: running !important; }

/* Header: 20 px tall, three equaliser bars in a 13 px slot, 7 px gap, SemiBold title, animated icon on the right.
   The client's 13 em text is an 18 px ImGui font, which is 14.87 px of Inter in CSS terms. */
.hud-head { position: relative; display: flex; align-items: flex-start; height: 20px; }
.hud-title { display: block; font-weight: 600; font-size: 14.87px; line-height: 18px; color: var(--hud-title); white-space: nowrap; }
.hud-bars { position: relative; flex: none; width: 13px; height: 20px; margin-right: 7px; }
.hud-bars i {
  position: absolute; bottom: 5px; left: calc(.9px + var(--i) * 4.5px);
  width: 2.2px; height: 10px; border-radius: 1.1px; background: var(--hud-accent);
  transform-origin: 50% 100%; transform: scaleY(.35);
  animation: hud-bar 1.1s cubic-bezier(.37, 0, .63, 1) infinite;
  animation-delay: calc(var(--hud-sync) + var(--i) * .352s);
}
@keyframes hud-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* Rows: 23 px tall, Light font for names and values, values in the accent ink, 18 px minimum gap. */
.hud-rows { margin-top: 5px; }
.hud-row { display: flex; height: 23px; padding-top: 2px; white-space: nowrap; }
.hud-row-name { display: block; font-size: 14.87px; line-height: 18px; letter-spacing: -.017em; color: var(--hud-text); }
.hud-row-val { display: block; margin-left: auto; padding-left: 18px; font-size: 14.05px; line-height: 17px; letter-spacing: -.017em; color: var(--hud-ink); }

/* Switch (glass::Switch): pill track, knob inset 2 px, knob stretches while it travels. */
.hud-sw { position: relative; display: block; border-radius: 99px; background: var(--hud-switch-off); }
.hud-sw-on { position: absolute; inset: 0; border-radius: inherit; background: var(--hud-switch-on); }
.hud-sw-knob {
  position: absolute; left: 2px; top: 2px; border-radius: 50%; background: var(--hud-knob-off);
  box-shadow: 0 .8px 0 .6px rgba(0, 0, 0, .063), 0 .8px 0 1.2px rgba(0, 0, 0, .063), 0 .8px 0 1.8px rgba(0, 0, 0, .063);
}
.hud-sw-knob i { position: absolute; inset: 0; border-radius: inherit; background: var(--hud-knob-on); }

/* ---------- Keybinds ---------- */
.hud-keybinds, .hud-potion { width: max-content; min-width: 150px; padding: 8px 11px 7px; }
.hud-keybinds .hud-sw { position: absolute; right: 0; top: 4px; width: 17px; height: 12px; }
.hud-keybinds .hud-sw-knob { width: 8px; height: 8px; transform: translateX(5px); }
.hud-keybinds .hud-sw-knob { animation: hud-sw-knob 9s linear infinite; animation-delay: var(--hud-sync); }
.hud-keybinds .hud-sw-on, .hud-keybinds .hud-sw-knob i { animation: hud-sw-fade 9s linear infinite; animation-delay: var(--hud-sync); }

/* ---------- Potion: two breathing bubbles orbiting and two dots rising (HudFeature::Paint) ---------- */
.hud-bubbles { position: absolute; right: 0; top: 0; width: 12px; height: 20px; }
.hud-bubbles svg { position: absolute; inset: 0; width: 12px; height: 20px; }
/* Resting transforms are the client's t = 0 pose, which is what reduced motion shows. */
.hud-bubbles .b-turn { transform: rotate(45deg); animation: hud-bub-turn 2.5s linear infinite; animation-delay: var(--hud-sync); }
.hud-bubbles .b-a { transform: translateX(-2px); animation: hud-bub-a 1.6s linear infinite; animation-delay: var(--hud-sync); }
.hud-bubbles .b-b { transform: translateX(2px); animation: hud-bub-b 1.6s linear infinite; animation-delay: var(--hud-sync); }
.hud-bubbles circle.ring { fill: none; stroke: var(--hud-ink); stroke-width: 1.6px; }
.hud-bubbles .b-rise { fill: var(--hud-title); opacity: 0; }
.hud-bubbles .r0 { animation: hud-rise-0 1.3s linear infinite; animation-delay: var(--hud-sync); }
.hud-bubbles .r1 { animation: hud-rise-1 1.3s linear infinite; animation-delay: calc(var(--hud-sync) - .65s); }

/* ---------- Armor: four 32 px cells, 24 px items, 2 px durability bars, numbers below ---------- */
.hud-armor { width: 164px; height: 91px; padding: 8px 11px 7px; }
.hud-shield { position: absolute; right: 0; top: 4px; width: 10px; height: 12px; }
.hud-shield-fill { position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% 52%, 81% 80%, 50% 100%, 19% 80%, 0 52%); }
.hud-shield-fill i { position: absolute; inset: 0; background: color-mix(in srgb, var(--hud-accent) 82%, transparent); transform-origin: 50% 100%; }
.hud-shield svg { position: absolute; inset: 0; }
.hud-shield polygon { fill: none; stroke: var(--hud-ink); stroke-width: 1.4px; stroke-linejoin: round; }
.hud-cells { position: absolute; left: 0; right: 0; top: 33px; display: flex; justify-content: center; gap: 4px; }
.hud-cell { position: relative; width: 32px; height: 50px; }
.hud-cell .hud-item { position: absolute; left: 4px; top: 0; width: 24px; height: 24px; }
.hud-dura { position: absolute; left: 4px; top: 28px; width: 24px; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(var(--hud-veil), .086); }
.hud-dura i, .hud-ibar i { position: absolute; inset: 0; border-radius: inherit; background: var(--fill, var(--hud-accent)); transform: translateX(-100%); }
.hud-cell-num {
  position: absolute; left: -4px; right: -4px; top: 34px; text-align: center;
  font-size: 12.39px; line-height: 15px; letter-spacing: -.017em;
  color: color-mix(in srgb, var(--fill, var(--hud-accent)) var(--warn, 0%), var(--hud-text));
}

/* Items: 16x16 pixel art painted 4x and scaled down smoothly, like the client's upscaled, mipmapped sprites. */
.hud-item { display: block; }
.hud-item img { display: block; width: 100%; height: 100%; }
.hud-item.pop { animation: hud-pop .45s cubic-bezier(.2, .75, .3, 1) both; }
@keyframes hud-pop { from { opacity: 0; transform: scale(.75); } }
/* Enchantment glint: a faint accent wash on the item's silhouette plus a band sweeping corner to corner. */
.hud-glint { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; overflow: hidden;
  background: color-mix(in srgb, var(--hud-accent-light) 6.3%, transparent); }
.hud-glint i {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 22%, color-mix(in srgb, var(--hud-accent-light) 8%, transparent) 29%,
    color-mix(in srgb, var(--hud-accent-light) 25%, transparent) 36%, color-mix(in srgb, var(--hud-accent-light) 43%, transparent) 43%,
    color-mix(in srgb, var(--hud-accent-light) 51%, transparent) 50%, color-mix(in srgb, var(--hud-accent-light) 43%, transparent) 57%,
    color-mix(in srgb, var(--hud-accent-light) 25%, transparent) 64%, color-mix(in srgb, var(--hud-accent-light) 8%, transparent) 71%, transparent 78%);
  transform: translate(-78%, -78%);
  animation: hud-glint 3.2s linear infinite;
  animation-delay: calc(var(--hud-sync) - var(--slot, 0) * .12s);
}
@keyframes hud-glint {
  0% { transform: translate(-78%, -78%); }
  34.375% { transform: translate(78%, 78%); }
  34.4%, 100% { transform: translate(170%, 170%); }
}

/* ---------- Binds: 34 px tiles, 22 px icons, count top-right, key below, cooldown pie ---------- */
.hud-binds { height: 91px; padding: 8px 11px 7px; }
.hud-keycap { position: absolute; right: 0; top: 4px; width: 12px; height: 12px; }
.hud-keycap svg { position: absolute; inset: 0; width: 12px; height: 12px; }
.hud-keycap .k-box { fill: none; stroke: var(--hud-ink); stroke-width: 1.2px; }
.hud-keycap .k-cap { fill: var(--hud-ink); opacity: .431; animation: hud-key-cap 2.2s linear infinite; animation-delay: var(--hud-sync); }
.hud-keycap .k-ring { fill: none; stroke: var(--hud-ink); stroke-width: 1px; opacity: 0;
  animation: hud-key-ring 2.2s linear infinite; animation-delay: var(--hud-sync); }
.hud-tiles { position: absolute; left: 9px; top: 31px; display: flex; gap: 6px; }
.hud-tile { position: relative; width: 34px; height: 34px; transition: opacity .3s; }
.hud-tile.missing { opacity: .32; }
.hud-tile-bg { position: absolute; inset: 0; border-radius: 7px; background: rgba(var(--hud-veil), .035); }
.hud-tile .hud-item { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; }
.hud-pie { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; }
.hud-pie > b { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.hud-pie > b.r { left: 17px; right: 0; }
.hud-pie > b.l { left: 0; right: 17px; }
.hud-pie > b i { position: absolute; top: -23px; width: 40px; height: 80px; background: var(--hud-pie); }
.hud-pie > b.r i { left: -40px; transform-origin: 100% 50%; }
.hud-pie > b.l i { left: 17px; transform-origin: 0 50%; }
.hud-cd {
  position: absolute; left: -6px; right: -6px; top: 11px; text-align: center;
  font-weight: 600; font-size: 12.39px; line-height: 15px; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .78);
}
.hud-count {
  position: absolute; right: 4px; top: -1px; font-size: 11.57px; line-height: 14px; letter-spacing: -.017em;
  color: var(--hud-text-on); transform-origin: 100% 55%;
}
.hud-key {
  position: absolute; left: -4px; right: -4px; top: 36px; text-align: center;
  font-size: 12.39px; line-height: 15px; letter-spacing: -.017em; color: var(--hud-ink);
}

/* ---------- Target (classic): 38 px skin head, nickname + health, 4 px bar, armor and hands ---------- */
.hud-target { height: 69px; }
.hud-face { position: absolute; left: 8px; top: 15px; width: 38px; height: 38px; }
.hud-face img { position: absolute; display: block; image-rendering: pixelated; }
.hud-face .base { inset: 0; width: 38px; height: 38px; border-radius: 4.75px; }
.hud-face .hat { left: -2.375px; top: -2.375px; width: 42.75px; height: 42.75px; border-radius: 5px; }
.hud-face .hurt { position: absolute; inset: 0; border-radius: 4.75px; background: rgb(255, 42, 42); opacity: 0; }
.hud-tname, .hud-thp {
  position: absolute; top: 6px; font-weight: 600; font-size: 14.87px; line-height: 18px; white-space: nowrap;
}
.hud-tname { left: 55px; color: var(--hud-title); overflow: hidden; text-overflow: ellipsis; }
.hud-thp { right: 28px; color: var(--hud-ink); }
.hud-thp b { font-weight: 600; color: var(--hud-gold); margin-left: 3px; }
.hud-thp b:empty { display: none; }
.hud-reticle { position: absolute; right: 14px; top: 16px; width: 0; height: 0; }
.hud-reticle svg { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; }
.hud-reticle circle.ring { fill: none; stroke-width: 1.3px; }
.hud-reticle line { stroke-width: 1.3px; stroke-linecap: butt; }
.hud-reticle .calm { stroke: var(--hud-ink); fill: var(--hud-ink); }
.hud-reticle .hurt { stroke: var(--hud-red); fill: var(--hud-red); opacity: 0; }
.hud-reticle .ticks { animation: hud-spin 8s linear infinite; animation-delay: var(--hud-sync); }
.hud-reticle .dot { stroke: none; animation: hud-ret-dot 1.6s linear infinite; animation-delay: var(--hud-sync); }
@keyframes hud-spin { to { transform: rotate(360deg); } }
.hud-hp { position: absolute; left: 55px; right: 8px; top: 30px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(var(--hud-veil), .07); }
.hud-hp > span { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; transform: translateX(-100%); }
.hud-hp > span > i { position: absolute; inset: 0; transform: translateX(100%); }
.hud-hp .ghost > i { background: var(--hud-ghost); }
.hud-hp .life > i { background: linear-gradient(90deg, var(--hud-accent), var(--hud-accent-light)); }
.hud-hp .abs { overflow: visible; }
.hud-hp .abs > i { border-radius: 2px; background: var(--hud-gold); transform: none; }
.hud-titems { position: absolute; left: 55px; top: 40px; height: 20px; }
.hud-titem { position: absolute; top: 0; width: 16px; height: 16px; }
.hud-titem .hud-item { width: 16px; height: 16px; }
.hud-ibar { position: absolute; left: 2px; top: 17px; width: 12px; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(var(--hud-veil), .078); }

/* ---------- Notifications: 36 px cards stacked 6 px apart, centred, newest first ---------- */
.hud-notes { position: relative; width: 236px; height: 78px; }
.hud-note {
  position: absolute; left: 0; top: 0; height: 36px; min-width: 120px; padding: 0 9px;
  display: flex; align-items: flex-start; border-radius: 9px; white-space: nowrap; opacity: 0;
  will-change: transform, opacity;
}
.hud-note-flash { position: absolute; inset: -1px; border-radius: inherit; background: var(--hud-title); opacity: 0; }
.hud-note-slot { position: relative; flex: none; width: 16px; height: 34px; margin-right: 9px; }
.hud-note-slot.wide { width: 24px; }
.hud-note .hud-sw { position: absolute; left: 0; top: 10px; width: 24px; height: 14px; }
.hud-note .hud-sw-knob { width: 10px; height: 10px; }
.hud-note .hud-item, .hud-note .hud-glyph { position: absolute; left: 0; top: 9px; width: 16px; height: 16px; }
.hud-glyph { color: var(--hud-title); }
.hud-glyph svg { width: 15px; height: 15px; margin: .5px; }
.hud-note-dot { position: absolute; left: 5px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--hud-title); }
.hud-note-text { display: block; padding-top: 7px; font-size: 14.87px; line-height: 18px; }
.hud-note-text span { font-weight: 400; letter-spacing: -.017em; color: var(--hud-dim); }
.hud-note-text span.lead { font-weight: 500; letter-spacing: 0; color: var(--hud-title); }
.hud-note-text span + span { margin-left: 4px; }

/* ---------- Default client layout (mountHud adds .hud--client) ----------
   Top-left row like the client (9 px margin, 9 px gaps), notifications centred 48 px down, target under the centre. */
.hud { position: relative; }
.hud--client { min-height: 420px; }
.hud--client > .hud-row-top { position: absolute; left: 9px; top: 9px; display: flex; align-items: flex-start; gap: 9px; }
.hud--client > .hud-notes { position: absolute; left: 50%; top: 48px; margin-left: -118px; }
/* Centred on whole pixels (the script publishes half the width), so the text is never blurred by a .5 px shift. */
.hud--client > .hud-target { position: absolute; left: 50%; top: 300px; margin-left: calc(-1 * var(--hud-half, 112px)); }

/* Off screen or reduced motion: decorative loops stop (the JS side stops its frame loop too). */
.hud-paused, .hud-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hud-w, .hud-w * { animation: none !important; transition: none !important; }
  /* Still bars keep reading as the equaliser icon. */
  .hud-bars i { transform: scaleY(.6); }
  .hud-bars i:nth-child(2) { transform: scaleY(1); }
  .hud-bars i:nth-child(3) { transform: scaleY(.8); }
}

/* ---------- Keyframes sampled from the client's formulas (HudFeature.cpp, HudDraw.hpp) ---------- */
@keyframes hud-bub-turn {
  0% { transform: rotate(45deg); }
  6.25% { transform: rotate(50.48deg); }
  12.5% { transform: rotate(55.13deg); }
  18.75% { transform: rotate(58.23deg); }
  25% { transform: rotate(59.32deg); }
  31.25% { transform: rotate(58.23deg); }
  37.5% { transform: rotate(55.13deg); }
  43.75% { transform: rotate(50.48deg); }
  50% { transform: rotate(45deg); }
  56.25% { transform: rotate(39.52deg); }
  62.5% { transform: rotate(34.87deg); }
  68.75% { transform: rotate(31.77deg); }
  75% { transform: rotate(30.68deg); }
  81.25% { transform: rotate(31.77deg); }
  87.5% { transform: rotate(34.87deg); }
  93.75% { transform: rotate(39.52deg); }
  100% { transform: rotate(45deg); }
}
@keyframes hud-bub-a {
  0% { transform: translateX(-2px) scale(1.0972); }
  6.25% { transform: translateX(-2.306px) scale(1.0898); }
  12.5% { transform: translateX(-2.566px) scale(1.0687); }
  18.75% { transform: translateX(-2.739px) scale(1.0372); }
  25% { transform: translateX(-2.8px) scale(1); }
  31.25% { transform: translateX(-2.739px) scale(0.9628); }
  37.5% { transform: translateX(-2.566px) scale(0.9313); }
  43.75% { transform: translateX(-2.306px) scale(0.9102); }
  50% { transform: translateX(-2px) scale(0.9028); }
  56.25% { transform: translateX(-1.694px) scale(0.9102); }
  62.5% { transform: translateX(-1.434px) scale(0.9313); }
  68.75% { transform: translateX(-1.261px) scale(0.9628); }
  75% { transform: translateX(-1.2px) scale(1); }
  81.25% { transform: translateX(-1.261px) scale(1.0372); }
  87.5% { transform: translateX(-1.434px) scale(1.0687); }
  93.75% { transform: translateX(-1.694px) scale(1.0898); }
  100% { transform: translateX(-2px) scale(1.0972); }
}
@keyframes hud-bub-b {
  0% { transform: translateX(2px) scale(0.9028); }
  6.25% { transform: translateX(2.306px) scale(0.9102); }
  12.5% { transform: translateX(2.566px) scale(0.9313); }
  18.75% { transform: translateX(2.739px) scale(0.9628); }
  25% { transform: translateX(2.8px) scale(1); }
  31.25% { transform: translateX(2.739px) scale(1.0372); }
  37.5% { transform: translateX(2.566px) scale(1.0687); }
  43.75% { transform: translateX(2.306px) scale(1.0898); }
  50% { transform: translateX(2px) scale(1.0972); }
  56.25% { transform: translateX(1.694px) scale(1.0898); }
  62.5% { transform: translateX(1.434px) scale(1.0687); }
  68.75% { transform: translateX(1.261px) scale(1.0372); }
  75% { transform: translateX(1.2px) scale(1); }
  81.25% { transform: translateX(1.261px) scale(0.9628); }
  87.5% { transform: translateX(1.434px) scale(0.9313); }
  93.75% { transform: translateX(1.694px) scale(0.9102); }
  100% { transform: translateX(2px) scale(0.9028); }
}
@keyframes hud-rise-0 {
  0% { transform: translate(0px, 2.5px) scale(1); opacity: 0; }
  5% { transform: translate(0.371px, 2.424px) scale(0.98); opacity: 0.156; }
  10% { transform: translate(0.705px, 2.206px) scale(0.96); opacity: 0.309; }
  15% { transform: translate(0.971px, 1.862px) scale(0.94); opacity: 0.454; }
  20% { transform: translate(1.141px, 1.408px) scale(0.92); opacity: 0.588; }
  25% { transform: translate(1.2px, 0.859px) scale(0.9); opacity: 0.707; }
  30% { transform: translate(1.141px, 0.232px) scale(0.88); opacity: 0.809; }
  35% { transform: translate(0.971px, -0.458px) scale(0.86); opacity: 0.891; }
  40% { transform: translate(0.705px, -1.196px) scale(0.84); opacity: 0.951; }
  45% { transform: translate(0.371px, -1.965px) scale(0.82); opacity: 0.988; }
  50% { transform: translate(0px, -2.75px) scale(0.8); opacity: 1; }
  55% { transform: translate(-0.371px, -3.535px) scale(0.78); opacity: 0.988; }
  60% { transform: translate(-0.705px, -4.304px) scale(0.76); opacity: 0.951; }
  65% { transform: translate(-0.971px, -5.042px) scale(0.74); opacity: 0.891; }
  70% { transform: translate(-1.141px, -5.732px) scale(0.72); opacity: 0.809; }
  75% { transform: translate(-1.2px, -6.359px) scale(0.7); opacity: 0.707; }
  80% { transform: translate(-1.141px, -6.908px) scale(0.68); opacity: 0.588; }
  85% { transform: translate(-0.971px, -7.362px) scale(0.66); opacity: 0.454; }
  90% { transform: translate(-0.705px, -7.706px) scale(0.64); opacity: 0.309; }
  95% { transform: translate(-0.371px, -7.924px) scale(0.62); opacity: 0.156; }
  100% { transform: translate(0px, -8px) scale(0.6); opacity: 0; }
}
@keyframes hud-rise-1 {
  0% { transform: translate(1.036px, 2.5px) scale(1); opacity: 0; }
  5% { transform: translate(0.798px, 2.424px) scale(0.98); opacity: 0.156; }
  10% { transform: translate(0.482px, 2.206px) scale(0.96); opacity: 0.309; }
  15% { transform: translate(0.119px, 1.862px) scale(0.94); opacity: 0.454; }
  20% { transform: translate(-0.256px, 1.408px) scale(0.92); opacity: 0.588; }
  25% { transform: translate(-0.606px, 0.859px) scale(0.9); opacity: 0.707; }
  30% { transform: translate(-0.896px, 0.232px) scale(0.88); opacity: 0.809; }
  35% { transform: translate(-1.099px, -0.458px) scale(0.86); opacity: 0.891; }
  40% { transform: translate(-1.194px, -1.196px) scale(0.84); opacity: 0.951; }
  45% { transform: translate(-1.172px, -1.965px) scale(0.82); opacity: 0.988; }
  50% { transform: translate(-1.036px, -2.75px) scale(0.8); opacity: 1; }
  55% { transform: translate(-0.798px, -3.535px) scale(0.78); opacity: 0.988; }
  60% { transform: translate(-0.482px, -4.304px) scale(0.76); opacity: 0.951; }
  65% { transform: translate(-0.119px, -5.042px) scale(0.74); opacity: 0.891; }
  70% { transform: translate(0.256px, -5.732px) scale(0.72); opacity: 0.809; }
  75% { transform: translate(0.606px, -6.359px) scale(0.7); opacity: 0.707; }
  80% { transform: translate(0.896px, -6.908px) scale(0.68); opacity: 0.588; }
  85% { transform: translate(1.099px, -7.362px) scale(0.66); opacity: 0.454; }
  90% { transform: translate(1.194px, -7.706px) scale(0.64); opacity: 0.309; }
  95% { transform: translate(1.172px, -7.924px) scale(0.62); opacity: 0.156; }
  100% { transform: translate(1.036px, -8px) scale(0.6); opacity: 0; }
}
@keyframes hud-key-cap {
  0% { transform: translateY(0px); opacity: 0.431; }
  1.25% { transform: translateY(0.056px); opacity: 0.453; }
  2.5% { transform: translateY(0.203px); opacity: 0.511; }
  3.75% { transform: translateY(0.411px); opacity: 0.593; }
  5% { transform: translateY(0.65px); opacity: 0.686; }
  6.25% { transform: translateY(0.889px); opacity: 0.78; }
  7.5% { transform: translateY(1.097px); opacity: 0.862; }
  8.75% { transform: translateY(1.244px); opacity: 0.919; }
  10% { transform: translateY(1.3px); opacity: 0.941; }
  12.25% { transform: translateY(1.244px); opacity: 0.919; }
  14.5% { transform: translateY(1.097px); opacity: 0.862; }
  16.75% { transform: translateY(0.889px); opacity: 0.78; }
  19% { transform: translateY(0.65px); opacity: 0.686; }
  21.25% { transform: translateY(0.411px); opacity: 0.593; }
  23.5% { transform: translateY(0.203px); opacity: 0.511; }
  25.75% { transform: translateY(0.056px); opacity: 0.453; }
  28% { transform: translateY(0px); opacity: 0.431; }
  100% { transform: translateY(0px); opacity: 0.431; }
}
@keyframes hud-key-ring {
  0% { transform: scale(1); opacity: 0; }
  8.75% { transform: scale(1); opacity: 0; }
  10% { transform: scale(1, 1); opacity: 0.588; }
  12.25% { transform: scale(1.048, 1.0528); opacity: 0.562; }
  14.5% { transform: scale(1.0938, 1.1031); opacity: 0.535; }
  16.75% { transform: scale(1.1373, 1.1511); opacity: 0.509; }
  19% { transform: scale(1.1787, 1.1966); opacity: 0.482; }
  21.25% { transform: scale(1.2178, 1.2396); opacity: 0.456; }
  23.5% { transform: scale(1.2548, 1.2803); opacity: 0.429; }
  25.75% { transform: scale(1.2895, 1.3185); opacity: 0.403; }
  28% { transform: scale(1.322, 1.3542); opacity: 0.376; }
  31.2% { transform: scale(1.3645, 1.4009); opacity: 0.339; }
  34.4% { transform: scale(1.4025, 1.4427); opacity: 0.301; }
  37.6% { transform: scale(1.436, 1.4796); opacity: 0.264; }
  40.8% { transform: scale(1.465, 1.5115); opacity: 0.226; }
  44% { transform: scale(1.4896, 1.5386); opacity: 0.188; }
  47.2% { transform: scale(1.5097, 1.5607); opacity: 0.151; }
  50.4% { transform: scale(1.5253, 1.5779); opacity: 0.113; }
  53.6% { transform: scale(1.5365, 1.5902); opacity: 0.075; }
  56.8% { transform: scale(1.5432, 1.5975); opacity: 0.038; }
  60% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes hud-ret-dot {
  0% { transform: scale(0.8214); opacity: 0.833; }
  6.25% { transform: scale(0.8898); opacity: 0.897; }
  12.5% { transform: scale(0.9477); opacity: 0.951; }
  18.75% { transform: scale(0.9864); opacity: 0.987; }
  25% { transform: scale(1); opacity: 1; }
  31.25% { transform: scale(0.9864); opacity: 0.987; }
  37.5% { transform: scale(0.9477); opacity: 0.951; }
  43.75% { transform: scale(0.8898); opacity: 0.897; }
  50% { transform: scale(0.8214); opacity: 0.833; }
  56.25% { transform: scale(0.7531); opacity: 0.77; }
  62.5% { transform: scale(0.6952); opacity: 0.715; }
  68.75% { transform: scale(0.6565); opacity: 0.679; }
  75% { transform: scale(0.6429); opacity: 0.667; }
  81.25% { transform: scale(0.6565); opacity: 0.679; }
  87.5% { transform: scale(0.6952); opacity: 0.715; }
  93.75% { transform: scale(0.7531); opacity: 0.77; }
  100% { transform: scale(0.8214); opacity: 0.833; }
}
@keyframes hud-sw-knob {
  0% { transform: translateX(5px) scaleX(1); }
  81.111% { transform: translateX(5px) scaleX(1); }
  81.736% { transform: translateX(4.785px) scaleX(1.0303); }
  82.361% { transform: translateX(4.219px) scaleX(1.1061); }
  82.986% { transform: translateX(3.418px) scaleX(1.1886); }
  83.611% { transform: translateX(2.5px) scaleX(1.225); }
  84.236% { transform: translateX(1.582px) scaleX(1.1886); }
  84.861% { transform: translateX(0.781px) scaleX(1.1061); }
  85.486% { transform: translateX(0.215px) scaleX(1.0303); }
  86.111% { transform: translateX(0px) scaleX(1); }
  95% { transform: translateX(0px) scaleX(1); }
  95.625% { transform: translateX(0.215px) scaleX(1.0303); }
  96.25% { transform: translateX(0.781px) scaleX(1.1061); }
  96.875% { transform: translateX(1.582px) scaleX(1.1886); }
  97.5% { transform: translateX(2.5px) scaleX(1.225); }
  98.125% { transform: translateX(3.418px) scaleX(1.1886); }
  98.75% { transform: translateX(4.219px) scaleX(1.1061); }
  99.375% { transform: translateX(4.785px) scaleX(1.0303); }
  100% { transform: translateX(5px) scaleX(1); }
}
@keyframes hud-sw-fade {
  0% { opacity: 1; }
  81.111% { opacity: 1; }
  81.736% { opacity: 0.957; }
  82.361% { opacity: 0.8438; }
  82.986% { opacity: 0.6836; }
  83.611% { opacity: 0.5; }
  84.236% { opacity: 0.3164; }
  84.861% { opacity: 0.1562; }
  85.486% { opacity: 0.043; }
  86.111% { opacity: 0; }
  95% { opacity: 0; }
  95.625% { opacity: 0.043; }
  96.25% { opacity: 0.1563; }
  96.875% { opacity: 0.3164; }
  97.5% { opacity: 0.5; }
  98.125% { opacity: 0.6836; }
  98.75% { opacity: 0.8438; }
  99.375% { opacity: 0.957; }
  100% { opacity: 1; }
}


/* ---------- Plaques (makePlaque): the HUD's glass for the page's friends and wardrobe ---------- */
.hud-plaque { width: max-content; min-width: 170px; padding: 8px 11px 9px; }
.hud-plaque .hud-rows { margin-top: 6px; }
.hud-plaque .hud-row { align-items: center; height: 26px; padding-top: 0; gap: 8px; }
.hud-plaque .hud-row-name { flex: 1; }
.hud-pq-img { flex: none; width: 22px; height: 20px; border-radius: 4px; image-rendering: pixelated; object-fit: contain; }
.hud-pq-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--hud-ghost); }
.hud-pq-dot.is-on { background: #46c37b; box-shadow: 0 0 0 3px rgba(70, 195, 123, .18); }
.hud-pq-sub { font-size: 12.4px; line-height: 15px; color: var(--hud-ghost); white-space: nowrap; }
.hud-pq-grid { display: grid; grid-template-columns: repeat(3, 64px); gap: 6px; margin-top: 8px; }
.hud-pq-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 5px; border-radius: 7px; background: rgba(var(--hud-veil), .045); }
.hud-pq-tile img { width: 50px; height: 42px; image-rendering: pixelated; object-fit: contain; }
.hud-pq-tile span { max-width: 60px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 13px; color: var(--hud-text); white-space: nowrap; }
.hud-pq-tile.is-on { background: color-mix(in srgb, var(--hud-accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hud-accent) 60%, transparent); }
.hud-pq-big { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hud-pq-big img { width: 44px; height: 44px; border-radius: 6px; image-rendering: pixelated; }
.hud-pq-big b { display: block; font-size: 15.5px; font-weight: 600; line-height: 19px; color: var(--hud-title); }
.hud-pq-count { margin-left: auto; padding-left: 14px; font-size: 13px; line-height: 18px; color: var(--hud-ink); }
.hud-plaque img.is-render { image-rendering: auto; }
.hud-pq-worn { display: flex; gap: 4px; margin-top: 4px; }
.hud-pq-worn img { width: 26px; height: 22px; object-fit: contain; border-radius: 5px; background: rgba(var(--hud-veil), .05); }
.hud-pq-big.is-pet img { width: 64px; height: 56px; object-fit: contain; border-radius: 8px; background: rgba(var(--hud-veil), .05); }
.hud-pq-big .hud-pq-sub { display: block; margin-top: 2px; }
.hud-outfit .hud-row-val { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.hud-outfit .hud-row.is-new .hud-row-val, .hud-outfit .hud-row.is-new img { animation: hud-pq-new .6s cubic-bezier(.19, 1, .22, 1) backwards; }
@keyframes hud-pq-new { from { opacity: 0; transform: translateY(4px); } }
.hud-pq-tile { transition: background .35s, box-shadow .35s; }