:root {
    --bg: #0d1117;
    --bg-card: #15181d;
    --bg-card-hover: #1c2027;
    --border: #2a2e35;
    --text: #e8e8ea;
    --text-dim: #8b8d93;
    --accent: #e5343a;
    --accent-bright: #ff3b42;
    --silver: #c8ccd4;
    --red: #e5343a;
    --green: #3ecf6e;
    --blue: #58a6ff;
    /* Cor de destaque do #1/medalhas: usa o vermelho da marca, não dourado — a identidade
       visual do BLHAX não tem amarelo. Mantém o nome "--gold" só por já ser usado em vários
       lugares como "cor de 1º lugar", não como a cor literal. */
    --gold: #ff3b42;
}

/* Faixa "você não está no servidor do Discord" (app.js) */
.aviso-discord { display: flex; align-items: center; gap: 14px; margin: 14px auto 0; max-width: 1200px; width: calc(100% - 32px); box-sizing: border-box; padding: 12px 14px 12px 16px; border: 1px solid rgba(88, 101, 242, 0.45); border-radius: 12px; background: rgba(88, 101, 242, 0.12); color: var(--text); }
.aviso-discord p { margin: 0; flex: 1; font-size: 0.9rem; line-height: 1.45; color: var(--text-dim); }
.aviso-discord p strong { color: var(--text); }
.aviso-discord-icone { flex: none; color: #8b9cff; }
.aviso-discord-btn { flex: none; padding: 8px 14px; border-radius: 8px; background: #5865f2; color: #fff; font-weight: 700; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.aviso-discord-btn:hover { background: #4752c4; }
.aviso-discord-fechar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; }
.aviso-discord-fechar:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
@media (max-width: 640px) {
    .aviso-discord { flex-wrap: wrap; position: relative; padding-right: 44px; }
    .aviso-discord-icone { display: none; }
    .aviso-discord p { flex-basis: 100%; }
    .aviso-discord-fechar { position: absolute; top: 8px; right: 8px; }
}

@property --spin-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes spin-borda {
    from { --spin-angle: 0deg; }
    to { --spin-angle: 360deg; }
}

/* ---------- HOVER TRAÇADO (borda giratória) ----------
   Efeito padrão de hover do site inteiro: mesmo mecanismo já usado na sidebar
   (conic-gradient mascarado girando). Aplicar a classe .hover-tracado em qualquer
   elemento com position:relative + border-radius. Variantes de cor via
   .hover-tracado--verde / --amarelo (padrão sem modificador = vermelho da marca). */
.hover-tracado {
    position: relative;
    z-index: 0;
}
.hover-tracado::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 1;
}
.hover-tracado:hover::after,
.hover-tracado.hover-tracado-ativo::after {
    opacity: 1;
    animation: spin-borda 2.2s linear infinite;
}
.hover-tracado--verde::after {
    background: conic-gradient(from var(--spin-angle, 0deg), var(--green), transparent 30%, transparent 70%, var(--green));
}
.hover-tracado--amarelo::after {
    background: conic-gradient(from var(--spin-angle, 0deg), #ffc93b, transparent 30%, transparent 70%, #ffc93b);
}

* { box-sizing: border-box; }

/* ---------- SCROLLBAR (vermelho da identidade visual, aplicado globalmente) ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-bright) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 999px; }
*::-webkit-scrollbar-thumb {
    background-color: var(--accent-bright);
    background-image: linear-gradient(180deg, #ff8a8f 0%, var(--accent-bright) 45%, #8a0009 100%);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, #ffa0a4, #ff5a60, #a3000c); background-clip: content-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    padding-bottom: 60px; /* espaço pro bottom-nav mobile (5 itens, mais compacto) */
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- EFEITOS GLOBAIS DE ENTRADA/HOVER ---------- */
/* Utilitárias reaproveitáveis em qualquer página — fade+slide-up na entrada, com delay
   escalonado via nth-child pra sensação de "premium" sem JS. Aplique .fade-in-up no elemento
   e (opcional) .fade-in-stagger no pai pra escalonar os filhos diretos automaticamente. */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fade-in-up 0.45s ease both; }
.fade-in-stagger > * { animation: fade-in-up 0.45s ease both; }
.fade-in-stagger > *:nth-child(1) { animation-delay: 0.03s; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 0.13s; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 0.18s; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 0.23s; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 0.28s; }
.fade-in-stagger > *:nth-child(n+7) { animation-delay: 0.32s; }

/* Hover genérico pra qualquer card do site — leve elevação + glow vermelho na borda, mesmo
   princípio já usado nos cards da página de perfil, disponível globalmente agora. */
.hover-lift { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(255, 59, 66, 0.35); border-color: var(--accent-bright); }

/* ---------- BOTÕES ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    border: none;
    white-space: nowrap;
}

.btn-accent {
    background: var(--accent);
    color: #fff;
}
.btn-accent:hover { background: var(--accent-bright); }

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--bg-card-hover); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ---------- HEADER ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(21, 12, 13, 0.96), rgba(13, 17, 23, 0.94));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
}
.brand img { height: 52px; width: auto; }

.main-nav {
    display: none;
    gap: 28px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dim);
}
.main-nav a { display: inline-flex; align-items: center; gap: 6px; }
.main-nav a svg { flex-shrink: 0; }
.main-nav a:hover, .main-nav a.active { color: var(--text); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-actions .btn-accent svg { width: 16px; height: 16px; }

/* ---------- SIDEBAR LATERAL (desktop >=900px) ---------- */
/* Mobile (<900px) ignora tudo isso — continua com .site-header + .bottom-nav de sempre,
   sidebar fica display:none e o body não ganha padding-left. */

.app-sidebar { display: none; }

@media (min-width: 900px) {
    :root { --sidebar-w: 188px; --sidebar-w-min: 72px; }

    .app-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-w);
        background: linear-gradient(180deg, #000000, var(--bg));
        border-right: 1px solid var(--border);
        z-index: 60;
        transition: width 0.2s ease;
        /* igual ao menu do painel: o menu inteiro rola quando não cabe na altura (tela baixa + barra de música) */
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--accent) transparent;
    }
    body.sidebar-minimizada .app-sidebar { width: var(--sidebar-w-min); }

    .app-sidebar-brand { display: flex; align-items: center; justify-content: center; padding: 14px 10px; flex-shrink: 0; transition: padding 0.2s ease; }
    .app-sidebar-brand img { height: 56px; width: auto; max-width: 100%; flex-shrink: 0; transition: height 0.2s ease; }
    body.sidebar-minimizada .app-sidebar-brand { padding: 12px 8px; }
    body.sidebar-minimizada .app-sidebar-brand img { height: 36px; }

    .app-sidebar-nav { flex: 0 0 auto; overflow: visible; padding: 6px 14px; display: flex; flex-direction: column; gap: 4px; }
    .app-sidebar-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border-radius: 8px;
        color: #9a9da4;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }
    .app-sidebar-item:hover { color: var(--text); }
    .app-sidebar-item::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 8px;
        padding: 1px;
        background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
    }
    .app-sidebar-item:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
    .app-sidebar-item.active {
        background: linear-gradient(90deg, rgba(229, 52, 58, 0.28), rgba(229, 52, 58, 0.03));
        color: #fff;
        font-weight: 700;
    }
    .app-sidebar-item.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 2px;
        border-radius: 0 2px 2px 0;
        background: var(--accent-bright);
        box-shadow: 0 0 10px 1px rgba(255, 59, 66, 0.85);
    }
    .app-sidebar-item.active .app-sidebar-icone { color: var(--accent-bright); }
    .app-sidebar-icone { flex-shrink: 0; display: inline-flex; }
    body.sidebar-minimizada .app-sidebar-label { display: none; }
    body.sidebar-minimizada .app-sidebar-item { justify-content: center; padding: 10px; }

    .app-sidebar-rodape { padding: 10px 14px; flex-shrink: 0; margin-top: auto; }
    .app-sidebar-discord {
        background: var(--bg-card);
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 8px;
        text-align: center;
    }
    body.sidebar-minimizada .app-sidebar-discord { display: none; }
    .app-sidebar-discord-icone { color: #5865f2; margin-bottom: 4px; }
    .app-sidebar-discord-icone svg { width: 26px; height: 26px; }
    .app-sidebar-discord-titulo { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.25; }
    .app-sidebar-discord p { font-size: 11px; color: var(--text-dim); margin: 3px 0 10px; }
    .app-sidebar-discord-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #3a3d44;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        border-radius: 8px;
        padding: 8px;
        width: 100%;
    }
    .app-sidebar-discord-btn:hover { background: #464a52; }
    .app-sidebar-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: transparent;
        border: none;
        color: var(--text-dim);
        border-radius: 8px;
        padding: 6px;
    }
    .app-sidebar-toggle:hover { color: var(--text); }
    body.sidebar-minimizada .app-sidebar-toggle svg { transform: rotate(180deg); }

    /* Viewport baixa (janela não maximizada, notebooks pequenos): compacta ainda mais e some
       com o card do Discord antes de deixar QUALQUER scroll aparecer na sidebar — pedido
       explícito do usuário, prefere perder o card a ter barra de rolagem. */
    @media (max-height: 680px) {
        .app-sidebar-brand { padding: 10px; }
        .app-sidebar-brand img { height: 40px; }
        .app-sidebar-discord { display: none; }
    }
    @media (max-height: 560px) {
        .app-sidebar-item { padding: 6px 12px; font-size: 13px; }
    }

    /* Desloca TODO o conteúdo da página pra direita da sidebar de uma vez (padding no body é
       robusto a qualquer estrutura interna da página — não depende de quais elementos são
       filhos diretos de <body> em cada uma das 9 páginas). */
    body.has-app-sidebar { padding-left: var(--sidebar-w); transition: padding-left 0.2s ease; }
    body.has-app-sidebar.sidebar-minimizada { padding-left: var(--sidebar-w-min); }

    /* .container normalmente centraliza com max-width+margin:auto no viewport inteiro — com a
       sidebar ocupando a faixa esquerda (via padding-left no body), isso empurrava o header pra
       fora da área visível. Libera o container do header pra ocupar 100% da faixa restante. */
    body.has-app-sidebar .site-header .container { max-width: none; margin: 0; padding: 0 24px; }

    /* No header, esconde a marca antiga (já tem na sidebar) e o nav antigo (virou sidebar),
       mostra a busca de jogador. */
    body.has-app-sidebar .site-header .brand,
    body.has-app-sidebar .site-header .main-nav { display: none; }
    .app-header-busca {
        position: relative;
        display: none;
        align-items: center;
        gap: 8px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 0 6px 0 14px;
        flex: 1;
        max-width: 340px;
    }
    body.has-app-sidebar .app-header-busca { display: flex; }
    .app-header-busca svg { flex-shrink: 0; color: var(--text-dim); }
    .app-header-busca input {
        flex: 1;
        min-width: 0;
        background: none;
        border: none;
        color: var(--text);
        font-size: 13px;
        padding: 11px 0;
    }
    .app-header-busca input:focus { outline: none; }
    .app-header-busca button {
        background: var(--bg-card-hover);
        border: none;
        border-radius: 7px;
        color: var(--text-dim);
        padding: 7px;
        display: inline-flex;
    }
    .app-header-busca button:hover { color: var(--text); }
    .app-header-busca-sugestoes {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.4);
        overflow: hidden;
        z-index: 120;
    }
    .app-header-busca-sugestoes.aberto { display: block; }
    .app-header-busca-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 14px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
        text-align: left;
    }
    .app-header-busca-item:last-child { border-bottom: none; }
    .app-header-busca-item img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--bg); flex-shrink: 0; }
    .app-header-busca-item:hover, .app-header-busca-item.ativo { background: var(--bg-card-hover); color: var(--accent-bright); }

    .app-header-busca-mobile-toggle { display: none; }
}

/* ---------- HEADER MOBILE (<900px, sem sidebar) ----------
   Sem essas regras .app-header-busca não tinha NENHUM estilo fora do bloco >=900px acima
   (nem display definido), então a div aparecia crua ocupando a largura toda do header —
   causa do cabeçalho "bugado" no mobile. Aqui ela vira um overlay de tela cheia, acionado
   pelo ícone de lupa (.app-header-busca-mobile-toggle, só existe abaixo de 900px). */
