/* JoyFit F6 — Avatar de conquistas. Ativado apenas para itens resgatados/equipados.
   No ranking, cosméticos de terceiros vêm da API e exigem opt-in explícito. */
.jf-avatar,.jf-profile-avatar{isolation:isolate;overflow:visible!important}
body[data-joy-frame]:not([data-joy-frame=""]) .jf-avatar,
body[data-joy-frame]:not([data-joy-frame=""]) .jf-profile-avatar{
 border:3px solid var(--joy-frame-accent,#e6a248)!important;
 box-shadow:0 0 0 3px var(--joy-frame-light,#ffebba),0 0 0 6px var(--joy-frame-accent,#e6a248),0 5px 16px #1d172a30!important;
}
body[data-joy-frame]:not([data-joy-frame=""]) .jf-avatar:hover,
body[data-joy-frame]:not([data-joy-frame=""]) .jf-profile-avatar:hover{
 box-shadow:0 0 0 3px var(--joy-frame-light,#ffebba),0 0 0 6px var(--joy-frame-accent,#e6a248),0 5px 16px #1d172a30!important;
}
body[data-joy-badge]:not([data-joy-badge=""]) .jf-avatar::after,
body[data-joy-badge]:not([data-joy-badge=""]) .jf-profile-avatar::after{
 content:'✹';position:absolute;z-index:5;top:-9px;left:-9px;display:grid;place-items:center;
 height:26px;width:26px;border-radius:50%;background:linear-gradient(140deg,#fbd47c,#e98243);
 border:2px solid #fff7ee;color:#4c2a24;font-size:17px;line-height:1;
 box-shadow:0 2px 8px #2818114d;pointer-events:none;
}
body[data-joy-flame]:not([data-joy-flame=""]) .jf-avatar::before,
body[data-joy-flame]:not([data-joy-flame=""]) .jf-profile-avatar::before{
 content:'✦';position:absolute;z-index:5;top:-8px;right:-9px;display:grid;place-items:center;
 height:23px;width:23px;border-radius:50%;background:#fff1de;border:2px solid #f3a05c;
 color:#c95723;font-size:16px;line-height:1;box-shadow:0 2px 7px #28181130;pointer-events:none;
}
.jf-f6-cosmetics-preview{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:13px 0;border-top:1px solid var(--line)}
.jf-f6-cosmetics-preview strong{font-size:14px;color:var(--t)}
.jf-f6-cosmetics-preview p{font-size:12px;line-height:1.55;margin:5px 0 0;color:var(--t2);max-width:430px}
.jf-f6-cosmetics-preview button{min-height:42px;max-width:100%;white-space:normal}
/* Pódio e lista usam o mesmo componente visual, com tamanhos distintos. */
.jf-rank-cosmetics{position:relative;display:inline-grid;place-items:center;flex:none;width:48px;height:48px;isolation:isolate;overflow:visible}
.jf-rank-cosmetics .jf-rank-avatar{width:100%;height:100%;margin:0;position:relative;z-index:1;overflow:hidden}
.jf-rank-cosmetics.has-frame::before{content:'';position:absolute;z-index:0;inset:-5px;border:3px solid var(--jf-ring,#eca95c);border-radius:50%;background:var(--jf-ring-light,#fff1ce);box-shadow:0 0 0 2px var(--jf-ring-light,#fff1ce),0 4px 12px #42332530;pointer-events:none}
.jf-rank-cosmetics.has-frame .jf-rank-avatar{border-color:var(--jf-ring,#eca95c)!important}
.jf-rank-decoration{position:absolute;z-index:3;display:grid;place-items:center;width:20px;height:20px;border:2px solid #fff7f0;border-radius:50%;line-height:1;box-shadow:0 2px 5px #442b2840;pointer-events:none}
.jf-rank-decoration-badge{top:-6px;left:-8px;background:linear-gradient(135deg,#ffdb86,#ee9250);color:#5b3225;font-size:13px}
.jf-rank-decoration-flame{top:-6px;right:-8px;background:#fff1de;color:#e16d2e;font-size:13px}
.jf-rank-cosmetic-list{display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0}
.jf-rank-cosmetic-chip{display:inline-flex;gap:4px;align-items:center;min-width:0;max-width:100%;padding:3px 7px;border-radius:7px;font-size:10px;line-height:1.3;font-weight:750;overflow-wrap:anywhere;background:#fff1e3;color:#874b2e;border:1px solid #e9c2a3}
.jf-rank-chip-badge{background:#fff2d3;color:#785023;border-color:#ecd3a3}
.jf-rank-chip-flame{background:#ffe7df;color:#aa4c2f;border-color:#f8c2b2}
.jf-rank-podium-person .jf-rank-cosmetics{width:61px;height:61px}
.jf-rank-podium-person.first .jf-rank-cosmetics{width:83px;height:83px}
.jf-rank-podium-awards{font-size:9px;line-height:1.2;font-weight:800;white-space:nowrap;color:#a35d37;background:#fff5e6;padding:3px 6px;border-radius:7px}
.jf-rank-podium-person .jf-rank-cosmetics.has-frame .jf-rank-avatar{box-shadow:none}
:root[data-theme=dark] .jf-rank-cosmetic-chip{background:#3c302c;border-color:#785a46;color:#ffd9bc}
:root[data-theme=dark] .jf-rank-chip-badge{background:#3b3325;border-color:#847048;color:#ffdc9b}
:root[data-theme=dark] .jf-f6-cosmetics-preview strong{color:var(--t)}
@media(max-width:959px){
 .jf-rank-person .jf-rank-cosmetics{width:40px;height:40px}
 .jf-rank-podium-person .jf-rank-cosmetics{width:49px;height:49px}
 .jf-rank-podium-person.first .jf-rank-cosmetics{width:65px;height:65px}
 .jf-rank-cosmetics .jf-rank-decoration{width:17px;height:17px;font-size:11px}
 .jf-rank-cosmetics.has-frame::before{inset:-4px;border-width:2px}
 .jf-rank-cosmetic-chip{font-size:9px;padding:3px 6px}
}
@media(max-width:420px){
 .jf-rank-person{gap:9px}
 .jf-rank-person-main>strong{font-size:12px}
 .jf-rank-person-score{width:68px}
 .jf-rank-cosmetic-list{gap:4px}
 .jf-rank-cosmetic-chip{max-width:100%;font-size:9px}
 .jf-f6-cosmetics-preview button{width:100%}
}
@media(prefers-reduced-motion:reduce){.jf-rank-cosmetics,.jf-rank-decoration{animation:none!important}}

/* O início mobile F5 agora mostra a foto/avatar decorado em vez de um ícone genérico. */
.jf-f5-greeting>div{flex:1;min-width:0}
.jf-f5-greeting>.jf-avatar{display:grid!important;place-items:center!important;position:relative;flex:0 0 52px!important;width:52px!important;height:52px!important;min-height:52px!important;min-width:52px!important;padding:3px!important;border-radius:50%!important;background:var(--soft)!important;color:var(--a)!important;font-size:18px!important}
.jf-f5-greeting>.jf-avatar .jf-initial{font-size:20px!important}
.jf-f5-greeting>.jf-avatar small{font-size:10px!important}

/* The supplied transparent PNGs are shared across inventory and equipped views. */
.jf-reward-art{display:inline-grid;place-items:center;position:relative;flex:none;width:100%;height:100%;aspect-ratio:1;vertical-align:middle;pointer-events:none}
.jf-reward-art>img{display:block;width:100%!important;height:100%!important;min-width:0;object-fit:contain!important;border-radius:0!important;filter:none!important}
.jf-reward-art>img[hidden]{display:none!important}
.jf-reward-art>.jf-reward-fallback{display:none}
.jf-reward-art.is-image-missing>.jf-reward-fallback{display:grid;place-items:center;width:100%;height:100%;color:var(--rarity-ink,var(--a));font-size:32px}
#app .jf-reward-tile[data-rarity] .jf-reward-symbol:has(.jf-reward-art){width:112px;height:112px;border:0;background:transparent!important;box-shadow:none!important;overflow:visible}
#app .jf-reward-tile[data-rarity] .jf-reward-symbol:has(.jf-reward-art)::after{display:none}
#app .jf-reward-tile[data-rarity] .jf-reward-symbol .jf-reward-art{width:100%;height:100%}
#app .jf-avatar.has-png-frame,#app .jf-profile-avatar.has-png-frame{position:relative;display:grid;place-items:center;border:0!important;padding:0!important;box-shadow:none!important;background:transparent!important}
.jf-profile-avatar.has-png-frame{width:88px;height:88px;flex:none}
.jf-avatar.has-png-frame>img,.jf-profile-avatar.has-png-frame>img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--reward-photo-size)!important;height:var(--reward-photo-size)!important;object-fit:cover;border-radius:50%;z-index:1}
.jf-avatar.has-png-frame>.jf-initial,.jf-profile-avatar.has-png-frame>.avatar-initial{display:grid;place-items:center;width:var(--reward-photo-size);height:var(--reward-photo-size);border-radius:50%;background:var(--soft);font-size:20px!important}
.jf-cosmetic-decoration{position:absolute;z-index:3;pointer-events:none}
.jf-avatar .jf-cosmetic-frame,.jf-profile-avatar .jf-cosmetic-frame,.jf-rank-cosmetics .jf-cosmetic-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.jf-cosmetic-frame .jf-reward-fallback{display:none!important}
.jf-cosmetic-frame.is-image-missing{border:3px solid var(--joy-frame-accent,#c9b06f);border-radius:50%;box-sizing:border-box}
.jf-avatar.has-png-badge::after,.jf-profile-avatar.has-png-badge::after,.jf-avatar.has-png-flame::before,.jf-profile-avatar.has-png-flame::before{display:none!important}
.jf-avatar .jf-cosmetic-badge,.jf-profile-avatar .jf-cosmetic-badge{width:30px;height:30px;top:-5px;left:-7px}
.jf-avatar .jf-cosmetic-flame,.jf-profile-avatar .jf-cosmetic-flame{width:29px;height:29px;top:-5px;right:-7px}
.jf-avatar small{z-index:4}
.jf-fire-skin{width:120px;height:120px;max-width:100%;filter:none!important}
.jf-fire-skin .jf-fire-svg{max-width:100%;height:auto}
.jf-fire-profile-icon>.jf-fire-skin{width:100%;height:100%}
.jf-equipped-badge:has(.jf-profile-badge-art){display:inline-flex;align-items:center;gap:8px;color:var(--t);background:var(--soft);font-size:12px}
.jf-profile-badge-art{width:48px;height:48px}
#app .jf-rank-cosmetics.has-png-frame::before{display:none}
#app .jf-rank-cosmetics.has-png-frame .jf-rank-avatar{width:var(--reward-photo-size);height:var(--reward-photo-size);align-self:center;justify-self:center;border:0!important;box-shadow:none!important}
.jf-rank-decoration.has-png-art{width:27px;height:27px;border:0;border-radius:0;background:transparent;box-shadow:none}
.jf-rank-chip-art{width:22px;height:22px}
@media(max-width:959px){.jf-rank-cosmetics .jf-rank-decoration.has-png-art{width:23px;height:23px}.jf-fire-visual>.jf-fire-skin{width:90px;height:90px}}
@media(max-width:430px){#app .jf-reward-tile[data-rarity] .jf-reward-symbol:has(.jf-reward-art){width:104px;height:104px}.jf-avatar .jf-cosmetic-badge,.jf-avatar .jf-cosmetic-flame{width:24px;height:24px}}
