body {
    background-color: #080c14;
    color: #e2e8f0;
    font-family: 'Akrobat', sans-serif;
    overflow-x: hidden;
}

.glass-panel {
    background: rgba(17, 23, 38, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #080c14;
}
::-webkit-scrollbar-thumb {
    background: #1d263b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #00f2fe;
}

@keyframes pulse-cyan {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.live-dot {
    animation: pulse-cyan 1.5s infinite;
}

/* ===== LARGURA PADRÃO DO CONTEÚDO =====
   Mesma largura da coluna central do lobby com os dois anúncios laterais (1600px - margens - 2x256px - 2x24px).
   Todas as páginas usam essa largura; no lobby ela não cresce quando os anúncios somem (assinantes). */
.largura-conteudo {
    width: 100%;
    max-width: 976px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== MOBILE "APP": barra de navegação inferior e áreas seguras (iPhone com notch) ===== */
.nav-inferior {
    padding-bottom: env(safe-area-inset-bottom);
}
.com-nav-inferior {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
    .com-nav-inferior { padding-bottom: 0; }
}

/* Página do time no celular/tablet: uma aba por vez (Partida, Time, Chat), com a barra de abas própria */
@media (max-width: 1023.98px) {
    .aba-oculta { display: none !important; }
    .com-abas-proprias { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* Toques no celular: sem atraso nem destaque azul */
button, a, label, summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Campos com fonte >= 16px no celular evitam o zoom automático do iOS ao focar */
@media (max-width: 767.98px) {
    input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea {
        font-size: 16px !important;
    }
}

/* Cards de mapa do veto: foto de fundo com degradê para o nome ficar legível */
.mapa-card {
    background-size: cover;
    background-position: center;
    aspect-ratio: 16 / 10;
}
.mapa-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 12, 20, 0.1) 0%, rgba(8, 12, 20, 0.85) 75%);
    border-radius: inherit;
}
.mapa-card > * { position: relative; }
.mapa-sem-foto {
    background-image: radial-gradient(circle at 30% 20%, rgba(0, 242, 254, 0.18), transparent 55%),
                      radial-gradient(circle at 80% 90%, rgba(255, 85, 0, 0.15), transparent 50%);
    background-color: #0d1322;
}

/* Inputs numéricos do placar sem as setinhas */
.sem-setas::-webkit-outer-spin-button,
.sem-setas::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sem-setas { -moz-appearance: textfield; }

/* ===== MENU DA CONTA (foto + botão na navbar) =====
   Celular: folha que sobe de baixo, como num aplicativo. Desktop: caixa sob o botão (top/right definidos pelo app.js). */
.menu-conta {
    position: fixed;
    z-index: 70;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
    animation: menu-sobe 0.18s ease-out;
}
@media (min-width: 640px) {
    .menu-conta {
        left: auto;
        bottom: auto;
        width: 20rem;
        padding-bottom: 0;
        animation: menu-desce 0.12s ease-out;
    }
}
@keyframes menu-sobe {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes menu-desce {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Abas do perfil: rolagem lateral sem barra no celular */
.abas-rolagem {
    scrollbar-width: none;
}
.abas-rolagem::-webkit-scrollbar { display: none; }

/* ===== MOLDURA DE STREAMER =====
   Anel roxo/rosa com brilho que pulsa e troca de cor (estilo Twitch). Vale para qualquer foto (.moldura-streamer no
   partials/avatar.php e no htmlAvatar do app.js). No perfil, .moldura-streamer-grande deixa o anel mais grosso. */
@keyframes streamer-brilho {
    0%, 100% { box-shadow: 0 0 0 2px #a855f7, 0 0 10px 1px rgba(168, 85, 247, 0.65); }
    50%      { box-shadow: 0 0 0 2px #ec4899, 0 0 16px 3px rgba(236, 72, 153, 0.6); }
}
@keyframes streamer-brilho-grande {
    0%, 100% { box-shadow: 0 0 0 3px #a855f7, 0 0 0 6px rgba(168, 85, 247, 0.25), 0 0 28px 6px rgba(168, 85, 247, 0.55); }
    50%      { box-shadow: 0 0 0 3px #ec4899, 0 0 0 6px rgba(236, 72, 153, 0.25), 0 0 36px 8px rgba(236, 72, 153, 0.5); }
}
.moldura-streamer {
    animation: streamer-brilho 2.6s ease-in-out infinite;
}
.moldura-streamer-grande .moldura-streamer {
    animation-name: streamer-brilho-grande;
}
/* Faixa de fundo do perfil de streamer: degradê roxo/rosa que desliza devagar */
@keyframes streamer-faixa {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.faixa-streamer {
    background: linear-gradient(110deg, #3b0764, #6d28d9, #a21caf, #db2777, #6d28d9, #3b0764);
    background-size: 300% 100%;
    animation: streamer-faixa 10s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .moldura-streamer, .faixa-streamer { animation: none; }
    .moldura-streamer { box-shadow: 0 0 0 2px #a855f7, 0 0 12px rgba(168, 85, 247, 0.6); }
}

/* ===== NATAL 2026 (codiguim) =====
   Moldura: anéis vermelho / branco / verde (bengala doce) com brilho dourado que alterna, como pisca-pisca.
   No perfil (.moldura-natal-grande) os anéis ficam mais grossos e aparece o azevinho no canto (.enfeite-moldura). */
@keyframes natal-brilho {
    0%, 100% { box-shadow: 0 0 0 2px #dc2626, 0 0 0 3px #fff, 0 0 0 5px #15803d, 0 0 12px 2px rgba(250, 204, 21, 0.55); }
    50%      { box-shadow: 0 0 0 2px #15803d, 0 0 0 3px #fff, 0 0 0 5px #dc2626, 0 0 16px 3px rgba(239, 68, 68, 0.55); }
}
@keyframes natal-brilho-grande {
    0%, 100% { box-shadow: 0 0 0 3px #dc2626, 0 0 0 5px #fff, 0 0 0 8px #15803d, 0 0 0 9px #facc15, 0 0 32px 8px rgba(250, 204, 21, 0.45); }
    50%      { box-shadow: 0 0 0 3px #15803d, 0 0 0 5px #fff, 0 0 0 8px #dc2626, 0 0 0 9px #facc15, 0 0 40px 10px rgba(239, 68, 68, 0.45); }
}
.moldura-natal { animation: natal-brilho 2.4s ease-in-out infinite; }
.moldura-natal-grande .moldura-natal { animation-name: natal-brilho-grande; }
@keyframes natal-enfeite { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.08); } }
.moldura-natal-grande .enfeite-moldura {
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    animation: natal-enfeite 2.4s ease-in-out infinite;
}

/* Banner: noite verde e vermelha com neve caindo (::before, duas camadas) e pisca-pisca no topo (::after) */
@keyframes natal-neve { from { background-position: 0 0, 40px 20px; } to { background-position: 0 160px, 40px 260px; } }
@keyframes natal-luzes { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.banner-natal {
    background:
        radial-gradient(ellipse at 15% 120%, rgba(250, 204, 21, 0.25), transparent 55%),
        radial-gradient(ellipse at 85% -20%, rgba(255, 255, 255, 0.18), transparent 50%),
        linear-gradient(115deg, #052e1f 0%, #14532d 35%, #7f1d1d 70%, #3f0a0a 100%);
}
.banner-natal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 2.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px);
    background-size: 80px 80px, 50px 65px;
    animation: natal-neve 9s linear infinite;
}
.banner-natal::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 18px;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 50% 60%, #facc15 0 3px, transparent 4px),
        radial-gradient(circle at 50% 60%, #ef4444 0 3px, transparent 4px),
        radial-gradient(circle at 50% 60%, #22c55e 0 3px, transparent 4px),
        linear-gradient(transparent 8px, rgba(0, 0, 0, 0.35) 8px 9px, transparent 9px);
    background-size: 84px 18px, 84px 18px, 84px 18px, 100% 18px;
    background-position: 0 0, 28px 0, 56px 0, 0 0;
    background-repeat: repeat-x;
    filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.8));
    animation: natal-luzes 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .moldura-natal, .moldura-natal-grande .enfeite-moldura, .banner-natal::before, .banner-natal::after { animation: none; }
    .moldura-natal { box-shadow: 0 0 0 2px #dc2626, 0 0 0 3px #fff, 0 0 0 5px #15803d; }
}

/* ===== TELA DE CARREGAMENTO =====
   Formulários com data-carregando="mensagem" (app.js): cobre a página e trava o envio até a resposta chegar */
.carregando-tela {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(3, 7, 18, 0.82);
    backdrop-filter: blur(4px);
}

/* ===== LOGO DO OPSHUB (partials/logo.php) =====
   Logo branca; por cima, uma faixa em degradê ciano/roxo/laranja recortada no formato das letras (máscara com a própria
   imagem) atravessa a logo de tempos em tempos. No hover o brilho passa de novo e a logo ganha um reflexo ciano. */
.logo-opshub { position: relative; display: inline-flex; align-items: center; isolation: isolate; transition: filter .3s ease; }
.logo-opshub img { display: block; user-select: none; -webkit-user-drag: none; }
.logo-opshub::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, #00f2fe 42%, #c084fc 50%, #ff7a33 58%, transparent 70%) no-repeat;
    background-size: 250% 100%; background-position: 130% 0;
    -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
    animation: logo-opshub-brilho 6s ease-in-out infinite; animation-delay: 1.2s;
}
a:hover > .logo-opshub, .logo-opshub:hover { filter: drop-shadow(0 0 10px rgba(0, 242, 254, .45)); }
a:hover > .logo-opshub::after { animation-duration: 1.4s; }
@keyframes logo-opshub-brilho { 0% { background-position: 130% 0; } 30%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .logo-opshub::after { animation: none; display: none; } }

/* ===== TELA DE CARREGAMENTO DA PÁGINA (partials/carregando-pagina.php, controlada pelo app.js) =====
   Mesmo motion design do banner VIP (manchas, grade, feixe e partículas) em ciano/roxo/laranja, logo do OpsHub com
   halo girando, brilho passando e linha de mira varrendo, e barra correndo. Some com fade (.tela-carregando-oculta) e volta ao sair para outra página. */
.tela-carregando {
    position: fixed; inset: 0; z-index: 120; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
    background: linear-gradient(120deg, #050b1a 0%, #140a2a 50%, #06141c 100%);
    transition: opacity .35s ease, visibility .35s ease;
}
.tela-carregando-oculta { opacity: 0; visibility: hidden; pointer-events: none; }
.tela-carregando .banner-vip-mancha-1 { background: rgba(0, 242, 254, .26); left: 10%; top: 10%; }
.tela-carregando .banner-vip-mancha-2 { background: rgba(121, 40, 202, .42); right: 15%; bottom: 10%; }
.tela-carregando .banner-vip-grade {
    background-image: linear-gradient(rgba(0, 242, 254, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 242, 254, .25) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 65%);
}
.tela-carregando .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(160, 240, 255, .1), transparent); }
.tela-carregando .banner-vip-particula { background: #67e8f9; box-shadow: 0 0 8px #00f2fe; animation: tela-carregando-particula 7s linear infinite; animation-delay: calc(var(--i) * -0.8s); }
.tela-carregando .banner-vip-particula:nth-child(even) { background: #f0abfc; box-shadow: 0 0 8px #d946ef; }
.tela-carregando .banner-vip-particula:nth-child(3n) { background: #fdba74; box-shadow: 0 0 8px #ff5500; }
.tela-carregando-logo { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 26px; animation: tela-carregando-entra .7s cubic-bezier(.2, .8, .2, 1) both; }
.tela-carregando-logo .logo-opshub { animation: tela-carregando-reflexo 2.4s ease-in-out infinite; }
.tela-carregando-logo .logo-opshub::after { animation-duration: 2.4s; animation-delay: .5s; }
/* Halo em degradê girando atrás da logo */
.tela-carregando-aura {
    position: absolute; inset: 0; border-radius: 9999px; filter: blur(26px); opacity: .55;
    background: conic-gradient(from 0deg, #ff5500, #00f2fe, #7928ca, #00f2fe, #ff5500);
    animation: tela-carregando-gira 4s linear infinite;
}
/* Linha de mira varrendo a logo de cima a baixo */
.tela-carregando-scan {
    position: absolute; left: 12px; right: 12px; top: 18px; height: 2px; border-radius: 9999px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #00f2fe, transparent); box-shadow: 0 0 12px #00f2fe;
    animation: tela-carregando-scan 1.8s ease-in-out infinite;
}
.tela-carregando-barra { width: 100%; max-width: 220px; height: 4px; border-radius: 9999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tela-carregando-barra span {
    display: block; width: 40%; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #00f2fe, #7928ca, #ff5500);
    animation: tela-carregando-barra 1.3s ease-in-out infinite;
}
#telaCarregandoTexto { transition: opacity .25s ease; }
@keyframes tela-carregando-gira { to { transform: rotate(360deg); } }
@keyframes tela-carregando-particula {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    12% { opacity: .9; }
    100% { transform: translateY(-75vh) scale(1.1); opacity: 0; }
}
@keyframes tela-carregando-entra { from { opacity: 0; transform: scale(.85); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tela-carregando-reflexo { 0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 242, 254, .25)); } 50% { filter: drop-shadow(0 0 16px rgba(0, 242, 254, .7)); } }
@keyframes tela-carregando-scan { 0%, 100% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: .9; } 50% { transform: translateY(calc(4rem + 0px)); } }
@media (min-width: 640px) { @keyframes tela-carregando-scan { 0%, 100% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: .9; } 50% { transform: translateY(5rem); } } }
@keyframes tela-carregando-barra { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
    .tela-carregando *, .tela-carregando *::before, .tela-carregando *::after { animation: none !important; }
    .tela-carregando-scan { display: none; }
    .tela-carregando .banner-vip-particula, .tela-carregando .banner-vip-feixe { display: none; }
    .tela-carregando-barra span { width: 100%; opacity: .6; }
}

/* ===== CAMPOS NATIVOS NO TEMA ESCURO =====
   Selects com a seta própria, afastada da borda e centralizada na altura; calendário do input de data claro. */
:root { color-scheme: dark; }
select:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    padding-right: 2.25rem !important;
    cursor: pointer;
}
select option { background-color: #111726; color: #e2e8f0; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; filter: invert(0.8); }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Grade de 2 colunas no celular: o último card sozinho ocupa a linha inteira (sem buraco) */
@media (max-width: 639.98px) {
    .grade-impar > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* Página do time no celular/tablet: aba Chat em tela cheia entre o topo do site e a barra de abas
   (--chat-topo e --chat-base vêm do sala.js). A página não rola por trás. */
@media (max-width: 1023.98px) {
    body.chat-tela-cheia { overflow: hidden; }
    body.chat-tela-cheia #painelChat {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--chat-topo, 69px);
        bottom: var(--chat-base, 64px);
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        z-index: 30;
        background: #0b1120;
    }
    /* Botões flutuantes (Reportar bug e Suporte) sobem para cima do campo de escrever, menores e mais discretos,
       e somem enquanto o jogador digita (chat-digitando, sala.js) */
    body.chat-tela-cheia .suporte-flutuante,
    body.chat-tela-cheia .report-flutuante { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; opacity: .75; transition: opacity .2s ease, transform .2s ease; }
    body.chat-tela-cheia .suporte-flutuante > span + span,
    body.chat-tela-cheia .report-flutuante > span + span { display: none; }
    body.chat-tela-cheia .suporte-flutuante { bottom: calc(var(--chat-base, 64px) + 4.75rem); }
    body.chat-tela-cheia .report-flutuante  { bottom: calc(var(--chat-base, 64px) + 7.75rem); }
    body.chat-tela-cheia.chat-digitando .suporte-flutuante,
    body.chat-tela-cheia.chat-digitando .report-flutuante { opacity: 0; transform: translateX(-140%); pointer-events: none; }
}

/* ===== TIPOGRAFIA: Akrobat no site todo =====
   Só três pesos são carregados: Light (300), Regular (400) e SemiBold (600). Os negritos fortes do Tailwind
   (bold/extrabold/black) ficam no SemiBold, para a escrita não ficar pesada e continuar fácil de ler. */
@font-face { font-family: 'Akrobat'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/akrobat/Akrobat-Light.woff') format('woff'); }
@font-face { font-family: 'Akrobat'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/akrobat/Akrobat-Regular.woff') format('woff'); }
@font-face { font-family: 'Akrobat'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/akrobat/Akrobat-SemiBold.woff') format('woff'); }
body { letter-spacing: 0.01em; }
.font-medium { font-weight: 400 !important; }
.font-semibold, .font-bold, .font-extrabold, .font-black { font-weight: 600 !important; }
.uppercase { letter-spacing: 0.02em; }
/* Rótulos muito pequenos: tamanho mínimo legível */
.text-\[8px\]  { font-size: 10px; }
.text-\[9px\]  { font-size: 10.5px; }
.text-\[10px\] { font-size: 11px; }
input, select, textarea, button { font-family: inherit; }

/* ===== CARDS DE MODO (home) ===== */
/* Card de modo em motion design: borda em degradê correndo na cor do modo, foto com zoom lento, feixe de luz que
   varre, partículas subindo e o ícone pulsando. Cada card fica fora de fase (--atraso) para não piscarem juntos.
   Brilho que sobe no hover só nos cards liberados (a.card-gamer). */
.card-gamer {
    isolation: isolate;
    border: 1.5px solid transparent;
    background: linear-gradient(#0b1120, #0b1120) padding-box, var(--borda-card) border-box;
    background-size: auto, 300% 300%;
    transition: transform .3s ease, box-shadow .3s ease;
    animation: card-modo-borda 7s linear infinite, card-modo-pulso 3.4s ease-in-out infinite;
    animation-delay: var(--atraso, 0s);
}
a.card-gamer:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px var(--brilho-card), 0 0 0 1px var(--brilho-card); }
.card-gamer-laranja { --borda-card: linear-gradient(120deg, #ff8a3d, rgba(255, 85, 0, .2), #ffd0a8, rgba(255, 85, 0, .2), #ff5500, #ff8a3d); --brilho-card: rgba(255, 85, 0, .45); --cor-modo: #ff8a3d; --atraso: 0s; }
.card-gamer-ciano   { --borda-card: linear-gradient(120deg, #8ffbff, rgba(0, 242, 254, .2), #e0feff, rgba(0, 242, 254, .2), #00f2fe, #8ffbff); --brilho-card: rgba(0, 242, 254, .4); --cor-modo: #67e8f9; --atraso: -1.2s; }
.card-gamer-roxo    { --borda-card: linear-gradient(120deg, #c4b5fd, rgba(121, 40, 202, .25), #fde047, rgba(121, 40, 202, .25), #a855f7, #c4b5fd); --brilho-card: rgba(168, 85, 247, .4); --cor-modo: #c4b5fd; --atraso: -2.4s; }
.card-modo-foto { animation: card-modo-zoom 16s ease-in-out infinite alternate; animation-delay: var(--atraso, 0s); }
.card-modo-feixe {
    position: absolute; top: -20%; bottom: -20%; width: 35%; left: -60%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
    transform: skewX(-20deg); animation: card-modo-feixe 6s ease-in-out infinite; animation-delay: var(--atraso, 0s);
}
.card-modo-particula {
    position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 9999px; pointer-events: none; opacity: 0;
    background: var(--cor-modo); box-shadow: 0 0 8px var(--cor-modo);
    left: calc(var(--i) * 15% + 4%);
    animation: card-modo-particula 5.5s linear infinite; animation-delay: calc(var(--i) * -0.9s);
}
.card-modo-icone { animation: card-modo-icone 3.4s ease-in-out infinite; animation-delay: var(--atraso, 0s); }
/* Campeonatos: troféu grande flutuando atrás do texto e selo de premiação com reflexo dourado */
.card-modo-trofeu { position: absolute; right: -10px; top: 12%; font-size: 120px; color: rgba(250, 204, 21, .09); pointer-events: none; animation: vip-coroa-card 6s ease-in-out infinite; }
.card-modo-premio {
    background: linear-gradient(110deg, rgba(250, 204, 21, .12) 35%, rgba(253, 224, 71, .35) 50%, rgba(250, 204, 21, .12) 65%);
    background-size: 250% 100%; animation: sala-vip-brilho 4.5s ease-in-out infinite;
}
@keyframes card-modo-borda { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }
@keyframes card-modo-pulso { 0%, 100% { box-shadow: 0 0 20px -14px var(--brilho-card); } 50% { box-shadow: 0 0 32px -10px var(--brilho-card); } }
@keyframes card-modo-zoom { from { scale: 1; } to { scale: 1.08; } }
@keyframes card-modo-feixe { 0% { left: -60%; } 55%, 100% { left: 140%; } }
@keyframes card-modo-particula {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translateY(-220px) scale(1.1); opacity: 0; }
}
@keyframes card-modo-icone { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 18px -2px var(--brilho-card); } }
@media (prefers-reduced-motion: reduce) {
    .card-gamer, .card-gamer * { animation: none !important; transition: none; }
    .card-modo-particula, .card-modo-feixe { display: none; }
}

/* ===== BANNER "VIRE ASSINANTE" (partials/banner-assinatura.php) =====
   Motion design em CSS: manchas de luz que se movem, grade, feixe que varre, coroa flutuando, partículas subindo
   e os 5 benefícios trocando um por vez (2,5 s cada, ciclo de 12,5 s). */
.banner-vip { background: linear-gradient(120deg, #0b1120 0%, #1a1405 55%, #0b1120 100%); isolation: isolate; }
.banner-vip-mancha { position: absolute; border-radius: 9999px; filter: blur(40px); z-index: -1; pointer-events: none; }
.banner-vip-mancha-1 { width: 260px; height: 260px; background: rgba(250, 204, 21, .28); top: -90px; left: -60px; animation: vip-flutua-1 9s ease-in-out infinite; }
.banner-vip-mancha-2 { width: 220px; height: 220px; background: rgba(121, 40, 202, .35); bottom: -100px; right: 10%; animation: vip-flutua-2 11s ease-in-out infinite; }
.banner-vip-grade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .18;
    background-image: linear-gradient(rgba(250, 204, 21, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(250, 204, 21, .25) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
    animation: vip-grade 14s linear infinite;
}
.banner-vip-feixe {
    position: absolute; top: -50%; bottom: -50%; width: 30%; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 236, 160, .14), transparent);
    transform: skewX(-20deg); animation: vip-feixe 5s ease-in-out infinite;
}
.banner-vip-coroa {
    position: absolute; right: 22%; top: 50%; font-size: 92px; color: rgba(250, 204, 21, .12); z-index: -1;
    transform: translateY(-50%) rotate(-12deg); animation: vip-coroa 6s ease-in-out infinite; pointer-events: none;
}
.banner-vip-particula {
    position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 9999px; z-index: -1; pointer-events: none;
    background: #fde047; box-shadow: 0 0 8px #facc15; opacity: 0;
    left: calc(var(--i) * 11%);
    animation: vip-particula 6s linear infinite; animation-delay: calc(var(--i) * -0.75s);
}
.banner-vip-beneficio { opacity: 0; transform: translateY(100%); animation: vip-beneficio 12.5s ease-in-out infinite; animation-delay: calc(var(--n) * 2.5s - 12.5s); }

@keyframes vip-flutua-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(120px, 40px); } }
@keyframes vip-flutua-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-140px, -30px); } }
@keyframes vip-grade { from { background-position: 0 0; } to { background-position: 28px 28px; } }
@keyframes vip-feixe { 0% { left: -40%; } 60%, 100% { left: 130%; } }
@keyframes vip-coroa { 0%, 100% { transform: translateY(-50%) rotate(-12deg); } 50% { transform: translateY(-62%) rotate(-6deg); } }
@keyframes vip-particula {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translateY(-190px) scale(1.1); opacity: 0; }
}
@keyframes vip-beneficio {
    0% { opacity: 0; transform: translateY(100%); }
    4%, 18% { opacity: 1; transform: translateY(0); }
    22%, 100% { opacity: 0; transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .banner-vip *, .banner-vip { animation: none !important; }
    .banner-vip-beneficio:first-child { opacity: 1; transform: none; }
}

/* ===== PÁGINA STREAMERS (paginas/streamers.php) =====
   Mesmo motion design do banner VIP, em vermelho/roxo (cor de "ao vivo"). Também é o fundo dos cards de live sem miniatura. */
.banner-streamers { background: linear-gradient(120deg, #12030a 0%, #1f0a2e 55%, #12030a 100%); isolation: isolate; }
.banner-streamers .banner-vip-mancha-1 { background: rgba(239, 68, 68, .32); }
.banner-streamers .banner-vip-mancha-2 { background: rgba(168, 85, 247, .38); }
.banner-streamers .banner-vip-grade {
    background-image: linear-gradient(rgba(248, 113, 113, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(248, 113, 113, .25) 1px, transparent 1px);
}
.banner-streamers .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(255, 180, 180, .14), transparent); }
.banner-streamers .banner-vip-coroa { color: rgba(248, 113, 113, .14); right: 10%; }
.banner-streamers .banner-vip-particula { background: #fca5a5; box-shadow: 0 0 8px #ef4444; }
.banner-streamers .banner-vip-particula:nth-child(even) { background: #d8b4fe; box-shadow: 0 0 8px #a855f7; }

/* ===== GERENCIAR CONTA (conta/index.php) ===== mesmo motion design, em ciano/roxo (cores do site), por cima do
   banner escolhido pelo jogador (#contaBannerFundo). Os painéis entram ao aparecer na tela (conta.js) */
.banner-conta { background: linear-gradient(120deg, #050b18 0%, #120a2a 55%, #050b18 100%); }
.banner-conta .banner-vip-mancha-1 { background: rgba(0, 242, 254, .24); }
.banner-conta .banner-vip-mancha-2 { background: rgba(121, 40, 202, .42); }
.banner-conta .banner-vip-grade {
    background-image: linear-gradient(rgba(0, 242, 254, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 242, 254, .25) 1px, transparent 1px);
}
.banner-conta .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(160, 250, 255, .12), transparent); }
.banner-conta .banner-vip-coroa { color: rgba(0, 242, 254, .1); right: 34%; }
.banner-conta .banner-vip-particula { background: #67e8f9; box-shadow: 0 0 8px #00f2fe; }
.banner-conta .banner-vip-particula:nth-child(even) { background: #c4b5fd; box-shadow: 0 0 8px #7928ca; }
#contaBannerFundo { transition: opacity .3s ease; }
@keyframes conta-progresso { from { background-position: 0 0; } to { background-position: 200% 0; } }
.conta-progresso { background: linear-gradient(90deg, #00f2fe, #7928ca, #00f2fe); background-size: 200% 100%; animation: conta-progresso 3s linear infinite; }
.conta-aba-ativa { background: rgba(0, 242, 254, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 242, 254, .35); }
.conta-aba-ativa i { color: #00f2fe; }
.conta-painel.revelar { opacity: 0; transform: translateY(16px); }
.conta-painel.revelado { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
    .conta-progresso { animation: none; }
    .conta-painel.revelar { opacity: 1; transform: none; }
}

/* ===== PÁGINA AMIGOS (amigos/index.php) ===== mesmo motion design, em verde/ciano */
.banner-amigos { background: linear-gradient(120deg, #04110a 0%, #071c22 55%, #04110a 100%); }
.banner-amigos .banner-vip-mancha-1 { background: rgba(34, 197, 94, .28); }
.banner-amigos .banner-vip-mancha-2 { background: rgba(0, 242, 254, .22); }
.banner-amigos .banner-vip-grade {
    background-image: linear-gradient(rgba(74, 222, 128, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 222, 128, .25) 1px, transparent 1px);
}
.banner-amigos .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(187, 247, 208, .13), transparent); }
.banner-amigos .banner-vip-coroa { color: rgba(74, 222, 128, .12); right: 40%; }
.banner-amigos .banner-vip-particula { background: #86efac; box-shadow: 0 0 8px #22c55e; }
.banner-amigos .banner-vip-particula:nth-child(even) { background: #a5f3fc; box-shadow: 0 0 8px #00f2fe; }

/* ===== PÁGINA AJUDA (paginas/ajuda.php) ===== mesmo motion design, em azul Discord/roxo */
.banner-ajuda { background: linear-gradient(120deg, #060818 0%, #12123a 55%, #060818 100%); }
.banner-ajuda .banner-vip-mancha-1 { background: rgba(88, 101, 242, .34); }
.banner-ajuda .banner-vip-mancha-2 { background: rgba(121, 40, 202, .36); }
.banner-ajuda .banner-vip-grade {
    background-image: linear-gradient(rgba(129, 140, 248, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 140, 248, .25) 1px, transparent 1px);
}
.banner-ajuda .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(199, 210, 254, .13), transparent); }
.banner-ajuda .banner-vip-coroa { color: rgba(129, 140, 248, .14); }
.banner-ajuda .banner-vip-particula { background: #a5b4fc; box-shadow: 0 0 8px #5865f2; }
.banner-ajuda .banner-vip-particula:nth-child(even) { background: #c4b5fd; box-shadow: 0 0 8px #7928ca; }

/* ===== PÁGINA PARCEIROS (paginas/parceiros.php) ===== mesmo motion design, em verde/ciano */
.banner-parceiros { background: linear-gradient(120deg, #03120d 0%, #06202a 55%, #03120d 100%); }
.banner-parceiros .banner-vip-mancha-1 { background: rgba(16, 185, 129, .3); }
.banner-parceiros .banner-vip-mancha-2 { background: rgba(0, 242, 254, .26); }
.banner-parceiros .banner-vip-grade {
    background-image: linear-gradient(rgba(52, 211, 153, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 211, 153, .25) 1px, transparent 1px);
}
.banner-parceiros .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(167, 243, 208, .14), transparent); }
.banner-parceiros .banner-vip-coroa { color: rgba(52, 211, 153, .13); }
.banner-parceiros .banner-vip-particula { background: #6ee7b7; box-shadow: 0 0 8px #10b981; }
.banner-parceiros .banner-vip-particula:nth-child(even) { background: #a5f3fc; box-shadow: 0 0 8px #00f2fe; }

/* Item "Streamers" do menu: sinal de transmissão piscando sempre (chama o clique) e, com alguém no ar, o selo
   vermelho com a quantidade pulsando */
@keyframes menu-live-onda { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes menu-live-selo { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .7); } 50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); } }
.menu-live-sinal { position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
.menu-live-sinal::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #ef4444; animation: menu-live-onda 1.4s ease-out infinite; }
.menu-live-selo { animation: menu-live-selo 1.6s ease-in-out infinite; }

/* Notificação "entrou ao vivo" (lives.js): no celular fica acima do botão de suporte; no computador, à direita */
/* (no celular fica acima dos dois botões flutuantes: Reportar bug e Suporte) */
.lives-avisos { left: 16px; right: 16px; bottom: calc(12rem + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .lives-avisos { left: auto; width: 380px; bottom: 1.25rem; } }
.com-abas-proprias .lives-avisos { bottom: calc(11.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .com-abas-proprias .lives-avisos { bottom: 1.25rem; } }

/* Aviso de cookies: acima da barra inferior no celular; no canto esquerdo no computador (os botões flutuantes ficam à direita) */
.aviso-cookies { left: 12px; right: 12px; bottom: calc(5rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .aviso-cookies { left: 20px; right: auto; bottom: 20px; width: 400px; } }

/* Botão flutuante de suporte (partials/suporte-flutuante.php): acima da barra inferior do celular */
.suporte-flutuante { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .com-nav-inferior .suporte-flutuante { bottom: 1.25rem; } }
.com-abas-proprias .suporte-flutuante { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .com-abas-proprias .suporte-flutuante { bottom: 1.25rem; } }
/* Botão "Reportar bug": logo acima do Suporte (altura do botão 3rem + 0,5rem de espaço) */
.report-flutuante { bottom: calc(8.25rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .com-nav-inferior .report-flutuante { bottom: 4.75rem; } }
.com-abas-proprias .report-flutuante { bottom: calc(8rem + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .com-abas-proprias .report-flutuante { bottom: 4.75rem; } }

/* Faixa "Ao vivo agora" da home (lives.js) e player da live dentro do site (abrirPlayerLive no app.js) */
.faixa-ao-vivo { background: linear-gradient(120deg, rgba(220, 38, 38, .14), #111726 45%, rgba(121, 40, 202, .16)); animation: live-aviso-entra .35s ease-out; }
.player-live-caixa { animation: live-aviso-entra .25s ease-out; }
@media (max-width: 639px) { .player-live-caixa { height: 100%; padding-top: env(safe-area-inset-top); } }

/* Notificação "entrou ao vivo" (lives.js) */
@keyframes live-aviso-entra { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.live-aviso { animation: live-aviso-entra .35s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .banner-streamers *, .banner-streamers, .menu-live-sinal::after, .menu-live-selo, .live-aviso { animation: none !important; }
}

/* ===== TOPO DO RESGATE DE CODIGUIM (resgatar/index.php) =====
   Mesmo motion design do banner VIP (usa as mesmas animações), em ciano/roxo/laranja e sem tema de temporada:
   manchas de luz, grade, feixe, presente flutuando, faíscas subindo e as vantagens trocando (3 × 2,5 s = 7,5 s). */
.banner-resgate { background: linear-gradient(120deg, #050b1a 0%, #140a2a 50%, #06141c 100%); isolation: isolate; }
.banner-resgate .banner-vip-mancha-1 { background: rgba(0, 242, 254, .26); }
.banner-resgate .banner-vip-mancha-2 { background: rgba(121, 40, 202, .4); }
.banner-resgate-mancha-3 {
    position: absolute; width: 180px; height: 180px; border-radius: 9999px; filter: blur(40px); z-index: -1; pointer-events: none;
    background: rgba(255, 85, 0, .22); top: -60px; right: -40px; animation: vip-flutua-2 13s ease-in-out infinite reverse;
}
.banner-resgate .banner-vip-grade {
    background-image: linear-gradient(rgba(0, 242, 254, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 242, 254, .25) 1px, transparent 1px);
}
.banner-resgate .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(160, 240, 255, .14), transparent); }
.banner-resgate .banner-vip-coroa { color: rgba(0, 242, 254, .13); right: 8%; }
.banner-resgate .banner-vip-particula { background: #67e8f9; box-shadow: 0 0 8px #00f2fe; }
.banner-resgate .banner-vip-particula:nth-child(even) { background: #f0abfc; box-shadow: 0 0 8px #d946ef; }
.banner-resgate-vantagem { opacity: 0; transform: translateY(100%); animation: resgate-vantagem 7.5s ease-in-out infinite; animation-delay: calc(var(--n) * 2.5s - 7.5s); }
@keyframes resgate-vantagem {
    0% { opacity: 0; transform: translateY(100%); }
    6%, 30% { opacity: 1; transform: translateY(0); }
    36%, 100% { opacity: 0; transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .banner-resgate *, .banner-resgate { animation: none !important; }
    .banner-resgate-vantagem:first-child { opacity: 1; transform: none; }
}

/* ===== PÁGINA DE PLANOS (paginas/planos.php) =====
   Cards com borda em degradê (como .card-gamer): Elite em ciano com brilho pulsando, Spec Ops em dourado com a borda
   girando e um reflexo passando. Botões com faixa de luz. O topo usa o .banner-vip da home. */
.plano-card {
    position: relative; isolation: isolate;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, var(--plano-fundo, #0d1322), #0a0f1b) padding-box, var(--plano-borda) border-box;
    transition: transform .3s ease, box-shadow .3s ease;
}
.plano-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -22px var(--plano-brilho), 0 0 0 1px var(--plano-brilho); }
.plano-free  { --plano-borda: linear-gradient(165deg, rgba(148, 163, 184, .5), rgba(255, 255, 255, .05) 50%, rgba(148, 163, 184, .3)); --plano-brilho: rgba(148, 163, 184, .25); }
.plano-elite {
    --plano-borda: linear-gradient(165deg, #8ffbff, rgba(0, 242, 254, .25) 35%, rgba(255, 255, 255, .06) 60%, #00f2fe);
    --plano-brilho: rgba(0, 242, 254, .45); --plano-fundo: #071a24;
    animation: plano-elite-pulso 3.2s ease-in-out infinite;
}
.plano-vip {
    --plano-borda: linear-gradient(120deg, #fde047, #a16207, #facc15, #fff7c2, #ca8a04, #fde047);
    --plano-brilho: rgba(250, 204, 21, .5); --plano-fundo: #1a1405;
    background-size: auto, 300% 300%;
    animation: plano-vip-borda 6s linear infinite, plano-vip-pulso 2.8s ease-in-out infinite;
}
.plano-vip::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: linear-gradient(110deg, transparent 35%, rgba(253, 224, 71, .14) 50%, transparent 65%);
    background-size: 250% 100%; animation: sala-vip-brilho 4.5s ease-in-out infinite;
}
/* Ícone grande do plano flutuando no canto */
.plano-icone { position: absolute; right: 18px; top: 18px; font-size: 64px; opacity: .1; z-index: -1; animation: vip-coroa-card 6s ease-in-out infinite; pointer-events: none; }
.plano-fita { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.plano-btn { position: relative; overflow: hidden; isolation: isolate; }
.plano-btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg);
    animation: plano-btn-luz 3.6s ease-in-out infinite;
}
/* Itens da lista entram um por um quando a página abre */
.plano-item { opacity: 0; animation: plano-item-entra .45s ease-out forwards; animation-delay: calc(var(--n) * 70ms + 200ms); }
@keyframes plano-elite-pulso { 0%, 100% { box-shadow: 0 0 22px -12px rgba(0, 242, 254, .5); } 50% { box-shadow: 0 0 34px -8px rgba(0, 242, 254, .45); } }
@keyframes plano-vip-borda { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }
@keyframes plano-vip-pulso { 0%, 100% { box-shadow: 0 0 24px -10px rgba(250, 204, 21, .55); } 50% { box-shadow: 0 0 40px -6px rgba(250, 204, 21, .45); } }
@keyframes vip-coroa-card { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-8px); } }
@keyframes plano-btn-luz { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes plano-item-entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* Perguntas frequentes: seta gira ao abrir */
.planos-faq[open] .planos-faq-seta { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .plano-card, .plano-card::before, .plano-icone, .plano-btn::after { animation: none !important; transition: none; }
    .plano-item { animation: none; opacity: 1; }
}

/* ===== NOTIFICAÇÕES FLUTUANTES (toast() no app.js) =====
   Canto superior direito abaixo do cabeçalho; no celular ocupam a largura (com margem). Entram deslizando da direita
   e a barrinha embaixo mostra o tempo até sumir (pausa com o mouse em cima). */
.toasts { top: calc(5rem + env(safe-area-inset-top)); left: 16px; right: 16px; }
@media (min-width: 640px) { .toasts { left: auto; right: 20px; width: 380px; } }
.toast { animation: toast-entra .3s cubic-bezier(.2, .9, .3, 1.15); }
.toast-saindo { animation: toast-sai .25s ease-in forwards; }
.toast-tempo { width: 100%; transform-origin: left; animation-name: toast-tempo; animation-timing-function: linear; animation-fill-mode: forwards; }
.toast-pausado .toast-tempo { animation-play-state: paused; }
@keyframes toast-entra { from { opacity: 0; transform: translateX(40px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-sai { to { opacity: 0; transform: translateX(40px); } }
@keyframes toast-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast-saindo { animation: none; } }

/* ===== RANKING (ranking/index.php + ranking.js) =====
   Topo com o motion design do banner VIP em roxo/dourado; pódio com borda animada (ouro girando, prata e bronze
   brilhando), cards subindo ao abrir e degraus no computador; linhas entrando uma a uma; esqueleto enquanto carrega. */
.banner-ranking { background: linear-gradient(120deg, #0d0618 0%, #1c1206 55%, #0a0c1d 100%); isolation: isolate; }
.banner-ranking .banner-vip-mancha-1 { background: rgba(121, 40, 202, .4); }
.banner-ranking .banner-vip-mancha-2 { background: rgba(250, 204, 21, .26); }
.banner-ranking .banner-vip-grade {
    background-image: linear-gradient(rgba(167, 139, 250, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, .25) 1px, transparent 1px);
}
.banner-ranking .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(221, 214, 254, .13), transparent); }
.banner-ranking .banner-vip-coroa { color: rgba(250, 204, 21, .12); right: 30%; }
.banner-ranking .banner-vip-particula { background: #fde047; box-shadow: 0 0 8px #facc15; }
.banner-ranking .banner-vip-particula:nth-child(even) { background: #c4b5fd; box-shadow: 0 0 8px #7928ca; }
.banner-ranking .banner-vip-beneficio { animation-duration: 10s; animation-delay: calc(var(--n) * 2.5s - 10s); animation-name: ranking-regra; }
@keyframes ranking-regra {
    0% { opacity: 0; transform: translateY(100%); }
    5%, 22% { opacity: 1; transform: translateY(0); }
    27%, 100% { opacity: 0; transform: translateY(-100%); }
}

.podio-card {
    position: relative; isolation: isolate;
    border: 2px solid transparent;
    background: linear-gradient(180deg, var(--podio-fundo), #0b1120 70%) padding-box, var(--podio-borda) border-box;
    background-size: auto, 300% 300%;
    box-shadow: 0 18px 40px -20px var(--podio-brilho);
    opacity: 0; animation: podio-sobe .6s cubic-bezier(.2, .9, .3, 1.2) forwards, podio-borda 6s linear infinite;
    animation-delay: var(--atraso, 0s), 0s;
    transition: filter .3s ease;
}
/* (a animação de entrada fixa o transform: o hover só clareia) */
.podio-card:hover { filter: brightness(1.12); }
.podio-1 { --podio-borda: linear-gradient(120deg, #fde047, #a16207, #facc15, #fff7c2, #ca8a04, #fde047); --podio-fundo: rgba(250, 204, 21, .16); --podio-brilho: rgba(250, 204, 21, .55); --atraso: .35s; }
.podio-2 { --podio-borda: linear-gradient(120deg, #e2e8f0, #64748b, #f8fafc, #94a3b8, #e2e8f0); --podio-fundo: rgba(203, 213, 225, .12); --podio-brilho: rgba(203, 213, 225, .35); --atraso: .15s; }
.podio-3 { --podio-borda: linear-gradient(120deg, #f59e0b, #78350f, #fbbf24, #b45309, #f59e0b); --podio-fundo: rgba(217, 119, 6, .14); --podio-brilho: rgba(217, 119, 6, .4); --atraso: .25s; }
.podio-1::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: linear-gradient(110deg, transparent 35%, rgba(253, 224, 71, .16) 50%, transparent 65%);
    background-size: 250% 100%; animation: sala-vip-brilho 4.5s ease-in-out infinite;
}
.podio-coroa { animation: podio-coroa 2.8s ease-in-out infinite; display: inline-block; filter: drop-shadow(0 0 10px rgba(250, 204, 21, .6)); }
/* Degrau embaixo do card (só no computador): 1º mais alto */
.podio-degrau { display: none; }
@media (min-width: 640px) {
    .podio-degrau {
        display: flex; align-items: center; justify-content: center; margin-top: -1px; border-radius: 0 0 14px 14px;
        font-weight: 900; font-size: 20px; color: rgba(255, 255, 255, .18);
        background: linear-gradient(180deg, var(--podio-fundo), rgba(11, 17, 32, .2));
        border: 1px solid rgba(255, 255, 255, .06); border-top: 0;
        opacity: 0; animation: podio-sobe .6s ease-out forwards; animation-delay: calc(var(--atraso, 0s) + .15s);
    }
    .podio-1 + .podio-degrau { height: 44px; }
    .podio-2 + .podio-degrau { height: 28px; }
    .podio-3 + .podio-degrau { height: 16px; }
}
.rank-linha { opacity: 0; animation: rank-linha-entra .4s ease-out forwards; animation-delay: calc(var(--n) * 40ms); }
.rank-barra { background: linear-gradient(90deg, #7928ca, #00f2fe); transform-origin: left; animation: rank-barra .9s ease-out both; animation-delay: calc(var(--n) * 40ms + .2s); }
.esqueleto { background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 75%); background-size: 200% 100%; animation: esqueleto 1.2s linear infinite; }
@keyframes podio-sobe { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes podio-borda { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }
@keyframes podio-coroa { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes rank-linha-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rank-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .banner-ranking *, .banner-ranking, .podio-card, .podio-card::before, .podio-coroa, .podio-degrau, .rank-linha, .rank-barra, .esqueleto { animation: none !important; opacity: 1; }
    .banner-ranking .banner-vip-beneficio:first-child { opacity: 1; transform: none; }
}

/* ===== ESTATÍSTICAS (estatisticas/index.php + estatisticas.js) =====
   Topo com o motion design do banner VIP em ciano/laranja (cores do jogo) e a busca dentro; depois de pesquisar o topo
   encolhe (.estat-compacto esconde [data-hero-extra]). Cards de resumo com borda em degradê entrando um a um. */
.banner-estat { background: linear-gradient(120deg, #04121c 0%, #1a0d05 55%, #070d1f 100%); isolation: isolate; }
.banner-estat .banner-vip-mancha-1 { background: rgba(0, 242, 254, .26); }
.banner-estat .banner-vip-mancha-2 { background: rgba(255, 85, 0, .26); }
.banner-estat .banner-vip-grade {
    background-image: linear-gradient(rgba(0, 242, 254, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 242, 254, .22) 1px, transparent 1px);
}
.banner-estat .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(160, 240, 255, .13), transparent); }
.banner-estat .banner-vip-coroa { color: rgba(0, 242, 254, .1); right: 6%; }
.banner-estat .banner-vip-particula { background: #67e8f9; box-shadow: 0 0 8px #00f2fe; }
.banner-estat .banner-vip-particula:nth-child(even) { background: #fdba74; box-shadow: 0 0 8px #ff5500; }
.banner-estat .banner-vip-beneficio { animation-duration: 10s; animation-delay: calc(var(--n) * 2.5s - 10s); animation-name: ranking-regra; }
.estat-compacto [data-hero-extra] { display: none; }
.estat-compacto .estat-topo-corpo { padding-top: .75rem; padding-bottom: .75rem; }
.estat-compacto .estat-titulo { font-size: 1.5rem; margin-top: 0; }
/* Celular/tablet depois da busca: só a barra de busca e os atalhos (o nick já aparece no cabeçalho do jogador) */
@media (max-width: 1023px) { .estat-compacto [data-hero-titulo] { display: none; } }
.estat-busca { box-shadow: 0 0 0 1px rgba(0, 242, 254, .25), 0 12px 30px -14px rgba(0, 242, 254, .45); }
.estat-busca:focus-within { box-shadow: 0 0 0 2px rgba(0, 242, 254, .7), 0 14px 34px -12px rgba(0, 242, 254, .55); }
.estat-tile {
    position: relative; isolation: isolate; border: 1px solid transparent;
    background: linear-gradient(180deg, rgba(17, 23, 38, .95), rgba(11, 17, 32, .95)) padding-box,
                linear-gradient(160deg, var(--tile-cor), rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .02) 60%, var(--tile-cor)) border-box;
    opacity: 0; animation: rank-linha-entra .45s ease-out forwards; animation-delay: calc(var(--n) * 60ms);
}
.estat-tile::after {
    content: ''; position: absolute; left: 20%; right: 20%; top: -1px; height: 2px; border-radius: 9999px;
    background: var(--tile-cor); filter: blur(1px); opacity: .8;
}
@media (prefers-reduced-motion: reduce) {
    .banner-estat *, .banner-estat, .estat-tile { animation: none !important; opacity: 1; }
    .banner-estat .banner-vip-beneficio:first-child { opacity: 1; transform: none; }
}

/* ===== TOPO DOS TERMOS E DA PRIVACIDADE (partials/pagina-legal.php) =====
   Mesmo motion design do banner VIP, em ciano/verde (cor de "seguro"), com o escudo flutuando. */
.banner-legal { background: linear-gradient(120deg, #04101a 0%, #071a17 55%, #0b0f22 100%); isolation: isolate; }
.banner-legal .banner-vip-mancha-1 { background: rgba(0, 242, 254, .24); }
.banner-legal .banner-vip-mancha-2 { background: rgba(0, 230, 118, .22); }
.banner-legal .banner-vip-grade {
    background-image: linear-gradient(rgba(0, 242, 254, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 242, 254, .22) 1px, transparent 1px);
}
.banner-legal .banner-vip-feixe { background: linear-gradient(90deg, transparent, rgba(160, 255, 220, .12), transparent); }
.banner-legal .banner-vip-coroa { color: rgba(0, 230, 118, .12); right: 6%; }
.banner-legal .banner-vip-particula { background: #6ee7b7; box-shadow: 0 0 8px #00e676; }
.banner-legal .banner-vip-particula:nth-child(even) { background: #67e8f9; box-shadow: 0 0 8px #00f2fe; }
/* Índice: o item da seção visível fica aceso (pagina-legal.php marca com data-ativo) */
.legal-indice a[data-ativo] { color: #fff; border-color: rgba(0, 242, 254, .5); background: rgba(0, 242, 254, .08); }
.legal-indice a[data-ativo] .legal-num { background: #00f2fe; color: #000; border-color: #00f2fe; }
@media (prefers-reduced-motion: reduce) {
    .banner-legal *, .banner-legal { animation: none !important; }
}

/* ===== CARDS DOS TIMES NO LOBBY (salas.js) =====
   Borda em degradê por tipo: Elite (ciano), VIP (dourado com brilho passando), Streamer (roxo/rosa/ciano animado e
   pulsando, como a moldura do perfil) e o seu time (verde). Faixa do topo com listras diagonais na cor do tipo. */
.sala-card {
    position: relative;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: linear-gradient(165deg, #121a2b, #0a0f1b) padding-box, var(--sala-borda, linear-gradient(#1d263b, #1d263b)) border-box;
    transition: transform .25s ease, box-shadow .25s ease;
    isolation: isolate;
}
.sala-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -16px var(--sala-brilho, rgba(0, 242, 254, .35)); }
.sala-faixa {
    background-image: repeating-linear-gradient(135deg, var(--sala-listra, rgba(255, 255, 255, .025)) 0 10px, transparent 10px 20px);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.sala-elite { --sala-borda: linear-gradient(160deg, #67e8f9, rgba(34, 211, 238, .2) 40%, rgba(255, 255, 255, .05) 60%, #22d3ee); --sala-brilho: rgba(34, 211, 238, .4); --sala-listra: rgba(34, 211, 238, .07); }
.sala-vip {
    --sala-borda: linear-gradient(160deg, #fde047, rgba(250, 204, 21, .25) 40%, rgba(255, 255, 255, .05) 60%, #facc15);
    --sala-brilho: rgba(250, 204, 21, .45); --sala-listra: rgba(250, 204, 21, .08);
    box-shadow: 0 0 24px -12px rgba(250, 204, 21, .6);
}
.sala-vip::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    background: linear-gradient(110deg, transparent 35%, rgba(253, 224, 71, .12) 50%, transparent 65%);
    background-size: 250% 100%; animation: sala-vip-brilho 4.5s ease-in-out infinite;
}
.sala-streamer {
    --sala-borda: linear-gradient(120deg, #a855f7, #ec4899, #22d3ee, #a855f7, #ec4899);
    --sala-brilho: rgba(236, 72, 153, .45); --sala-listra: rgba(168, 85, 247, .09);
    background-size: auto, 300% 300%;
    animation: sala-streamer-borda 6s linear infinite, sala-streamer-pulso 2.6s ease-in-out infinite;
}
.sala-minha { --sala-borda: linear-gradient(160deg, #00e676, rgba(0, 230, 118, .2) 45%, rgba(255, 255, 255, .05) 60%, #00e676); --sala-brilho: rgba(0, 230, 118, .35); --sala-listra: rgba(0, 230, 118, .07); }
@keyframes sala-vip-brilho { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
@keyframes sala-streamer-borda { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }
@keyframes sala-streamer-pulso { 0%, 100% { box-shadow: 0 0 18px -8px rgba(168, 85, 247, .6); } 50% { box-shadow: 0 0 30px -6px rgba(236, 72, 153, .55); } }
/* Vagas do time: uma barrinha por jogador (cheia = entrou, verde = pronto) */
.sala-vaga { height: 6px; flex: 1; border-radius: 9999px; background: #1d263b; }
.sala-vaga-ocupada { background: linear-gradient(90deg, #00b8d4, #00f2fe); }
.sala-vaga-pronta { background: linear-gradient(90deg, #00c853, #00e676); box-shadow: 0 0 6px rgba(0, 230, 118, .5); }
@media (prefers-reduced-motion: reduce) {
    .sala-card, .sala-vip::before, .sala-streamer { animation: none !important; transition: none; }
}

/* ===== PAINEL ADMIN NO CELULAR/TABLET: topo + barra inferior + folha "Mais" (layouts/admin.php) ===== */
.topo-painel { padding-top: env(safe-area-inset-top); height: calc(3.5rem + env(safe-area-inset-top)); }
.barra-painel { padding-bottom: env(safe-area-inset-bottom); }
.menu-painel {
    position: fixed;
    z-index: 70;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
    animation: menu-sobe 0.18s ease-out;
}
@media (max-width: 1023.98px) {
    .com-barra-painel { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
    /* Área de toque de app: nada de botão ou campo menor que 44px */
    .painel-admin main button,
    .painel-admin main select,
    .painel-admin main textarea,
    .painel-admin main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    .painel-admin main label.h-9,
    .painel-admin main a.h-8,
    .painel-admin main a.h-9,
    .painel-admin main a.h-10 { min-height: 44px; }
    .painel-admin main input[type="checkbox"] { width: 18px; height: 18px; }
}

/* Tabela do painel que vira cartões no celular: cada <td data-rotulo="..."> é uma linha "rótulo: valor".
   .celula-cheia ocupa a linha toda, sem rótulo (ações, lista vazia); .celula-titulo sobe para o topo do cartão. */
@media (max-width: 767.98px) {
    .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
    .tabela-cartoes thead { display: none; }
    .tabela-cartoes tr { display: flex; flex-direction: column; padding: .75rem 1rem; white-space: normal; }
    .tabela-cartoes td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .25rem 0;
        text-align: right;
        font-size: .8125rem;
    }
    .tabela-cartoes td[data-rotulo]::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        color: #9ca3af;
        font-weight: 400;
    }
    .tabela-cartoes td.celula-cheia { display: block; text-align: left; }
    .tabela-cartoes td.celula-titulo { order: -1; padding-bottom: .5rem; }
}

/* Barra de servidores no topo do site: sem caber em linha, a faixa inteira vira o botão que abre a grade */
.barra-servidores.compacta button::after { content: ''; position: absolute; inset: 0; }
@media (pointer: coarse) {
    .barra-servidores.compacta button { min-height: 44px; }
}

/* Contador do painel (partidas para aprovar). Altura fixa e largura mínima igual: com 1 dígito é um círculo perfeito,
   com mais dígitos vira pílula. O line-height zerado impede que ele herde a altura da linha onde está. */
.contador-alerta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 20px;
    min-width: 20px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #ff5500;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}
/* Sobre o ícone da barra inferior: o contorno na cor do fundo separa a bolinha do ícone */
.contador-alerta-icone {
    position: absolute;
    top: -8px;
    left: 12px;
    box-shadow: 0 0 0 2px #080c14;
}

/* Sons do site (sons.js): chave liga/desliga e aviso de que o áudio ainda precisa de um primeiro toque */
.som-chave {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 9999px;
    background: #1d263b;
    transition: background .15s ease;
}
.som-chave::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: #fff;
    transition: transform .15s ease;
}
[data-ligado="1"] .som-chave { background: #00e676; }
[data-ligado="1"] .som-chave::after { transform: translateX(16px); }
[data-som-aviso][data-ligado="0"] { color: #6b7280; }
.som-aguardando { color: #fcd34d !important; border-color: rgba(252, 211, 77, .6) !important; animation: som-aguardando 1.6s ease-in-out infinite; }
@keyframes som-aguardando { 50% { box-shadow: 0 0 0 4px rgba(252, 211, 77, .18); } }
@media (prefers-reduced-motion: reduce) { .som-aguardando { animation: none; } }

/* REPUTAÇÃO DO JOGADOR: a cor vem da categoria (data-tom) e pinta anel, borda e texto de uma vez só */
.rep { --rep: #6b7280; }
.rep[data-tom="excelente"] { --rep: #00e676; }
.rep[data-tom="bom"]       { --rep: #a3e635; }
.rep[data-tom="regular"]   { --rep: #facc15; }
.rep[data-tom="ruim"]      { --rep: #fb923c; }
.rep[data-tom="pessimo"]   { --rep: #f87171; }
section.rep { border: 1px solid color-mix(in srgb, var(--rep) 40%, transparent); }
.rep-cor { color: var(--rep); }
.rep-anel {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 9999px;
    background: conic-gradient(var(--rep) calc(var(--pct, 0) * 1%), #1d263b 0);
}
.rep-anel::before { content: ''; position: absolute; inset: 8px; border-radius: 9999px; background: #0b1120; }
.rep-anel-texto { position: relative; color: var(--rep); font-size: 26px; font-weight: 900; line-height: 1; }
.rep-anel-texto small { font-size: 12px; font-weight: 700; margin-left: 1px; }
.rep-anel-pequeno { width: 52px; height: 52px; }
.rep-anel-pequeno::before { inset: 5px; }
.rep-anel-pequeno .rep-anel-texto { font-size: 15px; }
.rep-anel-pequeno .rep-anel-texto small { font-size: 9px; }
.rep-barra { display: flex; gap: 2px; height: 8px; border-radius: 9999px; overflow: hidden; background: #1d263b; }
.rep-barra span[style*="width: 0%"], .rep-barra span[style*="width:0%"] { display: none; }
.rep-selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--rep) 50%, transparent);
    background: color-mix(in srgb, var(--rep) 14%, #0b1120);
    color: var(--rep);
    font-weight: 800;
}
/* Tela de avaliar: marca na lateral quem já foi avaliado */
.linha-avaliacao[data-voto="LIKE"] { box-shadow: inset 3px 0 0 #00e676; }
.linha-avaliacao[data-voto="DESLIKE"] { box-shadow: inset 3px 0 0 #f87171; }