/* =========================================================
   MUSICALWORLD — MODAL PÚBLICO DE XP DO ARTISTA

   Arquivo:
   css/index/componentes/modal-xp.css

   Responsabilidades:
   - Visibilidade e posicionamento do modal.
   - Fundo sobreposto à página.
   - Painel centralizado.
   - Cabeçalho e botão de fechar.
   - Estatísticas de nível e XP.
   - Barra de progresso.
   - Trilha de níveis.
   - Progressão de títulos.
   - Estados de carregamento e erro.
   - Responsividade.

   IMPORTANTE:
   - O modal começa oculto.
   - A classe is-aberto controla sua abertura.
   - O atributo hidden mantém o modal oculto.
   - O elemento principal usa position: fixed.
   - O modal não participa do fluxo normal da página.
   ========================================================= */


/* =========================================================
   1. VARIÁVEIS E POSICIONAMENTO PRINCIPAL
   ========================================================= */

#modal-xp-artista {
    --xp-roxo: #6d4aff;
    --xp-roxo-hover: #5938e5;
    --xp-roxo-claro: #f0ecff;
    --xp-roxo-borda: #ded5ff;

    --xp-texto: #172033;
    --xp-texto-secundario: #667085;

    --xp-fundo: #ffffff;
    --xp-fundo-suave: #f5f7fb;

    --xp-borda: #e6e9f0;
    --xp-sucesso: #16845b;
    --xp-erro: #c24141;

    /* O modal fica fora do fluxo normal da página. */
    position: fixed;
    inset: 0;

    /* Sobrepõe o conteúdo da página. */
    z-index: 10000;

    /* Permanece oculto até receber is-aberto. */
    display: none;

    /* Centralização horizontal e vertical. */
    align-items: center;
    justify-content: center;

    /* Espaçamento em relação às bordas da janela. */
    padding: 20px;
    box-sizing: border-box;

    /* Dimensões da janela, não do documento. */
    width: 100%;
    height: 100%;
    height: 100dvh;

    /* Rolagem de segurança em janelas pequenas. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    color: var(--xp-texto);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   2. CONTROLE DE VISIBILIDADE

   O estado fechado nunca pode bloquear os cliques da página.
   ========================================================= */

#modal-xp-artista[hidden],
#modal-xp-artista:not(.is-aberto) {
    display: none !important;
}

#modal-xp-artista.is-aberto:not([hidden]) {
    display: flex;
}


/* =========================================================
   3. FUNDO SOBREPOSTO
   ========================================================= */

#modal-xp-artista .modal-xp-artista__fundo {
    position: absolute;
    inset: 0;
    z-index: 0;

    background: rgb(15 23 42 / 48%);

    opacity: 0;

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    animation: modal-xp-fundo-entrar 200ms ease forwards;
}

@keyframes modal-xp-fundo-entrar {
    to {
        opacity: 1;
    }
}


/* =========================================================
   4. PAINEL DO MODAL
   ========================================================= */

#modal-xp-artista .modal-xp-artista__painel {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    /* Centralização e largura controlada. */
    flex: 0 1 600px;
    width: 100%;
    max-width: 600px;

    /* Impede que o painel ultrapasse a janela. */
    max-height: calc(100% - 40px);
    max-height: calc(100dvh - 40px);

    min-height: 0;
    margin: auto;

    overflow: hidden;

    border: 1px solid rgb(230 233 240 / 90%);
    border-radius: 24px;

    background: var(--xp-fundo);

    box-shadow: 0 24px 80px rgb(15 23 42 / 24%);

    transform: translateY(14px);

    animation:
        modal-xp-painel-entrar
        280ms cubic-bezier(.22, 1, .36, 1)
        forwards;

    outline: none;
    overscroll-behavior: contain;
}

@keyframes modal-xp-painel-entrar {
    to {
        transform: translateY(0);
    }
}


/* =========================================================
   5. INDICADOR SUPERIOR
   ========================================================= */

#modal-xp-artista .modal-xp-artista__indicador {
    display: none;

    width: 38px;
    height: 4px;

    flex: 0 0 auto;

    margin: 10px auto 0;

    border-radius: 999px;

    background: #d9dce5;
}


/* =========================================================
   6. CABEÇALHO
   ========================================================= */

#modal-xp-artista .modal-xp-artista__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;
    gap: 16px;

    padding: 21px 26px;

    border-bottom: 1px solid var(--xp-borda);

    background: #ffffff;
}

