/*==================================================
    BISCA GAÚCHA
    PREPARAR PARTIDA
===================================================*/


/*==================================================
    TELA
===================================================*/

.tela-preparar-partida{

    color:#ffffff;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,213,69,.18),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #103b25 0%,
            #132719 45%,
            #4a1c18 100%
        );

    overflow:hidden;

}


/*==================================================
    CABEÇALHO
===================================================*/

.preparar-cabecalho{

    position:relative;

    z-index:10;

    min-height:92px;

    display:grid;

    grid-template-columns:90px 1fr 150px;

    align-items:center;

    gap:20px;

    padding:14px 28px;

    border-bottom:1px solid rgba(255,215,75,.3);

    background:rgba(0,0,0,.28);

    backdrop-filter:blur(10px);

}


.preparar-cabecalho h1{

    margin:0;

    color:#fff2bd;

    text-align:center;

    font-family:"Bebas Neue", sans-serif;

    font-size:clamp(2rem, 4vw, 3.2rem);

    letter-spacing:.08em;

    text-transform:uppercase;

    text-shadow:0 4px 10px rgba(0,0,0,.55);

}


.btn-preparar-voltar,
.btn-preparar-icone{

    border:1px solid rgba(255,215,75,.45);

    color:#ffe27a;

    background:rgba(0,0,0,.28);

    cursor:pointer;

    transition:

        transform .2s ease,

        background .2s ease,

        border-color .2s ease,

        box-shadow .2s ease;

}


.btn-preparar-voltar{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:1.5rem;

}


.preparar-acoes{

    display:flex;

    justify-content:flex-end;

    gap:12px;

}


.btn-preparar-icone{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    font-size:1.25rem;

}


.btn-preparar-voltar:hover,
.btn-preparar-icone:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,.12);

    border-color:#ffe27a;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}


/*==================================================
    CONTEÚDO
===================================================*/

.preparar-conteudo{

    position:relative;

    z-index:2;

    width:min(920px, calc(100% - 32px));

    height:calc(100vh - 92px);

    margin:0 auto;

    padding:24px 0 34px;

    overflow-y:auto;

    scrollbar-width:thin;

}


.bloco-preparar{

    position:relative;

    border:1px solid rgba(255,215,75,.25);

    border-radius:18px;

    background:

        linear-gradient(
            145deg,
            rgba(54,29,18,.94),
            rgba(20,12,8,.96)
        );

    box-shadow:

        0 18px 45px rgba(0,0,0,.32),

        inset 0 1px 0 rgba(255,255,255,.06);

}


/*==================================================
    TOTAL DE JOGADORES
===================================================*/

.jogadores-total{

    min-height:88px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    margin-bottom:16px;

    padding:18px;

    font-size:1.25rem;

}


.jogadores-total i{

    color:#ffe05e;

    font-size:1.8rem;

}


.jogadores-total strong{

    color:#ffe05e;

    font-size:1.5rem;

}


/*==================================================
    CARDS DOS JOGADORES
===================================================*/

.jogador-card{

    min-height:112px;

    display:grid;

    grid-template-columns:86px 1fr;

    align-items:center;

    gap:18px;

    margin-bottom:16px;

    padding:24px 24px 18px;

}


.jogador-legenda{

    position:absolute;

    top:8px;

    left:18px;

    color:rgba(255,255,255,.68);

    font-size:.84rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}


.jogador-avatar{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #ffe05e;

    border-radius:50%;

    color:#ffe05e;

    font-size:2rem;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.24),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #176337,
            #0b2f1d
        );

    box-shadow:0 10px 24px rgba(0,0,0,.35);

}


.jogador-avatar.computador{

    color:#fff;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.24),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #b98115,
            #583405
        );

}


.jogador-nome{

    color:#fff4c4;

    font-family:"Bebas Neue", sans-serif;

    font-size:clamp(1.8rem, 4vw, 2.7rem);

    letter-spacing:.05em;

    text-shadow:0 4px 8px rgba(0,0,0,.55);

}

/*==================================================
    AVATAR SELECIONÁVEL DO JOGADOR
===================================================*/

.jogador-avatar-selecionavel{

    position:relative;

    padding:0;

    overflow:hidden;

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    transition:

        transform .22s ease,

        border-color .22s ease,

        box-shadow .22s ease,

        filter .22s ease;

}


.jogador-avatar-selecionavel:hover{

    transform:translateY(-2px) scale(1.04);

    border-color:#fff2a1;

    filter:brightness(1.08);

    box-shadow:

        0 14px 30px rgba(0,0,0,.42),

        0 0 20px rgba(255,224,94,.24);

}


.jogador-avatar-selecionavel:active{

    transform:scale(.97);

}


/*==================================================
    FOTO DO JOGADOR
===================================================*/

.foto-jogador-preparar{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    border-radius:50%;

    object-fit:cover;

    object-position:center;

    z-index:1;

}

/*==================================================
    ESCONDER IMAGENS ENQUANTO NÃO HOUVER FOTO
===================================================*/

.foto-jogador-preparar[hidden],
.foto-computador-preparar[hidden]{

    display:none !important;

}

/*==================================================
    ÍCONE PADRÃO DO JOGADOR
===================================================*/

#iconeJogadorPreparar{

    position:relative;

    z-index:1;

}


/*==================================================
    ÍCONE DA CÂMERA
===================================================*/

.jogador-avatar-editar{

    position:absolute;

    right:-2px;

    bottom:-2px;

    z-index:3;

    width:27px;

    height:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #3c2413;

    border-radius:50%;

    color:#2b1902;

    background:

        linear-gradient(
            145deg,
            #fff18a,
            #ffd440 55%,
            #d99209
        );

    font-size:.72rem;

    box-shadow:0 4px 10px rgba(0,0,0,.45);

    transition:

        transform .2s ease,

        filter .2s ease;

}


.jogador-avatar-selecionavel:hover .jogador-avatar-editar{

    transform:scale(1.1);

    filter:brightness(1.08);

}


/*==================================================
    INPUT OCULTO DA FOTO
===================================================*/

.input-foto-jogador{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/*==================================================
    REGRAS
===================================================*/

.regras-resumo{

    margin-bottom:18px;

    padding:20px;

}


.btn-titulo-regras{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-bottom:18px;

    padding:0 0 14px;

    border:0;

    border-bottom:1px solid rgba(255,215,75,.22);

    color:#fff1ae;

    background:transparent;

    cursor:pointer;

}


.btn-titulo-regras strong{

    font-family:"Bebas Neue", sans-serif;

    font-size:2rem;

    letter-spacing:.06em;

}


.btn-titulo-regras i{

    color:#ffe05e;

    font-size:1.25rem;

}


.lista-regras-resumo{

    display:grid;

    gap:10px;

}


.lista-regras-resumo p{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:7px;

    margin:0;

    padding:12px 14px;

    border-radius:12px;

    color:rgba(255,255,255,.77);

    background:rgba(255,255,255,.045);

    font-size:1rem;

    line-height:1.35;

}


.lista-regras-resumo strong{

    color:#68df76;

    font-weight:800;

}


/*==================================================
    BOTÃO INICIAR
===================================================*/

.btn-iniciar-partida{

    width:100%;

    min-height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    border:2px solid #ffe05e;

    border-radius:18px;

    color:#3d2104;

    background:

        linear-gradient(
            180deg,
            #ffd657,
            #e69a12
        );

    font-family:"Bebas Neue", sans-serif;

    font-size:clamp(1.8rem, 4vw, 2.7rem);

    letter-spacing:.06em;

    text-transform:uppercase;

    cursor:pointer;

    box-shadow:

        0 10px 0 #8d4f05,

        0 18px 32px rgba(0,0,0,.42);

    transition:

        transform .18s ease,

        filter .18s ease,

        box-shadow .18s ease;

}


.btn-iniciar-partida:hover{

    transform:translateY(-3px);

    filter:brightness(1.08);

    box-shadow:

        0 12px 0 #8d4f05,

        0 22px 38px rgba(0,0,0,.48);

}


.btn-iniciar-partida:active{

    transform:translateY(5px);

    box-shadow:

        0 4px 0 #8d4f05,

        0 10px 22px rgba(0,0,0,.35);

}


/*==================================================
    MODAIS
===================================================*/

.modal-preparar{

    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .25s ease,

        visibility .25s ease;

}


.modal-preparar.ativo{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


.modal-preparar-caixa{

    width:min(620px, 100%);

    max-height:88vh;

    padding:22px;

    border:1px solid rgba(255,215,75,.42);

    border-radius:24px;

    background:

        linear-gradient(
            160deg,
            #3f291c,
            #18100c
        );

    box-shadow:0 35px 90px rgba(0,0,0,.7);

    overflow-y:auto;

    transform:translateY(20px) scale(.98);

    transition:transform .25s ease;

}


.modal-preparar.ativo .modal-preparar-caixa{

    transform:translateY(0) scale(1);

}


.modal-preparar-topo{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;

}


.modal-preparar-topo h2{

    margin:0;

    color:#fff0ae;

    font-family:"Bebas Neue", sans-serif;

    font-size:2.2rem;

    letter-spacing:.06em;

}


.btn-fechar-modal-preparar{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border:1px solid rgba(255,215,75,.4);

    border-radius:14px;

    color:#fff;

    background:rgba(255,255,255,.08);

    font-size:1.35rem;

    cursor:pointer;

    transition:

        transform .2s ease,

        color .2s ease,

        border-color .2s ease,

        background .2s ease,

        box-shadow .2s ease;

}


.btn-fechar-modal-preparar:hover{

    transform:rotate(90deg);

    color:#ffe05e;

    border-color:#ffe05e;

    background:rgba(255,215,75,.1);

    box-shadow:0 8px 20px rgba(0,0,0,.3);

}


/*==================================================
    MENU DE OPÇÕES
===================================================*/

.modal-opcoes-caixa{

    width:min(560px, 100%);

    padding:22px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,215,75,.12),
            transparent 34%
        ),

        linear-gradient(
            155deg,
            #42291b 0%,
            #25150e 52%,
            #120b08 100%
        );

    border:1px solid rgba(255,215,75,.48);

    box-shadow:

        0 35px 90px rgba(0,0,0,.78),

        0 0 38px rgba(255,200,50,.08),

        inset 0 1px 0 rgba(255,255,255,.08);

}


