/* =====================================================================
   AprovAKI — aki_avatar_ring_flat.css (2026-08-01 · v5 UNIFICADO FINAL)
   ---------------------------------------------------------------------
   SUBSTITUI TODAS as versões anteriores. Carregar SEMPRE depois de
   aki_patente_v16.css. Suba com ?v=20260801_5 no <link>.

   FILOSOFIA (definitiva)
   Um anel único, fino, com a cor da patente do usuário. Zero sombra,
   zero halo, zero preenchimento colorido atrás da foto. O anel vira
   uma BORDA (não background do disco), então a cor NUNCA vaza pra
   dentro do círculo. Vale para: perfil grande, pódio do ranking,
   Top 50 e header.

   TÉCNICA
   Border-image simulada com duas camadas de background:
     - padding-box: cor neutra (gray) que preenche o INTERIOR do disco.
     - border-box:  conic-gradient da patente que preenche APENAS o
                    contorno (border).
     - border: 3px solid transparent (deixa a camada border-box aparecer).
     - padding: 0.
   Resultado: o gradiente só existe na borda de 3px. A foto cobre 100%
   do interior. Nada vaza.
   ===================================================================== */


/* ===========================================================
   BLOCO A — DERRUBAR SOMBRAS E FILTROS
   =========================================================== */
html body .avatar-cluster,
html body .avatar-cluster .avatar-wrapper,
html body .avatar-cluster .avatar-anel,
html body .avatar-cluster .avatar-anel--perfil,
html body .avatar-cluster .avatar-anel--post,
html body .avatar-wrapper.avatar-anel--perfil,
html body .avatar-wrapper.avatar-anel--post,
html body .podium-avatar,
html body .ranking-avatar,
html body .aki-userchip .aki-userchip__avatar {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    outline: none !important;
    text-shadow: none !important;
}

html body .avatar-cluster .progress-ring,
html body .avatar-cluster .progress-ring *,
html body .podium-avatar .ranking-avatar-ring,
html body .podium-avatar .ranking-avatar-ring *,
html body .ranking-avatar .ranking-avatar-ring,
html body .ranking-avatar .ranking-avatar-ring * {
    filter: none !important;
    -webkit-filter: none !important;
}


/* ===========================================================
   BLOCO B — ESCONDER SVGs (o anel vira border do wrapper)
   =========================================================== */
html body .avatar-cluster .progress-ring,
html body .avatar-cluster .avatar-anel--perfil .progress-ring,
html body .avatar-wrapper .progress-ring,
html body .podium-avatar  .ranking-avatar-ring,
html body .ranking-avatar .ranking-avatar-ring {
    display: none !important;
}


/* ===========================================================
   BLOCO C — WRAPPER USA BORDER TRANSPARENTE + BACKGROUND DUPLO
   Aqui o gradiente vira SÓ o contorno.
   =========================================================== */
html body .avatar-cluster .avatar-anel--perfil,
html body .avatar-cluster .avatar-wrapper.avatar-anel--perfil,
html body .avatar-wrapper.avatar-anel--perfil,
html body .podium-avatar,
html body .ranking-avatar {
    border: 3px solid transparent !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
}


/* ===========================================================
   BLOCO D — CORES POR PATENTE (border-image via dupla camada)
   linear-gradient (cinza) na padding-box   → interior
   conic-gradient (patente) na border-box   → o anel
   =========================================================== */