@media (max-width: 899px) {
    .site-header .container { height: 60px; gap: 10px; padding: 0 14px; }
    .brand img { height: 38px; }

    .app-header-busca-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--bg-card);
        border: 1px solid var(--border);
        color: var(--text);
        flex-shrink: 0;
        margin-left: auto;
    }
    .app-header-busca-mobile-toggle:hover { background: var(--bg-card-hover); }

    .app-header-busca {
        position: fixed;
        inset: 0;
        z-index: 250;
        background: var(--bg);
        padding: 14px 16px;
        display: none;
        align-items: center;
        gap: 8px;
        max-width: none;
        border: none;
        border-radius: 0;
    }
    .app-header-busca.aberto { display: flex; }
    .app-header-busca svg:first-child { flex-shrink: 0; color: var(--text-dim); }
    .app-header-busca input {
        flex: 1;
        min-width: 0;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        font-size: 15px;
        padding: 12px 14px;
    }
    .app-header-busca input:focus { outline: none; border-color: var(--accent); }
    .app-header-busca button {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text-dim);
        padding: 10px;
        display: inline-flex;
        flex-shrink: 0;
    }
    .app-header-busca-mobile-fechar {
        background: none;
        border: none;
        color: var(--text);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .app-header-busca-mobile-fechar:hover { background: var(--bg-card-hover); }
    .app-header-busca-sugestoes {
        position: fixed;
        top: 66px;
        left: 16px;
        right: 16px;
        z-index: 251;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.4);
        overflow: hidden;
        display: none;
    }
    .app-header-busca-sugestoes.aberto { display: block; }
    .app-header-busca-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 14px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-size: 14px;
        font-weight: 600;
        text-align: left;
    }
    .app-header-busca-item:last-child { border-bottom: none; }
    .app-header-busca-item img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--bg); flex-shrink: 0; }
    .app-header-busca-item:hover, .app-header-busca-item.ativo { background: var(--bg-card-hover); color: var(--accent-bright); }

    /* Botão do usuário: esconde o nick de texto, sobra só avatar+seta — evita apertar o
       header junto com sino de notificações + lupa em telas de 320-360px. */
    .user-menu-btn { padding: 4px 8px 4px 4px; gap: 4px; }
    .user-menu-btn span { display: none; }
    .btn-login-header { padding: 8px 12px; font-size: 12px; }

    /* Login: acompanha a altura reduzida do header mobile (60px, era 68px no desktop) e
       encolhe os paddings generosos do card, que sobram demais em telas de celular. */
    .login-screen { min-height: calc(100vh - 60px); padding: 24px 14px; }
    .login-card-esq { padding: 28px 22px; min-height: unset; }
    .login-card-dir { padding: 28px 22px; }
    .login-features { padding: 18px 22px 22px; }
    .login-card-titulo { font-size: 24px; }
}

/* ---------- SINO DE NOTIFICAÇÕES ---------- */

.notif-wrap { position: relative; }
.notif-sino {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.notif-sino:hover { background: var(--bg-card-hover); }
.notif-sino::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.notif-sino:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent-bright);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-height: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    z-index: 150;
    overflow: hidden;
    flex-direction: column;
}
.notif-dropdown.open { display: flex; }
.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 800;
    border-bottom: 1px solid var(--border);
}
.notif-nao-lidas-count { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.notif-dropdown-acoes { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.notif-dropdown-acoes button {
    position: relative;
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    padding: 7px;
}
.notif-dropdown-acoes button:hover { color: var(--text); }
.notif-dropdown-acoes button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.notif-dropdown-acoes button:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.notif-lista { overflow-y: auto; max-height: 300px; }
.notif-vazio { padding: 24px 16px; text-align: center; font-size: 12px; color: var(--text-dim); }
.notif-item { position: relative; display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.notif-item:last-child { border-bottom: none; }
.notif-item.nao-lida { background: rgba(255, 59, 66, 0.05); }
.notif-item:hover { background: var(--bg-card-hover); }
.notif-item::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 8px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.notif-item:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
a.notif-item { text-decoration: none; color: inherit; }
.notif-item-fim .notif-item-icone { color: #ff4d55 !important; background: rgba(229, 52, 58, 0.15) !important; }
.notif-item-gif .notif-item-icone { color: #3ecf6e !important; background: rgba(62, 207, 110, 0.15) !important; }
.notif-item-presente .notif-item-icone { color: #ffc93b !important; background: rgba(255, 201, 59, 0.15) !important; }
.notif-item-link { color: var(--accent-bright); font-weight: 700; }
.notif-item-icone {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    color: #f5a623;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notif-item-corpo { flex: 1; min-width: 0; }
.notif-item-texto { font-size: 12px; color: var(--text); line-height: 1.4; }
.notif-item-data { font-size: 10px; color: var(--text-dim); margin-top: 3px; }

.user-menu {
    position: relative;
}
.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    color: var(--text);
}
.btn-login-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
}
.btn-login-header:hover { background: var(--accent-bright); }
.user-menu-btn img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.user-menu-chevron {
    color: var(--text-dim);
    transition: transform 0.18s ease;
}
.user-menu-btn.open .user-menu-chevron { transform: rotate(180deg); }
.user-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    min-width: 200px;
    overflow: hidden;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.user-menu-dropdown.open { display: block; }
.user-menu-dropdown a, .user-menu-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--bg-card-hover); }
.user-menu-dropdown svg { flex-shrink: 0; color: var(--text-dim); }
.user-menu-dropdown #btn-logout { color: var(--accent-bright); }
.user-menu-dropdown #btn-logout svg { color: var(--accent-bright); }
.user-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; }

/* ---------- POPUP: CONFIGURAÇÕES (áudio) ---------- */

.pf-config-modal { max-width: 420px; padding: 26px 26px 22px; }
.pf-config-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding-right: 30px; }
.pf-config-header h2 { font-size: 18px; font-weight: 900; margin: 0; }
.pf-config-sub { font-size: 12px; color: var(--text-dim); margin: 0 0 20px; }

.pf-config-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
.pf-config-linha-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-config-linha-info svg { flex-shrink: 0; }
.pf-config-linha-info strong { display: block; font-size: 13px; font-weight: 800; color: var(--text); }
.pf-config-linha-info span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.pf-config-toggle {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--border);
    border: none;
    padding: 3px;
    transition: background 0.2s;
}
.pf-config-toggle-bola {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
}
.pf-config-toggle.ativo { background: linear-gradient(90deg, var(--accent), var(--accent-bright)); }
.pf-config-toggle.ativo .pf-config-toggle-bola { transform: translateX(18px); }

.pf-config-volume-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px 18px;
    margin-top: -6px;
    margin-bottom: 4px;
}
.pf-config-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    outline: none;
}
.pf-config-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 6px 0 rgba(255, 59, 66, 0.6);
    cursor: pointer;
}
.pf-config-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: none;
    background: var(--accent-bright);
    box-shadow: 0 0 6px 0 rgba(255, 59, 66, 0.6);
    cursor: pointer;
}
.pf-config-volume-valor { font-size: 11px; font-weight: 700; color: var(--text-dim); min-width: 32px; text-align: right; }

/* ---------- HERO ---------- */

.hero {
    padding: 56px 0 40px;
    position: relative;
    background: radial-gradient(circle at 75% 20%, rgba(229, 52, 58, 0.16) 0%, transparent 55%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.hero h1 {
    font-size: clamp(32px, 7vw, 52px);
    line-height: 1.05;
    margin: 0 0 16px;
    font-weight: 900;
    letter-spacing: -0.5px;
}
.hero h1 .accent { color: var(--red); }

.hero p {
    color: var(--text-dim);
    font-size: 16px;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 0 28px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.hero-logo {
    display: flex;
    justify-content: center;
}
.hero-logo img {
    width: 100%;
    max-width: 380px;
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.stat-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
}
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.stat-card:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.stat-card .value { font-size: 22px; font-weight: 800; line-height: 1; }
.stat-card .label { font-size: 11px; color: var(--text-dim); margin-top: 6px; text-transform: uppercase; }
.stat-card-clicavel {
    cursor: pointer;
    border-left: 3px solid var(--accent);
    transition: background 0.15s;
}
.stat-card-clicavel:hover { background: var(--bg-card-hover); }

/* ---------- SEÇÕES GERAIS ---------- */

.section {
    padding: 40px 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.section-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title::before {
    content: "";
    width: 4px;
    height: 20px;
    background: var(--accent);
    border-radius: 2px;
}
.section-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-bright);
    letter-spacing: 0.5px;
}

/* ---------- COMO FUNCIONA ---------- */

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.step-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.step-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    color: var(--accent-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin: 0 auto 12px;
}
.step-card h3 { font-size: 14px; margin: 0 0 6px; }
.step-card p { font-size: 12px; color: var(--text-dim); margin: 0; line-height: 1.5; }

/* ---------- LOBBIES ---------- */

.lobby-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 44px;
}
.lobby-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    transition: border-color 0.15s;
}
.lobby-card .lobby-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(229, 52, 58, 0.14);
    color: var(--accent-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lobby-info { flex: 1; min-width: 160px; }
.lobby-card h3 { font-size: 17px; margin: 0 0 4px; }
.lobby-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.lobby-dot { opacity: 0.5; }
.lobby-online { display: inline-flex; align-items: center; gap: 6px; }
.lobby-online strong { color: var(--green); font-weight: 700; }
.lobby-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(62, 207, 110, 0.18);
}
.lobby-actions { display: flex; gap: 8px; flex-shrink: 0; }
.lobby-actions .btn { min-width: 96px; }

@media (max-width: 480px) {
    .lobby-card { flex-direction: column; align-items: stretch; text-align: center; }
    .lobby-info { text-align: center; }
    .lobby-meta { justify-content: center; }
    .lobby-icon { margin: 0 auto; }
    .lobby-actions { flex-direction: column; }
}

/* ---------- SIDEBAR / RANKING ---------- */

.sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}
.sidebar-card h2 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: 0.5px;
}

/* ---------- RANKING GERAL DA HOME ("Diário dos Melhores") ---------- */

.ranking-diario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 44px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    /* linha fina com degradê separando o header dos cards — some nas pontas em vez de cortar seco */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent) 1;
}
.ranking-diario-header-titulo { display: flex; align-items: center; gap: 10px; }
.ranking-diario-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(229, 52, 58, 0.14);
    color: var(--accent-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.ranking-diario-icon svg { width: 14px; height: 14px; }
.ranking-diario-header-titulo > div { display: flex; flex-direction: column; }
.ranking-diario-sub { color: var(--text-dim); font-size: 12px; margin: 0; }
.ranking-diario-hoje {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 14px;
    flex-shrink: 0;
    white-space: nowrap;
}
.ranking-diario-hoje svg { flex-shrink: 0; color: var(--accent-bright); }

.ranking-diario-carrossel {
    position: relative;
    padding: 0 44px;
}
.ranking-resumo-corpo { padding: 0 44px; }
.ranking-diario-carrossel .ranking-diario-seta.stats-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
#ranking-cat-anterior { left: 0; }
#ranking-cat-proximo { right: 0; }
.ranking-diario-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* esconde a barra de scroll nativa — a navegação é pelas setas/arraste, não pela barra */
    scrollbar-width: none;
}
.ranking-diario-track::-webkit-scrollbar { display: none; }
.ranking-diario-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.ranking-diario-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.ranking-diario-card:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.ranking-diario-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.ranking-diario-card-titulo-grupo { display: flex; align-items: center; gap: 8px; }
.ranking-diario-card-titulo { font-size: 15px; font-weight: 800; }
.ranking-diario-card-sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.ranking-diario-card-icone {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(229, 52, 58, 0.14);
    color: var(--accent-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ranking-diario-card-nota {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 4px 9px;
    border-radius: 5px;
    flex-shrink: 0;
}
.ranking-diario-card-divisor {
    height: 1px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

@media (min-width: 700px) {
    .ranking-diario-card { flex: 0 0 calc(50% - 8px); }
}
@media (min-width: 1100px) {
    .ranking-diario-card { flex: 0 0 calc(33.333% - 11px); }
}

.ranking-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 2px;
}
.ranking-tab {
    flex-shrink: 0;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.ranking-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.ranking-list { display: flex; flex-direction: column; gap: 10px; }
.ranking-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.ranking-pos {
    width: 24px;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    color: var(--text-dim);
    flex-shrink: 0;
}
.ranking-pos.medal-1 { color: var(--gold); }
.ranking-pos.medal-2 { color: var(--silver); }
.ranking-pos.medal-3 { color: #c97b3f; }
.ranking-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-card-hover);
    flex-shrink: 0;
    object-fit: cover;
}
.ranking-name { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-value { font-size: 13px; font-weight: 800; color: var(--accent-bright); }

/* ---------- RANKING ESTILO "LDF" (badge de posição + linha destacada no #1) ---------- */

.ranking-list-ldf { display: flex; flex-direction: column; gap: 6px; }
.ranking-ldf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    transition: background 0.15s, transform 0.15s ease;
}
.ranking-ldf-row:hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.ranking-ldf-row.top1 { background: rgba(255, 59, 66, 0.08); border: 1px solid rgba(255, 59, 66, 0.35); padding: 7px 9px; }
.ranking-ldf-row.top1:hover { background: rgba(255, 59, 66, 0.14); transform: translateY(-2px); }
.ranking-ldf-badge {
    min-width: 28px;
    height: 26px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--bg-card-hover);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}
.ranking-ldf-row.top1 .ranking-ldf-badge { background: var(--gold); color: #fff; }
.ranking-ldf-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card-hover);
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid var(--border);
}
.ranking-ldf-row.top1 .ranking-ldf-avatar { border-color: var(--gold); }
.ranking-ldf-info { flex: 1; min-width: 0; }
.ranking-ldf-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-ldf-sub { font-size: 11px; color: var(--gold); font-weight: 600; }
.ranking-ldf-value { font-size: 17px; font-weight: 800; color: var(--accent-bright); text-align: right; flex-shrink: 0; }
.ranking-ldf-value small { display: block; font-size: 9px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; }
.ranking-ldf-value-destaque {
    background: var(--gold);
    color: #fff;
    font-size: 20px;
    min-width: 44px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

/* ---------- NAVEGAÇÃO DE DIAS (seção de estatísticas) ---------- */

.stats-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}
.stats-nav-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.stats-nav-btn:disabled { opacity: 0.35; cursor: default; }
.stats-nav-btn:not(:disabled):hover { background: var(--bg-card-hover); }
.stats-nav-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.stats-nav-btn:not(:disabled):hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.stats-nav-label { font-size: 13px; font-weight: 700; color: var(--text-dim); min-width: 110px; text-align: center; }

