/* ============================================================
   Card de perfil público do competidor — modal genérico reusado em
   3 telas (pódio da home, ranking completo, resultados do campeonato).
   Reaproveita tokens de landing.css (--ds-azul, --ds-dourado, --font-serif).
============================================================ */

.ds-perfil-clicavel { cursor: pointer; transition: opacity .15s ease; }
.ds-perfil-clicavel:hover, .ds-perfil-clicavel:focus-visible { opacity: .8; }

.ds-perfil-overlay {
    position: fixed; inset: 0; z-index: 2000; padding: 24px;
    background: rgba(5, 15, 30, .72); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ds-perfil-overlay.is-aberto { opacity: 1; pointer-events: auto; }

.ds-perfil-modal {
    background: var(--ds-azul); color: #fff; width: 100%; max-width: 440px; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; position: relative;
    border: 1px solid rgba(216, 154, 31, .25); box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    transform: translateY(14px); transition: transform .2s ease;
}
.ds-perfil-overlay.is-aberto .ds-perfil-modal { transform: translateY(0); }
/* Conteúdo é um flex column: cabeçalho/resumo/modalidades ficam fixos, só a lista de
   campeonatos (.ds-perfil-camp-lista) rola — ver ajuste 4. */
.ds-perfil-conteudo { display: flex; flex-direction: column; min-height: 0; }

/* O X parecia branco/cinza por DOIS motivos (nenhum deles era outra regra sobrescrevendo:
   os valores computados já vinham dourados):
     1. fundo `rgba(255,255,255,.06)` — branco translúcido, que deixava o círculo
        esbranquiçado e enterrava a borda dourada de 30% por baixo;
     2. dourado aplicado com opacidade (.3 na borda, .85 no traço), fraco demais pra ler
        como dourado num glifo fino de 16px.
   Agora dourado SÓLIDO no traço, fundo dourado translúcido (nada de branco) e borda a .4.
   O traço é desenhado com dois pseudo-elementos em vez do glifo "×": o caractere não é
   opticamente centrado na própria caixa de texto (a fonte deixa folga desigual acima e
   abaixo), então nenhum flex/line-height centraliza de verdade. Dois retângulos girados
   e posicionados por translate ficam no centro geométrico exato. */
.ds-perfil-close {
    position: absolute; top: 14px; right: 14px; z-index: 1;
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(216, 154, 31, .4);
    background: rgba(216, 154, 31, .08);
    font-size: 0; /* esconde o glifo "×" do HTML; o aria-label mantém a acessibilidade */
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, border-color .15s ease;
}
.ds-perfil-close::before,
.ds-perfil-close::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 12px; height: 1.5px; border-radius: 2px; background: #D89A1F;
}
.ds-perfil-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ds-perfil-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.ds-perfil-close:hover { background: rgba(216, 154, 31, .2); border-color: rgba(216, 154, 31, .7); }

.ds-perfil-carregando, .ds-perfil-erro {
    padding: 48px 28px; text-align: center; color: var(--ds-cinza-suave); font-size: 14px;
}

.ds-perfil-corpo { display: flex; gap: 16px; padding: 26px 24px 16px; flex-shrink: 0; }

/* width/height explícitos aqui (não só na foto) é o que corrige o oval: sem isso, o wrap
   é um item flex sem altura própria e ESTICA pra acompanhar a coluna de texto ao lado
   (align-items:stretch do .ds-perfil-corpo) — daí o anel (posicionado via inset relativo
   a este wrap) virava oval alto em vez de acompanhar o quadrado da foto. */
.ds-perfil-avatar-wrap { position: relative; flex-shrink: 0; width: 96px; height: 96px; }
/* Sem borda própria na foto (era um contorno branco translúcido que, sobre o azul do
   card, aparecia como uma linha azulada entre a foto e o anel) — o anel cola direto
   nela (inset = espessura do próprio anel, sem vão). */
.ds-perfil-avatar {
    width: 100%; height: 100%; border-radius: 16px; object-fit: cover; display: block;
}
.ds-perfil-avatar-fallback {
    width: 100%; height: 100%; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: var(--ds-azul-mid); color: var(--ds-dourado); font-weight: 700; font-size: 30px;
}
.ds-perfil-anel {
    position: absolute; inset: -3px; border-radius: 19px; border: 3px solid var(--ds-dourado);
    box-shadow: 0 0 18px rgba(216, 154, 31, .5); pointer-events: none;
}