/*==================================================
    TÍTULOS COM ÍCONE
===================================================*/

.titulo-modal-opcoes,
.titulo-modal-ajuda,
.titulo-modal-configuracoes,
.titulo-modal-estatisticas,
.titulo-modal-compartilhar,
.titulo-modal-conquistas,
.titulo-modal-fundo{

    display:flex;

    align-items:center;

    gap:12px;

}


.titulo-modal-opcoes > i,
.titulo-modal-ajuda > i,
.titulo-modal-configuracoes > i,
.titulo-modal-estatisticas > i,
.titulo-modal-compartilhar > i,
.titulo-modal-conquistas > i,
.titulo-modal-fundo > i{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border:1px solid rgba(255,215,75,.35);

    border-radius:14px;

    color:#ffe05e;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.18),
            rgba(255,215,75,.04)
        );

    font-size:1.2rem;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.1),

        0 8px 18px rgba(0,0,0,.28);

}


/*==================================================
    LISTA DE OPÇÕES
===================================================*/

.lista-opcoes-partida{

    display:grid;

    gap:11px;

}


.opcao-menu-partida{

    position:relative;

    width:100%;

    min-height:72px;

    display:grid;

    grid-template-columns:52px 1fr 34px;

    align-items:center;

    gap:14px;

    padding:11px 16px;

    overflow:hidden;

    border:1px solid rgba(255,215,75,.18);

    border-radius:16px;

    color:#ffffff;

    text-align:left;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    cursor:pointer;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.055),

        0 9px 22px rgba(0,0,0,.18);

    transition:

        transform .2s ease,

        border-color .2s ease,

        background .2s ease,

        box-shadow .2s ease;

}


.opcao-menu-partida::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            110deg,
            transparent 15%,
            rgba(255,255,255,.08) 48%,
            transparent 80%
        );

    transform:translateX(-120%);

    transition:transform .45s ease;

    pointer-events:none;

}


.opcao-menu-partida:hover{

    transform:translateX(5px);

    border-color:rgba(255,224,94,.75);

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.13),
            rgba(255,255,255,.05)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 13px 28px rgba(0,0,0,.32),

        0 0 20px rgba(255,215,75,.07);

}


.opcao-menu-partida:hover::before{

    transform:translateX(120%);

}


.opcao-menu-partida:active{

    transform:translateX(3px) scale(.985);

}


.opcao-menu-icone{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,215,75,.3);

    border-radius:14px;

    color:#ffe05e;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.16),
            rgba(255,215,75,.035)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.07),

        0 7px 16px rgba(0,0,0,.26);

    transition:

        transform .22s ease,

        background .22s ease,

        border-color .22s ease;

}


.opcao-menu-partida:hover .opcao-menu-icone{

    transform:scale(1.06) rotate(-3deg);

    border-color:#ffe05e;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.24),
            rgba(255,215,75,.07)
        );

}


.opcao-menu-icone i{

    color:inherit;

    font-size:1.35rem;

}


.opcao-menu-texto{

    min-width:0;

    color:#fff4c4;

    font-family:"Bebas Neue", sans-serif;

    font-size:1.72rem;

    letter-spacing:.055em;

    line-height:1;

    text-shadow:0 3px 7px rgba(0,0,0,.45);

}


.opcao-menu-detalhe{

    display:flex;

    align-items:center;

    justify-content:center;

    color:rgba(255,224,94,.7);

    transition:

        color .2s ease,

        transform .2s ease;

}


.opcao-menu-detalhe i{

    font-size:1rem;

}


.opcao-menu-partida:hover .opcao-menu-detalhe{

    color:#ffe05e;

    transform:translateX(3px);

}


.opcao-menu-voltar{

    grid-template-columns:52px 1fr;

    margin-top:5px;

    border-color:rgba(255,255,255,.11);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(0,0,0,.08)
        );

}


.opcao-menu-voltar:hover{

    border-color:rgba(255,255,255,.34);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.025)
        );

}


.opcao-menu-voltar .opcao-menu-icone{

    color:#ffffff;

    border-color:rgba(255,255,255,.17);

    background:rgba(255,255,255,.07);

}


/*==================================================
    CONFIGURAÇÃO DAS REGRAS
===================================================*/

.modal-regras-caixa{

    width:min(720px, 100%);

}


.regras-configuracao{

    display:grid;

    gap:10px;

}


.regra-configuracao{

    position:relative;

    width:100%;

    min-height:72px;

    display:grid;

    grid-template-columns:1fr auto 32px;

    align-items:center;

    gap:12px;

    padding:14px 16px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    color:#fff;

    text-align:left;

    background:rgba(255,255,255,.045);

    cursor:pointer;

    transition:

        background .2s ease,

        border-color .2s ease,

        transform .2s ease;

}


.regra-configuracao:hover{

    transform:translateX(3px);

    border-color:rgba(255,215,75,.55);

    background:rgba(255,255,255,.085);

}


.regra-configuracao span{

    color:rgba(255,255,255,.82);

}


.regra-configuracao strong{

    color:#66dc72;

    text-align:right;

}


.regra-configuracao i{

    color:#66dc72;

}


.btn-concluir-regras{

    width:100%;

    min-height:62px;

    margin-top:20px;

    border:1px solid #ffe05e;

    border-radius:14px;

    color:#3c2205;

    background:linear-gradient(
        180deg,
        #ffd75c,
        #e59c18
    );

    font-family:"Bebas Neue", sans-serif;

    font-size:1.9rem;

    cursor:pointer;

}


/*==================================================
    MODAL SELETOR PREMIUM DE FUNDO
===================================================*/

.modal-fundos-caixa{

    width:min(92vw, 720px);

    max-height:90vh;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    background:

        linear-gradient(
            145deg,
            rgba(22,22,22,.98),
            rgba(8,8,8,.99)
        );

    border:1px solid rgba(255,215,0,.35);

    border-radius:24px;

    box-shadow:

        0 25px 80px rgba(0,0,0,.75),

        inset 0 1px 0 rgba(255,255,255,.06);

}


.titulo-modal-fundo > i{

    width:38px;

    height:38px;

    font-size:18px;

    border-radius:12px;

}


.titulo-modal-fundo h2{

    margin:0;

    color:#ffffff;

    font-size:20px;

    font-weight:800;

    letter-spacing:.2px;

}


.descricao-modal-fundo{

    margin:2px 20px 16px;

    color:rgba(255,255,255,.68);

    font-size:13px;

    line-height:1.5;

}


.grade-fundos-mesa{

    display:grid;

    grid-template-columns:repeat(2, minmax(0,1fr));

    gap:14px;

    padding:4px 20px 20px;

    overflow-y:auto;

    scrollbar-width:thin;

    scrollbar-color:#c99b18 rgba(255,255,255,.06);

}


.grade-fundos-mesa::-webkit-scrollbar{

    width:8px;

}


.grade-fundos-mesa::-webkit-scrollbar-track{

    background:rgba(255,255,255,.05);

    border-radius:20px;

}


