/* Карточка героя — ОДНА на главной (index.html) и в кабинете героя (hero.html), п.14 ТЗ «Классик» №2
   (08.10.2026). Разметку строит herocard.js. Все размеры в «u» (см. ui.css). */
.hm-muted { color: var(--k-muted, #b9ab9b); }
.hm-hero-host { position: relative; width: calc(366 * var(--u)); max-width: 100%; }
@media (max-width: 900px) { .hm-hero-host { width: 100%; max-width: 420px; --u: 1px; } }

/* ---------- Карточка героя ---------- */
.hm-hero { position: relative; height: calc(318 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.hm-av { position: absolute; left: 0; top: 0; width: calc(125 * var(--u)); height: calc(125 * var(--u)); }
.hm-av-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, #ff8a2a, #d4220f 22%, #7a0f08 40%, #e5461a 62%, #ffb24a 80%, #ff8a2a);
  box-shadow: 0 0 calc(22 * var(--u)) rgba(255, 70, 20, 0.55), inset 0 0 calc(6 * var(--u)) rgba(0, 0, 0, 0.6);
  animation: hmRingSpin 14s linear infinite;
}
.hm-av-in {
  position: absolute; inset: calc(6 * var(--u)); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #3a1a10, #100604);
  box-shadow: 0 0 0 calc(2 * var(--u)) #170a05; display: flex; align-items: center; justify-content: center; font-size: calc(60 * var(--u));
}
.hm-av-in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.hm-level {
  position: absolute; left: calc(48 * var(--u)); top: calc(92 * var(--u)); width: calc(38 * var(--u)); height: calc(42 * var(--u));
  display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-weight: 700; font-size: calc(30 * var(--u)); color: #ffd890;
  clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);
  background: linear-gradient(180deg, #e3a84e, #8a5018 55%, #5a300c); text-shadow: 0 1px 0 #3b1e06, 0 0 8px rgba(255, 190, 90, 0.8);
}
.hm-level::before { content: ""; position: absolute; inset: calc(3 * var(--u)); clip-path: inherit; background: linear-gradient(180deg, #4a2a12, #26140a); z-index: -1; }
.hm-level span { position: relative; }
.hm-level-wrap { position: absolute; left: calc(44 * var(--u)); top: calc(88 * var(--u)); width: calc(44 * var(--u)); height: calc(48 * var(--u)); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 8px rgba(255, 150, 40, 0.5)); }
.hm-level-wrap .hm-level { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; }
.hm-level-wrap .hm-level::before { z-index: 0; }
.hm-level-wrap .hm-level span { z-index: 1; }

.hm-id { position: absolute; left: calc(145 * var(--u)); top: calc(12 * var(--u)); right: 0; }
.hm-name-row { display: flex; align-items: center; gap: calc(11 * var(--u)); height: calc(32 * var(--u)); }
.hm-name { font-size: calc(24 * var(--u)); font-weight: 600; color: #fff; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(130 * var(--u)); }
.hm-role {
  flex: none; font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #ffc366; line-height: 1;
  padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: calc(6 * var(--u)); border: 1px solid rgba(255, 170, 70, 0.55);
  background: linear-gradient(180deg, rgba(255, 150, 40, 0.22), rgba(255, 110, 20, 0.08)); box-shadow: inset 0 0 calc(8 * var(--u)) rgba(255, 140, 40, 0.25), 0 0 calc(10 * var(--u)) rgba(255, 120, 30, 0.2);
}
.hm-clan { display: block; margin-top: calc(9 * var(--u)); font-size: calc(18 * var(--u)); color: #e9dccb; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-clan:hover { color: #fff; text-decoration: underline; }
.hm-online { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(11 * var(--u)); font-size: calc(15 * var(--u)); color: #e9dccb; }
.hm-dot { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9dffa8, #22c443 70%); box-shadow: 0 0 calc(9 * var(--u)) #2fe05a; animation: hmLive 2.4s ease-in-out infinite; }
.hm-dot.off { background: #6e5d4d; box-shadow: none; animation: none; }

.hm-row { position: absolute; left: 0; right: calc(1 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.hm-row .ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); filter: drop-shadow(0 0 calc(7 * var(--u)) rgba(255, 140, 40, 0.5)); }
.hm-row-name { font-size: calc(20 * var(--u)); font-weight: 600; color: #fff; }
.hm-row-val { margin-left: auto; font-size: calc(17 * var(--u)); font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.hm-row-elo { top: calc(142 * var(--u)); height: calc(34 * var(--u)); }
.hm-row-life { top: calc(204 * var(--u)); height: calc(34 * var(--u)); }
.hm-row-life .hm-row-name { font-size: calc(18 * var(--u)); font-weight: 500; }
.hm-row-life .ic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: 0 calc(2 * var(--u)); animation: uiBeat 1.8s ease-in-out infinite; transform-origin: 50% 55%; }
.hm-row-life.low .ic { animation-duration: 0.8s; }
.hm-row-elo .ic { animation: hmGlint 4.2s ease-in-out infinite; }
.hm-hero .hm-bar { position: absolute; left: 0; right: 0; height: calc(12 * var(--u)); }
.hm-hero .hm-bar-elo { top: calc(180 * var(--u)); --c: #ffb02e; }
.hm-hero .hm-bar-elo > i { background: linear-gradient(90deg, #ff9a1f, #ffc24a 70%, #ffd978); }
.hm-hero .hm-bar-life { top: calc(240 * var(--u)); height: calc(13 * var(--u)); --c: #34d058; }
.hm-hero .hm-bar-life > i { background: var(--c); }


/* СВХ — сумма характеристик (п.1): строка под именем и кланом */
.hm-cbx { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(9 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 700; color: #ffc94d; letter-spacing: 0.04em; cursor: default; }
.hm-cbx b { font-family: var(--f-num); font-size: calc(22 * var(--u)); color: #fff; }
.hm-cbx .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(255, 190, 60, 0.6)); }
.hm-online { margin-top: calc(8 * var(--u)); }
a.hm-clan, .hm-clan[data-clan-id] { cursor: pointer; }

/* Подсказки при наведении на ELO и Жизнь (п.28) */
.hm-hit { position: absolute; left: 0; right: 0; z-index: 3; }
.hm-hit-elo { top: calc(138 * var(--u)); height: calc(58 * var(--u)); }
.hm-hit-life { top: calc(200 * var(--u)); height: calc(60 * var(--u)); }
.hm-hit::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 6px); width: max-content; max-width: calc(330 * var(--u));
  padding: 8px 12px; border-radius: 8px; font-size: max(12px, calc(14 * var(--u))); line-height: 1.35; font-weight: 500; color: #fff; text-align: left; white-space: normal;
  background: rgba(14, 8, 5, 0.96); border: 1px solid rgba(255, 170, 70, 0.55); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.hm-hit:hover::after, .hm-hit:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Под шкалой жизни: время до полного восстановления + зелье (п.28) */
.hm-life-foot { position: absolute; left: 0; right: 0; top: calc(262 * var(--u)); min-height: calc(46 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); justify-content: space-between; }
.hm-life-note { font-size: calc(14 * var(--u)); color: #e9dccb; line-height: 1.3; min-width: 0; }
.hm-life-note b { color: #fff; font-variant-numeric: tabular-nums; }
.hm-life-note.full { color: #7fe39a; }
.hm-potion {
  flex: none; display: inline-flex; align-items: center; gap: calc(8 * var(--u)); cursor: pointer; font: inherit; color: #fff;
  padding: calc(5 * var(--u)) calc(12 * var(--u)) calc(5 * var(--u)) calc(6 * var(--u)); border-radius: 999px;
  background: linear-gradient(180deg, rgba(60, 200, 120, 0.22), rgba(20, 90, 50, 0.3)); border: 1px solid rgba(90, 230, 140, 0.5);
}
.hm-potion:hover { filter: brightness(1.2); }
.hm-potion:disabled { opacity: 0.55; cursor: default; filter: none; }
.hm-potion svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.hm-potion span { font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap; }
.hm-potion.none { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); }

@keyframes hmRingSpin { to { transform: rotate(360deg); } }
@keyframes hmLive { 0%, 100% { box-shadow: 0 0 calc(5 * var(--u)) #2fe05a; } 50% { box-shadow: 0 0 calc(12 * var(--u)) #6dff8a; } }
@keyframes hmGlint { 0%, 70%, 100% { filter: drop-shadow(0 0 calc(7 * var(--u)) rgba(255, 140, 40, 0.5)); } 82% { filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(255, 230, 150, 1)) brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .hm-av-ring, .hm-dot, .hm-row-life .ic, .hm-row-elo .ic { animation: none; } }