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


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

.container-telas-externas{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    z-index:500;

    pointer-events:none;

}


.container-telas-externas.ativo{

    pointer-events:auto;

}


.tela-externa{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:scale(1.03);

    transition:

        opacity .45s ease,

        visibility .45s ease,

        transform .45s ease;

}


.tela-externa.ativa{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}


/*==================================================
    ESCOLHER PARTIDA
===================================================*/

.tela-escolher-partida{

    color:#ffffff;

    background:

        radial-gradient(
            circle at top,
            rgba(255, 214, 61, .22),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #153f28 0%,
            #0c281a 42%,
            #491b18 100%
        );

}


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

.escolher-partida-fundo{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.28;

    background-image:

        radial-gradient(
            circle at 15% 25%,
            rgba(255,255,255,.14) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(255,215,70,.16) 0 3px,
            transparent 4px
        );

    background-size:

        70px 70px,

        100px 100px;

}


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

.escolher-partida-cabecalho{

    position:relative;

    z-index:2;

    min-height:110px;

    display:grid;

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

    align-items:center;

    gap:20px;

    padding:20px 34px;

}


.btn-voltar-escolher{

    justify-self:start;

    min-width:112px;

    padding:12px 18px;

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

    border-radius:14px;

    color:#ffffff;

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

    font-weight:700;

    cursor:pointer;

    backdrop-filter:blur(8px);

    transition:

        transform .2s ease,

        background .2s ease,

        border-color .2s ease;

}


.btn-voltar-escolher:hover{

    transform:translateX(-3px);

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

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

}


.escolher-partida-titulo{

    text-align:center;

}


.titulo-detalhe{

    display:block;

    color:#f4c940;

    font-size:.76rem;

    font-weight:800;

    letter-spacing:.2em;

    text-transform:uppercase;

}


.escolher-partida-titulo h1{

    margin:3px 0;

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

    line-height:1;

}


.escolher-partida-titulo p{

    margin-top:10px;

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

}


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

.escolher-partida-conteudo{

    position:relative;

    z-index:2;

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

}


.painel-escolher-partida{

    width:min(760px, 100%);

    padding:28px;

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

    border-radius:28px;

    background:

        linear-gradient(
            160deg,
            rgba(62,35,19,.92),
            rgba(25,15,10,.96)
        );

    box-shadow:

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

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

    backdrop-filter:blur(12px);

}


/*==================================================
    DIFICULDADE
===================================================*/

.dificuldade-selecionada{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;

    padding:12px 16px;

    border-radius:14px;

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

}


.dificuldade-label{

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

    font-size:.83rem;

}


.dificuldade-selecionada strong{

    color:#f6d45a;

    text-transform:uppercase;

    letter-spacing:.08em;

}


/*==================================================
    OPÇÕES
===================================================*/

.opcao-partida{

    width:100%;

    min-height:112px;

    display:grid;

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

    align-items:center;

    gap:18px;

    margin-top:16px;

    padding:20px;

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

    border-radius:20px;

    color:#ffffff;

    text-align:left;

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

    cursor:pointer;

    transition:

        transform .25s ease,

        border-color .25s ease,

        background .25s ease,

        box-shadow .25s ease;

}


.opcao-partida:hover{

    transform:translateY(-4px);

    border-color:rgba(246,212,90,.72);

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

    box-shadow:0 15px 35px rgba(0,0,0,.3);

}


.opcao-partida-icone{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    color:#26170d;

    font-size:1.65rem;

    background:linear-gradient(
        145deg,
        #ffe47a,
        #d5a823
    );

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

}


.opcao-partida-textos{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.opcao-partida-textos strong{

    font-size:1.17rem;

}


.opcao-partida-textos small{

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

    font-size:.9rem;

    line-height:1.4;

}


.opcao-partida-seta{

    font-size:2.5rem;

    color:#f6d45a;

}


.opcao-partida.desabilitada{

    opacity:.48;

    cursor:not-allowed;

    filter:grayscale(.35);

}


.opcao-partida.desabilitada:hover{

    transform:none;

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

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

    box-shadow:none;

}


/*==================================================
    MENSAGEM
===================================================*/

.mensagem-continuar-partida{

    min-height:22px;

    margin-top:16px;

    color:#f4c940;

    text-align:center;

    font-size:.9rem;

}


/*==================================================
    RODAPÉ
===================================================*/

.escolher-partida-rodape{

    position:relative;

    z-index:2;

    min-height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px;

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

    font-size:.78rem;

}


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

@media (max-width:700px){

    .escolher-partida-cabecalho{

        min-height:96px;

        grid-template-columns:auto 1fr;

        padding:16px;

    }


    .cabecalho-espaco{

        display:none;

    }


    .btn-voltar-escolher{

        min-width:auto;

        padding:10px 13px;

    }


    .escolher-partida-titulo{

        padding-right:48px;

    }


    .escolher-partida-titulo p{

        display:none;

    }


    .painel-escolher-partida{

        padding:18px;

        border-radius:22px;

    }


    .opcao-partida{

        min-height:104px;

        grid-template-columns:58px 1fr 22px;

        gap:13px;

        padding:16px;

    }


    .opcao-partida-icone{

        width:54px;

        height:54px;

        border-radius:15px;

    }


    .opcao-partida-seta{

        font-size:2rem;

    }

}


@media (max-height:650px){

    .escolher-partida-cabecalho{

        min-height:82px;

        padding-top:12px;

        padding-bottom:8px;

    }


    .escolher-partida-conteudo{

        align-items:flex-start;

        overflow-y:auto;

    }


    .opcao-partida{

        min-height:90px;

    }


    .escolher-partida-rodape{

        display:none;

    }

}