/* Dodatki z Tzara: panel bohatera, ekwipunek, pasek bohaterów (js/tzar_ui.js) */
.tzinfo { display: flex; flex-direction: column; gap: 4px; min-width: 150px; max-width: 240px; font-size: 12px; }
.tzinfo .tz-hero { color: #ffd84a; font-size: 14px; font-weight: bold; }
.tzinfo .tz-vet { color: #f0e0b0; font-size: 13px; }
.tzinfo .tz-aura { color: #ffe48a; }
.tz-xp { height: 5px; background: #1a1611; border: 1px solid #5a4a30; width: 150px; }
.tz-xp > div { height: 100%; background: linear-gradient(90deg, #b8902a, #f0d060); }
.tz-xp.mana > div { background: linear-gradient(90deg, #4a5ad0, #9ab4ff); }
.tz-inv { display: grid; grid-template-columns: repeat(6, 30px); gap: 3px; margin-top: 2px; }
.tz-slot { width: 30px; height: 30px; background: #1a1611; border: 1px solid #6a5838; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tz-slot:hover { border-color: var(--gold); }
.tz-slot.empty { opacity: .45; cursor: default; }
.tz-slot canvas { width: 26px; height: 26px; }
#tzHeroes { position: absolute; top: 44px; left: 8px; z-index: 3; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
#tzHeroes.hidden { display: none; }
#tzHeroes .tzh-title { color: var(--gold); font-size: 11px; text-shadow: 0 1px 0 #000; }
#tzHeroes .tzh { pointer-events: auto; display: flex; gap: 5px; align-items: center; background: linear-gradient(#3e3426e8, #241e16e8);
  border: 1px solid var(--edge); border-radius: 3px; padding: 2px 6px 2px 2px; cursor: pointer; min-width: 150px; }
#tzHeroes .tzh:hover { border-color: #ffd84a; }
#tzHeroes .tzh canvas { width: 28px; height: 28px; background: #1a1611; }
#tzHeroes .tzh-t { display: flex; flex-direction: column; font-size: 10px; color: var(--muted); line-height: 1.2; }
#tzHeroes .tzh-t b { color: #ffd84a; font-size: 12px; }
#tzHeroes .tzh-hp { height: 3px; background: #1a1611; margin-top: 2px; width: 110px; }
#tzHeroes .tzh-hp > div { height: 100%; }