/* Светлые палитры профиля и магазина.
 *
 * Эти страницы собраны на семантических переменных из styles.css
 * (--panel-bg, --text-main, --mc-accent и прочие), поэтому под три темы сайта
 * их достаточно перекрасить здесь, а не переписывать полторы тысячи правил.
 * Подключается после styles.css и до pages.css.
 *
 * Тёмный набор остаётся в :root как запасной: если тема почему-то не
 * проставилась, страница будет прежней, а не белой без текста. */

html[data-theme="fox"],
html[data-theme="scaribou"],
html[data-theme="creeper"] {
  /* Поверхности: панель светлая, «подсветка» на ней теперь тёмная, а не
     белая — на белом фоне белая накладка не видна вовсе. */
  --panel-bg: #ffffff;
  --panel-bg-hover: #fffdfb;
  --panel-light: #ffffff;
  --text-main: #4a3a2c;
  --text-heading: #241a12;
  --text-muted: #7b6a5d;

  --surface-1: rgba(36, 26, 18, 0.03);
  --surface-2: rgba(36, 26, 18, 0.05);
  --surface-3: rgba(36, 26, 18, 0.08);
  --surface-4: rgba(36, 26, 18, 0.12);
  --overlay-strong: rgba(36, 26, 18, 0.72);

  --box-shadow-panel: 0 18px 40px -20px rgba(36, 26, 18, 0.28), 0 0 0 1px rgba(36, 26, 18, 0.05);
  --box-shadow-glow: 0 14px 34px -18px var(--mc-accent-glow);
}

html[data-theme="fox"] {
  --bg-color: #fdfaf6;
  --panel-dark: #f7eee3;
  --panel-border: rgba(118, 52, 9, 0.14);
  --panel-border-hover: rgba(217, 107, 30, 0.45);
  --text-link: #d96b1e;
  --text-link-hover: #763409;
  --mc-accent: #d96b1e;
  --mc-accent-glow: rgba(217, 107, 30, 0.35);
  --mc-emerald: #f6a256;
  --mc-emerald-glow: rgba(246, 162, 86, 0.3);
  --mc-cyan: #2f7fa8;
}

html[data-theme="scaribou"] {
  --bg-color: #faf7f7;
  --panel-dark: #f7e9e9;
  --panel-border: rgba(120, 26, 26, 0.14);
  --panel-border-hover: rgba(192, 57, 43, 0.45);
  --text-link: #c0392b;
  --text-link-hover: #8e2020;
  --mc-accent: #c0392b;
  --mc-accent-glow: rgba(192, 57, 43, 0.32);
  --mc-emerald: #e0796a;
  --mc-emerald-glow: rgba(224, 121, 106, 0.3);
  --mc-cyan: #2f7fa8;
}

html[data-theme="creeper"] {
  --bg-color: #f7faf5;
  --panel-dark: #eaf3e6;
  --panel-border: rgba(31, 92, 46, 0.14);
  --panel-border-hover: rgba(62, 142, 75, 0.45);
  --text-link: #2f6c3a;
  --text-link-hover: #1f5c2e;
  --mc-accent: #3e8e4b;
  --mc-accent-glow: rgba(62, 142, 75, 0.32);
  --mc-emerald: #7ab87a;
  --mc-emerald-glow: rgba(122, 184, 122, 0.3);
  --mc-cyan: #2f7fa8;
}

/* Кнопка с акцентным фоном раньше рассчитывала на тёмный текст поверх
   салатового; в светлых темах акцент насыщенный, и надпись должна быть белой. */
html[data-theme="fox"] .btn-accent,
html[data-theme="scaribou"] .btn-accent,
html[data-theme="creeper"] .btn-accent {
  background: var(--mc-accent);
  border-color: transparent;
  color: #ffffff;
}

html[data-theme="fox"] .btn-accent:hover,
html[data-theme="scaribou"] .btn-accent:hover,
html[data-theme="creeper"] .btn-accent:hover {
  filter: brightness(1.06);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Места, где цвет задан мимо переменных: фон страницы, шапка, заголовки.
   Их правим адресно — переопределять ради этого весь styles.css незачем.
   -------------------------------------------------------------------------- */

html[data-theme="fox"] body,
html[data-theme="scaribou"] body,
html[data-theme="creeper"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--mc-accent-glow) 0%, transparent 55%),
    radial-gradient(circle at 85% 65%, var(--mc-emerald-glow) 0%, transparent 45%),
    var(--bg-color);
  color: var(--text-main);
}