.grade-fundos-mesa::-webkit-scrollbar-thumb{

    background:linear-gradient(#ffd700, #a87500);

    border-radius:20px;

}


.opcao-fundo-mesa{

    position:relative;

    min-width:0;

    padding:0;

    overflow:hidden;

    cursor:pointer;

    border-radius:18px;

    border:2px solid rgba(255,255,255,.08);

    background:#151515;

    box-shadow:

        0 10px 24px rgba(0,0,0,.38),

        inset 0 1px 0 rgba(255,255,255,.04);

    transition:

        transform .22s ease,

        border-color .22s ease,

        box-shadow .22s ease,

        filter .22s ease;

}


.opcao-fundo-mesa:hover{

    transform:translateY(-4px) scale(1.01);

    border-color:rgba(255,215,0,.5);

    box-shadow:

        0 16px 32px rgba(0,0,0,.55),

        0 0 24px rgba(255,215,0,.12);

}


.opcao-fundo-mesa:active{

    transform:translateY(-1px) scale(.99);

}


.opcao-fundo-mesa.selecionado{

    border-color:#ffd700;

    box-shadow:

        0 15px 34px rgba(0,0,0,.6),

        0 0 0 3px rgba(255,215,0,.14),

        0 0 28px rgba(255,200,0,.2);

}


.opcao-fundo-mesa.selecionado .check-fundo{

    opacity:1;

    visibility:visible;

    transform:scale(1) rotate(0deg);

}


.miniatura-fundo{

    position:relative;

    display:block;

    width:100%;

    height:110px;

    overflow:hidden;

}


.miniatura-fundo::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            transparent 40%,
            rgba(0,0,0,.22)
        );

    pointer-events:none;

}


.miniatura-fundo::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(255,255,255,.12),
            transparent 45%
        );

    pointer-events:none;

}


.nome-fundo{

    display:block;

    padding:12px 10px 13px;

    color:#ffffff;

    font-size:13px;

    font-weight:800;

    text-align:center;

    letter-spacing:.2px;

    background:

        linear-gradient(
            180deg,
            rgba(28,28,28,.98),
            rgba(12,12,12,.98)
        );

}


.check-fundo{

    position:absolute;

    top:10px;

    right:10px;

    width:31px;

    height:31px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#171100;

    font-size:14px;

    border-radius:50%;

    background:

        linear-gradient(
            145deg,
            #fff59a,
            #ffd700 45%,
            #d29b00
        );

    border:2px solid rgba(255,255,255,.65);

    box-shadow:

        0 5px 16px rgba(0,0,0,.45),

        0 0 18px rgba(255,215,0,.35);

    opacity:0;

    visibility:hidden;

    transform:scale(.55) rotate(-20deg);

    transition:

        opacity .2s ease,

        visibility .2s ease,

        transform .25s ease;

}


/*==================================================
    FUNDOS
===================================================*/

.fundo-feltro-verde{

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.08),
            transparent 58%
        ),

        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 2px,
            transparent 2px,
            transparent 5px
        ),

        linear-gradient(
            135deg,
            #176a43,
            #0b3f29 55%,
            #062b1c
        );

}


.fundo-feltro-vermelho{

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.08),
            transparent 58%
        ),

        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 2px,
            transparent 2px,
            transparent 5px
        ),

        linear-gradient(
            135deg,
            #a61e2d,
            #67111b 58%,
            #3d090f
        );

}


.fundo-feltro-azul{

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.1),
            transparent 58%
        ),

        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 2px,
            transparent 2px,
            transparent 5px
        ),

        linear-gradient(
            135deg,
            #12679b,
            #0c416a 56%,
            #062942
        );

}


.fundo-madeira-clara{

    background:

        repeating-linear-gradient(
            5deg,
            rgba(88,45,14,.16) 0,
            rgba(88,45,14,.16) 2px,
            transparent 2px,
            transparent 15px
        ),

        repeating-linear-gradient(
            92deg,
            rgba(255,255,255,.06) 0,
            rgba(255,255,255,.06) 1px,
            transparent 1px,
            transparent 28px
        ),

        linear-gradient(
            135deg,
            #d39a59,
            #b97537 52%,
            #885024
        );

}


.fundo-madeira-escura{

    background:

        repeating-linear-gradient(
            6deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 2px,
            transparent 2px,
            transparent 14px
        ),

        repeating-linear-gradient(
            92deg,
            rgba(0,0,0,.16) 0,
            rgba(0,0,0,.16) 1px,
            transparent 1px,
            transparent 27px
        ),

        linear-gradient(
            135deg,
            #5b321c,
            #32190f 55%,
            #1b0c07
        );

}


.fundo-couro-preto{

    background:

        radial-gradient(
            circle at 25% 25%,
            rgba(255,255,255,.08) 0,
            transparent 2px
        )
        0 0 / 18px 18px,

        radial-gradient(
            circle at 75% 75%,
            rgba(0,0,0,.45) 0,
            transparent 2px
        )
        0 0 / 18px 18px,

        linear-gradient(
            145deg,
            #2d2d2d,
            #101010 58%,
            #050505
        );

}


.fundo-ouro-gaucho{

    background:

        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.08) 0,
            rgba(255,255,255,.08) 3px,
            transparent 3px,
            transparent 12px
        ),

        radial-gradient(
            circle at 50% 35%,
            #ffe995,
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #d9a514,
            #8d5a00 58%,
            #4d2b00
        );

}


.fundo-rio-grande{

    background:

        linear-gradient(
            145deg,
            transparent 0 31%,
            rgba(255,255,255,.12) 31% 33%,
            transparent 33% 65%,
            rgba(255,255,255,.12) 65% 67%,
            transparent 67%
        ),

        linear-gradient(
            135deg,
            #197743 0 33%,
            #d5b600 33% 66%,
            #9e1d25 66% 100%
        );

}


.fundo-chimarrao{

    background:

        radial-gradient(
            ellipse at 50% 76%,
            #8f5b2d 0 17%,
            #613719 18% 26%,
            transparent 27%
        ),

        radial-gradient(
            ellipse at 50% 66%,
            #6ca52b 0 15%,
            #3a7118 16% 23%,
            transparent 24%
        ),

        linear-gradient(
            75deg,
            transparent 47%,
            #c9c9c9 48% 51%,
            transparent 52%
        ),

        linear-gradient(
            135deg,
            #416f2b,
            #1f3b1a 58%,
            #10240e
        );

}


.fundo-noturno{

    background:

        radial-gradient(
            circle at 72% 22%,
            rgba(120,170,255,.35),
            transparent 20%
        ),

        radial-gradient(
            circle at 18% 78%,
            rgba(108,34,165,.28),
            transparent 25%
        ),

        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 10px
        ),

        linear-gradient(
            145deg,
            #182338,
            #0b101d 60%,
            #03050b
        );

}


/*==================================================
    AÇÕES DO MODAL DE FUNDO
===================================================*/

.acoes-modal-fundo{

    display:grid;

    grid-template-columns:1fr 1.25fr;

    gap:12px;

    padding:16px 20px 20px;

    border-top:1px solid rgba(255,255,255,.07);

    background:rgba(0,0,0,.25);

}


.btn-cancelar-fundo,
.btn-aplicar-fundo{

    min-height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:14px;

    cursor:pointer;

    font-size:14px;

    font-weight:900;

    transition:

        transform .2s ease,

        filter .2s ease,

        box-shadow .2s ease;

}


.btn-cancelar-fundo{

    color:rgba(255,255,255,.82);

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.11);

}


.btn-cancelar-fundo:hover{

    background:rgba(255,255,255,.11);

    transform:translateY(-2px);

}


.btn-aplicar-fundo{

    color:#1a1400;

    background:

        linear-gradient(
            135deg,
            #fff17d,
            #ffd700 48%,
            #bd8200
        );

    border:1px solid rgba(255,255,255,.45);

    box-shadow:

        0 10px 24px rgba(255,190,0,.18),

        inset 0 1px 0 rgba(255,255,255,.5);

}


.btn-aplicar-fundo:hover{

    transform:translateY(-2px);

    filter:brightness(1.08);

    box-shadow:0 14px 30px rgba(255,190,0,.28);

}


.btn-cancelar-fundo:active,
.btn-aplicar-fundo:active{

    transform:translateY(0) scale(.98);

}


/*==================================================
    CORREÇÃO DE ABERTURA DOS MODAIS
===================================================*/

.modal-preparar{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.78);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    z-index:9999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .25s ease,

        visibility .25s ease;

}


.modal-preparar.ativo{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


.modal-preparar .modal-preparar-caixa{

    transform:translateY(25px) scale(.96);

    opacity:0;

    transition:

        transform .28s ease,

        opacity .28s ease;

}


.modal-preparar.ativo .modal-preparar-caixa{

    transform:translateY(0) scale(1);

    opacity:1;

}


/*==================================================
    CORREÇÃO DEFINITIVA — SELETOR DE FUNDOS
===================================================*/

#modalSelecionarFundo{

    position:fixed !important;

    inset:0 !important;

    width:100vw !important;

    height:100vh !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    padding:16px !important;

    background:rgba(0,0,0,.82) !important;

    z-index:999999 !important;

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

}