/* Bronze */
html body .avatar-cluster.is-bronze .avatar-anel--perfil,
html body .avatar-wrapper.is-bronze.avatar-anel--perfil,
html body .podium-avatar.ranking-patente-bronze,
html body .ranking-avatar.ranking-patente-bronze {
    background-image:
        linear-gradient(#f1f5f9, #f1f5f9),
        conic-gradient(from 210deg,
            #f2c78a 0deg, #d9954a 90deg, #c98a3c 180deg,
            #a86a25 270deg, #f2c78a 360deg) !important;
}

/* Prata */
html body .avatar-cluster.is-prata .avatar-anel--perfil,
html body .avatar-wrapper.is-prata.avatar-anel--perfil,
html body .podium-avatar.ranking-patente-prata,
html body .ranking-avatar.ranking-patente-prata {
    background-image:
        linear-gradient(#f1f5f9, #f1f5f9),
        conic-gradient(from 200deg,
            #e6ecf5 0deg, #b8c2d1 90deg, #7b8aa1 180deg,
            #c9d3e2 270deg, #e6ecf5 360deg) !important;
}

/* Ouro */
html body .avatar-cluster.is-ouro .avatar-anel--perfil,
html body .avatar-wrapper.is-ouro.avatar-anel--perfil,
html body .podium-avatar.ranking-patente-ouro,
html body .ranking-avatar.ranking-patente-ouro {
    background-image:
        linear-gradient(#f1f5f9, #f1f5f9),
        conic-gradient(from 200deg,
            #fff2a8 0deg, #ffd94a 90deg, #f0c419 180deg,
            #d9a300 270deg, #fff2a8 360deg) !important;
}

/* Esmeralda */
html body .avatar-cluster.is-esmeralda .avatar-anel--perfil,
html body .avatar-wrapper.is-esmeralda.avatar-anel--perfil,
html body .podium-avatar.ranking-patente-esmeralda,
html body .ranking-avatar.ranking-patente-esmeralda {
    background-image:
        linear-gradient(#f1f5f9, #f1f5f9),
        conic-gradient(from 210deg,
            #6ee7b7 0deg, #10b981 90deg, #059669 180deg,
            #047857 270deg, #6ee7b7 360deg) !important;
}

/* Rubi */
html body .avatar-cluster.is-rubi .avatar-anel--perfil,
html body .avatar-wrapper.is-rubi.avatar-anel--perfil,
html body .podium-avatar.ranking-patente-rubi,
html body .ranking-avatar.ranking-patente-rubi {
    background-image:
        linear-gradient(#f1f5f9, #f1f5f9),
        conic-gradient(from 210deg,
            #fca5a5 0deg, #ef4444 90deg, #b91c1c 180deg,
            #dc2626 270deg, #fca5a5 360deg) !important;
}

/* Diamante */
html body .avatar-cluster.is-diamante .avatar-anel--perfil,
html body .avatar-wrapper.is-diamante.avatar-anel--perfil,
html body .podium-avatar.ranking-patente-diamante,
html body .ranking-avatar.ranking-patente-diamante {
    background-image:
        linear-gradient(#f1f5f9, #f1f5f9),
        conic-gradient(from 200deg,
            #bae6fd 0deg, #38bdf8 90deg, #0284c7 180deg,
            #6fd5ff 270deg, #bae6fd 360deg) !important;
}

/* Alexandrita — pedra iridescente fiel */
html body .avatar-cluster.is-alexandrita .avatar-anel--perfil,
html body .avatar-wrapper.is-alexandrita.avatar-anel--perfil,
html body .podium-avatar.ranking-patente-alexandrita,
html body .ranking-avatar.ranking-patente-alexandrita {
    background-image:
        linear-gradient(#f1f5f9, #f1f5f9),
        conic-gradient(from 210deg,
            #22c55e 0deg,
            #06b6d4 72deg,
            #3b82f6 144deg,
            #7c3aed 216deg,
            #ec4899 288deg,
            #22c55e 360deg) !important;
    animation: aki-alex-ring-rotate 14s linear infinite !important;
}


/* ===========================================================
   BLOCO E — FOTO POR CIMA (sem borda branca extra)
   Ocupa 100% do interior; o anel colorido já é a borda do wrapper.
   =========================================================== */

/* Perfil grande — reposiciona a foto no interior (border eat 3px cada lado). */
html body .avatar-cluster .avatar-anel--perfil > picture,
html body .avatar-cluster .avatar-anel--perfil > picture > img.avatar-perfil,
html body .avatar-cluster .avatar-anel--perfil > img.avatar-perfil {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
}

/* Pódio */
html body .podium-avatar > .podium-avatar-photo {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Top 50 */
html body .ranking-avatar > .ranking-avatar-photo {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}


/* ===========================================================
   BLOCO F — TROFÉU LATERAL SEM SOMBRA
   =========================================================== */
html body .avatar-cluster .nivel-badge,
html body .podium-avatar .podium-avatar-badge,
html body .ranking-avatar .ranking-avatar-badge {
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
}


/* ===========================================================
   BLOCO G — "Patente máxima" oculto no card do perfil
   =========================================================== */
html body .patente-caption small,
html body .patente-caption--alexandrita small,
html body .patente-caption--alexandrita > small {
    display: none !important;
}


/* ===========================================================
   BLOCO H — REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    html body .avatar-cluster.is-alexandrita .avatar-anel--perfil,
    html body .avatar-wrapper.is-alexandrita.avatar-anel--perfil,
    html body .podium-avatar.ranking-patente-alexandrita,
    html body .ranking-avatar.ranking-patente-alexandrita,
    html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__avatar {
        animation: none !important;
    }
}


/* ===========================================================
   BLOCO I — KEYFRAME
   =========================================================== */
@keyframes aki-alex-ring-rotate {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}