/*==================================================
    BISCA GAÚCHA
    MESA DA PARTIDA
    PARTE 1 — ESTRUTURA GERAL E BARRA SUPERIOR
===================================================*/


/*==================================================
    VARIÁVEIS DA MESA
===================================================*/

:root{

    --mesa-dourado:#F5C542;

    --mesa-dourado-claro:#FFE58A;

    --mesa-dourado-escuro:#A86D12;

    --mesa-verde:#153D2A;

    --mesa-verde-claro:#256442;

    --mesa-verde-escuro:#071A11;

    --mesa-vermelho:#9D241C;

    --mesa-vermelho-claro:#D64A3C;

    --mesa-preto:#090D0B;

    --mesa-branco:#FFF8E7;

    --mesa-cinza:#B7B7B7;

    --mesa-sombra:
        0 18px 45px rgba(0,0,0,.45);

    --mesa-borda:
        1px solid rgba(255,229,138,.28);

}


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

.tela-mesa{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

    background:#071A11;

    color:var(--mesa-branco);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    isolation:isolate;

}


/*==================================================
    FUNDO DA MESA
===================================================*/

.fundo-mesa-partida{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:-3;

    background:

        radial-gradient(
            circle at center,
            rgba(65,140,86,.38) 0%,
            rgba(22,79,48,.72) 43%,
            rgba(5,24,15,.98) 100%
        ),

        linear-gradient(
            135deg,
            #143C28,
            #06170F
        );

    background-size:cover;

    background-position:center;

    transform:scale(1.03);

}


/*==================================================
    TEXTURA DA MESA
===================================================*/

.fundo-mesa-partida::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

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

        repeating-linear-gradient(
            -45deg,
            rgba(0,0,0,.025) 0,
            rgba(0,0,0,.025) 1px,
            transparent 1px,
            transparent 9px
        );

    opacity:.65;

    pointer-events:none;

}


/*==================================================
    BRILHO CENTRAL
===================================================*/

.fundo-mesa-partida::after{

    content:"";

    position:absolute;

    left:50%;

    top:52%;

    width:68vw;

    height:68vw;

    max-width:950px;

    max-height:950px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,220,100,.08) 0%,
            rgba(255,220,100,.025) 38%,
            transparent 70%
        );

    pointer-events:none;

}


/*==================================================
    SOMBRA DA TELA
===================================================*/

.sombra-mesa-partida{

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        linear-gradient(
            to bottom,
            rgba(0,0,0,.52) 0%,
            transparent 18%,
            transparent 76%,
            rgba(0,0,0,.58) 100%
        ),

        radial-gradient(
            ellipse at center,
            transparent 36%,
            rgba(0,0,0,.43) 100%
        );

}


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

.conteudo-mesa-partida{

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    z-index:1;

}


/*==================================================
    BARRA SUPERIOR
===================================================*/

.barra-superior-mesa{

    position:relative;

    width:100%;

    min-height:82px;

    padding:10px 24px;

    display:grid;

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

    align-items:center;

    gap:20px;

    background:

        linear-gradient(
            180deg,
            rgba(8,18,13,.96),
            rgba(7,20,14,.88)
        );

    border-bottom:
        1px solid rgba(245,197,66,.34);

    box-shadow:

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

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

    backdrop-filter:blur(12px);

    z-index:50;

}


/*==================================================
    DETALHE DOURADO DA BARRA
===================================================*/

.barra-superior-mesa::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-1px;

    width:240px;

    height:2px;

    transform:translateX(-50%);

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--mesa-dourado),
            transparent
        );

    box-shadow:
        0 0 12px rgba(245,197,66,.65);

}


/*==================================================
    LADOS DA BARRA
===================================================*/

.barra-mesa-lado{

    display:flex;

    align-items:center;

    gap:12px;

    min-width:0;

}


.barra-mesa-lado.esquerda{

    justify-content:flex-start;

}


.barra-mesa-lado.direita{

    justify-content:flex-end;

}


/*==================================================
    BOTÕES DA BARRA
===================================================*/

.btn-barra-mesa{

    position:relative;

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    border:
        1px solid rgba(245,197,66,.28);

    outline:none;

    background:

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

    color:var(--mesa-dourado-claro);

    cursor:pointer;

    box-shadow:

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

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

    transition:

        transform .22s ease,

        border-color .22s ease,

        background .22s ease,

        color .22s ease,

        box-shadow .22s ease;

}


.btn-barra-mesa i{

    font-size:20px;

    pointer-events:none;

}


.btn-barra-mesa:hover{

    transform:translateY(-3px);

    color:#181006;

    border-color:var(--mesa-dourado);

    background:

        linear-gradient(
            145deg,
            var(--mesa-dourado-claro),
            var(--mesa-dourado)
        );

    box-shadow:

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

        0 0 20px rgba(245,197,66,.32);

}


.btn-barra-mesa:active{

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

}


.btn-barra-mesa:focus-visible{

    outline:
        2px solid var(--mesa-dourado-claro);

    outline-offset:3px;

}


/*==================================================
    BOTÃO VOLTAR
===================================================*/

.btn-voltar-mesa{

    border-radius:50%;

}


/*==================================================
    BOTÃO ATIVO
===================================================*/

.btn-barra-mesa.ativo{

    color:var(--mesa-dourado);

    border-color:
        rgba(245,197,66,.52);

    background:
        rgba(245,197,66,.11);

    box-shadow:

        inset 0 0 18px rgba(245,197,66,.08),

        0 0 14px rgba(245,197,66,.14);

}


/*==================================================
    TÍTULO DA MESA
===================================================*/

.titulo-mesa-partida{

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:.9;

    min-width:0;

}


.titulo-mesa-pequeno{

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

    font-size:12px;

    font-weight:800;

    letter-spacing:6px;

}


.titulo-mesa-partida strong{

    margin-top:6px;

    color:var(--mesa-dourado-claro);

    font-size:25px;

    font-weight:900;

    letter-spacing:2px;

    text-shadow:

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

        0 0 14px rgba(245,197,66,.18);

}


/*==================================================
    CENTRO DA BARRA
===================================================*/

.barra-mesa-centro{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

}


/*==================================================
    INDICADORES DA BARRA
===================================================*/

.indicador-mesa{

    min-height:50px;

    padding:8px 15px;

    display:grid;

    grid-template-columns:auto auto;

    grid-template-rows:auto auto;

    column-gap:8px;

    align-items:center;

    border-radius:14px;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045);

}


.indicador-mesa i{

    grid-row:1 / 3;

    color:var(--mesa-dourado);

    font-size:17px;

}


.indicador-mesa span{

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

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}


.indicador-mesa strong{

    color:var(--mesa-branco);

    font-size:17px;

    font-weight:900;

}


/*==================================================
    INDICADOR DE TURNO
===================================================*/

.indicador-turno-mesa{

    min-width:160px;

    min-height:54px;

    padding:8px 22px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    border:
        1px solid rgba(245,197,66,.45);

    background:

        radial-gradient(
            circle at top,
            rgba(245,197,66,.18),
            rgba(245,197,66,.045)
        );

    box-shadow:

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

        0 0 20px rgba(245,197,66,.10);

}


.indicador-turno-mesa span{

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

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1.5px;

}


.indicador-turno-mesa strong{

    margin-top:3px;

    max-width:190px;

    overflow:hidden;

    color:var(--mesa-dourado-claro);

    font-size:17px;

    font-weight:900;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==================================================
    ÁREA PRINCIPAL DA MESA
===================================================*/

.area-principal-mesa{

    position:relative;

    flex:1;

    width:100%;

    min-height:0;

    display:grid;

    grid-template-rows:
        minmax(130px,.9fr)
        minmax(260px,2.1fr)
        minmax(180px,1.15fr);

    gap:8px;

    padding:14px 24px 8px;

    overflow:hidden;

}


/*==================================================
    PARTICIPANTES
===================================================*/

.area-participante{

    position:relative;

    width:100%;

    min-height:0;

    display:flex;

    align-items:center;

}


/*==================================================
    ADVERSÁRIO
===================================================*/

.adversario-mesa{

    justify-content:space-between;

    align-items:flex-start;

}


/*==================================================
    PAINEL DOS PARTICIPANTES
===================================================*/

.painel-participante{

    position:relative;

    min-width:320px;

    max-width:420px;

    min-height:88px;

    padding:12px 16px;

    display:grid;

    grid-template-columns:
        64px
        minmax(115px,1fr)
        auto
        auto;

    align-items:center;

    gap:13px;

    border-radius:20px;

    border:var(--mesa-borda);

    background:

        linear-gradient(
            145deg,
            rgba(6,16,11,.90),
            rgba(16,45,30,.80)
        );

    box-shadow:var(--mesa-sombra);

    backdrop-filter:blur(10px);

}


/*==================================================
    AVATAR
===================================================*/

.avatar-participante{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:
        2px solid rgba(245,197,66,.68);

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.17),
            rgba(245,197,66,.13) 40%,
            rgba(0,0,0,.35) 100%
        );

    color:var(--mesa-dourado-claro);

    box-shadow:

        inset 0 0 18px rgba(245,197,66,.08),

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

}


.avatar-participante i{

    font-size:27px;

}


/*==================================================
    DADOS DO PARTICIPANTE
===================================================*/

.dados-participante{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.legenda-participante{

    color:rgba(255,248,231,.54);

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1.4px;

}


.nome-participante{

    max-width:190px;

    margin-top:3px;

    overflow:hidden;

    color:var(--mesa-dourado-claro);

    font-size:20px;

    font-weight:900;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.status-participante{

    margin-top:4px;

    color:rgba(255,248,231,.55);

    font-size:11px;

    font-weight:700;

}


.status-participante.ativo{

    color:#8FE6A9;

}


/*==================================================
    PONTUAÇÃO E VAZAS
===================================================*/

.pontuacao-participante,
.vazas-participante{

    min-width:58px;

    min-height:56px;

    padding:7px 9px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:13px;

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

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

}


.pontuacao-participante span,
.vazas-participante span{

    color:rgba(255,248,231,.52);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.8px;

}


.pontuacao-participante strong,
.vazas-participante strong{

    margin-top:2px;

    color:var(--mesa-branco);

    font-size:20px;

    font-weight:900;

}


.vazas-participante i{

    margin-bottom:3px;

    color:var(--mesa-dourado);

    font-size:12px;

}


/*==================================================
    RESPONSIVO — PARTE 1
===================================================*/

@media (max-width:1100px){

    .barra-superior-mesa{

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

        padding-left:16px;

        padding-right:16px;

    }


    .indicador-mesa{

        padding-left:10px;

        padding-right:10px;

    }


    .indicador-turno-mesa{

        min-width:135px;

        padding-left:14px;

        padding-right:14px;

    }


    .painel-participante{

        min-width:290px;

        grid-template-columns:
            56px
            minmax(100px,1fr)
            auto
            auto;

    }


    .avatar-participante{

        width:54px;

        height:54px;

    }

}


@media (max-width:850px){

    .barra-superior-mesa{

        min-height:70px;

        grid-template-columns:1fr auto;

        gap:10px;

        padding:8px 12px;

    }


    .barra-mesa-centro{

        position:absolute;

        left:50%;

        bottom:-46px;

        transform:translateX(-50%);

        z-index:4;

    }


    .titulo-mesa-pequeno{

        display:none;

    }


    .titulo-mesa-partida strong{

        margin-top:0;

        font-size:19px;

    }


    .btn-barra-mesa{

        width:42px;

        height:42px;

        border-radius:12px;

    }


    .barra-mesa-lado{

        gap:7px;

    }


    .area-principal-mesa{

        padding-top:55px;

        padding-left:12px;

        padding-right:12px;

    }

}


@media (max-width:600px){

    .barra-superior-mesa{

        min-height:62px;

    }


    .titulo-mesa-partida{

        display:none;

    }


    .barra-mesa-lado.direita{

        gap:5px;

    }


    .btn-barra-mesa{

        width:39px;

        height:39px;

    }


    .btn-barra-mesa i{

        font-size:17px;

    }


    .indicador-mesa{

        min-height:44px;

        padding:6px 8px;

    }


    .indicador-turno-mesa{

        min-width:118px;

        min-height:46px;

        padding:6px 10px;

    }


    .indicador-mesa span,
    .indicador-turno-mesa span{

        font-size:8px;

    }


    .indicador-mesa strong,
    .indicador-turno-mesa strong{

        font-size:14px;

    }


    .painel-participante{

        min-width:260px;

        max-width:100%;

        min-height:74px;

        padding:8px 10px;

        grid-template-columns:
            48px
            minmax(85px,1fr)
            auto
            auto;

        gap:8px;

    }


    .avatar-participante{

        width:46px;

        height:46px;

    }


    .avatar-participante i{

        font-size:21px;

    }


    .nome-participante{

        font-size:16px;

    }


    .pontuacao-participante,
    .vazas-participante{

        min-width:46px;

        min-height:48px;

        padding:5px;

    }


    .pontuacao-participante strong,
    .vazas-participante strong{

        font-size:17px;

    }

}
/*==================================================
    BISCA GAÚCHA
    MESA DA PARTIDA
    PARTE 2 — CARTAS, MONTE, BISCA E CENTRO
===================================================*/


/*==================================================
    MÃOS DE CARTAS
===================================================*/

.mao-cartas{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:260px;

    min-height:120px;

}


/*==================================================
    MÃO DO ADVERSÁRIO
===================================================*/

.mao-adversario{

    align-self:flex-start;

    margin-right:32px;

    padding-top:8px;

}


/*==================================================
    CARTA BASE
===================================================*/

.carta-mesa{

    position:relative;

    width:82px;

    height:118px;

    flex-shrink:0;

    border-radius:11px;

    border:

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

    overflow:hidden;

    box-shadow:

        0 14px 24px rgba(0,0,0,.34),

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

    transform-origin:center bottom;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        filter .25s ease,

        opacity .25s ease;

}


/*==================================================
    CARTAS DO ADVERSÁRIO EM LEQUE
===================================================*/

.carta-adversario{

    margin-left:-28px;

}


.carta-adversario:first-child{

    margin-left:0;

    transform:
        rotate(-10deg)
        translateY(8px);

}


.carta-adversario:nth-child(2){

    z-index:2;

    transform:
        rotate(0deg)
        translateY(0);

}


.carta-adversario:nth-child(3){

    z-index:3;

    transform:
        rotate(10deg)
        translateY(8px);

}


/*==================================================
    CARTA VIRADA
===================================================*/

.carta-virada{

    background:

        linear-gradient(
            145deg,
            #7B1F19,
            #260B09
        );

}


/*==================================================
    VERSO DA CARTA
===================================================*/

.verso-carta,
.carta-monte{

    position:absolute;

    inset:4px;

    border-radius:8px;

    border:

        2px solid rgba(255,231,158,.78);

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.12),
            transparent 38%
        ),

        repeating-linear-gradient(
            45deg,
            rgba(255,220,120,.20) 0,
            rgba(255,220,120,.20) 3px,
            transparent 3px,
            transparent 8px
        ),

        repeating-linear-gradient(
            -45deg,
            rgba(255,220,120,.11) 0,
            rgba(255,220,120,.11) 3px,
            transparent 3px,
            transparent 8px
        ),

        linear-gradient(
            145deg,
            #9D2A20,
            #4A100D
        );

    box-shadow:

        inset 0 0 0 3px rgba(105,22,16,.72),

        inset 0 0 18px rgba(0,0,0,.38);

}


