/* ===== Hero Section & HUD — Plan 3 =====
   Typography upgrade: Orbitron labels + JetBrains Mono numbers.
   Jedi Survivor aesthetic polish. Zero existing behaviour changed. */

/* ─── Hero section chrome ────────────────────────────────────────────────── */

.hero {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}

/* Subtle circuit-grid overlay on top of the existing atmospheric backdrop */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 0;
}

/* ─── Typography: Orbitron for all UI labels ─────────────────────────────── */

.hero-name {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  letter-spacing: 0.12em;
}

.hero-sub {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  letter-spacing: 0.16em;
}

.bar-name {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  letter-spacing: 0.12em;
}

.shield-label {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  letter-spacing: 0.24em;
}

.stat-label {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  letter-spacing: 0.18em;
}

.resource-name {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.portrait-level {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  letter-spacing: 0.08em;
}

/* ─── Typography: JetBrains Mono for all numbers ─────────────────────────── */

.bar-value,
#hp-value {
  font-family: var(--font-number, "JetBrains Mono", monospace);
  letter-spacing: 0.04em;
}

.shield-value {
  font-family: var(--font-number, "JetBrains Mono", monospace);
}

.stat-value {
  font-family: var(--font-number, "JetBrains Mono", monospace);
  letter-spacing: 0.04em;
}

.resource-pool-count {
  font-family: var(--font-number, "JetBrains Mono", monospace);
}

/* ─── Stat pills: chrome token border ────────────────────────────────────── */

.stat-pill {
  border-left-color: var(--chrome);
}

/* ─── HP bar: accent-tinted track ────────────────────────────────────────── */

.bar {
  background: color-mix(in srgb, var(--accent) 6%, rgba(0,0,0,0.6));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
}

/* ─── Low HP: stronger red treatment (≤30%) ─────────────────────────────── */

body.is-low-hp .hero {
  border-bottom-color: color-mix(in srgb, var(--bad) 50%, var(--border));
}

body.is-low-hp .bar-hp {
  border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bad) 20%, transparent);
}

/* ─── Condition icons: consistent border radius ──────────────────────────── */

.char-effect {
  border-radius: 6px;
  font-size: 14px;
}

/* ─── HP input controls: Orbitron buttons ────────────────────────────────── */

.hp-btn {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  letter-spacing: 0.06em;
}

/* ─── Resources: subtle top border accent ────────────────────────────────── */

.resource {
  border-top: 1px solid color-mix(in srgb, var(--chrome) 20%, transparent);
  border-radius: 4px;
}