#modal-xp-artista .modal-xp-artista__cabecalho-texto {
    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 4px;
}

#modal-xp-artista .modal-xp-artista__sobretitulo {
    color: var(--xp-roxo);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: .9px;
}

#modal-xp-artista .modal-xp-artista__cabecalho h2 {
    margin: 0;

    color: var(--xp-texto);

    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.45px;
}


/* =========================================================
   7. BOTÃO FECHAR
   ========================================================= */

#modal-xp-artista .modal-xp-artista__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;
    padding: 0;

    border: 1px solid var(--xp-borda);
    border-radius: 50%;

    background: var(--xp-fundo-suave);
    color: var(--xp-texto-secundario);

    cursor: pointer;

    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;

    -webkit-tap-highlight-color: transparent;
}

#modal-xp-artista .modal-xp-artista__fechar svg {
    display: block;
    flex: 0 0 auto;
}

#modal-xp-artista .modal-xp-artista__fechar:hover {
    color: var(--xp-texto);

    background: #eceef4;
    border-color: #d5d9e3;
}

#modal-xp-artista .modal-xp-artista__fechar:active {
    transform: scale(.94);
}


/* =========================================================
   8. CONTEÚDO ROLÁVEL
   ========================================================= */

#modal-xp-artista .modal-xp-artista__conteudo {
    flex: 1 1 auto;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 26px;

    background: #ffffff;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: #cbd0dc transparent;
}

#modal-xp-artista .modal-xp-artista__conteudo::-webkit-scrollbar {
    width: 5px;
}

#modal-xp-artista .modal-xp-artista__conteudo::-webkit-scrollbar-track {
    background: transparent;
}

#modal-xp-artista .modal-xp-artista__conteudo::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd0dc;
}


/* =========================================================
   9. RESUMO PRINCIPAL
   ========================================================= */

#modal-xp-artista .modal-xp-artista__resumo {
    display: flex;
    flex-direction: column;

    gap: 19px;

    padding: 25px;

    border: 1px solid #e8e2ff;
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgb(109 74 255 / 10%),
            transparent 45%
        ),
        linear-gradient(145deg, #ffffff, #faf9ff);
}


/* =========================================================
   10. TÍTULO OFICIAL
   ========================================================= */

#modal-xp-artista .modal-xp-artista__titulo-destaque {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 8px;
    min-width: 0;
}

#modal-xp-artista .modal-xp-artista__titulo-destaque .titulo-xp {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
    max-width: 100%;
}

#modal-xp-artista .modal-xp-artista__titulo-destaque svg {
    display: block;
    max-width: 100%;
}

#modal-xp-artista .modal-xp-artista__titulo-descricao {
    color: var(--xp-texto-secundario);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}


/* =========================================================
   11. ESTATÍSTICAS
   ========================================================= */

#modal-xp-artista .modal-xp-artista__estatisticas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

#modal-xp-artista .modal-xp-artista__estatistica {
    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 7px;

    padding: 15px;

    border: 1px solid rgb(230 233 240 / 90%);
    border-radius: 13px;

    background: rgb(255 255 255 / 88%);
}

#modal-xp-artista .modal-xp-artista__estatistica-rotulo {
    color: var(--xp-texto-secundario);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

#modal-xp-artista .modal-xp-artista__estatistica strong {
    color: var(--xp-texto);

    font-size: clamp(20px, 5vw, 27px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.7px;

    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   12. CABEÇALHO DO PROGRESSO
   ========================================================= */

#modal-xp-artista .modal-xp-artista__progresso-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color: var(--xp-texto);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

#modal-xp-artista .modal-xp-artista__progresso-cabecalho strong {
    flex: 0 0 auto;

    color: var(--xp-roxo);

    font-size: 13px;
    font-weight: 800;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   13. BARRA DE PROGRESSO
   ========================================================= */

#modal-xp-artista .modal-xp-artista__barra {
    position: relative;

    width: 100%;
    height: 9px;

    overflow: hidden;

    border-radius: 999px;
    background: #ebe7ff;
}

#modal-xp-artista .modal-xp-artista__barra-preenchimento {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #8b73ff 0%,
        #6d4aff 100%
    );

    transition: width 450ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   14. DETALHES DO PROGRESSO
   ========================================================= */