/* Apelido/nome/Instagram/bio empilhados ao lado da foto — a bio fica aqui dentro, não
   numa faixa separada embaixo, pra aproveitar a largura ao lado da foto. */
.ds-perfil-direita { flex: 1; min-width: 0; padding-top: 1px; }
.ds-perfil-apelido {
    font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: #F5C24A;
    line-height: 1.2; word-break: break-word;
}
.ds-perfil-nome { color: #8AA0BE; font-size: 12.5px; margin-top: 2px; }
.ds-perfil-instagram {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; text-decoration: none;
}
.ds-perfil-instagram:hover { background: rgba(255, 255, 255, .15); }
/* A bio vive no cabeçalho, que é flex-shrink:0 (fica sempre visível). Sem limite de
   altura, uma bio longa — o campo aceita até 2000 caracteres — inflava o cabeçalho
   (medi 914px num caso real de 1941 chars) e, como o modal tem overflow:hidden, o
   resto do card era CORTADO (613px a menos, a lista de campeonatos sumia da tela).
   Com max-height + rolagem própria, a bio se contém e o card inteiro cabe.
   Vale pros dois cards: a classe é compartilhada e o competidor corre o mesmo risco. */
.ds-perfil-bio {
    font-style: italic; color: #c8d3e3; font-size: 12.5px; line-height: 1.5; margin: 8px 0 0;
    max-height: 110px; overflow-y: auto; padding-right: 6px;
}

.ds-perfil-resumo {
    display: flex; align-items: flex-start; padding: 14px 24px; flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ds-perfil-resumo-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ds-perfil-resumo-valor {
    font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: #fff; line-height: 1;
    display: flex; align-items: center; height: 26px;
}
.ds-perfil-resumo-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ds-cinza-suave); }
/* Mesma estrutura valor+label dos outros dois itens (altura 26px pro conteúdo) — sem isso,
   os discos de medalha (mais altos que o número) ficam desalinhados verticalmente. */
.ds-perfil-resumo-medalhas .ds-perfil-resumo-valor { flex-direction: row; gap: 6px; height: 26px; }
.ds-perfil-resumo-medalhas .ds-medal-icon { width: 24px; height: 24px; }
.ds-perfil-sem-medalha { color: var(--ds-cinza-suave); font-size: 13px; }

.ds-perfil-modalidades { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 24px 0; flex-shrink: 0; }
.ds-perfil-chip {
    background: #123a5e; color: #9cd0ff; font-size: 11px; font-weight: 700;
    padding: 4px 11px; border-radius: 20px; white-space: nowrap;
}

/* Vira flex column e assume o espaço restante: é a única seção que pode ceder altura
   (as de cima são flex-shrink:0). Sem isso a lista tinha só um max-height fixo, que não
   ENCOLHE quando falta espaço — em tela curta o total estourava o modal e o excesso era
   cortado pelo overflow:hidden (medi 10px sumindo mesmo com a bio já contida). */
.ds-perfil-campeonatos {
    padding: 14px 24px 22px; min-height: 0;
    flex: 1 1 auto; display: flex; flex-direction: column;
}
.ds-perfil-campeonatos h4 {
    font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--ds-dourado-claro);
    margin: 0 0 8px; flex-shrink: 0;
}
.ds-perfil-camp-lista {
    display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
    /* flex 1 + min-height 0 = encolhe até onde precisar e rola por dentro; o max-height
       é só o teto, pra não virar uma lista gigante em tela alta. */
    flex: 1 1 auto; min-height: 0; max-height: 170px;
    padding-right: 4px; /* espaço pra scrollbar não colar no conteúdo */
}
/* Mesma scrollbar fina dourada nas duas áreas que rolam por dentro (lista e bio):
   um seletor só, em vez de repetir o estilo. */