/*==================================================
    SÍMBOLO NO VERSO
===================================================*/

.verso-carta::before,
.carta-monte::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:38px;

    height:38px;

    transform:

        translate(-50%,-50%)
        rotate(45deg);

    border:

        2px solid rgba(255,231,158,.72);

    border-radius:8px;

    box-shadow:

        inset 0 0 10px rgba(255,231,158,.14),

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

}


/*==================================================
    CENTRO DA MESA
===================================================*/

.centro-mesa-partida{

    position:relative;

    width:100%;

    min-height:0;

    display:grid;

    grid-template-columns:
        minmax(130px,.72fr)
        minmax(130px,.72fr)
        minmax(330px,2fr);

    align-items:center;

    justify-items:center;

    gap:24px;

    padding:

        8px
        clamp(20px,5vw,90px);

}


/*==================================================
    TÍTULOS DAS ÁREAS
===================================================*/

.titulo-area-mesa{

    color:rgba(255,248,231,.56);

    font-size:10px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.6px;

}


/*==================================================
    ÁREA DO MONTE
===================================================*/

.area-monte-mesa,
.area-bisca-mesa{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

}


/*==================================================
    MONTE
===================================================*/

.monte-cartas-mesa{

    position:relative;

    width:92px;

    height:126px;

    margin-top:4px;

    cursor:pointer;

    filter:

        drop-shadow(
            0 16px 20px rgba(0,0,0,.35)
        );

    transition:

        transform .25s ease,

        filter .25s ease;

}


.monte-cartas-mesa:hover{

    transform:

        translateY(-4px)
        rotate(-1deg);

    filter:

        drop-shadow(
            0 20px 24px rgba(0,0,0,.42)
        );

}


/*==================================================
    CARTAS DO MONTE
===================================================*/

.carta-monte{

    width:82px;

    height:118px;

    inset:auto;

    top:0;

    left:0;

}


.carta-monte.baixo{

    transform:

        translate(8px,8px)
        rotate(4deg);

    opacity:.72;

}


.carta-monte.meio{

    transform:

        translate(4px,4px)
        rotate(2deg);

    opacity:.88;

}


.carta-monte.topo{

    z-index:3;

}


/*==================================================
    CONTADOR DO MONTE
===================================================*/

.contador-monte{

    min-width:42px;

    height:28px;

    padding:0 10px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    border:

        1px solid rgba(245,197,66,.32);

    background:

        rgba(5,16,11,.72);

    color:var(--mesa-dourado-claro);

    font-size:14px;

    font-weight:900;

    box-shadow:

        0 6px 14px rgba(0,0,0,.28),

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

}


/*==================================================
    CARTA DA BISCA
===================================================*/

.carta-bisca-mesa{

    position:relative;

    width:82px;

    height:118px;

    margin-top:4px;

    border-radius:11px;

    overflow:hidden;

    background:#FFFDF7;

    border:

        1px solid rgba(255,255,255,.88);

    box-shadow:

        0 16px 26px rgba(0,0,0,.36),

        0 0 16px rgba(245,197,66,.12);

    transform:

        rotate(8deg)
        translateY(5px);

}


/*==================================================
    FRENTE DA BISCA
===================================================*/

.frente-bisca{

    position:absolute;

    inset:0;

    padding:9px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    background:

        linear-gradient(
            145deg,
            #FFFDF7,
            #EDE7D8
        );

    color:#B52424;

}


.valor-bisca{

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:25px;

    font-weight:900;

    line-height:1;

}


.naipe-bisca{

    margin-top:2px;

    font-size:24px;

    line-height:1;

}


.frente-bisca::after{

    content:none;

}
/*==================================================
    INDICADOR DE TRUNFO
===================================================*/

.naipe-trunfo{

    min-height:30px;

    padding:6px 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    border:

        1px solid rgba(245,197,66,.30);

    background:

        linear-gradient(
            145deg,
            rgba(245,197,66,.14),
            rgba(245,197,66,.05)
        );

    color:var(--mesa-dourado-claro);

    font-size:12px;

    font-weight:900;

    box-shadow:

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

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

}


/*==================================================
    ÁREA DAS JOGADAS
===================================================*/

.mesa-jogadas{

    position:relative;

    width:min(520px,100%);

    min-height:215px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:38px;

    border-radius:50%;

    border:

        1px solid rgba(245,197,66,.15);

    background:

        radial-gradient(
            ellipse at center,
            rgba(255,225,125,.055),
            rgba(0,0,0,.02) 55%,
            transparent 72%
        );

}


/*==================================================
    MARCAÇÃO CENTRAL
===================================================*/

.mesa-jogadas::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:190px;

    height:190px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:

        1px dashed rgba(245,197,66,.14);

    box-shadow:

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

}


/*==================================================
    ESPAÇO DE JOGADA
===================================================*/

.espaco-jogada{

    position:relative;

    width:92px;

    height:132px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    border:

        1px dashed rgba(255,255,255,.15);

    background:

        rgba(255,255,255,.018);

    z-index:2;

}


/*==================================================
    IDENTIFICAÇÃO DOS ESPAÇOS
===================================================*/

.espaco-jogada::before{

    position:absolute;

    left:50%;

    top:50%;

    width:100%;

    transform:translate(-50%,-50%);

    color:rgba(255,248,231,.20);

    font-size:10px;

    font-weight:900;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:1.3px;

}


.espaco-jogada.adversario::before{

    content:"Carta do Peão";

}


.espaco-jogada.jogador::before{

    content:"Sua carta";

}


/*==================================================
    CARTA COLOCADA NA JOGADA
===================================================*/

.espaco-jogada .carta-mesa{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

}


/*==================================================
    INFORMAÇÕES DA RODADA
===================================================*/

.painel-informacoes-mesa{

    position:absolute;

    left:50%;

    bottom:-2px;

    width:min(640px,90%);

    transform:translateX(-50%);

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    z-index:5;

}


/*==================================================
    ITEM DE INFORMAÇÃO
===================================================*/

.info-mesa{

    min-height:50px;

    padding:7px 12px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    border:

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

    background:

        rgba(4,15,10,.62);

    box-shadow:

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

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

    backdrop-filter:blur(8px);

}


.info-mesa span{

    color:rgba(255,248,231,.45);

    font-size:8px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1px;

}


.info-mesa strong{

    max-width:100%;

    margin-top:3px;

    overflow:hidden;

    color:var(--mesa-branco);

    font-size:13px;

    font-weight:900;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==================================================
    ANIMAÇÃO DE ENTRADA DE CARTA
===================================================*/

@keyframes cartaEntrandoMesa{

    0%{

        opacity:0;

        transform:

            translate(-50%,-80%)
            scale(.65)
            rotate(-14deg);

    }

    70%{

        opacity:1;

        transform:

            translate(-50%,-47%)
            scale(1.06)
            rotate(3deg);

    }

    100%{

        opacity:1;

        transform:

            translate(-50%,-50%)
            scale(1)
            rotate(0);

    }

}


.espaco-jogada .carta-mesa.animando-entrada{

    animation:

        cartaEntrandoMesa
        .42s
        cubic-bezier(.2,.8,.2,1)
        both;

}


/*==================================================
    RESPONSIVO — PARTE 2
===================================================*/

@media (max-width:1100px){

    .centro-mesa-partida{

        grid-template-columns:
            115px
            115px
            minmax(290px,1fr);

        gap:14px;

        padding-left:25px;

        padding-right:25px;

    }


    .mesa-jogadas{

        min-height:195px;

        gap:25px;

    }


    .painel-informacoes-mesa{

        width:min(580px,95%);

    }

}


@media (max-width:850px){

    .mao-adversario{

        margin-right:10px;

    }


    .centro-mesa-partida{

        grid-template-columns:
            90px
            90px
            minmax(240px,1fr);

        gap:8px;

        padding-left:8px;

        padding-right:8px;

    }


    .carta-mesa,
    .carta-bisca-mesa{

        width:70px;

        height:102px;

    }


    .carta-monte{

        width:70px;

        height:102px;

    }


    .monte-cartas-mesa{

        width:80px;

        height:112px;

    }


    .mesa-jogadas{

        min-height:175px;

        gap:18px;

    }


    .espaco-jogada{

        width:76px;

        height:110px;

    }


    .painel-informacoes-mesa{

        bottom:-8px;

    }

}


@media (max-width:600px){

    .mao-adversario{

        min-width:160px;

        min-height:88px;

    }


    .carta-adversario{

        margin-left:-30px;

    }


    .centro-mesa-partida{

        grid-template-columns:
            74px
            74px
            minmax(165px,1fr);

        gap:4px;

        padding:0;

    }


    .titulo-area-mesa{

        font-size:8px;

    }


    .carta-mesa,
    .carta-bisca-mesa{

        width:58px;

        height:84px;

        border-radius:8px;

    }


    .carta-monte{

        width:58px;

        height:84px;

        border-radius:7px;

    }


    .monte-cartas-mesa{

        width:65px;

        height:94px;

    }


    .valor-bisca{

        font-size:18px;

    }


    .naipe-bisca{

        font-size:17px;

    }


    .frente-bisca::after{

        font-size:32px;

    }


    .naipe-trunfo{

        min-height:24px;

        padding:4px 7px;

        font-size:9px;

    }


    .contador-monte{

        min-width:34px;

        height:23px;

        padding:0 7px;

        font-size:11px;

    }


    .mesa-jogadas{

        min-height:145px;

        gap:8px;

    }


    .mesa-jogadas::before{

        width:125px;

        height:125px;

    }


    .espaco-jogada{

        width:62px;

        height:90px;

        border-radius:9px;

    }


    .espaco-jogada::before{

        font-size:7px;

        letter-spacing:.5px;

    }


    .painel-informacoes-mesa{

        width:100%;

        gap:4px;

        bottom:-12px;

    }


    .info-mesa{

        min-height:40px;

        padding:5px;

        border-radius:9px;

    }


    .info-mesa span{

        font-size:6px;

    }


    .info-mesa strong{

        font-size:10px;

    }

}
/*==================================================
    BISCA GAÚCHA
    MESA DA PARTIDA
    PARTE 3 — JOGADOR, CARTAS E BARRA DE MENSAGENS
===================================================*/


/*==================================================
    ÁREA DO JOGADOR
===================================================*/

.jogador-mesa{

    justify-content:space-between;

    align-items:flex-end;

}


/*==================================================
    PAINEL DO JOGADOR
===================================================*/

.painel-jogador{

    align-self:flex-end;

}


/*==================================================
    MÃO DO JOGADOR
===================================================*/

.mao-jogador{

    flex:1;

    min-height:165px;

    margin-left:35px;

    padding-top:20px;

    padding-bottom:5px;

    overflow:visible;

}


/*==================================================
    CARTA DO JOGADOR
===================================================*/

.carta-jogador{

    position:relative;

    margin-left:-24px;

    padding:0;

    border:

        1px solid rgba(255,255,255,.78);

    outline:none;

    background:#FFFDF7;

    color:#181818;

    cursor:pointer;

    overflow:hidden;

    appearance:none;

    -webkit-appearance:none;

    z-index:1;

}


/*==================================================
    PRIMEIRA CARTA
===================================================*/

.carta-jogador:first-child{

    margin-left:0;

}


/*==================================================
    CARTAS EM LEQUE
===================================================*/

.carta-jogador:nth-child(1){

    transform:

        rotate(-9deg)
        translateY(12px);

}


.carta-jogador:nth-child(2){

    z-index:2;

    transform:

        rotate(0deg)
        translateY(0);

}


.carta-jogador:nth-child(3){

    z-index:3;

    transform:

        rotate(9deg)
        translateY(12px);

}


/*==================================================
    FRENTE DA CARTA
===================================================*/

.frente-carta{

    position:absolute;

    inset:0;

    padding:8px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    background:

        linear-gradient(
            145deg,
            #FFFDF7,
            #ECE5D4
        );

    color:inherit;

}


/*==================================================
    DETALHE INTERNO DA CARTA
===================================================*/

.frente-carta::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:7px;

    border:

        1px solid rgba(0,0,0,.09);

    pointer-events:none;

}


