/* ============================================================
   Кръгозор · avatar-fix.css
   Един компонент за аватари + резервен вариант (хоплит).

   Зарежда се ПОСЛЕДЕН в index.html — след home-v3.css, защото
   arena-mods-ui/cosmetics.css се вмъква от cosmetics.js в края на
   <head> и печели при равна специфичност. Затова тук на места има
   !important — само за свойствата, които козметиките също налагат
   с !important (радиус на снимката).

   Правила на компонента:
     · квадратна кутия с фиксиран размер (не се разтяга, не изчезва)
     · border-radius: 8px (снимката вътре: 7px = 8 - 1px рамка)
     · background-size: cover / background-position: center
     · image-rendering: auto (без пикселизиране при retina)
     · без снимка → силует на хоплит + тъмна завеса, за да се чете
       началната буква
   ============================================================ */

:root {
  --ava-r: 8px;                              /* еталонният радиус */
  --ava-r-img: calc(var(--ava-r) - 1px);     /* снимката е под 1px рамка */
  --ava-bg: #1a211b;                         /* плътен фон, докато няма нищо */
  --ava-line: 1px solid rgba(201, 162, 39, .3);
  --ava-fallback: url("/assets/duel/hoplite.webp");
  --ava-scrim: linear-gradient(rgba(9, 13, 12, .45), rgba(9, 13, 12, .45));
}

/* ─────────────────────────────────────────────────────────────
   1. ОБЩ КОМПОНЕНТ
   Всички места, където се показва аватар, получават еднаква
   геометрия и еднакво държане на фона.
   ───────────────────────────────────────────────────────────── */
.lb-ava,
.avatar,
.tav,
.fr-ava,
.pm-ava,
.p2-ava,
.p2-prev-ava,
.pp-ava,
.pv-ava,
.px-fr-ava {
  box-sizing: border-box;
  aspect-ratio: 1 / 1;          /* винаги квадрат, дори без size */
  min-width: 20px;
  min-height: 20px;
  flex: 0 0 auto;               /* не се свива във flex редове */
  border-radius: var(--ava-r) !important;
  border: var(--ava-line);
  background-color: var(--ava-bg);
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  image-rendering: auto !important;
  overflow: hidden;
  padding: 0;
  line-height: 1;
  display: grid;
  place-items: center;
}

/* ─────────────────────────────────────────────────────────────
   2. ФИКСИРАН РАЗМЕР ПО МЯСТО
   Стойностите са измерени в реалния DOM (виж docs/avatars/AUDIT.md).
   Радиусът се повтаря и тук: app.css го налага с
   `border-radius:9px/10px !important`, а .userchip .avatar е
   по-специфичен от общия клас по-горе.
   ───────────────────────────────────────────────────────────── */

/* радиусът печели и срещу !important от app.css (равна специфичност,
   но този файл се зарежда последен) */
.userchip .avatar,
.topright .chipid .avatar,
.post .avatar,
.postlist .avatar,
#friendsModal .fr-ava,
.fr-card .fr-ava,
#pmAva,
.pm-card .pm-ava,
.p2-ava-wrap .p2-ava,
#profAvatarBtn,
#p2PrevAva,
.p2-prev-ava,
.dcard-top .tav,
.prof2 .px-fr-ava,
.pp-ava,
div.pv-ava,
.lb-list .lb-ava,
.dc-board .lb-list .lb-ava { border-radius: var(--ava-r) !important; }

/* ── разумни размери по подразбиране: аватар без контекст не бива
   да се разпъва на цялата ширина (grid + aspect-ratio го прави) ── */
.lb-ava { width: 30px; height: 30px; }
.avatar { width: 28px; height: 28px; }
.tav    { width: 24px; height: 24px; }
.fr-ava { width: 28px; height: 28px; }
.pm-ava { width: 48px; height: 48px; }
.p2-ava { width: 88px; height: 88px; }
.p2-prev-ava { width: 44px; height: 44px; }
.px-fr-ava { width: 24px; height: 24px; }

/* хедър: чипът на влезлия потребител */
.userchip .avatar,
.topright .chipid .avatar { width: 26px; height: 26px; }

/* Арена + начална: класацията (#lbList в .dc-board) */
.lb-list .lb-ava,
.dc-board .lb-list .lb-ava { width: 30px; height: 30px; }

/* Форум: мнения в тема */
.post .avatar,
.postlist .avatar { width: 28px; height: 28px; }
.post .who .avatar { width: 28px; height: 28px; }

/* Приятели (модал) */
#friendsModal .fr-ava,
.fr-card .fr-ava { width: 28px; height: 28px; }

/* Мини профил (клик върху ред от класацията) */
#pmAva,
.pm-card .pm-ava { width: 48px; height: 48px; }

/* Моят профил: голям аватар + преглед */
.p2-ava-wrap { width: 88px; height: 88px; }
.p2-ava-wrap .p2-ava,
#profAvatarBtn { width: 88px; height: 88px; }
#p2PrevAva,
.p2-prev-ava { width: 44px; height: 44px; }

/* Дневна карта (класация в „Дневно издание“) */
.dcard-top .tav { width: 24px; height: 24px; }

/* Профил 2.0: приятели в профила */
.prof2 .px-fr-ava { width: 24px; height: 24px; }

