/*
 * Botão dos cards de jogo da Home (pg-93ae600 — aparece quando o card "deita" ao passar o mouse). 13/11/2026, pedido dele:
 *  - mesma LARGURA do card (antes 170 px fixos num card de 214);
 *  - vidro HUD dos botões de gênero de /novidades (menu-generos: moldura de LED com bisel, anel escuro, reflexo
 *    espelhado com corte seco, faixa diagonal de luz, cantoneiras «L»), mas SEM o chanfro na diagonal — cantos retos;
 *  - cores de antes: PRETO com o nome do jogo; com o mouse NO botão, VERMELHO com "Explorar" (mesma troca de antes,
 *    hover-effect-0: os dois planos/estados se cruzam).
 * Desligar = tirar o <link> deste arquivo em pages/home.blade.php.
 */
.pg-3552 .pg-element.pg-93ae600 {
    --bj-altura: 38px;
    width: 100% !important;
    max-width: none !important;
}
.pg-3552 .pg-element.pg-93ae600 .pg-botao__container { display: flex; width: 100%; }
.pg-3552 .pg-element.pg-93ae600 .pg-botao__instance {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: var(--bj-altura);
    border-radius: 3px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
    transition: transform .18s ease, filter .18s ease;
}
.pg-3552 .pg-element.pg-93ae600 .pg-botao__instance:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 8px rgba(225, 20, 30, .55)) drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
}

/* os dois planos: mesmo vidro, cor diferente (--bj-cor) */
.pg-3552 .pg-element.pg-93ae600 .pg-botao__plane {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 3px;
    transition: opacity .25s ease;
    background:
        /* cantoneiras «L» (canto de cima à direita e de baixo à esquerda) */
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) right 6px top 5px / 8px 1.5px no-repeat,
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) right 6px top 5px / 1.5px 8px no-repeat,
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) left 6px bottom 5px / 8px 1.5px no-repeat,
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) left 6px bottom 5px / 1.5px 8px no-repeat,
        /* faixa diagonal de luz */
        linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, .16) 62%, transparent 72%),
        /* reflexo espelhado: metade de cima clara, corte seco */
        linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 48%, rgba(255, 255, 255, 0) 49%),
        /* miolo na cor */
        linear-gradient(180deg, var(--bj-cor) 0%, color-mix(in srgb, var(--bj-cor) 60%, #000) 100%) !important;
    /* moldura de LED com bisel (clara em cima) + anel escuro por dentro */
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--bj-cor) 55%, #fff),
        inset 0 0 0 3px color-mix(in srgb, var(--bj-cor) 30%, #000),
        inset 0 4px 0 -1px color-mix(in srgb, var(--bj-cor) 35%, #fff) !important;
}
.pg-3552 .pg-element.pg-93ae600 .pg-botao__plane-normal { --bj-cor: #26262c; }
.pg-3552 .pg-element.pg-93ae600 .pg-botao__plane-hover  { --bj-cor: #d3121f; }

/* textos: branco, itálico, contorno escuro no tom do plano (como o nome do gênero) */
.pg-3552 .pg-element.pg-93ae600 .pg-botao__state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px !important;
    transition: opacity .25s ease;
}
.pg-3552 .pg-element.pg-93ae600 .pg-botao__state .pg-botao__label {
    color: #fff !important;
    font-family: Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    font-style: italic;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    --bj-contorno: #000;
    text-shadow: -1px -1px 0 var(--bj-contorno), 1px -1px 0 var(--bj-contorno), -1px 1px 0 var(--bj-contorno), 1px 1px 0 var(--bj-contorno);
}
.pg-3552 .pg-element.pg-93ae600 .pg-botao__state-hover .pg-botao__label { --bj-contorno: #5a0707; }