/*==================================================
    VALOR DA CARTA
===================================================*/

.carta-valor{

    position:relative;

    z-index:2;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:25px;

    font-weight:900;

    line-height:.95;

}


/*==================================================
    NAIPE DA CARTA
===================================================*/

.carta-naipe{

    position:relative;

    z-index:2;

    margin-top:3px;

    font-size:22px;

    line-height:1;

}


/*==================================================
    NAIPE CENTRAL
===================================================*/

.carta-naipe-centro{

    position:absolute;

    left:50%;

    top:53%;

    transform:translate(-50%,-50%);

    font-size:47px;

    line-height:1;

    text-shadow:

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

}


/*==================================================
    COR DOS NAIPES
===================================================*/



.carta-jogador.vermelha,
.carta-jogador[data-naipe="copas"],
.carta-jogador[data-naipe="ouros"]{

    color:#B82222;

}


.carta-jogador.preta,
.carta-jogador[data-naipe="espadas"],
.carta-jogador[data-naipe="paus"]{

    color:#171717;

}

/*==================================================
    COR DA CARTA DA BISCA
===================================================*/

.carta-bisca-mesa[data-naipe="copas"],
.carta-bisca-mesa[data-naipe="ouros"]{

    color:#B82222;

}


.carta-bisca-mesa[data-naipe="espadas"],
.carta-bisca-mesa[data-naipe="paus"]{

    color:#171717;

}

/*==================================================
    COR DAS CARTAS JOGADAS
===================================================*/

.carta-jogada{

    color:#171717;

}


.carta-jogada.vermelha,
.carta-jogada[data-naipe="copas"],
.carta-jogada[data-naipe="ouros"]{

    color:#B82222;

}


.carta-jogada.preta,
.carta-jogada[data-naipe="espadas"],
.carta-jogada[data-naipe="paus"]{

    color:#171717;

}
/*==================================================
    HOVER DAS CARTAS
===================================================*/

.carta-jogador:hover{

    z-index:10;

    transform:

        translateY(-22px)
        scale(1.07)
        rotate(0deg);

    box-shadow:

        0 24px 36px rgba(0,0,0,.48),

        0 0 22px rgba(245,197,66,.25);

    filter:brightness(1.04);

}


/*==================================================
    FOCO
===================================================*/

.carta-jogador:focus-visible{

    z-index:11;

    outline:

        3px solid var(--mesa-dourado-claro);

    outline-offset:4px;

    transform:

        translateY(-20px)
        scale(1.05)
        rotate(0deg);

}


/*==================================================
    CARTA SELECIONADA
===================================================*/

.carta-jogador.selecionada{

    z-index:12;

    transform:

        translateY(-30px)
        scale(1.08)
        rotate(0deg);

    border-color:var(--mesa-dourado);

    box-shadow:

        0 28px 40px rgba(0,0,0,.50),

        0 0 0 3px rgba(245,197,66,.32),

        0 0 28px rgba(245,197,66,.46);

}


/*==================================================
    INDICADOR DE CARTA SELECIONADA
===================================================*/

.carta-jogador.selecionada::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:5px;

    width:22px;

    height:4px;

    transform:translateX(-50%);

    border-radius:999px;

    background:var(--mesa-dourado);

    box-shadow:

        0 0 10px rgba(245,197,66,.75);

    z-index:5;

}


/*==================================================
    CARTA BLOQUEADA
===================================================*/

.carta-jogador.bloqueada,
.carta-jogador:disabled{

    cursor:not-allowed;

    opacity:.55;

    filter:

        grayscale(.35)
        brightness(.75);

    pointer-events:none;

}


/*==================================================
    CARTA SENDO JOGADA
===================================================*/

.carta-jogador.jogando{

    z-index:100;

    pointer-events:none;

    animation:

        jogarCartaMesa
        .48s
        cubic-bezier(.2,.75,.2,1)
        forwards;

}


/*==================================================
    ANIMAÇÃO DE JOGAR CARTA
===================================================*/

@keyframes jogarCartaMesa{

    0%{

        opacity:1;

    }

    45%{

        transform:

            translateY(-95px)
            scale(1.10)
            rotate(0deg);

    }

    100%{

        opacity:0;

        transform:

            translateY(-180px)
            scale(.82)
            rotate(5deg);

    }

}


/*==================================================
    ANIMAÇÃO DA MÃO DO JOGADOR
===================================================*/

@keyframes entradaMaoJogador{

    0%{

        opacity:0;

        transform:translateY(80px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}


.mao-jogador.animando-entrada{

    animation:

        entradaMaoJogador
        .55s
        cubic-bezier(.2,.8,.2,1)
        both;

}


/*==================================================
    CARTA RECEBIDA
===================================================*/

@keyframes cartaRecebidaJogador{

    0%{

        opacity:0;

        transform:

            translateY(-180px)
            translateX(80px)
            rotate(18deg)
            scale(.7);

    }

    70%{

        opacity:1;

        transform:

            translateY(8px)
            translateX(0)
            rotate(-3deg)
            scale(1.06);

    }

    100%{

        opacity:1;

    }

}


.carta-jogador.recebendo{

    animation:

        cartaRecebidaJogador
        .52s
        cubic-bezier(.18,.82,.25,1)
        both;

}


/*==================================================
    PARTICIPANTE ATIVO
===================================================*/

.painel-participante.ativo{

    border-color:

        rgba(245,197,66,.64);

    box-shadow:

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

        0 0 0 2px rgba(245,197,66,.12),

        0 0 24px rgba(245,197,66,.18);

}


/*==================================================
    BRILHO DO PARTICIPANTE ATIVO
===================================================*/

.painel-participante.ativo::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:20px;

    pointer-events:none;

    background:

        linear-gradient(
            110deg,
            transparent 25%,
            rgba(255,229,138,.12) 48%,
            transparent 70%
        );

    background-size:220% 100%;

    animation:

        brilhoParticipanteAtivo
        2.8s
        linear
        infinite;

}


/*==================================================
    ANIMAÇÃO DO PAINEL ATIVO
===================================================*/

@keyframes brilhoParticipanteAtivo{

    0%{

        background-position:180% 0;

    }

    100%{

        background-position:-80% 0;

    }

}


/*==================================================
    BARRA DE MENSAGENS
===================================================*/

.barra-mensagem-mesa{

    position:relative;

    min-height:72px;

    margin:0 24px 14px;

    padding:10px 16px;

    display:grid;

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

    align-items:center;

    gap:13px;

    border-radius:18px;

    border:

        1px solid rgba(245,197,66,.24);

    background:

        linear-gradient(
            145deg,
            rgba(6,18,12,.94),
            rgba(11,35,23,.90)
        );

    box-shadow:

        0 16px 34px rgba(0,0,0,.36),

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

    backdrop-filter:blur(10px);

    z-index:25;

}


/*==================================================
    DETALHE DA BARRA
===================================================*/

.barra-mensagem-mesa::before{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    top:0;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,66,.44),
            transparent
        );

}


/*==================================================
    ÍCONE DA MENSAGEM
===================================================*/

.icone-mensagem-mesa{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    border:

        1px solid rgba(245,197,66,.34);

    background:

        rgba(245,197,66,.10);

    color:var(--mesa-dourado-claro);

    box-shadow:

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

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

}


/*==================================================
    TEXTO DA MENSAGEM
===================================================*/

.texto-mensagem-mesa{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.texto-mensagem-mesa span{

    color:rgba(255,248,231,.48);

    font-size:9px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.3px;

}


.texto-mensagem-mesa strong{

    margin-top:3px;

    overflow:hidden;

    color:var(--mesa-branco);

    font-size:15px;

    font-weight:900;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==================================================
    TEMPO DA JOGADA
===================================================*/

.tempo-jogada-mesa{

    min-width:76px;

    height:46px;

    padding:0 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    border-radius:14px;

    border:

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

    background:

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

    color:var(--mesa-dourado-claro);

}


.tempo-jogada-mesa i{

    margin-right:3px;

    font-size:14px;

}


.tempo-jogada-mesa strong{

    font-size:20px;

    font-weight:900;

}


.tempo-jogada-mesa span{

    color:rgba(255,248,231,.55);

    font-size:11px;

    font-weight:800;

}


/*==================================================
    TEMPO ACABANDO
===================================================*/

.tempo-jogada-mesa.alerta{

    border-color:

        rgba(214,74,60,.62);

    background:

        rgba(157,36,28,.16);

    color:#FF8E83;

    animation:

        pulsoTempoMesa
        .8s
        ease-in-out
        infinite alternate;

}


/*==================================================
    ANIMAÇÃO DO TEMPO
===================================================*/

@keyframes pulsoTempoMesa{

    from{

        transform:scale(1);

        box-shadow:
            0 0 0 rgba(214,74,60,0);

    }

    to{

        transform:scale(1.04);

        box-shadow:
            0 0 18px rgba(214,74,60,.24);

    }

}


/*==================================================
    ESTADOS DA BARRA DE MENSAGEM
===================================================*/

.barra-mensagem-mesa.sucesso{

    border-color:
        rgba(82,194,115,.42);

}


.barra-mensagem-mesa.sucesso
.icone-mensagem-mesa{

    color:#A6F0B8;

    border-color:
        rgba(82,194,115,.42);

    background:
        rgba(82,194,115,.12);

}


.barra-mensagem-mesa.perigo{

    border-color:
        rgba(214,74,60,.42);

}


.barra-mensagem-mesa.perigo
.icone-mensagem-mesa{

    color:#FF9C92;

    border-color:
        rgba(214,74,60,.42);

    background:
        rgba(214,74,60,.12);

}


/*==================================================
    RESPONSIVO — PARTE 3
===================================================*/

@media (max-width:1100px){

    .mao-jogador{

        margin-left:15px;

    }


    .barra-mensagem-mesa{

        margin-left:16px;

        margin-right:16px;

    }

}


@media (max-width:850px){

    .jogador-mesa{

        gap:12px;

    }


    .mao-jogador{

        min-height:135px;

        margin-left:0;

        padding-top:10px;

    }


    .carta-jogador{

        margin-left:-28px;

    }


    .carta-naipe-centro{

        font-size:39px;

    }


    .carta-valor{

        font-size:21px;

    }


    .carta-naipe{

        font-size:19px;

    }


    .barra-mensagem-mesa{

        min-height:64px;

        margin-bottom:8px;

        padding:8px 12px;

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

    }


    .icone-mensagem-mesa{

        width:40px;

        height:40px;

    }

}


@media (max-width:600px){

    .jogador-mesa{

        align-items:flex-end;

    }


    .mao-jogador{

        min-width:150px;

        min-height:104px;

    }


    .carta-jogador{

        margin-left:-24px;

    }


    .carta-jogador:nth-child(1){

        transform:

            rotate(-8deg)
            translateY(8px);

    }


    .carta-jogador:nth-child(3){

        transform:

            rotate(8deg)
            translateY(8px);

    }


    .carta-jogador:hover,
    .carta-jogador:focus-visible{

        transform:

            translateY(-14px)
            scale(1.04)
            rotate(0deg);

    }


    .carta-jogador.selecionada{

        transform:

            translateY(-18px)
            scale(1.05)
            rotate(0deg);

    }


    .frente-carta{

        padding:6px;

    }


    .carta-valor{

        font-size:17px;

    }


    .carta-naipe{

        font-size:15px;

    }


    .carta-naipe-centro{

        font-size:31px;

    }


    .barra-mensagem-mesa{

        min-height:54px;

        margin:

            0
            8px
            6px;

        padding:6px 8px;

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

        gap:8px;

        border-radius:13px;

    }


    .icone-mensagem-mesa{

        width:34px;

        height:34px;

        border-radius:10px;

    }


    .icone-mensagem-mesa i{

        font-size:14px;

    }


    .texto-mensagem-mesa span{

        font-size:7px;

    }


    .texto-mensagem-mesa strong{

        font-size:11px;

    }


    .tempo-jogada-mesa{

        min-width:58px;

        height:36px;

        padding:0 7px;

        border-radius:10px;

    }


    .tempo-jogada-mesa i{

        font-size:11px;

    }


    .tempo-jogada-mesa strong{

        font-size:16px;

    }


    .tempo-jogada-mesa span{

        font-size:9px;

    }

}
/*==================================================
    BISCA GAÚCHA
    MESA DA PARTIDA
    PARTE 4A — MODAIS DE BARALHO E FUNDO
===================================================*/


/*==================================================
    CAMADA DOS MODAIS
===================================================*/

.camada-modais-mesa{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:180;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

    backdrop-filter:
        blur(7px);

    transition:

        opacity .28s ease,

        visibility .28s ease;

}


.camada-modais-mesa.ativo{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/*==================================================
    MODAL BASE
===================================================*/

.modal-mesa{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    padding:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:200;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    overflow-y:auto;

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

    backdrop-filter:
        blur(9px);

    transition:

        opacity .3s ease,

        visibility .3s ease;

}


.modal-mesa.ativo{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


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

.modal-mesa-conteudo{

    position:relative;

    width:min(920px,100%);

    max-height:calc(100vh - 48px);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:26px;

    border:
        1px solid rgba(245,197,66,.34);

    background:

        linear-gradient(
            145deg,
            rgba(11,31,21,.98),
            rgba(4,14,9,.99)
        );

    box-shadow:

        0 30px 80px rgba(0,0,0,.64),

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

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

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

    transition:

        transform .34s
        cubic-bezier(.18,.82,.25,1);

}


.modal-mesa.ativo
.modal-mesa-conteudo{

    transform:
        translateY(0)
        scale(1);

}


/*==================================================
    BRILHO SUPERIOR DO MODAL
===================================================*/

.modal-mesa-conteudo::before{

    content:"";

    position:absolute;

    left:8%;

    right:8%;

    top:0;

    height:2px;

    z-index:3;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,66,.84),
            transparent
        );

    box-shadow:
        0 0 18px rgba(245,197,66,.48);

}


/*==================================================
    CABEÇALHO DO MODAL
===================================================*/

.modal-mesa-cabecalho{

    position:relative;

    min-height:92px;

    padding:20px 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

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

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            transparent
        );

}


.modal-mesa-cabecalho > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.modal-mesa-legenda{

    color:rgba(255,248,231,.48);

    font-size:10px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.8px;

}


.modal-mesa-cabecalho h2{

    margin-top:5px;

    color:var(--mesa-dourado-claro);

    font-size:26px;

    font-weight:900;

    letter-spacing:.5px;

}


/*==================================================
    BOTÃO FECHAR MODAL
===================================================*/

.btn-fechar-modal-mesa{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

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

    outline:none;

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

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

    cursor:pointer;

    transition:

        transform .22s ease,

        color .22s ease,

        border-color .22s ease,

        background .22s ease,

        box-shadow .22s ease;

}


.btn-fechar-modal-mesa i{

    font-size:20px;

    pointer-events:none;

}


.btn-fechar-modal-mesa:hover{

    transform:
        rotate(90deg)
        scale(1.06);

    color:#FFF;

    border-color:
        rgba(214,74,60,.62);

    background:
        rgba(157,36,28,.22);

    box-shadow:
        0 0 18px rgba(214,74,60,.18);

}


.btn-fechar-modal-mesa:focus-visible{

    outline:
        2px solid var(--mesa-dourado-claro);

    outline-offset:3px;

}


/*==================================================
    CORPO DO MODAL
===================================================*/

.modal-mesa-corpo{

    flex:1;

    min-height:0;

    padding:22px 24px;

    overflow-y:auto;

    scrollbar-width:thin;

    scrollbar-color:
        rgba(245,197,66,.45)
        rgba(255,255,255,.04);

}


.modal-mesa-corpo::-webkit-scrollbar{

    width:8px;

}


.modal-mesa-corpo::-webkit-scrollbar-track{

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

    border-radius:999px;

}


.modal-mesa-corpo::-webkit-scrollbar-thumb{

    background:
        rgba(245,197,66,.40);

    border-radius:999px;

}


/*==================================================
    GRUPOS DE PERSONALIZAÇÃO
===================================================*/

.grupo-personalizacao-mesa{

    padding:18px;

    border-radius:20px;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

}


.grupo-personalizacao-mesa
+
.grupo-personalizacao-mesa{

    margin-top:18px;

}


/*==================================================
    TÍTULO DOS GRUPOS
===================================================*/

.titulo-grupo-personalizacao{

    margin-bottom:16px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

}


.titulo-grupo-personalizacao > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.titulo-grupo-personalizacao span{

    color:rgba(255,248,231,.46);

    font-size:9px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.4px;

}


.titulo-grupo-personalizacao strong{

    margin-top:3px;

    color:var(--mesa-branco);

    font-size:16px;

    font-weight:900;

}


.titulo-grupo-personalizacao > i{

    color:rgba(245,197,66,.72);

    font-size:20px;

}


/*==================================================
    GRADE DE BARALHOS
===================================================*/

.grade-opcoes-baralho{

    display:grid;

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

    gap:14px;

}


/*==================================================
    OPÇÃO DE BARALHO
===================================================*/

.opcao-baralho{

    position:relative;

    min-height:210px;

    padding:16px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    border-radius:18px;

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

    outline:none;

    background:

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

    color:var(--mesa-branco);

    cursor:pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);

    transition:

        transform .24s ease,

        border-color .24s ease,

        background .24s ease,

        box-shadow .24s ease;

}