#modal-xp-artista .modal-xp-artista__progresso-detalhes {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    color: var(--xp-texto-secundario);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
}

#modal-xp-artista .modal-xp-artista__progresso-detalhes span {
    min-width: 0;
}

#modal-xp-artista .modal-xp-artista__progresso-detalhes span:last-child {
    text-align: right;
}


/* =========================================================
   15. PRÓXIMO NÍVEL
   ========================================================= */

#modal-xp-artista .modal-xp-artista__proximo {
    display: flex;
    align-items: flex-start;

    gap: 12px;
    padding: 14px;

    border: 1px solid var(--xp-borda);
    border-radius: 13px;

    background: rgb(255 255 255 / 90%);
}

#modal-xp-artista .modal-xp-artista__proximo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 35px;
    height: 35px;

    border-radius: 11px;

    background: var(--xp-roxo-claro);
    color: var(--xp-roxo);
}

#modal-xp-artista .modal-xp-artista__proximo-icone svg {
    display: block;
}

#modal-xp-artista .modal-xp-artista__proximo-texto {
    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 4px;
}

#modal-xp-artista .modal-xp-artista__proximo-texto strong {
    color: var(--xp-texto);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

#modal-xp-artista .modal-xp-artista__proximo-texto span {
    color: var(--xp-texto-secundario);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* =========================================================
   16. SEÇÕES
   ========================================================= */

#modal-xp-artista .modal-xp-artista__secao {
    display: flex;
    flex-direction: column;

    gap: 15px;
    margin-top: 26px;
}

#modal-xp-artista .modal-xp-artista__secao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

#modal-xp-artista .modal-xp-artista__secao-cabecalho h3 {
    margin: 0;

    color: var(--xp-texto);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.2px;
}

#modal-xp-artista .modal-xp-artista__secao-cabecalho > span {
    flex: 0 0 auto;

    color: var(--xp-roxo);

    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}


/* =========================================================
   17. TRILHA DE NÍVEIS
   ========================================================= */

#modal-xp-artista .modal-xp-artista__trilha {
    display: flex;
    align-items: stretch;

    gap: 9px;
    width: 100%;

    padding: 5px 2px 10px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
    scrollbar-color: #d6d1eb transparent;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

#modal-xp-artista .modal-xp-artista__trilha::-webkit-scrollbar {
    height: 4px;
}

#modal-xp-artista .modal-xp-artista__trilha::-webkit-scrollbar-thumb {
    background: #d6d1eb;
    border-radius: 999px;
}

#modal-xp-artista .modal-xp-artista__nivel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    flex: 0 0 68px;
    min-width: 68px;

    gap: 8px;
    padding: 0 4px;

    text-align: center;
}

#modal-xp-artista .modal-xp-artista__nivel-numero {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    border: 2px solid #dfe3ec;
    border-radius: 50%;

    background: #ffffff;
    color: #8b93a4;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}

#modal-xp-artista .modal-xp-artista__nivel.is-conquistado
.modal-xp-artista__nivel-numero {
    border-color: #b8aaff;

    background: #f0ecff;
    color: var(--xp-roxo);
}

#modal-xp-artista .modal-xp-artista__nivel.is-atual
.modal-xp-artista__nivel-numero {
    border-color: var(--xp-roxo);

    background: var(--xp-roxo);
    color: #ffffff;

    box-shadow: 0 0 0 4px rgb(109 74 255 / 13%);
}

#modal-xp-artista .modal-xp-artista__nivel-legenda {
    color: var(--xp-texto-secundario);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

#modal-xp-artista .modal-xp-artista__nivel.is-atual
.modal-xp-artista__nivel-legenda {
    color: var(--xp-roxo);
    font-weight: 800;
}

#modal-xp-artista .modal-xp-artista__reticencias {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 25px;
    min-width: 25px;

    color: #98a0b0;

    font-size: 20px;
    font-weight: 800;
}


/* =========================================================
   18. AJUDA DA TRILHA
   ========================================================= */

#modal-xp-artista .modal-xp-artista__ajuda {
    margin: 0;

    color: var(--xp-texto-secundario);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
}


/* =========================================================
   19. TÍTULOS XP
   ========================================================= */

#modal-xp-artista .modal-xp-artista__titulos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
}

