/*
 * HUD is a DOM overlay, not canvas.
 *
 * Text stays crisp at any DPI without manual scaling, CSS gives transitions and
 * conic gradients for free, and — the reason that decided it — the whole
 * interface is inspectable through the accessibility tree, so it can be
 * verified by reading values rather than by staring at pixels.
 */

#hud {
  --hud-fg: #e6ddcb;
  --hud-dim: #9a917f;
  --hud-frame: #6c6250;
  --hud-back: rgba(14, 15, 18, 0.72);
  --hp: #a8202a;
  --hp-low: #e03a2a;

  font-family: "Segoe UI", system-ui, sans-serif;
  user-select: none;
}

#hud * { pointer-events: none; }
/* The character sheet and menus are interactive islands inside the inert HUD.
   The wildcard above kills pointer events on every descendant, and an inline
   style on the panel alone does NOT rescue its children — clicks hit the panel
   body and never reach a cell. This selector is what makes items clickable. */
#hud .cs-panel, #hud .cs-panel *, #hud .hud-menu, #hud .hud-menu *,
#hud .hud-actionbar, #hud .hud-actionbar * { pointer-events: auto; }

/* ---------- Health globe ---------- */

.hud-globe {
  position: absolute;
  left: 26px;
  bottom: 24px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #33353c 0%, #16171b 62%, #0b0c0e 100%);
  border: 2px solid var(--hud-frame);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.hud-globe-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--hp-low) 0%, var(--hp) 45%, #6b1219 100%);
  /* clip-path is what makes the liquid level animate cheaply — no reflow. */
  clip-path: inset(50% 0 0 0);
  transition: clip-path 180ms ease-out;
}

.hud-globe-gloss {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 32% 24%, rgba(255, 255, 255, 0.3) 0%, transparent 46%),
    radial-gradient(ellipse at 60% 96%, rgba(0, 0, 0, 0.55) 0%, transparent 55%);
}

.hud-globe-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 600;
  color: var(--hud-fg);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.5px;
}

.hud-globe.is-low { animation: hud-pulse 900ms ease-in-out infinite; }

@keyframes hud-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(0, 0, 0, 0.85); }
  50%      { box-shadow: 0 0 14px 4px rgba(224, 58, 42, 0.55), inset 0 0 22px rgba(0, 0, 0, 0.85); }
}

/* Screen-edge warning, tied to the same low-health state. */
.hud-hurt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 260ms ease-out;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(150, 20, 16, 0.5) 100%);
}
.hud-hurt.is-visible { opacity: 1; }

/* ---------- Selection panel ---------- */

.hud-target {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  padding: 7px 14px 9px;
  background: var(--hud-back);
  border: 1px solid var(--hud-frame);
  border-radius: 3px;
  text-align: center;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
.hud-target.is-visible { opacity: 1; }

.hud-target-name {
  font-size: 13px;
  color: var(--hud-fg);
  letter-spacing: 0.4px;
}

.hud-target-bar {
  margin-top: 6px;
  height: 5px;
  background: #241d1d;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}
.hud-target-bar-chip {
  position: absolute;
  inset: 0;
  background: #7a3a2a;
  transform-origin: left center;
  transition: transform 620ms ease-out 200ms;
}
.hud-target-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #d1382f, var(--hp));
  transform-origin: left center;
  transition: transform 120ms linear;
}

/* ---------- Floating damage numbers ---------- */

.hud-damage {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f2ece0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
  /* Positioned only through transform: writing left/top would force layout on
     every number on every frame. */
  will-change: transform, opacity;
  opacity: 0;
}
.hud-damage.is-crit { color: #ffcc47; font-size: 23px; }
.hud-damage.is-hero { color: #ff5545; }

/* ---------- Nameplates ---------- */

.hud-plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 5px;
  background: #1b1618;
  border: 1px solid rgba(0, 0, 0, 0.9);
  will-change: transform, opacity;
  opacity: 0;
}
.hud-plate-chip {
  position: absolute;
  inset: 0;
  background: #7a3a2a;
  transform-origin: left center;
  transition: transform 620ms ease-out 200ms;
}
.hud-plate-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #c8382c, #8d1a1f);
  transform-origin: left center;
  transition: transform 110ms linear;
}

/* ---------- Overlays ---------- */

.hud-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(8, 6, 6, 0.68);
  opacity: 0;
  transition: opacity 420ms ease-out;
}
.hud-overlay.is-visible { opacity: 1; }
.hud-overlay-title {
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 8px;
  color: #d94436;
  text-transform: uppercase;
}
.hud-overlay-hint { font-size: 14px; color: var(--hud-dim); letter-spacing: 1px; }

/* ---------- Debug readout ---------- */

.hud-stats {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 5px 9px;
  font: 11px/1.5 ui-monospace, Consolas, monospace;
  color: var(--hud-dim);
  background: var(--hud-back);
  border: 1px solid rgba(108, 98, 80, 0.4);
  white-space: pre;
}

/* ---------- Character sheet ---------- */