.opcao-baralho:hover{

    transform:translateY(-5px);

    border-color:
        rgba(245,197,66,.42);

    background:

        linear-gradient(
            145deg,
            rgba(245,197,66,.10),
            rgba(255,255,255,.025)
        );

    box-shadow:

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

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

}


.opcao-baralho.ativa{

    border-color:
        var(--mesa-dourado);

    background:

        radial-gradient(
            circle at top,
            rgba(245,197,66,.17),
            rgba(245,197,66,.035) 58%
        );

    box-shadow:

        0 0 0 2px rgba(245,197,66,.11),

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

        0 0 24px rgba(245,197,66,.12);

}


.opcao-baralho:focus-visible{

    outline:
        2px solid var(--mesa-dourado-claro);

    outline-offset:3px;

}


/*==================================================
    CHECK DE SELEÇÃO
===================================================*/

.opcao-baralho > .fa-circle-check{

    position:absolute;

    top:12px;

    right:12px;

    color:var(--mesa-dourado);

    font-size:19px;

    opacity:0;

    transform:scale(.6);

    transition:

        opacity .22s ease,

        transform .22s ease;

}


.opcao-baralho.ativa
>
.fa-circle-check{

    opacity:1;

    transform:scale(1);

}


/*==================================================
    TEXTO DAS OPÇÕES
===================================================*/

.opcao-baralho > span{

    margin-top:14px;

    color:var(--mesa-branco);

    font-size:15px;

    font-weight:900;

}


.opcao-baralho > small{

    margin-top:4px;

    color:rgba(255,248,231,.48);

    font-size:11px;

    font-weight:700;

}


/*==================================================
    PRÉVIA DO BARALHO
===================================================*/

.preview-baralho{

    position:relative;

    width:132px;

    height:118px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*==================================================
    MINI CARTAS
===================================================*/

.mini-carta{

    position:absolute;

    width:66px;

    height:94px;

    padding:7px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    border-radius:9px;

    border:
        1px solid rgba(0,0,0,.18);

    background:

        linear-gradient(
            145deg,
            #FFFDF7,
            #E9E1D0
        );

    box-shadow:
        0 9px 15px rgba(0,0,0,.30);

}


.mini-carta:first-child{

    left:18px;

    transform:
        rotate(-10deg)
        translateY(4px);

}


.mini-carta:nth-child(2){

    right:18px;

    transform:
        rotate(10deg)
        translateY(4px);

}


.mini-carta span{

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:18px;

    font-weight:900;

    line-height:1;

}


.mini-carta strong{

    position:absolute;

    left:50%;

    top:54%;

    transform:translate(-50%,-50%);

    font-size:33px;

}


.mini-carta.vermelha,
.mini-carta.bisca-vermelha{

    color:#B62121;

}


.mini-carta.preta,
.mini-carta.bisca-preta{

    color:#151515;

}


/*==================================================
    BARALHO BISCA
===================================================*/

.mini-carta.bisca-vermelha,
.mini-carta.bisca-preta{

    border:
        2px solid rgba(165,103,20,.55);

    background:

        linear-gradient(
            145deg,
            #FFF8DD,
            #DFCE9F
        );

}


.mini-carta.bisca-vermelha span,
.mini-carta.bisca-preta span{

    font-size:13px;

}


/*==================================================
    BARALHO ESPANHOL
===================================================*/

.preview-baralho.espanhol
.mini-carta{

    background:

        linear-gradient(
            145deg,
            #FFF9E6,
            #E8D7A9
        );

    border:
        2px solid rgba(144,94,27,.45);

}


.mini-carta.espanhola.ouro{

    color:#B47A14;

}


.mini-carta.espanhola.espada{

    color:#1E496A;

}


/*==================================================
    GRADE DOS VERSOS
===================================================*/

.grade-versos-baralho{

    display:grid;

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

    gap:12px;

}


/*==================================================
    OPÇÃO DE VERSO
===================================================*/

.opcao-verso{

    position:relative;

    min-height:148px;

    padding:12px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:16px;

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

    outline:none;

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

    color:var(--mesa-branco);

    cursor:pointer;

    transition:

        transform .22s ease,

        border-color .22s ease,

        background .22s ease,

        box-shadow .22s ease;

}


.opcao-verso:hover{

    transform:translateY(-4px);

    border-color:
        rgba(245,197,66,.38);

    background:
        rgba(245,197,66,.055);

}


.opcao-verso.ativa{

    border-color:
        var(--mesa-dourado);

    background:
        rgba(245,197,66,.075);

    box-shadow:

        0 0 0 2px rgba(245,197,66,.10),

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

}


.opcao-verso:focus-visible{

    outline:
        2px solid var(--mesa-dourado-claro);

    outline-offset:3px;

}


.opcao-verso > span{

    font-size:12px;

    font-weight:900;

}


/*==================================================
    PRÉVIA DOS VERSOS
===================================================*/

.preview-verso{

    position:relative;

    width:64px;

    height:92px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:9px;

    border:
        2px solid rgba(255,229,138,.76);

    box-shadow:

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

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

}


.preview-verso::before{

    content:"";

    position:absolute;

    inset:6px;

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

    border-radius:6px;

}


.preview-verso i{

    position:relative;

    z-index:2;

    color:rgba(255,239,189,.90);

    font-size:25px;

    text-shadow:
        0 2px 4px rgba(0,0,0,.42);

}


/*==================================================
    CORES DOS VERSOS
===================================================*/

.verso-gaucho{

    background:

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

        linear-gradient(
            145deg,
            #7F2019,
            #38100D
        );

}


.verso-tradicional{

    background:

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

        linear-gradient(
            145deg,
            #174C78,
            #071D31
        );

}


.verso-verde{

    background:

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

        linear-gradient(
            145deg,
            #2D724A,
            #0B2F1C
        );

}


.verso-vermelho{

    background:

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

        linear-gradient(
            145deg,
            #B12C24,
            #4A100D
        );

}

.verso-rio-grande-do-sul{

    background:

        url("../img/baralhos/versos/rio-grande-do-sul.png")

        center

        center

        no-repeat;

    background-size:100% 100%;

}

/*==================================================
    MODAL DOS FUNDOS
===================================================*/

.modal-fundos{

    width:min(980px,100%);

}


/*==================================================
    GRADE DOS FUNDOS
===================================================*/

.grade-fundos-mesa{

    display:grid;

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

    gap:15px;

}


/*==================================================
    OPÇÃO DE FUNDO
===================================================*/

.opcao-fundo-mesa{

    position:relative;

    min-height:210px;

    padding:11px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    justify-content:flex-start;

    border-radius:18px;

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

    outline:none;

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

    color:var(--mesa-branco);

    cursor:pointer;

    overflow:hidden;

    transition:

        transform .24s ease,

        border-color .24s ease,

        background .24s ease,

        box-shadow .24s ease;

}


.opcao-fundo-mesa:hover{

    transform:translateY(-5px);

    border-color:
        rgba(245,197,66,.42);

    background:
        rgba(245,197,66,.045);

    box-shadow:
        0 15px 28px rgba(0,0,0,.30);

}


.opcao-fundo-mesa.ativa{

    border-color:
        var(--mesa-dourado);

    background:
        rgba(245,197,66,.065);

    box-shadow:

        0 0 0 2px rgba(245,197,66,.10),

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

        0 0 22px rgba(245,197,66,.11);

}


.opcao-fundo-mesa:focus-visible{

    outline:
        2px solid var(--mesa-dourado-claro);

    outline-offset:3px;

}


/*==================================================
    CHECK DO FUNDO
===================================================*/

.opcao-fundo-mesa
>
.fa-circle-check{

    position:absolute;

    top:18px;

    right:18px;

    z-index:5;

    color:var(--mesa-dourado);

    font-size:20px;

    opacity:0;

    transform:scale(.6);

    filter:
        drop-shadow(0 2px 4px rgba(0,0,0,.55));

    transition:

        opacity .22s ease,

        transform .22s ease;

}


.opcao-fundo-mesa.ativa
>
.fa-circle-check{

    opacity:1;

    transform:scale(1);

}


/*==================================================
    TEXTO DO FUNDO
===================================================*/

.opcao-fundo-mesa > div:not(.preview-fundo-mesa){

    padding:12px 5px 3px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.opcao-fundo-mesa strong{

    color:var(--mesa-branco);

    font-size:15px;

    font-weight:900;

}


.opcao-fundo-mesa span{

    margin-top:3px;

    color:rgba(255,248,231,.48);

    font-size:11px;

    font-weight:700;

}


/*==================================================
    PRÉVIA DO FUNDO
===================================================*/

.preview-fundo-mesa{

    position:relative;

    width:100%;

    height:135px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:13px;

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

    box-shadow:

        inset 0 0 32px rgba(0,0,0,.26),

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

}


.preview-fundo-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(0,0,0,.34) 100%
        );

}


.preview-fundo-mesa > i{

    position:relative;

    z-index:2;

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

    font-size:38px;

    text-shadow:

        0 4px 12px rgba(0,0,0,.62),

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

}


/*==================================================
    FUNDO PAMPA
===================================================*/

.fundo-pampa{

    background:

        radial-gradient(
            circle at 40% 30%,
            rgba(107,190,122,.34),
            transparent 36%
        ),

        linear-gradient(
            135deg,
            #2C7049,
            #0D321E
        );

}


/*==================================================
    FUNDO GALPÃO
===================================================*/