/* Публичен профил (когато public-profile.css е зареден) */
.pp-ava { width: 92px; height: 92px; }

/* Публичен профил 3.0 (profile-v3.js вмъква profile-v3.css след нашия файл —
   затова `div.pv-ava` е с елемент, за да бие `.pv-ava`) */
div.pv-ava { width: 150px; height: 150px; }
/* рамката на VIP е с inset:-5px и не бива да се реже */
.pv-ava { overflow: visible; }

@media (max-width: 900px) {
  div.pv-ava { width: 96px; height: 96px; }
}

@media (max-width: 620px) {
  .p2-ava-wrap,
  .p2-ava-wrap .p2-ava,
  #profAvatarBtn { width: 68px; height: 68px; }
  .pp-ava { width: 72px; height: 72px; }
}

/* ─────────────────────────────────────────────────────────────
   3. СНИМКАТА ВЪТРЕ
   Козметиките налагат 5/6px радиус с !important — тук го връщаме
   на 7px с по-висока специфичност.
   ───────────────────────────────────────────────────────────── */
.lb-ava img,
.avatar img,
.tav img,
.fr-ava img,
.pm-ava img,
.p2-ava img,
.p2-prev-ava img,
.pp-ava img,
.pv-ava img,
.px-fr-ava img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--ava-r-img) !important;
  image-rendering: auto;
}

/* по-висока специфичност от arena-mods-ui/cosmetics.css */
.lb-list li .lb-ava img,
.post .who .avatar img,
.postlist .post .avatar img,
.userchip .chipid .avatar img,
.pm-card .pm-ava img { border-radius: var(--ava-r-img) !important; }

/* вътрешният слой на профилния аватар (носи img или началната буква) */
#profAvatarInner,
#profAvatarBtn > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--ava-r-img);
}
#profAvatarInner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─────────────────────────────────────────────────────────────
   4. РЕЗЕРВЕН ВАРИАНТ: ХОПЛИТ ЗА ВСЕКИ БЕЗ СНИМКА
   Условие: няма inline background-image (url) И няма <img> вътре.
   Щом JS сложи истинска снимка (style="background-image:url(...)"
   или <img>), правилото спира да важи — затова !important е безопасен.
   ───────────────────────────────────────────────────────────── */
.lb-ava:not([style*="url"]):not(:has(img)),
.avatar:not([style*="url"]):not(:has(img)),
.tav:not([style*="url"]):not(:has(img)),
.fr-ava:not([style*="url"]):not(:has(img)),
.pm-ava:not([style*="url"]):not(:has(img)),
.p2-ava:not([style*="url"]):not(:has(img)),
.p2-prev-ava:not([style*="url"]):not(:has(img)),
.pp-ava:not([style*="url"]):not(:has(img)),
.pv-ava:not([style*="url"]):not(:has(img)),
.px-fr-ava:not([style*="url"]):not(:has(img)) {
  background-image: var(--ava-scrim), var(--ava-fallback) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  color: #f2e7cd;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .6);
  font-weight: 600;
}

/* същата резерва и когато JS е подал празен/невалиден url()
   (напр. url() или url("")) — браузърът не рисува нищо */
.lb-ava[style*="url()"],
.avatar[style*="url()"],
.fr-ava[style*="url()"],
.pm-ava[style*="url()"] {
  background-image: var(--ava-scrim), var(--ava-fallback) !important;
  background-size: cover, cover !important;
}

/* ─────────────────────────────────────────────────────────────
   5. ДРЕБНИ ПОПРАВКИ
   ───────────────────────────────────────────────────────────── */

/* рамките на козметиките не бива да изяждат снимката */
.lb-list .lb-ava.frm-war.frm-war,
.lb-list .lb-ava.frm-pantheon.frm-pantheon,
.lb-list .lb-ava.frm-week.frm-week,
.lb-list .lb-ava.frm-legend.frm-legend,
.post .avatar.frm-war.frm-war,
.post .avatar.frm-pantheon.frm-pantheon,
.post .avatar.frm-week.frm-week,
.post .avatar.frm-legend.frm-legend,
.pm-ava.frm-war.frm-war,
.pm-ava.frm-pantheon.frm-pantheon,
.pm-ava.frm-week.frm-week,
.pm-ava.frm-legend.frm-legend { border-radius: var(--ava-r) !important; }

/* дъщерните слоеве на рамката следват същия радиус */
.lb-list .lb-ava.frm-war.frm-war::after,
.lb-list .lb-ava.frm-pantheon.frm-pantheon::after,
.lb-list .lb-ava.frm-week.frm-week::after,
.lb-list .lb-ava.frm-legend.frm-legend::after,
.post .avatar.frm-war.frm-war::after,
.post .avatar.frm-pantheon.frm-pantheon::after,
.post .avatar.frm-week.frm-week::after,
.post .avatar.frm-legend.frm-legend::after { border-radius: var(--ava-r-img) !important; }

/* приятели: буквата-резерва да е центрирана и да не разтяга реда */
.fr-ava,
.px-fr-ava { text-align: center; }

/* миникартичката на профила: аватар + текст в един ред */
.pm-top .pm-ava { align-self: center; }

/* Дневно издание: `.dcard-top .tav.has-img` маха фона — нека остане
   плътен цвят, за да няма бяла дупка при бавна снимка */
.dcard-top .tav.has-img { background-color: var(--ava-bg); }