/* DEADGRID — HUD-Overhaul (2026-06-15)
   Kompakter Charakter-Frame + Party/Raid-Anzeige + responsives Scaling.
   Bernstein bleibt die Signaturfarbe (--amber). Lokal eingebunden (KEIN CDN).

   Skalierungs-Strategie: eine zentrale Basis-Längeneinheit --hud-u via clamp()
   koppelt alle HUD-Maße an die Viewport-Breite, sodass Char-Frame UND die Mikro-
   Menübar unten auf 1080p / 1440p (WQHD) / 4K lesbar bleiben. Jedes Maß ist ein
   Vielfaches von --hud-u (z. B. calc(12 * var(--hud-u))) — keine fixen Pixel mehr.
   --hud-u entspricht ~1px bei 1080p und wächst bis 1.6px bei 4K.
   WICHTIG: --hud-u ist eine LÄNGE (px-clamp), KEIN einheitenloser Faktor — ein
   einheitenloser clamp wie "0.4 + 0.03125vw" wäre ungültig (Zahl + Länge gemischt)
   und würde calc() killen. clamp(1px, …vw, 1.6px) hält die Einheiten konsistent.
   Kalibrierung: 1920px -> clamp(1px, 0.052vw, 1.6px) ≈ 1.0px ; 2560px ≈ 1.33px ;
   3840px -> 1.6px (gekappt). (1vw = 1 % der Viewport-Breite.) */
:root {
  --hud-u: clamp(1px, 0.052vw, 1.6px);
  --hud-gap: calc(6 * var(--hud-u));
  --hud-radius: calc(3 * var(--hud-u));
}

/* ---- Kompakter Charakter-Frame (ersetzt das große linke FELDFUNK-Panel) ---- */
.hud {
  position: fixed;
  left: calc(12 * var(--hud-u));
  top: calc(12 * var(--hud-u));
  width: calc(210 * var(--hud-u));
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--hud-radius);
  padding: calc(9 * var(--hud-u)) calc(11 * var(--hud-u));
  color: var(--text);
  font-size: calc(11 * var(--hud-u));
  line-height: 1.4;
  user-select: none;
}

/* Kopfzeile: RUFZEICHEN groß + LVL-Chip + SEKTOR */
.cf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(6 * var(--hud-u));
}
/* LVL-Badge-Zeile UNTER dem Namen (User 2026-06-15); Trennlinie liegt jetzt darunter,
   nicht zwischen Name und LVL. */
.cf-lvlrow {
  margin-top: calc(3 * var(--hud-u));
  border-bottom: 1px solid var(--line);
  padding-bottom: calc(6 * var(--hud-u));
  margin-bottom: calc(7 * var(--hud-u));
}
.cf-callsign {
  color: var(--amber);
  font-weight: 600;
  font-size: calc(14 * var(--hud-u));
  letter-spacing: calc(1.5 * var(--hud-u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-lvl {
  color: #15181c;
  background: var(--amber);
  font-weight: 700;
  font-size: calc(9 * var(--hud-u));
  letter-spacing: calc(0.5 * var(--hud-u));
  padding: calc(1 * var(--hud-u)) calc(5 * var(--hud-u));
  border-radius: var(--hud-radius);
  white-space: nowrap;
}
.cf-sector {
  display: block;
  color: var(--dim);
  font-size: calc(9 * var(--hud-u));
  letter-spacing: calc(2 * var(--hud-u));
  margin-top: calc(2 * var(--hud-u));
}
.cf-sector b { color: var(--text); font-weight: 600; }

/* Status-Balken (ZUSTAND/HUNGER/INFEKTION) — Label links, Wert rechts, Balken darunter */
.cf-stat { margin-bottom: calc(6 * var(--hud-u)); }
.cf-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(9 * var(--hud-u));
  letter-spacing: calc(1 * var(--hud-u));
}
.cf-stat-row .cf-label { color: var(--dim); }
.cf-stat-row .cf-val { color: var(--text); font-weight: 600; }
.cf-bar {
  position: relative;
  height: calc(7 * var(--hud-u));
  background: #2a2026;
  border: 1px solid var(--line);
  border-radius: calc(2 * var(--hud-u));
  margin-top: calc(2 * var(--hud-u));
  overflow: hidden;
}
.cf-bar > div {
  height: 100%;
  width: 100%;
  transition: width .15s, background .15s;
}
/* Alte Inline-<style>-Regeln (#hpbar mit fixer Höhe/Margin) per ID-Spezifität
   überschreiben, damit das neue Char-Frame-Layout konsistent bleibt. */
#hpbar.cf-bar { height: calc(7 * var(--hud-u)); margin: calc(2 * var(--hud-u)) 0 0; }
#hpfill { background: var(--ok); }
#xpbar.cf-bar { height: calc(3 * var(--hud-u)); }

/* Lärmprofil-Zeile (Signatur-Mechanik): Label + Status-Text */
.cf-noise {
  display: flex;
  justify-content: space-between;
  font-size: calc(9 * var(--hud-u));
  letter-spacing: calc(1 * var(--hud-u));
  margin: calc(4 * var(--hud-u)) 0;
}
.cf-noise .cf-label { color: var(--dim); }

/* Zustands-Chips (nur sichtbar wenn aktiv) */
.cf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 * var(--hud-u));
  margin: calc(4 * var(--hud-u)) 0 calc(2 * var(--hud-u));
}
.cf-chip {
  display: none;
  font-size: calc(8 * var(--hud-u));
  font-weight: 700;
  letter-spacing: calc(1 * var(--hud-u));
  padding: calc(1 * var(--hud-u)) calc(6 * var(--hud-u));
  border-radius: calc(8 * var(--hud-u));
  border: 1px solid currentColor;
}
.cf-chip.on { display: inline-block; }
.cf-chip.chip-bleed { color: var(--blood); }
.cf-chip.chip-exhaust { color: var(--amber); }
.cf-chip.chip-stealth { color: var(--ok); }