/* Сетка-подложка была светлой поверх чёрного; на светлом фоне её не видно,
   поэтому линии становятся тёмными. */
html[data-theme="fox"] body::before,
html[data-theme="scaribou"] body::before,
html[data-theme="creeper"] body::before {
  background-image:
    linear-gradient(to right, rgba(36, 26, 18, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36, 26, 18, 0.03) 1px, transparent 1px);
}

html[data-theme="fox"] .site-header,
html[data-theme="scaribou"] .site-header,
html[data-theme="creeper"] .site-header {
  background: rgba(255, 255, 255, 0.82);
}

html[data-theme="fox"] .profile-display-name,
html[data-theme="scaribou"] .profile-display-name,
html[data-theme="creeper"] .profile-display-name,
html[data-theme="fox"] .panel-title,
html[data-theme="scaribou"] .panel-title,
html[data-theme="creeper"] .panel-title {
  color: var(--text-heading);
}

/* Логотип, счётчики и плашка игрока в шапке были рассчитаны на тёмный фон. */
html[data-theme="fox"] .modern-brand,
html[data-theme="scaribou"] .modern-brand,
html[data-theme="creeper"] .modern-brand,
html[data-theme="fox"] .profile-followers-row b,
html[data-theme="scaribou"] .profile-followers-row b,
html[data-theme="creeper"] .profile-followers-row b {
  color: var(--text-heading);
}

html[data-theme="fox"] .user-header-pill,
html[data-theme="scaribou"] .user-header-pill,
html[data-theme="creeper"] .user-header-pill {
  background: var(--surface-2);
  border-color: var(--panel-border);
  color: var(--text-heading);
}

html[data-theme="fox"] .user-header-pill:hover,
html[data-theme="scaribou"] .user-header-pill:hover,
html[data-theme="creeper"] .user-header-pill:hover {
  background: var(--surface-3);
}

/* Неполученный значок: чёрный круг на светлой карточке выглядел дырой,
   поэтому он становится бледной заглушкой с пунктиром. */
html[data-theme="fox"] .achievement-badge.secret,
html[data-theme="scaribou"] .achievement-badge.secret,
html[data-theme="creeper"] .achievement-badge.secret {
  background: var(--surface-1);
  border: 2px dashed var(--panel-border);
  color: var(--text-muted);
}

html[data-theme="fox"] .achievement-badge.secret .secret-qmark,
html[data-theme="scaribou"] .achievement-badge.secret .secret-qmark,
html[data-theme="creeper"] .achievement-badge.secret .secret-qmark {
  color: var(--text-muted);
  text-shadow: none;
}

html[data-theme="fox"] .achievement-badge.secret:hover,
html[data-theme="scaribou"] .achievement-badge.secret:hover,
html[data-theme="creeper"] .achievement-badge.secret:hover {
  border-color: var(--mc-accent);
  box-shadow: 0 4px 14px var(--mc-accent-glow);
}

/* Полученный значок: тёмная сердцевина остаётся — на ней лежат цветные
   иконки, а на белом они теряются. Смягчаем только тень. */
html[data-theme="fox"] .achievement-badge.earned,
html[data-theme="scaribou"] .achievement-badge.earned,
html[data-theme="creeper"] .achievement-badge.earned {
  border-color: var(--mc-accent);
  box-shadow: 0 4px 14px var(--mc-accent-glow);
}

/* --------------------------------------------------------------------------
   Блоки с собственным тёмным фоном: инвентарь, дерево достижений, рейтинги,
   витрина магазина. Светлыми они не станут от одних переменных — у каждого
   свой цвет прямо в правиле.
   -------------------------------------------------------------------------- */

html[data-theme="fox"] .profile-subline,
html[data-theme="scaribou"] .profile-subline,
html[data-theme="creeper"] .profile-subline {
  color: var(--text-muted);
}

html[data-theme="fox"] .inv-wrap,
html[data-theme="scaribou"] .inv-wrap,
html[data-theme="creeper"] .inv-wrap {
  background: var(--surface-2);
}

html[data-theme="fox"] .inv-slot,
html[data-theme="scaribou"] .inv-slot,
html[data-theme="creeper"] .inv-slot {
  background: var(--surface-2);
  border-color: var(--panel-border);
}

html[data-theme="fox"] .inv-slot.filled,
html[data-theme="scaribou"] .inv-slot.filled,
html[data-theme="creeper"] .inv-slot.filled {
  background: color-mix(in srgb, var(--mc-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--mc-accent) 38%, transparent);
}