.fundo-galpao{

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 2px,
            transparent 2px,
            transparent 36px
        ),

        linear-gradient(
            135deg,
            #82542C,
            #35200F
        );

}


/*==================================================
    FUNDO FARRAPO
===================================================*/

.fundo-farrapo{

    background:

        radial-gradient(
            circle at 30% 30%,
            rgba(255,120,79,.30),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #A72B22,
            #48100D
        );

}


/*==================================================
    FUNDO NOTURNO
===================================================*/

.fundo-noturno{

    background:

        radial-gradient(
            circle at 30% 20%,
            rgba(102,153,255,.28),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #173B65,
            #071427
        );

}


/*==================================================
    FUNDO OURO
===================================================*/

.fundo-ouro{

    background:

        radial-gradient(
            circle at 38% 25%,
            rgba(255,238,148,.38),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #B98A24,
            #543407
        );

}


/*==================================================
    FUNDO VINHO
===================================================*/

.fundo-vinho{

    background:

        radial-gradient(
            circle at 38% 28%,
            rgba(214,97,137,.26),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #742441,
            #2D0917
        );

}


/*==================================================
    RODAPÉ DOS MODAIS
===================================================*/

.modal-mesa-rodape{

    min-height:82px;

    padding:16px 24px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

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

    background:

        linear-gradient(
            0deg,
            rgba(255,255,255,.035),
            transparent
        );

}


/*==================================================
    BOTÕES DOS MODAIS
===================================================*/

.btn-modal-secundario,
.btn-modal-principal,
.btn-modal-perigo{

    min-height:46px;

    padding:0 20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:14px;

    outline:none;

    font-size:13px;

    font-weight:900;

    cursor:pointer;

    transition:

        transform .22s ease,

        border-color .22s ease,

        background .22s ease,

        color .22s ease,

        box-shadow .22s ease;

}


/*==================================================
    BOTÃO SECUNDÁRIO
===================================================*/

.btn-modal-secundario{

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

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

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

}


.btn-modal-secundario:hover{

    transform:translateY(-2px);

    color:#FFF;

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

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

}


/*==================================================
    BOTÃO PRINCIPAL
===================================================*/

.btn-modal-principal{

    border:
        1px solid var(--mesa-dourado);

    background:

        linear-gradient(
            145deg,
            var(--mesa-dourado-claro),
            var(--mesa-dourado)
        );

    color:#251705;

    box-shadow:

        0 9px 19px rgba(0,0,0,.28),

        0 0 18px rgba(245,197,66,.16);

}


.btn-modal-principal:hover{

    transform:translateY(-3px);

    background:

        linear-gradient(
            145deg,
            #FFF0A8,
            #F8CA44
        );

    box-shadow:

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

        0 0 24px rgba(245,197,66,.28);

}


/*==================================================
    BOTÃO PERIGO
===================================================*/

.btn-modal-perigo{

    border:
        1px solid rgba(214,74,60,.72);

    background:

        linear-gradient(
            145deg,
            #D64A3C,
            #9D241C
        );

    color:#FFF;

    box-shadow:
        0 9px 20px rgba(0,0,0,.28);

}


.btn-modal-perigo:hover{

    transform:translateY(-3px);

    background:

        linear-gradient(
            145deg,
            #EC6456,
            #B52C22
        );

    box-shadow:

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

        0 0 22px rgba(214,74,60,.22);

}


/*==================================================
    FOCO DOS BOTÕES
===================================================*/

.btn-modal-secundario:focus-visible,
.btn-modal-principal:focus-visible,
.btn-modal-perigo:focus-visible{

    outline:
        2px solid var(--mesa-dourado-claro);

    outline-offset:3px;

}


/*==================================================
    CLIQUE DOS BOTÕES
===================================================*/

.btn-modal-secundario:active,
.btn-modal-principal:active,
.btn-modal-perigo:active{

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

}


/*==================================================
    RESPONSIVO — PARTE 4A
===================================================*/

@media (max-width:850px){

    .modal-mesa{

        padding:14px;

    }


    .modal-mesa-conteudo{

        max-height:
            calc(100vh - 28px);

        border-radius:22px;

    }


    .modal-mesa-cabecalho{

        min-height:80px;

        padding:16px 18px;

    }


    .modal-mesa-cabecalho h2{

        font-size:22px;

    }


    .modal-mesa-corpo{

        padding:18px;

    }


    .grade-opcoes-baralho{

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

    }


    .grade-versos-baralho{

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

    }


    .grade-fundos-mesa{

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

    }


    .modal-mesa-rodape{

        min-height:72px;

        padding:13px 18px;

    }

}


@media (max-width:600px){

    .modal-mesa{

        padding:8px;

        align-items:flex-end;

    }


    .modal-mesa-conteudo{

        width:100%;

        max-height:
            calc(100vh - 16px);

        border-radius:
            22px
            22px
            14px
            14px;

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

    }


    .modal-mesa-cabecalho{

        min-height:70px;

        padding:13px 14px;

    }


    .modal-mesa-legenda{

        font-size:8px;

    }


    .modal-mesa-cabecalho h2{

        font-size:19px;

    }


    .btn-fechar-modal-mesa{

        width:39px;

        height:39px;

        border-radius:12px;

    }


    .modal-mesa-corpo{

        padding:12px;

    }


    .grupo-personalizacao-mesa{

        padding:12px;

        border-radius:15px;

    }


    .titulo-grupo-personalizacao{

        margin-bottom:12px;

    }


    .titulo-grupo-personalizacao strong{

        font-size:14px;

    }


    .grade-opcoes-baralho{

        grid-template-columns:1fr;

        gap:10px;

    }


    .opcao-baralho{

        min-height:170px;

        padding:12px;

    }


    .preview-baralho{

        height:100px;

    }


    .mini-carta{

        width:57px;

        height:82px;

    }


    .grade-versos-baralho{

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

        gap:9px;

    }


    .opcao-verso{

        min-height:125px;

        padding:9px;

    }


    .preview-verso{

        width:54px;

        height:78px;

    }


    .grade-fundos-mesa{

        grid-template-columns:1fr;

        gap:10px;

    }


    .opcao-fundo-mesa{

        min-height:180px;

    }


    .preview-fundo-mesa{

        height:112px;

    }


    .modal-mesa-rodape{

        min-height:auto;

        padding:11px 12px;

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:8px;

    }


    .btn-modal-secundario,
    .btn-modal-principal,
    .btn-modal-perigo{

        min-height:42px;

        padding:0 10px;

        border-radius:12px;

        font-size:11px;

    }

}
/*==================================================
    BISCA GAÚCHA
    MESA DA PARTIDA
    PARTE 4B — MENU LATERAL, CONFIRMAÇÕES E FINAL
===================================================*/


/*==================================================
    MENU LATERAL DA PARTIDA
===================================================*/

.menu-lateral-mesa{

    position:fixed;

    top:0;

    right:0;

    width:min(420px,100%);

    height:100vh;

    display:flex;

    flex-direction:column;

    z-index:240;

    border-left:
        1px solid rgba(245,197,66,.30);

    background:

        linear-gradient(
            160deg,
            rgba(11,31,21,.99),
            rgba(4,13,9,.995)
        );

    box-shadow:

        -24px 0 60px rgba(0,0,0,.55),

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

    transform:translateX(105%);

    visibility:hidden;

    pointer-events:none;

    transition:

        transform .36s
        cubic-bezier(.18,.82,.25,1),

        visibility .36s ease;

}


/*==================================================
    MENU ABERTO
===================================================*/

.menu-lateral-mesa.ativo{

    transform:translateX(0);

    visibility:visible;

    pointer-events:auto;

}


/*==================================================
    SOMBRA DO MENU
===================================================*/

.menu-lateral-mesa::before{

    content:"";

    position:fixed;

    inset:0;

    right:min(420px,100%);

    z-index:-1;

    opacity:0;

    pointer-events:none;

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

    backdrop-filter:
        blur(5px);

    transition:
        opacity .3s ease;

}


.menu-lateral-mesa.ativo::before{

    opacity:1;

    pointer-events:auto;

}


/*==================================================
    DETALHE SUPERIOR DO MENU
===================================================*/

.menu-lateral-mesa::after{

    content:"";

    position:absolute;

    left:12%;

    right:12%;

    top:0;

    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,66,.86),
            transparent
        );

    box-shadow:
        0 0 18px rgba(245,197,66,.42);

}


/*==================================================
    CABEÇALHO DO MENU
===================================================*/

.menu-mesa-cabecalho{

    min-height:92px;

    padding:20px 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

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

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            transparent
        );

}


/*==================================================
    TEXTO DO CABEÇALHO
===================================================*/

.menu-mesa-cabecalho > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.menu-mesa-cabecalho span{

    color:rgba(255,248,231,.46);

    font-size:9px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.5px;

}


.menu-mesa-cabecalho strong{

    margin-top:4px;

    overflow:hidden;

    color:var(--mesa-dourado-claro);

    font-size:23px;

    font-weight:900;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==================================================
    BOTÃO FECHAR MENU
===================================================*/

.btn-fechar-menu-mesa{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

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

    outline:none;

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

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

    cursor:pointer;

    transition:

        transform .22s ease,

        color .22s ease,

        border-color .22s ease,

        background .22s ease,

        box-shadow .22s ease;

}


.btn-fechar-menu-mesa i{

    font-size:20px;

    pointer-events:none;

}


.btn-fechar-menu-mesa:hover{

    transform:
        rotate(90deg)
        scale(1.06);

    color:#FFF;

    border-color:
        rgba(214,74,60,.60);

    background:
        rgba(157,36,28,.22);

    box-shadow:
        0 0 18px rgba(214,74,60,.18);

}


.btn-fechar-menu-mesa:focus-visible{

    outline:
        2px solid var(--mesa-dourado-claro);

    outline-offset:3px;

}


/*==================================================
    RESUMO DO MENU
===================================================*/

.resumo-menu-mesa{

    margin:18px 20px 12px;

    padding:14px;

    display:grid;

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

    gap:9px;

    border-radius:18px;

    border:
        1px solid rgba(245,197,66,.18);

    background:

        radial-gradient(
            circle at top,
            rgba(245,197,66,.09),
            rgba(255,255,255,.02)
        );

    box-shadow:

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

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

}


/*==================================================
    ITEM DO RESUMO
===================================================*/

.resumo-menu-mesa > div{

    min-height:66px;

    padding:9px 6px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:13px;

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

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

}


.resumo-menu-mesa span{

    color:rgba(255,248,231,.47);

    font-size:8px;

    font-weight:900;

    text-transform:uppercase;

    text-align:center;

    letter-spacing:.9px;

}


.resumo-menu-mesa strong{

    margin-top:4px;

    color:var(--mesa-dourado-claro);

    font-size:20px;

    font-weight:900;

}


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

.opcoes-menu-mesa{

    flex:1;

    min-height:0;

    padding:6px 18px 18px;

    display:flex;

    flex-direction:column;

    gap:9px;

    overflow-y:auto;

    scrollbar-width:thin;

    scrollbar-color:
        rgba(245,197,66,.42)
        rgba(255,255,255,.03);

}


.opcoes-menu-mesa::-webkit-scrollbar{

    width:7px;

}


.opcoes-menu-mesa::-webkit-scrollbar-track{

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

    border-radius:999px;

}


.opcoes-menu-mesa::-webkit-scrollbar-thumb{

    background:
        rgba(245,197,66,.38);

    border-radius:999px;

}


/*==================================================
    OPÇÃO INDIVIDUAL DO MENU
===================================================*/

.opcao-menu-mesa{

    position:relative;

    width:100%;

    min-height:72px;

    padding:11px 13px;

    display:grid;

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

    align-items:center;

    gap:12px;

    border-radius:16px;

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

    outline:none;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

    color:var(--mesa-branco);

    cursor:pointer;

    text-align:left;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:

        transform .23s ease,

        border-color .23s ease,

        background .23s ease,

        box-shadow .23s ease;

}


/*==================================================
    ÍCONE PRINCIPAL DO MENU
===================================================*/

.opcao-menu-mesa > i:first-child{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    border:
        1px solid rgba(245,197,66,.20);

    background:
        rgba(245,197,66,.075);

    color:var(--mesa-dourado-claro);

    font-size:17px;

    transition:

        transform .23s ease,

        background .23s ease,

        color .23s ease,

        border-color .23s ease;

}


/*==================================================
    TEXTO DA OPÇÃO
===================================================*/

.opcao-menu-mesa > span{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.opcao-menu-mesa strong{

    overflow:hidden;

    color:var(--mesa-branco);

    font-size:13px;

    font-weight:900;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.opcao-menu-mesa small{

    margin-top:4px;

    overflow:hidden;

    color:rgba(255,248,231,.46);

    font-size:10px;

    font-weight:700;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==================================================
    SETA DA OPÇÃO
===================================================*/

.opcao-menu-mesa > i:last-child{

    color:rgba(255,248,231,.26);

    font-size:12px;

    transition:

        transform .23s ease,

        color .23s ease;

}


/*==================================================
    HOVER DA OPÇÃO
===================================================*/

.opcao-menu-mesa:hover{

    transform:translateX(-5px);

    border-color:
        rgba(245,197,66,.34);

    background:

        linear-gradient(
            145deg,
            rgba(245,197,66,.09),
            rgba(255,255,255,.025)
        );

    box-shadow:

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

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

}


.opcao-menu-mesa:hover
>
i:first-child{

    transform:scale(1.07);

    color:#241705;

    border-color:var(--mesa-dourado);

    background:

        linear-gradient(
            145deg,
            var(--mesa-dourado-claro),
            var(--mesa-dourado)
        );

}


.opcao-menu-mesa:hover
>
i:last-child{

    transform:translateX(3px);

    color:var(--mesa-dourado);

}


/*==================================================
    FOCO DA OPÇÃO
===================================================*/

.opcao-menu-mesa:focus-visible{

    outline:
        2px solid var(--mesa-dourado-claro);

    outline-offset:3px;

}


/*==================================================
    OPÇÃO DE ALERTA
===================================================*/

.opcao-menu-mesa.alerta{

    border-color:
        rgba(245,197,66,.16);

}


.opcao-menu-mesa.alerta
>
i:first-child{

    color:#FFD96B;

    background:
        rgba(245,197,66,.09);

}


/*==================================================
    OPÇÃO DE PERIGO
===================================================*/

.opcao-menu-mesa.perigo{

    border-color:
        rgba(214,74,60,.22);

    background:

        linear-gradient(
            145deg,
            rgba(157,36,28,.10),
            rgba(255,255,255,.012)
        );

}


.opcao-menu-mesa.perigo
>
i:first-child{

    color:#FF9B91;

    border-color:
        rgba(214,74,60,.26);

    background:
        rgba(157,36,28,.14);

}


.opcao-menu-mesa.perigo:hover{

    border-color:
        rgba(214,74,60,.58);

    background:

        linear-gradient(
            145deg,
            rgba(214,74,60,.20),
            rgba(157,36,28,.07)
        );

    box-shadow:

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

        0 0 18px rgba(214,74,60,.10);

}


.opcao-menu-mesa.perigo:hover
>
i:first-child{

    color:#FFF;

    border-color:
        rgba(255,144,132,.70);

    background:

        linear-gradient(
            145deg,
            #D64A3C,
            #9D241C
        );

}


/*==================================================
    RODAPÉ DO MENU
===================================================*/

.menu-mesa-rodape{

    min-height:70px;

    padding:14px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

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

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

    color:rgba(255,248,231,.42);

    text-align:center;

}


.menu-mesa-rodape i{

    flex-shrink:0;

    color:rgba(245,197,66,.62);

    font-size:15px;

}


.menu-mesa-rodape span{

    max-width:290px;

    font-size:10px;

    font-weight:700;

    line-height:1.45;

}


/*==================================================
    MODAL DE CONFIRMAÇÃO
===================================================*/

.modal-confirmacao-mesa{

    width:min(470px,100%);

    padding:30px 28px 26px;

    align-items:center;

    overflow:visible;

    text-align:center;

}


/*==================================================
    ÍCONE DE CONFIRMAÇÃO
===================================================*/

.icone-confirmacao-mesa{

    position:relative;

    width:82px;

    height:82px;

    margin-top:-4px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:
        1px solid rgba(245,197,66,.48);

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.13),
            rgba(245,197,66,.15) 44%,
            rgba(68,40,4,.22) 100%
        );

    color:var(--mesa-dourado-claro);

    box-shadow:

        inset 0 0 22px rgba(245,197,66,.08),

        0 13px 30px rgba(0,0,0,.34),

        0 0 26px rgba(245,197,66,.10);

}


/*==================================================
    CÍRCULO EXTERNO
===================================================*/

.icone-confirmacao-mesa::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:
        1px solid rgba(245,197,66,.13);

}


.icone-confirmacao-mesa i{

    font-size:31px;

}


/*==================================================
    ÍCONE DE PERIGO
===================================================*/

.icone-confirmacao-mesa.perigo{

    border-color:
        rgba(214,74,60,.58);

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.13),
            rgba(214,74,60,.22) 44%,
            rgba(74,12,8,.32) 100%
        );

    color:#FF9B91;

    box-shadow:

        inset 0 0 22px rgba(214,74,60,.08),

        0 13px 30px rgba(0,0,0,.34),

        0 0 26px rgba(214,74,60,.12);

}


