* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Arial, sans-serif;
}

html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    /* Não use "align-items: center" aqui. Quando a página fica mais alta que a tela (a Coleção
       cheia, por exemplo), centralizar assim corta o topo do conteúdo e não dá pra rolar até
       ele — o título some pra sempre. O "margin: auto" das caixas abaixo centraliza do jeito
       certo: centraliza quando sobra espaço e não corta nada quando falta. */
    align-items: flex-start;
    justify-content: center;
    background-color: #0f0c29;
    /* A imagem de fundo de verdade é definida pelo fundo.js (via --imagem-fundo) assim que a página abre. */
    background-image: var(--imagem-fundo, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: #e6e6e6;
    position: relative;
    overflow-x: hidden;
}

/* Camada escura por cima da imagem de fundo, só pra garantir que o texto continue legível */
.sobreposicao-fundo {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, rgba(10, 10, 20, 0.55), rgba(10, 10, 20, 0.88));
    z-index: 0;
}

.conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza na tela sem cortar o topo quando o conteúdo é maior que ela (ver comentário
       no "body" lá em cima). */
    margin: auto;
    width: 100%;
    max-width: 380px;
    padding: 20px;
}

.titulo-jogo {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 24px;
    color: #fff;
    text-shadow: 0 0 18px var(--cor-destaque, #00e5ff), 0 2px 6px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.caixa-login {
    background: rgba(15, 15, 28, 0.85);
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.3));
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    box-shadow: 0 0 30px var(--cor-destaque-suave, rgba(0, 229, 255, 0.15));
}

.caixa-login h2 {
    text-align: center;
    margin-bottom: 24px;
    color: var(--cor-destaque-clara, #00e5ff);
    text-shadow: 0 0 10px var(--cor-destaque-suave, rgba(0, 229, 255, 0.5));
    letter-spacing: 1px;
}

.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #b8b8d1;
}

.campo input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #3a3a5c;
    background: #1a1a2e;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.campo input:focus {
    border-color: var(--cor-destaque, #00e5ff);
}

.botao {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cor-destaque, #00e5ff), #6a5acd);
    color: #0f0c29;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    margin-top: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.botao:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--cor-destaque-suave, rgba(0, 229, 255, 0.4));
}

.mensagem-erro {
    background: rgba(255, 60, 60, 0.15);
    border: 1px solid #ff3c3c66;
    color: #ff8c8c;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
}

.link-alternativo {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #b8b8d1;
}

.link-alternativo a {
    color: var(--cor-destaque-clara, #00e5ff);
    text-decoration: none;
    font-weight: bold;
}

.link-alternativo a:hover {
    text-decoration: underline;
}

/* ===================== */
/* Página do jogo         */
/* ===================== */

/* Igual ao ".conteudo" do login, só que mais largo — usado nas páginas de Coleção e Missões */
.conteudo-largo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* 06/08/2026: 900px → 1100px → 1180px, pra caber a barra do "Segure e Solte" dobrada de novo
       (.segurar-caixa, max-width 1040px) e o .painel-clicker (max-width 1120px) sem espremer. */
    max-width: 1180px;
    margin: auto;
    padding: 40px 20px;
}

.texto-secundario {
    color: #b8b8d1;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* Botões fixos no canto da tela (Missões / Coleção), sempre visíveis por cima do fundo.
   São bem maiores que um botão comum de propósito — precisam chamar atenção. */
/* Colunas do menu do painel principal (05/08/2026): antes cada botão tinha a própria posição
   fixa em pixel, calculada na mão — toda vez que um botão novo entrava no meio da pilha, tinha
   que reajustar todo mundo embaixo dele (foi assim que "Notícias" colidiu com o botão de Admin
   no celular). Agora só o CONTAINER (.menu-lateral) fica fixo na tela; os botões dentro dele
   vivem num flex column com "gap", então ficam sempre alinhados e igualmente espaçados sozinhos
   — não importa quantos botões existam nem em que ordem. */
.menu-lateral {
    position: fixed;
    top: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-lateral--esquerda {
    left: 28px;
}

.menu-lateral--direita {
    right: 28px;
    align-items: flex-end;
    gap: 14px;
}

/* Espaço BEM grande entre Sair / Coleção / Ranking na coluna direita — o Sergio desenhou essa
   distância num modelo do Canva (05/08/2026), bem maior que o gap-grande usado na coluna
   esquerda. Reduzido nas telas pequenas (ver os dois blocos @media mais abaixo) pra nunca
   estourar a altura da tela. */
.nav-canto--gap-enorme {
    margin-top: 110px;
}

/* Espaçamentos maiores, usados só em botões específicos do menu (ver painel.php) pra separar
   "grupos" dentro da mesma coluna — em vez do espaçamento uniforme de ".menu-lateral" (bom pra
   botões relacionados, tipo Peça pro ADM! + Notícias, que ficam bem próximos de propósito). */
.nav-canto--gap-medio {
    margin-top: 18px;
}

.nav-canto--gap-grande {
    margin-top: 34px;
}

.nav-canto {
    /* position: relative é ESSENCIAL aqui — sem isso, o .badge-novidade (position: absolute)
       de dentro escapa pro ancestral fixo mais próximo (.menu-lateral), e todos os avisinhos
       da coluna colapsam no canto do PRIMEIRO botão dela, em vez de cada um no seu próprio
       botão. Bug antigo que só ficou visível depois que o Sair virou o primeiro item da
       coluna direita (05/08/2026) — corrigido aqui, na raiz. */
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 150px;
    padding: 16px 12px;
    border-radius: 16px;
    background: rgba(15, 15, 28, 0.9);
    border: 2px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.35));
    color: var(--cor-destaque-clara, #00e5ff);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 0 25px var(--cor-destaque-suave, rgba(0, 229, 255, 0.2));
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    font-family: inherit;
}

.nav-canto:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 30px var(--cor-destaque-suave, rgba(0, 229, 255, 0.35));
}

.nav-canto-icone {
    font-size: 28px;
    line-height: 1;
}

.nav-canto-contagem {
    font-size: 12px;
    font-weight: normal;
    color: #b8b8d1;
}

/* Botão SOZINHO, fora do menu do painel — usado só pelo "Voltar" nas outras telas (que não têm
   um .menu-lateral em volta). Carrega a própria posição fixa. */
.nav-canto--esquerda {
    position: fixed;
    top: 28px;
    left: 28px;
    z-index: 2;
}

/* Missões e Coleção são os dois botões principais do painel, um pouco maiores que o resto pra
   chamar mais atenção — mas ainda dentro da mesma coluna alinhada, não mais soltos no meio da
   tela como antes. */
.nav-canto--grande {
    width: 175px;
    padding: 22px 16px;
    font-size: 16px;
}

.nav-canto--grande .nav-canto-icone {
    font-size: 40px;
}

.nav-canto--grande .nav-canto-contagem {
    font-size: 13px;
}

/* Botão de "Sair": mesmo tamanho e alinhamento dos outros do menu, só que vermelho. */
.nav-canto--sair {
    background: #e74c3c;
    border-color: #ff8a80;
    color: #fff;
}

.nav-canto--sair:hover {
    background: #c0392b;
}

/* Avisinho vermelho de "tem carta nova" no botão de Coleção */
.badge-novidade {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.7);
    animation: pulsar-badge 1.5s ease-in-out infinite;
}

.badge-novidade.visivel {
    display: flex;
}

@keyframes pulsar-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Botão de "Voltar" bem grande e chamativo, fixo no canto — usado na Coleção e nas Missões */
.nav-canto--voltar {
    flex-direction: row;
    width: auto;
    padding: 26px 50px;
    font-size: 26px;
    gap: 14px;
    border-width: 3px;
}

.nav-canto--voltar .nav-canto-icone {
    font-size: 34px;
}

/* A Coleção usa a tela toda (sem o limite de 900px das outras páginas), pra caber bastante
   carta por fileira e não precisar rolar tanto pra ver o catálogo inteiro.
   A faixa vazia da esquerda é de propósito: é ali que ficam o botão "Voltar" e as abas,
   que são fixos na tela e não rolam junto com o conteúdo. */
.conteudo-largo--colecao {
    max-width: none;
    padding: 32px 32px 48px 290px;
}

/* Corpo da Coleção: as seções ocupam tudo (as abas saíram do fluxo, viraram fixas) */
.colecao-corpo {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.colecao-secoes {
    flex: 1;
    min-width: 0;
}

/* Abas da Coleção (Brawlers / Prata / Ouro / Skins): fixas na lateral esquerda e na altura
   do meio da tela, então continuam à vista por mais que o jogador role o catálogo pra baixo. */
.abas-colecao {
    position: fixed;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 200px;
    gap: 10px;
}

/* Como agora as abas ficam soltas por cima do catálogo, elas são um pouco maiores e com
   fundo mais fechado, pra continuarem legíveis com as cartas passando atrás. */
.aba-colecao {
    padding: 15px 22px;
    border-radius: 12px;
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.3));
    background: rgba(15, 15, 28, 0.92);
    color: #b8b8d1;
    font-weight: bold;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s, background 0.15s, color 0.15s;
}

.aba-colecao:hover {
    transform: translateX(4px);
}