/* ---------- TABELA COMPLETA (página /ranking) ---------- */

.table-wrap {
    overflow-x: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}
table.ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.ranking-table th {
    text-align: left;
    padding: 14px 16px;
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.ranking-table th:first-child { border-top-left-radius: 14px; }
table.ranking-table th:last-child { border-top-right-radius: 14px; }
table.ranking-table th svg { vertical-align: -2px; opacity: 0.7; }
table.ranking-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-weight: 600;
}
table.ranking-table tr:last-child td { border-bottom: none; }
table.ranking-table .td-player { display: flex; align-items: center; gap: 12px; font-weight: 700; }
table.ranking-table .td-player img { width: 34px; height: 34px; border-radius: 50%; }
table.ranking-table tr.ranking-row { cursor: pointer; transition: background 0.15s; }
table.ranking-table tr.ranking-row:hover { background: var(--bg-card-hover); }
table.ranking-table tr.ranking-row.active { background: rgba(255, 59, 66, 0.1); }
table.ranking-table tr.ranking-row.active td { color: var(--gold); }
table.ranking-table tr.ranking-row.active .td-player { color: var(--text); }
table.ranking-table tr.ranking-row.active .ranking-pos-badge { background: var(--accent); color: #fff; }

.ranking-pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 800;
}
.ranking-pos-badge.medal-1 { background: var(--gold); color: #fff; }
.ranking-pos-badge.medal-2 { background: var(--silver); color: #1a1a1a; }
.ranking-pos-badge.medal-3 { background: #c97b3f; color: #fff; }

/* ---------- FOOTER ---------- */

.site-footer {
    border-top: 1px solid var(--border);
    padding: 18px 0;
    margin-top: 40px;
}
.footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; }
.footer-brand img { height: 34px; width: auto; }
.social-icons { display: flex; gap: 10px; flex-wrap: wrap; }
.social-icons a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.social-icons a:hover { background: var(--bg-card-hover); }
.social-icons a svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- PÁGINA DE RANKING COMPLETA ---------- */

.ranking-page-title { font-size: 28px; font-weight: 900; margin: 0 0 6px; }
.ranking-page-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 24px; }
.ranking-aviso-minimo { color: var(--text-dim); font-size: 12px; margin: -8px 0 16px; }

.ranking-highlight-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.highlight-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.highlight-icon {
    font-size: 20px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(229, 52, 58, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}
.highlight-value { font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.highlight-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 3px; }
.highlight-roxo .highlight-icon { background: rgba(139, 92, 246, 0.16); color: #a78bfa; }
.highlight-vermelho .highlight-icon { background: rgba(229, 52, 58, 0.16); color: var(--accent-bright); }
.highlight-verde .highlight-icon { background: rgba(62, 207, 110, 0.16); color: var(--green); }
.highlight-laranja .highlight-icon { background: rgba(255, 159, 28, 0.16); color: #ff9f1c; }

.ranking-search-row { display: flex; gap: 10px; margin-bottom: 14px; }
.ranking-search-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text);
    font-size: 14px;
}
.ranking-search-input:focus { outline: none; border-color: var(--accent); }
.ranking-btn-atualizar { flex-shrink: 0; }
.ranking-btn-atualizar svg { transition: transform 0.4s ease; }
.ranking-btn-atualizar.girando svg { transform: rotate(360deg); }
@media (max-width: 480px) {
    .ranking-btn-atualizar span { display: none; }
}

.ranking-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}
.ranking-pagination button {
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}
.ranking-pagination button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ranking-pagination button:disabled { opacity: 0.35; }

.destaque-top1-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.destaque-top1-header img { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--gold); }
.destaque-top1-header .nome { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.destaque-top1-badge {
    background: var(--gold);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-block;
}

.destaque-sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}
.destaque-sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.destaque-sidebar-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gold); flex-shrink: 0; object-fit: cover; background: var(--bg); }
.destaque-sidebar-nome-grupo { flex: 1; min-width: 0; }
.destaque-sidebar-nome { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destaque-sidebar-pos {
    flex-shrink: 0;
    background: var(--gold);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
}
.destaque-sidebar-btn { width: 100%; margin-top: 16px; }
.destaque-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.destaque-item { background: var(--bg); border-radius: 10px; padding: 12px; }
.destaque-item .label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.3px; }
.destaque-item .val { font-size: 17px; font-weight: 800; }

