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

.xp-guide {
  display: grid;
  /* Одна колонка не шире экрана: иначе сетка растягивается по самому широкому ребёнку (телефон 320). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  max-width: var(--page-max);
  margin: var(--space-5) 0;
}

.xp-guide__title {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Объяснение «почему» — на плашке: поверх картинки фона мелкий светлый текст не читается. */
.xp-guide__text {
  max-width: var(--text-width);
  padding: var(--space-3);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: var(--accent-line) solid var(--color-accent);
  border-radius: var(--radius);
}

/* Карточки правил: столько в ряд, сколько влезает, на телефоне — столбиком. */
.xp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xp-fact-min)), 1fr));
  gap: var(--space-3);
}

.xp-fact {
  display: grid;
  grid-template-columns: var(--stat-icon) 1fr;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.xp-fact__icon {
  width: var(--stat-icon);
  height: var(--stat-icon);
  color: var(--color-accent);
}

.xp-fact__title {
  align-self: center;
  font-weight: 700;
}

.xp-fact__text {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* Шкала: полоса цвета слева, название, разница уровней, что с опытом. */
.xp-scale {
  display: grid;
  gap: var(--space-1);
  max-width: var(--text-width);
}

.xp-scale__band {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-left: 4px solid var(--xp-tone);
  border-radius: calc(var(--radius) / 2);
}

.xp-scale__name {
  font-weight: 700;
  color: var(--xp-tone);
}

.xp-scale__range,
.xp-scale__xp {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.xp-tone--red { --xp-tone: var(--xp-red); }
.xp-tone--orange { --xp-tone: var(--xp-orange); }
.xp-tone--yellow { --xp-tone: var(--xp-yellow); }
.xp-tone--green { --xp-tone: var(--xp-green); }
.xp-tone--gray { --xp-tone: var(--xp-gray); }

/* Две таблички рядом, на узком экране — одна под другой. */
.xp-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xp-panel-min)), 1fr));
  gap: var(--space-3);
  max-width: var(--text-width);
}

.xp-panel {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.xp-panel__title {
  font-weight: 700;
}

.xp-panel__control {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-muted);
}

.xp-panel__note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.xp-step {
  width: var(--control-height);
  height: var(--control-height);
  font-size: 1.25rem;
  color: var(--color-text);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) / 2);
  cursor: pointer;
  transition: border-color var(--speed-fast) var(--ease);
}

.xp-step:hover,
.xp-step:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}