html[data-theme="fox"] .feats-map,
html[data-theme="scaribou"] .feats-map,
html[data-theme="creeper"] .feats-map {
  background-color: var(--surface-1);
}

html[data-theme="fox"] .feat-cell,
html[data-theme="scaribou"] .feat-cell,
html[data-theme="creeper"] .feat-cell {
  background: #ffffff;
  border-color: var(--panel-border);
  color: var(--text-heading);
}

html[data-theme="fox"] .feat-cell b,
html[data-theme="scaribou"] .feat-cell b,
html[data-theme="creeper"] .feat-cell b {
  color: var(--text-muted);
}

html[data-theme="fox"] .feat-cell.done,
html[data-theme="scaribou"] .feat-cell.done,
html[data-theme="creeper"] .feat-cell.done {
  border-color: var(--mc-accent);
  background: color-mix(in srgb, var(--mc-accent) 16%, #ffffff);
}

html[data-theme="fox"] .feat-cell.open,
html[data-theme="scaribou"] .feat-cell.open,
html[data-theme="creeper"] .feat-cell.open {
  border-color: color-mix(in srgb, var(--mc-accent) 45%, transparent);
}

html[data-theme="fox"] .rating-row,
html[data-theme="scaribou"] .rating-row,
html[data-theme="creeper"] .rating-row {
  background: var(--surface-1);
  border-color: var(--panel-border);
}

html[data-theme="fox"] .rating-row:hover,
html[data-theme="scaribou"] .rating-row:hover,
html[data-theme="creeper"] .rating-row:hover {
  border-color: var(--panel-border-hover);
}

html[data-theme="fox"] .rating-row.me,
html[data-theme="scaribou"] .rating-row.me,
html[data-theme="creeper"] .rating-row.me {
  border-color: var(--mc-accent);
  background: color-mix(in srgb, var(--mc-accent) 10%, transparent);
}

html[data-theme="fox"] .goods-slot,
html[data-theme="scaribou"] .goods-slot,
html[data-theme="creeper"] .goods-slot {
  background: #ffffff;
  border-color: var(--panel-border);
  color: var(--text-main);
}

html[data-theme="fox"] .goods-slot:hover,
html[data-theme="scaribou"] .goods-slot:hover,
html[data-theme="creeper"] .goods-slot:hover {
  border-color: var(--mc-accent);
  background: color-mix(in srgb, var(--mc-accent) 8%, #ffffff);
}

html[data-theme="fox"] .goods-slot.locked,
html[data-theme="scaribou"] .goods-slot.locked,
html[data-theme="creeper"] .goods-slot.locked {
  background: var(--surface-1);
  border-color: var(--panel-border);
}

html[data-theme="fox"] .goods-slot.locked .goods-name,
.goods-slot.locked .goods-price,
.goods-slot.locked .goods-count,
html[data-theme="scaribou"] .goods-slot.locked .goods-name,
.goods-slot.locked .goods-price,
.goods-slot.locked .goods-count,
html[data-theme="creeper"] .goods-slot.locked .goods-name,
.goods-slot.locked .goods-price,
.goods-slot.locked .goods-count {
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   Волны и полосы (waves.css): их слои задавались тёмными тонами и салатовым
   свечением. Здесь они собираются из акцента темы.
   -------------------------------------------------------------------------- */

html[data-theme="fox"] .tone-hero,
html[data-theme="scaribou"] .tone-hero,
html[data-theme="creeper"] .tone-hero {
  background:
    radial-gradient(ellipse 70% 60% at 20% 20%, var(--mc-accent-glow), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--mc-accent) 12%, #ffffff) 0%, var(--bg-color) 100%);
}

html[data-theme="fox"] .tone-deep,
html[data-theme="scaribou"] .tone-deep,
html[data-theme="creeper"] .tone-deep {
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, var(--mc-accent-glow), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--mc-accent) 8%, #ffffff) 0%, var(--bg-color) 100%);
}

html[data-theme="fox"] .page-band,
html[data-theme="scaribou"] .page-band,
html[data-theme="creeper"] .page-band {
  background:
    radial-gradient(ellipse 60% 70% at 15% 0%, var(--mc-accent-glow), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--mc-accent) 10%, #ffffff), transparent);
}

html[data-theme="fox"] .showcase-shot,
html[data-theme="scaribou"] .showcase-shot,
html[data-theme="creeper"] .showcase-shot {
  background: var(--surface-1);
  border-color: var(--panel-border);
  box-shadow: 0 24px 60px -28px rgba(36, 26, 18, 0.4);
}