/* ---------- MODAL "QUEM ESTÁ NA SALA" (somente leitura) ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 16px;
    animation: modal-overlay-in 0.2s ease forwards;
}
.modal-overlay.fechando { animation: modal-overlay-out 0.18s ease forwards; }
.modal-overlay .modal { animation: modal-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
.modal-overlay.fechando .modal { animation: modal-out 0.18s ease forwards; }
.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 22px;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.modal-header h2 { font-size: 16px; margin: 0; }
.modal-close {
    position: relative;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 22px;
    line-height: 1;
    padding: 6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--text); background: var(--bg-card-hover); }
.modal-close::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.modal-close:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.sala-placar {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 16px;
}
.sala-times { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.sala-time-nome { font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; text-align: center; }
.sala-time-nome.time-red { color: var(--red); }
.sala-time-nome.time-blue { color: var(--blue); }
.sala-jogador {
    background: var(--bg);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    margin-bottom: 6px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sala-chat {
    border-top: 1px solid var(--border);
    padding-top: 14px;
}
@media (max-width: 420px) {
    /* 3 colunas fixas (Vermelho/Azul/Espectadores) ficam apertadas demais em telas bem
       estreitas — cada nome de jogador precisa de mais que ~90px pra não truncar feio. */
    .modal { padding: 16px; }
    .sala-times { grid-template-columns: 1fr; gap: 14px; }
}
.sala-chat-mensagens {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}
.sala-chat-msg { line-height: 1.4; }
.sala-chat-msg .nome { font-weight: 700; }
.sala-chat-msg.anuncio { color: var(--text-dim); font-style: italic; }
.sala-chat-conectado { color: var(--text-dim); font-style: italic; margin-bottom: 6px; font-size: 12px; }
.sala-chat-input {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.sala-chat-input input {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 13px;
}
.sala-chat-input input:focus { outline: none; border-color: var(--accent); }
.sala-chat-input input:disabled { opacity: 0.6; }
.sala-chat-login-aviso {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
}
.sala-chat-login-aviso a { color: var(--accent); font-weight: 700; }

/* Modal "Jogadores banidos" (mesmo visual do popup das missões) */
#modal-bans { background: rgba(4, 5, 8, 0.86); backdrop-filter: blur(6px); }
.modal.bm-modal {
    position: relative; width: min(640px, 100%); max-width: 640px; padding: 0 24px 18px; overflow-y: auto;
    background: linear-gradient(170deg, #1a1114, #101217 45%); border: 1px solid rgba(229, 52, 58, 0.4); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.bm-modal::before { content: ""; display: block; height: 3px; margin: 0 -24px 22px; background: linear-gradient(90deg, #c4161d, #ff3b42 50%, #c4161d); }
.bm-fechar { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 11px; cursor: pointer; font-size: 20px; color: #fff; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.bm-fechar:hover { border-color: rgba(229, 52, 58, 0.6); }
.bm-topo { display: flex; align-items: center; gap: 14px; padding-right: 50px; margin-bottom: 18px; }
.bm-icone { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(circle at 35% 30%, #ff5a60, #c4161d 70%); box-shadow: 0 0 22px rgba(229, 52, 58, 0.45); }
.bm-icone svg { width: 24px; height: 24px; }
.bm-topo h2 { margin: 0; font-size: 22px; font-weight: 900; }
.bm-topo p { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }
.bm-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.bm-chip { padding: 12px 10px; border-radius: 12px; text-align: center; background: linear-gradient(180deg, rgba(229, 52, 58, 0.16), rgba(229, 52, 58, 0.05)); border: 1px solid rgba(229, 52, 58, 0.3); }
.bm-chip strong { display: block; font-size: 22px; font-weight: 900; color: #ff6a70; line-height: 1.1; }
.bm-chip span { font-size: 11.5px; color: #c9cbd1; }
.bm-chip.ok { background: linear-gradient(180deg, rgba(62, 207, 110, 0.13), rgba(62, 207, 110, 0.04)); border-color: rgba(62, 207, 110, 0.3); }
.bm-chip.ok strong { color: var(--green); }
.bm-busca { position: relative; margin-bottom: 12px; }
.bm-busca svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-dim); }
.bm-busca input {
    width: 100%; box-sizing: border-box; padding: 11px 14px 11px 40px; border-radius: 11px; font-family: inherit; font-size: 14px; color: var(--text);
    background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);
}
.bm-busca input:focus { outline: none; border-color: rgba(229, 52, 58, 0.6); }
.bm-lista { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #4a4f5a transparent; }
.bm-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); }
.bm-item img { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #1b2028; border: 2px solid rgba(229, 52, 58, 0.6); filter: grayscale(0.4); }
.bm-info { flex: 1; min-width: 0; }
.bm-nome { font-weight: 800; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-motivo { font-size: 12.5px; color: #d7dae0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-meta { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.bm-tempo { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 96px; }
.bm-tempo span { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: #ffb067; background: rgba(255, 159, 67, 0.12); border: 1px solid rgba(255, 159, 67, 0.32); }
.bm-tempo.perm span { color: #ff6a70; background: rgba(229, 52, 58, 0.14); border-color: rgba(229, 52, 58, 0.4); }
.bm-barra { display: block; width: 96px; height: 4px; border-radius: 99px; background: #262a32; overflow: hidden; }
.bm-barra b { display: block; height: 100%; background: linear-gradient(90deg, #ff9f43, #3ecf6e); }
.bm-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 10px; text-align: center; font-size: 13px; color: var(--text-dim); }
.bm-vazio span { font-size: 34px; margin-bottom: 4px; }
.bm-vazio strong { color: #fff; font-size: 15px; }
.bm-rodape { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: var(--text-dim); text-align: center; }
.bm-rodape a { color: var(--accent-bright); font-weight: 800; }
@media (max-width: 560px) {
    .modal.bm-modal { padding: 0 16px 16px; }
    .bm-modal::before { margin: 0 -16px 18px; }
    .bm-chip strong { font-size: 18px; }
    .bm-tempo { min-width: 0; }
    .bm-barra { width: 70px; }
}

/* ---------- BOTTOM NAV MOBILE ---------- */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}
.bottom-nav a {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 2px 7px;
    font-size: 9.5px;
    color: var(--text-dim);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bottom-nav a svg { width: 19px; height: 19px; flex-shrink: 0; }
.bottom-nav a.active { color: var(--accent-bright); }

@media (max-width: 360px) {
    .bottom-nav a { font-size: 8.5px; padding: 7px 1px 6px; }
    .bottom-nav a svg { width: 18px; height: 18px; }
}

/* ---------- LOGIN ---------- */
/* Layout de duas colunas: painel esquerdo vermelho (marca/bola trincada), painel direito com o
   formulário — fiel à referência do usuário. Mantém o menu lateral (montado via app.js), então o
   .login-screen ocupa só o espaço restante ao lado da sidebar (ver body.has-app-sidebar). */

.login-screen {
    min-height: calc(100vh - 68px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: radial-gradient(circle at 50% 15%, rgba(229, 52, 58, 0.14) 0%, var(--bg) 55%);
    padding: 40px 20px;
}
.login-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    max-width: 920px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.login-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 3;
}
.login-card:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.login-card-topo {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 760px) {
    .login-card-topo { grid-template-columns: 1fr 1fr; }
}

.login-card-esq {
    position: relative;
    background: radial-gradient(circle at 30% 20%, rgba(229, 52, 58, 0.22) 0%, #170406 55%, #0d0203 100%);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    overflow: hidden;
}
.login-card-esq-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 55%, rgba(255, 59, 66, 0.3), transparent 60%);
    pointer-events: none;
}
.login-card-esq-conteudo { position: relative; z-index: 1; flex-shrink: 0; }
.login-bola {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 300px;
    margin: 12px auto 0;
    opacity: 0.9;
    filter: drop-shadow(0 0 26px rgba(255, 59, 66, 0.4));
    pointer-events: none;
}
.login-card-tag { display: block; font-size: 13px; font-weight: 700; color: var(--accent-bright); margin-bottom: 10px; }
.login-card-titulo { font-size: 30px; font-weight: 900; margin: 0 0 14px; line-height: 1.2; }
.login-card-titulo span { color: var(--accent-bright); }
.login-card-texto { font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 320px; margin: 0; }

.login-card-dir { padding: 40px 36px; }
.login-card-dir h2 { font-size: 26px; font-weight: 900; margin: 0 0 6px; }
.login-card-dir-sub { font-size: 13px; color: var(--text-dim); margin: 0 0 22px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 8px; }
.login-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
}
.login-input-wrap:focus-within { border-color: var(--accent-bright); }
.login-input-wrap svg { flex-shrink: 0; color: var(--text-dim); }
.login-input-wrap input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: var(--text);
    font-size: 14px;
    padding: 13px 0;
}
.login-input-wrap input:focus { outline: none; }
.login-toggle-senha {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-dim);
    display: inline-flex;
    padding: 4px;
}
.login-toggle-senha:hover { color: var(--text); }

.form-error { color: var(--accent-bright); font-size: 13px; margin: 0 0 14px; min-height: 16px; line-height: 1.5; }
.form-error.form-ok { color: #3ecf6e; }
.form-error a { color: inherit; font-weight: 700; text-decoration: underline; }
.login-codigo-input { font-size: 20px; letter-spacing: 8px; font-variant-numeric: tabular-nums; }
.login-forgot {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 20px;
}
.login-forgot:hover { color: var(--accent-bright); }
.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 800;
    padding: 13px;
    border-radius: 12px;
    margin-bottom: 16px;
}
.login-submit:hover { filter: brightness(1.08); }
/* Criar conta pelo site. */
a.login-submit { text-decoration: none; box-sizing: border-box; }
.login-sem-conta { text-align: center; font-size: 13px; color: var(--text-dim); margin: 14px 0 0; line-height: 1.5; }
.login-sem-conta a { color: var(--accent-bright); font-weight: 700; text-decoration: none; }
.login-sem-conta a:hover { text-decoration: underline; }
.registro-passos { list-style: none; counter-reset: passo; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.registro-passos li { counter-increment: passo; position: relative; padding: 10px 12px 10px 48px; border: 1px solid var(--border); border-radius: 12px; }
.registro-passos li::before { content: counter(passo); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: var(--accent-bright); background: rgba(229, 52, 58, 0.14); }
.registro-passos strong { display: block; font-size: 13.5px; }
.registro-passos span { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.registro-passos code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); color: var(--text); }
/* Segundo passo do login: código da DM do Discord. */
.login-codigo-aviso { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin: 0 0 16px; }
.login-codigo-aviso strong { color: var(--text); }
#codigo { font-size: 20px; letter-spacing: 8px; font-variant-numeric: tabular-nums; }
.login-confiar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); margin: 2px 0 16px; cursor: pointer; }
.login-confiar input { accent-color: var(--accent); width: 15px; height: 15px; }
.login-codigo-reenviar { display: block; width: 100%; margin-top: 10px; padding: 10px; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; }
.login-codigo-reenviar:hover { color: var(--text); border-color: var(--text-dim); }
.login-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
    color: var(--text-dim);
    font-size: 12px;
}
.login-divisor::before, .login-divisor::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
}
.login-discord:hover { background: var(--bg-card-hover); }

.login-features {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 32px 26px;
    border-top: 1px solid var(--border);
}
@media (min-width: 760px) {
    .login-features { grid-template-columns: repeat(3, 1fr); }
}
.login-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}
.login-feature-icone {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 59, 66, 0.16);
    color: var(--accent-bright);
}
.login-feature-icone svg { display: block; width: 22px; height: 22px; color: var(--accent-bright); }
.login-feature strong { display: block; font-size: 13px; font-weight: 800; }
.login-feature > div > span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    z-index: 100;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

/* ---------- RESPONSIVO DESKTOP ---------- */

@media (min-width: 900px) {
    body { padding-bottom: 0; }
    .bottom-nav { display: none; }
    .main-nav { display: flex; }
    .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
    .stat-cards { grid-template-columns: repeat(3, 1fr); }
    .steps { grid-template-columns: repeat(5, 1fr); }
    .lobby-grid { grid-template-columns: repeat(5, 1fr); }
    .lobby-grid-single { grid-template-columns: minmax(220px, 320px); }
    .footer-grid { grid-template-columns: 2fr 1fr; }
    .ranking-highlight-cards { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1180px) {
    .page-with-sidebar {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 32px;
        align-items: start;
    }
}

@media (max-width: 1179px) {
    .sidebar { margin-top: 8px; }
}

/* ---------- PERFIL EM DESTAQUE (home) ---------- */

/* Topo da Home: UM container pai (borda comum) contendo as 2 colunas como filhas — esquerda =
   título + perfil de quem está logado (ou CTA de login); direita = líder do ranking +
   estatísticas do dia, empilhados. Divisor central só aparece em telas largas (lado a lado); em
   telas estreitas vira 1 coluna empilhada (mobile-first, breakpoint em 900px como o resto do site). */
.home-hero-container {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(229,52,58,0.08), var(--bg-card));
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.home-hero-divisor { display: none; }
.perfil-hero-coluna-esquerda,
.perfil-hero-coluna-direita {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.perfil-hero-coluna-esquerda .perfil-destaque-card { flex: 1; display: flex; flex-direction: column; }
.perfil-hero-coluna-esquerda .perfil-destaque-body { flex: 1; display: flex; flex-direction: column; }
.perfil-hero-coluna-esquerda .perfil-destaque-rota { margin-top: auto; }
.perfil-hero-coluna-direita .destaque-container-card { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.home-hero-titulo {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin: 0 0 4px;
    line-height: 1.1;
}
.home-hero-titulo .acento { color: var(--accent-bright); }
.home-hero-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 12px; max-width: 480px; }

@media (min-width: 900px) {
    .home-hero-container {
        flex-direction: row;
        align-items: stretch;
        padding: 20px;
        gap: 20px;
    }
    .home-hero-divisor {
        display: block;
        width: 1px;
        flex-shrink: 0;
        background: linear-gradient(180deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
    }
    .perfil-hero-coluna-esquerda { flex: 1.15; }
    .perfil-hero-coluna-direita { flex: 0.85; }
    .home-hero-titulo { font-size: 28px; }
    .perfil-hero-coluna-esquerda .perfil-destaque-card { padding: 18px; }
}

.lider-destaque-card,
.destaque-container-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
}
.lider-destaque-card::after,
.destaque-container-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.lider-destaque-card:hover::after,
.destaque-container-card:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.destaque-container-divisor {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
    margin: 18px 0;
}
.destaque-container-card .estat-dia-header { margin-bottom: 14px; }
.lider-destaque-badge {
    align-self: flex-start;
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--gold);
    border-radius: 8px;
    padding: 6px 14px;
    margin-bottom: 16px;
}
.lider-destaque-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--text);
}
.lider-destaque-avatar-wrap { position: relative; flex-shrink: 0; }
.lider-destaque-avatar-wrap img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg);
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 4px rgba(255, 59, 66, 0.14), 0 0 18px -2px rgba(255, 59, 66, 0.55);
}
.lider-destaque-coroa { position: absolute; top: -8px; right: -6px; font-size: 18px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.lider-destaque-info { flex: 1; min-width: 0; }
.lider-destaque-info .nome { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lider-destaque-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.lider-destaque-link svg { flex-shrink: 0; color: var(--text-dim); }

.perfil-destaque-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}
.perfil-destaque-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.perfil-destaque-card:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.perfil-destaque-badge {
    display: block;
    color: var(--accent-bright);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 0 12px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--border);
}
.perfil-destaque-empty { color: var(--text-dim); font-size: 13px; }
.perfil-destaque-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.perfil-destaque-avatar-wrap { position: relative; flex-shrink: 0; }
.perfil-destaque-avatar-wrap img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gold); display: block; }
.perfil-destaque-coroa {
    position: absolute;
    top: -8px;
    right: -6px;
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.perfil-destaque-info { flex: 1; min-width: 140px; }
.perfil-destaque-info .nome { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.perfil-destaque-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-destaque-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-dim);
}
.perfil-destaque-pill strong { color: var(--text); font-weight: 800; }
.perfil-destaque-pill-link { color: var(--accent-bright); font-weight: 700; text-decoration: none; }
.perfil-destaque-pill-link:hover { background: var(--bg-card-hover); }
.perfil-destaque-cta-header { flex-shrink: 0; }
.perfil-destaque-avatar-vazio {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--border);
    background: var(--bg);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
}

