/* ==========================================================================
   TEMA — Design system do Magnata (mobile-first, estética de jogo)
   Usado por: extrato, estatísticas, objetivos, leilão. Base para o futuro banco.php.
   Fontes: Fredoka (títulos/números) + Nunito (texto) — carregadas no <head>.
   ========================================================================== */

/* ---------- Tema 1: NOITE (padrão) — roxo profundo + dourado ---------- */
:root {
    --bg: #120d2b;
    --bg-2: #1b1442;
    --card: #231a52;
    --card-2: #2c2266;
    --card-borda: rgba(255, 255, 255, .08);
    --texto: #f5f2ff;
    --texto-2: #b7add9;
    --texto-3: #8378b0;

    --sutil: rgba(0, 0, 0, .25);          /* fundo de campos/áreas internas */
    --linha: rgba(255, 255, 255, .08);    /* trilhas, divisórias */
    --barra: rgba(18, 13, 43, .94);       /* topo e navegação */
    --barra-2: rgba(18, 13, 43, .82);
    --tecla-1: #3a2f7a;                   /* botões secundários / teclado */
    --tecla-2: #2c2266;
    --tecla-sombra: #17113a;
    --hero: linear-gradient(135deg, #5b21b6, #3a1c8f 55%, #251766);
    --hero-sombra: rgba(91, 33, 182, .45);
    --hero-missao: linear-gradient(160deg, #3a1c8f, #231a52 70%);
    --brilho-1: rgba(123, 47, 247, .35);
    --brilho-2: rgba(67, 97, 238, .25);
    --aviso-texto: #ffe7a3;
    --grafico-texto: #b7add9;
    --grafico-grade: rgba(255, 255, 255, .06);
    /* notificações e modais (assets/css/notificacoes.css) */
    --toast-bg: #2c2266;
    --toast-texto: #f5f2ff;
    --toast-borda: rgba(255, 255, 255, .16);
    --modal-bg: linear-gradient(180deg, #2c2266, #1b1442);
    --modal-texto: #f5f2ff;
    --modal-texto-2: #b7add9;
    --modal-destaque: #ffc83d;
    --modal-botao: #3a2f7a;
    --modal-botao-sombra: #17113a;
    --modal-trilha: rgba(255, 255, 255, .12);

    --ouro: #ffc83d;
    --texto-ouro: #ffc83d;               /* texto em dourado (no Clássico fica mais escuro para ler) */
    --ouro-2: #ff9f1c;
    --verde: #2ee59d;
    --verde-2: #10b981;
    --vermelho: #ff5c7a;
    --vermelho-2: #e11d48;
    --azul: #4cc9f0;
    --azul-2: #4361ee;
    --roxo: #a06cff;
    --roxo-2: #7b2ff7;

    /* Forma */
    --raio: 20px;
    --raio-sm: 14px;
    --raio-pill: 999px;
    --sombra: 0 10px 30px rgba(0, 0, 0, .35);
    --brilho-ouro: 0 0 0 1px rgba(255, 200, 61, .35), 0 8px 28px rgba(255, 159, 28, .25);

    /* Espaço / áreas seguras (notch iOS, barra de gestos Android) */
    --gutter: 16px;
    --topo-h: 60px;
    --nav-h: 62px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --fonte-titulo: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --fonte: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Tema 2: CASSINO — feltro verde de mesa + dourado ---------- */
html[data-tema="cassino"] {
    --bg: #07261b;
    --bg-2: #0b3324;
    --card: #0f3b2b;
    --card-2: #154a36;
    --card-borda: rgba(255, 215, 120, .12);
    --texto: #f1fbf5;
    --texto-2: #a8cdb9;
    --texto-3: #6f9a83;
    --sutil: rgba(0, 0, 0, .28);
    --linha: rgba(255, 255, 255, .08);
    --barra: rgba(5, 30, 21, .95);
    --barra-2: rgba(5, 30, 21, .85);
    --tecla-1: #1d5a43;
    --tecla-2: #154a36;
    --tecla-sombra: #062016;
    --hero: linear-gradient(135deg, #0f6b49, #0a4a33 55%, #063322);
    --hero-sombra: rgba(6, 95, 70, .5);
    --hero-missao: linear-gradient(160deg, #0f6b49, #0f3b2b 70%);
    --brilho-1: rgba(16, 185, 129, .22);
    --brilho-2: rgba(255, 200, 61, .10);
    --roxo: #e0b23c; --roxo-2: #b8860b;   /* botão "roxo" vira dourado-velho */
    --grafico-texto: #a8cdb9;
    --toast-bg: #123f2e;
    --toast-borda: rgba(255, 215, 120, .22);
    --modal-bg: linear-gradient(180deg, #154a36, #0b3324);
    --modal-texto-2: #a8cdb9;
    --modal-botao: #1d5a43;
    --modal-botao-sombra: #062016;
}

/* ---------- Tema 4: NEON — arcade: preto com rosa e ciano ---------- */
html[data-tema="neon"] {
    --bg: #07071a; --bg-2: #0d0c26; --card: #14123a; --card-2: #1c1950;
    --card-borda: rgba(0, 240, 255, .16);
    --texto: #f4f6ff; --texto-2: #a9b2e8; --texto-3: #6f78b3;
    --sutil: rgba(0, 0, 0, .35); --linha: rgba(0, 240, 255, .1);
    --barra: rgba(7, 7, 26, .95); --barra-2: rgba(7, 7, 26, .85);
    --tecla-1: #2a2470; --tecla-2: #1c1950; --tecla-sombra: #05041a;
    --hero: linear-gradient(135deg, #ff2fd6, #7c3aed 50%, #00b8d9);
    --hero-sombra: rgba(255, 47, 214, .4);
    --hero-missao: linear-gradient(160deg, #3b1a8f, #14123a 70%);
    --brilho-1: rgba(255, 47, 214, .28); --brilho-2: rgba(0, 240, 255, .2);
    --roxo: #ff2fd6; --roxo-2: #c026d3; --azul: #00f0ff; --azul-2: #0891b2;
    --grafico-texto: #a9b2e8; --grafico-grade: rgba(0, 240, 255, .08);
    --toast-bg: #1c1950; --toast-borda: rgba(0, 240, 255, .3);
    --modal-bg: linear-gradient(180deg, #1c1950, #0d0c26); --modal-texto-2: #a9b2e8;
    --modal-botao: #2a2470; --modal-botao-sombra: #05041a;
}

/* ---------- Tema 5: VULCÃO — rocha escura com lava vermelha e laranja ---------- */
html[data-tema="vulcao"] {
    --bg: #160705; --bg-2: #210b07; --card: #2c110b; --card-2: #3a170f;
    --card-borda: rgba(255, 120, 60, .16);
    --texto: #fff4ee; --texto-2: #e0b3a1; --texto-3: #a87563;
    --sutil: rgba(0, 0, 0, .32); --linha: rgba(255, 140, 80, .1);
    --barra: rgba(22, 7, 5, .95); --barra-2: rgba(22, 7, 5, .85);
    --tecla-1: #5a2414; --tecla-2: #3a170f; --tecla-sombra: #120403;
    --hero: linear-gradient(135deg, #dc2626, #ea580c 50%, #7c1d0b);
    --hero-sombra: rgba(234, 88, 12, .45);
    --hero-missao: linear-gradient(160deg, #7c1d0b, #2c110b 70%);
    --brilho-1: rgba(239, 68, 68, .28); --brilho-2: rgba(251, 146, 60, .18);
    --roxo: #f97316; --roxo-2: #c2410c;
    --grafico-texto: #e0b3a1; --grafico-grade: rgba(255, 140, 80, .08);
    --toast-bg: #3a170f; --toast-borda: rgba(255, 140, 80, .3);
    --modal-bg: linear-gradient(180deg, #3a170f, #210b07); --modal-texto-2: #e0b3a1;
    --modal-botao: #5a2414; --modal-botao-sombra: #120403;
}

/* ---------- Tema 6: OCEANO — azul profundo com turquesa ---------- */
html[data-tema="oceano"] {
    --bg: #031628; --bg-2: #062038; --card: #0a2b4a; --card-2: #0f375c;
    --card-borda: rgba(94, 234, 212, .14);
    --texto: #effbff; --texto-2: #9cc7dd; --texto-3: #6693ad;
    --sutil: rgba(0, 0, 0, .3); --linha: rgba(94, 234, 212, .1);
    --barra: rgba(3, 22, 40, .95); --barra-2: rgba(3, 22, 40, .85);
    --tecla-1: #134a78; --tecla-2: #0f375c; --tecla-sombra: #020c18;
    --hero: linear-gradient(135deg, #0ea5e9, #0369a1 50%, #0f766e);
    --hero-sombra: rgba(14, 165, 233, .4);
    --hero-missao: linear-gradient(160deg, #075985, #0a2b4a 70%);
    --brilho-1: rgba(14, 165, 233, .28); --brilho-2: rgba(45, 212, 191, .2);
    --roxo: #2dd4bf; --roxo-2: #0d9488;
    --grafico-texto: #9cc7dd; --grafico-grade: rgba(94, 234, 212, .08);
    --toast-bg: #0f375c; --toast-borda: rgba(94, 234, 212, .3);
    --modal-bg: linear-gradient(180deg, #0f375c, #062038); --modal-texto-2: #9cc7dd;
    --modal-botao: #134a78; --modal-botao-sombra: #020c18;
}

/* ---------- Tema 3: CLÁSSICO — papel do tabuleiro, claro, vermelho e azul ---------- */
html[data-tema="classico"] {
    --bg: #f3ead6;
    --bg-2: #efe3c8;
    --card: #fffaf0;
    --card-2: #ffffff;
    --card-borda: rgba(42, 33, 64, .10);
    --texto: #241b38;
    --texto-2: #5f5476;
    --texto-3: #8d84a3;
    --sutil: rgba(42, 33, 64, .06);
    --linha: rgba(42, 33, 64, .10);
    --barra: rgba(255, 250, 240, .95);
    --barra-2: rgba(255, 250, 240, .88);
    --tecla-1: #ffffff;
    --tecla-2: #f4ead3;
    --tecla-sombra: #cdbd98;
    --hero: linear-gradient(135deg, #d7263d, #b51d34 55%, #8e1528);
    --hero-sombra: rgba(181, 29, 52, .35);
    --hero-missao: linear-gradient(160deg, #1d4ed8, #1e3a8a 70%);
    --brilho-1: rgba(215, 38, 61, .10);
    --brilho-2: rgba(29, 78, 216, .08);
    --sombra: 0 8px 22px rgba(80, 60, 20, .14);
    --ouro: #e8a400; --ouro-2: #d97706;
    --texto-ouro: #9a5800;   /* âmbar escuro: dourado legível sobre o papel claro */
    --verde: #0e9f6e; --verde-2: #057a55;
    --vermelho: #d7263d; --vermelho-2: #b51d34;
    --azul: #1d6fd8; --azul-2: #1e40af;
    --roxo: #1d6fd8; --roxo-2: #1e40af;
    --aviso-texto: #7a4b00;
    --grafico-texto: #5f5476;
    --grafico-grade: rgba(42, 33, 64, .08);
    --toast-bg: #ffffff;
    --toast-texto: #241b38;
    --toast-borda: rgba(42, 33, 64, .14);
    --modal-bg: linear-gradient(180deg, #fffaf0, #f3ead6);
    --modal-texto: #241b38;
    --modal-texto-2: #5f5476;
    --modal-destaque: #b51d34;
    --modal-botao: #ffffff;
    --modal-botao-sombra: #cdbd98;
    --modal-trilha: rgba(42, 33, 64, .1);
}
/* No tema claro, textos sobre o card-herói (vermelho/azul) continuam brancos */
html[data-tema="classico"] .card-saldo,
html[data-tema="classico"] .missao { color: #fff; }
html[data-tema="classico"] .missao p { color: rgba(255, 255, 255, .85); }
html[data-tema="classico"] .missao .requisitos li { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); }
html[data-tema="classico"] .card-saldo .t-entrada { color: #b9f6d6; }
html[data-tema="classico"] .card-saldo .t-saida { color: #ffd1d8; }
html[data-tema="classico"] .card-saldo .selo { background: rgba(255, 255, 255, .92); color: #0e7a52; }
html[data-tema="classico"] .tecla.mult, html[data-tema="classico"] .btn-ouro { color: #3b2400; }
html[data-tema="classico"] .aviso:not(.toast) { background: rgba(232, 164, 0, .14); border-color: rgba(232, 164, 0, .4); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }

/* App instalado (tela de início): a área atrás do relógio e da barrinha do iPhone fica com a cor do app,
   e o menu de baixo encosta mais no fim da tela (a barrinha pode ficar por cima do fundo do menu, não dos botões). */
/* Valor fixo (não env()): no app instalado o iOS informa a área da barrinha só depois de desenhar a página,
   e o menu "subia e descia" a cada troca de aba. */
@media (display-mode: standalone) {
    /* iOS com barra translúcida: a altura "100%" não conta a faixa do relógio, então em página curta
       (ex.: Leilão sem títulos) o fim da página ficava antes do fim da tela e o menu subia. */
    html { min-height: calc(100% + env(safe-area-inset-top, 0px)); }
    body.tema { min-height: calc(100vh + env(safe-area-inset-top, 0px)); min-height: calc(100dvh + env(safe-area-inset-top, 0px)); }
    .tema { --safe-bottom-app: 6px; }   /* menu bem embaixo; a barrinha do iPhone fica sobre o fundo dele */
    .nav-inferior { padding-bottom: var(--safe-bottom-app); }
    body.tema { padding-bottom: calc(var(--nav-h) + var(--safe-bottom-app) + 16px); }
    body.tema.tela-carteira .carteira-app {   /* mais específico que o carteira.css (carregado depois) */
        height: calc(100dvh - var(--topo-h) - var(--safe-top) - var(--nav-h) - var(--safe-bottom-app));
    }
}

body.tema {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.4;
    color: var(--texto);
    background:
        radial-gradient(1200px 600px at 110% -10%, var(--brilho-1), transparent 60%),
        radial-gradient(900px 500px at -20% 110%, var(--brilho-2), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
}
body.tema.sem-nav { padding-bottom: calc(var(--safe-bottom) + 16px); }

.tema h1, .tema h2, .tema h3, .tema .numero {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    letter-spacing: .2px;
    margin: 0;
}
.tema .numero { font-variant-numeric: tabular-nums; }
.tema [hidden] { display: none !important; }
/* :where() = especificidade zero, para não sobrescrever cor/fonte de .btn, .tecla, .chip etc. */
:where(.tema) :where(button) { font: inherit; color: inherit; }
:where(.tema) :where(a) { color: inherit; }

/* ---------- Layout ---------- */
.app {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.secao { margin: 20px 0; }
.secao-titulo {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600;
    color: var(--texto); margin: 0 0 10px;
}
.secao-titulo small { font-family: var(--fonte); font-size: 13px; color: var(--texto-3); font-weight: 600; }

/* ---------- Barra superior ---------- */
.topo {
    position: sticky; top: 0; z-index: 20;
    padding-top: var(--safe-top);
    background: linear-gradient(180deg, var(--barra), var(--barra-2));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--card-borda);
}
.topo-conteudo {
    height: var(--topo-h);
    max-width: 560px; margin: 0 auto; padding: 0 var(--gutter);
    display: flex; align-items: center; gap: 10px;
}
.topo h1 { font-size: 20px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo h1 i { color: var(--texto-ouro); margin-right: 6px; }
.btn-icone {
    width: 44px; height: 44px; flex: none;
    display: inline-grid; place-items: center;
    border-radius: 14px; border: 1px solid var(--card-borda);
    background: var(--card); color: var(--texto);
    font-size: 18px; cursor: pointer; text-decoration: none;
}
.btn-icone:active { transform: scale(.94); }

/* Menu ⋮ do topo (ações raras) */
.menu-topo { position: relative; flex: none; }
.menu-topo summary { list-style: none; }
.menu-topo summary::-webkit-details-marker { display: none; }
.menu-topo-itens {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px;
    padding: 6px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-borda); box-shadow: var(--sombra);
}
.menu-topo-itens form { margin: 0; }
.menu-topo-itens button, .menu-topo-itens a {
    width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
    border: 0; border-radius: 12px; background: none; cursor: pointer; text-decoration: none; text-align: left;
    font: 800 15px var(--fonte); color: var(--texto);
}
.menu-topo-itens button:hover, .menu-topo-itens a:hover { background: var(--sutil); }
.menu-topo-itens .perigo { color: var(--vermelho); }
.menu-topo-itens { min-width: 230px; }
.menu-rotulo { margin: 6px 10px 4px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-3); display: flex; gap: 6px; align-items: center; }
.menu-temas { display: grid; gap: 2px; }
.menu-tema { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-weight: 800; }
.menu-tema:hover { background: var(--sutil); }
.menu-tema input { position: absolute; opacity: 0; pointer-events: none; }
.menu-tema .tema-amostra { display: flex; }
.menu-tema .tema-amostra i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--card-2); margin-left: -5px; }
.menu-tema .tema-amostra i:first-child { margin-left: 0; }
.menu-tema-nome { flex: 1; }
.menu-tema-ok { color: var(--verde); visibility: hidden; }
.menu-tema:has(input:checked) { background: var(--sutil); }
.menu-tema:has(input:checked) .menu-tema-ok { visibility: visible; }
.menu-tema:has(input:focus-visible) { outline: 3px solid var(--azul); }
.menu-divisor { height: 1px; margin: 6px 4px; background: var(--linha); }

.chip-jogador {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 45%; padding: 6px 12px 6px 6px;
    border-radius: var(--raio-pill);
    background: var(--card); border: 1px solid var(--card-borda);
    font-weight: 700; font-size: 14px;
}
.chip-jogador span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
    width: 32px; height: 32px; flex: none;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--ouro), var(--ouro-2));
    color: #3b2400; font-size: 14px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
}
.avatar.grande { width: 44px; height: 44px; font-size: 18px; }

/* Modo privado (olhinho fechado): saldo, poupança e missão ficam ilegíveis para quem olha a tela */
.modo-privado [data-privado] { filter: blur(8px); user-select: none; -webkit-user-select: none; transition: filter .2s; }

/* Cor do peão (estilo Ludo) — vale para .avatar e .destino-avatar */
[data-cor] { --peao: var(--ouro); }
[data-cor="vermelho"] { --peao: #e53935; --peao-2: #b71c1c; --peao-icone: #fff; }
[data-cor="azul"]     { --peao: #1e88e5; --peao-2: #0d47a1; --peao-icone: #fff; }
[data-cor="verde"]    { --peao: #43a047; --peao-2: #1b5e20; --peao-icone: #fff; }
[data-cor="amarelo"]  { --peao: #fdd835; --peao-2: #f9a825; --peao-icone: #3b2400; }
[data-cor="laranja"]  { --peao: #fb8c00; --peao-2: #e65100; --peao-icone: #fff; }
[data-cor="roxo"]     { --peao: #8e24aa; --peao-2: #4a148c; --peao-icone: #fff; }
.avatar[data-cor], .destino-avatar[data-cor] {
    background: linear-gradient(145deg, var(--peao), var(--peao-2));
    color: var(--peao-icone);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 0 2px rgba(255, 255, 255, .15);
}

/* ---------- Cards ---------- */
.card {
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--card-borda);
    border-radius: var(--raio);
    padding: 16px;
    box-shadow: var(--sombra);
}
.card + .card { margin-top: 12px; }
.card-titulo { font-family: var(--fonte-titulo); font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.card-titulo i { color: var(--texto-ouro); }

/* Card "herói" de saldo */
.card-saldo {
    position: relative; overflow: hidden;
    border-radius: 24px; padding: 20px;
    background:
        radial-gradient(240px 160px at 100% 0%, rgba(255, 200, 61, .35), transparent 70%),
        var(--hero);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 16px 40px var(--hero-sombra);
}
.card-saldo::after { /* moeda decorativa */
    content: '\f51e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: -14px; bottom: -26px;
    font-size: 120px; color: rgba(255, 255, 255, .06); transform: rotate(-18deg);
    pointer-events: none;
}
.saldo-rotulo { font-size: 14px; color: rgba(255, 255, 255, .78); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.saldo-valor { font-family: var(--fonte-titulo); font-size: clamp(30px, 9vw, 40px); font-weight: 700; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
.saldo-valor.oculto { letter-spacing: 4px; }
.btn-olho { background: none; border: 0; color: inherit; padding: 6px; margin: -6px; cursor: pointer; font-size: 16px; opacity: .85; }
.saldo-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.saldo-resumo div { background: rgba(0, 0, 0, .22); border-radius: var(--raio-sm); padding: 10px 12px; }
.saldo-resumo small { display: block; font-size: 12px; color: rgba(255, 255, 255, .7); font-weight: 700; }
.saldo-resumo strong { font-family: var(--fonte-titulo); font-size: 17px; font-variant-numeric: tabular-nums; }

/* ---------- Botões (3D "de jogo") ---------- */
.btn {
    --c1: var(--roxo); --c2: var(--roxo-2); --cs: #4c1d95;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 18px;
    border: 0; border-radius: 16px;
    background: linear-gradient(180deg, var(--c1), var(--c2));
    color: #fff; font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600;
    text-decoration: none; cursor: pointer; user-select: none;
    box-shadow: 0 5px 0 var(--cs), 0 10px 20px rgba(0, 0, 0, .3);
    transition: transform .08s, box-shadow .08s, filter .2s;
    touch-action: manipulation;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cs), 0 4px 10px rgba(0, 0, 0, .3); }
.btn:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; transform: none; }
.btn-bloco { width: 100%; }
.btn-ouro { --c1: #ffd45c; --c2: var(--ouro-2); --cs: #b45309; color: #3b2400; }
.btn-verde { --c1: #4ff0b0; --c2: var(--verde-2); --cs: #047857; color: #032b1d; }
.btn-vermelho { --c1: #ff7d95; --c2: var(--vermelho-2); --cs: #9f1239; }
.btn-azul { --c1: #6fd6f5; --c2: var(--azul-2); --cs: #1e3a8a; }
.btn-sec { --c1: var(--tecla-1); --c2: var(--tecla-2); --cs: var(--tecla-sombra); color: var(--texto); }
.btn-peq { min-height: 40px; font-size: 15px; padding: 0 14px; border-radius: 12px; }
.linha-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Abas / chips ---------- */
.abas {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    padding: 4px; border-radius: 16px;
    background: rgba(0, 0, 0, .25); border: 1px solid var(--card-borda);
}
.aba {
    min-height: 42px; border: 0; border-radius: 12px; background: transparent;
    color: var(--texto-2); font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; cursor: pointer;
}
.aba.ativa { background: linear-gradient(180deg, var(--card-2), var(--tecla-1)); color: var(--texto); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.aba i { margin-right: 6px; }

.chips {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex: none; min-height: 38px; padding: 0 14px;
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--raio-pill); border: 1px solid var(--card-borda);
    background: var(--card); color: var(--texto-2);
    font-weight: 800; font-size: 14px; cursor: pointer;
}
.chip.ativo { background: var(--ouro); color: #3b2400; border-color: transparent; }

/* ---------- Filtros (extrato): direção em linha + tipos em grade, tudo visível ---------- */
.filtros { display: grid; gap: 10px; margin: 14px 0; }
.filtro-direcao {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
    border-radius: 14px; background: var(--sutil); border: 1px solid var(--card-borda);
}
.filtro {
    min-height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
    color: var(--texto-2); font-weight: 800; font-size: 14px;
}
.filtro.ativo { background: var(--card-2); color: var(--texto); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.filtro-tipo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tipo {
    min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border-radius: 16px; border: 1px solid var(--card-borda); background: var(--card); cursor: pointer;
    color: var(--texto-2); font-weight: 800; font-size: 13px;
}
.tipo i { font-size: 18px; }
.tipo { font-size: 12px; padding: 0 2px; min-width: 0; }
.tipo span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tipo.ativo { border-color: transparent; background: linear-gradient(180deg, #ffd45c, var(--ouro-2)); color: #3b2400; box-shadow: 0 4px 0 #b45309; }

/* ---------- Campos ---------- */
.campo {
    width: 100%; min-height: 50px; padding: 0 14px;
    border-radius: 14px; border: 1px solid var(--card-borda);
    background: rgba(0, 0, 0, .25); color: var(--texto);
    font: 600 16px var(--fonte); /* 16px: iOS não dá zoom */
    outline: none;
}
.campo:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(255, 200, 61, .2); }
.campo::placeholder { color: var(--texto-3); }
.campo-busca { position: relative; }
.campo-busca i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }
.campo-busca .campo { padding-left: 40px; }

/* ---------- Lista de movimentações (extrato) ---------- */
.dia-rotulo { font-size: 13px; font-weight: 800; color: var(--texto-3); text-transform: uppercase; letter-spacing: .6px; margin: 18px 4px 8px; }
.lista { list-style: none; margin: 0; padding: 0; }
.mov {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 16px;
    background: var(--card); border: 1px solid var(--card-borda);
}
.mov + .mov { margin-top: 8px; }
.mov-icone {
    width: 44px; height: 44px; flex: none;
    display: grid; place-items: center; border-radius: 14px; font-size: 18px;
    background: var(--linha);
}
.mov-texto { flex: 1; min-width: 0; }
.mov-titulo { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-detalhe { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-valor { text-align: right; flex: none; }
.mov-valor strong { display: block; font-family: var(--fonte-titulo); font-size: 16px; font-variant-numeric: tabular-nums; }
.mov-valor small { font-size: 12px; color: var(--texto-3); font-weight: 700; }

.t-entrada { color: var(--verde); }
.t-saida { color: var(--vermelho); }
.t-pix { color: var(--azul); }
.t-ouro { color: var(--texto-ouro); }
.bg-entrada { background: rgba(46, 229, 157, .14) !important; color: var(--verde); }
.bg-saida { background: rgba(255, 92, 122, .14) !important; color: var(--vermelho); }
.bg-pix { background: rgba(76, 201, 240, .14) !important; color: var(--azul); }
.bg-leilao { background: rgba(255, 200, 61, .14) !important; color: var(--texto-ouro); }

/* ---------- Estatísticas ---------- */
.grade-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat {
    padding: 14px; border-radius: 16px;
    background: var(--card); border: 1px solid var(--card-borda);
}
.stat small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--texto-2); text-transform: uppercase; letter-spacing: .4px; }
.stat strong { display: block; margin-top: 6px; font-family: var(--fonte-titulo); font-size: 21px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--texto-3); font-weight: 700; }
.stat.destaque { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(255, 200, 61, .18), rgba(255, 159, 28, .06)); border-color: rgba(255, 200, 61, .3); }

.barra { height: 10px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ouro), var(--ouro-2)); transition: width .4s; }

.categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.categorias li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; font-weight: 700; font-size: 14px; }
.categorias .barra { grid-column: 1 / -1; }
.categorias .bolinha { width: 10px; height: 10px; border-radius: 50%; }

.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 16px;
    background: var(--card); border: 1px solid var(--card-borda);
}
.ranking li + li { margin-top: 8px; }
.ranking li.eu { border-color: rgba(255, 200, 61, .5); box-shadow: var(--brilho-ouro); }
.posicao {
    width: 30px; height: 30px; flex: none; display: grid; place-items: center;
    border-radius: 50%; font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px;
    background: var(--linha);
}
.posicao.p1 { background: linear-gradient(145deg, #ffe17a, #f59e0b); color: #3b2400; }
.posicao.p2 { background: linear-gradient(145deg, #e5e7eb, #9ca3af); color: #1f2937; }
.posicao.p3 { background: linear-gradient(145deg, #fdba74, #c2410c); color: #3b1300; }
.ranking .nome { flex: 1; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking .nome small { display: block; font-size: 12px; color: var(--texto-3); font-weight: 700; }
.ranking .valor { font-family: var(--fonte-titulo); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Conquistas (badges) */
.conquistas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.conquista {
    display: flex; gap: 10px; align-items: center;
    padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-borda);
}
.conquista .medalha {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 18px;
    background: linear-gradient(145deg, var(--ouro), var(--ouro-2)); color: #3b2400;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
.conquista b { display: block; font-size: 13px; line-height: 1.2; }
.conquista span { display: block; font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conquista > div { min-width: 0; }

.grafico { position: relative; width: 100%; height: 240px; }
.grafico.alto { height: 300px; }

/* ---------- Estados ---------- */
.vazio { text-align: center; padding: 36px 16px; color: var(--texto-2); }
.vazio > i { font-size: 40px; color: var(--texto-3); display: block; margin-bottom: 10px; }
.vazio b { display: block; color: var(--texto); font-family: var(--fonte-titulo); font-size: 18px; margin-bottom: 4px; }
.aviso:not(.toast) {   /* caixa de aviso das telas (não confundir com a notificação tipo 'aviso') */
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: 16px;
    background: rgba(255, 200, 61, .12); border: 1px solid rgba(255, 200, 61, .3); color: var(--aviso-texto);
    font-weight: 700; font-size: 14px;
}
.selo {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--raio-pill);
    font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px;
    background: rgba(255, 255, 255, .1); color: var(--texto-2);
}
.selo.ouro { background: var(--ouro); color: #3b2400; }
.selo.verde { background: rgba(46, 229, 157, .2); color: var(--verde); }
.selo.vermelho { background: rgba(255, 92, 122, .2); color: var(--vermelho); }

/* ---------- Navegação inferior ---------- */
.nav-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding-bottom: var(--safe-bottom);
    background: var(--barra);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--card-borda);
}
.nav-inferior ul {
    list-style: none; margin: 0 auto; padding: 0 6px; max-width: 560px; height: var(--nav-h);
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center;
}
.nav-inferior a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 52px; border-radius: 14px; text-decoration: none;
    color: var(--texto-3); font-size: 10px; font-weight: 800; white-space: nowrap;
}
.nav-inferior a i { font-size: 20px; }
.nav-inferior a.ativo { color: var(--texto-ouro); }
.nav-inferior a.ativo i { filter: drop-shadow(0 0 8px rgba(255, 200, 61, .6)); }
.nav-inferior a.central i {
    width: 48px; height: 48px; margin-top: -22px; display: grid; place-items: center;
    border-radius: 50%; font-size: 20px; color: #3b2400;
    background: linear-gradient(180deg, #ffd45c, var(--ouro-2));
    box-shadow: 0 4px 0 #b45309, 0 8px 18px rgba(255, 159, 28, .4);
}

/* ---------- Toast / modal (também em notificacoes.css para páginas antigas) ---------- */

@media (min-width: 600px) {
    .grade-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat.destaque { grid-column: span 3; }
}


/* Clássico: números em destaque sem brilho (o brilho dourado borrava sobre o fundo claro) */
html[data-tema="classico"] .visor, html[data-tema="classico"] .valor-guardar, html[data-tema="classico"] .valor-grande, html[data-tema="classico"] .placar-lance strong { text-shadow: none; }
html[data-tema="classico"] .visor-bloco { background: var(--sutil); }
html[data-tema="classico"] .card-saldo, html[data-tema="classico"] .missao { --texto-ouro: #ffe08a; }   /* sobre o card vermelho/azul o dourado claro lê melhor */

/* ---------- Cosméticos da Loja (categoria Visual) ---------- */
/* Aura do Peão (estilo "aura lendária" de battle royale): o peão continua com a cor dele;
   em volta, um anel de energia laranja/dourado com dois cometas girando + brilho pulsando.
   O anel é recortado por máscara (só a borda aparece), então não pinta o ícone. */
.com-aura { position: relative; isolation: isolate; overflow: visible !important; }
.com-aura::before {
    content: ''; position: absolute; inset: -6px; z-index: 1; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg,
        transparent 0deg, #ff6a00 40deg, #ffd45c 95deg, #fff6d0 110deg, transparent 125deg,
        transparent 180deg, #ff6a00 220deg, #ffd45c 275deg, #fff6d0 290deg, transparent 305deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
    animation: aura-girar 1.4s linear infinite;   /* sem filter: em celulares drop-shadow + máscara + rotação desenha um quadrado */
}
.com-aura::after {
    content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 2px rgba(255, 196, 61, .85), 0 0 12px 3px rgba(255, 140, 0, .75), 0 0 26px 6px rgba(255, 200, 61, .35);
    animation: aura-pulsar 1.2s ease-in-out infinite;
}
.com-aura > i { position: relative; z-index: 2; filter: drop-shadow(0 0 4px rgba(255, 246, 208, .9)); }
@keyframes aura-girar { to { transform: rotate(360deg); } }
@keyframes aura-pulsar { 50% { box-shadow: 0 0 0 2px rgba(255, 230, 140, 1), 0 0 18px 5px rgba(255, 140, 0, .9), 0 0 36px 10px rgba(255, 200, 61, .45); } }
/* Faíscas: 2 orbitando o peão (giram em sentidos opostos) + 2 subindo como brasas */
.aura-fx { position: absolute; inset: -6px; z-index: 3; pointer-events: none; border-radius: 50%; }
.aura-fx > b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff6d0; box-shadow: 0 0 4px 2px #ffb703, 0 0 10px 3px rgba(255, 106, 0, .8); }
.aura-fx > b:nth-child(1), .aura-fx > b:nth-child(2) { left: 50%; top: 50%; margin: -2.5px; }
.aura-fx > b:nth-child(1) { animation: aura-orbita 1.4s linear infinite; }
.aura-fx > b:nth-child(2) { animation: aura-orbita 2.1s linear infinite reverse; width: 4px; height: 4px; }
.aura-fx > b:nth-child(3), .aura-fx > b:nth-child(4) { bottom: 10%; width: 3px; height: 3px; animation: aura-brasa 1.6s ease-out infinite; }
.aura-fx > b:nth-child(3) { left: 22%; }
.aura-fx > b:nth-child(4) { right: 22%; animation-delay: .8s; }
@keyframes aura-orbita { from { transform: rotate(0) translateX(var(--raio-aura, 20px)); } to { transform: rotate(360deg) translateX(var(--raio-aura, 20px)); } }
@keyframes aura-brasa { 0% { transform: translateY(0) scale(1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34px) scale(.3); opacity: 0; } }
.avatar.com-aura { --raio-aura: 20px; }
.avatar.grande.com-aura { --raio-aura: 26px; }
.destino-avatar.com-aura { --raio-aura: 32px; }
.tela-carteira .destino-avatar.com-aura { --raio-aura: 26px; }
.corrida .avatar.com-aura { --raio-aura: 19px; }
/* Listas que rolam na horizontal cortariam o brilho: abre espaço */
.destinos:has(.com-aura) { padding-top: 10px; }

/* Nome Dourado: ouro metálico com brilho passando + faísca piscando (vale para toda a mesa) */
.nome-dourado {
    position: relative; display: inline-block; max-width: 100%; vertical-align: bottom;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: linear-gradient(100deg, #b86b00 0%, #ffd45c 22%, #fff8dc 32%, #ffc83d 42%, #e08a00 60%, #ffd45c 78%, #b86b00 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255, 190, 40, .55)) drop-shadow(0 1px 0 rgba(90, 40, 0, .6));
    animation: nome-brilho 2.2s linear infinite, nome-pisca 1.1s ease-in-out infinite; font-weight: 900; letter-spacing: .2px;
}
/* "Piscando": o ouro acende e apaga (brilho forte ↔ suave), como item lendário no lobby */
@keyframes nome-pisca {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(255, 190, 40, .45)) drop-shadow(0 1px 0 rgba(90, 40, 0, .6)); }
    50% { filter: brightness(1.45) drop-shadow(0 0 9px rgba(255, 210, 80, .95)) drop-shadow(0 0 2px #fff3c4); }
}
html[data-tema="classico"] .nome-dourado { animation: nome-brilho 2.2s linear infinite, nome-pisca-claro 1.1s ease-in-out infinite; }
@keyframes nome-pisca-claro {
    0%, 100% { filter: brightness(1) drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 5px rgba(232, 164, 0, .8)); }
}
.nome-dourado::after {
    content: '✦'; display: inline-block; margin-left: 3px; font-size: .75em;
    -webkit-text-fill-color: #fff3c4; color: #fff3c4; animation: faisca 1.6s ease-in-out infinite;
}
html[data-tema="classico"] .nome-dourado {
    background-image: linear-gradient(100deg, #7a4300 0%, #c27c00 22%, #ffcf4a 32%, #b86b00 50%, #7a4300 70%, #c27c00 100%);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7));
}
html[data-tema="classico"] .nome-dourado::after { -webkit-text-fill-color: #c27c00; color: #c27c00; }
@keyframes nome-brilho { to { background-position: -250% 0; } }
@keyframes faisca { 0%, 100% { opacity: .3; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .com-aura::before, .com-aura::after, .nome-dourado, .nome-dourado::after, .aura-fx > b { animation: none; } .aura-fx { display: none; } }

/* Avatares: o degradê cobre também a área da borda (antes ele se repetia ali e a faixa escura
   do fim aparecia no topo, parecendo que a borda de cima tinha sido "comida") */
.avatar, .destino-avatar, .avatar[data-cor], .destino-avatar[data-cor], .carta-gema, .selo-icone, .toast > i { background-origin: border-box !important; }

/* ==========================================================================
   ESTILOS DE NOME (Loja > Visual). Base = .nome-dourado (Ouro); cada estilo troca o degradê, a faísca e o brilho.
   ========================================================================== */
.nome-dourado { --nome-glow: rgba(255, 190, 40, .55); --nome-glow-forte: rgba(255, 210, 80, .95); --nome-faisca: #fff3c4; }
@keyframes nome-pisca {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 3px var(--nome-glow)) drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
    50% { filter: brightness(1.4) drop-shadow(0 0 9px var(--nome-glow-forte)) drop-shadow(0 0 2px #fff); }
}
.nome-dourado::after { -webkit-text-fill-color: var(--nome-faisca); color: var(--nome-faisca); }
.nome-fogo {
    background-image: linear-gradient(100deg, #b91c1c 0%, #ff3d00 20%, #ffb703 35%, #fff3c4 45%, #ff7a00 60%, #ff3d00 80%, #b91c1c 100%);
    --nome-glow: rgba(255, 80, 0, .6); --nome-glow-forte: rgba(255, 120, 40, .95); --nome-faisca: #ffd166;
}
.nome-gelo {
    background-image: linear-gradient(100deg, #38bdf8 0%, #e0f7ff 22%, #ffffff 32%, #7dd3fc 45%, #0ea5e9 62%, #bae6fd 80%, #38bdf8 100%);
    --nome-glow: rgba(56, 189, 248, .6); --nome-glow-forte: rgba(186, 230, 253, 1); --nome-faisca: #e0f7ff;
}
.nome-galaxia {
    background-image: linear-gradient(100deg, #6366f1 0%, #a855f7 20%, #f472b6 38%, #fdf4ff 46%, #c084fc 58%, #60a5fa 78%, #6366f1 100%);
    --nome-glow: rgba(168, 85, 247, .6); --nome-glow-forte: rgba(244, 114, 182, .95); --nome-faisca: #f5d0fe;
}
.nome-arcoiris {
    background-image: linear-gradient(100deg, #ff3d6e, #ff9f1c, #ffe14d, #2ee59d, #4cc9f0, #a06cff, #ff3d6e, #ff9f1c);
    background-size: 300% 100% !important;
    --nome-glow: rgba(255, 255, 255, .45); --nome-glow-forte: rgba(255, 255, 255, .95); --nome-faisca: #ffffff;
}
html[data-tema="classico"] .nome-gelo { background-image: linear-gradient(100deg, #0c4a6e, #0284c7 30%, #38bdf8 45%, #0369a1 60%, #0c4a6e); }
html[data-tema="classico"] .nome-fogo { background-image: linear-gradient(100deg, #7f1d1d, #dc2626 30%, #f97316 45%, #b91c1c 60%, #7f1d1d); }
html[data-tema="classico"] .nome-galaxia { background-image: linear-gradient(100deg, #3730a3, #7e22ce 30%, #db2777 45%, #6d28d9 60%, #3730a3); }

/* ==========================================================================
   ESTILOS DE AURA (anel girando + brilho pulsando + faíscas), na cor de cada estilo. Base = Ouro.
   ========================================================================== */
.com-aura.aura-gelo::before { background: conic-gradient(from 0deg, transparent 0deg, #0ea5e9 40deg, #7dd3fc 95deg, #ffffff 110deg, transparent 125deg, transparent 180deg, #0ea5e9 220deg, #bae6fd 275deg, #ffffff 290deg, transparent 305deg); }
.com-aura.aura-gelo::after { box-shadow: 0 0 0 2px rgba(125, 211, 252, .9), 0 0 12px 3px rgba(14, 165, 233, .75), 0 0 26px 6px rgba(186, 230, 253, .35); animation-name: aura-pulsar-gelo; }
@keyframes aura-pulsar-gelo { 50% { box-shadow: 0 0 0 2px #e0f7ff, 0 0 18px 5px rgba(14, 165, 233, .9), 0 0 36px 10px rgba(186, 230, 253, .45); } }
.com-aura.aura-gelo .aura-fx > b { background: #e0f7ff; box-shadow: 0 0 4px 2px #38bdf8, 0 0 10px 3px rgba(14, 165, 233, .8); }

.com-aura.aura-veneno::before { background: conic-gradient(from 0deg, transparent 0deg, #15803d 40deg, #84cc16 95deg, #ecfccb 110deg, transparent 125deg, transparent 180deg, #16a34a 220deg, #bef264 275deg, #ecfccb 290deg, transparent 305deg); }
.com-aura.aura-veneno::after { box-shadow: 0 0 0 2px rgba(190, 242, 100, .9), 0 0 12px 3px rgba(34, 197, 94, .75), 0 0 26px 6px rgba(132, 204, 22, .35); animation-name: aura-pulsar-veneno; }
@keyframes aura-pulsar-veneno { 50% { box-shadow: 0 0 0 2px #ecfccb, 0 0 18px 5px rgba(34, 197, 94, .9), 0 0 36px 10px rgba(132, 204, 22, .45); } }
.com-aura.aura-veneno .aura-fx > b { background: #ecfccb; box-shadow: 0 0 4px 2px #84cc16, 0 0 10px 3px rgba(34, 197, 94, .8); }

.com-aura.aura-galaxia::before { background: conic-gradient(from 0deg, transparent 0deg, #6366f1 40deg, #c084fc 95deg, #fdf4ff 110deg, transparent 125deg, transparent 180deg, #a855f7 220deg, #f472b6 275deg, #fdf4ff 290deg, transparent 305deg); }
.com-aura.aura-galaxia::after { box-shadow: 0 0 0 2px rgba(216, 180, 254, .9), 0 0 12px 3px rgba(168, 85, 247, .75), 0 0 26px 6px rgba(244, 114, 182, .35); animation-name: aura-pulsar-galaxia; }
@keyframes aura-pulsar-galaxia { 50% { box-shadow: 0 0 0 2px #fdf4ff, 0 0 18px 5px rgba(168, 85, 247, .9), 0 0 36px 10px rgba(244, 114, 182, .45); } }
.com-aura.aura-galaxia .aura-fx > b { background: #fdf4ff; box-shadow: 0 0 4px 2px #c084fc, 0 0 10px 3px rgba(244, 114, 182, .8); }

.com-aura.aura-arcoiris::before { background: conic-gradient(from 0deg, #ff3d6e, #ff9f1c, #ffe14d, #2ee59d, #4cc9f0, #a06cff, #ff3d6e); animation-duration: 1s; }
.com-aura.aura-arcoiris::after { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 14px 4px rgba(160, 108, 255, .6), 0 0 28px 8px rgba(76, 201, 240, .35); animation-name: aura-pulsar-arcoiris; }
@keyframes aura-pulsar-arcoiris { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 14px 4px rgba(255, 61, 110, .6), 0 0 30px 8px rgba(255, 159, 28, .35); } 33% { box-shadow: 0 0 0 2px #fff, 0 0 16px 5px rgba(46, 229, 157, .7), 0 0 32px 9px rgba(76, 201, 240, .4); } 66% { box-shadow: 0 0 0 2px #fff, 0 0 16px 5px rgba(160, 108, 255, .7), 0 0 32px 9px rgba(255, 61, 110, .4); } }
.com-aura.aura-arcoiris .aura-fx > b:nth-child(1) { background: #ffe14d; box-shadow: 0 0 6px 3px #ff9f1c; }
.com-aura.aura-arcoiris .aura-fx > b:nth-child(2) { background: #c4f1ff; box-shadow: 0 0 6px 3px #4cc9f0; }
.com-aura.aura-arcoiris .aura-fx > b:nth-child(3) { background: #ffd1dc; box-shadow: 0 0 6px 3px #ff3d6e; }
.com-aura.aura-arcoiris .aura-fx > b:nth-child(4) { background: #d1fae5; box-shadow: 0 0 6px 3px #2ee59d; }
/* Na lista da Carteira (que recorta) o brilho fica compacto em qualquer estilo */
.destinos .com-aura[class*="aura-"]::after { animation-name: aura-pulsar-lista; }
.destinos .com-aura.aura-gelo::after { animation: none; box-shadow: 0 0 0 2px rgba(125, 211, 252, .9), 0 0 9px 2px rgba(14, 165, 233, .75); }
.destinos .com-aura.aura-veneno::after { animation: none; box-shadow: 0 0 0 2px rgba(190, 242, 100, .9), 0 0 9px 2px rgba(34, 197, 94, .75); }
.destinos .com-aura.aura-galaxia::after { animation: none; box-shadow: 0 0 0 2px rgba(216, 180, 254, .9), 0 0 9px 2px rgba(168, 85, 247, .75); }
.destinos .com-aura.aura-arcoiris::after { animation: none; box-shadow: 0 0 0 2px #fff, 0 0 9px 2px rgba(160, 108, 255, .7); }

/* ==========================================================================
   NOVOS ESTILOS DE NOME
   ========================================================================== */
.nome-prata {
    background-image: linear-gradient(100deg, #6b7280 0%, #d1d5db 22%, #ffffff 32%, #9ca3af 48%, #e5e7eb 66%, #6b7280 100%);
    --nome-glow: rgba(229, 231, 235, .5); --nome-glow-forte: rgba(255, 255, 255, .9); --nome-faisca: #ffffff;
}
.nome-toxico {
    background-image: linear-gradient(100deg, #3f6212 0%, #84cc16 22%, #ecfccb 32%, #a3e635 45%, #22c55e 65%, #3f6212 100%);
    --nome-glow: rgba(132, 204, 22, .6); --nome-glow-forte: rgba(190, 242, 100, 1); --nome-faisca: #d9f99d;
}
.nome-sombra {
    background-image: linear-gradient(100deg, #7c3aed 0%, #c4b5fd 25%, #f5f3ff 33%, #8b5cf6 48%, #4c1d95 66%, #7c3aed 100%);
    --nome-glow: rgba(76, 29, 149, .9); --nome-glow-forte: rgba(124, 58, 237, 1); --nome-faisca: #c4b5fd;
}
/* Neon: pisca como letreiro (falha de luz de vez em quando) */
.nome-neon {
    background-image: linear-gradient(100deg, #ff2fd6 0%, #ffd6f5 30%, #ffffff 40%, #00f0ff 60%, #ff2fd6 100%);
    --nome-glow: rgba(255, 47, 214, .7); --nome-glow-forte: rgba(0, 240, 255, 1); --nome-faisca: #00f0ff;
    animation: nome-brilho 2.2s linear infinite, nome-pisca 1.1s ease-in-out infinite, letreiro-falha 4s steps(1) infinite;
}
@keyframes letreiro-falha { 0%, 41%, 45%, 100% { opacity: 1; } 42% { opacity: .35; } 44% { opacity: .7; } }
html[data-tema="classico"] .nome-prata { background-image: linear-gradient(100deg, #374151, #6b7280 30%, #9ca3af 45%, #4b5563 60%, #374151); }
html[data-tema="classico"] .nome-toxico { background-image: linear-gradient(100deg, #365314, #4d7c0f 30%, #65a30d 45%, #3f6212 60%, #365314); }

/* ==========================================================================
   NOVAS AURAS (bordas com efeito). As faíscas 5 e 6 só aparecem onde o estilo usa.
   Os efeitos ficam colados no peão (não invadem os vizinhos).
   ========================================================================== */
.aura-fx > b:nth-child(n+5) { display: none; }

/* ---- INFERNO: chamas saindo da metade de cima da borda ---- */
.com-aura.aura-inferno::before { background: conic-gradient(from 0deg, #7f1d1d, #dc2626, #ff7a00, #ffd23f, #ff7a00, #dc2626, #7f1d1d, #dc2626, #ffb703, #dc2626, #7f1d1d); animation-duration: .9s; }
.com-aura.aura-inferno::after { box-shadow: 0 0 0 2px rgba(255, 122, 0, .95), 0 0 12px 3px rgba(220, 38, 38, .8), 0 0 22px 5px rgba(255, 183, 3, .35); animation-name: aura-pulsar-inferno; animation-duration: .6s; }
@keyframes aura-pulsar-inferno { 50% { box-shadow: 0 0 0 2px #ffd23f, 0 0 16px 4px rgba(255, 80, 0, .95), 0 0 28px 7px rgba(255, 183, 3, .45); } }
.com-aura.aura-inferno .aura-fx > b {
    display: block; left: 50%; top: 50%; width: 7px; height: 10px; margin: -5px 0 0 -3.5px; bottom: auto; right: auto;
    border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; box-shadow: none;
    background: radial-gradient(ellipse at 50% 78%, #fff7c2 0 16%, #ffd23f 30%, #ff7a00 55%, rgba(220, 38, 38, .9) 72%, transparent 78%);
    animation: chama .45s ease-in-out infinite alternate;
}
.com-aura.aura-inferno .aura-fx > b:nth-child(1) { --a: -78deg; animation-delay: 0s; }
.com-aura.aura-inferno .aura-fx > b:nth-child(2) { --a: -46deg; animation-delay: .15s; }
.com-aura.aura-inferno .aura-fx > b:nth-child(3) { --a: -15deg; animation-delay: .07s; }
.com-aura.aura-inferno .aura-fx > b:nth-child(4) { --a: 15deg;  animation-delay: .22s; }
.com-aura.aura-inferno .aura-fx > b:nth-child(5) { --a: 46deg;  animation-delay: .1s; }
.com-aura.aura-inferno .aura-fx > b:nth-child(6) { --a: 78deg;  animation-delay: .3s; }
@keyframes chama {
    from { transform: rotate(var(--a)) translateY(calc(var(--raio-aura, 20px) * -1 + 3px)) scale(.8, .75); opacity: .8; }
    to   { transform: rotate(var(--a)) translateY(calc(var(--raio-aura, 20px) * -1)) scale(1, 1.2); opacity: 1; }
}

/* ---- TEMPESTADE: anel elétrico piscando + raios em volta ---- */
.com-aura.aura-tempestade::before {
    background: repeating-conic-gradient(#ffffff 0 5deg, #7dd3fc 5deg 9deg, transparent 9deg 16deg);
    animation: aura-girar 2.5s linear infinite, choque .7s steps(2) infinite;
}
@keyframes choque { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.com-aura.aura-tempestade::after { box-shadow: 0 0 0 2px rgba(224, 242, 254, .95), 0 0 12px 3px rgba(56, 189, 248, .85), 0 0 24px 6px rgba(99, 102, 241, .35); animation-name: aura-pulsar-gelo; animation-duration: .5s; }
.com-aura.aura-tempestade .aura-fx > b {
    display: block; left: 50%; top: 50%; width: 5px; height: 11px; margin: -5.5px 0 0 -2.5px; border-radius: 0; box-shadow: none;
    background: linear-gradient(180deg, #ffffff, #7dd3fc);
    clip-path: polygon(55% 0, 0 55%, 45% 55%, 25% 100%, 100% 40%, 55% 40%, 80% 0);
    filter: none; opacity: 0; animation: raio-flash 1.6s steps(1) infinite;
}
.com-aura.aura-tempestade .aura-fx > b:nth-child(1) { --a: -60deg; animation-delay: 0s; }
.com-aura.aura-tempestade .aura-fx > b:nth-child(2) { --a: 30deg;  animation-delay: .5s; }
.com-aura.aura-tempestade .aura-fx > b:nth-child(3) { --a: 120deg; animation-delay: .9s; }
.com-aura.aura-tempestade .aura-fx > b:nth-child(4) { --a: 200deg; animation-delay: 1.2s; }
.com-aura.aura-tempestade .aura-fx > b:nth-child(5) { --a: -120deg; animation-delay: .3s; }
.com-aura.aura-tempestade .aura-fx > b:nth-child(6) { --a: 80deg;  animation-delay: 1.4s; }
@keyframes raio-flash {
    0%, 18%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--raio-aura, 20px) * -1 + 1px)); }
    6%, 12% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--raio-aura, 20px) * -1 + 1px)); }
}

/* ---- SOMBRA ABISSAL: anel escuro + fumaça roxa subindo ---- */
.com-aura.aura-sombra::before { background: conic-gradient(from 0deg, #0f0a1f, #4c1d95, #a78bfa, #0f0a1f, #1e1b4b, #7c3aed, #0f0a1f); animation-duration: 3s; }
.com-aura.aura-sombra::after { box-shadow: 0 0 0 2px rgba(124, 58, 237, .9), 0 0 12px 4px rgba(76, 29, 149, .85), 0 0 22px 7px rgba(0, 0, 0, .55); animation-name: aura-pulsar-sombra; animation-duration: 2s; }
@keyframes aura-pulsar-sombra { 50% { box-shadow: 0 0 0 2px #a78bfa, 0 0 16px 5px rgba(124, 58, 237, .9), 0 0 28px 9px rgba(0, 0, 0, .65); } }
.com-aura.aura-sombra .aura-fx > b {
    display: block; width: 9px; height: 9px; bottom: 30%; border-radius: 50%; box-shadow: none;
    background: radial-gradient(circle, rgba(167, 139, 250, .75), rgba(76, 29, 149, .35) 55%, transparent 70%);
    animation: fumaca 2.4s ease-out infinite;
}
.com-aura.aura-sombra .aura-fx > b:nth-child(1) { left: 12%; top: auto; margin: 0; animation-delay: 0s; }
.com-aura.aura-sombra .aura-fx > b:nth-child(2) { left: 70%; top: auto; margin: 0; animation-delay: .8s; }
.com-aura.aura-sombra .aura-fx > b:nth-child(3) { left: 40%; animation-delay: 1.6s; }
.com-aura.aura-sombra .aura-fx > b:nth-child(4) { left: 85%; animation-delay: .4s; }
.com-aura.aura-sombra .aura-fx > b:nth-child(5) { left: 0%;  animation-delay: 1.2s; }
.com-aura.aura-sombra .aura-fx > b:nth-child(6) { left: 55%; animation-delay: 2s; }
@keyframes fumaca { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-26px) scale(1.4); opacity: 0; } }

/* ---- NEON DUPLO: dois anéis girando em sentidos opostos (ciano e rosa) ---- */
.com-aura.aura-neon::before { background: conic-gradient(from 0deg, transparent 0 20deg, #00f0ff 20deg 80deg, transparent 80deg 200deg, #00f0ff 200deg 260deg, transparent 260deg); }
.com-aura.aura-neon::after { box-shadow: 0 0 0 2px #ff2fd6, 0 0 12px 3px rgba(255, 47, 214, .75), 0 0 22px 5px rgba(0, 240, 255, .35); animation-name: aura-pulsar-neon; animation-duration: .9s; }
@keyframes aura-pulsar-neon { 50% { box-shadow: 0 0 0 2px #00f0ff, 0 0 14px 4px rgba(0, 240, 255, .8), 0 0 26px 6px rgba(255, 47, 214, .45); } }
.com-aura.aura-neon .aura-fx > b:nth-child(odd) { background: #ffd6f5; box-shadow: 0 0 4px 2px #ff2fd6, 0 0 10px 3px rgba(255, 47, 214, .8); }
.com-aura.aura-neon .aura-fx > b:nth-child(even) { background: #c4fbff; box-shadow: 0 0 4px 2px #00f0ff, 0 0 10px 3px rgba(0, 240, 255, .8); }

/* Na lista da Carteira (que recorta): brilho compacto também nos novos estilos */
.destinos .com-aura.aura-inferno::after { animation: none; box-shadow: 0 0 0 2px #ff7a00, 0 0 9px 2px rgba(220, 38, 38, .8); }
.destinos .com-aura.aura-tempestade::after { animation: none; box-shadow: 0 0 0 2px #e0f2fe, 0 0 9px 2px rgba(56, 189, 248, .8); }
.destinos .com-aura.aura-sombra::after { animation: none; box-shadow: 0 0 0 2px #7c3aed, 0 0 9px 2px rgba(76, 29, 149, .85); }
.destinos .com-aura.aura-neon::after { animation: none; box-shadow: 0 0 0 2px #ff2fd6, 0 0 9px 2px rgba(0, 240, 255, .6); }
@media (prefers-reduced-motion: reduce) { .aura-fx > b { animation: none !important; } .nome-neon { animation: none; } }