/**
 * Card do competidor (2.76.0) — popup e inline.
 *
 * TEMA: as cores passam por variáveis próprias (--hc-*) que DERIVAM dos
 * tokens do tema (--card-bg, --text-primary, --bg-alt, --lime...). O tema já
 * vira esses tokens no escuro, então o card acompanha sozinho; o bloco
 * [data-theme="dark"] existe para o que o tema não decide (aba ativa, ouro do
 * título, amarelo do aviso) e para servir de rede: cada var() ali repete o
 * token com um FALLBACK ESCURO, então mesmo numa página onde o main.css não
 * chegou o card não sai branco no escuro.
 *
 * O popup é <dialog>: foco preso e Esc fechando sem uma linha de JS nossa.
 * Ele nasce em document.body, fora de qualquer casca — por isso as variáveis
 * ficam também no .hcard-dialog, e não só no .hcard.
 */
.hcard-dialog,
.hcard {
    /* Sentinela: o card.js lê isto pra saber se esta folha chegou. O WP Rocket
       (RUCSS) apaga regra de classe que não existe no HTML inicial, e o popup
       inteiro é criado por JS — sem a sentinela ele iria ao ar sem estilo. */
    --hero-card-css: ok;
    --hc-card: var(--card-bg, #FFFFFF);
    --hc-txt: var(--text-primary, #1D1F1B);
    --hc-mute: var(--text-secondary, #5B5F57);
    --hc-line: var(--card-border, #E6E7E1);
    --hc-paper: var(--bg-alt, #F3F4F0);   /* bloco de número e trilho da barra */
    --hc-lime: var(--lime, #A3D900);
    --hc-lime-ink: var(--lime-text, #5a7a00);   /* lima legível sobre fundo claro */
    --hc-aba-bg: #16181D;
    --hc-aba-txt: #FFFFFF;
    --hc-ouro: #8a6400;
    --hc-ouro-bg: rgba(201, 151, 0, .16);
    --hc-aviso: #8a4b00;
    --hc-aviso-bg: rgba(245, 158, 11, .2);
}
[data-theme="dark"] .hcard-dialog,
[data-theme="dark"] .hcard {
    /* Mesmo token, fallback escuro: o tema manda quando está presente. */
    --hc-card: var(--card-bg, #171917);
    --hc-txt: var(--text-primary, #F2F4EF);
    --hc-mute: var(--text-secondary, rgba(242, 244, 239, .64));
    --hc-line: var(--card-border, rgba(255, 255, 255, .12));
    /* NAO deriva de --bg-alt aqui: no escuro deste tema --bg-alt e' IGUAL a
       --card-bg, e o bloco de numero e o trilho da barra sumiriam dentro do
       card. Vau de luz sobre o fundo, seja ele qual for. */
    --hc-paper: rgba(255, 255, 255, .07);
    --hc-lime-ink: var(--lime, #A3D900);
    --hc-aba-bg: var(--lime, #A3D900);
    --hc-aba-txt: #111;
    --hc-ouro: #e0b64a;
    --hc-ouro-bg: rgba(224, 182, 74, .16);
    --hc-aviso: #fbbf24;
    --hc-aviso-bg: rgba(251, 191, 36, .16);
    color-scheme: dark;
}

.hcard-dialog {
    width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px;
    background: var(--hc-card); color: var(--hc-txt);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
[data-theme="dark"] .hcard-dialog { box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.hcard-dialog::backdrop { background: rgba(9, 10, 9, .55); }

.hcard {
    display: flex; flex-direction: column; gap: 16px; padding: 22px;
    background: var(--hc-card); color: var(--hc-txt);
    font-family: var(--body, 'Outfit', sans-serif); font-size: 15px;
}
.hcard *, .hcard *::before, .hcard *::after { box-sizing: border-box; }
.hcard__topo { display: flex; align-items: center; gap: 13px; }
.hcard__avatar { width: 56px; height: 56px; border-radius: 15px; object-fit: cover; flex: none; background: var(--hc-paper); }
.hcard__avatar--ini {
    display: inline-flex; align-items: center; justify-content: center;
    background: #16181D; color: var(--lime, #A3D900); font-weight: 800; font-size: 22px;
}
.hcard__quem { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.hcard__quem b { font-size: 19px; }
.hcard__quem small { font-size: 13px; color: var(--hc-mute); }
.hcard__fechar {
    flex: none; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--hc-line); background: transparent;
    color: var(--hc-mute); font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
}
.hcard__fechar:hover { color: var(--hc-txt); border-color: var(--hc-txt); }

.hcard__abas { display: flex; gap: 8px; }
.hcard__aba {
    padding: 9px 15px; border-radius: 8px; cursor: pointer; font: inherit;
    border: 1px solid var(--hc-line); background: transparent; color: var(--hc-mute);
    font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.hcard__aba:hover { color: var(--hc-txt); }
.hcard__aba[aria-selected="true"] { background: var(--hc-aba-bg); border-color: var(--hc-aba-bg); color: var(--hc-aba-txt); }

/* O painel escondido some de verdade: classe com `display` vence a folha do
   navegador, e o atributo `hidden` já foi derrotado assim aqui antes. */
.hcard__painel[hidden] { display: none !important; }
.hcard__face { display: flex; flex-direction: column; gap: 14px; }
.hcard__tiles { display: flex; gap: 10px; }
.hcard__tile {
    flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 13px 15px;
    border-radius: 13px; background: var(--hc-paper);
}
.hcard__tile b { font-family: var(--display, 'League Spartan', sans-serif); font-size: 26px; line-height: 1; }
.hcard__tile span { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--hc-mute); }
.hcard__tile.is-ouro { background: var(--hc-ouro-bg); }
.hcard__tile.is-ouro b { color: var(--hc-ouro); }

.hcard__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hcard__linha {
    display: flex; align-items: center; gap: 11px; padding: 12px 14px;
    border: 1px solid var(--hc-line); border-radius: 12px;
}
.hcard__coroa { flex: none; color: var(--hc-ouro); }
.hcard__marca { flex: none; width: 15px; height: 15px; border-radius: 5px; background: var(--hc-paper); }
.hcard__txt { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.hcard__txt b { font-size: 14.5px; }
.hcard__txt small { font-size: 12.5px; color: var(--hc-mute); }
.hcard__pts { flex: none; font-variant-numeric: tabular-nums; }
.hcard__rodape, .hcard__vazio { margin: 0; font-size: 13px; color: var(--hc-mute); }

.hcard__bloco { display: flex; flex-direction: column; gap: 12px; padding: 15px; border: 1px solid var(--hc-line); border-radius: 14px; }
.hcard__bloco-topo { display: flex; align-items: center; gap: 12px; }
.hcard__pos { flex: none; font-family: var(--display, 'League Spartan', sans-serif); font-size: 30px; line-height: 1; }
.hcard__rot {
    display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase; color: var(--hc-mute);
}
/* Quem está lendo precisa saber que aquilo não é público. */
.hcard__so-voce {
    font-style: normal; padding: 3px 8px; border-radius: 6px;
    background: var(--hc-aviso-bg); color: var(--hc-aviso); font-size: 9.5px; letter-spacing: .08em;
}
.hcard__notas, .hcard__recados { display: flex; flex-direction: column; gap: 7px; }
.hcard__nota { display: grid; grid-template-columns: minmax(0, 1fr) 110px 40px; align-items: center; gap: 10px; font-size: 14px; }
.hcard__barra { height: 8px; border-radius: 4px; background: var(--hc-paper); overflow: hidden; }
.hcard__barra i { display: block; height: 100%; background: var(--hc-lime); }
.hcard__nota b { text-align: right; font-variant-numeric: tabular-nums; }
.hcard__recados p { margin: 0; font-size: 14px; line-height: 1.5; }
.hcard__perfil {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hc-lime-ink); text-decoration: none;
}

/* Gatilho: o nome vira botão onde o card pode abrir. O reset é só pro BOTÃO —
   no feed o gatilho é um <a> que já tem cor e peso próprios, e `color: inherit`
   aqui apagaria o estilo do nome dele. */
button.js-hcard {
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    cursor: pointer; text-align: inherit;
}
.js-hcard:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) {
    .hcard { padding: 18px; gap: 14px; }
    .hcard__nota { grid-template-columns: minmax(0, 1fr) 64px 38px; }
    .hcard__tiles { flex-wrap: wrap; }
    .hcard__tile { flex: 1 1 calc(50% - 5px); }
}