.perfil-destaque-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
@media (min-width: 480px) {
    .perfil-destaque-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
.perfil-destaque-item {
    position: relative;
    background: var(--bg);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.perfil-destaque-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.perfil-destaque-item:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.perfil-destaque-item .val { font-size: 26px; font-weight: 800; line-height: 1; }
.perfil-destaque-item .label { font-size: 13px; color: var(--text-dim); }
.perfil-destaque-item .titulo { font-size: 13px; font-weight: 700; color: var(--text); }
.perfil-destaque-item-icone {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.perfil-destaque-grid > .perfil-destaque-item:nth-child(1) .perfil-destaque-item-icone { background: rgba(229, 52, 58, 0.16); color: var(--accent-bright); }
.perfil-destaque-grid > .perfil-destaque-item:nth-child(2) .perfil-destaque-item-icone { background: rgba(62, 207, 110, 0.16); color: var(--green); }
.perfil-destaque-grid > .perfil-destaque-item:nth-child(3) .perfil-destaque-item-icone { background: rgba(245, 166, 35, 0.16); color: #f5a623; }

.perfil-destaque-rota { margin-top: 16px; }
.perfil-destaque-rota-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.perfil-destaque-rota-header strong { color: #f5a623; font-size: 13px; }
.perfil-destaque-rota-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--bg);
    overflow: hidden;
}
.perfil-destaque-rota-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}
.perfil-destaque-rota-sub { font-size: 11px; color: var(--text-dim); margin-top: 8px; }
.perfil-destaque-cta {
    margin-top: 16px;
    display: block;
    text-align: center;
}

.estat-dia-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
}
.estat-dia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.estat-dia-titulo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.estat-dia-card .stats-nav,
.destaque-container-card .stats-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px;
}
.estat-dia-card .stats-nav-btn,
.destaque-container-card .stats-nav-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: none;
    border: none;
}
.estat-dia-card .stats-nav-label,
.destaque-container-card .stats-nav-label { font-size: 11px; min-width: unset; padding: 0 6px; }
.estat-dia-card .stat-cards,
.destaque-container-card .stat-cards { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.estat-dia-card .stat-card,
.destaque-container-card .stat-card { padding: 14px 10px; text-align: center; border-radius: 6px; }
.estat-dia-card .stat-card .value,
.destaque-container-card .stat-card .value { font-size: 19px; }
.estat-dia-card .stat-card .label,
.destaque-container-card .stat-card .label { font-size: 9px; margin-top: 5px; letter-spacing: 0.2px; }

/* ---------- AJUSTES MOBILE (telas pequenas) ---------- */

@media (max-width: 560px) {
    /* O respiro de 44px pras setas do carrossel/header fica pesado demais em telas estreitas —
       reduz sem sumir com o espaço que as setas absolutas precisam. */
    .ranking-diario-header,
    .ranking-diario-carrossel,
    .ranking-resumo-corpo,
    .lobby-discord-row,
    .lobby-grid {
        padding-left: 8px;
        padding-right: 8px;
    }
    #ranking-cat-anterior { left: -4px; }
    #ranking-cat-proximo { right: -4px; }

    .ranking-diario-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .ranking-diario-header .btn { align-self: stretch; text-align: center; }

    .lobby-card { padding: 16px; }
    .lobby-actions { width: 100%; }
    .lobby-actions .btn { flex: 1; min-width: 0; }

    .perfil-destaque-card, .estat-dia-card { padding: 16px; }

    .ranking-diario-card { padding: 14px; }
    .ranking-diario-card-nota { font-size: 9px; padding: 4px 8px; }
    .ranking-diario-card-titulo-grupo { min-width: 0; }
    .ranking-diario-card-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .destaque-container-card { padding: 16px; }

    .container { padding: 0 14px; }

    /* Grid de partidas e de times na página de detalhe: minmax(280-300px) não cabe numa tela
       de 320px reais (iPhone SE etc) — força 1 coluna abaixo desse ponto. */
    .partidas-grid, .partida-times-grid { grid-template-columns: 1fr; }

    .partida-card { padding: 14px; }
    .partida-card-times { gap: 8px; }

    /* Modal do jogador: header com avatar + nome + placar tudo numa linha fica apertado — deixa
       quebrar e o card de placar ocupar a largura toda embaixo do nome. */
    .jogador-modal-header { flex-wrap: wrap; }
    .jogador-modal-placar { width: 100%; }

    /* Os 6 stat-cards do hero da home (Partidas hoje/Online/Contas/Banidos/Jogaram/Servidor)
       ficam presos em 3 colunas fixas sem breakpoint algum — abaixo de 400px cada card sobra
       menos de 90px, aperta demais o número+label. Reduz pra 2 colunas nessas telas. */
    .estat-dia-card .stat-cards,
    .destaque-container-card .stat-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- PÁGINA DE COMANDOS ---------- */

.comandos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.comando-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}
.comando-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-bright);
}
.comando-card-header svg { flex-shrink: 0; }
.comando-nome { font-size: 15px; font-weight: 800; font-family: monospace; }
.comando-aliases { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-family: monospace; }
.comando-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 10px 0 0; }

/* ---------- PÁGINA DE PONTUAÇÕES ---------- */

.pontos-hero-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 24px; max-width: 640px; }
.pontos-formula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.pontos-formula-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}
.pontos-formula-valor { font-size: 26px; font-weight: 900; }
.pontos-formula-valor.positivo { color: #3ddc84; }
.pontos-formula-valor.negativo { color: var(--accent-bright); }
.pontos-formula-label { font-size: 12px; color: var(--text-dim); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.pontos-secao { margin-bottom: 26px; }
.pontos-secao h2 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.pontos-secao p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.pontos-destaque-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 10px;
}
.pontos-destaque-box.melhor { border-left-color: #3ddc84; }
.pontos-destaque-box.pior { border-left-color: var(--accent-bright); }

/* ---------- PÁGINA DE PARTIDAS (lista) ---------- */

.text-accent { color: var(--accent-bright); }

.partidas-hero-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(229,52,58,0.08), var(--bg-card));
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 24px;
}
.partidas-hero-bola {
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
    width: 340px;
    height: 340px;
    pointer-events: none;
    opacity: 0.95;
}
.partidas-hero-bola .bola-raios {
    animation: bolaRaiosPulse 3.2s ease-in-out infinite;
    transform-origin: 200px 200px;
}
@keyframes bolaRaiosPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
@media (max-width: 1100px) {
    .partidas-hero-bola { width: 220px; height: 220px; right: -50px; opacity: 0.5; }
}
@media (max-width: 720px) {
    .partidas-hero-bola { display: none; }
}
.partidas-hero-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--accent-bright);
    background: rgba(229,52,58,0.14);
    border: 1px solid rgba(229,52,58,0.3);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 14px;
}
.partidas-hero-card .ranking-page-title { position: relative; z-index: 1; margin-bottom: 6px; font-size: 32px; max-width: 720px; }
.partidas-hero-card .ranking-page-sub { position: relative; z-index: 1; margin-bottom: 22px; max-width: 640px; }
.partidas-hero-search { position: relative; z-index: 1; display: flex; gap: 10px; max-width: 900px; }
.partidas-hero-search-input {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    color: var(--text-dim);
}
.partidas-hero-search-input:focus-within { border-color: var(--accent); color: var(--text); }
.partidas-hero-search-input input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 13px 0;
    color: var(--text);
    font-size: 14px;
}
.partidas-hero-search-input input:focus { outline: none; }
.partidas-hero-search .btn { flex-shrink: 0; }
@media (max-width: 480px) {
    .partidas-hero-search { flex-direction: column; }
    .partidas-hero-search .btn { width: 100%; }
}

.partidas-hero-features {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    max-width: 900px;
}
.partidas-hero-feature {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(13,17,23,0.55);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}
.partidas-hero-feature-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(229,52,58,0.14);
    color: var(--accent-bright);
}
.partidas-hero-feature-icon.laranja { background: rgba(245,166,35,0.14); color: #f5a623; }
.partidas-hero-feature-icon.verde { background: rgba(62,207,110,0.14); color: var(--green); }
.partidas-hero-feature strong { display: block; font-size: 12.5px; font-weight: 700; }
.partidas-hero-feature small { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; }
@media (max-width: 900px) {
    .partidas-hero-feature { flex: 1 1 45%; }
}
@media (max-width: 520px) {
    .partidas-hero-feature { flex: 1 1 100%; }
}

.partidas-lista-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.partidas-lista-header h2 { font-size: 18px; font-weight: 800; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.partidas-lista-header h2 svg { color: var(--accent-bright); }
.partidas-lista-sub { font-size: 12.5px; color: var(--text-dim); margin: 4px 0 0; }
.partidas-lista-header-right { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.partidas-lista-total { font-size: 13px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.partidas-lista-ordem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 12px;
    white-space: nowrap;
}
.partidas-lista-ordem svg:first-child { color: var(--text-dim); }

.partidas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.partida-card {
    position: relative;
    display: block;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 16px;
    text-decoration: none;
    color: var(--text);
    opacity: 0;
    transform: translateY(14px);
    animation: partidaCardIn 0.45s ease forwards;
}
@keyframes partidaCardIn {
    to { opacity: 1; transform: translateY(0); }
}
.partida-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.partida-card:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.partida-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.partida-card-id { font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
.partida-card-id svg { flex-shrink: 0; opacity: 0.75; }
.partida-card-modo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #f5a623;
    background: rgba(245,166,35,0.12);
    border: 1px solid rgba(245,166,35,0.25);
    border-radius: 999px;
    padding: 4px 10px;
}
.partida-card-modo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), #f5a623, transparent 30%, transparent 70%, #f5a623);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.partida-card-modo:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }

.partida-card-placar-linha {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.partida-card-time-col { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.partida-time-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.partida-time-avatar.vermelho { background: #ed4245; }
.partida-time-avatar.azul { background: #5865f2; }
.partida-time-avatar.vencedor { box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 16px rgba(229,52,58,0.5); }
.partida-time-avatar svg { color: #fff; }
.partida-time-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.partida-time-label .partida-time-dot { width: 7px; height: 7px; border-radius: 50%; }
.partida-time-label .partida-time-dot.vermelho { background: #ed4245; }
.partida-time-label .partida-time-dot.azul { background: #5865f2; }
.partida-time-jogadores {
    color: var(--text-dim);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.partida-time-vazio { color: var(--text-dim); }

.partida-card-centro { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.partida-card-placar {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}
.partida-card-placar .x { font-size: 16px; color: var(--text-dim); font-weight: 700; }
.partida-card-assistir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 8px 12px;
    white-space: nowrap;
    border-color: rgba(229,52,58,0.55);
    color: var(--accent-bright);
    transition: background 0.15s, border-color 0.15s;
}
.partida-card:hover .partida-card-assistir { background: rgba(229,52,58,0.12); border-color: var(--accent-bright); }

.partida-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.partida-card-footer span { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 6px; transition: color 0.15s; }
.partida-card-footer svg { flex-shrink: 0; opacity: 0.75; }
.partida-card-footer .partida-footer-label { display: block; font-size: 10px; opacity: 0.8; }
.partida-card-footer span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.partida-card-footer span:hover { color: var(--text); }
.partida-card-footer span:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }

@media (max-width: 560px) {
    .partida-card-placar-linha { grid-template-columns: 1fr; }
    .partida-card-centro { order: -1; flex-direction: row; justify-content: center; }
}

.partidas-banner-aviso {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(180deg, rgba(229,52,58,0.08), var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
    margin-top: 8px;
}
.partidas-banner-aviso-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(229,52,58,0.16);
    border: 1px solid rgba(229,52,58,0.35);
    color: var(--accent-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.partidas-banner-aviso-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.partidas-banner-aviso-texto strong { font-size: 14px; font-weight: 800; }
.partidas-banner-aviso-texto span { font-size: 12.5px; color: var(--text-dim); }
.partidas-banner-aviso-btn { flex-shrink: 0; }
@media (max-width: 620px) {
    .partidas-banner-aviso { flex-direction: column; align-items: flex-start; }
    .partidas-banner-aviso-btn { width: 100%; justify-content: center; }
}

/* ---------- PÁGINA DE DETALHE DA PARTIDA ---------- */

.partida-detalhe-card {
    position: relative;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"),
        linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        linear-gradient(90deg, rgba(120,20,22,0.5), var(--bg-card) 42%, var(--bg-card) 58%, rgba(20,30,60,0.55));
    border-radius: 22px;
    padding: 22px;
    overflow: hidden;
}
.partida-detalhe-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1px;
    background-image: linear-gradient(90deg, var(--accent-bright), transparent 34%, transparent 66%, var(--blue));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: partida-tracado-pulsa 2.6s ease-in-out infinite;
}
@keyframes partida-tracado-pulsa {
    0%, 100% { opacity: 0.3; filter: brightness(0.85); }
    50% { opacity: 1; filter: brightness(1.3); }
}
.partida-detalhe-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--accent-bright);
    background: rgba(229,52,58,0.14);
    border-radius: 999px;
    padding: 4px 10px;
}
.partida-detalhe-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.partida-jogador-tag-visitante {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 6px;
    text-transform: uppercase;
    margin-left: 4px;
}
.jogador-modal-visitante {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
}
.replay-modal { max-width: 420px; }
.replay-modal-texto { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0 0 14px; }
.replay-modal-passos { font-size: 13px; color: var(--text); line-height: 1.8; margin: 0 0 18px; padding-left: 20px; }
.replay-modal-passos a { color: var(--accent-bright); font-weight: 700; }
.partida-detalhe-placar-linha {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.partida-detalhe-placar-coluna {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    max-width: 220px;
    margin-bottom: -22px;
}
@media (min-width: 560px) {
    .partida-detalhe-placar-coluna { width: auto; }
}
.partida-detalhe-placar-titulo {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    z-index: 1;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.6px;
    white-space: nowrap;
}
.partida-detalhe-placar-titulo.topo { bottom: auto; top: -6px; }
.partida-detalhe-time {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 180px;
    padding: 14px 18px;
    box-sizing: border-box;
}
.partida-detalhe-time.direita { flex-direction: row-reverse; text-align: right; }
.partida-detalhe-time::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 120px;
    height: 120px;
    background-image: url("/img/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    filter: grayscale(1) brightness(2);
    pointer-events: none;
}
.partida-detalhe-time.direita::after { right: auto; left: -10px; }
.partida-detalhe-time .partida-time-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1; }
.partida-detalhe-time .partida-time-dot.vermelho { background: var(--accent-bright); }
.partida-detalhe-time .partida-time-dot.azul { background: var(--blue); }
.partida-detalhe-time-label { font-size: 12px; color: var(--text-dim); font-weight: 700; position: relative; z-index: 1; }
.partida-detalhe-time-nome { font-size: 24px; font-weight: 800; position: relative; z-index: 1; }
.partida-detalhe-placar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 46px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--text);
    border-radius: 18px;
    padding: 18px 40px;
    box-sizing: border-box;
}
.partida-detalhe-placar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2px;
    background-image: linear-gradient(90deg, var(--accent-bright), transparent 28%, transparent 72%, var(--blue));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: partida-tracado-pulsa 2.6s ease-in-out infinite;
}
.partida-detalhe-placar-sub { font-size: 9px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.6px; }
.partida-detalhe-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 34px;
}
.partida-detalhe-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.partida-detalhe-meta span:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-bright);
    color: var(--text);
    transform: translateY(-1px);
}
.partida-detalhe-meta span.partida-detalhe-meta-modo {
    border-color: rgba(245, 166, 35, 0.5);
    color: #f5a623;
}
.partida-detalhe-meta-modo strong { color: #f5a623; font-weight: 800; }
.partida-detalhe-meta span.partida-detalhe-meta-modo:hover {
    background: rgba(245, 166, 35, 0.1);
    border-color: #f5a623;
}
.partida-detalhe-badge svg { flex-shrink: 0; }

.partida-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 14px;
}
.partida-breadcrumb span { display: inline-flex; align-items: center; gap: 5px; }
.partida-breadcrumb-sep { opacity: 0.5; }

.partida-times-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.partida-time-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
}
.partida-time-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 10px;
}
.partida-time-card-header .partida-time-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.partida-time-card-header .partida-time-dot.vermelho { background: var(--accent-bright); }
.partida-time-card-header .partida-time-dot.azul { background: var(--blue); }
.partida-time-card-count { margin-left: auto; font-size: 11px; color: var(--text-dim); font-weight: 600; }
.partida-jogador-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    text-align: left;
    margin-bottom: 8px;
}
.partida-jogador-linha:last-child { margin-bottom: 0; }
.partida-jogador-linha:hover { background: var(--bg-card-hover); border-color: var(--border); cursor: pointer; }
.partida-jogador-avatar-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.partida-jogador-linha img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg); }
.partida-jogador-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.partida-jogador-badge.melhor {
    background: linear-gradient(145deg, #ffd76a, #f5a623);
}
.partida-jogador-badge.pior {
    background: linear-gradient(145deg, var(--accent-bright), var(--accent));
}
.partida-jogador-nome-grupo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.partida-jogador-nome { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partida-jogador-tempo { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-dim); }
.partida-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 28px 0 16px;
}
.partida-jogador-stat-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: 4px 11px;
    flex-shrink: 0;
    min-width: 34px;
}
.partida-jogador-stat-chip em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.partida-jogador-stat-chip strong { color: var(--text); font-weight: 800; font-size: 13px; line-height: 1.1; }