.aba-colecao.ativa {
    background: var(--cor-destaque, #00e5ff);
    color: #0f0c29;
    border-color: transparent;
}

/* Monitor menor / notebook: aperta a faixa da esquerda pra sobrar mais espaço pras cartas */
@media (max-width: 1100px) {
    .conteudo-largo--colecao {
        padding-left: 220px;
    }

    .abas-colecao {
        width: 160px;
    }

    .aba-colecao {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* Celular: as abas voltam a ser uma faixa normal no topo (fixá-las roubaria tela demais) */
@media (max-width: 700px) {
    .colecao-corpo {
        flex-direction: column;
    }

    .abas-colecao {
        position: static;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .conteudo-largo--colecao {
        padding: 100px 14px 40px;
    }
}

/* Painel genérico (usado dentro da Coleção / Missões) */
.painel {
    background: rgba(15, 15, 28, 0.85);
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.3));
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    box-shadow: 0 0 30px var(--cor-destaque-suave, rgba(0, 229, 255, 0.1));
}

/* Caixa da tela principal do clicker */
.painel-clicker {
    /* 06/08/2026: 640px → 1120px, pra caber a barra do "Segure e Solte" dobrada (.segurar-caixa,
       max-width 1040px + os 64px de padding do .painel) sem cortar nada. */
    max-width: 1120px;
    margin: 0 auto;
    text-align: center;
}

.clicker-linha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.clicker-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 06/08/2026 (pedido do Sergio: "a barra fica menor quando eu clico") — sem largura própria,
       essa coluna se ajustava ao conteúdo de dentro, e o texto do botão MUDA de tamanho entre
       "Segure e solte!" e "Solte na faixa dourada!" — isso fazia a largura calculada da coluna
       (e da barra dentro dela) mudar sozinha entre os dois estados. Com largura fixa em 100%,
       a barra passa a ter sempre o mesmo tamanho, não importa o texto do botão no momento. */
    width: 100%;
}

/* A carta agora é só decorativa (não é mais o botão) — fica parada, sem reagir ao clique */
.clicker-carta-fixa {
    width: 150px;
    aspect-ratio: 298 / 473;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--cor-destaque-clara, #00e5ff);
    box-shadow: 0 0 40px var(--cor-destaque-suave, rgba(0, 229, 255, 0.4));
    animation: flutuar 3s ease-in-out infinite;
    margin-bottom: 20px;
}

.clicker-carta-fixa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes flutuar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Botão de clicar de verdade: simples e vermelho, sem o realce azul de toque no celular */
.botao-clique {
    padding: 14px 48px;
    border: none;
    border-radius: 10px;
    background: #e74c3c;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.08s, background-color 0.15s;
}

.botao-clique:hover {
    background: #c0392b;
}

.botao-clique:active {
    transform: scale(0.95);
}

/* Barrinha de progresso dos cliques */
.barra-progresso {
    width: 100%;
    max-width: 240px;
    height: 18px;
    margin: 18px auto 8px;
    border-radius: 999px;
    background: #1a1a2e;
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.3));
    overflow: hidden;
}

.barra-progresso-preenchimento {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cor-destaque, #00e5ff), #6a5acd);
    transition: width 0.15s ease-out;
}

/* "Segure e Solte" (05/08/2026) — substitui o clicker de 20 cliques + a notificação de carta
   única (removidos: não fazem mais sentido com o novo sistema, que já usa a mesma janelinha de
   recompensa em grade do pacote automático pra mostrar 1 a 3 cartas de uma vez). */
.segurar-caixa {
    width: 100%;
    /* 05/08/2026: dobrado de 260px pra 520px. Dobrado de novo em 06/08/2026 (pedido do Sergio),
       520px pra 1040px — barra ainda maior, mais fácil de mirar. */
    max-width: 1040px;
    margin: 0 auto;
}

.segurar-barra {
    position: relative;
    width: 100%;
    /* 05/08/2026: dobrado de 16px pra 32px, junto com o resto da barra. */
    height: 32px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #1a1a2e;
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.3));
    overflow: hidden;
}

/* Posição e largura de verdade são ajustadas pelo JS a cada "iniciar" (o SERVIDOR sorteia onde
   a faixa fica e manda pronto) — left/width aqui são só um valor de segurança caso o JS ainda
   não tenha rodado. */
.segurar-barra-faixa-boa {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 42%;
    width: 16%;
    z-index: 1;
    /* Polido (06/08/2026, pedido do Sergio) — cor sólida e lados exatos (sem cantos
       arredondados, sem brilho/shimmer/animação). O formato de pílula continua vindo só do
       "overflow: hidden" da barra por fora (.segurar-barra). */
    border-radius: 0;
    background: #ffd700;
}

/* Zona ruim (05/08/2026, pedido do Sergio: deixar visível) — soltar rápido demais, ainda dentro
   dela, usa a pior sorte possível (ver LIMIAR_ZONA_FRACA_MS, includes/cartas.php). Sempre no
   COMEÇO da barra (esquerda), largura calculada no servidor e mandada pronta ao "iniciar". */
.segurar-barra-zona-fraca {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 11%;
    /* Polido (06/08/2026) — cor sólida (era translúcida) e sem cantos arredondados, mesmo
       tratamento da faixa boa. */
    border-radius: 0;
    background: #e74c3c;
}

.segurar-marcador {
    position: absolute;
    /* 05/08/2026: dobrado junto com o resto da barra (era -3px / 5px). */
    top: -6px;
    bottom: -6px;
    left: 0%;
    /* Polido (06/08/2026, pedido do Sergio) — linha mais fina (era 10px) e cor sólida, sem
       brilho/glow por fora. */
    width: 4px;
    z-index: 2;
    border-radius: 0;
    background: #ffffff;
    transform: translateX(-50%);
}

/* ===================== */
/* Acabamentos especiais: Ouro, Prata e Skins (Nano é verde, as outras skins usam outro tom) */
/* ===================== */

/* Ouro não pisca mais. Agora tem um brilho dourado CONSTANTE em volta, mais uma faixa de luz
   que desliza devagar por cima da carta — é o mesmo reflexo que anda numa peça de metal
   polido quando você gira ela na mão. */
.acabamento-ouro {
    border-color: #ffd700 !important;
    box-shadow: 0 0 20px 3px rgba(255, 215, 0, 0.75);
}

/* Essa é a faixa de luz. Ela é só um brilho por cima, não atrapalha o clique na carta. */
.acabamento-ouro::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0)    40%,
        rgba(255, 240, 190, 0.45) 47%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 240, 190, 0.45) 53%,
        rgba(255, 255, 255, 0)    60%
    );
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: reflexo-ouro 3.4s linear infinite;
}

@keyframes reflexo-ouro {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* Prata segue a mesma ideia do Ouro: brilho constante em volta e uma faixa de luz deslizando
   por cima. Mas o reflexo dela é montado de um jeito diferente, e tem motivo:
   as artes prateadas são quase brancas. O reflexo do ouro só CLAREIA a imagem (mix-blend-mode
   "screen"), o que funciona lindo em cima do amarelo, mas some completamente em cima de algo
   que já é branco. Então a faixa da prata leva uma sombra antes e depois do estouro de luz —
   é o contraste escuro/claro/escuro que faz o reflexo aparecer numa arte clara. */
.acabamento-prata {
    border-color: #d9d9e0 !important;
    box-shadow: 0 0 20px 3px rgba(217, 217, 224, 0.7);
}

.acabamento-prata::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        rgba(22, 32, 58, 0)       34%,
        rgba(22, 32, 58, 0.30)    43%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(22, 32, 58, 0.30)    57%,
        rgba(22, 32, 58, 0)       66%
    );
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: reflexo-prata 3.4s linear infinite;
}

@keyframes reflexo-prata {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

.acabamento-skin-nano {
    border-color: #39ff6a !important;
    animation: brilho-nano 3.2s ease-in-out infinite;
}

@keyframes brilho-nano {
    0%, 100% { box-shadow: 0 0 10px 2px rgba(57, 255, 106, 0.5); }
    50% { box-shadow: 0 0 30px 8px rgba(57, 255, 106, 1); }
}

/* "Chuva digital" azul água passando por cima da carta, tipo Matrix */
.acabamento-skin-nano::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 10px,
        rgba(0, 229, 255, 0.65) 10px,
        rgba(0, 229, 255, 0.65) 13px,
        transparent 13px,
        transparent 34px
    );
    background-size: 100% 160px;
    mix-blend-mode: screen;
    animation: chuva-digital 2.2s linear infinite;
}

@keyframes chuva-digital {
    0% { background-position: 0 -160px; }
    100% { background-position: 0 0; }
}

.acabamento-skin-outra {
    border-color: #ff5fc4 !important;
    box-shadow: 0 0 12px 2px rgba(255, 95, 196, 0.45);
}

/* ---- Skins "Air" (05/08/2026, intensificado no mesmo dia): verde suave, mas com bem mais
   presença que a versão original — brilho mais forte na borda, e DUAS camadas de pontinhos de
   luz (tamanhos e velocidades diferentes) boiando tipo vento, em vez de uma só. ---- */
.acabamento-skin-air {
    border-color: #9be8c4 !important;
    box-shadow: 0 0 18px 4px rgba(155, 232, 196, 0.75);
}

.acabamento-skin-air::before,
.acabamento-skin-air::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.acabamento-skin-air::before {
    background-image: radial-gradient(circle, rgba(210, 255, 230, 0.95) 2px, transparent 3px);
    background-size: 36px 36px;
    animation: brisa-ar 5s linear infinite;
}

.acabamento-skin-air::after {
    background-image: radial-gradient(circle, rgba(180, 255, 220, 0.6) 3px, transparent 4.5px);
    background-size: 60px 60px;
    animation: brisa-ar 8s linear infinite reverse;
}

@keyframes brisa-ar {
    0%   { background-position: 0 70px;    opacity: 0.4; }
    50%  { background-position: 25px 35px; opacity: 0.85; }
    100% { background-position: 50px 0;    opacity: 0.4; }
}

/* ---- Skins "Romântico"/"Romântica" (05/08/2026, aumentado no mesmo dia): mais coraçõezinhos,
   MAIORES. Só existem 2 pseudo-elementos pra usar (::before/::after), então cada um vira um
   "cachinho" de 2 corações (o de verdade + uma cópia via text-shadow, sem blur — text-shadow
   com blur 0 desenha uma cópia sólida do glifo, deslocada) — dá 4 corações na tela, em 2 grupos
   com tempos diferentes. O fade de entrada/saída ficou bem mais gradual (mais tempo em
   transição, sem pulo brusco de opacidade) — só o pico central chega na opacidade máxima. ---- */