.icone-confirmacao-mesa.perigo::before{

    border-color:
        rgba(214,74,60,.16);

}


/*==================================================
    TEXTO DA CONFIRMAÇÃO
===================================================*/

.texto-confirmacao-mesa{

    margin-top:24px;

    display:flex;

    flex-direction:column;

    align-items:center;

}


.texto-confirmacao-mesa > span{

    color:rgba(255,248,231,.45);

    font-size:9px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.6px;

}


.texto-confirmacao-mesa h2{

    margin-top:7px;

    color:var(--mesa-dourado-claro);

    font-size:24px;

    font-weight:900;

    line-height:1.18;

}


.texto-confirmacao-mesa p{

    max-width:370px;

    margin-top:12px;

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

    font-size:13px;

    font-weight:700;

    line-height:1.55;

}


/*==================================================
    AÇÕES DA CONFIRMAÇÃO
===================================================*/

.acoes-confirmacao-mesa{

    width:100%;

    margin-top:25px;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:10px;

}


/*==================================================
    ANIMAÇÃO DO MENU
===================================================*/

@keyframes entradaOpcaoMenuMesa{

    0%{

        opacity:0;

        transform:translateX(22px);

    }

    100%{

        opacity:1;

        transform:translateX(0);

    }

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa{

    animation:

        entradaOpcaoMenuMesa
        .34s
        cubic-bezier(.2,.8,.2,1)
        both;

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa:nth-child(1){

    animation-delay:.04s;

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa:nth-child(2){

    animation-delay:.07s;

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa:nth-child(3){

    animation-delay:.10s;

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa:nth-child(4){

    animation-delay:.13s;

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa:nth-child(5){

    animation-delay:.16s;

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa:nth-child(6){

    animation-delay:.19s;

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa:nth-child(7){

    animation-delay:.22s;

}


.menu-lateral-mesa.ativo
.opcao-menu-mesa:nth-child(8){

    animation-delay:.25s;

}


/*==================================================
    ANIMAÇÃO DO MODAL DE CONFIRMAÇÃO
===================================================*/

@keyframes pulsoConfirmacaoMesa{

    0%{

        transform:scale(.94);

        opacity:.55;

    }

    100%{

        transform:scale(1.06);

        opacity:1;

    }

}


.modal-mesa.ativo
.icone-confirmacao-mesa::before{

    animation:

        pulsoConfirmacaoMesa
        1.3s
        ease-in-out
        infinite alternate;

}


/*==================================================
    CLASSES DE CONTROLE DA TELA
===================================================*/

.tela-mesa.menu-aberto{

    overflow:hidden;

}


.tela-mesa.modal-aberto{

    overflow:hidden;

}


/*==================================================
    REDUÇÃO DE MOVIMENTO
===================================================*/

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

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

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}


/*==================================================
    RESPONSIVO — TABLET
===================================================*/

@media (max-width:850px){

    .menu-lateral-mesa{

        width:min(390px,100%);

    }


    .menu-lateral-mesa::before{

        right:min(390px,100%);

    }


    .menu-mesa-cabecalho{

        min-height:82px;

        padding:17px 18px;

    }


    .menu-mesa-cabecalho strong{

        font-size:21px;

    }


    .resumo-menu-mesa{

        margin:
            14px
            16px
            10px;

    }


    .opcoes-menu-mesa{

        padding:
            5px
            15px
            15px;

    }


    .opcao-menu-mesa{

        min-height:68px;

    }


    .modal-confirmacao-mesa{

        padding:
            27px
            24px
            23px;

    }

}


/*==================================================
    RESPONSIVO — CELULAR
===================================================*/

@media (max-width:600px){

    .menu-lateral-mesa{

        width:100%;

    }


    .menu-lateral-mesa::before{

        display:none;

    }


    .menu-mesa-cabecalho{

        min-height:72px;

        padding:13px 14px;

    }


    .menu-mesa-cabecalho span{

        font-size:8px;

    }


    .menu-mesa-cabecalho strong{

        font-size:19px;

    }


    .btn-fechar-menu-mesa{

        width:39px;

        height:39px;

        border-radius:12px;

    }


    .resumo-menu-mesa{

        margin:
            11px
            12px
            8px;

        padding:9px;

        gap:6px;

        border-radius:14px;

    }


    .resumo-menu-mesa > div{

        min-height:54px;

        padding:6px 3px;

        border-radius:10px;

    }


    .resumo-menu-mesa span{

        font-size:7px;

    }


    .resumo-menu-mesa strong{

        font-size:17px;

    }


    .opcoes-menu-mesa{

        padding:
            4px
            11px
            11px;

        gap:7px;

    }


    .opcao-menu-mesa{

        min-height:61px;

        padding:8px 9px;

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

        gap:9px;

        border-radius:13px;

    }


    .opcao-menu-mesa > i:first-child{

        width:37px;

        height:37px;

        border-radius:11px;

        font-size:15px;

    }


    .opcao-menu-mesa strong{

        font-size:12px;

    }


    .opcao-menu-mesa small{

        margin-top:2px;

        font-size:9px;

    }


    .opcao-menu-mesa:hover{

        transform:translateX(-2px);

    }


    .menu-mesa-rodape{

        min-height:57px;

        padding:10px 14px;

    }


    .menu-mesa-rodape span{

        font-size:9px;

    }


    .modal-confirmacao-mesa{

        width:100%;

        padding:
            25px
            16px
            16px;

    }


    .icone-confirmacao-mesa{

        width:69px;

        height:69px;

    }


    .icone-confirmacao-mesa i{

        font-size:26px;

    }


    .texto-confirmacao-mesa{

        margin-top:20px;

    }


    .texto-confirmacao-mesa h2{

        font-size:20px;

    }


    .texto-confirmacao-mesa p{

        margin-top:9px;

        font-size:11px;

        line-height:1.5;

    }


    .acoes-confirmacao-mesa{

        margin-top:20px;

        grid-template-columns:1fr;

        gap:8px;

    }

}


/*==================================================
    RESPONSIVO — TELAS MUITO PEQUENAS
===================================================*/

@media (max-width:380px){

    .resumo-menu-mesa{

        grid-template-columns:
            repeat(3,minmax(70px,1fr));

        overflow-x:auto;

    }


    .opcao-menu-mesa{

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

    }


    .opcao-menu-mesa > i:first-child{

        width:35px;

        height:35px;

    }


    .modal-mesa-cabecalho h2{

        font-size:17px;

    }

}

/*==================================================
    AVATAR DOS PARTICIPANTES
===================================================*/

.avatar-participante{

    position:relative;

    width:62px;

    height:62px;

    min-width:62px;

    min-height:62px;

    border-radius:50%;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border:2px solid rgba(255,214,74,.35);

    flex-shrink:0;

}

.avatar-participante img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    border-radius:50%;

}

.avatar-participante i{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#FFD64A;

}


/*==================================================
    FOTO DO ADVERSÁRIO
===================================================*/

.foto-adversario-mesa:not([hidden]){

    display:block;

    z-index:2;

}

.foto-adversario-mesa[hidden]{

    display:none;

}

#iconeAdversarioMesa[hidden]{

    display:none !important;

}

/*==================================================
    FOTO DO JOGADOR NA MESA
===================================================*/

.avatar-jogador{

    position:relative;

    overflow:hidden;

}


.foto-jogador-mesa{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    z-index:2;

}


.foto-jogador-mesa[hidden]{

    display:none !important;

}


#iconeJogadorMesa{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#FFD64A;

    z-index:1;

}


#iconeJogadorMesa[hidden]{

    display:none !important;

}

/*==================================================
    TESTE — BARALHO ESPANHOL
===================================================*/

.tela-mesa.baralho-espanhol .carta-jogador,
.tela-mesa.baralho-espanhol .carta-bisca-mesa{

    border:

        3px solid #C89B3C;

}


.tela-mesa.baralho-espanhol .frente-carta{

    background:

        linear-gradient(
            145deg,
            #FFF4CE,
            #DDBD77
        );

}


/*==================================================
    BARALHO ESPANHOL — 2 DE ESPADAS
===================================================*/


/*==================================================
    COR DA CARTA
===================================================*/

.tela-mesa.baralho-espanhol
.carta-jogador[data-naipe="espadas"]{

    color:#172D45;

}


/*==================================================
    DUAS ESPADAS NO CENTRO
===================================================*/

.tela-mesa.baralho-espanhol
.carta-jogador[data-naipe="espadas"]
.carta-naipe-centro{

    top:54%;

    width:62px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:0;

    text-shadow:none;

}


/*==================================================
    ESTRUTURA DA ESPADA
===================================================*/

.tela-mesa.baralho-espanhol
.carta-naipe-centro
.espada-espanhola{

    position:relative;

    width:12px;

    height:65px;

    display:block;

    border-radius:

        7px
        7px
        4px
        4px;

    background:

        linear-gradient(
            90deg,
            #8BC5E8 0%,
            #E8F7FF 42%,
            #4F9BC9 52%,
            #D8F1FF 100%
        );

    border:

        1px solid #245B83;

    box-shadow:

        inset 2px 0 2px rgba(255,255,255,.75),

        inset -2px 0 2px rgba(21,72,108,.24),

        0 2px 3px rgba(0,0,0,.18);

}


/*==================================================
    PONTA DA ESPADA
===================================================*/

.tela-mesa.baralho-espanhol
.carta-naipe-centro
.espada-espanhola::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:-9px;

    width:10px;

    height:16px;

    transform:

        translateX(-50%)
        rotate(45deg);

    border-right:

        1px solid #245B83;

    border-bottom:

        1px solid #245B83;

    background:

        linear-gradient(
            135deg,
            #E8F7FF,
            #4F9BC9
        );

    border-radius:

        0
        0
        3px
        0;

}


/*==================================================
    CABO E GUARDA DA ESPADA
===================================================*/

.tela-mesa.baralho-espanhol
.carta-naipe-centro
.espada-espanhola::after{

    content:"";

    position:absolute;

    left:50%;

    top:-15px;

    width:27px;

    height:10px;

    transform:translateX(-50%);

    border-radius:7px;

    border:

        2px solid #8A3E1A;

    background:

        linear-gradient(
            180deg,
            #F4C542,
            #C77917
        );

    box-shadow:

        0 -8px 0 -2px #A54B20,

        0 -11px 0 -3px #F4C542,

        0 2px 3px rgba(0,0,0,.25);

}


/*==================================================
    POSIÇÃO DAS DUAS ESPADAS
===================================================*/

.tela-mesa.baralho-espanhol
.carta-naipe-centro
.espada-espanhola:first-child{

    transform:

        rotate(-4deg)
        translateY(2px);

}


.tela-mesa.baralho-espanhol
.carta-naipe-centro
.espada-espanhola:last-child{

    transform:

        rotate(4deg)
        translateY(-2px);

}


/*==================================================
    ESPADAS PEQUENAS NO CANTO
===================================================*/

.tela-mesa.baralho-espanhol
.carta-naipe
.espada-espanhola{

    position:relative;

    width:3px;

    height:15px;

    display:inline-block;

    margin-right:4px;

    border-radius:2px;

    border:

        1px solid #245B83;

    background:#72B7DF;

}


.tela-mesa.baralho-espanhol
.carta-naipe
.espada-espanhola::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:-3px;

    width:4px;

    height:4px;

    transform:

        translateX(-50%)
        rotate(45deg);

    background:#72B7DF;

}


.tela-mesa.baralho-espanhol
.carta-naipe
.espada-espanhola::after{

    content:"";

    position:absolute;

    left:50%;

    top:-4px;

    width:9px;

    height:3px;

    transform:translateX(-50%);

    border-radius:3px;

    background:#D79B25;

}

/*==================================================
    SISTEMA DE VERSOS DAS CARTAS
===================================================*/


/*==================================================
    PREVIEWS DO MODAL
===================================================*/


/* GAÚCHO */

.preview-verso.verso-gaucho{

    background:

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

        linear-gradient(
            145deg,
            #7F2019,
            #38100D
        );

}


/* TRADICIONAL */

.preview-verso.verso-tradicional{

    background:

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

        linear-gradient(
            145deg,
            #174C78,
            #071D31
        );

}


/* PAMPA */

.preview-verso.verso-verde{

    background:

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

        linear-gradient(
            145deg,
            #2D724A,
            #0B2F1C
        );

}


/* FARRAPO */

.preview-verso.verso-vermelho{

    background:

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

        linear-gradient(
            145deg,
            #B12C24,
            #4A100D
        );

}


/* RIO GRANDE DO SUL */

.preview-verso.verso-rio-grande-do-sul{

    background-image:
        url("../img/baralhos/versos/rio-grande-do-sul.png");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        100% 100%;

    border-radius:
        12px;

    overflow:
        hidden;

}


/*==================================================
    CARTAS DA MESA — GAÚCHO
===================================================*/

[data-verso="gaucho"] .verso-carta,
[data-verso="gaucho"] .carta-monte{

    background:

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

        linear-gradient(
            145deg,
            #7F2019,
            #38100D
        ) !important;

}


/*==================================================
    CARTAS DA MESA — TRADICIONAL
===================================================*/

[data-verso="tradicional"] .verso-carta,
[data-verso="tradicional"] .carta-monte{

    background:

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

        linear-gradient(
            145deg,
            #174C78,
            #071D31
        ) !important;

}


/*==================================================
    CARTAS DA MESA — PAMPA
===================================================*/

[data-verso="verde"] .verso-carta,
[data-verso="verde"] .carta-monte{

    background:

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

        linear-gradient(
            145deg,
            #2D724A,
            #0B2F1C
        ) !important;

}


/*==================================================
    CARTAS DA MESA — FARRAPO
===================================================*/

[data-verso="vermelho"] .verso-carta,
[data-verso="vermelho"] .carta-monte{

    background:

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

        linear-gradient(
            145deg,
            #B12C24,
            #4A100D
        ) !important;

}


/*==================================================
    CARTAS DA MESA — RIO GRANDE DO SUL
===================================================*/

[data-verso="rio-grande-do-sul"] .verso-carta,
[data-verso="rio-grande-do-sul"] .carta-monte{

    background-image:
        url("../img/baralhos/versos/rio-grande-do-sul.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        100% 100% !important;

}


/*==================================================
    AJUSTES GERAIS DOS VERSOS NA MESA
===================================================*/

[data-verso] .verso-carta,
[data-verso] .carta-monte{

    overflow:
        hidden;

}


/*==================================================
    NÃO EXIBIR ÍCONE NO PREVIEW DO RIO GRANDE DO SUL
===================================================*/

.preview-verso.verso-rio-grande-do-sul i{

    display:
        none;

}

/*==================================================
    PREVIEWS DOS BARALHOS ESPANHÓIS
===================================================*/


/*==================================================
    CARTAS PEQUENAS DOS PREVIEWS
===================================================*/

.mini-carta-sprite{

    position:relative;

    width:54px;

    height:76px;

    flex-shrink:0;

    overflow:hidden;

    border:2px solid #DDBB55;

    border-radius:8px;

    background-repeat:no-repeat;

    box-shadow:

        0 5px 12px rgba(0,0,0,.35),

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

}


/*==================================================
    POSIÇÃO DAS CARTAS NO PREVIEW
===================================================*/

.preview-espanhol-branco
.mini-carta-sprite:first-child,

.preview-espanhol-preto
.mini-carta-sprite:first-child{

    transform:
        rotate(-7deg)
        translateX(5px);

}


.preview-espanhol-branco
.mini-carta-sprite:last-child,

.preview-espanhol-preto
.mini-carta-sprite:last-child{

    transform:
        rotate(7deg)
        translateX(-5px);

}


/*==================================================
    SPRITESHEET — CONFIGURAÇÃO GERAL
===================================================*/

/*
    Cada spritesheet possui:

    5 cartas na primeira linha
    5 cartas na segunda linha

    Por isso usamos:

    500% na largura
    200% na altura
*/

.espanhol-branco-ouros,
.espanhol-branco-espadas,
.espanhol-preto-ouros,
.espanhol-preto-espadas{

    background-size:
        500% 200%;

    background-position:
        left top;

}


/*==================================================
    ESPANHOL BRANCO — OUROS
===================================================*/

.espanhol-branco-ouros{

    background-image:
        url("../img/baralhos/espanhol/espanhol-branco/ouros.png");

}


/*==================================================
    ESPANHOL BRANCO — ESPADAS
===================================================*/

.espanhol-branco-espadas{

    background-image:
        url("../img/baralhos/espanhol/espanhol-branco/espadas.png");

    /*
        Segunda carta da primeira linha
    */

    background-position:
        25% 0;

}


/*==================================================
    ESPANHOL PRETO — OUROS
===================================================*/

.espanhol-preto-ouros{

    background-image:
        url("../img/baralhos/espanhol/espanhol-preto/ouros.png");

}


/*==================================================
    ESPANHOL PRETO — ESPADAS
===================================================*/

.espanhol-preto-espadas{

    background-image:
        url("../img/baralhos/espanhol/espanhol-preto/espadas.png");

    /*
        Segunda carta da primeira linha
    */

    background-position:
        25% 0;

}


/*==================================================
    DESTAQUE DO PREVIEW BRANCO
===================================================*/

.preview-espanhol-branco
.mini-carta-sprite{

    background-color:#FDFBF5;

    border-color:#D7B84B;

}


/*==================================================
    DESTAQUE DO PREVIEW PRETO
===================================================*/

.preview-espanhol-preto
.mini-carta-sprite{

    background-color:#080808;

    border-color:#D8A82C;

    box-shadow:

        0 5px 14px rgba(0,0,0,.55),

        0 0 8px rgba(216,168,44,.18),

        inset 0 0 0 1px rgba(255,215,90,.15);

}

/*==================================================
    CARTAS ESPANHOLAS — AJUSTE FINAL
===================================================*/


/*==================================================
    CONTÊINER GERAL
===================================================*/

.carta-modelo-espanhol{

    position:relative;

    overflow:hidden;

    padding:0;

    border:none;

    background:transparent;

}


/*==================================================
    FRENTE DA CARTA PELO SPRITESHEET
===================================================*/

.frente-carta-espanhol{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    transform:none;

    margin:0;

    padding:0;

    max-width:none;

    max-height:none;

    background-repeat:no-repeat;

    background-size:500% 200%;

    border-radius:inherit;

    overflow:hidden;

}


/*==================================================
    REMOVER ELEMENTOS DO MODELO ANTIGO
===================================================*/

.carta-modelo-espanhol .carta-valor,
.carta-modelo-espanhol .carta-naipe,
.carta-modelo-espanhol .carta-naipe-centro{

    display:none;

}


/*==================================================
    CARTAS NA MÃO DO JOGADOR
===================================================*/

.carta-jogador.carta-modelo-espanhol{

    width:118px;

    height:177px;

    flex:0 0 118px;

    border-radius:8px;

    overflow:hidden;

}


/*==================================================
    MÃO DO JOGADOR
===================================================*/

.mao-jogador{

    position:absolute;

    left:50%;

    bottom:18px;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:flex-end;

    z-index:20;

}


/*==================================================
    POSIÇÃO DAS CARTAS DA MÃO
===================================================*/

.mao-jogador .carta-jogador{

    position:relative;

    width:118px;

    height:177px;

    flex:0 0 118px;

    margin-left:-42px;

    transition:transform .25s ease;

}


.mao-jogador .carta-jogador:first-child{

    margin-left:0;

}


/* CARTA ESQUERDA */

.mao-jogador .carta-jogador:nth-child(1){

    transform:
        translateY(22px)
        rotate(-11deg);

    z-index:1;

}


/* CARTA CENTRAL */

.mao-jogador .carta-jogador:nth-child(2){

    transform:
        translateY(8px)
        rotate(0deg);

    z-index:3;

}


/* CARTA DIREITA */

.mao-jogador .carta-jogador:nth-child(3){

    transform:
        translateY(22px)
        rotate(11deg);

    z-index:2;

}


/*==================================================
    HOVER DA MÃO
===================================================*/

.mao-jogador .carta-jogador:hover{

    transform:translateY(-12px);

    z-index:99;

}


/*==================================================
    ÁREAS DAS CARTAS JOGADAS
===================================================*/

#jogadaJogador,
#jogadaAdversario{

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:visible;

}


/*==================================================
    CARTAS JOGADAS NO CENTRO
===================================================*/

#jogadaJogador .carta-jogada,
#jogadaAdversario .carta-jogada{

    width:108px;

    height:162px;

    margin:0 auto;

    padding:0;

    position:relative;

    overflow:hidden;

    border-radius:8px;

}