/* Sekundär-Block (REP / SPIELER-ZOMBIES / UHRZEIT / FUNK / RENDERER / FPS).
   Kompakt zweispaltig, kleiner gesetzt — bleibt sichtbar, dominiert aber nicht. */
.cf-sec {
  border-top: 1px solid var(--line);
  margin-top: calc(6 * var(--hud-u));
  padding-top: calc(5 * var(--hud-u));
}
.cf-sec .row {
  display: flex;
  justify-content: space-between;
  font-size: calc(9 * var(--hud-u));
  line-height: 1.5;
}
.cf-sec .row span:first-child { color: var(--dim); }
.cf-sec #fps-counter { color: var(--dim); font-size: calc(9 * var(--hud-u)); }

/* ---- Party-Anzeige (GRUPPE 4/6) ---- */
#partyPanel {
  position: fixed;
  left: calc(12 * var(--hud-u));
  top: calc(12 * var(--hud-u));
  width: calc(196 * var(--hud-u));
  display: none;
  flex-direction: column;
  gap: calc(4 * var(--hud-u));
  z-index: 30;
  user-select: none;
  pointer-events: none; /* nur Anzeige — Interaktion über Gruppen-Panel [G] */
}
#partyPanel.open { display: flex; }
.party-title {
  color: var(--amber);
  font: 700 calc(9 * var(--hud-u)) monospace;
  letter-spacing: calc(2 * var(--hud-u));
}
.party-card {
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--hud-radius);
  padding: calc(4 * var(--hud-u)) calc(7 * var(--hud-u));
}
.party-card.me { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.party-card.dead { opacity: 0.55; }
.party-card.dc { border-style: dashed; }
.party-chead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(8 * var(--hud-u)); /* fester Abstand Name↔Sektor — auch ohne Leader-Stern (User-Bug 2026-06-15) */
  font-size: calc(9 * var(--hud-u));
  letter-spacing: calc(0.5 * var(--hud-u));
}
.party-cname { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.party-cname .party-lead { color: var(--amber); font-size: calc(8 * var(--hud-u)); margin-left: calc(4 * var(--hud-u)); }
.party-czone { color: var(--dim); font-size: calc(8 * var(--hud-u)); flex: 0 0 auto; }
/* Rechte Gruppe der Party-Karte: Leader-★ + Sektor zusammen, rechtsbündig (User 2026-06-15) */
.party-cright { display: flex; align-items: baseline; gap: calc(4 * var(--hud-u)); flex: 0 0 auto; }
/* Rollen-Badge (vanguard|medic|damage|engineer) — kleiner Chip LINKS vor dem Namen.
   Bernstein-Akzent (UI-Signaturfarbe); Rolle vom Server abgeleitet (group.go). */
.party-role {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(11 * var(--hud-u)); height: calc(11 * var(--hud-u));
  margin-right: calc(4 * var(--hud-u));
  border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--line));
  border-radius: calc(2 * var(--hud-u));
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  font: 700 calc(8 * var(--hud-u)) monospace;
  letter-spacing: 0;
  cursor: help;
}
.party-role-vanguard { color: #8fb7ff; border-color: color-mix(in srgb, #8fb7ff 55%, var(--line)); background: color-mix(in srgb, #8fb7ff 14%, transparent); }
.party-role-medic    { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.party-hpbar {
  height: calc(5 * var(--hud-u));
  background: #0d1014;
  border: 1px solid var(--line);
  border-radius: calc(2 * var(--hud-u));
  margin-top: calc(3 * var(--hud-u));
  overflow: hidden;
}
.party-hpfill { height: 100%; transition: width .2s, background .2s; }

/* ---- Raid-Anzeige (RAID 18/40) — 4-Gruppen-Grid (vorausschauend) ---- */
#raidPanel {
  position: fixed;
  right: calc(12 * var(--hud-u));
  top: calc(12 * var(--hud-u));
  display: none;
  z-index: 30;
  user-select: none;
  pointer-events: none;
}
#raidPanel.open { display: block; }
.raid-title {
  color: var(--amber);
  font: 700 calc(9 * var(--hud-u)) monospace;
  letter-spacing: calc(2 * var(--hud-u));
  text-align: right;
  margin-bottom: calc(4 * var(--hud-u));
}
.raid-grid {
  display: grid;
  grid-template-columns: repeat(4, calc(96 * var(--hud-u)));
  gap: calc(5 * var(--hud-u));
}
.raid-group {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--hud-u));
}
.raid-ghead {
  color: var(--dim);
  font: 700 calc(8 * var(--hud-u)) monospace;
  letter-spacing: calc(1 * var(--hud-u));
}
.raid-card {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: calc(2 * var(--hud-u));
  padding: calc(2 * var(--hud-u)) calc(5 * var(--hud-u));
}
.raid-card.me { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.raid-card.dead { opacity: 0.5; }
.raid-card.empty { opacity: 0.3; }
.raid-cname {
  font-size: calc(8 * var(--hud-u));
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.raid-hpbar {
  height: calc(4 * var(--hud-u));
  background: #0d1014;
  border-radius: calc(1 * var(--hud-u));
  margin-top: calc(2 * var(--hud-u));
  overflow: hidden;
}
.raid-hpfill { height: 100%; transition: width .2s, background .2s; }

/* ---- Responsives Micro-Menü (unten rechts) ----
   War fix 52px -> auf WQHD/4K unlesbar. Jetzt über --hud-u gekoppelt. */
#micromenu {
  right: calc(12 * var(--hud-u));
  /* Auf Hotbar-Höhe HERUNTER (User-Korrektur 2026-06-15: NICHT die Hotbar hochziehen,
     sondern die Micro-Bar runter zur Hotbar). Beide teilen jetzt bottom = 50*--hud-u. */
  bottom: calc(50 * var(--hud-u));
  gap: calc(5 * var(--hud-u));
}
.mmbtn {
  width: calc(48 * var(--hud-u));
  height: calc(48 * var(--hud-u));
  font-size: calc(16 * var(--hud-u));
  border-radius: var(--hud-radius);
}
.mmbtn span { font-size: calc(8 * var(--hud-u)); margin-top: calc(3 * var(--hud-u)); }
.mmbtn span.mm-icon { font-size: calc(16 * var(--hud-u)); }

/* Skill-Bar mitskalieren, damit sie zur Mikro-Menübar passt.
   bottom auf denselben --hud-u-Baseline-Wert wie #micromenu (110) gesetzt → beide Bars
   fluchten unten exakt (Button-Höhe ist bei beiden 48 hud-u). Überschreibt den alten
   Inline-Wert bottom:50px aus index.html (lag tiefer → unschöner Versatz, User-Bug 2026-06-15). */
.skillbar { bottom: calc(50 * var(--hud-u)); gap: calc(6 * var(--hud-u)); }
.skill {
  width: calc(48 * var(--hud-u));
  height: calc(48 * var(--hud-u));
  font-size: calc(14 * var(--hud-u));
}
.skill span { font-size: calc(8 * var(--hud-u)); }