#modal-xp-artista .modal-xp-artista__titulo-item {
    display: flex;
    align-items: flex-start;

    min-width: 0;
    min-height: 78px;

    gap: 10px;
    padding: 13px;

    border: 1px solid var(--xp-borda);
    border-radius: 13px;

    background: #ffffff;

    transition:
        border-color 160ms ease,
        background 160ms ease;
}

#modal-xp-artista .modal-xp-artista__titulo-item.is-conquistado {
    border-color: #d9d0ff;
    background: #faf9ff;
}

#modal-xp-artista .modal-xp-artista__titulo-item.is-atual {
    border-color: var(--xp-roxo);
    background: #f5f2ff;

    box-shadow: inset 0 0 0 1px rgb(109 74 255 / 8%);
}

#modal-xp-artista .modal-xp-artista__titulo-item.is-bloqueado {
    background: #f9fafc;
}

#modal-xp-artista .modal-xp-artista__titulo-status {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 26px;
    height: 26px;

    border-radius: 8px;

    background: #eef0f4;
    color: #8b93a4;

    font-size: 12px;
    font-weight: 800;
}

#modal-xp-artista .modal-xp-artista__titulo-item.is-conquistado
.modal-xp-artista__titulo-status {
    background: #e8f7ef;
    color: var(--xp-sucesso);
}

#modal-xp-artista .modal-xp-artista__titulo-item.is-atual
.modal-xp-artista__titulo-status {
    background: var(--xp-roxo);
    color: #ffffff;
}

#modal-xp-artista .modal-xp-artista__titulo-info {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;
    min-width: 0;

    gap: 5px;
}

#modal-xp-artista .modal-xp-artista__titulo-nome {
    color: var(--xp-texto);

    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

#modal-xp-artista .modal-xp-artista__titulo-item.is-bloqueado
.modal-xp-artista__titulo-nome {
    color: #737d90;
}

#modal-xp-artista .modal-xp-artista__titulo-faixa {
    color: var(--xp-texto-secundario);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}

#modal-xp-artista .modal-xp-artista__titulo-atual {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    align-self: flex-start;

    padding: 4px 7px;

    border-radius: 6px;

    background: var(--xp-roxo-claro);
    color: var(--xp-roxo);

    font-size: 9px;
    font-weight: 800;
    line-height: 1.3;
}


/* =========================================================
   20. RODAPÉ
   ========================================================= */

#modal-xp-artista .modal-xp-artista__rodape {
    display: flex;
    flex: 0 0 auto;

    padding: 18px 26px;

    border-top: 1px solid var(--xp-borda);

    background: #ffffff;

    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}


/* =========================================================
   21. BOTÃO VER MEU NÍVEL
   ========================================================= */

#modal-xp-artista .modal-xp-artista__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 48px;

    gap: 10px;
    padding: 13px 18px;

    border: 1px solid var(--xp-roxo);
    border-radius: 12px;

    background: var(--xp-roxo);
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;

    cursor: pointer;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;

    -webkit-tap-highlight-color: transparent;
}

#modal-xp-artista .modal-xp-artista__botao svg {
    display: block;
    flex: 0 0 auto;
}

#modal-xp-artista .modal-xp-artista__botao:hover {
    border-color: var(--xp-roxo-hover);
    background: var(--xp-roxo-hover);

    box-shadow: 0 5px 14px rgb(109 74 255 / 22%);
}

#modal-xp-artista .modal-xp-artista__botao:active {
    transform: scale(.99);
}


/* =========================================================
   22. CARREGAMENTO
   ========================================================= */

#modal-xp-artista .modal-xp-artista__carregando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 230px;

    gap: 15px;
    padding: 30px 20px;

    text-align: center;
}

#modal-xp-artista .modal-xp-artista__carregando p {
    margin: 0;

    color: var(--xp-texto-secundario);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}

#modal-xp-artista .modal-xp-artista__spinner {
    display: block;

    width: 34px;
    height: 34px;

    border: 3px solid #e8e2ff;
    border-top-color: var(--xp-roxo);

    border-radius: 50%;

    animation: modal-xp-girar 700ms linear infinite;
}

@keyframes modal-xp-girar {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   23. ERRO
   ========================================================= */

#modal-xp-artista .modal-xp-artista__erro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 230px;

    gap: 13px;
    padding: 30px 20px;

    text-align: center;
}

#modal-xp-artista .modal-xp-artista__erro-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 14px;

    background: #fff0f0;
    color: var(--xp-erro);
}

