/* Прокачка: уровень, опыт, достижения */
.prg,
.prg-badge,
.prg-celebrate {
  --gold: var(--accent);
  --gold-deep: color-mix(in srgb, var(--accent) 72%, var(--text));
}
.prg-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.prg-hero-main { flex: 1; min-width: 0; }
/* Подпись над званием — как .eyebrow сайта: мелкие золотые прописные с разрядкой. */
.prg-level-label { color: var(--accent); font: 700 var(--fs-xs) / 1.3 var(--font-text); letter-spacing: 0.18em; text-transform: uppercase; }
.prg-title { margin: var(--sp-1) 0 var(--sp-3); font: 400 var(--fs-2xl) / 1.2 var(--font-display); }

/* Значок уровня — медальон-картинка (public/levels), номер уровня — в золотом ромбе внизу (ромб — мотив орнамента). */
.prg-decal { display: block; flex: none; object-fit: contain; }
.prg-crest { position: relative; flex: none; display: inline-block; }
.prg-crest .prg-decal { width: 56px; height: 56px; }
.prg-crest.big .prg-decal { width: 112px; height: 112px; }
.prg-crest-num {
  position: absolute;
  left: 50%;
  bottom: -12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  isolation: isolate;
  color: var(--on-accent);
  font: 700 var(--fs-sm) / 1 var(--font-text);
  font-variant-numeric: lining-nums tabular-nums;
}
.prg-crest-num::before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  transform: rotate(45deg);
}

.prg-bar-row { display: flex; align-items: center; gap: var(--sp-3); }
.prg-bar-row .prg-bar { flex: 1; }
.prg-bar { height: 8px; background: var(--accent-soft); border: 1px solid var(--frame-soft); border-radius: var(--r-sm); overflow: hidden; }

/* Кружок «?» и подсказка к нему */
.prg-help { position: relative; display: inline-flex; flex: none; }
.prg-help-btn {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--field);
  color: var(--muted);
  font: 700 var(--fs-xs) / 1 var(--font-text);
  cursor: help;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.prg-help-btn::after { content: ''; position: absolute; inset: -6px; }
.prg-help-btn:hover,
.prg-help-btn:focus-visible { color: var(--accent); border-color: var(--accent); }
.prg-help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prg-tip {
  position: absolute;
  left: -6px;
  top: calc(100% + var(--sp-2));
  z-index: 20;
  width: min(460px, calc(100vw - 64px));
  padding: var(--sp-3) var(--sp-4);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
  pointer-events: none;
}
.prg-help:hover .prg-tip,
.prg-help:focus-within .prg-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.prg-help.closed .prg-tip { opacity: 0; visibility: hidden; }
.prg-bar.small { height: 6px; flex: 1; }
.prg-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width var(--dur-slow) var(--ease-out); }
.prg-xp { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-ui); font-variant-numeric: lining-nums tabular-nums; }

/* Счёт — одна панель на три колонки, между ними волосяные золотые черты; цифры антиквой. */
.prg-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--sp-4) 0 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.prg-stat { display: grid; justify-items: center; align-content: start; gap: var(--sp-1); padding: var(--sp-4) var(--sp-3); text-align: center; }
.prg-stat + .prg-stat { background: linear-gradient(var(--frame-soft), var(--frame-soft)) left center / 1px 60% no-repeat; }
.prg-stat-value { color: var(--accent); font: 400 var(--fs-3xl) / 1.1 var(--font-display); font-variant-numeric: lining-nums; }
.prg-stat-label { color: var(--muted); font: 700 var(--fs-2xs) / 1.3 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; }

/* Заголовок группы достижений: антиква, справа счёт, под ними волосяная линия. */
.prg-section { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--frame-soft); font: 400 var(--fs-xl) / 1.25 var(--font-display); }
.prg-section-count { color: var(--muted); font: 400 var(--fs-sm) var(--font-text); font-variant-numeric: lining-nums tabular-nums; }
/* «Звания» — заголовок между золотыми линиями (.rule-title из noctis.css, он подключён позже — отсюда двойной класс),
   поменьше главного. */
.rule-title.prg-rule { margin: var(--sp-8) 0 var(--sp-5); font-size: var(--fs-xl); }