.partida-comparativo-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}
.partida-stat-linha {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 12px;
    margin: 0 -12px;
    border-bottom: 1px solid var(--border);
    border-radius: 10px;
    transition: background 0.15s ease;
}
.partida-stat-linha:last-child { border-bottom: none; }
.partida-stat-linha:hover { background: var(--bg-card-hover); }
.partida-stat-linha:hover .partida-stat-barra { height: 8px; }
.partida-stat-linha:hover .partida-stat-chip { transform: scale(1.05); }
.partida-stat-valor { font-size: 13px; font-weight: 800; width: 68px; flex-shrink: 0; display: inline-flex; }
.partida-stat-valor.esquerda { color: #ed4245; justify-content: flex-end; }
.partida-stat-valor.direita { color: #5865f2; justify-content: flex-start; }
.partida-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,0.3);
    transition: transform 0.15s ease;
    font-size: 15px;
}
.partida-stat-valor svg { flex-shrink: 0; }
.partida-stat-meio { flex: 1; min-width: 0; text-align: center; }
.partida-stat-label { font-size: 13px; font-weight: 700; }
.partida-stat-sub { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.partida-stat-barra { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--bg); max-width: 420px; margin: 0 auto; transition: height 0.15s ease; }
.partida-stat-barra-vermelho { background: #ed4245; }
.partida-stat-barra-azul { background: #5865f2; }
.partida-comparativo-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 16px;
}
.partida-comparativo-footer svg { flex-shrink: 0; color: #f5a623; }
.partida-comparativo-footer strong { color: #fff; font-weight: 900; }

/* ---------- MODAL DE ESTATÍSTICAS DO JOGADOR (partida) ---------- */

@keyframes modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes modal-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(14px) scale(0.97); } }

/* ---------- MODAL PADRÃO "pf-*" (global) ---------- */
/* Nasceu como CSS específico do perfil (perfil-page.css), mas é usado em outras páginas também
   (ex: popup de Configurações, aberto de qualquer lugar do site via app.js/configuracoes.js) —
   por isso vive aqui, não em perfil-page.css, que só é carregado em /perfil/:nick. */

.pf-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modal-overlay-out 0.18s ease forwards;
}
.pf-modal-overlay.aberto { display: flex; animation: modal-overlay-in 0.2s ease forwards; }
.pf-modal-overlay.fechando { display: flex; animation: modal-overlay-out 0.18s ease forwards; }
.pf-modal-overlay.aberto .pf-modal { animation: modal-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
.pf-modal-overlay.fechando .pf-modal { animation: modal-out 0.18s ease forwards; }
.pf-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 30px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-bright) transparent;
}
.pf-modal-largo { max-width: 940px; }
.pf-modal::-webkit-scrollbar { width: 10px; }
.pf-modal::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 999px; }
.pf-modal::-webkit-scrollbar-thumb {
    background-color: var(--accent-bright);
    background-image: linear-gradient(180deg, #ff8a8f 0%, var(--accent-bright) 45%, #8a0009 100%);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.pf-modal::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, #ffa0a4, #ff5a60, #a3000c); background-clip: content-box; }
.pf-modal-fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 2;
}
.pf-modal-fechar:hover { background: var(--bg-card-hover); }
.pf-modal-fechar::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.pf-modal-fechar:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }

.jogador-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modal-overlay-out 0.18s ease forwards;
}
.jogador-modal-overlay.aberto { display: flex; animation: modal-overlay-in 0.2s ease forwards; }
.jogador-modal-overlay.fechando { display: flex; animation: modal-overlay-out 0.18s ease forwards; }
.jogador-modal-overlay.aberto .jogador-modal { animation: modal-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
.jogador-modal-overlay.fechando .jogador-modal { animation: modal-out 0.18s ease forwards; }
.jogador-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.jogador-modal-body-conteudo { padding: 22px; }
.jogador-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(229,52,58,0.1), rgba(229,52,58,0));
    border-bottom: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
.jogador-modal-avatar-wrap { position: relative; flex-shrink: 0; }
.jogador-modal-avatar-wrap img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg);
    border: 3px solid var(--border);
}
.jogador-modal-avatar-wrap.vermelho img { border-color: var(--accent-bright); box-shadow: 0 0 0 4px rgba(255,59,66,0.15), 0 0 20px -2px rgba(255,59,66,0.6); }
.jogador-modal-avatar-wrap.azul img { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(88,166,255,0.15), 0 0 20px -2px rgba(88,166,255,0.6); }
.jogador-modal-avatar-estrela {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffd76a, #f5a623);
    color: #fff;
    border: 2px solid var(--bg-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.jogador-modal-nome-grupo { flex: 1; min-width: 0; }
.jogador-modal-nome-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jogador-modal-nome { font-size: 22px; font-weight: 900; }
.jogador-modal-melhor {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    border-radius: 999px;
    padding: 5px 12px 5px 8px;
}
.jogador-modal-melhor.melhor { background: linear-gradient(145deg, #ffd76a, #f5a623); }
.jogador-modal-melhor.pior { background: linear-gradient(145deg, var(--accent-bright), var(--accent)); }
.jogador-modal-melhor svg { flex-shrink: 0; }
.jogador-modal-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); margin-top: 5px; }
.jogador-modal-meta svg { flex-shrink: 0; opacity: 0.8; }
.jogador-modal-meta-label { color: var(--text-dim); }
.jogador-modal-meta strong { margin-left: 2px; }
.jogador-modal-meta strong.positivo { color: #3ddc84; }
.jogador-modal-meta strong.negativo { color: var(--accent-bright); }
.jogador-modal-placar {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(229,52,58,0.22), var(--bg) 45%, var(--bg) 55%, rgba(88,166,255,0.24));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px 16px;
}
.jogador-modal-placar-titulo {
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.jogador-modal-placar-linha { display: flex; align-items: center; gap: 14px; }
.jogador-modal-placar-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}
.jogador-modal-placar-time .partida-time-dot { width: 10px; height: 10px; border-radius: 50%; }
.jogador-modal-placar-time .partida-time-dot.vermelho { background: var(--accent-bright); }
.jogador-modal-placar-time .partida-time-dot.azul { background: var(--blue); }
.jogador-modal-placar-valor {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
}
.jogador-modal-placar-valor span { color: var(--text-dim); font-weight: 700; font-size: 16px; }
.jogador-modal-fechar {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--text);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.jogador-modal-fechar:hover { background: var(--bg-card-hover); }
.jogador-modal-fechar::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.jogador-modal-fechar:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.jogador-modal-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.jogador-modal-coluna-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.jogador-modal-coluna-titulo.vermelho { color: var(--accent-bright); }
.jogador-modal-coluna-titulo.azul { color: var(--blue); }
.jogador-modal-coluna-titulo.roxo { color: #a78bfa; }
.jogador-modal-coluna-titulo svg { flex-shrink: 0; }
.jogador-modal-metrica {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
    transition: border-color 0.15s;
}
.jogador-modal-metrica::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.jogador-modal-metrica:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.jogador-modal-metrica-icone {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-dim);
}
.jogador-modal-metrica-info { flex: 1; min-width: 0; font-size: 12px; }
.jogador-modal-metrica-pontos { font-size: 10px; font-weight: 700; }
.jogador-modal-metrica-pontos.positivo { color: #3ddc84; }
.jogador-modal-metrica-pontos.negativo { color: var(--accent-bright); }
.jogador-modal-metrica-pontos.neutro { color: var(--text-dim); }
.jogador-modal-metrica-valor { font-size: 16px; font-weight: 800; flex-shrink: 0; }
.jogador-modal-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); margin-top: 16px; }
.jogador-modal-rodape-data { display: inline-flex; align-items: center; gap: 6px; }
.jogador-modal-rodape-data svg { flex-shrink: 0; opacity: 0.8; }
.jogador-modal-btn-ranking {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    padding: 8px 14px;
}
.jogador-modal-btn-ranking:hover { background: var(--bg-card-hover); }
.jogador-modal-btn-ranking::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.jogador-modal-btn-ranking:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.jogador-modal-desempenho {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.15fr;
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
}
@media (max-width: 700px) {
    .jogador-modal-desempenho { grid-template-columns: 1fr; }
    /* Header do modal (avatar+nome+placar): agora com flex-wrap, o placar cai pra segunda
       linha em telas estreitas — força ele a ocupar a largura toda nesse caso, senão fica
       pequeno e desalinhado à direita. */
    .jogador-modal-placar { width: 100%; }
    .jogador-modal-body-conteudo { padding: 16px; }
    .jogador-modal-nome { font-size: 19px; }
    .jogador-modal-colunas { grid-template-columns: 1fr; }
}
.jogador-modal-desempenho-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; border-radius: 8px; padding: 4px; margin: -4px; }
.jogador-modal-desempenho-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 30%, transparent 70%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.jogador-modal-desempenho-item:hover::after { opacity: 1; animation: spin-borda 2.2s linear infinite; }
.jogador-modal-desempenho-item:first-child .jogador-modal-desempenho-titulo { font-size: 13px; color: var(--text); }
.jogador-modal-desempenho-item:not(:first-child) { border-left: 1px solid var(--border); padding-left: 16px; }
@media (max-width: 700px) {
    .jogador-modal-desempenho-item:not(:first-child) { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 10px; }
}
.jogador-modal-desempenho-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 0.4px;
}
.jogador-modal-desempenho-titulo svg { flex-shrink: 0; color: var(--accent-bright); }
.jogador-modal-desempenho-frase { font-size: 13px; color: var(--text); line-height: 1.4; }
.jogador-modal-desempenho-valor { font-size: 20px; font-weight: 900; }
.jogador-modal-desempenho-valor.positivo { color: #3ddc84; }
.jogador-modal-desempenho-valor.negativo { color: var(--accent-bright); }
.jogador-modal-desempenho-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 9px;
}
.jogador-modal-desempenho-badge.positivo { background: rgba(61,220,132,0.16); color: #3ddc84; }
.jogador-modal-desempenho-badge.negativo { background: rgba(255,59,66,0.16); color: var(--accent-bright); }
.jogador-modal-desempenho-posicao { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; color: #f5a623; white-space: nowrap; }
.jogador-modal-desempenho-posicao svg { flex-shrink: 0; }

/* ---------- BANNER DE AVISOS (topo da página de Ranking) ---------- */

.ranking-avisos-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
    font-size: 12px;
}
.ranking-aviso {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border-radius: 999px;
    padding: 2px 9px;
}
.ranking-aviso-destaque { background: rgba(229, 52, 58, 0.16); color: var(--accent-bright); }
.ranking-aviso-dica { background: rgba(88, 166, 255, 0.16); color: var(--blue); }
.ranking-aviso-texto { color: var(--text-dim); }
.ranking-aviso-separador { color: var(--border); flex-shrink: 0; }

/* Botão "buscar na tabela" dentro do card de destaque da sidebar do Ranking. */
.sidebar-btn-perfil { width: 100%; justify-content: center; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- POPUP: BOAS-VINDAS / LOGIN COM DISCORD (visitante não-logado) ---------- */
/* Injetado por boas-vindas.js — regras de exibição (não-logado, 1ª página, suprime até voltar
   pra Home) ficam todas no JS; aqui é só o visual, fiel à referência do usuário. */

.bv-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* Centraliza no espaço VISÍVEL (descontando a sidebar fixa), não na viewport inteira — senão o
   popup fica deslocado pra esquerda em telas com a sidebar aberta. Usa padding em vez de "left"
   porque justify-content:center centraliza dentro da CAIXA do flex container — com "left" a caixa
   ficava menor mas ainda alinhada à esquerda da viewport original, sem recentralizar de verdade.
   Só faz sentido a partir de 900px, mesmo breakpoint em que a sidebar de fato existe. */
@media (min-width: 900px) {
    body.has-app-sidebar .bv-overlay { padding-left: calc(var(--sidebar-w) + 16px); transition: padding-left 0.2s ease; }
    body.has-app-sidebar.sidebar-minimizada .bv-overlay { padding-left: calc(var(--sidebar-w-min) + 16px); }
}
.bv-overlay.aberto { display: flex; animation: modal-overlay-in 0.25s ease forwards; }
.bv-overlay.fechando { display: flex; animation: modal-overlay-out 0.2s ease forwards; }
.bv-overlay.aberto .bv-modal { animation: modal-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
.bv-overlay.fechando .bv-modal { animation: modal-out 0.2s ease forwards; }

.bv-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 980px;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,0.5);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-bright) transparent;
}
.bv-colunas { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) {
    .bv-colunas { grid-template-columns: 1.05fr 0.95fr; }
}
.bv-fechar { position: absolute; top: 14px; right: 14px; background: var(--bg-card); z-index: 5; }