#modal-xp-artista .modal-xp-artista__erro h3 {
    margin: 0;

    color: var(--xp-texto);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

#modal-xp-artista .modal-xp-artista__erro p {
    max-width: 360px;
    margin: 0;

    color: var(--xp-texto-secundario);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

#modal-xp-artista .modal-xp-artista__tentar-novamente {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    margin-top: 5px;
    padding: 10px 17px;

    border: 1px solid var(--xp-roxo-borda);
    border-radius: 10px;

    background: var(--xp-roxo-claro);
    color: var(--xp-roxo);

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

#modal-xp-artista .modal-xp-artista__tentar-novamente:hover {
    background: #e6dfff;
}


/* =========================================================
   24. FOCO ACESSÍVEL
   ========================================================= */

#modal-xp-artista button:focus-visible,
#modal-xp-artista [tabindex="-1"]:focus-visible {
    outline: 3px solid rgb(109 74 255 / 45%);
    outline-offset: 3px;
}

#modal-xp-artista button:focus:not(:focus-visible) {
    outline: none;
}


/* =========================================================
   25. TABLETS E DESKTOPS
   ========================================================= */

@media (min-width: 700px) {
    #modal-xp-artista {
        padding: 24px;
    }

    #modal-xp-artista .modal-xp-artista__painel {
        max-width: 600px;
        max-height: min(88vh, 820px);
        max-height: min(88dvh, 820px);

        border-radius: 24px;
    }

    #modal-xp-artista .modal-xp-artista__cabecalho {
        padding: 21px 26px;
    }

    #modal-xp-artista .modal-xp-artista__conteudo {
        padding: 26px;
    }

    #modal-xp-artista .modal-xp-artista__resumo {
        padding: 25px;
    }

    #modal-xp-artista .modal-xp-artista__rodape {
        padding: 18px 26px;
    }

    #modal-xp-artista .modal-xp-artista__titulos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   26. CELULARES
   ========================================================= */

@media (max-width: 699px) {
    #modal-xp-artista {
        padding: 12px;
    }

    #modal-xp-artista .modal-xp-artista__painel {
        max-height: calc(100% - 24px);
        max-height: calc(100dvh - 24px);

        border-radius: 20px;
    }

    #modal-xp-artista .modal-xp-artista__cabecalho {
        padding: 16px 18px;
    }

    #modal-xp-artista .modal-xp-artista__cabecalho h2 {
        font-size: 17px;
    }

    #modal-xp-artista .modal-xp-artista__conteudo {
        padding: 18px;
    }

    #modal-xp-artista .modal-xp-artista__resumo {
        gap: 16px;
        padding: 17px;
    }

    #modal-xp-artista .modal-xp-artista__rodape {
        padding: 14px 18px;
        padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    }

    #modal-xp-artista .modal-xp-artista__titulos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   27. CELULARES PEQUENOS
   ========================================================= */

@media (max-width: 380px) {
    #modal-xp-artista {
        padding: 8px;
    }

    #modal-xp-artista .modal-xp-artista__painel {
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
    }

    #modal-xp-artista .modal-xp-artista__cabecalho {
        padding: 14px 15px;
    }

    #modal-xp-artista .modal-xp-artista__cabecalho h2 {
        font-size: 16px;
    }

    #modal-xp-artista .modal-xp-artista__fechar {
        width: 36px;
        height: 36px;
    }

    #modal-xp-artista .modal-xp-artista__conteudo {
        padding: 14px;
    }

    #modal-xp-artista .modal-xp-artista__resumo {
        gap: 15px;
        padding: 14px;
    }

    #modal-xp-artista .modal-xp-artista__estatisticas {
        gap: 8px;
    }

    #modal-xp-artista .modal-xp-artista__estatistica {
        padding: 11px;
    }

    #modal-xp-artista .modal-xp-artista__estatistica strong {
        font-size: 20px;
    }

    #modal-xp-artista .modal-xp-artista__titulos {
        grid-template-columns: minmax(0, 1fr);
    }

    #modal-xp-artista .modal-xp-artista__titulo-item {
        min-height: 65px;
    }

    #modal-xp-artista .modal-xp-artista__rodape {
        padding-right: 14px;
        padding-left: 14px;
    }
}


/* =========================================================
   28. REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    #modal-xp-artista *,
    #modal-xp-artista *::before,
    #modal-xp-artista *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}