/* Блок героя первой тройки «Топа игроков» (top-podium.js), «как окно героя»: место и статус, вещи по бокам и оружие
   под моделью, ник над героем, герой по кругу, уровень, здоровье и мана, время в игре под местом. Первое место крупнее. Место — цветом
   надписи: золото, серебро, бронза; рамка — как у таблицы, без цветной полосы сверху (автор, 2026-09-25). */

.top-podium {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Пока ответа нет или героев нет — блока нет: свой display перебил бы атрибут hidden. */
.top-podium[hidden] {
  display: none;
}

.hero-card {
  --place-color: var(--color-place-1);
  --slot: var(--hero-slot-small);
  --model-width: var(--hero-model-small);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.hero-card--place-1 {
  --slot: var(--hero-slot);
  --model-width: var(--hero-model);
}

.hero-card--place-2 {
  --place-color: var(--color-place-2);
}

.hero-card--place-3 {
  --place-color: var(--color-place-3);
}

.hero-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: var(--space-3);
}

.hero-card__rank {
  display: flex;
  flex-direction: column;
}

.hero-card__place {
  font-family: var(--font-accent);
  color: var(--place-color);
}

.hero-card__played {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.hero-card__doll {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-card__slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero-card__model {
  width: var(--model-width);
  aspect-ratio: 2 / 3;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  border-radius: var(--radius);
  outline-offset: 2px;
}

.hero-card__model.is-dragging {
  cursor: grabbing;
}

/* Полоса кадров фоном: 24 кадра в ряд, видимый кадр — сдвигом фона (top-podium.js). */
.hero-card__strip {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 2400% 100%;
  background-position: 0 0;
  pointer-events: none;
}

.hero-card__weapons {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.hero-card__name {
  margin-bottom: var(--space-2);
  font-family: var(--font-accent);
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.hero-card--place-1 .hero-card__name {
  font-size: 1.5rem;
}

.hero-card__sub {
  margin-top: var(--space-1);
  text-align: center;
  color: var(--color-text-muted);
}

.hero-card__bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: stretch;
  margin-top: var(--space-3);
}

/* Полоса жизни и маны — как в рамке героя игры: тёмное поле, в нём живая жидкость (liquid-bar.js, шейдер игры),
   поверх — «226 / 226» белым с чёрной обводкой. Запас полный по таблице уровней — полоса всегда полная, как у героя
   вне боя. Без WebGL поле залито ровным градиентом тех же цветов. */
.hero-bar {
  --bar-deep: var(--color-life-deep);
  --bar-core: var(--color-life);
  position: relative;
  height: var(--hero-bar-height);
  background: linear-gradient(var(--bar-deep), var(--bar-core) 45%, var(--bar-deep));
  border: 1px solid var(--ability-icon-edge);
  border-radius: var(--ability-icon-radius);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.hero-bar--mana {
  --bar-deep: var(--color-mana-deep);
  --bar-core: var(--color-mana);
}

.hero-bar__liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bar__value {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000;
}

/* Ячейка вещи: значок игры в тёмной рамке; пустая — только рамка. Подсказка вещи всплывает над ячейкой — наведение
   или фокус с клавиатуры; у левого ряда растёт вправо, у правого — влево, чтобы не уходить за край блока. */
.hero-slot {
  position: relative;
  display: block;
  width: var(--slot);
  height: var(--slot);
  background: var(--color-head);
  border: 1px solid var(--color-line);
  border-radius: var(--ability-icon-radius);
}

.hero-slot.is-filled {
  border-color: var(--ability-icon-edge);
  cursor: help;
}

.hero-slot__icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--ability-icon-radius);
}

.hero-slot__tip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: max-content;
  max-width: var(--hint-width);
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  background: linear-gradient(var(--tooltip-tint), var(--tooltip-tint)), var(--tooltip-base);
  border: 1px solid var(--tooltip-edge);
  border-radius: var(--radius);
  box-shadow: var(--tooltip-glow);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
  pointer-events: none;
  z-index: 3;
}

.hero-slot--right .hero-slot__tip {
  left: auto;
  right: 0;
}

.hero-slot:hover .hero-slot__tip,
.hero-slot:focus-visible .hero-slot__tip {
  opacity: 1;
  transform: translateY(0);
}

.hero-slot__tip-name {
  font-family: var(--font-accent);
  color: var(--color-text);
}

.hero-slot__tip-line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}