.cs-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: min(880px, 94vw);
  max-height: 88vh;
  display: none;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(22, 21, 24, 0.97), rgba(14, 14, 16, 0.97));
  border: 1px solid var(--hud-frame);
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
  color: var(--hud-fg);
  opacity: 0;
  transition: opacity 130ms ease-out, transform 130ms ease-out;
}
.cs-panel.is-open { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); }

.cs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(108, 98, 80, 0.4);
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--hud-dim);
}
.cs-close {
  background: none; border: none; color: var(--hud-dim);
  font-size: 15px; cursor: pointer; padding: 2px 6px;
}
.cs-close:hover { color: #fff; }

/* Wraps instead of scrolling sideways: on a narrow window the bag drops below
   the doll, which is always more readable than a horizontal scrollbar. */
.cs-body { display: flex; flex-wrap: wrap; gap: 18px; padding: 16px; overflow-y: auto; overflow-x: hidden; }

/* Doll: two columns of slots flanking the 3D preview. */
.cs-doll { display: flex; gap: 10px; align-items: stretch; }
.cs-preview {
  width: 210px; min-height: 340px;
  border: 1px solid rgba(108, 98, 80, 0.32);
  border-radius: 3px;
  /* Transparent: the scissored WebGL pass draws straight through it. */
  background: rgba(0, 0, 0, 0.25);
}
.cs-slot-column { display: flex; flex-direction: column; gap: 8px; }

.cs-slot {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(108, 98, 80, 0.45);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 90ms, border-color 90ms;
  position: relative;
}
.cs-slot:hover { background: rgba(90, 78, 58, 0.35); }
.cs-slot.is-filled { background: rgba(0, 0, 0, 0.5); }
.cs-slot-icon { font-size: 25px; line-height: 1; }
.cs-slot-label {
  position: absolute; bottom: 3px; left: 0; right: 0;
  font-size: 8px; text-align: center; color: var(--hud-dim);
  text-transform: uppercase; letter-spacing: 0.3px; pointer-events: none;
}

.cs-side { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 12px; }

.cs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12px; }
.cs-stat { display: flex; align-items: baseline; gap: 6px; }
.cs-stat span { color: var(--hud-dim); min-width: 78px; }
.cs-stat b { color: var(--hud-fg); font-weight: 600; }
.cs-stat i { font-style: normal; font-size: 10px; color: #7d7462; }
.cs-sep { grid-column: 1 / -1; height: 1px; background: rgba(108, 98, 80, 0.32); margin: 5px 0; }

.cs-bag-header {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--hud-dim);
  border-bottom: 1px solid rgba(108, 98, 80, 0.3); padding-bottom: 5px;
}
.cs-bag-count { float: right; letter-spacing: 0; }

.cs-bag { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.cs-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(108, 98, 80, 0.32);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: background 90ms;
}
.cs-cell:hover { background: rgba(90, 78, 58, 0.35); }

.cs-tooltip {
  position: absolute; top: 0; left: 0;
  max-width: 260px; padding: 8px 11px;
  background: rgba(10, 10, 12, 0.97);
  border: 1px solid var(--hud-frame);
  border-radius: 3px;
  font-size: 12px; line-height: 1.5;
  opacity: 0; pointer-events: none;
  transition: opacity 90ms;
  z-index: 40;
}
.cs-tooltip.is-visible { opacity: 1; }
.cs-tip-line + .cs-tip-line { margin-top: 1px; }

.cs-toast {
  position: absolute; bottom: 150px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 15px;
  background: rgba(80, 22, 18, 0.92);
  border: 1px solid #8d3a2c;
  border-radius: 3px;
  font-size: 12px; color: #ffd7cf;
  opacity: 0; transition: opacity 160ms;
}
.cs-toast.is-visible { opacity: 1; }

.cs-hint {
  position: absolute; bottom: 24px; right: 24px;
  font-size: 11px; color: var(--hud-dim); letter-spacing: 0.6px;
}

.cs-preview { position: relative; overflow: hidden; }
.cs-preview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Ground loot labels ---------- */

.hud-loot-label {
  position: absolute; top: 0; left: 0;
  padding: 2px 8px 3px;
  font-size: 12px; letter-spacing: 0.3px; white-space: nowrap;
  background: rgba(8, 8, 10, 0.88);
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  will-change: transform, opacity;
  opacity: 0;
  transition: background 90ms;
}
.hud-loot-label:hover { background: rgba(52, 44, 30, 0.95); }

/* ---------- Ability bar ---------- */

.hud-ability {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  border: 1px solid var(--hud-frame);
  border-radius: 4px;
  background: rgba(10, 10, 12, 0.8);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.hud-ability-key {
  position: absolute; bottom: 2px; right: 4px;
  font-size: 10px; color: var(--hud-dim);
}
/* Radial cooldown sweep: a conic gradient the JS drives via one CSS variable. */
.hud-ability-cd {
  position: absolute; inset: 0;
  border-radius: 3px;
  background: conic-gradient(rgba(0,0,0,0.78) calc(var(--cd) * 1turn), transparent 0);
  pointer-events: none;
}
.hud-ability.is-ready { box-shadow: 0 0 10px 1px rgba(255, 194, 122, 0.35); }


/* ---------- Waves ---------- */

.hud-banner {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--hud-fg);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 500ms ease-out;
}
.hud-banner.is-visible { opacity: 1; }

