/* avatar.css — 5.4: своя аватарка (avatar.js): голубь из коллекции вместо фото, рамки, окно выбора.
   Рамка — класс .ava-fr + .ava-f-<id> (id — trophies.json → frames); цвет рамки — переменная --fr. */

/* ---- цвета рамок ---- */
.ava-f-silver{ --fr:linear-gradient(135deg,#ffffff,#9aa3b8 40%,#eef1f8 62%,#7d869c); --frg:rgba(220,228,245,.35); }
.ava-f-gold{ --fr:linear-gradient(135deg,#fff2b0,#e0a51c 38%,#ffe37a 60%,#b07a10); --frg:rgba(255,200,60,.55); }
.ava-f-epic{ --fr:linear-gradient(135deg,#f0c8ff,#b24cff 45%,#6a1fc4); --frg:rgba(178,76,255,.55); }
.ava-f-legendary{ --fr:linear-gradient(135deg,#fff3c0,#ffc83c 35%,#ff8a1f 70%,#ffe37a); --frg:rgba(255,170,40,.65); }
.ava-f-mythical{ --fr:linear-gradient(135deg,#b6ffe0,#3fe09a 30%,#2bc4ff 65%,#b47cff); --frg:rgba(63,224,154,.6); }
.ava-f-champ{ --fr:linear-gradient(135deg,#ffe37a,#f5b301 35%,#4db8ff 70%,#ffe37a); --frg:rgba(245,179,1,.5); }
.ava-f-halloween{ --fr:linear-gradient(135deg,#ffb35a,#ff7a00 40%,#7b2fbe 75%,#3d1b52); --frg:rgba(255,122,0,.5); }
.ava-f-beta{ --fr:linear-gradient(135deg,#a8fff2,#3fd1c0 45%,#1a7f8a); --frg:rgba(63,209,192,.5); }

/* ---- своя аватарка на главной (img#tg-avatar) ---- */
/* фон под голубем — как у карточки его редкости (--ava-bg ставит avatar.js) */
#main-tab #tg-avatar.ava-pg{ object-fit:contain; padding:3px; box-sizing:border-box; background-color:#1d2340; background-image:var(--ava-bg); background-size:cover; background-position:center 30%; background-repeat:no-repeat; }
/* рамка у картинки — градиентная обводка через фон (у img нет ::before); затемнение под голубем остаётся */
#main-tab #tg-avatar.ava-fr{ box-sizing:border-box; border:3px solid transparent;
  background:linear-gradient(#1d2340,#1d2340) padding-box, var(--fr) border-box;
  box-shadow:0 0 10px var(--frg) !important; }
#main-tab #tg-avatar.ava-fr.ava-pg{ background-image:var(--ava-bg), var(--fr); background-origin:padding-box, padding-box, border-box; background-clip:padding-box, padding-box, border-box; background-size:cover, cover, 100% 100%; }
#main-tab #tg-avatar.ava-fr:not(.ava-pg){ padding:0; }

/* ---- чужая аватарка (div с фоном: профиль, соседи, найденный игрок — avatar.js → pfAvaDeco): голубь целиком на фоне редкости,
   рамка — ::before (::after у профиля занят короной VIP, vip.css) ---- */
.ava-deco.ava-pg{ background-size:contain, cover, cover !important; background-repeat:no-repeat !important; background-position:center, center 30%, center !important; background-origin:content-box, border-box, border-box; background-color:#1d2340 !important; padding:3px; box-sizing:border-box; }
/* у VIP своя золотая обводка (vip.css) — рамка главнее */
.ava-deco.ava-fr, #profile-modal.is-vip .pf-avatar.ava-fr, #search-tab .nb-card.is-vip .nb-ava.ava-fr{ position:relative; overflow:visible; box-shadow:0 0 10px var(--frg) !important; }
.ava-deco.ava-fr::before{ content:''; position:absolute; inset:-3px; border-radius:14px; padding:3px; background:var(--fr); pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

/* ---- голубь-аватарка в списках (топ, соседи, поиск, друзья): целиком, а не обрезанный кружком ---- */
.lb-ava img[src^="img/"]{ object-fit:contain; padding:2px; box-sizing:border-box; background:#1d2340; }
#search-tab .usn-ava[style*="img/"], .frd-ava[style*="img/"]{ background-size:contain !important; background-color:#1d2340 !important; }
.st-me__ava[src^="img/"]{ object-fit:contain; background:#1d2340; }

/* ---- окно выбора (оболочка — .tph-skins из trophies.css) ---- */
/* шапка стоит, прокручивается .av-body */
.av-box{ height:min(82vh, 640px); /* 5.5: высота постоянная — при смене вкладки окно не прыгает, прокручивается середина */ display:flex; flex-direction:column; padding-bottom:0 !important; }
.av-head{ flex:none; }
.av-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:0 -14px; padding:2px 14px 14px; }
/* шапка: как аватарка выглядит сейчас + заголовок; под ней вкладки «Голуби | Рамки» (как переключатели в игре) */
.av-top{ display:flex; align-items:center; gap:12px; padding-right:36px; }
.av-top .tph-skins__s{ margin:2px 0 0; }
.av-now{ flex:0 0 48px; width:48px; height:48px; border-radius:12px; background:#2b2b3b center / cover no-repeat; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.av-tabs{ display:flex; gap:4px; margin:12px 0 10px; padding:4px; border-radius:14px; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.av-tab{ flex:1 1 0; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:10px; background:none;
  color:#aab1d6; font:inherit; font-size:14px; font-weight:900; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s; }
.av-tab em{ font-style:normal; font-size:11.5px; font-weight:800; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.08); color:#cfd3ea; font-variant-numeric:tabular-nums; }
.av-tab.is-on{ background:linear-gradient(180deg,#4f8bff,#2f6ae6); color:#fff; box-shadow:0 3px 10px rgba(47,106,230,.4); }
.av-tab.is-on em{ background:rgba(255,255,255,.22); color:#fff; }
.av-tab:active{ transform:scale(.97); }
.av-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)); gap:8px; }
.av-pg{ position:relative; aspect-ratio:1; padding:4px; border:0; border-radius:14px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background-color:#1d2340; background-image:var(--ava-bg); background-size:cover; background-position:center 30%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); }
.av-pg img{ width:100%; height:100%; object-fit:contain; display:block; }
.av-pg.is-on{ box-shadow:inset 0 0 0 2.5px #4ade80, 0 0 10px rgba(74,222,128,.45); }
.av-pg:active, .av-fr:active{ transform:scale(.95); }
.av-photo{ background:#1d2340;  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; overflow:hidden; }
.av-photo img{ position:absolute; inset:0; object-fit:cover; border-radius:14px; opacity:.55; }
.av-photo small{ position:relative; font-size:11px; font-weight:900; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.av-note{ margin:8px 2px 0; font-size:12px; font-weight:700; color:#9aa3c7; }
.av-frames{ display:grid; grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); gap:8px; padding-bottom:2px; }
.av-fr{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px 6px; border:0; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); color:#fff; font:inherit; -webkit-tap-highlight-color:transparent; }
.av-fr small{ font-size:11px; font-weight:800; line-height:1.15; text-align:center; }
.av-fr.is-on{ box-shadow:inset 0 0 0 2px #4ade80; background:rgba(74,222,128,.08); }
.av-fr.is-locked{ opacity:.5; }
.av-fr > i{ position:absolute; top:4px; right:5px; font-style:normal; font-size:11px; }
.av-fr__pv{ width:34px; height:34px; border-radius:10px; box-sizing:border-box; background:#1d2340; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.av-fr__pv.ava-fr{ border:3px solid transparent; background:linear-gradient(#1d2340,#1d2340) padding-box, var(--fr) border-box; box-shadow:0 0 8px var(--frg); }

/* ---- переливающиеся рамки: кольцо, внутри крутится конусный градиент (как .rfx-ring у карточек, rarity-fx.css) ---- */
.ava-ring{ position:absolute; z-index:1; border-radius:12px; padding:3px; box-sizing:border-box; overflow:hidden; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.ava-ring i{ position:absolute; left:50%; top:50%; width:300%; height:300%; transform:translate(-50%,-50%); animation:rfx-ring-spin 4s linear infinite; } /* 5.5: высота явно, не aspect-ratio — на iPhone круг с градиентом «застревал» (появился при нулевом размере) и крутился не вокруг центра: перелив ходил вверх-вниз справа */
.ava-ring[data-f="mythical"] i{ background:conic-gradient(#0b5a37 0deg, #2fd98c 40deg, #eafff3 70deg, #2fd98c 100deg, #0b5a37 160deg, #063d25 250deg, #0b5a37 360deg); }
.ava-ring[data-f="legendary"] i{ background:conic-gradient(#b8860b 0deg, #ffd24a 40deg, #fffbe0 70deg, #ffd24a 100deg, #b8860b 160deg, #8a6200 250deg, #b8860b 360deg); }
.ava-ring[data-f="gold"] i{ background:conic-gradient(#c8901a 0deg, #ffe37a 45deg, #ffffff 75deg, #ffe37a 105deg, #c8901a 170deg, #7a5208 260deg, #c8901a 360deg); }
/* профиль: кольцо поверх ::before-рамки; превью в окне выбора */
.ava-deco > .ava-ring{ inset:-3px; border-radius:14px; }
.av-fr__pv{ position:relative; }
.av-fr__pv > .ava-ring{ inset:-3px; border-radius:10px; }

/* ---- эффекты редкости голубя на аватарке — как у карточек (avatar.js → fxIn): блик у эпика и выше,
   перелив и искры у легендарки и мифика. Слой поверх картинки, под рамкой-кольцом ---- */
.ava-fx{ position:absolute; z-index:1; border-radius:12px; overflow:hidden; pointer-events:none; }
.ava-deco{ position:relative; }
.ava-deco > .ava-fx{ inset:0; border-radius:inherit; }
.ava-fx > .ava-sheen{ position:absolute; inset:0 auto 0 0; width:calc(100% + 111px); animation:ava-flow 6s linear infinite; }
.ava-fx[data-r="legendary"] > .ava-sheen{ background:repeating-linear-gradient(115deg, rgba(255,244,190,.5) 0px, rgba(255,200,40,0) 24px, rgba(200,120,0,.3) 50px, rgba(255,200,40,0) 76px, rgba(255,244,190,.5) 100px); }
.ava-fx[data-r="mythical"] > .ava-sheen{ background:repeating-linear-gradient(115deg, rgba(255,210,90,.3) 0px, rgba(255,210,90,0) 20px, rgba(255,240,180,.18) 50px, rgba(255,210,90,0) 76px, rgba(255,210,90,.3) 100px); }
@keyframes ava-flow{ from{ transform:translateX(-110.34px); } to{ transform:translateX(0); } }
.ava-fx > .ava-holo{ position:absolute; top:-10%; left:0; width:45%; height:120%; mix-blend-mode:screen;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 40%, rgba(255,200,240,.28) 50%, rgba(160,230,255,.28) 60%, rgba(255,255,255,0) 100%);
  transform:translateX(-120%) skewX(-18deg); animation:cardHolo 5s ease-in-out infinite; }
.ava-sparks{ position:absolute; inset:0; }
.ava-sparks i{ position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; opacity:0;
  background:radial-gradient(circle, #fff 0 15%, rgba(255,255,255,0) 16%),
    conic-gradient(from 0deg, transparent 0 40deg, #fff 45deg, transparent 50deg 130deg, #fff 135deg, transparent 140deg 220deg, #fff 225deg, transparent 230deg 310deg, #fff 315deg, transparent 320deg),
    radial-gradient(circle, rgba(255,255,255,.9) 0 10%, rgba(255,190,70,.55) 22%, rgba(255,157,0,.18) 40%, rgba(255,157,0,0) 62%);
  animation:rfx-twinkle 2.8s ease-in-out infinite; animation-delay:calc(var(--rfx-d, 0s) + var(--i) * .7s); }
.ava-sparks i:nth-child(1){ left:16%; top:14%; --i:0; }
.ava-sparks i:nth-child(2){ left:84%; top:18%; --i:2; }
.ava-sparks i:nth-child(3){ left:20%; top:70%; --i:3; }
.ava-sparks i:nth-child(4){ left:82%; top:66%; --i:1; }
/* «Меньше анимаций» (настройки → body.less-motion): без блика и искр, перелив и кольцо стоят */
body.less-motion .ava-fx > .ava-holo, body.less-motion .ava-sparks{ display:none; }
body.less-motion .ava-fx > .ava-sheen, body.less-motion .ava-ring i{ animation:none !important; }
/* пока листают — на паузе, как карточки (fx-perf.js → body.fx-scrolling) */
body.fx-scrolling .ava-fx *, body.fx-scrolling .ava-ring i{ animation-play-state:paused; }