#modalSelecionarFundo.ativo{

    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

}


#modalSelecionarFundo .modal-fundos-caixa{

    display:flex !important;

    opacity:1 !important;

    visibility:visible !important;

    position:relative !important;

    z-index:1000000 !important;

}


#modalSelecionarFundo:not(.ativo) .modal-fundos-caixa{

    transform:translateY(20px) scale(.96) !important;

}


#modalSelecionarFundo.ativo .modal-fundos-caixa{

    transform:translateY(0) scale(1) !important;

}


/*==================================================
    MODAL AJUDA
===================================================*/

.modal-ajuda-caixa{

    width:min(760px, 100%);

    max-height:90vh;

    padding:22px;

    overflow-y:auto;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,215,75,.13),
            transparent 34%
        ),

        linear-gradient(
            155deg,
            #41291c 0%,
            #25150e 52%,
            #120b08 100%
        );

    border:1px solid rgba(255,215,75,.48);

    box-shadow:

        0 35px 90px rgba(0,0,0,.78),

        0 0 38px rgba(255,200,50,.08),

        inset 0 1px 0 rgba(255,255,255,.08);

    scrollbar-width:thin;

    scrollbar-color:#c99b18 rgba(255,255,255,.06);

}


.ajuda-destaque{

    display:grid;

    grid-template-columns:72px 1fr;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

    padding:18px;

    border:1px solid rgba(255,215,75,.25);

    border-radius:18px;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.12),
            rgba(255,255,255,.035)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.07),

        0 12px 26px rgba(0,0,0,.22);

}


.ajuda-destaque-icone{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #ffe05e;

    border-radius:50%;

    color:#ffe05e;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.22),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #176337,
            #0b2f1d
        );

    font-size:1.65rem;

    box-shadow:

        0 10px 24px rgba(0,0,0,.35),

        0 0 22px rgba(255,215,75,.08);

}


.ajuda-destaque strong{

    display:block;

    margin-bottom:5px;

    color:#fff1ae;

    font-family:"Bebas Neue", sans-serif;

    font-size:1.8rem;

    letter-spacing:.06em;

}


.ajuda-destaque p{

    margin:0;

    color:rgba(255,255,255,.76);

    font-size:.98rem;

    line-height:1.55;

}


.lista-ajuda-partida{

    display:grid;

    gap:12px;

}


.item-ajuda-partida{

    position:relative;

    display:grid;

    grid-template-columns:48px 1fr;

    gap:14px;

    padding:16px;

    overflow:hidden;

    border:1px solid rgba(255,215,75,.16);

    border-radius:16px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.045),

        0 9px 20px rgba(0,0,0,.16);

    transition:

        transform .2s ease,

        border-color .2s ease,

        background .2s ease,

        box-shadow .2s ease;

}


.item-ajuda-partida::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            110deg,
            transparent 15%,
            rgba(255,255,255,.06) 48%,
            transparent 80%
        );

    transform:translateX(-120%);

    transition:transform .5s ease;

    pointer-events:none;

}


.item-ajuda-partida:hover{

    transform:translateY(-2px);

    border-color:rgba(255,224,94,.5);

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.1),
            rgba(255,255,255,.04)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.07),

        0 13px 26px rgba(0,0,0,.26);

}


.item-ajuda-partida:hover::before{

    transform:translateX(120%);

}


.item-ajuda-numero{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,215,75,.4);

    border-radius:14px;

    color:#3d2104;

    background:

        linear-gradient(
            145deg,
            #fff17d,
            #ffd700 48%,
            #bd8200
        );

    font-family:"Bebas Neue", sans-serif;

    font-size:1.45rem;

    box-shadow:

        0 7px 16px rgba(0,0,0,.28),

        inset 0 1px 0 rgba(255,255,255,.5);

}


.item-ajuda-conteudo{

    min-width:0;

}


.item-ajuda-conteudo h3{

    margin:1px 0 7px;

    color:#fff1ae;

    font-family:"Bebas Neue", sans-serif;

    font-size:1.5rem;

    letter-spacing:.05em;

}


.item-ajuda-conteudo p{

    margin:0;

    color:rgba(255,255,255,.74);

    font-size:.95rem;

    line-height:1.55;

}


.ordem-cartas-ajuda{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin-top:12px;

}


.ordem-cartas-ajuda span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:46px;

    min-height:34px;

    padding:6px 10px;

    border:1px solid rgba(255,215,75,.25);

    border-radius:10px;

    color:#ffe676;

    background:rgba(255,215,75,.08);

    font-weight:800;

}


.ordem-cartas-ajuda i{

    color:rgba(255,224,94,.62);

    font-size:.78rem;

}


.tabela-pontos-ajuda{

    display:grid;

    grid-template-columns:repeat(2, minmax(0,1fr));

    gap:9px;

    margin-top:12px;

}


.tabela-pontos-ajuda div{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    min-height:44px;

    padding:10px 12px;

    border:1px solid rgba(255,255,255,.07);

    border-radius:11px;

    background:rgba(255,255,255,.04);

}


.tabela-pontos-ajuda span{

    color:rgba(255,255,255,.82);

}


.tabela-pontos-ajuda strong{

    color:#66dc72;

    text-align:right;

}


.btn-voltar-ajuda-partida,
.btn-voltar-configuracoes-partida,
.btn-voltar-estatisticas-partida,
.btn-voltar-compartilhar-partida,
.btn-voltar-conquistas-partida{

    width:100%;

    min-height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:20px;

    border:1px solid #ffe05e;

    border-radius:15px;

    color:#3d2104;

    background:

        linear-gradient(
            180deg,
            #ffd75c,
            #e59c18
        );

    font-family:"Bebas Neue", sans-serif;

    font-size:1.75rem;

    letter-spacing:.05em;

    cursor:pointer;

    box-shadow:

        0 8px 0 #8d4f05,

        0 16px 28px rgba(0,0,0,.32);

    transition:

        transform .18s ease,

        filter .18s ease,

        box-shadow .18s ease;

}


.btn-voltar-ajuda-partida:hover,
.btn-voltar-configuracoes-partida:hover,
.btn-voltar-estatisticas-partida:hover,
.btn-voltar-compartilhar-partida:hover,
.btn-voltar-conquistas-partida:hover{

    transform:translateY(-2px);

    filter:brightness(1.07);

    box-shadow:

        0 10px 0 #8d4f05,

        0 20px 34px rgba(0,0,0,.4);

}


.btn-voltar-ajuda-partida:active,
.btn-voltar-configuracoes-partida:active,
.btn-voltar-estatisticas-partida:active,
.btn-voltar-compartilhar-partida:active,
.btn-voltar-conquistas-partida:active{

    transform:translateY(4px);

    box-shadow:

        0 4px 0 #8d4f05,

        0 10px 20px rgba(0,0,0,.28);

}


.modal-ajuda-caixa::-webkit-scrollbar,
.modal-configuracoes-caixa::-webkit-scrollbar,
.modal-estatisticas-caixa::-webkit-scrollbar,
.modal-compartilhar-caixa::-webkit-scrollbar,
.modal-conquistas-caixa::-webkit-scrollbar{

    width:8px;

}


.modal-ajuda-caixa::-webkit-scrollbar-track,
.modal-configuracoes-caixa::-webkit-scrollbar-track,
.modal-estatisticas-caixa::-webkit-scrollbar-track,
.modal-compartilhar-caixa::-webkit-scrollbar-track,
.modal-conquistas-caixa::-webkit-scrollbar-track{

    background:rgba(255,255,255,.05);

    border-radius:20px;

}


.modal-ajuda-caixa::-webkit-scrollbar-thumb,
.modal-configuracoes-caixa::-webkit-scrollbar-thumb,
.modal-estatisticas-caixa::-webkit-scrollbar-thumb,
.modal-compartilhar-caixa::-webkit-scrollbar-thumb,
.modal-conquistas-caixa::-webkit-scrollbar-thumb{

    background:linear-gradient(#ffd700, #a87500);

    border-radius:20px;

}


/*==================================================
    MODAL CONFIGURAÇÕES
===================================================*/

.modal-configuracoes-caixa{

    width:min(760px, 100%);

    max-height:90vh;

    padding:22px;

    overflow-y:auto;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(56,160,255,.12),
            transparent 34%
        ),

        linear-gradient(
            155deg,
            #202c37 0%,
            #171b20 52%,
            #0b0d10 100%
        );

    border:1px solid rgba(255,215,75,.38);

    box-shadow:

        0 35px 90px rgba(0,0,0,.8),

        0 0 38px rgba(63,163,255,.07),

        inset 0 1px 0 rgba(255,255,255,.07);

    scrollbar-width:thin;

    scrollbar-color:#c99b18 rgba(255,255,255,.06);

}