.acabamento-skin-romantico {
    border-color: #ff5f7e !important;
    box-shadow: 0 0 12px 2px rgba(255, 95, 126, 0.55);
}

.acabamento-skin-romantico::before,
.acabamento-skin-romantico::after {
    content: '♥';
    position: absolute;
    z-index: 2;
    bottom: 6%;
    pointer-events: none;
    color: rgba(255, 130, 155, 0.95);
    animation: coracao-flutuando 4.4s ease-in-out infinite;
}

.acabamento-skin-romantico::before {
    left: 12%;
    font-size: 26px;
    /* Segundo coraçãozinho do mesmo grupo, um pouco menor e deslocado — cópia sólida via
       text-shadow (offset em px, sem blur). */
    text-shadow: 0 0 8px rgba(255, 60, 100, 0.95), 34px -14px 0 rgba(255, 160, 180, 0.65);
}

.acabamento-skin-romantico::after {
    left: 55%;
    font-size: 20px;
    animation-delay: 1.6s;
    text-shadow: 0 0 8px rgba(255, 60, 100, 0.95), -26px 10px 0 rgba(255, 160, 180, 0.6);
}

@keyframes coracao-flutuando {
    0%   { transform: translateY(0) scale(0.85);   opacity: 0; }
    25%  { transform: translateY(-25px) scale(1);  opacity: 0.9; }
    50%  { transform: translateY(-50px) scale(1);  opacity: 1; }
    75%  { transform: translateY(-75px) scale(0.95); opacity: 0.5; }
    100% { transform: translateY(-100px) scale(0.9); opacity: 0; }
}

/* ---- Skins "Graffiti" (05/08/2026, espalhado no mesmo dia): manchas de spray mais fortes,
   de várias cores, distribuídas pela carta TODA (não só nos cantos) — cada pseudo-elemento
   carrega vários borrões de cor ao mesmo tempo, então entre ::before e ::after dá pra cobrir
   várias posições sem precisar de mais elementos. Mais rápido e mais opaco que a versão
   original, mas ainda com "mix-blend-mode: screen" (só clareia, nunca tampa o desenho de
   verdade por baixo). ---- */
.acabamento-skin-graffiti {
    border-color: #ffb13b !important;
    box-shadow: 0 0 14px 3px rgba(255, 177, 59, 0.6);
}

.acabamento-skin-graffiti::before,
.acabamento-skin-graffiti::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(2px);
    opacity: 0;
    animation: graffiti-borrao 3.6s ease-in-out infinite;
}

.acabamento-skin-graffiti::before {
    background-image:
        radial-gradient(circle at 12% 15%, rgba(255, 90, 90, 0.85) 0%, transparent 30%),
        radial-gradient(circle at 88% 25%, rgba(255, 220, 60, 0.8) 0%, transparent 28%),
        radial-gradient(circle at 25% 85%, rgba(120, 200, 255, 0.8) 0%, transparent 30%);
}

.acabamento-skin-graffiti::after {
    background-image:
        radial-gradient(circle at 85% 82%, rgba(255, 90, 200, 0.8) 0%, transparent 30%),
        radial-gradient(circle at 55% 50%, rgba(150, 255, 120, 0.65) 0%, transparent 26%),
        radial-gradient(circle at 8% 55%, rgba(180, 120, 255, 0.7) 0%, transparent 28%);
    animation-delay: 1.8s;
}

@keyframes graffiti-borrao {
    0%, 100% { opacity: 0;    transform: scale(0.7); }
    12%      { opacity: 1;    transform: scale(1.05); }
    28%      { opacity: 1;    transform: scale(1.05); }
    42%      { opacity: 0;    transform: scale(0.8); }
}

/* ---- Skins "Punk" (05/08/2026): paleta laranja pra marrom, tema steampunk sem exagero — só a
   borda quente. A engrenagem girando foi removida a pedido do Sergio (ficava exagerada). Borda
   ficou mais BRILHANTE no mesmo dia (cor mais clara/saturada + brilho maior e mais espalhado). ---- */
.acabamento-skin-punk {
    border-color: #ffa73d !important;
    box-shadow: 0 0 20px 5px rgba(255, 167, 61, 0.85);
}

/* ---- Skin "Ragnarok" (05/08/2026, ainda dentro de um grupo INATIVO — ver GRUPOS_DE_CARTAS em
   includes/cartas.php, só fica de verdade disponível pro jogador depois que o admin lançar).
   Tema nórdico gelo: a borda PULSA levemente e sem parar (tipo uma respiração) até chegar a
   hora do raio — pedido do Sergio, mesmo dia do ajuste do raio/flash. Em vez do reflexo
   deslizante dourado (que as cartas Ouro/Prata já usam), é um RAIO cruzando a carta (::before,
   dois traços finos em ângulos diferentes, "steps" pra piscar seco em vez de deslizar suave)
   seguido de um FLASH azul cobrindo a carta inteira (::after). ---- */
.acabamento-skin-ragnarok {
    border-color: #8fd9ff !important;
    box-shadow: 0 0 11px 2px rgba(143, 217, 255, 0.4);
    /* 05/08/2026: pulsar mais lento e mais discreto (era 3.4s) — o Sergio achou o original
       rápido/forte demais. */
    animation: brilho-borda-ragnarok 4.6s ease-in-out infinite;
}

@keyframes brilho-borda-ragnarok {
    0%, 20%, 40%, 60%, 80%, 100% { box-shadow: 0 0 11px 2px rgba(143, 217, 255, 0.4); }
    10%, 30%, 50%, 70%           { box-shadow: 0 0 15px 4px rgba(143, 217, 255, 0.65); }
    88%, 92%                     { box-shadow: 0 0 32px 11px rgba(80, 180, 255, 1); }
}

/* Os raios em si — dois traços diagonais que piscam RÁPIDO (steps(1), sem suavizar), como um
   relâmpago de verdade, um pouquinho antes do flash azul cobrir a carta. */
.acabamento-skin-ragnarok::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        linear-gradient(112deg, transparent 0%, transparent 36%, rgba(255, 255, 255, 0.95) 39%, rgba(180, 225, 255, 0.85) 41%, transparent 44%, transparent 100%),
        linear-gradient(74deg, transparent 0%, transparent 56%, rgba(200, 235, 255, 0.9) 59%, rgba(255, 255, 255, 0.75) 61%, transparent 64%, transparent 100%);
    opacity: 0;
    animation: raio-ragnarok 4.6s steps(1) infinite;
}

@keyframes raio-ragnarok {
    0%, 83%, 100% { opacity: 0; }
    85%           { opacity: 1; }
    87%           { opacity: 0; }
    89%           { opacity: 1; }
    90%           { opacity: 0; }
}

/* O flash azul, cobrindo a carta inteira — vem logo DEPOIS dos raios, "piscando" de verdade. */
.acabamento-skin-ragnarok::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: rgba(80, 170, 255, 0.6);
    opacity: 0;
    animation: flash-azul-ragnarok 4.6s steps(1) infinite;
}

@keyframes flash-azul-ragnarok {
    0%, 89%, 100% { opacity: 0; }
    91%, 94%      { opacity: 1; }
    96%           { opacity: 0; }
}

/* Espaço vazio de "Em breve" no fim da aba Skins — mostra que mais skins vão chegar, sem usar
   nenhuma imagem (nem a arte de verdade, nem o verso padrão do baralho). Listrado escuro de
   propósito, pra ficar claramente diferente de uma carta trancada normal (que usa o verso.png). */
.carta-em-breve {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(135deg, #14142a, #14142a 12px, #1a1a30 12px, #1a1a30 24px);
    border: 3px dashed #3a3a5c;
    cursor: default;
}

.carta-em-breve-texto {
    color: #6a6a8a;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.6;
}

/* Grade de cartas (coleção) */
.grade-cartas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 14px;
}

/* Elemento invisível que ocupa a fileira inteira (mesmo truque funciona com qualquer largura
   de coluna, já que "auto-fill" muda quantas colunas cabem dependendo da tela) — força o
   próximo item a começar numa fileira nova, mesmo que sobre espaço vazio na anterior. Usado na
   aba Skins pra separar os temas (Nano, Air, Romântico, Graffiti, Punk...) uns dos outros. */
.grade-cartas-quebra-linha {
    grid-column: 1 / -1;
    height: 0;
}

/* Botões de navegação rápida no topo da aba Skins (05/08/2026, pedido do Sergio) — pulam pra
   cada grupo de tema (Nano, Air, Romântico...) sem precisar rolar a página inteira na mão. */
.skins-nav-temas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.botao-tema-skin {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.35));
    background: rgba(15, 15, 28, 0.85);
    color: #b8b8d1;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s, color 0.15s;
}