/* Лестница званий на вкладке «Уровень»: медальон, над званием — номер уровня и порог опыта. */
.prg-ranks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.prg-rank { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.prg-rank > .prg-decal { width: 40px; height: 40px; }
.prg-rank-text { display: grid; gap: 2px; min-width: 0; }
.prg-rank-meta { color: var(--muted); font: 700 var(--fs-2xs) / 1.3 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.prg-rank-title { color: var(--text); font: 400 var(--fs-md) / 1.25 var(--font-display); }
.prg-rank.passed .prg-rank-meta { color: var(--accent); }
.prg-rank.current { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--frame-soft); }
.prg-rank.current .prg-rank-meta { color: var(--accent); }
.prg-rank:not(.passed):not(.current) .prg-rank-title { color: var(--muted); }
/* Ещё не открытые звания — приглушённые, без цвета */
.prg-rank:not(.passed):not(.current) .prg-decal { filter: grayscale(1); opacity: 0.45; }

/* Сводка на вкладке «Достижения» */
.prg-summary { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.prg-summary-count { flex: none; color: var(--muted); font-size: var(--fs-lg); font-variant-numeric: lining-nums; }
.prg-summary-count strong { color: var(--accent); font: 400 var(--fs-3xl) / 1 var(--font-display); }
.prg-summary-main { flex: 1; min-width: 0; display: grid; gap: var(--sp-2); }

.prg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
/* Закрытое достижение приглушено табличкой и названием, а не прозрачностью всей карточки: описание и счётчик
   должны читаться (контраст 4.5:1). */
.prg-ach { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.prg-ach:not(.unlocked) .prg-ach-title { opacity: 0.7; }
/* Табличка — картинка 56 px (public/achievements); запасной эмодзи — того же размера по центру. */
.prg-ach-icon { display: grid; flex: none; place-items: center; width: 56px; height: 56px; font-size: var(--fs-3xl); line-height: 1; filter: grayscale(1); opacity: 0.5; }
.prg-ach-icon img { display: block; width: 56px; height: 56px; }
.prg-ach-body { min-width: 0; flex: 1; }
.prg-ach-title { font: 400 var(--fs-md) / 1.3 var(--font-display); }
.prg-ach-desc { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 var(--sp-2); }
.prg-ach-date { color: var(--accent); font-size: var(--fs-sm); }
.prg-ach-progress { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.prg-ach.unlocked { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-deep) inset, var(--shadow); }
.prg-ach.unlocked .prg-ach-icon { filter: none; opacity: 1; }

/* Уровень в шапке — медальон 28 px и подпись в две строки, без рамки: как пункт меню, а не кнопка-таблетка. */
.prg-badge { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); white-space: nowrap; }
.prg-badge .prg-decal { width: 28px; height: 28px; border-radius: 50%; transition: box-shadow var(--dur-fast) var(--ease-out); }
.prg-badge-text { display: grid; gap: 2px; }
.prg-badge-level { color: var(--accent); font: 700 var(--fs-2xs) / 1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.prg-badge-title { color: var(--text); font: 400 var(--fs-sm) / 1.15 var(--font-display); transition: color var(--dur-fast) var(--ease-out); }

.prg-celebrate { display: grid; gap: 16px; }
.prg-up { display: flex; align-items: center; gap: 16px; }
.prg-up .prg-title { margin: 0; }

@media (max-width: 560px) {
  /* В шапке телефона — только медальон и номер уровня: со званием шапка не помещается. */
  .level-link .prg-badge-title,
  .level-link .prg-badge-word { display: none; }
  .level-link .prg-badge-level { font: 400 var(--fs-md) / 1 var(--font-display); letter-spacing: 0; }
  .prg-hero { flex-direction: column; gap: var(--sp-6); text-align: center; }
  .prg-hero-main { align-self: stretch; }
  .prg-stat { padding: var(--sp-3) var(--sp-2); }
  .prg-stat-value { font-size: var(--fs-2xl); }
  .prg-summary { gap: var(--sp-4); padding: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .prg-tip, .prg-help-btn, .prg-bar-fill { transition: none; }
}