/* ============================================================
   РАМКИ ПРОФИЛЯ
   Отдельный файл, чтобы не трогать основной style-84.css.
   ============================================================ */

/* ---------- рамка вокруг аватара ----------
   Дырка в картинке занимает 60.6% её ширины, поэтому рамку берём
   в 1.65 раза больше аватара и сдвигаем так, чтобы дырка совпала. */
.av-fr {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  flex: none;
  z-index: 2;
}

/* Рамка заменяет обводку: белая кайма, тень и фон убираются,
   аватар приводим к кругу — иначе в шапке он квадратный.
   Убрал рамку — всё вернулось само. */
.av-fr > .av,
.av-fr > .av-ph {
  display: block;
  margin: 0;
  border-radius: 50% !important;
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}
.av-fr-img {
  position: absolute;
  left: -32.2%;
  top: -39.3%;
  width: 165%;
  height: 165%;
  max-width: none;
  max-height: none;
  pointer-events: none;
  z-index: 3;
}

/* Где аватар задан в процентах, рамке тоже нужен размер:
   иначе она не знает, от чего считать. */
.pl-av .av-fr,
.pf-av .av-fr,
.ed-prev-av .av-fr {
  width: 100%;
  height: 100%;
}

/* ---------- контейнеры, которые обрезали рамку ---------- */

/* карточка игрока: там же была белая кайма и серый кружок */
.pl-av:has(.av-fr) {
  overflow: visible;
  border-color: transparent;
  background: transparent;
}

/* шапка профиля: скругление переносим на обложку */
.pf-hero { overflow: visible; }
.pf-cover { border-radius: var(--r-xl) var(--r-xl) 0 0; }

/* превью редактора */
.ped-prev,
.ed-prev { overflow: visible; }
.ed-prev-bg,
.ed-prev-cov { border-radius: inherit; }

/* кольцо уровня в шапке профиля — иначе два кольца друг на друге */
.pf-av:has(.av-fr) .ring { display: none; }

/* ---------- рамка в превью редактора ----------
   Превью рисует аватар своим кодом, поэтому рамка тут отдельным слоем. */
.ed-prev-av { position: relative; }
.ed-prev-fr {
  position: absolute;
  left: -32.2%;
  top: -39.3%;
  width: 165%;
  height: 165%;
  max-width: none;
  max-height: none;
  pointer-events: none;
  z-index: 3;
}
.ed-prev-av:has(.ed-prev-fr) img { border-radius: 50%; border: 0; }

/* ---------- выбор рамки в редакторе профиля ---------- */
.ed-frames {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ed-frames .ed-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 96px;
  padding: 11px 12px 9px;
}
.ed-fr-prev {
  display: block;
  width: 58px;
  height: 58px;
  flex: none;
}
.ed-fr-prev img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ed-frames .ed-hint {
  font-size: 12.5px;
  color: var(--txt-3, #7d6a97);
}

/* ---------- карточка игрока: кайма тоньше, аватар крупнее ----------
   У кого стоит рамка — кайма и так скрыта правилом выше, а размер
   рамки считается от аватара, поэтому она растёт вместе с ним. */
.pl-av {
  width: 68px;
  height: 68px;
  border-width: 1px;
}

/* ---------- карточка игрока: новая раскладка ----------
   Аватар слева, ник и мета справа от него, крупная чиби сбоку.
   Кайма тонкая — у кого стоит рамка, она всё равно скрыта. */
.pl-card {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 14px 15px;
}
.pl-link {
  flex-direction: row;
  align-items: center;
  gap: 13px;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.pl-info {
  flex: 1;
  min-width: 0;
}
.pl-nick {
  display: block;
  text-align: left;
  font-size: 15px;
}
.pl-meta {
  display: block;
  text-align: left;
  margin-top: 5px;
  min-height: 0;
  font-size: 11.5px;
}
.pl-av {
  width: 72px;
  height: 72px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, .13);
}
.pl-chib {
  flex: none;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-chib .pl-chibi {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  vertical-align: baseline;
}

/* ---------- рамка в превью редактора: точная посадка ----------
   Общее правило .ed-prev-av img задаёт картинкам 100% и скругление.
   Оно специфичнее, поэтому перебивало размер рамки — она вставала
   криво и мелко. Задаём через img.ed-prev-fr: это специфичнее. */
.ed-prev-av img.ed-prev-fr {
  position: absolute;
  left: -32.2%;
  top: -39.3%;
  width: 165%;
  height: 165%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

/* ---------- превью редактора: возвращаем обрезку ----------
   Рамка в превью и так помещается внутри (аватар 66px, рамка 109px,
   а высота блока 132px). А вот overflow: visible, который я поставил
   ради рамки, выпускал фон и обложку наружу — они налезали на кнопки.
   Обрезку возвращаем, рамку это не задевает. */
.ed-prev { overflow: hidden; }
.ped-prev { overflow: hidden; }

/* Белый кружок и кайма под аватаром в превью убираем, когда стоит рамка:
   рамка сама его обрамляет. Убрал рамку — кружок вернулся. */
.ed-prev-av:has(.ed-prev-fr) {
  background: transparent;
  border-color: transparent;
}

/* ---------- превью аватара во вкладке «Картинки» ----------
   Это отдельный блок со своим кодом, поэтому рамке нужны свои правила.
   Место сверху оставляем, чтобы ушки рамки не налезали на подпись. */
.ped-av {
  overflow: visible;
  margin: 24px auto 18px;
}
.ped-av .ped-av-fr {
  position: absolute;
  left: -32.2%;
  top: -39.3%;
  width: 165%;
  height: 165%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}
/* серый кружок под аватаром не нужен, когда стоит рамка */
.ped-av:has(.ped-av-fr) {
  background: transparent;
}

/* ---------- вкладки на телефоне ----------
   Их стало шесть, и на узком экране они не помещались — «Картинки»
   обрезалось слева. Делаем компактнее и разрешаем прокрутку. */
@media (max-width: 620px) {
  .ed-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ed-tabs::-webkit-scrollbar { display: none; }
  .ed-tabs .ed-tab {
    flex: 0 0 auto;
    padding: 0 13px;
    font-size: 11.5px;
    gap: 5px;
  }
  .ed-tabs .ed-tab svg { width: 13px; height: 13px; }
}

/* ---------- когда превью свёрнуто ----------
   Место под него всё равно оставалось большим, и в редакторе зияла
   пустота. Свёрнуто — оставляем только под полоску. */
.ed-prev.is-folded ~ .ed-tabs { margin-top: 48px; }

/* ---------- вкладки на телефоне: подгоняем точно ----------
   Замер показал: бар 350px, вкладки 358px — не хватало 8 пикселей.
   Уменьшаем отступы, чтобы все шесть влезали без прокрутки. */
@media (max-width: 620px) {
  .ed-tabs .ed-tab {
    padding: 0 9px;
    font-size: 11px;
    gap: 4px;
  }
  .ed-tabs .ed-tab svg { width: 12px; height: 12px; }
}
@media (max-width: 400px) {
  .ed-tabs .ed-tab { padding: 0 7px; font-size: 10.5px; gap: 3px; }
  .ed-tabs .ed-tab svg { display: none; }
}