.hud-wave-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 11px;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--hud-dim);
  background: var(--hud-back);
  border: 1px solid rgba(108, 98, 80, 0.4);
  border-radius: 2px;
}

/* ---------- Main menu ---------- */

.hud-menu {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: radial-gradient(ellipse at center, rgba(10,9,8,0.55) 0%, rgba(6,5,5,0.88) 100%);
}
.hud-menu.is-visible { display: flex; }
.hud-menu-title { font-size: 64px; font-weight: 200; letter-spacing: 18px; color: var(--hud-fg); text-shadow: 0 4px 24px rgba(0,0,0,0.9); }
.hud-menu-sub { font-size: 14px; letter-spacing: 6px; color: var(--hud-dim); text-transform: uppercase; margin-bottom: 34px; }
.hud-menu-buttons { display: flex; flex-direction: column; gap: 10px; width: 250px; }
.hud-menu-btn {
  padding: 12px 0; font-size: 15px; letter-spacing: 2px;
  background: rgba(20,19,21,0.92); color: var(--hud-fg);
  border: 1px solid var(--hud-frame); border-radius: 3px; cursor: pointer;
  transition: background 110ms, border-color 110ms;
}
.hud-menu-btn:hover:not(:disabled) { background: rgba(66,55,38,0.9); border-color: #9a8a64; }
.hud-menu-btn.is-disabled { opacity: 0.38; cursor: default; }

/* ---------- Action bar ---------- */

.hud-actionbar {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; align-items: flex-end;
}
.hud-action {
  width: 52px; height: 52px; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: rgba(12,12,14,0.85);
  border: 1px solid var(--hud-frame); border-radius: 4px;
  cursor: pointer; overflow: hidden;
}
.hud-action:hover { border-color: #9a8a64; }
.hud-action.is-empty { opacity: 0.35; cursor: default; }
.hud-action-key {
  position: absolute; top: 2px; left: 5px;
  font-size: 10px; color: var(--hud-dim); letter-spacing: 0;
}
.hud-action-cd {
  position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(rgba(0,0,0,0.78) calc(var(--cd, 0) * 360deg), transparent 0);
}


/* ---------- Experience ---------- */

.hud-xp {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 320px; height: 8px;
  background: rgba(10,10,12,0.85);
  border: 1px solid rgba(108,98,80,0.5); border-radius: 2px; overflow: hidden;
}
.hud-xp-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #6c6250, #d8b45a);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 300ms ease-out;
}
.hud-xp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; letter-spacing: 1px; color: #e6ddcb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.hud-level {
  position: absolute; left: 150px; bottom: 24px;
  padding: 3px 10px; font-size: 12px; letter-spacing: 1px;
  color: var(--hud-fg); background: var(--hud-back);
  border: 1px solid var(--hud-frame); border-radius: 3px;
}
.hud-level.has-points { border-color: #d8b45a; color: #ffe08a; }

.cs-plus {
  margin-left: 6px; width: 18px; height: 18px; line-height: 1;
  background: rgba(90,78,58,0.6); color: #ffe08a;
  border: 1px solid #8a7a54; border-radius: 2px; cursor: pointer;
  font-size: 12px; padding: 0;
}
.cs-plus:hover { background: rgba(140,118,74,0.8); }


/* ---------- Gold and selling ---------- */

.cs-goldbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-gold { font-size: 13px; color: #e8c96a; letter-spacing: 0.5px; }
.cs-sell {
  padding: 5px 11px; font-size: 11px; letter-spacing: 0.5px;
  background: rgba(52,44,30,0.9); color: var(--hud-fg);
  border: 1px solid var(--hud-frame); border-radius: 3px; cursor: pointer;
}
.cs-sell:hover:not(:disabled) { background: rgba(90,74,44,0.95); border-color: #9a8a64; }
.cs-sell:disabled { opacity: 0.35; cursor: default; }

/* ---------- Skin picker ---------- */

.cs-skins { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-skins-label {
  width: 100%; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--hud-dim); border-bottom: 1px solid rgba(108, 98, 80, 0.3); padding-bottom: 5px;
}
.cs-skin {
  padding: 6px 12px; font-size: 12px;
  background: rgba(0, 0, 0, 0.35); color: var(--hud-fg);
  border: 1px solid rgba(108, 98, 80, 0.45); border-radius: 3px; cursor: pointer;
}
.cs-skin:hover { background: rgba(90, 78, 58, 0.35); }
.cs-skin.is-active { border-color: #c8a03c; color: #ffdf95; }

/* Weapon-mode switch: wider than a skill cell, because it carries a word. */
.hud-mode { width: 68px; }
.hud-mode-label { font-size: 11px; letter-spacing: 0.4px; color: var(--hud-fg); }