:root {
    --bg: #3f588a;
    --card: #fff;
    --border: #e5e7eb;
    --muted: #6b7280;
    --title: #111827;
    --thead: #f8fafc;
    --shadow: 0 6px 14px rgba(0, 0, 0, .06);
    --radius: 14px;
}

/* -------- layout lateral (mantido) -------- */
.aside-rank {
    flex: 1;
    position: sticky;
    top: 10px;
    height: calc(100vh - 20px);
    overflow: auto;
    padding-left: 16px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
}

.rank-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin: 12px 10px 14px 0;
    box-shadow: var(--shadow);
    transition: transform .12s ease, box-shadow .12s ease;
}

.rank-card:hover {
    transform: translateY(-1px);
}

.rank-title {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--title);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank-title::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #60a5fa, #34d399);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .15);
}

.rank-period {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: #fcfcfd;
}

/* -------- tabela (base) -------- */
.rank-table-wrap {
    overflow: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
}

.rank-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    line-height: 1.35;
    min-width: 560px;
    table-layout: fixed;
}

.rank-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--thead);
    border-bottom: 1px solid var(--border);
    padding: 10px 8px;
    text-align: left;
    font-weight: 600;
}

.rank-table tbody tr:nth-child(odd) {
    background: #fafafa;
}

.rank-table td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-idx {
    width: 38px;
    text-align: right;
}

.col-num {
    width: 86px;
    text-align: right;
}

.col-pct {
    width: 70px;
    text-align: right;
}

.col-user {
    max-width: 180px;
}

.rank-empty td {
    text-align: center;
    color: var(--muted);
    padding: 14px;
    background: #fafafa;
}

/* -------- grid página -------- */
.page-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}

@media (max-width:1100px) {
    .page-two-col {
        grid-template-columns: 1fr;
    }

    .aside-rank {
        position: static;
        height: auto;
        padding-left: 0;
    }
}

/* -------- badges -------- */
.vip-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
}

.vip-free {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

.vip-concursando {
    background: rgb(237, 248, 255);
    color: #041578;
    border-color: #a7d5f3;
}

.vip-aprovado {
    background: #ecfeff;
    color: #047857;
    border-color: #a7f3d0;
}

/* -------- filtros/tagzinhas (mantido) -------- */
.applied-inline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 8px 0 6px;
}

.applied-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.applied-row:last-child {
    border-bottom: 0;
}

.row-label {
    flex: 0 0 auto;
    margin-right: 0;
    font-weight: 900;
    color: #334155;
    min-width: 90px;
}

.placeholder-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 6px;
}

.placeholder-list li {
    display: inline-flex;
    color: #6b7280;
    font-size: .9rem;
}

.tags-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0px;
}

.tags-row>.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #9aa1ad;
    color: #fff;
    border: 1px solid #cfe1ff;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04) inset;
    cursor: pointer;
}

.tags-row>.tag .tag-x {
    margin-left: 2px;
    font-weight: 900;
    color: #2563eb;
    transition: transform 120ms ease, color 120ms ease;
}

.tags-row>.tag:hover .tag-x {
    color: #e11d48;
    transform: scale(1.1);
}

.tag-clear-all {
    background: #fff0f3;
    color: #b3003c;
    border: 1px solid #ffc2d1;
    font-weight: 900;
    padding: 6px 12px;
    border-radius: 9999px;
    cursor: pointer;
}

.tag-clear-all:hover {
    background: #ffe3ea;
    color: #9a002f;
}

/* =========================================================
   BREAKPOINTS PROGRESSIVOS (sumir colunas de trás pra frente)
   Ordem: Rep. -> Acertos -> Últ. mov. -> Respostas -> %
   No menor breakpoint ficam: # | Usuário/VIP | Score
   ========================================================= */

/* 1) esconder "Questões repetidas" */
@media (max-width:1024px) {

    .rank-table th.col-rep,
    .rank-table td.col-rep {
        display: none;
    }

    .rank-table col.col-rep-col {
        width: 0 !important;
    }
}

/* 2) esconder "Acertos" */
@media (max-width:900px) {

    .rank-table th.col-acertos,
    .rank-table td.col-acertos {
        display: none;
    }

    .rank-table col.col-acertos-col {
        width: 0 !important;
    }
}