.bv-coluna { padding: 34px 30px; }
.bv-coluna-esq { border-bottom: 1px solid var(--border); }
@media (min-width: 820px) {
    .bv-coluna-esq { border-bottom: none; border-right: 1px solid var(--border); }
}
.bv-coluna-dir {
    background: radial-gradient(circle at 50% 20%, rgba(229, 52, 58, 0.12), transparent 60%);
    display: flex;
    flex-direction: column;
}

.bv-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 59, 66, 0.12);
    color: var(--accent-bright);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}
.bv-titulo { font-size: 34px; font-weight: 900; line-height: 1.15; margin: 0 0 16px; text-transform: uppercase; }
.bv-titulo span { color: var(--accent-bright); }
.bv-sub { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin: 0 0 26px; max-width: 420px; }

.bv-lista-esq { display: flex; flex-direction: column; gap: 18px; }
.bv-lista-esq-item { display: flex; align-items: flex-start; gap: 14px; }
.bv-lista-esq-icone {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 59, 66, 0.16);
    color: var(--accent-bright);
}
.bv-lista-esq-icone svg { display: block; width: 20px; height: 20px; color: var(--accent-bright); }
.bv-lista-esq-item strong { display: block; font-size: 14px; font-weight: 800; }
.bv-lista-esq-item > div > span { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }

.bv-comunidade {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.bv-comunidade-avatares { display: flex; flex-shrink: 0; }
.bv-comunidade-avatares img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--accent), #4a0d10);
    border: 2px solid var(--bg-card);
    margin-left: -10px;
}
.bv-comunidade-avatares img:first-child { margin-left: 0; }
.bv-comunidade-texto { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.bv-comunidade-texto strong { color: var(--accent-bright); font-weight: 900; }

.bv-discord-arte {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    margin-bottom: 22px;
    color: var(--text);
}
.bv-discord-arte::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 59, 66, 0.25), transparent 65%);
    filter: blur(4px);
}
.bv-discord-anel {
    position: relative;
    z-index: 1;
    width: 128px;
    height: 128px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(255, 59, 66, 0.14), rgba(0,0,0,0.2));
    box-shadow: 0 0 40px 4px rgba(255, 59, 66, 0.35), inset 0 0 20px rgba(255, 59, 66, 0.15);
}
.bv-discord-anel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 2px;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--accent-bright), transparent 25%, transparent 75%, var(--accent-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin-borda 3.5s linear infinite;
}
.bv-discord-arte svg { position: relative; z-index: 1; filter: drop-shadow(0 0 16px rgba(255, 59, 66, 0.5)); }
.bv-discord-check {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-bright);
    border: 3px solid var(--bg-card);
    margin-left: -22px;
    margin-top: 46px;
    box-shadow: 0 0 14px 0 rgba(255, 59, 66, 0.6);
}

.bv-desbloqueia {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.bv-desbloqueia-titulo { font-size: 11px; font-weight: 800; color: var(--accent-bright); letter-spacing: 0.4px; margin-bottom: 14px; }
.bv-desbloqueia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.bv-desbloqueia-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.bv-desbloqueia-icone {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 59, 66, 0.14);
    color: var(--accent-bright);
}