.descricao-modal-configuracoes{

    margin:-5px 0 18px;

    color:rgba(255,255,255,.67);

    font-size:.95rem;

    line-height:1.5;

}


.lista-configuracoes-partida{

    display:grid;

    gap:11px;

}


.item-configuracao-partida{

    position:relative;

    min-height:76px;

    display:grid;

    grid-template-columns:52px minmax(0,1fr) auto;

    align-items:center;

    gap:14px;

    width:100%;

    padding:12px 15px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    color:#ffffff;

    text-align:left;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.045),

        0 9px 20px rgba(0,0,0,.16);

    transition:

        transform .2s ease,

        border-color .2s ease,

        background .2s ease,

        box-shadow .2s ease;

}


.item-configuracao-partida:hover{

    transform:translateX(3px);

    border-color:rgba(255,215,75,.48);

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.09),
            rgba(255,255,255,.04)
        );

    box-shadow:

        0 13px 25px rgba(0,0,0,.26),

        inset 0 1px 0 rgba(255,255,255,.07);

}


.configuracao-icone{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,215,75,.25);

    border-radius:14px;

    color:#ffe05e;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.15),
            rgba(255,215,75,.035)
        );

    font-size:1.2rem;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.06),

        0 7px 16px rgba(0,0,0,.22);

}


.configuracao-informacao{

    min-width:0;

}


.configuracao-informacao strong{

    display:block;

    margin-bottom:5px;

    color:#fff3bd;

    font-size:1rem;

}


.configuracao-informacao span{

    display:block;

    color:rgba(255,255,255,.6);

    font-size:.83rem;

    line-height:1.35;

}


.controle-alternador{

    position:relative;

    width:56px;

    height:30px;

    display:inline-flex;

    flex-shrink:0;

    cursor:pointer;

}


.controle-alternador input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}


.controle-alternador-visual{

    position:absolute;

    inset:0;

    border:1px solid rgba(255,255,255,.14);

    border-radius:999px;

    background:#393d42;

    box-shadow:

        inset 0 3px 8px rgba(0,0,0,.3),

        0 2px 8px rgba(0,0,0,.2);

    transition:

        background .22s ease,

        border-color .22s ease,

        box-shadow .22s ease;

}


.controle-alternador-visual::before{

    content:"";

    position:absolute;

    top:3px;

    left:3px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #d7d7d7
        );

    box-shadow:0 4px 10px rgba(0,0,0,.38);

    transition:transform .22s ease;

}


.controle-alternador input:checked + .controle-alternador-visual{

    border-color:rgba(255,215,75,.65);

    background:

        linear-gradient(
            135deg,
            #f3c500,
            #b87400
        );

    box-shadow:

        0 0 18px rgba(255,205,0,.16),

        inset 0 2px 5px rgba(255,255,255,.12);

}


.controle-alternador input:checked + .controle-alternador-visual::before{

    transform:translateX(26px);

}


.controle-alternador input:focus-visible + .controle-alternador-visual{

    outline:2px solid #ffe05e;

    outline-offset:3px;

}


.configuracao-com-seletor{

    grid-template-columns:52px minmax(0,1fr) minmax(130px,170px);

}


.seletor-configuracao{

    width:100%;

    min-height:42px;

    padding:0 36px 0 12px;

    border:1px solid rgba(255,215,75,.28);

    border-radius:12px;

    color:#fff4c4;

    background:#17191d;

    font-weight:800;

    cursor:pointer;

    outline:none;

}


.seletor-configuracao:focus{

    border-color:#ffe05e;

    box-shadow:0 0 0 3px rgba(255,215,75,.1);

}


.configuracao-botao{

    grid-template-columns:52px minmax(0,1fr) 24px;

    cursor:pointer;

}


.configuracao-botao > i{

    color:#ffe05e;

    transition:transform .2s ease;

}


.configuracao-botao:hover > i{

    transform:translateX(4px);

}


.acoes-configuracoes-partida{

    display:grid;

    grid-template-columns:1fr 1.35fr;

    gap:12px;

    margin-top:18px;

}


.btn-restaurar-configuracoes,
.btn-salvar-configuracoes{

    min-height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:14px;

    font-weight:900;

    cursor:pointer;

    transition:

        transform .2s ease,

        border-color .2s ease,

        filter .2s ease,

        box-shadow .2s ease;

}


.btn-restaurar-configuracoes{

    border:1px solid rgba(255,255,255,.15);

    color:rgba(255,255,255,.85);

    background:rgba(255,255,255,.07);

}


.btn-restaurar-configuracoes:hover{

    transform:translateY(-2px);

    border-color:rgba(255,255,255,.35);

    background:rgba(255,255,255,.1);

}


.btn-salvar-configuracoes{

    border:1px solid rgba(255,255,255,.38);

    color:#2c1c00;

    background:

        linear-gradient(
            135deg,
            #fff17d,
            #ffd700 48%,
            #c58900
        );

    box-shadow:

        0 10px 24px rgba(255,190,0,.17),

        inset 0 1px 0 rgba(255,255,255,.45);

}


.btn-salvar-configuracoes:hover{

    transform:translateY(-2px);

    filter:brightness(1.08);

    box-shadow:0 14px 30px rgba(255,190,0,.27);

}


/*==================================================
    MODAL ESTATÍSTICAS
===================================================*/

.modal-estatisticas-caixa{

    width:min(820px, 100%);

    max-height:90vh;

    padding:22px;

    overflow-y:auto;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,215,75,.14),
            transparent 32%
        ),

        linear-gradient(
            155deg,
            #352618 0%,
            #18120d 55%,
            #0c0907 100%
        );

    border:1px solid rgba(255,215,75,.46);

    box-shadow:

        0 35px 90px rgba(0,0,0,.82),

        0 0 40px rgba(255,201,0,.07),

        inset 0 1px 0 rgba(255,255,255,.07);

    scrollbar-width:thin;

    scrollbar-color:#c99b18 rgba(255,255,255,.06);

}


.estatisticas-destaque{

    display:grid;

    grid-template-columns:78px 1fr;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

    padding:18px;

    border:1px solid rgba(255,215,75,.28);

    border-radius:18px;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.13),
            rgba(255,255,255,.035)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 12px 28px rgba(0,0,0,.24);

}


.estatisticas-destaque-medalha{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #ffe05e;

    border-radius:50%;

    color:#3d2104;

    background:

        radial-gradient(
            circle at 35% 25%,
            #fff8b2,
            transparent 28%
        ),

        linear-gradient(
            145deg,
            #ffe976,
            #d79b06
        );

    font-size:1.8rem;

    box-shadow:

        0 12px 28px rgba(0,0,0,.36),

        0 0 24px rgba(255,215,0,.18);

}


.estatisticas-destaque span{

    display:block;

    margin-bottom:4px;

    color:rgba(255,255,255,.68);

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.08em;

}


.estatisticas-destaque strong{

    display:block;

    color:#fff1ae;

    font-family:"Bebas Neue", sans-serif;

    font-size:2rem;

    letter-spacing:.06em;

}


.estatisticas-destaque p{

    margin:4px 0 0;

    color:rgba(255,255,255,.67);

    font-size:.9rem;

}


.grade-estatisticas-partida{

    display:grid;

    grid-template-columns:repeat(2, minmax(0,1fr));

    gap:12px;

}


.card-estatistica-partida{

    position:relative;

    min-height:122px;

    display:grid;

    grid-template-columns:52px 1fr;

    grid-template-rows:auto auto;

    align-items:center;

    gap:5px 14px;

    padding:16px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    border-radius:17px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.045),

        0 10px 22px rgba(0,0,0,.18);

    transition:

        transform .2s ease,

        border-color .2s ease,

        box-shadow .2s ease;

}


.card-estatistica-partida::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            110deg,
            transparent 15%,
            rgba(255,255,255,.06) 48%,
            transparent 80%
        );

    transform:translateX(-120%);

    transition:transform .48s ease;

    pointer-events:none;

}


.card-estatistica-partida:hover{

    transform:translateY(-3px);

    border-color:rgba(255,215,75,.42);

    box-shadow:

        0 16px 30px rgba(0,0,0,.3),

        0 0 20px rgba(255,215,75,.05);

}


.card-estatistica-partida:hover::before{

    transform:translateX(120%);

}


.card-estatistica-icone{

    grid-row:1 / 3;

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,215,75,.28);

    border-radius:15px;

    color:#ffe05e;

    background:rgba(255,215,75,.1);

    font-size:1.25rem;

}


.card-estatistica-icone.vitoria{

    color:#ffe05e;

    background:rgba(255,215,0,.11);

}


.card-estatistica-icone.derrota{

    color:#d7dde5;

    background:rgba(205,215,225,.09);

}