/* 3) esconder "Últ. mov." */
@media (max-width:780px) {

    .rank-table th.col-delta,
    .rank-table td.col-delta {
        display: none;
    }

    .rank-table col.col-delta-col {
        width: 0 !important;
    }
}

/* 4) esconder "Respostas" */
@media (max-width:720px) {

    .rank-table th.col-resp,
    .rank-table td.col-resp {
        display: none;
    }

    .rank-table col.col-resp-col {
        width: 0 !important;
    }
}

/* 5) esconder "%" — sobra #, Usuário/VIP e Score */
@media (max-width:640px) {

    .rank-table th.col-pct,
    .rank-table td.col-pct {
        display: none;
    }

    .rank-table col.col-pct {
        width: 0 !important;
    }

    /* liberar espaço todo para as 3 colunas restantes */
    .rank-table {
        table-layout: auto;
        min-width: 0;
    }

    .rank-table col.col-idx {
        width: 52px !important;
    }

    .rank-table col.col-user {
        width: auto !important;
    }

    .rank-table col.col-score-col {
        width: 110px !important;
    }

    /* reduzir um pouco o padding no miudinho */
    .rank-table td,
    .rank-table th {
        padding: 8px 10px;
    }

    /* garantir que o nome do usuário apareça (sem “sumir”) */
    .col-user {
        max-width: none;
    }

    .col-user .user-cell {
        min-width: 0;
    }
}

/* extra-mini (<=480px): mais compacidade sem esconder usuário */
@media (max-width:480px) {

    .rank-table td,
    .rank-table th {
        padding: 7px 8px;
        font-size: 12px;
    }

    .rank-table col.col-idx {
        width: 46px !important;
    }

    .rank-table col.col-score-col {
        width: 96px !important;
    }
}

/* XS/SM: esconder o selo VIP dentro da coluna do usuário para não cortar o nome */
@media (max-width: 680px) {

    /* linhas da tabela */
    .rank-table .col-user .vip-badge,
    .rank-table .col-user [class^="vip-"],
    .rank-table .col-user [class*=" vip-"] {
        display: none !important;
    }

    /* tira um espacinho que ficava reservado ao lado do nome */
    .rank-table .col-user .user-cell {
        gap: 8px;
    }
}




/* =========================================================
   RANKING — DARK THEME (não altera a cor dos nomes)
   Escopo: somente dentro de .rank-wrap
   ========================================================= */
:root[data-theme="dark"] .rank-wrap {
    --rk-bg: #0b0f16;
    /* fundo externo do container */
    --rk-card: #0f1623;
    /* cartões/tabela */
    --rk-elev: 0 8px 26px rgba(0, 0, 0, .55);
    --rk-border: rgba(255, 255, 255, .10);
    --rk-soft: rgba(255, 255, 255, .04);
    --rk-head: #0b1220;
    /* thead */
    --rk-muted: #a7b0c2;
    --rk-text: #e9edf7;
    --rk-num: #cfe1ff;
    /* números */
    --rk-chip: rgba(255, 255, 255, .08);
    --rk-chip-b: rgba(255, 255, 255, .16);

    background: var(--rk-bg);
    border: 1px solid var(--rk-border);
    box-shadow: var(--rk-elev);
}

/* Título e contagem regressiva */
:root[data-theme="dark"] .rank-wrap .rank-title {
    color: #ffffff;
}

