/*
 * Шапка для ПК: деревянная панель профиля стоит в строке со счётчиками,
 * на месте убранной большой строки поиска.
 *
 * Панель собрана из трёх слоёв, привязанных к своим координатам, поэтому
 * размеры и классы внутри неё не трогаем:
 *   • .frame-overlay — деревянная текстура (908×194), обрезанная clip-path;
 *   • .profile-frame::before — фон по контуру (маска profile-outline.svg,
 *     908×222). Контур выше панели: при ширине 650 он выходит за рамку
 *     примерно на 10px сверху и снизу;
 *   • .center-avatar, .top-left, .bottom-left, .top-right, .bottom-right —
 *     аватар, ник, кнопки и баланс, посаженные на дерево абсолютно.
 *
 * ВАЖНО: все правки касаются ТОЛЬКО состояния «пользователь вошёл» — они
 * собраны под селектором :has(.profile-frame). Когда панели нет (гость),
 * шапка остаётся ровно такой, какой её делает тема: свои отступы, своя высота.
 */

@media (min-width: 1101px) {
  /* ---------- Гость (панели профиля нет): счётчики слева ----------
     У темы .header__stats-wrapper растягивается и прижимает содержимое вправо —
     так было задумано, когда рядом стояла большая строка поиска, которая тоже
     тянулась и уравновешивала строку. Строку поиска мы убрали, поэтому
     возвращаем счётчики к левому краю. Правило действует только когда панели
     нет: у вошедшего раскладку задают правила ниже. */
  html body:not(:has(.header__second .profile-frame)) .header__second .header__stats-wrapper {
    justify-content: flex-start !important;
  }

  /* ---------- Строка шапки, когда панель профиля на месте ---------- */
  body .header__second:has(.profile-frame) {
    /* Сверху и снизу по 20px: контур панели выходит за её рамку на 10px,
       плюс запас, чтобы плотная тень под панелью не срезалась краем полосы. */
    position: relative;
    padding: 20px 0 20px !important;
    height: auto !important;
    /* Высота строки: панель 140px + контур + место под тень. Панель вынута
       из потока (центрируется абсолютно), поэтому высоту задаём здесь. */
    min-height: 180px !important;
    align-items: center !important;
    gap: clamp(18px, 2.2vw, 30px);
    box-sizing: border-box;
    flex-wrap: nowrap;
  }

  /* Счётчики — слева. Обёртка растягивается, поэтому кнопка «ВЫЙТИ» уезжает
     вправо, а панель остаётся по центру окна. */
  body .header__second:has(.profile-frame) .header__stats-wrapper {
    align-items: center;
    align-self: center;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start !important;
  }

  /* У вошедшего счётчики тоже слева, но отступ справа у списка нужен свой:
     у темы он 75px (до 1350px — 35px), а панель стоит по центру окна. */
  body .header__second:has(.profile-frame) .header__stats {
    padding-right: 0 !important;
  }

  /* Кнопка выхода — справа */
  body .header__second:has(.profile-frame) .header-auth {
    margin-left: auto;
    padding-left: 0 !important;
    flex: 0 0 auto;
  }

  /* ---------- Сама панель ---------- */
  /* По центру строки. Центрируем от окна (left:50%), а не «по остатку места» —
     иначе счётчики слева сдвигали бы панель вправо. */
  body .header__second:has(.profile-frame) .profile-frame {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0;
    flex: 0 0 auto;
    /* Контур (маска) выходит за рамку на 10px — оставляем его видимым */
    overflow: visible !important;
    /* Тень и сияние — по внешнему контуру панели.
       Вешаем именно на панель, а НЕ на .frame-overlay: у деревянного слоя
       вырезана середина под аватар (clip-path), и его drop-shadow отбрасывал
       тень внутрь этого выреза — фото затемнялось по краям. У панели выреза
       нет, поэтому тень ложится только снаружи, а контур заодно попадает
       в силуэт тени.
       Слои: плотное тёмное ядро внизу (темнее фона шапки), мягкая растушёвка
       и тёплое сияние по краю, которое выделяет блок на тёмном фоне.
       У темы есть общее правило, гасящее фильтры у элементов панели,
       поэтому здесь filter задаём с !important. */
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .88))
            drop-shadow(0 12px 20px rgba(0, 0, 0, .62))
            drop-shadow(0 0 15px rgba(255, 226, 150, .30)) !important;
  }

  /* Тёмная подложка вокруг дерева не нужна: оставляем только сам контур.
     Раньше здесь был полупрозрачный фон (rgba(15,15,15,.65)) с размытием —
     вокруг панели читалась тёмная обводка. */
  body .header__second:has(.profile-frame) .profile-frame::before {
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Пустая обёртка соцсетей в этой строке не нужна */
  body .header__second:has(.profile-frame) .header__socials:empty {
    display: none;
  }
}

/* Панель живёт только на ПК: на телефоне и планшете её убираем из шапки,
   чтобы не дублировать мобильную карточку пользователя (она в меню). */
@media (max-width: 1100px) {
  body .header__second .profile-frame {
    display: none !important;
  }
}