/*
 * Botões da Home num padrão só (13/11/2026, pedido dele): o desenho do «Cadastrar meu clã / Pré-visualizar página»
 * (aro metálico com bisel + vidro com reflexo espelhado + brilho em volta), mas SEM as curvas/chanfros — cantos retos.
 * Tamanho, posição, textos e troca de hover continuam os de antes; aqui é SÓ o desenho.
 *   - Jogo do clã: ATIVO, VER CLÃ, DIVULGAR CLÃ, VER CONTEÚDOS DESTE JOGO (publico/partes/jogo-do-cla + jogo-do-cla.css)
 *   - Turbo Grátis (partials/home/turbo-controle)
 *   - Criar postagem / Compartilhar dica / Cadastrar Clã (home.html, pg-499fc3a / pg-f86bd08 / pg-2b927b4)
 * O botão dos cards de jogo tem o seu (home-botao-jogo.css). Desligar = tirar o <link> em pages/home.blade.php.
 */

/* ── receita ─────────────────────────────────────────────────────────────────────────────────────────────
   --hb-a/--hb-b = miolo (cima → baixo) · --hb-aro1/2/3 = aro metálico (claro em cima → cor → fechado embaixo)
   --hb-brilho = luz em volta */
.hb-vermelho, .pg-jc .pg-jc-botao--vermelho, .pg-turbo2 .pg-turbo2__botao,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane-normal {
    /* vermelho FORTE do «Cadastrar meu clã» (medido na arte: topo #e10003 → base #7d0100, aro vermelho vivo) */
    --hb-a: #e10003; --hb-b: #7d0100;
    --hb-aro1: #ff3a3c; --hb-aro2: #d4000a; --hb-aro3: #f0121c;
    --hb-brilho: rgba(255, 0, 12, .4); --hb-reflexo: .07;
}
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane-hover {   /* hover deles: o mesmo vermelho, mais aceso */
    --hb-a: #f50a0f; --hb-b: #940103;
    --hb-aro1: #ff5a5c; --hb-aro2: #ea0010; --hb-aro3: #ff2a33;
    --hb-brilho: rgba(255, 0, 12, .55); --hb-reflexo: .09;
}
.pg-jc .pg-jc-botao--escuro {
    /* preto fechado como o «Pré-visualizar página»: miolo quase preto, aro prateado vivo, reflexo fraco */
    --hb-a: #15171c; --hb-b: #020203;
    --hb-aro1: #f4f7fb; --hb-aro2: #9aa3b2; --hb-aro3: #c9d0da;
    --hb-brilho: rgba(170, 190, 220, .18); --hb-reflexo: .07;
}
.pg-jc .pg-jc-status { /* inativo: cinza */
    --hb-a: #5f5f66; --hb-b: #2c2c31;
    --hb-aro1: #d9d9de; --hb-aro2: #8b8b92; --hb-aro3: #3a3a40;
    --hb-brilho: rgba(0, 0, 0, 0);
}
.pg-jc .pg-jc-status.is-ativo {
    /* verde forte, mesma receita do vermelho: escuro embaixo, aro verde vivo, reflexo fraco */
    --hb-a: #0fae35; --hb-b: #04500f;
    --hb-aro1: #4cff7c; --hb-aro2: #0aa82e; --hb-aro3: #1fd54a;
    --hb-brilho: rgba(20, 210, 70, .35); --hb-reflexo: .07;
}

/* vidro + aro: o aro é a borda (border-box), o vidro fica no padding-box */
.pg-jc .pg-jc-botao--vermelho, .pg-jc .pg-jc-botao--escuro, .pg-jc .pg-jc-status,
.pg-turbo2 .pg-turbo2__botao,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane {
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    background:
        linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, calc(var(--hb-reflexo, .28) / 2)) 62%, transparent 72%) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, var(--hb-reflexo, .28)) 0%, rgba(255, 255, 255, calc(var(--hb-reflexo, .28) / 3.5)) 48%, rgba(255, 255, 255, 0) 49%) padding-box,
        linear-gradient(180deg, var(--hb-a) 0%, var(--hb-b) 100%) padding-box,
        linear-gradient(180deg, var(--hb-aro1) 0%, var(--hb-aro2) 45%, var(--hb-aro3) 100%) border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .55),                /* entalhe escuro entre o aro e o vidro */
        inset 0 2px 0 rgba(255, 255, 255, calc(var(--hb-reflexo, .28) * .6)),
        0 0 14px var(--hb-brilho),
        0 4px 8px rgba(0, 0, 0, .45) !important;
}
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane { box-sizing: border-box; }
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__instance { border-radius: 4px !important; }

/* texto branco com sombra escura, para ler sobre o reflexo */
.pg-jc .pg-jc-botao, .pg-jc .pg-jc-status, .pg-turbo2 .pg-turbo2__botao,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__label {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* hover: sobe um pouco e acende (o ATIVO não é botão: fica parado) */
.pg-jc .pg-jc-botao, .pg-turbo2 .pg-turbo2__botao,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__instance {
    transition: transform .18s ease, filter .18s ease !important;
}
.pg-jc .pg-jc-botao:hover, .pg-turbo2 .pg-turbo2__botao:hover,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__instance:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}