.ds-perfil-camp-lista,
.ds-perfil-bio { scrollbar-width: thin; scrollbar-color: rgba(216, 154, 31, .5) transparent; }
.ds-perfil-camp-lista::-webkit-scrollbar,
.ds-perfil-bio::-webkit-scrollbar { width: 6px; }
.ds-perfil-camp-lista::-webkit-scrollbar-track,
.ds-perfil-bio::-webkit-scrollbar-track { background: transparent; }
.ds-perfil-camp-lista::-webkit-scrollbar-thumb,
.ds-perfil-bio::-webkit-scrollbar-thumb { background: rgba(216, 154, 31, .4); border-radius: 6px; }
.ds-perfil-camp-lista::-webkit-scrollbar-thumb:hover,
.ds-perfil-bio::-webkit-scrollbar-thumb:hover { background: rgba(216, 154, 31, .6); }
.ds-perfil-camp-vazio { color: var(--ds-cinza-suave); font-size: 13px; font-style: italic; }

.ds-perfil-camp-linha {
    display: flex; align-items: center; gap: 11px; background: rgba(255, 255, 255, .05);
    border-radius: 10px; padding: 8px 10px;
}
.ds-perfil-camp-logo {
    width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #fff;
}
.ds-perfil-camp-logo-fallback {
    display: flex; align-items: center; justify-content: center; color: var(--ds-dourado);
    background: rgba(216, 154, 31, .12);
}
.ds-perfil-camp-info { flex: 1; min-width: 0; }
.ds-perfil-camp-nome {
    font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-perfil-camp-cat { font-size: 11.5px; color: #8AA0BE; margin-top: 1px; }
.ds-perfil-camp-coloc {
    flex-shrink: 0; display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #fff;
}
.ds-perfil-camp-coloc .ds-medal-icon { width: 22px; height: 22px; }

/* ---------- Mobile: foto em cima, dados embaixo, tudo centralizado ---------- */
@media (max-width: 560px) {
    /* Era align-items:flex-end (bottom-sheet), o que fazia o card nascer grudado no
       rodapé e parecer cortado. Centralizado nos dois eixos; se o conteúdo não couber,
       o max-height + a rolagem interna da lista de campeonatos resolvem, e a margem
       lateral/vertical garante que ele nunca encoste nas bordas da tela. */
    .ds-perfil-overlay { padding: 16px 12px; align-items: center; justify-content: center; }
    .ds-perfil-modal { width: 100%; max-width: 100%; max-height: calc(100vh - 32px); border-radius: 16px; }
    .ds-perfil-corpo { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px 16px; }
    .ds-perfil-direita { display: flex; flex-direction: column; align-items: center; }
    .ds-perfil-resumo, .ds-perfil-modalidades, .ds-perfil-campeonatos { padding-left: 20px; padding-right: 20px; }
    .ds-perfil-modalidades { justify-content: center; }

    /* No mobile a foto fica sozinha e centralizada no topo do card, sobrando espaço nas
       laterais: ela é o elemento principal ali, então cresce (96 → 124px). Raio e anel
       acompanham na proporção, pra continuar quadrado arredondado com o anel colado.
       Desktop não é afetado: aquele bloco é min-width 561px. */
    .ds-perfil-avatar-wrap { width: 124px; height: 124px; }
    .ds-perfil-avatar, .ds-perfil-avatar-fallback { border-radius: 20px; }
    .ds-perfil-avatar-fallback { font-size: 40px; }
    .ds-perfil-anel { border-radius: 23px; }

    /* Tela mais curta e foto maior no topo: a bio e a lista ficam com teto menor pra
       o card continuar cabendo inteiro.
       O teto da bio é relativo à altura da tela (12vh) com limite de 96px: numa tela
       de 640px ela cede pra ~77px e sobra espaço pra lista, que senão ficava com 18px
       (rolava, mas não dava pra ver item nenhum). O min-height garante que a lista
       nunca fique menor que uma linha. */
    .ds-perfil-bio { max-height: min(96px, 12vh); }
    .ds-perfil-camp-lista { max-height: 140px; min-height: 44px; }
}

/* ============================================================
   DESKTOP/NOTEBOOK: meio-termo de largura.
   O card foi de 560px pra 440px quando sobrava um vazio grande à direita do
   cabeçalho. Resolvido o vazio, 440px passou a parecer pequeno em notebook largo.
   Aqui vai pra 520px (entre os dois), com foto e fontes acompanhando na mesma
   proporção. Abaixo de 560px nada disso se aplica: o mobile está aprovado.
============================================================ */
@media (min-width: 561px) {
    .ds-perfil-modal { max-width: 520px; }

    /* Foto maior no desktop: com o card em 520px, 108px tinha ficado pequeno em
       proporção. 132px dá presença de "elemento principal do topo" e ainda sobram
       ~318px pra coluna de texto ao lado (apelido/nome/Instagram/bio). */
    .ds-perfil-avatar-wrap { width: 132px; height: 132px; }
    .ds-perfil-avatar, .ds-perfil-avatar-fallback { border-radius: 20px; }
    .ds-perfil-avatar-fallback { font-size: 42px; }
    .ds-perfil-anel { border-radius: 23px; }

    .ds-perfil-corpo { gap: 18px; padding: 28px 26px 18px; }
    .ds-perfil-apelido { font-size: 22px; }
    .ds-perfil-nome { font-size: 13px; }
    .ds-perfil-instagram { font-size: 12.5px; padding: 5px 12px; }
    .ds-perfil-bio { font-size: 13px; }

    .ds-perfil-resumo { padding: 16px 26px; }
    .ds-perfil-resumo-valor { font-size: 24px; height: 28px; }
    .ds-perfil-resumo-medalhas .ds-perfil-resumo-valor { height: 28px; }
    .ds-perfil-resumo-medalhas .ds-medal-icon { width: 26px; height: 26px; }
    .ds-perfil-resumo-label { font-size: 11px; }

    .ds-perfil-modalidades { padding: 16px 26px 0; }
    .ds-perfil-chip { font-size: 11.5px; padding: 4px 12px; }

    .ds-perfil-campeonatos { padding: 16px 26px 24px; }
    .ds-perfil-campeonatos h4 { font-size: 15px; }
    /* Lista um pouco mais alta acompanhando o card, ainda com rolagem interna. */
    .ds-perfil-camp-lista { max-height: 190px; }
    .ds-perfil-camp-logo { width: 40px; height: 40px; }
    .ds-perfil-camp-nome { font-size: 13.5px; }
    .ds-perfil-camp-cat { font-size: 12px; }
    .ds-perfil-camp-coloc { font-size: 13px; }
    .ds-perfil-camp-coloc .ds-medal-icon { width: 24px; height: 24px; }
}

/* ============================================================
   Card de perfil do JURADO — reusa toda a casca do card de competidor
   (modal, foto quadrada + anel, X dourado, fechar por X/ESC/clique-fora).
   Só o miolo é diferente: jurado não tem pódio/medalha, então entram a faixa de
   atuação, os critérios que avalia e as modalidades. Nada de nota/severidade.
============================================================ */

/* Selo que diferencia visualmente do card de competidor. */
.ds-perfil-selo {
    display: inline-block; margin-bottom: 4px;
    background: rgba(216, 154, 31, .16); border: 1px solid rgba(216, 154, 31, .4);
    color: var(--ds-dourado-claro); border-radius: 999px;
    padding: 2px 10px; font-size: 10px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
}

/* Blocos rotulados ("Avalia", "Modalidades") — o card do competidor mostra os chips
   sem rótulo porque só tem um tipo; aqui há dois, então cada um se identifica. */
/* flex-shrink:0 como as outras seções curtas (resumo/modalidades do competidor): sem
   isso, o bloco encolhia quando o conteúdo apertava, em vez de a lista rolar. */
.ds-perfil-bloco-chips { padding: 14px 24px 0; flex-shrink: 0; }
.ds-perfil-bloco-label {
    display: block; margin-bottom: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    color: var(--ds-cinza-suave);
}
.ds-perfil-bloco-chips .ds-perfil-modalidades { padding: 0; }

/* Critérios julgados naquele campeonato, à direita da linha do histórico (ocupa o
   lugar onde no card do competidor fica a colocação). */
.ds-perfil-camp-crit {
    flex-shrink: 0; max-width: 40%; text-align: right;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    color: var(--ds-dourado-claro); text-transform: uppercase; line-height: 1.3;
}

@media (min-width: 561px) {
    .ds-perfil-bloco-chips { padding: 16px 26px 0; }
    .ds-perfil-camp-crit { font-size: 10.5px; }
}
@media (max-width: 560px) {
    .ds-perfil-bloco-chips { padding-left: 20px; padding-right: 20px; }
    /* No mobile o card é column/centralizado: os blocos acompanham. */
    .ds-perfil-bloco-chips { text-align: center; }
    .ds-perfil-bloco-chips .ds-perfil-modalidades { justify-content: center; }
}