.card-estatistica-icone.aproveitamento{

    color:#67df79;

    background:rgba(66,210,100,.09);

}


.card-estatistica-icone.sequencia{

    color:#ff863d;

    background:rgba(255,90,30,.1);

}


.card-estatistica-icone.cartas{

    color:#84bfff;

    background:rgba(61,150,255,.1);

}


.card-estatistica-icone.pontuacao{

    color:#ffd95f;

    background:rgba(255,200,50,.1);

}


.card-estatistica-icone.tempo{

    color:#d7a7ff;

    background:rgba(165,90,255,.1);

}


.card-estatistica-partida span{

    align-self:end;

    color:rgba(255,255,255,.62);

    font-size:.88rem;

}


.card-estatistica-partida strong{

    align-self:start;

    color:#fff3bf;

    font-family:"Bebas Neue", sans-serif;

    font-size:2rem;

    letter-spacing:.04em;

}


.progresso-estatisticas-partida{

    margin-top:18px;

    padding:16px;

    border:1px solid rgba(255,215,75,.2);

    border-radius:16px;

    background:rgba(255,255,255,.04);

}


.progresso-estatisticas-topo{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-bottom:10px;

}


.progresso-estatisticas-topo span{

    color:rgba(255,255,255,.72);

    font-size:.9rem;

}


.progresso-estatisticas-topo strong{

    color:#ffe05e;

}


.barra-progresso-estatisticas{

    height:13px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(0,0,0,.38);

    box-shadow:inset 0 3px 7px rgba(0,0,0,.45);

}


.barra-progresso-estatisticas-preenchimento{

    width:0;

    height:100%;

    border-radius:inherit;

    background:

        linear-gradient(
            90deg,
            #b87300,
            #ffd700,
            #fff095
        );

    box-shadow:0 0 18px rgba(255,215,0,.28);

    transition:width .6s ease;

}


/*==================================================
    MODAL COMPARTILHAR
===================================================*/

.modal-compartilhar-caixa{

    width:min(620px, 100%);

    max-height:90vh;

    padding:22px;

    overflow-y:auto;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(46,207,111,.12),
            transparent 34%
        ),

        linear-gradient(
            155deg,
            #173124 0%,
            #111b15 52%,
            #080d0a 100%
        );

    border:1px solid rgba(255,215,75,.4);

    box-shadow:

        0 35px 90px rgba(0,0,0,.82),

        0 0 38px rgba(36,195,100,.07),

        inset 0 1px 0 rgba(255,255,255,.07);

    scrollbar-width:thin;

    scrollbar-color:#c99b18 rgba(255,255,255,.06);

}


.compartilhar-destaque{

    padding:22px 18px;

    text-align:center;

    border:1px solid rgba(255,215,75,.23);

    border-radius:20px;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.1),
            rgba(255,255,255,.03)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.06),

        0 14px 28px rgba(0,0,0,.22);

}


.compartilhar-logo{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 13px;

    border:2px solid #ffe05e;

    border-radius:50%;

    color:#ffe05e;

    background:

        radial-gradient(
            circle at 35% 28%,
            rgba(255,255,255,.24),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #176337,
            #0b2f1d
        );

    font-size:1.8rem;

    box-shadow:

        0 12px 28px rgba(0,0,0,.36),

        0 0 24px rgba(255,215,75,.12);

}


.compartilhar-destaque h3{

    margin:0;

    color:#fff1ae;

    font-family:"Bebas Neue", sans-serif;

    font-size:2rem;

    letter-spacing:.06em;

}


.estrelas-compartilhar{

    display:flex;

    justify-content:center;

    gap:5px;

    margin:9px 0;

    color:#ffd700;

    filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));

}


.compartilhar-destaque p{

    max-width:430px;

    margin:0 auto;

    color:rgba(255,255,255,.7);

    font-size:.92rem;

    line-height:1.5;

}


.convite-compartilhar{

    position:relative;

    margin:16px 0;

    padding:17px 17px 17px 48px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:15px;

    background:rgba(255,255,255,.045);

}


.convite-compartilhar > i{

    position:absolute;

    top:17px;

    left:17px;

    color:#ffe05e;

    font-size:1.2rem;

}


.convite-compartilhar p{

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:.91rem;

    line-height:1.55;

}


.lista-botoes-compartilhar{

    display:grid;

    gap:11px;

}


.btn-compartilhar{

    width:100%;

    min-height:66px;

    display:grid;

    grid-template-columns:48px 1fr 28px;

    align-items:center;

    gap:13px;

    padding:9px 15px;

    border:1px solid rgba(255,255,255,.1);

    border-radius:16px;

    color:#ffffff;

    text-align:left;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    cursor:pointer;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.05),

        0 9px 20px rgba(0,0,0,.18);

    transition:

        transform .2s ease,

        border-color .2s ease,

        box-shadow .2s ease,

        background .2s ease;

}


.btn-compartilhar:hover{

    transform:translateX(4px);

    border-color:rgba(255,215,75,.48);

    box-shadow:0 13px 27px rgba(0,0,0,.28);

}


.btn-compartilhar > span{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    font-size:1.35rem;

}


.btn-compartilhar strong{

    color:#fff4c4;

    font-size:1rem;

}


.btn-compartilhar > i{

    color:rgba(255,255,255,.58);

}


.btn-compartilhar.whatsapp > span{

    color:#ffffff;

    background:linear-gradient(145deg, #36d46b, #13883a);

}


.btn-compartilhar.copiar > span{

    color:#ffffff;

    background:linear-gradient(145deg, #4998ff, #1953a4);

}


.btn-compartilhar.nativo > span{

    color:#2c1c00;

    background:linear-gradient(145deg, #ffe97a, #c98b00);

}


.mensagem-compartilhamento{

    min-height:22px;

    margin-top:12px;

    color:#75e783;

    text-align:center;

    font-size:.88rem;

    font-weight:800;

}


/*==================================================
    MODAL CONQUISTAS
===================================================*/

.modal-conquistas-caixa{

    width:min(820px, 100%);

    max-height:90vh;

    padding:22px;

    overflow-y:auto;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,215,75,.15),
            transparent 33%
        ),

        linear-gradient(
            155deg,
            #3c2918 0%,
            #21150d 52%,
            #0e0906 100%
        );

    border:1px solid rgba(255,215,75,.48);

    box-shadow:

        0 35px 90px rgba(0,0,0,.84),

        0 0 42px rgba(255,196,0,.08),

        inset 0 1px 0 rgba(255,255,255,.07);

    scrollbar-width:thin;

    scrollbar-color:#c99b18 rgba(255,255,255,.06);

}


.conquistas-resumo{

    display:grid;

    grid-template-columns:68px 1fr;

    align-items:center;

    gap:15px;

    padding:16px;

    border:1px solid rgba(255,215,75,.25);

    border-radius:18px;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.12),
            rgba(255,255,255,.03)
        );

}


.conquistas-resumo-icone{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #ffe05e;

    border-radius:50%;

    color:#3c2205;

    background:

        linear-gradient(
            145deg,
            #fff08c,
            #d99b00
        );

    font-size:1.55rem;

    box-shadow:

        0 10px 23px rgba(0,0,0,.34),

        0 0 20px rgba(255,215,0,.16);

}


.conquistas-resumo span{

    display:block;

    margin-bottom:4px;

    color:rgba(255,255,255,.66);

    font-size:.87rem;

}


.conquistas-resumo strong{

    color:#fff1ae;

    font-family:"Bebas Neue", sans-serif;

    font-size:1.8rem;

    letter-spacing:.04em;

}


.conquistas-resumo strong span{

    display:inline;

    color:inherit;

    font-size:inherit;

}


.barra-conquistas{

    height:13px;

    margin:12px 0 18px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(0,0,0,.42);

    box-shadow:inset 0 3px 7px rgba(0,0,0,.48);

}


.barra-conquistas-preenchimento{

    width:0;

    height:100%;

    border-radius:inherit;

    background:

        linear-gradient(
            90deg,
            #b36f00,
            #ffd700,
            #fff19a
        );

    box-shadow:0 0 18px rgba(255,215,0,.3);

    transition:width .6s ease;

}


.grade-conquistas-partida{

    display:grid;

    grid-template-columns:repeat(2, minmax(0,1fr));

    gap:12px;

}


.card-conquista-partida{

    position:relative;

    min-height:142px;

    display:grid;

    grid-template-columns:64px minmax(0,1fr) 32px;

    align-items:center;

    gap:14px;

    padding:15px;

    overflow:hidden;

    border:1px solid rgba(255,215,75,.2);

    border-radius:18px;

    background:

        linear-gradient(
            145deg,
            rgba(255,215,75,.085),
            rgba(255,255,255,.03)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.055),

        0 11px 24px rgba(0,0,0,.2);

    transition:

        transform .22s ease,

        border-color .22s ease,

        filter .22s ease,

        box-shadow .22s ease;

}


