/* ============================================================
   Modal "Como funciona a classificação?" — regras de desempate do Ranking
   Geral, em linguagem simples pro público. A regra em si vive em
   Backend/DanceScore.Api/Data/RankingData.cs, documentada em
   docs/sistema/FORMATOS-E-REGRAS.md §13; aqui é só a explicação.
   Reaproveita os tokens de landing.css (--ds-azul, --ds-dourado, --font-serif)
   e o MESMO recurso visual do card de perfil (overlay escuro, moldura
   dourada, X em dois pseudo-elementos) — não as classes dele, porque o
   conteúdo (lista de critérios) pede uma largura diferente da de um card
   de foto+bio.
============================================================ */

/* ---------- Botão que abre o modal, na tela do Ranking Geral ---------- */
.ds-regras-trigger {
    display: flex; align-items: center; gap: 7px; width: max-content;
    margin: 14px auto 0;
    background: rgba(216, 154, 31, .1); border: 1px solid rgba(216, 154, 31, .35);
    color: var(--ds-dourado-claro); font-size: 13px; font-weight: 600;
    padding: 8px 16px; border-radius: 999px; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ds-regras-trigger:hover, .ds-regras-trigger:focus-visible { background: rgba(216, 154, 31, .2); border-color: var(--ds-dourado); }
.ds-regras-trigger i { font-size: 15px; }

/* ---------- Overlay / moldura do modal ---------- */
.ds-regras-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-regras-overlay.is-aberto { opacity: 1; pointer-events: auto; }

.ds-regras-modal {
    background: var(--ds-azul); color: #fff; width: 100%; max-width: 620px; 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-regras-overlay.is-aberto .ds-regras-modal { transform: translateY(0); }

/* Mesma construção do X do card de perfil (glifo não fica opticamente
   centrado em nenhuma fonte nesse tamanho — dois traços resolvem de vez). */
.ds-regras-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;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, border-color .15s ease;
}
.ds-regras-close::before, .ds-regras-close::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 12px; height: 1.5px; border-radius: 2px; background: #D89A1F;
}
.ds-regras-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ds-regras-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.ds-regras-close:hover { background: rgba(216, 154, 31, .2); border-color: rgba(216, 154, 31, .7); }

/* ---------- Conteúdo (rola inteiro se não couber — sem cabeçalho fixo
   pra manter, ao contrário do card de perfil, então não precisa da
   divisão em seções fixas/roláveis separadas) ---------- */
.ds-regras-conteudo {
    padding: 30px 28px 26px; overflow-y: auto; flex: 1 1 auto; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(216, 154, 31, .5) transparent;
}
.ds-regras-conteudo::-webkit-scrollbar { width: 6px; }
.ds-regras-conteudo::-webkit-scrollbar-track { background: transparent; }
.ds-regras-conteudo::-webkit-scrollbar-thumb { background: rgba(216, 154, 31, .4); border-radius: 6px; }
.ds-regras-conteudo::-webkit-scrollbar-thumb:hover { background: rgba(216, 154, 31, .6); }

.ds-regras-pretitle {
    font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    color: var(--ds-dourado-claro); margin: 0 0 6px;
}
.ds-regras-conteudo h2 {
    font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: #fff;
    margin: 0 0 12px; line-height: 1.25;
}
.ds-regras-intro { color: var(--ds-cinza-suave); font-size: 14px; line-height: 1.6; margin: 0 0 20px; }

/* ---------- Lista de critérios: numerada por medalhão dourado + título/
   descrição, com divisor fino em vez de card por linha — 7 itens em
   cards separados ficaria pesado, uma lista corrida lê melhor. ---------- */
.ds-regras-lista { list-style: none; margin: 0; padding: 0; }
.ds-regras-linha {
    display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ds-regras-linha:first-child { padding-top: 0; }
.ds-regras-linha:last-child { border-bottom: none; padding-bottom: 4px; }
.ds-regras-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(216, 154, 31, .15); border: 1px solid rgba(216, 154, 31, .4);
    color: var(--ds-dourado-claro); font-weight: 700; font-size: 13px;
    margin-top: 1px;
}
.ds-regras-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-regras-texto strong { color: #fff; font-size: 14.5px; font-weight: 700; }
.ds-regras-texto span { color: #c8d3e3; font-size: 13px; line-height: 1.55; }

/* ---------- Aviso final em destaque — mesmo recipe usado no aviso do
   pré-cadastro (fundo dourado translúcido + friso à esquerda), pra ficar
   reconhecível como "isto é importante" no mesmo idioma visual do site. ---------- */
.ds-regras-aviso {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(216, 154, 31, .12); border: 1px solid rgba(216, 154, 31, .4);
    border-left: 4px solid var(--ds-dourado);
    border-radius: 10px; padding: 14px 16px; margin-top: 20px;
    font-size: 13.5px; color: #E8DCC0; line-height: 1.55;
}
.ds-regras-aviso i { color: var(--ds-dourado); font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
    .ds-regras-overlay { padding: 16px 12px; }
    .ds-regras-modal { max-width: 100%; max-height: calc(100vh - 32px); }
    .ds-regras-conteudo { padding: 26px 20px 20px; }
    .ds-regras-conteudo h2 { font-size: 19px; }
    .ds-regras-trigger { font-size: 12.5px; padding: 7px 14px; text-align: center; }
}