/*==================================================
    CARTA ESPANHOLA JOGADA
===================================================*/

#jogadaJogador .carta-modelo-espanhol,
#jogadaAdversario .carta-modelo-espanhol{

    width:108px;

    height:162px;

}


/*==================================================
    CARTA DA BISCA
===================================================*/

#cartaBiscaMesa.carta-modelo-espanhol{

    overflow:hidden;

}

/*==================================================
    TEMAS DE FUNDO DA MESA
===================================================*/


/*==================================================
    PAMPA
===================================================*/

#fundoMesaPartida.tema-fundo-pampa{

    background:

        radial-gradient(
            circle at center,
            rgba(52,132,82,.28),
            transparent 58%
        ),

        linear-gradient(
            145deg,
            #123b24,
            #0b2618 55%,
            #07170f
        ) !important;

}


/*==================================================
    GALPÃO
===================================================*/

#fundoMesaPartida.tema-fundo-galpao{

    background:

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            145deg,
            #714621,
            #4b2b14 55%,
            #2c170b
        ) !important;

    background-size:

        72px 100%,
        100% 100%;

}


/*==================================================
    FARRAPO
===================================================*/

#fundoMesaPartida.tema-fundo-farrapo{

    background:

        radial-gradient(
            circle at center,
            rgba(255,96,64,.24),
            transparent 58%
        ),

        linear-gradient(
            145deg,
            #8b201c,
            #54100f 55%,
            #260707
        ) !important;

}


/*==================================================
    NOITE NO SUL
===================================================*/

#fundoMesaPartida.tema-fundo-noturno{

    background:

        radial-gradient(
            circle at center,
            rgba(76,130,210,.20),
            transparent 58%
        ),

        linear-gradient(
            145deg,
            #142f55,
            #0c1d37 55%,
            #060f1e
        ) !important;

}


/*==================================================
    CAMPEÃO
===================================================*/

#fundoMesaPartida.tema-fundo-ouro{

    background:

        radial-gradient(
            circle at center,
            rgba(255,215,92,.30),
            transparent 58%
        ),

        linear-gradient(
            145deg,
            #9a6b12,
            #624209 55%,
            #2f1f03
        ) !important;

}


/*==================================================
    ESTÂNCIA
===================================================*/

#fundoMesaPartida.tema-fundo-vinho{

    background:

        radial-gradient(
            circle at center,
            rgba(178,64,105,.22),
            transparent 58%
        ),

        linear-gradient(
            145deg,
            #651c3c,
            #3e1027 55%,
            #1d0712
        ) !important;

}
/*==================================================
    CRONÔMETRO DA JOGADA
===================================================*/

#tempoJogadaMesa{

    transition:

        background .25s ease,

        border-color .25s ease,

        box-shadow .25s ease,

        transform .25s ease,

        color .25s ease;

}