.bv-btn-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-top: auto;
}
.bv-btn-discord:hover { filter: brightness(1.08); }
.bv-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); margin-top: 12px; }
/* Passo a passo do registro (número no lugar do ícone) e o atalho "Já tenho conta". */
.bv-passo-num { font-size: 17px; font-weight: 900; color: var(--accent-bright); }
.bv-ja-tenho { display: block; text-align: center; margin-top: 12px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; font-size: 13.5px; color: var(--text-dim); text-decoration: none; }
.bv-ja-tenho strong { color: var(--text); }
.bv-ja-tenho:hover { border-color: var(--accent); color: var(--text); }
.bv-pelo-discord { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--text-dim); text-decoration: none; }
.bv-pelo-discord strong { color: #8b9cff; }
.bv-pelo-discord:hover strong { text-decoration: underline; }

@media (max-width: 560px) {
    .bv-coluna { padding: 26px 20px; }
    .bv-titulo { font-size: 26px; }
    .bv-desbloqueia-grid { grid-template-columns: 1fr; }
    .bv-discord-arte { height: 150px; }
    .bv-discord-arte svg { width: 56px; height: 56px; }
    .bv-lista-esq { gap: 14px; }
}

/* ---------- VISUAL DO PAINEL ADMIN (cabeçalho, menu lateral e rodapé) ----------
   Pedido do usuário (2026-10-09): o site usa o mesmo cabeçalho/menu lateral do painel admin,
   mantendo todos os itens e funções do site. Só aparência — a estrutura continua a mesma. */
@media (min-width: 900px) {
    :root { --sidebar-w: 240px; --sidebar-w-min: 78px; }
    .app-sidebar { background: linear-gradient(180deg, #0e1116, #0a0c10); border-right: 1px solid var(--border); padding: 18px 0 14px; }
    .app-sidebar-brand { padding: 4px 10px 22px; }
    .app-sidebar-brand img { height: 74px; filter: drop-shadow(0 6px 20px rgba(229, 52, 58, 0.35)); }
    body.sidebar-minimizada .app-sidebar-brand img { height: 44px; }
    .app-sidebar-nav { padding: 0 14px; gap: 4px; }
    .app-sidebar-item {
        gap: 14px; padding: 12px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; color: #c4c8d0;
        border: 1px solid transparent; background: transparent;
    }
    .app-sidebar-item::after, .app-sidebar-item.active::before { display: none; }
    .app-sidebar-item:hover { background: rgba(255, 255, 255, 0.03); color: #fff; }
    .app-sidebar-icone svg { width: 21px; height: 21px; color: #9aa0aa; }
    .app-sidebar-item.active {
        color: #fff; border-color: rgba(229, 52, 58, 0.45);
        background: linear-gradient(90deg, rgba(229, 52, 58, 0.35), rgba(229, 52, 58, 0.06));
        box-shadow: inset 3px 0 0 var(--accent-bright), 0 0 22px rgba(229, 52, 58, 0.12);
    }
    .app-sidebar-item.active .app-sidebar-icone svg { color: var(--accent-bright); }
    body.sidebar-minimizada .app-sidebar-item { padding: 12px 0; }
    .app-sidebar-rodape { padding: 10px 14px 0; }
    .app-sidebar-discord { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 12px; }
    .app-sidebar-toggle { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: transparent; }
    .app-sidebar-toggle:hover { border-color: rgba(229, 52, 58, 0.6); color: #fff; }

    .site-header { background: rgba(9, 11, 15, 0.88); }
    .site-header .container { height: 76px; }
    body.has-app-sidebar .site-header .container { padding: 0 28px; }
}
.app-header-busca { border-radius: 12px; }
.notif-sino, .app-header-busca-mobile-toggle { border-radius: 12px; }
.user-menu-btn { border-radius: 14px; padding: 5px 12px 5px 5px; gap: 10px; }
.user-menu-btn img { width: 40px; height: 40px; }
@media (max-width: 600px) { .user-menu-btn img { width: 32px; height: 32px; } }

.site-rodape {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 30px; padding: 18px 28px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim);
}
.site-rodape-marca { display: flex; align-items: center; gap: 14px; }
.site-rodape-marca img { height: 40px; }
.site-rodape-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.site-rodape-links a, .site-rodape-status {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
    background: var(--bg-card); border: 1px solid var(--border); color: #d2d5db; text-decoration: none;
}
.site-rodape-links a svg { width: 17px; height: 17px; color: #8c9eff; }
.site-rodape-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.site-rodape-status.online i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.site-rodape-status.offline i { background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); }
@media (max-width: 899px) { .site-rodape { padding: 16px; margin-bottom: 70px; } }

/* Selo do Clube VIP (coroa dourada ao lado do nick) */
/* Coroa do Clube VIP — o mesmo ícone no site inteiro (ver BlhaxApp.seloVip/coroaVip). Clicável: abre o popup do VIP. */
.selo-vip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 6px; vertical-align: -3px; flex-shrink: 0; color: #1a1306; background: linear-gradient(160deg, #ffe27a, #ffc93b); box-shadow: 0 0 10px rgba(255, 201, 59, 0.35); cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; }
.selo-vip:hover { transform: translateY(-1px) scale(1.08); box-shadow: 0 0 14px rgba(255, 201, 59, 0.6); }
.selo-vip:focus-visible { outline: 2px solid #ffc93b; outline-offset: 2px; }
.selo-vip svg { width: 12px; height: 12px; }
/* Coroa sempre na cor do selo: regras genéricas tipo ".lider-destaque-link svg { color: dim }" (card
   Líder do ranking da home) pintavam a coroa de cinza dentro do selo dourado. */
.selo-vip .coroa-vip { color: inherit; }
.selo-vip.grande { width: 26px; height: 26px; border-radius: 8px; vertical-align: -4px; margin-left: 10px; }
.selo-vip.grande svg { width: 17px; height: 17px; }
.selo-vip.media { width: 36px; height: 36px; border-radius: 11px; margin: 0; vertical-align: middle; }
.selo-vip.media svg { width: 22px; height: 22px; }
.selo-vip.enorme { width: 84px; height: 84px; border-radius: 22px; margin: 0; box-shadow: 0 14px 34px rgba(255, 201, 59, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.selo-vip.enorme svg { width: 50px; height: 50px; }
.selo-vip.enorme:hover { transform: none; }
.coroa-vip { width: 1em; height: 1em; vertical-align: -0.12em; flex-shrink: 0; }
[data-vip-popup] { cursor: pointer; }

/* ---------- Botão flutuante "Agora no BLHAX" (js/agora.js): jogando na sala + online no site ---------- */
.ag-raiz { position: fixed; right: 22px; bottom: 22px; z-index: 140; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.ag-raiz > * { pointer-events: auto; }
.ag-botao { position: relative; width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; cursor: pointer; color: #fff; border: 1px solid rgba(229, 52, 58, 0.45); background: radial-gradient(circle at 30% 20%, rgba(255, 59, 66, 0.35), transparent 60%), #15181d; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(229, 52, 58, 0.08); transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; }
.ag-botao:hover, .ag-botao[aria-expanded="true"] { transform: translateY(-2px); border-color: var(--accent-bright); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 22px rgba(229, 52, 58, 0.35); }
.ag-botao svg { width: 26px; height: 26px; }
.ag-botao.ag-tem-gente::after { content: ""; position: absolute; left: 9px; bottom: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #15181d, 0 0 10px var(--green); animation: ag-pulsa 1.8s ease-in-out infinite; }
@keyframes ag-pulsa { 50% { box-shadow: 0 0 0 2px #15181d, 0 0 2px var(--green); } }
.ag-badge { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #ff3b42, #c4161d); border: 2px solid var(--bg); }
.ag-badge[hidden] { display: none; }

.ag-painel { width: 360px; max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid rgba(229, 52, 58, 0.35); background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(229, 52, 58, 0.14), transparent 70%), #12151a; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); animation: ag-entra 0.18s ease; }
.ag-painel[hidden] { display: none; }
@keyframes ag-entra { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.ag-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; }
.ag-topo h3 { margin: 0; font-size: 18px; font-weight: 900; }
.ag-topo p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-dim); }
.ag-fechar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; cursor: pointer; color: var(--text-dim); background: transparent; border: 1px solid var(--border); }
.ag-fechar:hover { color: #fff; border-color: var(--accent-bright); }
.ag-fechar svg { width: 15px; height: 15px; }
.ag-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.ag-atualizar { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
.ag-atualizar:hover { border-color: var(--accent-bright); }
.ag-atualizar svg { width: 14px; height: 14px; }
.ag-atualizar.girando svg { animation: ag-gira 0.8s linear infinite; }
@keyframes ag-gira { to { transform: rotate(360deg); } }
.ag-corpo { overflow-y: auto; padding: 6px 12px 14px; }
.ag-secao { padding: 10px 4px 4px; }
.ag-secao + .ag-secao { margin-top: 6px; border-top: 1px solid var(--border); }
.ag-secao-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ag-secao-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #c9cbd1; }
.ag-secao-titulo svg { width: 17px; height: 17px; color: var(--accent-bright); }
.ag-qtd { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--accent-bright); background: rgba(229, 52, 58, 0.14); }
.ag-entrar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(180deg, #ff3b42, #d42a30); box-shadow: 0 6px 16px rgba(229, 52, 58, 0.3); }
.ag-entrar:hover { transform: translateY(-1px); }
.ag-entrar svg { width: 14px; height: 14px; }
.ag-lista { display: flex; flex-direction: column; gap: 4px; }
.ag-linha { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 11px; color: inherit; text-decoration: none; }
a.ag-linha:hover { background: rgba(255, 255, 255, 0.04); }
.ag-foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #1b2028; border: 2px solid var(--border); }
.ag-nome { display: flex; align-items: center; min-width: 0; }
.ag-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ag-time { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; }
.ag-time-red { color: #ff5a60; background: rgba(229, 52, 58, 0.16); }
.ag-time-blue { color: #6db3ff; background: rgba(88, 166, 255, 0.15); }
.ag-time-spec { color: #b5b9c2; background: rgba(200, 204, 212, 0.1); }
.ag-online { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--green); font-weight: 700; }
.ag-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.ag-vazio { padding: 14px 8px; font-size: 13px; color: var(--text-dim); text-align: center; }

/* Celular: acima do bottom-nav (60px), painel ocupando a largura. */
@media (max-width: 899px) {
    .ag-raiz { right: 14px; bottom: 74px; left: 14px; }
    .ag-botao { width: 52px; height: 52px; border-radius: 15px; }
    .ag-painel { width: 100%; max-height: calc(100vh - 160px); }
}

/* ---------- Popup "Ver sala" (lobby.js): placar, 3 times com foto/VIP e chat ---------- */
.sv-overlay { background: rgba(4, 5, 8, 0.82); backdrop-filter: blur(6px); }
/* overflow-y: auto — em tela baixa o chat (último bloco) ficava cortado; agora o popup rola. */
.modal.sv-modal { position: relative; width: min(1080px, 100%); max-width: 1080px; max-height: calc(100dvh - 32px); padding: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(229, 52, 58, 0.4); background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(229, 52, 58, 0.16), transparent 70%), linear-gradient(170deg, #17121a, #101217 50%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.sv-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.sv-titulo h2 { margin: 8px 0 2px; font-size: 22px; font-weight: 900; }
.sv-titulo p { margin: 0; font-size: 13px; color: var(--text-dim); }
.sv-ao-vivo { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #ff5a60; background: rgba(229, 52, 58, 0.14); border: 1px solid rgba(229, 52, 58, 0.35); }
.sv-ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b42; box-shadow: 0 0 8px #ff3b42; animation: sv-pisca 1.4s ease-in-out infinite; }
.sv-ao-vivo.off { color: var(--text-dim); background: rgba(255, 255, 255, 0.04); border-color: var(--border); }
.sv-ao-vivo.off i { background: #5d626b; box-shadow: none; animation: none; }
@keyframes sv-pisca { 50% { opacity: 0.35; } }
.sv-topo-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sv-entrar { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 11px; font-size: 13px; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(180deg, #ff3b42, #d42a30); box-shadow: 0 8px 22px rgba(229, 52, 58, 0.35); transition: transform 0.15s; }
.sv-entrar:hover { transform: translateY(-1px); }
.sv-entrar[hidden] { display: none; }
.sv-fechar { width: 40px; height: 40px; border-radius: 11px; cursor: pointer; font-size: 22px; line-height: 1; color: var(--text-dim); background: transparent; border: 1px solid var(--border); }
.sv-fechar:hover { color: #fff; border-color: var(--accent-bright); }

.sv-placar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 18px 24px 0; padding: 12px 18px; border-radius: 14px; background: linear-gradient(90deg, rgba(229, 52, 58, 0.32), rgba(229, 52, 58, 0.06) 42%, rgba(88, 166, 255, 0.06) 58%, rgba(88, 166, 255, 0.32)); border: 1px solid rgba(255, 255, 255, 0.07); }
.sv-lado { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.sv-lado-red { color: #ff6b70; }
.sv-lado-blue { color: #7cbcff; text-align: right; }
.sv-score { display: flex; align-items: center; gap: 12px; padding: 6px 18px; border-radius: 999px; background: rgba(8, 9, 12, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); }
.sv-score b { font-size: 26px; font-weight: 900; min-width: 22px; text-align: center; }
.sv-score em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--text-dim); }

.sv-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 24px; }
.sv-time { min-width: 0; min-height: 170px; display: flex; flex-direction: column; border-radius: 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-top: 3px solid #5d626b; overflow: hidden; }
.sv-time-red { border-top-color: #e5343a; background: linear-gradient(180deg, rgba(229, 52, 58, 0.09), rgba(255, 255, 255, 0.02) 45%); }
.sv-time-blue { border-top-color: #58a6ff; background: linear-gradient(180deg, rgba(88, 166, 255, 0.09), rgba(255, 255, 255, 0.02) 45%); }
.sv-time-topo { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #c9cbd1; }
.sv-time-red .sv-time-topo span { color: #ff6b70; }
.sv-time-blue .sv-time-topo span { color: #7cbcff; }
.sv-time-topo b { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; color: #fff; background: rgba(255, 255, 255, 0.08); }
.sv-lista { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 10px; }
.sv-jogador { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 700; }
a.sv-jogador:hover { background: rgba(255, 255, 255, 0.05); }
.sv-sem-conta { opacity: 0.75; font-weight: 600; }
.sv-foto { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: #1b2028; border: 2px solid var(--border); }
.sv-time-red .sv-foto { border-color: rgba(229, 52, 58, 0.55); }
.sv-time-blue .sv-foto { border-color: rgba(88, 166, 255, 0.55); }
.sv-patente { flex-shrink: 0; font-size: 15px; line-height: 1; margin-right: -3px; }
.sv-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-jogador .selo-vip { margin-left: 2px; }
.sv-admin { color: #ffc93b; flex-shrink: 0; display: block; }
.sv-ping { margin-left: auto; padding-left: 6px; flex-shrink: 0; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.sv-ping.ok { color: #3ddc84; }
.sv-ping.medio { color: #ffc93b; }
.sv-ping.ruim { color: #ff4d55; }
.sv-vazio { padding: 22px 8px; text-align: center; font-size: 12.5px; color: var(--text-dim); }

.sala-chat.sv-chat { margin: 0 24px 22px; padding: 14px 16px; border-top: 0; border-radius: 14px; background: rgba(8, 9, 12, 0.55); border: 1px solid var(--border); }
.sv-chat-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #c9cbd1; }
.sv-chat-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: var(--accent-bright); background: linear-gradient(160deg, rgba(229, 52, 58, 0.24), rgba(229, 52, 58, 0.08)); border: 1px solid rgba(229, 52, 58, 0.35); }
.sv-chat .sala-chat-mensagens { height: clamp(120px, 24vh, 190px); max-height: none; font-size: 13px; }
.sala-chat-msg.fala { font-style: normal; font-weight: 600; }
.sala-chat-msg.alto-falante { font-style: normal; font-weight: 800; }
.sv-modal > * { flex-shrink: 0; }

@media (max-width: 760px) {
    .sv-topo { padding: 18px 16px 14px; }
    .sv-titulo h2 { font-size: 19px; }
    .sv-entrar { padding: 0 12px; }
    .sv-placar { margin: 14px 16px 0; padding: 10px 12px; }
    .sv-times { grid-template-columns: 1fr; padding: 14px 16px; }
    .sv-time { min-height: 0; }
    .sala-chat.sv-chat { margin: 0 16px 16px; }
}
@media (max-width: 460px) {
    .sv-entrar-extra { display: none; }
}

/* Agora no BLHAX → lista de salas abertas (Ver = popup da sala, Entrar = link) */
.ag-salas { display: flex; flex-direction: column; gap: 8px; }
.ag-sala { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
.ag-sala-info { flex: 1; min-width: 0; }
.ag-sala-info strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sala-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ag-tag { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #c9cbd1; background: rgba(255, 255, 255, 0.06); }
.ag-tag i { display: none; }
.ag-tag.ao-vivo { color: #ff6b70; background: rgba(229, 52, 58, 0.14); }
.ag-tag.ao-vivo i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #ff3b42; box-shadow: 0 0 6px #ff3b42; animation: sv-pisca 1.4s ease-in-out infinite; }
.ag-sala.off .ag-tag:first-child { color: var(--text-dim); }
.ag-sala-acoes { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.ag-ver { height: 30px; padding: 0 14px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
.ag-ver:hover { border-color: var(--accent-bright); }
.ag-sala-acoes .ag-entrar { margin-left: 0; justify-content: center; }

/* Agora no BLHAX → Staff online: [TAG] + nick na cor do cargo; dono com o selo "Fundador" */
.ag-cargo-tag { font-weight: 900; margin-right: 1px; }
.ag-cargo-mod strong { color: #2bff86; }
.ag-cargo-adm strong { color: #7d6bff; }
.ag-fundador { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 0.03em; color: #1a1306; background: linear-gradient(160deg, #ffe27a, #ffc93b); box-shadow: 0 0 10px rgba(255, 201, 59, 0.3); }
.ag-fundador svg { width: 12px; height: 12px; }