:root[data-theme="dark"] .rank-wrap .rank-title::before {
    background: radial-gradient(100% 100% at 30% 30%, #60a5fa 0%, #34d399 80%);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}

:root[data-theme="dark"] .rank-wrap .cycle-eta {
    color: var(--rk-muted);
    font-weight: 700;
}

/* Abas (Mensal / Semanal / Diário) */
:root[data-theme="dark"] .rank-wrap .seg-tabs {
    background: #0d1422;
    border: 1px solid var(--rk-border);
    box-shadow: var(--rk-elev);
}

:root[data-theme="dark"] .rank-wrap .seg-tab {
    color: #e8eefc;
    border: 1px solid transparent;
    background: transparent;
}

:root[data-theme="dark"] .rank-wrap .seg-tab:hover {
    background: #162338;
    color: #ffffff;
    border-color: var(--rk-border);
}

:root[data-theme="dark"] .rank-wrap .seg-tab.is-active {
    background: #1b2a44;
    color: #fff;
    border-color: #2d4166;
    box-shadow: inset 0 -2px 0 #fbbf24, 0 0 0 1px rgba(255, 255, 255, .04);
}

:root[data-theme="dark"] .rank-wrap .seg-tab.is-active::after {
    display: none;
}

/* Cartão "Minha posição" */
:root[data-theme="dark"] .rank-wrap .my-rank {
    background: var(--rk-card);
    border: 1px solid var(--rk-border);
    color: var(--rk-text);
    box-shadow: var(--rk-elev);
}

:root[data-theme="dark"] .rank-wrap .my-rank-title {
    color: var(--rk-muted);
}

:root[data-theme="dark"] .rank-wrap .my-rank-pos {
    color: #c7d2ff;
    background: var(--rk-chip);
    border: 1px solid var(--rk-chip-b);
}

:root[data-theme="dark"] .rank-wrap .my-rank-metrics span b {
    color: #b8c6e8;
}

:root[data-theme="dark"] .rank-wrap .my-rank-avatar {
    border: 1px solid var(--rk-border);
    box-shadow: 0 0 0 2px #0f1623, 0 1px 2px rgba(0, 0, 0, .35);
}

/* Badge VIP */
:root[data-theme="dark"] .rank-wrap .vip-badge {
    background: var(--rk-chip);
    border: 1px solid var(--rk-chip-b);
    color: #fff;
    border-radius: 9999px;
    padding: 2px 8px;
    font-weight: 800;
}



/* Concursando = AZUL (ajuste o tom se o seu “original” for outro) */
:root[data-theme="dark"] .rank-wrap .vip-badge.concursando,
:root[data-theme="dark"] .rank-wrap .vip-badge.badge-concursando,
:root[data-theme="dark"] .rank-wrap .vip-badge.vip-concursando {
    color: #BFDBFE !important;
    /* texto azul-claro p/ contraste */
    background: rgba(37, 99, 235, .18) !important;
    /* fundo translúcido azul */
    border-color: rgba(37, 99, 235, .55) !important;
    /* borda azul */
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .22);
}

/* Se houver “outline”/chip neutro sendo aplicado acima, garantimos prioridade */
:root[data-theme="dark"] .rank-wrap .vip-badge.aprovado *,
:root[data-theme="dark"] .rank-wrap .vip-badge.concursando * {
    color: inherit !important;
    fill: currentColor !important;
}

/* Cartão + Tabela */
:root[data-theme="dark"] .rank-wrap .rank-table-card {
    background: var(--rk-card);
    border: 1px solid var(--rk-border);
    border-radius: 14px;
    box-shadow: var(--rk-elev);
}

:root[data-theme="dark"] .rank-wrap thead th {
    background: var(--rk-head);
    color: #cbd5e1;
    border-bottom: 1px solid var(--rk-border);
}

:root[data-theme="dark"] .rank-wrap tbody td {
    color: var(--rk-text);
    border-bottom: 1px solid var(--rk-border);
    background: transparent;
}

:root[data-theme="dark"] .rank-wrap .rank-table tbody tr:hover td {
    background: var(--rk-soft);
}

/* Números/porcentagens */
:root[data-theme="dark"] .rank-wrap .rank-table .col-num,
:root[data-theme="dark"] .rank-wrap .rank-table .col-pct {
    color: var(--rk-num);
}

/* Deltas */
:root[data-theme="dark"] .rank-wrap .pos-up {
    color: #22c55e;
}

:root[data-theme="dark"] .rank-wrap .pos-down {
    color: #ef4444;
}

:root[data-theme="dark"] .rank-wrap .pos-same,
:root[data-theme="dark"] .rank-wrap .pos-none {
    color: var(--rk-muted);
}

/* Status on/off */
:root[data-theme="dark"] .rank-wrap .status-dot {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .rank-wrap .status-dot.on {
    background: #22c55e;
}

:root[data-theme="dark"] .rank-wrap .status-dot.off {
    background: #9ca3af;
}

/* Pódio e “minha linha” com transparência elegante */
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top1 td {
    background: rgba(245, 158, 11, .14) !important;
    /* âmbar translúcido */
    box-shadow: inset 4px 0 0 #f59e0b;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top2 td {
    background: rgba(148, 163, 184, .12) !important;
    /* slate */
    box-shadow: inset 4px 0 0 #94a3b8;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top3 td {
    background: rgba(192, 132, 77, .12) !important;
    /* bronze */
    box-shadow: inset 4px 0 0 #c08457;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-me td {
    background: rgba(56, 189, 248, .14) !important;
    /* azul-ciano translúcido */
    box-shadow: inset 4px 0 0 #38bdf8;
}

/* ===== Não alterar a cor dos nomes ===== */
:root[data-theme="dark"] .rank-wrap .user-name {
    color: inherit !important;
}

:root[data-theme="dark"] .rank-wrap .user-name .u-emoji,
:root[data-theme="dark"] .rank-wrap .user-name svg {
    color: currentColor;
    fill: currentColor;
}

/* ===== 1) Manter as cores originais dos NOMES no ranking (dark) ===== */
/* Anula o branco global e QUALQUER outra cor forçada no ranking */
:root[data-theme="dark"] .rank-wrap .user-name {
    color: inherit !important;
}

/* Reafirma as classes de cor escolhidas pelo usuário */
:root[data-theme="dark"] .rank-wrap .user-name.namec-blue {
    color: #2563eb !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-red {
    color: #dc2626 !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-green {
    color: #16a34a !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-purple {
    color: #7c3aed !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-orange {
    color: #ea580c !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-teal {
    color: #0f766e !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-pink {
    color: #db2777 !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-gold {
    color: #D4AF37 !important;
}

:root[data-theme="dark"] .rank-wrap .user-name .u-emoji,
:root[data-theme="dark"] .rank-wrap .user-name svg {
    color: currentColor;
    fill: currentColor;
}

/* (IMPORTANTE) Se existir alguma regra assim, ela estava sobrescrevendo a cor:
   [data-theme="dark"] .rank-table-wrap .user-name { color: var(--ql-blue) !important; }
   Vamos neutralizá-la com mais especificidade: */
:root[data-theme="dark"] .rank-wrap .rank-table-wrap .user-name {
    color: inherit !important;
}

/* ===== 2) PÓDIO fixo no dark: ouro / prata / bronze (sem o striping apagar) ===== */
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top1>td {
    background-color: rgba(245, 158, 11, .20) !important;
    /* OURO */
    box-shadow: inset 4px 0 0 #F59E0B !important;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top2>td {
    background-color: rgba(156, 163, 175, .22) !important;
    /* PRATA */
    box-shadow: inset 4px 0 0 #9CA3AF !important;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top3>td {
    background-color: rgba(192, 132, 77, .22) !important;
    /* BRONZE */
    box-shadow: inset 4px 0 0 #C08457 !important;
}

/* Não deixar hover/striping/célula individual “lavar” as cores do pódio */
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top1:hover>td,
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top2:hover>td,
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top3:hover>td {
    background-color: inherit !important;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top1>td,
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top2>td,
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top3>td {
    background-image: none !important;
}

/* === Avatar Hover Card ====================================== */

/* 0) Libera overflow em todos os contêineres que poderiam cortar o pop-up */
.rank-wrap,
.rank-table-wrap,
.rank-table-card,
.rank-table,
.rank-table thead,
.rank-table tbody,
.rank-table tr,
.rank-table td,
.user-cell,
.avatar-trigger {
    overflow: visible !important;
}

/* 1) Coluna do usuário vira a âncora do pop-up e “sobe” na pilha */
.rank-table td.col-user,
.user-cell {
    position: relative !important;
    z-index: 30;
    /* acima das outras células da linha */
}

/* 2) Linha em hover sobe, mas fica abaixo do pop-up */
.rank-table tbody tr:hover {
    position: relative;
    z-index: 20;
}

/* 3) Thead sticky fica abaixo do pop-up (caso exista) */
.rank-table thead th {
    z-index: 5;
    /* já era sticky=1 no seu CSS; mantemos baixo */
}

/* 4) Trigger do avatar */
.avatar-trigger {
    position: relative;
    display: inline-block;
}

/* 5) O POP-UP em si (sempre no topo) */
.avatar-pop {
    position: absolute;
    left: 36px;
    /* abre à direita do avatar */
    top: -8px;
    /* levemente acima */
    width: 280px;
    max-width: min(70vw, 320px);
    padding: 12px;
    border-radius: 14px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e6e8ef);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;

    /* >>> Empilhamento MUITO alto para não ficar abaixo de nada <<< */
    z-index: 999999 !important;
}

/* seta do balão */
.avatar-pop::before {
    content: "";
    position: absolute;
    left: -7px;
    right: auto;
    top: 14px;
    bottom: auto;
    width: 14px;
    height: 14px;
    background: inherit;
    border-left: 1px solid var(--border, #e6e8ef);
    border-top: 1px solid var(--border, #e6e8ef);
    transform: rotate(45deg);
}

/* exibir no hover/focus */
.avatar-trigger:hover .avatar-pop,
.avatar-trigger:focus-within .avatar-pop {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 6) Conteúdo do pop-up */
.avatar-pop__head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.avatar-pop__img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border, #e6e8ef);
}

.avatar-pop__name {
    font-weight: 800;
    line-height: 1.15;
    color: var(--title, #111827);
}

.avatar-pop__vip {
    margin-top: 4px;
    display: inline-block;
}

.avatar-pop__bio {
    font-size: .92rem;
    line-height: 1.45;
    color: var(--muted, #6b7280);
    max-height: 12.5em;
    overflow: auto;
}

/* 7) Dark mode */
:root[data-theme="dark"] .avatar-pop {
    background: #0f1623;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .avatar-pop::before {
    border-left-color: rgba(255, 255, 255, .10);
    border-top-color: rgba(255, 255, 255, .10);
}

:root[data-theme="dark"] .avatar-pop__name {
    color: #e9edf7;
}

:root[data-theme="dark"] .avatar-pop__bio {
    color: #a7b0c2;
}

/* 8) Flips para bordas (opcional, deixam prontos) */
.avatar-pop.flip-x {
    left: auto;
    right: 36px;
}

.avatar-pop.flip-x::before {
    left: auto;
    right: -7px;
    top: 14px;
    bottom: auto;
    transform: rotate(225deg);
}

.avatar-pop.flip-y {
    top: auto;
    bottom: -8px;
}

.avatar-pop.flip-y::before {
    top: auto;
    bottom: 14px;
}

/* ===== Hover Card universal: sempre acima de tudo ===== */
.avatar-pop {
    position: absolute;
    left: 36px;
    top: -8px;
    width: 280px;
    max-width: min(70vw, 320px);
    padding: 12px;
    border-radius: 14px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e6e8ef);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 999999;
    /* alto, mas o truque é sair da tabela */
}

.avatar-pop::before {
    content: "";
    position: absolute;
    left: -7px;
    right: auto;
    top: 14px;
    bottom: auto;
    width: 14px;
    height: 14px;
    background: inherit;
    border-left: 1px solid var(--border, #e6e8ef);
    border-top: 1px solid var(--border, #e6e8ef);
    transform: rotate(45deg);
}

/* estado visível */
.avatar-pop.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* quando “destacado” para o body */
.avatar-pop.is-fixed {
    position: fixed;
    /* fora de qualquer stacking-context da tabela */
    left: 0;
    top: 0;
    /* JS define as coordenadas reais */
}

/* flips prontos (JS decide quando aplicar) */
.avatar-pop.flip-x {}

.avatar-pop.flip-x::before {
    left: auto;
    right: -7px;
    transform: rotate(225deg);
}

.avatar-pop.flip-y {}

.avatar-pop.flip-y::before {}

/* Dark mode */
:root[data-theme="dark"] .avatar-pop {
    background: #0f1623;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .avatar-pop::before {
    border-left-color: rgba(255, 255, 255, .10);
    border-top-color: rgba(255, 255, 255, .10);
}

:root[data-theme="dark"] .avatar-pop__name {
    color: #e9edf7;
}

:root[data-theme="dark"] .avatar-pop__bio {
    color: #a7b0c2;
}

/* ==== Avatar Hover Card — ajustes anti-distorção e limites ==== */

/* O card vira coluna e nunca ultrapassa a viewport */
.avatar-pop {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: min(92vw, 380px);
    max-height: min(72vh, 520px);
    overflow: hidden;
    /* o conteúdo rola dentro */
}

/* Cabeçalho: impedir que a foto seja comprimida por nomes longos */
.avatar-pop__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    min-width: 0;
    /* permite ellipsis do lado direito */
}

/* FOTO MAIOR e sem distorção */
.avatar-pop__img {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    /* trava tamanho: não encolhe */
    border-radius: 14px;
    object-fit: cover;
    /* corta sem distorcer */
    border: 1px solid var(--border, #e6e8ef);
}

/* Meta (nome/selo) não quebra o layout */
.avatar-pop__meta {
    min-width: 0;
    /* habilita elipse no nome */
}

/* Nome grande: usa reticências */
.avatar-pop__name {
    font-weight: 800;
    line-height: 1.15;
    color: var(--title, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Área rolável do conteúdo (bio) */
.avatar-pop__scroll {
    overflow: auto;
    padding-right: 4px;
    /* espaço pro scrollbar não “comer” texto */
    word-break: break-word;
    /* evita estouro horizontal */
}

/* Título "Sobre:" */
.avatar-pop__label {
    display: block;
    font-weight: 800;
    font-size: .9rem;
    margin-bottom: 4px;
    color: var(--title, #111827);
    opacity: .9;
}

/* Texto da bio */
.avatar-pop__bio {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--muted, #6b7280);
    /* a altura útil da rolagem é determinada pelo .avatar-pop__scroll */
}

/* Dark mode: só herdamos as suas cores já definidas */
:root[data-theme="dark"] .avatar-pop__label {
    color: #e9edf7;
    opacity: .9;
}

:root[data-theme="dark"] .avatar-pop__bio {
    color: #a7b0c2;
}

/* Nome cortado em 11, preservando o emoji */
.user-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* respiro entre texto e emoji */
}

.user-name .name-chop {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    /* segurança extra caso mude o slice futuramente */
    text-overflow: clip;
    /* sem reticências */
    max-width: 11ch;
    /* acompanha os 11 caracteres */
}

.user-name .u-emoji {
    display: inline-block;
    line-height: 1;
    transform: translateY(1px);
    /* alinhamento óptico opcional */
}

/* =========================================================
   DESTACAR APENAS OURO E BRONZE NO DARK MODE
   ========================================================= */

/* OURO (Aprovado) — texto mais forte */
:root[data-theme="dark"] .rank-wrap tr.is-top1 td,
:root[data-theme="dark"] .rank-wrap .vip-badge.aprovado,
:root[data-theme="dark"] .rank-wrap .vip-badge.vip-aprovado {
    color: #ffffff !important;
    /* dourado claro */
}

/* BRONZE (3º lugar) — texto mais visível */
:root[data-theme="dark"] .rank-wrap tr.is-top3 td {
    color: #ffffff !important;
    /* bronze claro */
}

/* ==== FIX: linhas normais (4º, 5º, 6º...) no dark mode ==== */
:root[data-theme="dark"] .rank-wrap .rank-table tbody tr:not(.is-top1):not(.is-top3) td {
    color: var(--rk-text) !important;
}


/* ==== FIX: linhas normais (4º, 5º, 6º...) no dark mode ==== */
:root[data-theme="dark"] .rank-wrap .rank-table tbody tr:not(.is-top1):not(.is-top3) td {
    color: var(--rk-text) !important;
}


/* VIP Aprovado verde no modo dark */
:root[data-theme="dark"] .rank-wrap .vip-badge.aprovado,
:root[data-theme="dark"] .rank-wrap .vip-badge.badge-aprovado,
:root[data-theme="dark"] .rank-wrap .vip-badge.vip-aprovado {
    color: #4ade80 !important;
    background: rgba(22, 163, 74, .20) !important;
    border-color: rgba(74, 222, 128, .65) !important;
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .25);
}


/* =========================================================
   FORÇAR TEXTO VISÍVEL NAS LINHAS NORMAIS NO DARK MODE
   (4ª, 5ª, 6ª... posição)
   ========================================================= */

:root[data-theme="dark"] .rank-wrap .rank-table tbody tr:not(.is-top1):not(.is-top2):not(.is-top3):not(.is-me) td {
    color: var(--rk-text) !important;
    opacity: 1 !important;
}

/* Remover o zebrado claro no dark (mantém só os destaques especiais) */
:root[data-theme="dark"] .rank-wrap .rank-table tbody tr:nth-child(odd),
:root[data-theme="dark"] .rank-wrap .rank-table tbody tr:nth-child(even) {
    background: transparent !important;
}