/* Табличка блока «Как растёт герой» (xp-guide.js): подпись цветом силы врага, опыт, доля полосой. Строка ровни
   в «Кого бить» подсвечена, серая строка — «серый — 0» во всю ширину. */

.xp-mini {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.xp-mini__head {
  padding: 0 var(--space-2) var(--space-2);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}

/* Опыт и доля — числа справа, заголовки над ними тоже. */
.xp-mini__head:not(:first-child) {
  text-align: right;
}

.xp-mini__row > * {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.xp-mini__row.is-equal {
  background: var(--color-accent-soft);
}

.xp-mini__label {
  font-weight: 700;
  color: var(--xp-tone);
  text-align: left;
  white-space: nowrap;
}

.xp-mini__xp {
  text-align: right;
  white-space: nowrap;
}

/* Доля: число справа, под ним тонкая полоса цвета силы; больше 100 % полоса полная. */
.xp-mini__share {
  width: 45%;
  text-align: right;
  white-space: nowrap;
  background-image: linear-gradient(var(--color-line), var(--color-line));
  background-repeat: no-repeat;
  background-position: left var(--space-2) bottom var(--space-1);
  background-size: calc(100% - 2 * var(--space-2)) var(--xp-bar-height);
  position: relative;
  padding-bottom: calc(var(--xp-bar-height) + var(--space-2));
}

.xp-mini__fill {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-1);
  width: calc((100% - 2 * var(--space-2)) * var(--share, 0));
  height: var(--xp-bar-height);
  background: var(--xp-tone);
  border-radius: calc(var(--xp-bar-height) / 2);
}

.xp-mini__gray {
  color: var(--xp-gray);
}

/* Телефон: в шкале силы три колонки не влезают — разница и опыт уходят под название. */
@media (max-width: 600px) {
  .xp-scale__band {
    grid-template-columns: 1fr;
    gap: 0;
  }
}