/*==================================================
    TEMPO NORMAL (10 ATÉ 6)
===================================================*/

#tempoJogadaMesa.tempo-normal{

    background:
        linear-gradient(
            180deg,
            #2ecc71,
            #239b56
        );

    border:2px solid #58d68d;

    color:#ffffff;

    box-shadow:
        0 0 15px
        rgba(46,204,113,.45);

}


/*==================================================
    TEMPO DE ATENÇÃO (5 E 4)
===================================================*/

#tempoJogadaMesa.tempo-atencao{

    background:
        linear-gradient(
            180deg,
            #f1c40f,
            #d4ac0d
        );

    border:2px solid #f7dc6f;

    color:#222;

    box-shadow:
        0 0 18px
        rgba(241,196,15,.60);

}


/*==================================================
    TEMPO URGENTE (3 ATÉ 0)
===================================================*/

#tempoJogadaMesa.tempo-urgente{

    background:
        linear-gradient(
            180deg,
            #e74c3c,
            #b03a2e
        );

    border:2px solid #ff8a80;

    color:#ffffff;

    box-shadow:
        0 0 22px
        rgba(231,76,60,.90);

    animation:
        pulsarTempoBisca
        .7s
        infinite;

}


/*==================================================
    ANIMAÇÃO DO CRONÔMETRO
===================================================*/

@keyframes pulsarTempoBisca{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.10);

    }

    100%{

        transform:scale(1);

    }

}
/*==================================================
    BOTÃO TROCAR TRUNFO
===================================================*/

.btn-trocar-trunfo-mesa{

    width:100%;

    margin-top:10px;

    padding:9px 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

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

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            #f5c542,
            #c99712
        );

    color:#241b00;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

    box-shadow:

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

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

    transition:

        transform .2s ease,

        filter .2s ease,

        box-shadow .2s ease;

}


/*==================================================
    HOVER DO BOTÃO
===================================================*/

.btn-trocar-trunfo-mesa:hover{

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:

        0 8px 18px
        rgba(0,0,0,.38),

        0 0 18px
        rgba(245,197,66,.40);

}


/*==================================================
    CLIQUE DO BOTÃO
===================================================*/

.btn-trocar-trunfo-mesa:active{

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

}


/*==================================================
    BOTÃO OCULTO
===================================================*/

.btn-trocar-trunfo-mesa[hidden]{

    display:none !important;

}
/*==================================================
    FIM DO ARQUIVO
    CSS DA MESA DA PARTIDA COMPLETO
===================================================*/
/*==================================================
    CORREÇÃO — BOTÃO DE TROCA DO TRUNFO
===================================================*/

.area-principal-mesa{

    overflow:visible;

}


.centro-mesa-partida{

    overflow:visible;

}


.area-bisca-mesa{

    position:relative;

    min-width:170px;

    overflow:visible;

    z-index:30;

}


#btnTrocarTrunfoMesa{

    position:relative;

    width:auto;

    min-width:165px;

    min-height:38px;

    flex-shrink:0;

    z-index:50;

    visibility:visible;

    opacity:1;

}


#btnTrocarTrunfoMesa:not([hidden]){

    display:flex !important;

}


#btnTrocarTrunfoMesa[hidden]{

    display:none !important;

}
/*==================================================
    MODAL — FIM DA PARTIDA
===================================================*/
/*==================================================
    CONTEÚDO DO MODAL
===================================================*/

.modal-fim-partida-mesa{

    width:min(760px,100%);

    padding:28px;

    overflow:visible;

    border-radius:28px;

    background:

        radial-gradient(
            circle at top,
            rgba(245,197,66,.16),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            rgba(13,42,27,.99),
            rgba(5,17,11,.995)
        );

}


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

.fim-partida-cabecalho{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


.fim-partida-cabecalho > span{

    color:rgba(255,248,231,.48);

    font-size:10px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:2px;

}


.fim-partida-cabecalho h2{

    margin-top:7px;

    color:var(--mesa-dourado-claro);

    font-size:34px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1px;

}


.fim-partida-cabecalho > strong{

    margin-top:7px;

    color:#9CF0B2;

    font-size:18px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.2px;

}


/*==================================================
    PARTICIPANTES
===================================================*/

.fim-partida-participantes{

    margin-top:26px;

    display:grid;

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

    align-items:center;

    gap:18px;

}


/*==================================================
    PARTICIPANTE
===================================================*/

.fim-partida-participante{

    min-width:0;

    padding:18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:22px;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);

}


.fim-partida-participante.jogador{

    border-color:
        rgba(245,197,66,.34);

}


.fim-partida-participante.adversario{

    border-color:
        rgba(214,74,60,.28);

}


/*==================================================
    AVATAR
===================================================*/

.fim-partida-avatar{

    position:relative;

    width:92px;

    height:92px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:50%;

    border:
        3px solid rgba(245,197,66,.72);

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.15),
            rgba(245,197,66,.13) 40%,
            rgba(0,0,0,.38) 100%
        );

    color:var(--mesa-dourado-claro);

    box-shadow:

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

        0 0 24px rgba(245,197,66,.10);

}


.fim-partida-participante.adversario
.fim-partida-avatar{

    border-color:
        rgba(214,74,60,.70);

}


.fim-partida-avatar img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    border-radius:50%;

    z-index:2;

}


.fim-partida-avatar img[hidden]{

    display:none !important;

}


.fim-partida-avatar i{

    font-size:36px;

    z-index:1;

}


/*==================================================
    NOMES
===================================================*/

.fim-partida-participante > span{

    margin-top:13px;

    color:rgba(255,248,231,.48);

    font-size:10px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.3px;

}


.fim-partida-participante > strong{

    max-width:100%;

    margin-top:5px;

    overflow:hidden;

    color:var(--mesa-branco);

    font-size:21px;

    font-weight:900;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==================================================
    VERSUS
===================================================*/

.fim-partida-versus{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:
        1px solid rgba(245,197,66,.42);

    background:

        linear-gradient(
            145deg,
            var(--mesa-dourado-claro),
            var(--mesa-dourado)
        );

    color:#281905;

    font-size:18px;

    font-weight:900;

    box-shadow:

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

        0 0 22px rgba(245,197,66,.16);

}


/*==================================================
    TABELA DE RESULTADO
===================================================*/

.fim-partida-tabela{

    margin-top:24px;

    overflow:hidden;

    border-radius:19px;

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

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

}


/*==================================================
    LINHAS
===================================================*/

.fim-partida-linha{

    min-height:54px;

    padding:10px 15px;

    display:grid;

    grid-template-columns:
        minmax(150px,1.5fr)
        minmax(80px,.7fr)
        minmax(80px,.7fr);

    align-items:center;

    gap:10px;

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

}


.fim-partida-linha:last-child{

    border-bottom:none;

}


.fim-partida-linha > span{

    color:rgba(255,248,231,.55);

    font-size:11px;

    font-weight:800;

}


.fim-partida-linha > strong{

    color:var(--mesa-branco);

    font-size:16px;

    font-weight:900;

    text-align:center;

}


/*==================================================
    CABEÇALHO DA TABELA
===================================================*/

.fim-partida-linha.cabecalho{

    background:
        rgba(245,197,66,.07);

}


.fim-partida-linha.cabecalho > span,
.fim-partida-linha.cabecalho > strong{

    color:var(--mesa-dourado-claro);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.8px;

}


/*==================================================
    LINHA DE DESTAQUE
===================================================*/

.fim-partida-linha.destaque{

    background:

        linear-gradient(
            90deg,
            rgba(245,197,66,.10),
            rgba(245,197,66,.035)
        );

}


.fim-partida-linha.destaque > strong{

    color:var(--mesa-dourado-claro);

    font-size:18px;

}


/*==================================================
    AÇÕES
===================================================*/

.fim-partida-acoes{

    margin-top:24px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}


.fim-partida-acoes
.btn-modal-principal{

    background:

        linear-gradient(
            145deg,
            #77D993,
            #319758
        );

    border-color:#70D78E;

    color:#071A11;

    box-shadow:

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

        0 0 20px rgba(64,190,104,.18);

}


.fim-partida-acoes
.btn-modal-principal:hover{

    background:

        linear-gradient(
            145deg,
            #91E8A9,
            #40AE67
        );

}


/*==================================================
    RESULTADO — DERROTA
===================================================*/

.modal-fim-partida-mesa.resultado-derrota
.fim-partida-cabecalho > strong{

    color:#FF9C92;

}


/*==================================================
    RESULTADO — EMPATE
===================================================*/

.modal-fim-partida-mesa.resultado-empate
.fim-partida-cabecalho > strong{

    color:#9BC9FF;

}


/*==================================================
    ANIMAÇÃO DE ENTRADA
===================================================*/

.modal-mesa.ativo
.modal-fim-partida-mesa{

    animation:

        entradaModalFimPartida
        .42s
        cubic-bezier(.18,.82,.25,1)
        both;

}


@keyframes entradaModalFimPartida{

    0%{

        opacity:0;

        transform:
            translateY(35px)
            scale(.92);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

@media (max-width:650px){

    .modal-fim-partida-mesa{

        padding:18px 14px;

        border-radius:22px;

    }


    .fim-partida-cabecalho h2{

        font-size:25px;

    }


    .fim-partida-participantes{

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

        gap:8px;

    }


    .fim-partida-participante{

        padding:12px 7px;

        border-radius:16px;

    }


    .fim-partida-avatar{

        width:68px;

        height:68px;

    }


    .fim-partida-avatar i{

        font-size:27px;

    }


    .fim-partida-participante > strong{

        font-size:15px;

    }


    .fim-partida-versus{

        width:44px;

        height:44px;

        font-size:13px;

    }


    .fim-partida-linha{

        min-height:47px;

        padding:8px;

        grid-template-columns:
            minmax(105px,1.4fr)
            minmax(55px,.6fr)
            minmax(55px,.6fr);

        gap:5px;

    }


    .fim-partida-linha > span{

        font-size:9px;

    }


    .fim-partida-linha > strong{

        font-size:13px;

    }


    .fim-partida-acoes{

        grid-template-columns:1fr;

        gap:8px;

    }

}
/*==================================================
    MODAL — ESTATÍSTICAS DA PARTIDA
===================================================*/
/*==================================================
    MODAL
===================================================*/

.modal-estatisticas-mesa{

    width:min(900px,95vw);

    max-height:88vh;

    overflow-y:auto;

    padding:28px;

    border-radius:26px;

    background:

        linear-gradient(
            160deg,
            #1b4228,
            #102417
        );

}


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

.modal-mesa-cabecalho{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}


.modal-mesa-legenda{

    display:block;

    color:#d8d8d8;

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:2px;

}


.modal-mesa-cabecalho h2{

    margin-top:4px;

    color:#f5d76e;

    font-size:2rem;

}


/*==================================================
    CARDS SUPERIORES
===================================================*/

.estatisticas-resumo-geral{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:16px;

    margin-bottom:24px;

}


.estatistica-card{

    padding:18px;

    border-radius:18px;

    text-align:center;

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

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

}


.estatistica-card i{

    font-size:24px;

    color:#f5d76e;

    margin-bottom:10px;

}


.estatistica-card span{

    display:block;

    color:#d8d8d8;

    margin-bottom:8px;

}


.estatistica-card strong{

    font-size:28px;

    color:#fff;

}


/*==================================================
    BLOCOS
===================================================*/

.estatisticas-bloco{

    margin-top:22px;

    padding:22px;

    border-radius:20px;

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

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

}


.estatisticas-bloco-titulo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}


.estatisticas-bloco-titulo span{

    color:#cfcfcf;

    font-size:.82rem;

}


.estatisticas-bloco-titulo strong{

    display:block;

    color:#f5d76e;

    font-size:1.2rem;

}


.estatisticas-bloco-titulo i{

    font-size:26px;

    color:#f5d76e;

}


/*==================================================
    APROVEITAMENTO
===================================================*/

.estatisticas-aproveitamento{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:30px;

    align-items:center;

}


.estatisticas-circulo{

    width:180px;

    height:180px;

    border-radius:50%;

    border:6px solid #f5d76e;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    margin:auto;

}


.estatisticas-circulo strong{

    font-size:40px;

    color:#fff;

}


.estatisticas-circulo span{

    color:#ddd;

    margin-top:6px;

}


.estatisticas-detalhes{

    display:grid;

    gap:18px;

}


.estatisticas-detalhes div{

    display:flex;

    justify-content:space-between;

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

    padding-bottom:10px;

}


.estatisticas-detalhes span{

    color:#d8d8d8;

}


.estatisticas-detalhes strong{

    color:#fff;

}


/*==================================================
    PARTIDA ATUAL
===================================================*/

.estatisticas-partida-atual{

    display:grid;

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

    gap:16px;

}


.estatisticas-partida-atual div{

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

    border-radius:14px;

    padding:18px;

}


.estatisticas-partida-atual span{

    display:block;

    color:#d8d8d8;

    margin-bottom:8px;

}


.estatisticas-partida-atual strong{

    font-size:26px;

    color:#fff;

}


/*==================================================
    RODAPÉ
===================================================*/

.modal-mesa-rodape{

    margin-top:28px;

    display:flex;

    justify-content:center;

}


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

@media(max-width:768px){

    .estatisticas-resumo-geral{

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

    }

    .estatisticas-aproveitamento{

        grid-template-columns:1fr;

    }

    .estatisticas-circulo{

        width:150px;

        height:150px;

    }

    .estatisticas-partida-atual{

        grid-template-columns:1fr;

    }

}