.card-conquista-partida::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            110deg,
            transparent 15%,
            rgba(255,255,255,.07) 48%,
            transparent 80%
        );

    transform:translateX(-120%);

    transition:transform .5s ease;

    pointer-events:none;

}


.card-conquista-partida:hover{

    transform:translateY(-3px);

    border-color:rgba(255,215,75,.55);

    box-shadow:

        0 17px 32px rgba(0,0,0,.32),

        0 0 24px rgba(255,215,75,.06);

}


.card-conquista-partida:hover::before{

    transform:translateX(120%);

}


.card-conquista-partida.bloqueada{

    filter:saturate(.45);

    border-color:rgba(255,255,255,.09);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

}


.card-conquista-partida.desbloqueada{

    filter:none;

    border-color:rgba(255,215,75,.6);

    box-shadow:

        0 15px 32px rgba(0,0,0,.3),

        0 0 24px rgba(255,215,75,.11);

}


.conquista-medalha{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:1.5rem;

    box-shadow:

        0 10px 22px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.4);

}


.conquista-medalha.bronze{

    color:#3b1a06;

    border:2px solid #d18b45;

    background:linear-gradient(145deg, #e8ad70, #9b511f);

}


.conquista-medalha.prata{

    color:#30343a;

    border:2px solid #edf1f5;

    background:linear-gradient(145deg, #ffffff, #9da6af);

}


.conquista-medalha.ouro{

    color:#3c2300;

    border:2px solid #ffe56d;

    background:linear-gradient(145deg, #fff397, #c88a00);

}


.conquista-medalha.fogo{

    color:#ffffff;

    border:2px solid #ff9c46;

    background:linear-gradient(145deg, #ff9b36, #9e1d0f);

}


.conquista-medalha.pontos{

    color:#3d2104;

    border:2px solid #ffe66a;

    background:linear-gradient(145deg, #fff49a, #d7a400);

}


.conquista-medalha.mestre{

    color:#3d2104;

    border:2px solid #fff09a;

    background:

        radial-gradient(
            circle at 35% 25%,
            #ffffff,
            transparent 28%
        ),

        linear-gradient(
            145deg,
            #fff393,
            #d49600
        );

    box-shadow:

        0 10px 22px rgba(0,0,0,.35),

        0 0 24px rgba(255,215,0,.2);

}


.conquista-conteudo{

    min-width:0;

}


.conquista-conteudo h3{

    margin:0 0 5px;

    color:#fff1ae;

    font-family:"Bebas Neue", sans-serif;

    font-size:1.5rem;

    letter-spacing:.05em;

}


.conquista-conteudo p{

    margin:0 0 9px;

    color:rgba(255,255,255,.62);

    font-size:.84rem;

    line-height:1.4;

}


.conquista-progresso{

    color:rgba(255,255,255,.62);

    font-size:.78rem;

}


.conquista-progresso strong{

    color:#ffe05e;

}


.conquista-status{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:rgba(255,255,255,.58);

    background:rgba(0,0,0,.25);

}


.card-conquista-partida.desbloqueada .conquista-status{

    color:#193006;

    background:linear-gradient(145deg, #a5f16a, #4fae28);

}


.card-conquista-partida.desbloqueada .conquista-status i::before{

    content:"\f00c";

}


/*==================================================
    RESPONSIVO — MENU DE OPÇÕES
===================================================*/

@media (max-width:520px){

    .modal-opcoes-caixa{

        padding:17px;

    }


    .lista-opcoes-partida{

        gap:9px;

    }


    .opcao-menu-partida{

        min-height:64px;

        grid-template-columns:46px 1fr 28px;

        gap:11px;

        padding:9px 12px;

        border-radius:14px;

    }


    .opcao-menu-icone{

        width:43px;

        height:43px;

        border-radius:12px;

    }


    .opcao-menu-icone i{

        font-size:1.18rem;

    }


    .opcao-menu-texto{

        font-size:1.46rem;

    }


    .opcao-menu-voltar{

        grid-template-columns:46px 1fr;

    }

}


/*==================================================
    RESPONSIVO — TELA
===================================================*/

@media (max-width:700px){

    .preparar-cabecalho{

        min-height:78px;

        grid-template-columns:60px 1fr 104px;

        gap:10px;

        padding:10px 14px;

    }


    .btn-preparar-voltar{

        width:48px;

        height:48px;

    }


    .btn-preparar-icone{

        width:46px;

        height:46px;

    }


    .preparar-conteudo{

        width:min(100% - 20px, 920px);

        height:calc(100vh - 78px);

        padding-top:14px;

    }


    .jogador-card{

        grid-template-columns:68px 1fr;

        min-height:98px;

        padding:22px 16px 14px;

    }


    .jogador-avatar{

        width:58px;

        height:58px;

        font-size:1.6rem;

    }

    .jogador-avatar-editar{

    width:23px;

    height:23px;

    font-size:.62rem;

}


    .regras-resumo{

        padding:16px;

    }


    .lista-regras-resumo p{

        font-size:.9rem;

    }


    .modal-preparar{

        align-items:flex-end;

        padding:10px;

    }


    .modal-preparar-caixa{

        width:100%;

        max-height:92vh;

        border-radius:22px 22px 10px 10px;

    }


    .regra-configuracao{

        grid-template-columns:1fr;

        gap:7px;

    }


    .regra-configuracao strong{

        text-align:left;

    }


    .regra-configuracao i{

        position:absolute;

        right:22px;

        top:50%;

        transform:translateY(-50%);

    }

}


/*==================================================
    RESPONSIVO — FUNDO
===================================================*/

@media (max-width:520px){

    .modal-fundos-caixa{

        width:94vw;

        max-height:92vh;

        border-radius:20px;

    }


    .grade-fundos-mesa{

        grid-template-columns:repeat(2, minmax(0,1fr));

        gap:10px;

        padding:4px 14px 16px;

    }


    .descricao-modal-fundo{

        margin:2px 14px 14px;

        font-size:12px;

    }


    .miniatura-fundo{

        height:88px;

    }


    .nome-fundo{

        padding:10px 6px 11px;

        font-size:11px;

    }


    .check-fundo{

        width:27px;

        height:27px;

        top:7px;

        right:7px;

        font-size:12px;

    }


    .acoes-modal-fundo{

        gap:9px;

        padding:13px 14px 16px;

    }


    .btn-cancelar-fundo,
    .btn-aplicar-fundo{

        min-height:46px;

        font-size:12px;

    }

}


/*==================================================
    RESPONSIVO — AJUDA
===================================================*/

@media (max-width:620px){

    .modal-ajuda-caixa{

        padding:17px;

    }


    .ajuda-destaque{

        grid-template-columns:56px 1fr;

        gap:12px;

        padding:14px;

    }


    .ajuda-destaque-icone{

        width:52px;

        height:52px;

        font-size:1.35rem;

    }


    .ajuda-destaque strong{

        font-size:1.55rem;

    }


    .ajuda-destaque p{

        font-size:.88rem;

    }


    .item-ajuda-partida{

        grid-template-columns:42px 1fr;

        gap:11px;

        padding:13px;

    }


    .item-ajuda-numero{

        width:39px;

        height:39px;

        border-radius:12px;

        font-size:1.25rem;

    }


    .item-ajuda-conteudo h3{

        font-size:1.3rem;

    }


    .item-ajuda-conteudo p{

        font-size:.86rem;

    }


    .tabela-pontos-ajuda{

        grid-template-columns:1fr;

    }


    .btn-voltar-ajuda-partida{

        min-height:56px;

        font-size:1.5rem;

    }

}


/*==================================================
    RESPONSIVO — NOVOS MODAIS
===================================================*/

@media (max-width:680px){

    .modal-configuracoes-caixa,
    .modal-estatisticas-caixa,
    .modal-compartilhar-caixa,
    .modal-conquistas-caixa{

        padding:17px;

    }


    .item-configuracao-partida{

        grid-template-columns:46px minmax(0,1fr) auto;

        gap:11px;

        min-height:70px;

        padding:10px 12px;

    }


    .configuracao-icone{

        width:43px;

        height:43px;

        font-size:1.05rem;

    }


    .configuracao-com-seletor{

        grid-template-columns:46px minmax(0,1fr);

    }


    .configuracao-com-seletor .seletor-configuracao{

        grid-column:1 / -1;

        margin-top:2px;

    }


    .acoes-configuracoes-partida{

        grid-template-columns:1fr;

    }


    .grade-estatisticas-partida{

        grid-template-columns:1fr;

    }


    .estatisticas-destaque{

        grid-template-columns:62px 1fr;

        padding:14px;

    }


    .estatisticas-destaque-medalha{

        width:56px;

        height:56px;

        font-size:1.45rem;

    }


    .card-estatistica-partida{

        min-height:104px;

    }


    .grade-conquistas-partida{

        grid-template-columns:1fr;

    }


    .card-conquista-partida{

        min-height:128px;

    }

}


@media (max-width:420px){

    .ajuda-destaque{

        grid-template-columns:1fr;

        text-align:center;

    }


    .ajuda-destaque-icone{

        margin:0 auto;

    }


    .item-ajuda-partida{

        grid-template-columns:1fr;

    }


    .item-ajuda-numero{

        margin-bottom:2px;

    }


    .ordem-cartas-ajuda{

        gap:6px;

    }


    .ordem-cartas-ajuda span{

        min-width:42px;

        padding:5px 8px;

        font-size:.82rem;

    }


    .modal-preparar-topo h2{

        font-size:1.7rem;

    }


    .titulo-modal-opcoes > i,
    .titulo-modal-ajuda > i,
    .titulo-modal-configuracoes > i,
    .titulo-modal-estatisticas > i,
    .titulo-modal-compartilhar > i,
    .titulo-modal-conquistas > i{

        width:40px;

        height:40px;

        border-radius:12px;

    }


    .btn-fechar-modal-preparar{

        width:42px;

        height:42px;

        border-radius:12px;

    }


    .item-configuracao-partida{

        grid-template-columns:42px minmax(0,1fr) auto;

    }


    .configuracao-icone{

        width:40px;

        height:40px;

    }


    .configuracao-informacao strong{

        font-size:.92rem;

    }


    .configuracao-informacao span{

        font-size:.75rem;

    }


    .controle-alternador{

        width:50px;

        height:28px;

    }


    .controle-alternador-visual::before{

        width:20px;

        height:20px;

    }


    .controle-alternador input:checked + .controle-alternador-visual::before{

        transform:translateX(22px);

    }


    .estatisticas-destaque{

        grid-template-columns:1fr;

        text-align:center;

    }


    .estatisticas-destaque-medalha{

        margin:0 auto;

    }


    .compartilhar-destaque{

        padding:18px 12px;

    }


    .compartilhar-destaque h3{

        font-size:1.7rem;

    }


    .btn-compartilhar{

        grid-template-columns:44px 1fr 24px;

        gap:10px;

        padding:8px 11px;

    }


    .btn-compartilhar > span{

        width:42px;

        height:42px;

    }


    .conquistas-resumo{

        grid-template-columns:54px 1fr;

        gap:11px;

        padding:13px;

    }


    .conquistas-resumo-icone{

        width:50px;

        height:50px;

        font-size:1.3rem;

    }


    .card-conquista-partida{

        grid-template-columns:52px minmax(0,1fr) 26px;

        gap:11px;

        padding:13px;

    }


    .conquista-medalha{

        width:50px;

        height:50px;

        font-size:1.25rem;

    }


    .conquista-conteudo h3{

        font-size:1.3rem;

    }


    .conquista-conteudo p{

        font-size:.78rem;

    }


    .btn-voltar-configuracoes-partida,
    .btn-voltar-estatisticas-partida,
    .btn-voltar-compartilhar-partida,
    .btn-voltar-conquistas-partida{

        min-height:55px;

        font-size:1.45rem;

    }

}


/*==================================================
    TELAS COM POUCA ALTURA
===================================================*/

@media (max-height:700px){

    .preparar-conteudo{

        padding-bottom:24px;

    }


    .jogadores-total{

        min-height:70px;

    }


    .jogador-card{

        min-height:92px;

    }


    .modal-preparar-caixa{

        max-height:94vh;

    }

}


/*==================================================
    ACESSIBILIDADE
===================================================*/

button:focus-visible,
select:focus-visible,
input:focus-visible{

    outline:2px solid #ffe05e;

    outline-offset:3px;

}


@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}
/*==================================================
    JOGADOR 1 - CAMPO DE NOME
===================================================*/

.jogador-info{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:8px;

    min-width:0;

}

/*==================================================
    INPUT DO NOME
===================================================*/

.campo-nome-jogador{

    flex:1;

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    color:#F7E8A3;

    font-size:44px;

    font-weight:900;

    text-transform:uppercase;

   letter-spacing:1px;

    font-family:"Bebas Neue",sans-serif;

    text-shadow:

        0 2px 10px rgba(0,0,0,.45);

    transition:.30s;

}


.campo-nome-jogador::placeholder{

    color:rgba(247,232,163,.45);

}


.campo-nome-jogador:hover{

    color:#FFD84A;

}


.campo-nome-jogador:focus{

    color:#FFD84A;

}


/*==================================================
    BOTÃO EDITAR
===================================================*/

.btn-editar-nome{

    width:44px;

    height:44px;

    border-radius:50%;

    border:1px solid rgba(255,215,70,.35);

    background:rgba(255,215,70,.08);

    color:#FFD84A;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.30s;

    flex-shrink:0;

}


.btn-editar-nome i{

    font-size:18px;

}


.btn-editar-nome:hover{

    background:#FFD84A;

    color:#222;

    transform:scale(1.08);

    box-shadow:

        0 0 18px rgba(255,215,70,.45);

}


/*==================================================
    RESPONSIVO
===================================================*/

@media (max-width:900px){

    .campo-nome-jogador{

        font-size:40px;

    }

}


@media (max-width:700px){

    .jogador-info{

        gap:10px;

    }

    .campo-nome-jogador{

        font-size:32px;

        letter-spacing:1px;

    }

    .btn-editar-nome{

        width:40px;

        height:40px;

    }

}


@media (max-width:480px){

    .campo-nome-jogador{

        font-size:26px;

    }

    .btn-editar-nome{

    width:34px;

    height:34px;

    border-radius:50%;

    border:1px solid rgba(255,215,70,.35);

    background:rgba(255,215,70,.08);

    color:#FFD84A;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    flex-shrink:0;

    transition:.30s;

    margin-left:6px;

}

.btn-editar-nome i{

    font-size:14px;

}

.btn-editar-nome:hover{

    transform:scale(1.15);

    background:#FFD84A;

    color:#1D120A;

    box-shadow:
        0 0 12px rgba(255,215,70,.45);

}

}

/*==================================================
    DADOS DO PERSONAGEM
===================================================*/

.jogador-dificuldade{

    font-size:13px;

    font-weight:700;

    color:#FFD54A;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:4px;

}

.jogador-cidade{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    margin-top:4px;

    font-size:12px;

    color:rgba(255,255,255,.75);

}
#iconeComputadorPreparar[hidden]{

    display:none !important;

}
/*==================================================
    PERSONAGEM DO COMPUTADOR
===================================================*/

.foto-computador-preparar{

    width:52px !important;

    height:52px !important;

    border-radius:50% !important;

    object-fit:cover !important;

    object-position:center top !important;

    transform:scale(.92);

    display:block;

    margin:auto;

}

.jogador-avatar.computador{

    overflow:hidden;

}
/*==================================================
    AJUSTE FINAL DO PERSONAGEM
===================================================*/

.jogador-computador-card{

    grid-template-columns:72px 1fr !important;

}

.foto-computador-preparar{

    width:100% !important;

    height:100% !important;

    border-radius:50% !important;

    object-fit:cover !important;

    object-position:center 18% !important;

    transform:scale(1.22) !important;

}
/*==================================================
    AJUSTE FINAL DO AVATAR DO COMPUTADOR
===================================================*/

.jogador-computador-card{

    padding-top:30px !important;

}

.jogador-computador-card .jogador-legenda{

    top:12px !important;

}

.jogador-computador-card .jogador-avatar{

    margin-top:8px;

}
/*==================================================
    TAMANHO E ENQUADRAMENTO DO ZECA
===================================================*/

.jogador-computador-card .jogador-avatar{

    width:72px !important;

    height:72px !important;

    margin-top:10px !important;

}

.foto-computador-preparar{

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    object-position:center 30% !important;

    transform:scale(1.05) !important;

}
/*==================================================
    FOTO DO JOGADOR
===================================================*/

.foto-jogador-preparar{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    display:block;

}


/*==================================================
    BOTÃO DA CÂMERA
===================================================*/

.jogador-avatar-editar{

    position:absolute;

    right:-2px;

    bottom:-2px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#FFD64A;

    color:#2B180F;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #2B180F;

    z-index:20;

    pointer-events:none;

}


.jogador-avatar-editar i{

    font-size:11px;

}
/*==================================================
    ESCONDER ÍCONE QUANDO EXISTIR FOTO
===================================================*/

#iconeJogadorPreparar[hidden]{

    display:none !important;

}


.foto-jogador-preparar:not([hidden]){

    position:relative;

    z-index:5;

}


.foto-jogador-preparar[hidden]{

    display:none !important;

}