/* achievements.css v1 — сетка плашек + модалка */
/* Заточено под токены, но с фолбэками, чтобы не развалилось */
.achv-grid{
  --achv-gap: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap: var(--achv-gap);
}

.achv-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  padding:14px 12px;
  border:1px solid var(--border, #e5e7eb);
  border-radius:12px;
  background: var(--card-bg, var(--surface, #fff));
  color: var(--ink, #111827);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  cursor:pointer;
}
.achv-badge:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.12)); }
.achv-badge:focus{ outline: 2px solid var(--accent, #7c3aed); outline-offset: 2px; }
.achv-badge.is-locked{
  filter: grayscale(0.9) opacity(0.8);
  border-style: dashed;
}

.achv-icon{
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:10px;
  background: var(--muted-bg, #f3f4f6);
  overflow:hidden;
}
.achv-icon img{ width:100%; height:100%; object-fit:cover; }
.achv-icon .achv-emoji{ font-size:28px; line-height:1; }
.achv-icon svg{ width:28px; height:28px; fill: currentColor; opacity:.7; }

.achv-title{ font-weight:600; text-align:center; line-height:1.2; }
.achv-rarity{ font-size:12px; opacity:.8; }

.achv-rarity--rare{ color: var(--rare, #2563eb); }
.achv-rarity--epic{ color: var(--epic, #7c3aed); }
.achv-rarity--legendary{ color: var(--legendary, #d97706); }
.achv-rarity--secret{ color: var(--secret, #059669); }

/* ===== Modal ===== */
.achv-modal[hidden]{ display:none !important; }
.achv-modal{
  position:fixed; inset:0; z-index:1000;
}
.achv-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.38);
}
.achv-modal__dialog{
  position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 24px));
  background: var(--card-bg, var(--surface, #fff));
  color: var(--ink, #111827);
  border:1px solid var(--border, #e5e7eb);
  border-radius:16px;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.25));
  padding:18px 18px 16px;
}

.achv-modal__close{
  position:absolute; right:10px; top:8px;
  border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer; color:inherit;
}

.achv-modal__icon{
  width:72px; height:72px; border-radius:14px; background: var(--muted-bg, #f3f4f6);
  display:grid; place-items:center; overflow:hidden; margin-bottom:10px;
}
.achv-modal__icon img{ width:100%; height:100%; object-fit:cover; }
.achv-modal__icon .achv-emoji{ font-size:40px; line-height:1; }
.achv-modal__icon svg{ width:40px; height:40px; fill: currentColor; opacity:.7; }

.achv-modal__title{ margin:0 28px 6px 0; font-size:20px; font-weight:700; }
.achv-modal__rarity{ font-size:13px; opacity:.8; margin-bottom:8px; }
.achv-modal__desc{ margin:0; line-height:1.5; }

/* Лёгкое свечение для редких */
.achv-modal[data-rarity="epic"] .achv-modal__dialog { box-shadow: 0 20px 70px rgba(124,58,237,.35); }
.achv-modal[data-rarity="legendary"] .achv-modal__dialog { box-shadow: 0 20px 70px rgba(217,119,6,.35); }
.achv-modal[data-rarity="rare"] .achv-modal__dialog { box-shadow: 0 20px 70px rgba(37,99,235,.28); }
.achv-modal[data-rarity="secret"] .achv-modal__dialog { box-shadow: 0 20px 70px rgba(5,150,105,.28); }

@media (max-width:480px){
  .achv-badge{ padding:12px 10px; }
  .achv-icon{ width:46px; height:46px; }
}

/* === HOTFIX: фон у PNG/WebP/SVG не нужен === */
.achv-icon.has-img,
.achv-modal__icon.has-img{
  background: transparent !important;
}

/* Чёткая обрезка по радиусу контейнера */
.achv-icon img,
.achv-modal__icon img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  border-radius: inherit;
}

/* ===== RARITY BADGE — заметная «пилюля» ===== */
.achv-rarity{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.2px;
  text-transform:none;
  opacity:1;                /* убираем прежнее приглушение */
  border:1px solid var(--rarity-border, rgba(255,255,255,.14));
  background: var(--rarity-bg, rgba(255,255,255,.06));
  color: var(--rarity-fg, currentColor);
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 6px 16px var(--rarity-glow, rgba(0,0,0,.12));
  transform: translateZ(0); /* чётче на ретинах */
}

/* маленькая иконочка по редкости */
.achv-rarity::before{
  content: var(--rarity-ico, "●");
  font-size: .95em;
  transform: translateY(-.5px);
  opacity:.95;
}

/* Варианты редкостей — задаём цветовую схему через CSS-переменные */
.achv-rarity.achv-rarity--common{
  --rarity: var(--common, #64748b);
  --rarity-ico: "●";
  --rarity-bg:   linear-gradient(180deg, color-mix(in srgb, var(--rarity) 18%, transparent), color-mix(in srgb, var(--rarity) 8%, transparent));
  --rarity-border: color-mix(in srgb, var(--rarity) 35%, rgba(255,255,255,.18));
  --rarity-fg: color-mix(in srgb, #fff 88%, var(--rarity) 12%);
  --rarity-glow: color-mix(in srgb, var(--rarity) 20%, transparent);
}
.achv-rarity.achv-rarity--rare{
  --rarity: var(--rare, #2563eb);
  --rarity-ico: "◆";
  --rarity-bg:   linear-gradient(180deg, color-mix(in srgb, var(--rarity) 22%, transparent), color-mix(in srgb, var(--rarity) 10%, transparent));
  --rarity-border: color-mix(in srgb, var(--rarity) 45%, rgba(255,255,255,.16));
  --rarity-fg: color-mix(in srgb, #fff 90%, var(--rarity) 10%);
  --rarity-glow: color-mix(in srgb, var(--rarity) 28%, transparent);
}
.achv-rarity.achv-rarity--epic{
  --rarity: var(--epic, #7c3aed);
  --rarity-ico: "✦";
  --rarity-bg:   linear-gradient(180deg, color-mix(in srgb, var(--rarity) 24%, transparent), color-mix(in srgb, var(--rarity) 12%, transparent));
  --rarity-border: color-mix(in srgb, var(--rarity) 48%, rgba(255,255,255,.16));
  --rarity-fg: color-mix(in srgb, #fff 92%, var(--rarity) 8%);
  --rarity-glow: color-mix(in srgb, var(--rarity) 32%, transparent);
}
.achv-rarity.achv-rarity--legendary{
  --rarity: var(--legendary, #d97706);
  --rarity-ico: "★";
  --rarity-bg:   linear-gradient(180deg, color-mix(in srgb, var(--rarity) 26%, transparent), color-mix(in srgb, var(--rarity) 12%, transparent));
  --rarity-border: color-mix(in srgb, var(--rarity) 52%, rgba(255,255,255,.16));
  --rarity-fg: color-mix(in srgb, #fff 92%, var(--rarity) 8%);
  --rarity-glow: color-mix(in srgb, var(--rarity) 34%, transparent);
}
.achv-rarity.achv-rarity--secret{
  --rarity: var(--secret, #059669);
  --rarity-ico: "❖";
  --rarity-bg:   linear-gradient(180deg, color-mix(in srgb, var(--rarity) 24%, transparent), color-mix(in srgb, var(--rarity) 10%, transparent));
  --rarity-border: color-mix(in srgb, var(--rarity) 50%, rgba(255,255,255,.14));
  --rarity-fg: color-mix(in srgb, #fff 92%, var(--rarity) 8%);
  --rarity-glow: color-mix(in srgb, var(--rarity) 30%, transparent);
}

/* ===== Тот же вид в модалке ===== */
.achv-modal__rarity{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800; font-size:12.5px;
  border:1px solid var(--rarity-border, rgba(255,255,255,.14));
  background: var(--rarity-bg, rgba(255,255,255,.06));
  color: var(--rarity-fg, currentColor);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px var(--rarity-glow, rgba(0,0,0,.12));
}
.achv-modal__rarity::before{ content: var(--rarity-ico, "●"); font-size:.95em; transform:translateY(-.5px); opacity:.95; }

.achv-modal[data-rarity="common"] .achv-modal__rarity{
  --rarity: var(--common, #64748b);
  --rarity-ico: "●";
  --rarity-bg:   linear-gradient(180deg,
                  color-mix(in srgb, var(--rarity) 18%, transparent),
                  color-mix(in srgb, var(--rarity) 8%, transparent));
  --rarity-border: color-mix(in srgb, var(--rarity) 35%, rgba(255,255,255,.18));
  --rarity-fg: color-mix(in srgb, #fff 88%, var(--rarity) 12%);
  --rarity-glow: color-mix(in srgb, var(--rarity) 20%, transparent);
}
.achv-modal[data-rarity="rare"]     .achv-modal__rarity{ --rarity: var(--rare, #2563eb); --rarity-ico:"◆";
  --rarity-bg:linear-gradient(180deg, color-mix(in srgb, var(--rarity)22%, transparent), color-mix(in srgb, var(--rarity)10%, transparent));
  --rarity-border:color-mix(in srgb, var(--rarity)45%, rgba(255,255,255,.16)); --rarity-fg: color-mix(in srgb, #fff 90%, var(--rarity)10%);
  --rarity-glow: color-mix(in srgb, var(--rarity)28%, transparent);
}
.achv-modal[data-rarity="epic"]     .achv-modal__rarity{ --rarity: var(--epic, #7c3aed); --rarity-ico:"✦";
  --rarity-bg:linear-gradient(180deg, color-mix(in srgb, var(--rarity)24%, transparent), color-mix(in srgb, var(--rarity)12%, transparent));
  --rarity-border:color-mix(in srgb, var(--rarity)48%, rgba(255,255,255,.16)); --rarity-fg: color-mix(in srgb, #fff 92%, var(--rarity)8%);
  --rarity-glow: color-mix(in srgb, var(--rarity)32%, transparent);
}
.achv-modal[data-rarity="legendary"] .achv-modal__rarity{ --rarity: var(--legendary, #d97706); --rarity-ico:"★";
  --rarity-bg:linear-gradient(180deg, color-mix(in srgb, var(--rarity)26%, transparent), color-mix(in srgb, var(--rarity)12%, transparent));
  --rarity-border:color-mix(in srgb, var(--rarity)52%, rgba(255,255,255,.16)); --rarity-fg: color-mix(in srgb, #fff 92%, var(--rarity)8%);
  --rarity-glow: color-mix(in srgb, var(--rarity)34%, transparent);
}
.achv-modal[data-rarity="secret"]   .achv-modal__rarity{ --rarity: var(--secret, #059669); --rarity-ico:"❖";
  --rarity-bg:linear-gradient(180deg, color-mix(in srgb, var(--rarity)24%, transparent), color-mix(in srgb, var(--rarity)10%, transparent));
  --rarity-border:color-mix(in srgb, var(--rarity)50%, rgba(255,255,255,.14)); --rarity-fg: color-mix(in srgb, #fff 92%, var(--rarity)8%);
  --rarity-glow: color-mix(in srgb, var(--rarity)30%, transparent);
}

/* ===== SECRET — уникальный узор со «звёздками» и бирюзовым свечением ===== */
.achv-rarity.achv-rarity--secret{
  --rarity: #10b981;               /* мята */
  --rarity-ico: "❉";               /* другой символ, не как у rare */
  --rarity-fg: color-mix(in srgb, #fff 94%, var(--rarity) 6%);
  --rarity-border: color-mix(in srgb, var(--rarity) 55%, rgba(255,255,255,.16));
  --rarity-glow: rgba(16,185,129,.32);

  /* многослойный фон: 3 мягкие «звезды» + основная мятная подложка */
  --rarity-bg:
    radial-gradient(10px 10px at 18% 38%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(8px 8px   at 78% 24%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(12px 12px at 58% 72%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, #22d3ee 20%, transparent),
      color-mix(in srgb, var(--rarity) 22%, transparent)
    );
}

/* Тот же образ в модалке */
.achv-modal[data-rarity="secret"] .achv-modal__rarity{
  --rarity: #10b981;
  --rarity-ico: "❉";
  --rarity-fg: color-mix(in srgb, #fff 94%, var(--rarity) 6%);
  --rarity-border: color-mix(in srgb, var(--rarity) 55%, rgba(255,255,255,.16));
  --rarity-glow: rgba(16,185,129,.32);
  --rarity-bg:
    radial-gradient(12px 12px at 16% 40%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(9px 9px   at 82% 28%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(11px 11px at 56% 72%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, #22d3ee 20%, transparent),
      color-mix(in srgb, var(--rarity) 22%, transparent)
    );
}

/* ===========================
   LIGHT THEME TUNING (only)
   =========================== */

/* 1) Детект светлой темы по классам/атрибутам темы */
:where(.theme--light,[data-theme="light"],.is-light) .achv-badge{
  background: var(--card-bg, var(--surface, #fff));
  color: var(--ink, #0f172a);
  border-color: color-mix(in srgb, var(--border, #e5e7eb) 92%, transparent);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}
:where(.theme--light,[data-theme="light"],.is-light) .achv-icon{
  background: var(--muted-bg, #f3f4f6);
}

/* Пилюли редкости: пастельный фон, более тёмный текст, мягкая тень */
:where(.theme--light,[data-theme="light"],.is-light) .achv-rarity,
:where(.theme--light,[data-theme="light"],.is-light) .achv-modal__rarity{
  /* Основные цвета считаем от var(--rarity), которую задают модификаторы */
  border-color: color-mix(in srgb, var(--rarity, #64748b) 35%, #0000);
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--rarity, #64748b) 14%, #fff 86%),
      color-mix(in srgb, var(--rarity, #64748b) 8%,  #fff 92%)
  );
  color: color-mix(in srgb, #000 60%, var(--rarity, #64748b) 40%);
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 3px 10px rgba(0,0,0,.06);
}

/* 2) Те же правила, если проект не использует классы темы и полагается на системную */
@media (prefers-color-scheme: light){
  :root:not(.theme--dark):not([data-theme="dark"]) .achv-badge{
    background: var(--card-bg, var(--surface, #fff));
    color: var(--ink, #0f172a);
    border-color: color-mix(in srgb, var(--border, #e5e7eb) 92%, transparent);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  }
  :root:not(.theme--dark):not([data-theme="dark"]) .achv-icon{
    background: var(--muted-bg, #f3f4f6);
  }
  :root:not(.theme--dark):not([data-theme="dark"]) .achv-rarity,
  :root:not(.theme--dark):not([data-theme="dark"]) .achv-modal__rarity{
    border-color: color-mix(in srgb, var(--rarity, #64748b) 35%, #0000);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--rarity, #64748b) 14%, #fff 86%),
        color-mix(in srgb, var(--rarity, #64748b) 8%,  #fff 92%)
    );
    color: color-mix(in srgb, #000 60%, var(--rarity, #64748b) 40%);
    box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 3px 10px rgba(0,0,0,.06);
  }
}

/* 3) Секретная редкость — узор и свечение в светлой теме чуть «суше», чтобы не слепило */
:where(.theme--light,[data-theme="light"],.is-light) .achv-rarity.achv-rarity--secret{
  --rarity-fg: color-mix(in srgb, #000 40%, var(--rarity, #10b981) 60%);
  --rarity-border: color-mix(in srgb, var(--rarity, #10b981) 35%, #0000);
  --rarity-glow: rgba(16,185,129,.18);
  --rarity-bg:
    radial-gradient(10px 10px at 18% 38%, color-mix(in srgb, #fff 75%, #0000), transparent 60%),
    radial-gradient(8px 8px   at 78% 24%, color-mix(in srgb, #fff 65%, #0000), transparent 60%),
    radial-gradient(12px 12px at 58% 72%, color-mix(in srgb, #fff 60%, #0000), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, #22d3ee 10%, #fff 90%),
      color-mix(in srgb, var(--rarity, #10b981) 16%, #fff 84%)
    );
}
/* Модалка — аналогичный тон */
:where(.theme--light,[data-theme="light"],.is-light) .achv-modal[data-rarity="secret"] .achv-modal__rarity{
  --rarity-fg: color-mix(in srgb, #000 40%, var(--rarity, #10b981) 60%);
  --rarity-border: color-mix(in srgb, var(--rarity, #10b981) 35%, #0000);
  --rarity-glow: rgba(16,185,129,.18);
  --rarity-bg:
    radial-gradient(12px 12px at 16% 40%, color-mix(in srgb, #fff 75%, #0000), transparent 60%),
    radial-gradient(9px 9px   at 82% 28%, color-mix(in srgb, #fff 65%, #0000), transparent 60%),
    radial-gradient(11px 11px at 56% 72%, color-mix(in srgb, #fff 60%, #0000), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, #22d3ee 10%, #fff 90%),
      color-mix(in srgb, var(--rarity, #10b981) 16%, #fff 84%)
    );
}