.botao-tema-skin:hover {
    transform: translateY(-2px);
    background: var(--cor-destaque, #00e5ff);
    color: #0f0c29;
}

/* Tema selecionado no momento (05/08/2026) — agora são abas de verdade, só um grupo por vez
   fica visível, então precisa de um jeito de ver qual está ativo (mesmo espírito de
   .aba-colecao.ativa). */
.botao-tema-skin.ativo {
    background: var(--cor-destaque, #00e5ff);
    color: #0f0c29;
    border-color: transparent;
}

/* Aviso "Complete toda a coleção X e adquira o título Y!" que fecha cada grupo de tema na aba
   Skins (05/08/2026) — ocupa a fileira inteira da grade (mesmo truque de grid-column da
   .grade-cartas-quebra-linha, mas VISÍVEL, então não pode ter height: 0). */
.aviso-titulo-skin {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 4px 0 20px;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed var(--cor-destaque-suave, rgba(0, 229, 255, 0.35));
    color: #b8b8d1;
    font-size: 14px;
    text-align: center;
}

.carta {
    position: relative;
    aspect-ratio: 298 / 473;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a2e;
    border: 3px solid #555;
}

.carta.clicavel {
    cursor: pointer;
    transition: transform 0.15s;
}

.carta.clicavel:hover {
    transform: translateY(-4px);
}

.carta .carta-imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carta .carta-nome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 6px 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}

.carta.trancada .carta-imagem {
    filter: grayscale(1) brightness(0.6);
}

/* Carta da lista de desejos que o jogador ainda não tem — bem mais sutil que ".trancada"
   (que esconde a arte e o nome de propósito). Aqui é o oposto: a lista de desejos SÓ funciona
   se der pra ver a carta de verdade pra escolher ela, então só um leve apagado marca "ainda não
   tenho essa", sem esconder nada. */
.carta--desejo-nao-possuido {
    opacity: 0.6;
}

.carta--desejo-nao-possuido:hover {
    opacity: 1;
}

.carta-contagem {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

/* Carta recém-desbloqueada: brilha diferente até o jogador visitar a Coleção uma vez */
.carta-etiqueta-nova {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    animation: pulsar-badge 1.5s ease-in-out infinite;
}

/* Carta recém-ganha tem um brilho branco próprio. Mas cartas de Ouro, Prata e Skin JÁ têm o
   efeito delas ocupando esse mesmo espaço — e o branco genérico ganhava a briga, fazendo a
   carta nova perder justo o efeito mais bonito que ela tem. Por isso o brilho de "nova" só
   vale pras cartas comuns: nas especiais, quem manda é o efeito do acabamento.
   Elas continuam com a etiqueta "NOVO!" piscando, então dá pra reconhecer do mesmo jeito. */
.carta.nova:not(.acabamento-ouro):not(.acabamento-prata):not(.acabamento-skin-nano):not(.acabamento-skin-outra) {
    animation: brilho-carta-nova 1.8s ease-in-out infinite;
}

.carta.nova:not(.acabamento-ouro):not(.acabamento-prata):not(.acabamento-skin-nano):not(.acabamento-skin-outra)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    background-size: 250% 250%;
    animation: brilho-nova-sweep 2.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes brilho-carta-nova {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 22px 4px rgba(255, 255, 255, 0.85); }
}

@keyframes brilho-nova-sweep {
    0% { background-position: 200% -200%; }
    100% { background-position: -200% 200%; }
}

/* Cor da borda de cada raridade */
.carta.raridade-comum { border-color: #9e9e9e; }
.carta.raridade-raro { border-color: #2ecc71; }
.carta.raridade-super_raro { border-color: #3498db; }
.carta.raridade-epico { border-color: #9b59b6; }
.carta.raridade-mitico { border-color: #e74c3c; }
.carta.raridade-lendario { border-color: #f1c40f; }

/* Ultra Lendário: borda "arco-íris" animada */
.carta.raridade-ultra_lendario {
    border-color: transparent;
    background-image:
        linear-gradient(#1a1a2e, #1a1a2e),
        linear-gradient(90deg, #ff3b3b, #ffb13b, #fff23b, #3bff5e, #3bd4ff, #7a3bff, #ff3bd4, #ff3b3b);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: girar-arco-iris 4s linear infinite;
    background-size: 300% 100%;
}

@keyframes girar-arco-iris {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

/* Nível máximo: a carta INTEIRA ganha um brilho dourado CONSTANTE por fora (além das
   estrelinhas já douradas de .carta-estrelas.nivel-maximo) + a mesma faixa de luz deslizante
   que as cartas Ouro/Prata já usam (@keyframes reflexo-ouro, reaproveitada aqui) + uma coroinha
   flutuando no topo. Antes era um brilho PULSANDO; trocado por um brilho fixo + reflexo
   deslizante, pra ficar consistente com o resto dos acabamentos especiais do jogo (nenhum outro
   pisca mais, desde o ajuste de 04/08/2026 nas cartas Ouro/Prata).
   Funciona em qualquer aba (Brawlers no nível 5, ou Prata/Ouro/Skin no nível decorativo 3) e
   também no modal de detalhe (a mesma classe é aplicada em cima de .carta-grande).
   Usa ::before (não ::after) de propósito: cartas Ouro/Prata/Skin que TAMBÉM estão no nível
   máximo já usam ::after pro reflexo delas (.acabamento-ouro::after etc.) — ::before evita as
   duas faixas de luz brigarem pelo mesmo pseudo-elemento. */
.carta--nivel-maximo {
    box-shadow: 0 0 18px 4px rgba(255, 224, 138, 0.75);
}

.carta--nivel-maximo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0)    40%,
        rgba(255, 240, 190, 0.45) 47%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 240, 190, 0.45) 53%,
        rgba(255, 255, 255, 0)    60%
    );
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: reflexo-ouro 3.4s linear infinite;
}

/* Carta grande, mostrada na hora da revelação do pacote */
.carta-grande {
    width: 180px;
    margin: 0 auto;
}

.carta-grande .carta-nome {
    font-size: 16px;
    padding-top: 24px;
}

.carta-raridade-texto {
    margin-top: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    color: var(--cor-destaque-clara, #00e5ff);
    font-weight: bold;
}

.carta-revelada {
    animation: revelar-carta 0.6s ease-out;
}

@keyframes revelar-carta {
    0% { transform: scale(0) rotateY(180deg); opacity: 0; }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

/* ===================== */
/* Modal de detalhe da carta */
/* ===================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 5, 12, 0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.modal-overlay.aberto {
    opacity: 1;
    pointer-events: auto;
}

.modal-caixa {
    width: 100%;
    max-width: 360px;
    /* Nenhum modal tinha limite de altura antes — com listas grandes (tipo o seletor de cartas
       do perfil) o conteúdo vazava pra fora da tela. Isso aqui vale pra todos os modais do
       jogo, não só o de perfil, e não muda nada em quem já cabia na tela. */
    max-height: 88vh;
    overflow-y: auto;
    padding: 28px;
    text-align: center;
    background: rgba(15, 15, 28, 0.97);
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.3));
    border-radius: 18px;
    box-shadow: 0 0 50px var(--cor-destaque-suave, rgba(0, 229, 255, 0.25));
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.modal-overlay.aberto .modal-caixa {
    transform: scale(1);
}

.modal-caixa .carta {
    width: 170px;
    margin: 0 auto 18px;
}

.modal-caixa--largo {
    max-width: 640px;
}

.modal-caixa--largo .grade-cartas {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

/* Modal ainda maior, pra telas de ESCOLHER carta entre várias (cartas em destaque, lista de
   desejos do perfil) — o modal-caixa--largo normal deixa as cartas amontoadas quando tem
   muitas opções pra escolher. */
.modal-caixa--gigante {
    max-width: 920px;
}

.modal-caixa--gigante .grade-cartas {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 18px;
}

/* Tela cheia de verdade — usada nos editores de "cartas em destaque" e "lista de desejos" do
   Perfil (pedido do Sergio: dá pra ver a vitrine de cartas inteira sem precisar rolar tanto). */
.modal-caixa--tela-cheia {
    width: 96vw;
    max-width: 96vw;
    max-height: 94vh;
}

.modal-caixa--tela-cheia .grade-cartas {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 18px;
}

.modal-raridade-texto {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
}

.modal-chance {
    font-size: 13px;
    color: #b8b8d1;
    margin-bottom: 14px;
}

.modal-botao-fechar {
    width: auto;
    padding: 10px 28px;
    margin-top: 18px;
}

/* ===================== */
/* Cronômetro do pacote automático (canto da tela) */
/* ===================== */

.timer-canto {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 22px;
    border-radius: 16px;
    background: rgba(15, 15, 28, 0.9);
    border: 2px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.35));
    color: var(--cor-destaque-clara, #00e5ff);
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 0 25px var(--cor-destaque-suave, rgba(0, 229, 255, 0.2));
}

.timer-canto-icone {
    font-size: 22px;
}

.timer-canto-contagem {
    font-size: 26px;
    font-family: Consolas, monospace;
    color: #fff;
    letter-spacing: 1px;
}

@media (max-width: 700px) {
    .menu-lateral {
        top: 12px;
        gap: 10px;
    }

    .menu-lateral--esquerda {
        left: 12px;
    }

    .menu-lateral--direita {
        right: 12px;
    }

    .nav-canto--gap-enorme {
        margin-top: 40px;
    }

    .nav-canto {
        width: 108px;
        padding: 10px 8px;
        font-size: 11px;
    }

    .nav-canto-icone {
        font-size: 22px;
    }

    .nav-canto-contagem {
        font-size: 10px;
    }

    .nav-canto--esquerda {
        top: 12px;
        left: 12px;
    }

    .nav-canto--grande {
        width: 108px;
        padding: 10px 8px;
        font-size: 12px;
    }

    .nav-canto--grande .nav-canto-icone {
        font-size: 26px;
    }

    .nav-canto--grande .nav-canto-contagem {
        font-size: 10px;
    }

    .nav-canto-avatar,
    .nav-canto-avatar--vazio {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .nav-canto--voltar {
        width: auto;
        padding: 14px 22px;
        font-size: 15px;
    }

    .nav-canto--voltar .nav-canto-icone {
        font-size: 18px;
    }

    .timer-canto {
        bottom: 12px;
        right: 12px;
        padding: 10px 16px;
        font-size: 11px;
    }

    .timer-canto-icone {
        font-size: 18px;
    }

    .timer-canto-contagem {
        font-size: 20px;
    }
}

/* ===================== */
/* Níveis dos personagens */
/* ===================== */

/* Estrelinhas embaixo do nome, na grade da Coleção */
.carta-estrelas {
    display: block;
    margin-top: 2px;
    color: #ffd166;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 209, 102, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Nível máximo (Brawler no nível 5, ou versão Prata/Ouro/Skin no nível decorativo 3):
   as estrelinhas ganham um dourado mais forte e um brilho pulsando devagar, pra sinalizar
   "isso aqui está no talo" sem precisar mexer na carta inteira. */
.carta-estrelas.nivel-maximo {
    color: #ffe08a;
    animation: brilho-estrelas-maximo 2.4s ease-in-out infinite;
}

@keyframes brilho-estrelas-maximo {
    0%, 100% { text-shadow: 0 0 6px rgba(255, 209, 102, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9); }
    50% { text-shadow: 0 0 14px rgba(255, 224, 138, 1), 0 0 4px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9); }
}

/* Bloco de nível dentro da janelinha de detalhe da carta */
.modal-nivel {
    margin: 14px 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(255, 209, 102, 0.35);
}

.modal-nivel-topo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.modal-nivel-estrelas {
    color: #ffd166;
    font-size: 16px;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(255, 209, 102, 0.7);
}

.modal-nivel-estrelas.nivel-maximo {
    color: #ffe08a;
    animation: brilho-estrelas-maximo 2.4s ease-in-out infinite;
}

.modal-nivel-texto {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}

.modal-nivel-barra {
    max-width: none;
    height: 10px;
    margin: 0 0 6px;
}

.modal-nivel .barra-progresso-preenchimento {
    /* A cor de verdade vem do JS (--cor-nivel-barra), uma por raridade da carta aberta no
       modal. Esse gradiente dourado é só o valor padrão, pra nunca ficar sem cor nenhuma. */
    background: var(--cor-nivel-barra, linear-gradient(90deg, #ffd166, #f39c12));
}

.modal-nivel-falta {
    font-size: 12px;
    color: #b8b8d1;
}

/* Poder da Coleção, no painel principal */
.poder-colecao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(255, 209, 102, 0.4);
    font-size: 14px;
    color: #e6e6e6;
}

.poder-colecao-icone {
    font-size: 17px;
    line-height: 1;
}

.poder-colecao-texto strong {
    color: #ffd166;
    font-size: 17px;
}

.poder-colecao-max {
    color: #8a8aa8;
    font-size: 12px;
}

/* Piscada dourada quando um personagem sobe de nível */
.poder-colecao.subiu {
    animation: pulsar-poder 1s ease-out;
}

@keyframes pulsar-poder {
    0%   { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 209, 102, 0); }
    30%  { transform: scale(1.12); box-shadow: 0 0 26px 6px rgba(255, 209, 102, 0.9); }
    100% { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 209, 102, 0); }
}

/* ===================== */
/* Títulos (05/08/2026) */
/* ===================== */

/* Selo do título equipado, do lado do nome (painel, perfil, ranking, lista de amigos). Esse é o
   estilo "normal" — reaproveita o mesmo brilho + reflexo deslizante das cartas Ouro
   (.acabamento-ouro e @keyframes reflexo-ouro, lá em cima), só que numa pilulazinha de texto em
   vez de numa carta inteira. Cada título pode ter um estilo PRÓPRIO por cima desse (ver as
   variações .titulo-selo--* logo abaixo). */
.titulo-selo {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    margin-left: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7a5c00, #4a3800);
    border: 1px solid #ffd700;
    box-shadow: 0 0 12px 2px rgba(255, 215, 0, 0.75);
    color: #ffe9a8;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}

.titulo-selo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0)    40%,
        rgba(255, 240, 190, 0.55) 47%,
        rgba(255, 255, 255, 0.9)  50%,
        rgba(255, 240, 190, 0.55) 53%,
        rgba(255, 255, 255, 0)    60%
    );
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: reflexo-ouro 3.4s linear infinite;
}

/* ---- "Brilho Total" (título Prata): mesma ideia da carta Prata (.acabamento-prata) — reflexo
   com sombra escura antes/depois, sem mix-blend-mode, porque a cor clara não "some" que nem o
   dourado com o "screen". ---- */
.titulo-selo--prateado {
    background: linear-gradient(135deg, #5c5c6e, #2e2e3a);
    border-color: #d9d9e0;
    box-shadow: 0 0 12px 2px rgba(217, 217, 224, 0.7);
    color: #f0f0f5;
}

.titulo-selo--prateado::after {
    mix-blend-mode: normal;
    background: linear-gradient(
        105deg,
        rgba(10, 14, 26, 0)       34%,
        rgba(10, 14, 26, 0.35)    43%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(10, 14, 26, 0.35)    57%,
        rgba(10, 14, 26, 0)       66%
    );
    animation: reflexo-prata 3.4s linear infinite;
}

/* ---- "Toque de Ouro": a versão MAIS intensa do dourado normal — brilho maior e pulsando,
   reflexo mais rápido. É o "ouro puro", pra ficar claramente acima do dourado padrão. ---- */
.titulo-selo--dourado {
    background: linear-gradient(135deg, #ffb300, #7a4e00);
    border-color: #fff2b0;
    color: #fff6d8;
    animation: pulsar-titulo-dourado 2.2s ease-in-out infinite;
}

@keyframes pulsar-titulo-dourado {
    0%, 100% { box-shadow: 0 0 12px 2px rgba(255, 215, 0, 0.8); }
    50%      { box-shadow: 0 0 24px 7px rgba(255, 235, 150, 1); }
}

.titulo-selo--dourado::after {
    animation: reflexo-ouro 1.8s linear infinite;
}

/* ---- "Poder Absoluto": brilho branco-dourado bem forte, pulsando mais rápido e mais claro que
   o "Toque de Ouro" — é o título mais "radiante" do jogo (fundo quase branco, texto escuro). ---- */
.titulo-selo--brilhante {
    background: linear-gradient(135deg, #fff8e1, #ffd54a);
    border-color: #ffffff;
    color: #4a2f00;
    animation: pulsar-titulo-brilhante 1.7s ease-in-out infinite;
}

@keyframes pulsar-titulo-brilhante {
    0%, 100% { box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8), 0 0 18px 5px rgba(255, 215, 0, 0.6); }
    50%      { box-shadow: 0 0 22px 8px rgba(255, 255, 255, 1),   0 0 36px 12px rgba(255, 215, 0, 0.9); }
}

.titulo-selo--brilhante::after {
    mix-blend-mode: normal;
    background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 60%);
    animation: reflexo-ouro 1.6s linear infinite;
}

/* ---- "Ciborgue" (skins Nano): fundo verde escuro cibernético + instabilidade de glitch —
   o selo INTEIRO treme e muda de matiz de vez em quando, imitando uma falha de sinal digital. ---- */
.titulo-selo--ciborgue {
    background: linear-gradient(135deg, #0a2e1a, #06180e);
    border-color: #39ff6a;
    box-shadow: 0 0 14px 3px rgba(57, 255, 106, 0.7);
    color: #baffcf;
    animation: instabilidade-ciborgue 3s infinite;
}

.titulo-selo--ciborgue::after {
    display: none;
}

@keyframes instabilidade-ciborgue {
    0%, 87%, 100% { transform: translate(0, 0); filter: none; }
    88%  { transform: translate(-2px, 1px); filter: hue-rotate(30deg) brightness(1.4); }
    89%  { transform: translate(2px, -1px); filter: hue-rotate(-20deg) brightness(0.8); }
    90%  { transform: translate(-1px, 0);   filter: none; }
    92%  { transform: translate(2px, 1px);  filter: hue-rotate(15deg) brightness(1.3); }
    93%  { transform: translate(0, 0);      filter: none; }
}

/* ---- "Realeza Rosa" (Piper Rosa): rosa com um brilho de glitter passando por cima — pontinhos
   de luz que cintilam, tipo purpurina. ---- */
.titulo-selo--rosa {
    background: linear-gradient(135deg, #ff8fd6, #b3007a);
    border-color: #ffd1ef;
    box-shadow: 0 0 14px 3px rgba(255, 95, 196, 0.75);
    color: #fff0fa;
}

.titulo-selo--rosa::after {
    mix-blend-mode: screen;
    background-image:
        radial-gradient(circle, #fff 1px, transparent 1.5px),
        radial-gradient(circle, #fff 1px, transparent 1.5px),
        radial-gradient(circle, #fff 1.5px, transparent 2px);
    background-size: 18px 18px, 26px 26px, 34px 34px;
    background-position: 0 0, 10px 14px, 20px 4px;
    animation: glitter-rosa 2.6s linear infinite;
}

@keyframes glitter-rosa {
    0%, 100% { opacity: 0.3; background-position: 0 0, 10px 14px, 20px 4px; }
    50%      { opacity: 0.9; background-position: 4px 6px, 14px 20px, 24px 10px; }
}

/* ---- "Herdeiro de Asgard" (skins Ragnarok): mesma linguagem visual das cartas Ragnarok
   (.acabamento-skin-ragnarok) — raio piscando (::before) seguido de um flash azul (::after),
   só mais discreto aqui porque é um selinho de texto, não a carta inteira. ---- */
.titulo-selo--ragnarok {
    background: linear-gradient(135deg, #0d5c9e, #062e4f);
    border-color: #8fd9ff;
    color: #d6f0ff;
    /* 05/08/2026: mesmo ajuste da carta — pulsar mais lento e discreto (era 3.4s). */
    animation: brilho-borda-ragnarok-selo 4.6s ease-in-out infinite;
}

@keyframes brilho-borda-ragnarok-selo {
    0%, 20%, 40%, 60%, 80%, 100% { box-shadow: 0 0 7px 1px rgba(143, 217, 255, 0.4); }
    10%, 30%, 50%, 70%           { box-shadow: 0 0 11px 3px rgba(143, 217, 255, 0.65); }
    88%, 92%                     { box-shadow: 0 0 22px 7px rgba(80, 180, 255, 1); }
}

.titulo-selo--ragnarok::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.95) 48%, rgba(180, 225, 255, 0.85) 52%, transparent 60%);
    opacity: 0;
    animation: raio-ragnarok-selo 4.6s steps(1) infinite;
}

@keyframes raio-ragnarok-selo {
    0%, 83%, 100% { opacity: 0; }
    85%           { opacity: 1; }
    87%           { opacity: 0; }
    89%           { opacity: 1; }
    90%           { opacity: 0; }
}

.titulo-selo--ragnarok::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: rgba(80, 170, 255, 0.6);
    opacity: 0;
    animation: flash-azul-ragnarok-selo 4.6s steps(1) infinite;
}

@keyframes flash-azul-ragnarok-selo {
    0%, 89%, 100% { opacity: 0; }
    91%, 94%      { opacity: 1; }
    96%           { opacity: 0; }
}

/* ---- Os 4 títulos abaixo (05/08/2026, mesmo dia) fecham o conjunto de "título por coleção de
   skin" — cada um usa a MESMA cor e um efeito adaptado (menor/mais simples, por ser um selinho
   de texto) do tema da própria skin, pedido explícito do Sergio. ---- */

/* "Suave" (skins Air): verde suave + pontinhos de luz boiando, igual a carta (brisa-ar). */
.titulo-selo--suave {
    background: linear-gradient(135deg, #1a4a35, #0d2a1f);
    border-color: #9be8c4;
    box-shadow: 0 0 10px 2px rgba(155, 232, 196, 0.6);
    color: #d5ffe9;
}

.titulo-selo--suave::after {
    mix-blend-mode: screen;
    /* Sobrescreve o background-size/repeat do selo dourado padrão (250% 100%, no-repeat) —
       sem isso, o padrão de pontinhos repetido sairia esticado/cortado errado. */
    background-image: radial-gradient(circle, rgba(210, 255, 230, 0.9) 1.5px, transparent 2.5px);
    background-size: 16px 16px;
    background-repeat: repeat;
    animation: brisa-selo-suave 5s linear infinite;
}

@keyframes brisa-selo-suave {
    0%   { background-position: 0 10px; opacity: 0.4; }
    50%  { background-position: 8px 3px; opacity: 0.9; }
    100% { background-position: 16px 0; opacity: 0.4; }
}

/* "Emocionado" (skins Romântico/Romântica): rosa + um coraçãozinho flutuando, igual a carta. */
.titulo-selo--emocionado {
    background: linear-gradient(135deg, #7a1f3d, #4a0f24);
    border-color: #ff5f7e;
    box-shadow: 0 0 10px 2px rgba(255, 95, 126, 0.6);
    color: #ffd9e2;
}

.titulo-selo--emocionado::after {
    content: '♥';
    /* Limpa o gradiente/reflexo dourado padrão — aqui o "::after" é o coraçãozinho de texto,
       não uma imagem de fundo. */
    background: none;
    inset: auto;
    right: 4px;
    top: 50%;
    width: auto;
    height: auto;
    font-size: 11px;
    color: rgba(255, 130, 155, 0.95);
    text-shadow: 0 0 6px rgba(255, 60, 100, 0.9);
    animation: coracao-selo-emocionado 2.6s ease-in-out infinite;
}

@keyframes coracao-selo-emocionado {
    0%   { transform: translateY(-30%) scale(0.8); opacity: 0; }
    40%  { transform: translateY(-70%) scale(1);   opacity: 1; }
    100% { transform: translateY(-130%) scale(0.9); opacity: 0; }
}

/* "Artista Urbano" (skins Graffiti): laranja + borrões de spray coloridos piscando, igual a carta. */
.titulo-selo--artista-urbano {
    background: linear-gradient(135deg, #7a4a12, #4a2c08);
    border-color: #ffb13b;
    box-shadow: 0 0 10px 2px rgba(255, 177, 59, 0.6);
    color: #ffe9c2;
}

.titulo-selo--artista-urbano::after {
    mix-blend-mode: screen;
    filter: blur(1px);
    opacity: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 90, 90, 0.85) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(120, 200, 255, 0.85) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 220, 60, 0.7) 0%, transparent 40%);
    /* Sobrescreve o background-size/repeat do selo dourado padrão (250% 100%) — sem isso, os
       borrões saíam esticados horizontalmente em vez de circulares. */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: borrao-selo-artista 3.6s ease-in-out infinite;
}

@keyframes borrao-selo-artista {
    0%, 100% { opacity: 0;   transform: scale(0.8); }
    15%      { opacity: 1;   transform: scale(1.05); }
    30%      { opacity: 0;   transform: scale(0.9); }
}

/* "Mestre Construtor" (skins Punk): laranja/marrom, brilho simples — igual a carta Punk hoje,
   que também não tem animação extra além do brilho (a engrenagem foi removida em 04/08/2026). */
.titulo-selo--mestre-construtor {
    background: linear-gradient(135deg, #b35a10, #6b3406);
    border-color: #ffa73d;
    box-shadow: 0 0 12px 3px rgba(255, 167, 61, 0.75);
    color: #ffe3c2;
}

.titulo-selo--mestre-construtor::after {
    display: none;
}

/* ---- "Betinha": título normal AZUL, exclusivo de presente do admin — mesma ideia visual do
   dourado padrão (reflexo deslizante ::after normal, sem herança nenhuma dele), só trocando a
   paleta pra azul. Sem animação extra além do reflexo — é pra ser "normal", só de outra cor. ---- */
.titulo-selo--azul {
    background: linear-gradient(135deg, #0d5c9e, #062e4f);
    border-color: #4fc3ff;
    box-shadow: 0 0 12px 2px rgba(79, 195, 255, 0.75);
    color: #d6f0ff;
}

/* Ajustado em 06/08/2026 (pedido do Sergio: a faixa branca atrapalhava a leitura do nome do
   título) — o reflexo JÁ era animado (desliza igual ao de Prata), só que com `mix-blend-mode:
   normal` e pico quase 100% opaco, ele pintava um retângulo branco sólido bem em cima do texto
   no meio da passada. Trocado pra `screen` (clareia em vez de cobrir, mesma técnica do dourado)
   + pico bem mais fraco e tingido de azul-claro (em vez de branco puro) — continua brilhando,
   só não apaga mais o texto por baixo enquanto passa. */
.titulo-selo--azul::after {
    mix-blend-mode: screen;
    background: linear-gradient(
        105deg,
        rgba(79, 195, 255, 0)    38%,
        rgba(150, 220, 255, 0.3) 46%,
        rgba(220, 245, 255, 0.5) 50%,
        rgba(150, 220, 255, 0.3) 54%,
        rgba(79, 195, 255, 0)    62%
    );
    animation: reflexo-prata 3.4s linear infinite;
}

/* ---- "Testador Periculoso": vermelho puxado pro preto, mais escuro e ameaçador que qualquer
   outro título — exclusivo de presente do admin. Brilho vermelho fraco e lento (não é pra ser
   "bonito", é pra parecer perigoso), sem reflexo de luz nenhum (o escuro "engole" o brilho). ---- */
.titulo-selo--vermelho-escuro {
    background: linear-gradient(135deg, #4a0000, #0a0000);
    border-color: #ff2b2b;
    color: #ff9d9d;
    animation: pulsar-titulo-perigoso 2.8s ease-in-out infinite;
}

@keyframes pulsar-titulo-perigoso {
    0%, 100% { box-shadow: 0 0 8px 1px rgba(255, 20, 20, 0.55); }
    50%      { box-shadow: 0 0 16px 4px rgba(255, 20, 20, 0.9); }
}

.titulo-selo--vermelho-escuro::after {
    display: none;
}

/* ---- Texto com efeito de glitch (separação de cor tipo aberração cromática) — reutilizável,
   usado no título "Autoridade Máxima" inteiro e só na palavra "ADM" dentro de "Queridinho do
   ADM". Precisa do atributo data-texto igual ao texto visível (ver renderizarSeloTitulo em
   includes/titulos.php) — é ele que alimenta as duas camadas fantasmas via `content: attr(...)`. ---- */
.titulo-glitch-texto {
    position: relative;
    display: inline-block;
}

.titulo-glitch-texto::before,
.titulo-glitch-texto::after {
    content: attr(data-texto);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
}

.titulo-glitch-texto::before {
    color: #ff3b3b;
    clip-path: inset(0 0 55% 0);
    animation: glitch-fatia-1 2.4s infinite linear alternate-reverse;
}

.titulo-glitch-texto::after {
    color: #3bd4ff;
    clip-path: inset(55% 0 0 0);
    animation: glitch-fatia-2 2.4s infinite linear alternate-reverse;
}

@keyframes glitch-fatia-1 {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-2px, 1px); }
    40%  { transform: translate(2px, -1px); }
    60%  { transform: translate(-1px, 0); }
    80%  { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

@keyframes glitch-fatia-2 {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(2px, -1px); }
    40%  { transform: translate(-2px, 1px); }
    60%  { transform: translate(1px, 0); }
    80%  { transform: translate(-1px, -1px); }
    100% { transform: translate(0, 0); }
}

/* Só a palavra "ADM" dentro de "Queridinho do ADM" — mesmo glitch de cima, com um brilho branco
   pulsando por trás pra chamar atenção mesmo sem o selo inteiro mudar de estilo. */
.titulo-glitch-texto--autoridade {
    color: #fff;
    font-weight: 900;
    animation: pulsar-glitch-texto 2.6s ease-in-out infinite;
}

@keyframes pulsar-glitch-texto {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 8px rgba(180, 120, 255, 0.7); }
    50%      { text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 18px rgba(180, 120, 255, 1); }
}

/* ---- "Autoridade Máxima": o título mais chamativo do jogo, exclusivo do admin. Borda
   arco-íris girando (mesma técnica de .carta.raridade-ultra_lendario), fundo escuro, flash
   branco periódico, e o texto INTEIRO com o efeito de glitch de cima. ---- */
.titulo-selo--autoridade {
    border-color: transparent;
    background-image:
        linear-gradient(135deg, #1a0033, #000000),
        linear-gradient(90deg, #ff3b3b, #ffb13b, #fff23b, #3bff5e, #3bd4ff, #7a3bff, #ff3bd4, #ff3b3b);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 300% 100%;
    color: #fff;
    animation: girar-arco-iris 2.5s linear infinite, flash-titulo-autoridade 3s ease-in-out infinite;
}

@keyframes flash-titulo-autoridade {
    0%, 82%, 100% { box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.45); }
    88%           { box-shadow: 0 0 28px 9px rgba(255, 255, 255, 1); }
}

/* Sem a faixa de luz deslizante aqui (pedido do Sergio) — a borda arco-íris girando + o flash
   branco periódico (@keyframes flash-titulo-autoridade) já chamam bastante atenção sozinhos. */
.titulo-selo--autoridade::after {
    display: none;
}

/* Janelinha de trocar título (Perfil): lista os títulos já conquistados, cada um mostrando o
   próprio selo de verdade (com o efeito visual dele) dentro de uma caixinha clicável. */
.lista-titulos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.titulo-opcao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.75);
    border: 2px solid #3a3a5c;
    color: #b8b8d1;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.titulo-opcao:hover {
    transform: translateY(-2px);
}

.titulo-opcao--equipado {
    border-color: var(--cor-destaque-clara, #00e5ff);
    box-shadow: 0 0 14px var(--cor-destaque-suave, rgba(0, 229, 255, 0.4));
}

/* Dentro da opção, o selo não precisa da margem que usa quando está do lado de um nome. */
.titulo-opcao .titulo-selo {
    margin-left: 0;
}

/* ===================== */
/* Recompensa diária (sequência de login) */
/* ===================== */

.recompensa-diaria {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    padding: 14px 20px;
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.75);
    border: 2px solid #3a3a5c;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.08);
}

.recompensa-diaria-icone {
    font-size: 24px;
    line-height: 1;
}

.recompensa-diaria-info {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recompensa-diaria-info strong {
    color: #fff;
    font-size: 14px;
}

/* ===================== */
/* Ferramentas de administrador (só aparecem pra conta de admin) */
/* ===================== */

.botao-admin {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #2b1a05;
}

.botao-admin:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(243, 156, 18, 0.45);
}

.botao-admin:disabled {
    background: #3a3a5c;
    color: #8a8aa8;
    cursor: default;
    transform: none;
}

.campo-admin-girar {
    margin-top: 12px;
    text-align: left;
}

.campo-admin-girar label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #b8b8d1;
}

.campo-admin-girar input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #3a3a5c;
    background: #1a1a2e;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.campo-admin-girar input:focus {
    border-color: #f39c12;
}

/* Abas de verdade na janelinha de admin (06/08/2026) — substituem as antigas "duas colunas lado
   a lado" (05/08/2026), que ficaram apertadas depois que a aba "Ver jogadores" entrou. Reaproveita
   o visual de .aba-colecao (mesma cor/pílula das abas de Coleção/Missões), só que numa faixa
   HORIZONTAL no topo do conteúdo em vez de fixa na lateral — .abas-colecao usa position:fixed
   pensado pra página inteira, o que não funciona bem preso dentro de uma janelinha (modal). */
.abas-colecao--modal {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 20px;
}

.secao-admin {
    text-align: left;
}

/* Cada grupo de cartas futuras (ex.: "Ragnarok") dentro da aba "Grupos futuros" */
.admin-grupo-futuro {
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.25));
}

.admin-grupo-futuro-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-grupo-futuro-cabecalho strong {
    font-size: 16px;
}

/* ===================== */
/* Tela de Missões */
/* ===================== */

.lista-missoes {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Cada missão é uma faixa: ícone à esquerda, texto no meio, prêmio à direita */
.missao {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(26, 26, 46, 0.75);
    border: 2px solid #3a3a5c;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Missão completa e ainda não resgatada: fica verde e chamando atenção */
.missao--pronta {
    border-color: #2ecc71;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.25);
}

/* Missão já resgatada: fica apagadinha, pra sumir do caminho visualmente */
.missao--resgatada {
    opacity: 0.55;
    border-color: #3a3a5c;
    box-shadow: none;
}

.missao-icone {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(15, 15, 28, 0.8);
    border: 1px solid var(--cor-destaque-suave, rgba(0, 229, 255, 0.3));
    font-size: 26px;
}

/* Conquistas com ícone de imagem própria (as 7 de raridade) em vez de emoji */
.missao-icone img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 50%;
}

.missao-corpo {
    flex: 1;
    min-width: 0;
}

.missao-titulo {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
}

.missao-descricao {
    font-size: 13px;
    color: #b8b8d1;
}

/* Reaproveita a barrinha do clicker, só que mais fina e alinhada à esquerda */
.missao-barra {
    max-width: none;
    height: 12px;
    margin: 10px 0 4px;
}

.missao--pronta .barra-progresso-preenchimento {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.missao-contagem {
    font-size: 12px;
    color: #b8b8d1;
}

.missao-premio {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 150px;
}

.missao-premio-valor {
    font-size: 15px;
    font-weight: bold;
    color: var(--cor-destaque-clara, #00e5ff);
    text-align: center;
    line-height: 1.3;
}

/* A lista de missões é vertical, então não faz sentido ela esticar numa tela larga —
   ao contrário do catálogo, que quanto mais largo melhor. */
.colecao-secoes--estreito {
    max-width: 1000px;
}

.missao-botao {
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #0f0c29;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.missao-botao:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(46, 204, 113, 0.4);
}

/* Missão ainda em andamento: botão cinza e sem clique */
.missao-botao:disabled {
    background: #3a3a5c;
    color: #8a8aa8;
    cursor: default;
}

.missao-selo {
    font-size: 12px;
    font-weight: bold;
    color: #2ecc71;
    letter-spacing: 0.5px;
}

/* As cartas ganhas aparecem numa grade dentro da janelinha de recompensa — por isso
   precisam anular o tamanho fixo que o modal normalmente dá pra uma carta só. */
.modal-caixa .grade-cartas--recompensa .carta {
    width: auto;
    margin: 0;
}

/* Centraliza as cartas na tela de recompensa (05/08/2026, pedido do Sergio) — o "auto-fill" do
   .grade-cartas base reserva colunas vazias invisíveis quando tem poucas cartas (ex.: só 1 ou 2
   do Segure e Solte), o que empurrava tudo pro canto esquerdo em vez de ficar no meio. */
.grade-cartas--recompensa {
    justify-content: center;
}

@media (max-width: 700px) {
    /* No celular a missão vira duas linhas: ícone + texto em cima, prêmio embaixo */
    .missao {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
    }

    .missao-corpo {
        flex-basis: calc(100% - 82px);
    }

    .missao-premio {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
    }

    .missao-botao {
        width: auto;
        padding: 9px 22px;
    }
}

/* ===================== */
/* Perfil do jogador */
/* ===================== */

/* Botão do perfil no canto: mostra a foto escolhida (redonda) ou uma "?" quando ainda não
   tem foto — é assim que o jogador percebe que dá pra personalizar. */
.nav-canto-avatar {
    width: 42px;
    height: 42px;
    /* Quadrada (com cantos arredondados), não redonda — as fotos são ícones quadrados e uma
       moldura circular cortava as pontas deles. */
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--cor-destaque-clara, #00e5ff);
}

.nav-canto-avatar--vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    background: rgba(0, 229, 255, 0.12);
}

.perfil-cabecalho {
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: left;
}

.perfil-avatar-grande {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: 18px;
    object-fit: cover;
    border: 3px solid var(--cor-destaque-clara, #00e5ff);
    box-shadow: 0 0 25px var(--cor-destaque-suave, rgba(0, 229, 255, 0.3));
}

.perfil-avatar-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    font-weight: bold;
    background: rgba(0, 229, 255, 0.12);
    color: var(--cor-destaque-clara, #00e5ff);
}

.perfil-info {
    min-width: 0;
}

.perfil-nome {
    margin-bottom: 6px;
    color: #fff;
}

.perfil-descricao {
    white-space: pre-wrap;
    word-break: break-word;
}

.perfil-subtitulo {
    margin: 22px 0 12px;
    text-align: left;
    color: var(--cor-destaque-clara, #00e5ff);
    font-size: 15px;
}

.campo-descricao-perfil {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #3a3a5c;
    background: #1a1a2e;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
}

.campo-descricao-perfil:focus {
    border-color: var(--cor-destaque, #00e5ff);
}

/* Grade de opções de foto, dentro do modal de editar perfil */
.grade-fotos-perfil {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 10px;
}

/* Wrapper de cada opção — antes era a própria <img>, agora é um <div> com a imagem dentro,
   pra dar espaço pro cadeado e pra etiqueta "NOVA!" das fotos travadas/recém-desbloqueadas. */
.foto-perfil-opcao {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid #3a3a5c;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.foto-perfil-opcao-imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.foto-perfil-opcao:hover {
    transform: scale(1.06);
}

.foto-perfil-opcao.selecionada {
    border-color: var(--cor-destaque-clara, #00e5ff);
    box-shadow: 0 0 14px var(--cor-destaque-suave, rgba(0, 229, 255, 0.5));
}

/* Foto exclusiva do admin: borda laranja tracejada, mesma linguagem visual das ferramentas
   de admin — deixa claro que é uma opção especial, só de quem tem acesso a ela. */
.foto-perfil-opcao--admin {
    border-style: dashed;
    border-color: #f39c12;
}

.foto-perfil-opcao--admin.selecionada {
    border-style: solid;
    border-color: #f39c12;
    box-shadow: 0 0 14px rgba(243, 156, 18, 0.5);
}

/* Foto ainda travada (precisa de uma carta específica): escurecida, sem clique, com cadeado —
   mesma ideia visual das cartas trancadas da Coleção. */
.foto-perfil-opcao--trancada {
    cursor: default;
}

.foto-perfil-opcao--trancada:hover {
    transform: none;
}

.foto-perfil-opcao--trancada .foto-perfil-opcao-imagem {
    filter: grayscale(1) brightness(0.5);
}

.foto-perfil-opcao-cadeado {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(0, 0, 0, 0.25);
}

/* Foto recém-desbloqueada que o jogador ainda não visitou — some assim que ele abrir essa
   janelinha de novo (ver perfil.php, "fotos_novas"). */
.foto-perfil-opcao--nova {
    animation: brilho-carta-nova 1.8s ease-in-out infinite;
}

.foto-perfil-opcao-etiqueta-nova {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.5px;
    animation: pulsar-badge 1.5s ease-in-out infinite;
}

.foto-perfil-opcao--vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: #b8b8d1;
    font-size: 22px;
    font-weight: bold;
}

/* Cartas clicáveis pra escolher (destaque / lista de desejos): igual a uma carta comum, só que
   marca uma borda de destaque quando selecionada — sem sumir com a cor da raridade por baixo. */
.carta-selecionavel {
    cursor: pointer;
    transition: transform 0.15s;
}

.carta-selecionavel:hover {
    transform: translateY(-4px);
}

.carta-selecionavel.selecionada {
    outline: 4px solid var(--cor-destaque-clara, #00e5ff);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .perfil-cabecalho {
        flex-direction: column;
        text-align: center;
    }

    .perfil-info {
        text-align: center;
    }

    .perfil-subtitulo {
        text-align: center;
    }
}

/* ===================== */
/* Sistema de amigos */
/* ===================== */

.campo-busca-amigo {
    display: flex;
    gap: 10px;
}

.campo-busca-amigo input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #3a3a5c;
    background: #1a1a2e;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.campo-busca-amigo input:focus {
    border-color: var(--cor-destaque, #00e5ff);
}

.lista-jogadores {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jogador-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.75);
    border: 2px solid #3a3a5c;
}

.jogador-nome {
    font-weight: bold;
    color: #fff;
    word-break: break-word;
}

.jogador-acoes {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.jogador-status-texto {
    font-size: 13px;
    color: #b8b8d1;
    text-align: right;
}

/* Resuminho da coleção de um amigo (quantos brawlers/prata/ouro/skins ele tem), na lista de
   amigos — dá o "info rápido" sem precisar abrir a coleção dele. */
.jogador-resumo-colecao {
    margin-top: 4px;
    font-size: 12px;
    color: #b8b8d1;
}

/* Recusar/cancelar/desfazer: mesma linguagem visual do botão vermelho de Sair/Zerar coleção */
.botao-recusar {
    width: auto;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: #3a3a5c;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.botao-recusar:hover:not(:disabled) {
    background: #e74c3c;
    transform: translateY(-2px);
}

.jogador-acoes .missao-botao {
    width: auto;
    padding: 9px 16px;
}

@media (max-width: 700px) {
    .jogador-linha {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .jogador-acoes {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ===================== */
/* Ranking */
/* ===================== */

/* A linha do próprio jogador se destaca das outras com uma borda dourada, pra achar
   rápido "onde eu estou" numa lista que pode ter bastante gente. */
.jogador-linha--voce {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
}

.ranking-jogador {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ranking-posicao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    font-size: 18px;
    font-weight: bold;
    color: #b8b8d1;
}

.ranking-poder {
    font-weight: bold;
    color: #ffd700;
    white-space: nowrap;
}

/* ===================== */
/* Sistema de trocas */
/* ===================== */

.troca-linha {
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.75);
    border: 2px solid #3a3a5c;
}

.troca-linha--historico {
    opacity: 0.8;
}

.troca-corpo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0;
}

.troca-cartas-lado {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.troca-seta {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--cor-destaque-clara, #00e5ff);
}

/* Miniatura de carta dentro de um resumo de troca — bem menor que uma carta normal, só pra
   dar uma ideia visual rápida do que tá em jogo (o nome completo já aparece no title/tooltip). */
.troca-carta-mini {
    /* position: relative é necessário aqui — os efeitos de Ouro/Prata/Skin (::after com
       "inset: 0") se posicionam relativos ao pai mais próximo com position definida; sem
       isso, o brilho vazaria pra fora dessa miniatura e ia parar espalhado pela página. */
    position: relative;
    width: 46px;
    aspect-ratio: 298 / 473;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1a2e;
    border: 2px solid #555;
}

.troca-carta-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 700px) {
    .troca-corpo {
        flex-direction: column;
        align-items: flex-start;
    }

    .troca-seta {
        align-self: center;
        transform: rotate(90deg);
    }
}

/* ===================== */
/* "Peça pro ADM!" */
/* ===================== */

.pedido-linha {
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.75);
    border: 2px solid #3a3a5c;
    text-align: left;
}

.pedido-data {
    font-size: 11px;
    color: #8a8aa8;
    margin: 2px 0 8px;
}

.pedido-mensagem {
    color: #e6e6e6;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===================== */
/* Notícias */
/* ===================== */

.noticia-titulo {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--cor-destaque-clara, #00e5ff);
}

/* Bloco da resposta do admin, com um respiro visual pra ficar claramente separado da
   mensagem original — borda à esquerda tipo "citação de resposta". */
.pedido-resposta {
    margin-top: 10px;
    padding: 10px 14px;
    border-left: 3px solid var(--cor-destaque-clara, #00e5ff);
    background: rgba(0, 229, 255, 0.06);
    border-radius: 0 8px 8px 0;
}

.pedido-resposta-titulo {
    font-size: 12px;
    font-weight: bold;
    color: var(--cor-destaque-clara, #00e5ff);
    margin-bottom: 4px;
}

.pedido-presente {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.35);
    font-size: 13px;
    color: #ffd166;
    font-weight: bold;
}

.pedido-presente img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Presente ainda não resgatado: brilha um pouco mais forte que o normal, pra chamar atenção
   de que tem uma ação esperando (o botão "Resgatar presente" some depois de clicado). */
.pedido-presente--pendente {
    flex-wrap: wrap;
    background: rgba(255, 209, 102, 0.18);
    border-color: rgba(255, 209, 102, 0.6);
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.3);
    animation: pulsar-poder 2s ease-in-out infinite;
}

.pedido-aviso-admin {
    margin-top: 8px;
    font-size: 12px;
    color: #b8b8d1;
}

/* Janelinha de escolher presente: as duas abinhas (Cartas / Fotos) — reaproveita a cor de
   admin (laranja), só que sem o posicionamento fixo de .abas-colecao (aqui é dentro de modal). */
.pedido-presente-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.pedido-presente-tabs .botao {
    width: auto;
    padding: 10px 18px;
}

.botao-admin--ativo {
    outline: 3px solid #f39c12;
    outline-offset: 2px;
}

/* ===================== */
/* Celular DEITADO (05/08/2026) */
/* ===================== */
/*
   Até aqui, o jogo só tinha um modo "celular" baseado na LARGURA da tela (max-width: 700px) —
   pensado pro celular em PÉ. Só que celular DEITADO é o contrário: fica bem LARGO (às vezes mais
   largo que 700px, então nem entrava no modo celular) mas bem BAIXO. Os botões do menu, pensados
   pra uma tela alta, transbordavam pra fora da tela curta.

   Por isso esse bloco usa "max-height" (altura da tela), não largura — é isso que detecta
   "celular deitado" de verdade, não importa se a largura é grande ou pequena. Ele deixa tudo bem
   mais compacto (menu, título, cronômetro, abas, modais), sem trocar pro empilhamento vertical
   do celular em pé (que não caberia numa tela baixa de qualquer jeito — aqui a largura sobra,
   é a altura que falta).
*/
@media (max-height: 480px) {
    .menu-lateral {
        top: 8px;
        gap: 6px;
    }

    .menu-lateral--esquerda {
        left: 8px;
    }

    .menu-lateral--direita {
        right: 8px;
    }

    .nav-canto--gap-enorme {
        margin-top: 16px;
    }

    .nav-canto {
        width: 104px;
        padding: 6px 8px;
        gap: 2px;
        font-size: 10px;
        border-radius: 10px;
    }

    .nav-canto-icone {
        font-size: 17px;
    }

    .nav-canto-contagem {
        font-size: 9px;
    }

    .nav-canto-avatar,
    .nav-canto-avatar--vazio {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .nav-canto--esquerda {
        top: 8px;
        left: 8px;
    }

    .nav-canto--voltar {
        padding: 8px 16px;
        font-size: 14px;
        gap: 8px;
    }

    .nav-canto--voltar .nav-canto-icone {
        font-size: 16px;
    }

    .nav-canto--grande {
        width: 128px;
        padding: 8px 10px;
        font-size: 11px;
    }

    .nav-canto--grande .nav-canto-icone {
        font-size: 20px;
    }

    .nav-canto--grande .nav-canto-contagem {
        font-size: 9px;
    }

    .nav-canto--gap-medio {
        margin-top: 8px;
    }

    .nav-canto--gap-grande {
        margin-top: 14px;
    }

    /* Abas fixas (Coleção, Missões, Perfil, Amigos, Trocas...) — mesmo truque do celular em pé:
       viram uma faixa normal no topo em vez de ficar fixas do lado, que não caberia na altura. */
    .colecao-corpo {
        flex-direction: column;
    }

    .abas-colecao {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 6px;
    }

    .aba-colecao {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* .conteudo-largo--colecao PRECISA vir depois de .conteudo-largo aqui — as duas classes
       aparecem juntas no mesmo elemento nas telas de Coleção/Missões/Perfil/etc, e como as duas
       regras têm a mesma "força" (uma classe só), quem vem DEPOIS no arquivo é que vale. */
    .conteudo-largo {
        padding: 8px 130px;
    }

    .conteudo-largo--colecao {
        padding: 90px 16px 30px;
    }

    .titulo-jogo {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .timer-canto {
        bottom: 8px;
        right: 8px;
        padding: 6px 12px;
    }

    .timer-canto-icone {
        font-size: 14px;
    }

    .timer-canto-contagem {
        font-size: 16px;
    }

    .recompensa-diaria {
        margin: 10px 0;
        padding: 8px 14px;
    }

    /* Modais (edição de perfil, detalhe de carta, etc.) já se ajustam bem sozinhos por usar
       "vh" (altura relativa à tela) — só precisam de um pouco menos de respiro nas bordas. */
    .modal-caixa {
        padding: 16px;
        max-height: 94vh;
    }
}