/* Блок слева на странице монстра и класса (автор, 2026-09-18: «прямоугольник, как у таблицы, и красиво расписать со
   значками, что есть что, компактно и понятно»). Вид — рамка таблицы (item-table): панель поверх арта с размытием,
   шапка темнее — строка раздела, название, описание; ниже строки через одну светлее: белый значок game-icons, подпись,
   значение справа. Наведение подсвечивает строку, как в таблице. Строки собирает скрипт страницы (info-card.js,
   class-card.js). Перенесено с сайта-базы (Сайт/) без стрелки «назад» и кнопки «Обновить». */

.info-card {
  width: var(--info-card-width);
  max-width: 100%;
  margin-top: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}

.info-card__head {
  padding: var(--space-4);
  background: var(--color-head);
  border-bottom: 1px solid var(--color-line);
  /* Скругление — у шапки и последней строки, а не обрезкой блока: обрезка срезала бы подсказку «?». */
  border-radius: var(--radius) var(--radius) 0 0;
}

.info-card__kicker {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-accent);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.info-card__title {
  font-family: var(--font-accent);
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--color-accent);
}

.info-card__description {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.info-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--row-height-compact);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-line);
  transition: background-color var(--speed-fast) var(--ease);
}

.info-card__row:nth-child(even) {
  background: var(--color-row);
}

.info-card__row:hover {
  background: var(--color-hover);
}

.info-card__row:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.info-card__icon {
  flex: none;
  width: var(--row-icon);
  height: var(--row-icon);
}

.info-card__term {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
}

.info-card__value {
  font-weight: 700;
  text-align: right;
}