/*==========================================================
    BISCA GAÚCHA
    STYLE.CSS
==========================================================*/


/*==========================================================
    VARIÁVEIS
==========================================================*/

:root{

    --verde-escuro:#07150d;

    --verde-profundo:#0b2414;

    --verde-principal:#0f4f25;

    --verde-claro:#1f7a3b;

    --vermelho-escuro:#5c0909;

    --vermelho-principal:#8c1414;

    --vermelho-claro:#b6261f;

    --amarelo-escuro:#a26b08;

    --amarelo-principal:#d49a1f;

    --amarelo-claro:#f6d267;

    --dourado:#d8a52b;

    --dourado-claro:#ffe28a;

    --marrom:#3a1f0e;

    --marrom-claro:#75431d;

    --branco:#ffffff;

    --cinza-claro:#e7e7e7;

    --cinza:#b9b9b9;

    --preto:#000000;

    --preto-suave:#101010;

    --sombra-leve:
    0 8px 20px rgba(0,0,0,.25);

    --sombra-media:
    0 12px 35px rgba(0,0,0,.45);

    --sombra-forte:
    0 18px 55px rgba(0,0,0,.70);

    --borda-dourada:
    1px solid rgba(228,177,55,.75);

    --transicao:
    .25s ease;

}


/*==========================================================
    APLICAÇÃO
==========================================================*/

.app{

    position:relative;

    width:100vw;

    height:100vh;

    min-height:100dvh;

    overflow:hidden;

    isolation:isolate;

}


/*==========================================================
    TELAS
==========================================================*/

.tela{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    min-height:100dvh;

    display:none;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


.tela.ativa{

    display:block;

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    z-index:5;

}


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

.fundo-tela{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

    z-index:0;

    pointer-events:none;

}


.fundo-abertura{

    background-image:
    url("../img/backgrounds/fundo-abertura.webp");

}


.fundo-menu{

    background-image:
    url("../img/backgrounds/fundo-abertura.webp");

}


.fundo-interno{

    background-image:
    linear-gradient(
        135deg,
        rgba(5,20,10,.25),
        rgba(35,8,8,.35)
    ),
    url("../img/backgrounds/fundo-abertura.webp");

}


/*==========================================================
    CAMADAS ESCURAS
==========================================================*/

.camada-escura{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.22) 0%,
        rgba(0,0,0,.20) 42%,
        rgba(0,0,0,.74) 100%
    );

    z-index:1;

    pointer-events:none;

}


.camada-menu{

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.30) 50%,
        rgba(0,0,0,.60) 100%
    ),
    linear-gradient(
        180deg,
        rgba(4,18,9,.45),
        rgba(0,0,0,.70)
    );

}


/*==========================================================
    TELA DE ABERTURA
==========================================================*/

.tela-abertura{

    background:var(--verde-escuro);

}


.abertura-conteudo{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    min-height:100dvh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:space-between;

    padding:
    clamp(20px,4vh,44px)
    clamp(18px,4vw,60px)
    clamp(18px,3vh,34px);

}


/*==========================================================
    LOGO
==========================================================*/

.logo-jogo{

    position:relative;

    width:min(92vw,760px);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-top:
    clamp(2px,1vh,15px);

    filter:
    drop-shadow(0 12px 12px rgba(0,0,0,.70));

}


.logo-cartas{

    position:relative;

    width:
    clamp(160px,23vw,250px);

    height:
    clamp(74px,11vw,112px);

    margin-bottom:
    clamp(-30px,-3vw,-20px);

    z-index:0;

}


.carta-logo{

    position:absolute;

    top:0;

    left:50%;

    width:
    clamp(54px,7.3vw,82px);

    height:
    clamp(78px,10.3vw,116px);

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    padding:7px;

    border:
    clamp(2px,.25vw,4px)
    solid
    #6d4712;

    border-radius:
    clamp(6px,.7vw,10px);

    background:
    linear-gradient(
        145deg,
        #fff7d6,
        #e4c988
    );

    color:#7a170d;

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

    font-size:
    clamp(1.35rem,2.2vw,2rem);

    font-weight:700;

    box-shadow:
    0 8px 15px rgba(0,0,0,.50),
    inset 0 0 12px rgba(126,79,17,.24);

    transform-origin:center bottom;

}


.carta-logo-1{

    transform:
    translateX(-115%)
    rotate(-18deg);

}


.carta-logo-2{

    transform:
    translateX(-50%)
    translateY(-10px);

    z-index:2;

}


.carta-logo-3{

    transform:
    translateX(15%)
    rotate(18deg);

}


.logo-textos{

    position:relative;

    z-index:3;

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}


.logo-titulo{

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

    font-size:
    clamp(4rem,13vw,10rem);

    line-height:.88;

    letter-spacing:
    clamp(2px,.6vw,8px);

    color:#f7e5a9;

    text-transform:uppercase;

    -webkit-text-stroke:
    clamp(1px,.23vw,3px)
    #5b2607;

    text-shadow:
    0 3px 0 #a76612,
    0 6px 0 #6c3509,
    0 10px 12px rgba(0,0,0,.90),
    0 0 18px rgba(255,205,83,.35);

}


.logo-faixa{

    position:relative;

    width:
    min(74vw,540px);

    min-height:
    clamp(48px,7vw,74px);

    margin-top:
    clamp(-9px,-1vw,-4px);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
    6px
    clamp(32px,6vw,70px);

    background:
    linear-gradient(
        180deg,
        #ba2b23,
        #6f0808 65%,
        #470505
    );

    border:
    clamp(2px,.25vw,4px)
    solid
    #c99123;

    clip-path:
    polygon(
        0 18%,
        8% 18%,
        12% 0,
        88% 0,
        92% 18%,
        100% 18%,
        93% 50%,
        100% 82%,
        91% 82%,
        87% 100%,
        13% 100%,
        9% 82%,
        0 82%,
        7% 50%
    );

    box-shadow:
    0 10px 18px rgba(0,0,0,.55),
    inset 0 2px 2px rgba(255,255,255,.20);

}


.logo-faixa span{

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

    font-size:
    clamp(2rem,5vw,4.2rem);

    line-height:1;

    letter-spacing:
    clamp(4px,.8vw,10px);

    color:#f7dc83;

    text-shadow:
    0 2px 0 #4d1207,
    0 4px 8px rgba(0,0,0,.75);

}


.logo-subtitulo{

    margin-top:
    clamp(9px,1.4vh,16px);

    padding:
    5px
    14px;

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

    font-size:
    clamp(.95rem,2vw,1.6rem);

    letter-spacing:
    clamp(1px,.22vw,3px);

    color:#fff4ca;

    text-transform:uppercase;

    text-shadow:
    0 2px 5px rgba(0,0,0,.95);

}


/*==========================================================
    AÇÕES DA ABERTURA
==========================================================*/

.abertura-acoes{

    width:min(92vw,600px);

    min-height:120px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-top:auto;

}


.btn-iniciar{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:
    clamp(10px,2vw,22px);

    padding:
    clamp(12px,2vh,18px)
    clamp(18px,4vw,32px);

    border-radius:14px;

    color:#fff1b5;

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

    font-size:
    clamp(1.45rem,4vw,2.5rem);

    letter-spacing:
    clamp(1px,.3vw,4px);

    text-transform:uppercase;

    text-shadow:
    0 3px 6px rgba(0,0,0,.90);

    transition:
    transform var(--transicao),
    filter var(--transicao),
    opacity var(--transicao);

}


.btn-iniciar:hover{

    transform:scale(1.04);

    filter:
    brightness(1.15)
    drop-shadow(0 0 10px rgba(255,213,89,.55));

}


.btn-iniciar:active{

    transform:scale(.97);

}


.btn-iniciar.oculto{

    display:none;

}


.ornamento{

    color:#e2b42f;

    font-size:
    clamp(1.2rem,3vw,2rem);

}


.ornamento-invertido{

    transform:scaleX(-1);

}


/*==========================================================
    CARREGAMENTO
==========================================================*/

.area-carregamento{

    width:100%;

    display:none;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:9px;

}


.area-carregamento.ativo{

    display:flex;

}


.texto-carregando{

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

    font-size:
    clamp(1.35rem,3vw,2rem);

    letter-spacing:
    clamp(2px,.5vw,5px);

    color:#fff0ae;

    text-transform:uppercase;

    text-shadow:
    0 3px 5px rgba(0,0,0,.95);

}


.barra-carregamento{

    width:100%;

}


.barra-trilho{

    position:relative;

    width:100%;

    height:
    clamp(22px,3.2vh,34px);

    overflow:hidden;

    padding:
    clamp(3px,.45vw,5px);

    border:
    clamp(2px,.25vw,4px)
    solid
    #d4a52a;

    border-radius:999px;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.90),
        rgba(38,20,6,.94)
    );

    box-shadow:
    0 7px 18px rgba(0,0,0,.70),
    inset 0 2px 5px rgba(0,0,0,.95),
    0 0 10px rgba(220,168,39,.22);

}


.barra-progresso{

    position:relative;

    width:0%;

    height:100%;

    overflow:hidden;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #ba6811 0%,
        #e9ad27 35%,
        #ffdf68 60%,
        #cf8013 100%
    );

    box-shadow:
    inset 0 2px 2px rgba(255,255,255,.38),
    inset 0 -2px 3px rgba(91,44,0,.55),
    0 0 12px rgba(255,191,49,.72);

    transition:
    width .08s linear;

}


.barra-brilho{

    position:absolute;

    inset:4px;

    overflow:hidden;

    border-radius:999px;

    pointer-events:none;

}


.barra-brilho::after{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:32%;

    height:100%;

    transform:skewX(-22deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

}


.porcentagem-carregamento{

    min-width:52px;

    padding:2px 9px;

    border-radius:999px;

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

    color:#ffe08b;

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

    font-size:
    clamp(1rem,2vw,1.35rem);

    letter-spacing:2px;

    text-shadow:
    0 2px 3px rgba(0,0,0,.95);

}


/*==========================================================
    RODAPÉ DA ABERTURA
==========================================================*/

.rodape-abertura{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-top:
    clamp(8px,2vh,22px);

    color:#eadfbf;

    text-align:center;

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

}


.rodape-abertura span{

    font-size:
    clamp(.68rem,1.4vw,.86rem);

    font-weight:500;

}


.rodape-abertura strong{

    margin-top:1px;

    color:#f6ce62;

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

    font-size:
    clamp(1rem,2vw,1.35rem);

    letter-spacing:2px;

}


/*==========================================================
    MENU PRINCIPAL
==========================================================*/

.tela-menu{

    background:var(--verde-escuro);

}


.menu-conteudo{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    min-height:100dvh;

    display:flex;

    flex-direction:column;

    padding:
    clamp(14px,2.5vh,28px)
    clamp(14px,3vw,42px)
    clamp(10px,2vh,20px);

}


.menu-cabecalho{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


.menu-logo{

    display:flex;

    align-items:center;

    gap:
    clamp(8px,1.4vw,15px);

    filter:
    drop-shadow(0 4px 5px rgba(0,0,0,.75));

}


.menu-logo h2{

    font-family:
    "Anton",
    sans-serif;

    font-size:
    clamp(2rem,5vw,4.2rem);

    line-height:1;

    color:#f6e6ac;

    letter-spacing:2px;

    -webkit-text-stroke:1px #60300b;

    text-shadow:
    0 3px 0 #884c0d,
    0 6px 8px rgba(0,0,0,.75);

}


.menu-logo span{

    padding:
    5px
    clamp(10px,1.7vw,18px);

    border:
    2px solid #c89b2c;

    border-radius:5px;

    background:
    linear-gradient(
        180deg,
        #a91f1a,
        #670808
    );

    color:#f3d476;

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

    font-size:
    clamp(1rem,2.7vw,2rem);

    letter-spacing:3px;

}


.btn-perfil{

    display:flex;

    align-items:center;

    gap:10px;

    padding:
    7px
    12px;

    border:var(--borda-dourada);

    border-radius:14px;

    background:
    linear-gradient(
        145deg,
        rgba(10,53,26,.92),
        rgba(5,27,14,.95)
    );

    box-shadow:
    var(--sombra-leve),
    inset 0 1px 0 rgba(255,255,255,.10);

    transition:
    transform var(--transicao),
    background var(--transicao);

}


.btn-perfil:hover{

    transform:translateY(-2px);

    background:
    linear-gradient(
        145deg,
        rgba(20,83,42,.96),
        rgba(8,39,19,.98)
    );

}


.perfil-avatar{

    width:
    clamp(38px,5vw,52px);

    height:
    clamp(38px,5vw,52px);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border:
    2px solid
    #e3b83e;

    border-radius:50%;

    background:
    linear-gradient(
        145deg,
        #b81f1c,
        #68100d
    );

    color:#ffe38a;

    font-size:
    clamp(1rem,2vw,1.35rem);

}


.perfil-informacoes{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    min-width:90px;

}


.perfil-informacoes strong{

    color:#fff0b3;

    font-size:
    clamp(.78rem,1.6vw,1rem);

}


.perfil-informacoes small{

    color:#d9cda8;

    font-size:
    clamp(.62rem,1.3vw,.78rem);

}


/*==========================================================
    BOTÕES DO MENU
==========================================================*/

.menu-principal{

    width:min(92vw,660px);

    display:flex;

    flex-direction:column;

    gap:
    clamp(8px,1.4vh,14px);

    margin:auto;

}


.botao-menu{

    position:relative;

    width:100%;

    min-height:
    clamp(68px,10vh,92px);

    display:grid;

    grid-template-columns:
    clamp(50px,8vw,76px)
    1fr
    auto;

    align-items:center;

    gap:
    clamp(8px,1.5vw,16px);

    overflow:hidden;

    padding:
    clamp(10px,1.7vh,16px)
    clamp(14px,2.6vw,24px);

    border:
    clamp(2px,.2vw,3px)
    solid
    #c89723;

    border-radius:
    clamp(10px,1.4vw,16px);

    background:
    linear-gradient(
        180deg,
        rgba(19,91,43,.98),
        rgba(7,55,24,.98)
    );

    box-shadow:
    0 9px 18px rgba(0,0,0,.55),
    inset 0 2px 1px rgba(255,255,255,.14),
    inset 0 -3px 0 rgba(0,0,0,.28);

    text-align:left;

    transition:
    transform var(--transicao),
    filter var(--transicao),
    box-shadow var(--transicao);

}


.botao-menu::before{

    content:"";

    position:absolute;

    top:-80%;

    left:-25%;

    width:18%;

    height:260%;

    transform:rotate(22deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transition:left .55s ease;

}


.botao-menu:hover{

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

    filter:brightness(1.10);

    box-shadow:
    0 13px 24px rgba(0,0,0,.65),
    0 0 18px rgba(222,172,43,.22),
    inset 0 2px 1px rgba(255,255,255,.15);

}


.botao-menu:hover::before{

    left:120%;

}


.botao-menu:active{

    transform:
    translateY(1px)
    scale(.985);

}


.botao-menu-jogar{

    background:
    linear-gradient(
        180deg,
        rgba(29,119,51,.98),
        rgba(9,65,27,.98)
    );

}


.botao-menu-icone{

    width:
    clamp(48px,7vw,66px);

    height:
    clamp(48px,7vw,66px);

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    2px solid
    rgba(244,201,78,.75);

    border-radius:50%;

    background:
    radial-gradient(
        circle at 35% 30%,
        #e4b443,
        #7d450c 70%
    );

    color:#fff0aa;

    font-size:
    clamp(1.25rem,3vw,2rem);

    box-shadow:
    inset 0 2px 3px rgba(255,255,255,.22),
    0 5px 10px rgba(0,0,0,.40);

}


.botao-menu-texto{

    display:flex;

    flex-direction:column;

    min-width:0;

}


.botao-menu-texto strong{

    overflow:hidden;

    color:#fff3bd;

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

    font-size:
    clamp(1.45rem,3.6vw,2.4rem);

    letter-spacing:
    clamp(1px,.3vw,3px);

    line-height:1.05;

    text-overflow:ellipsis;

    white-space:nowrap;

    text-shadow:
    0 2px 3px rgba(0,0,0,.82);

}


.botao-menu-texto small{

    margin-top:3px;

    overflow:hidden;

    color:#d9d5c0;

    font-size:
    clamp(.66rem,1.4vw,.88rem);

    text-overflow:ellipsis;

    white-space:nowrap;

}


.botao-menu-seta{

    color:#f4c84b;

    font-size:
    clamp(1rem,2vw,1.4rem);

}


/*==========================================================
    MENU INFERIOR
==========================================================*/

.menu-inferior{

    width:min(94vw,690px);

    display:grid;

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

    gap:
    clamp(6px,1.3vw,12px);

    margin:
    0 auto
    clamp(6px,1vh,12px);

}


.botao-inferior{

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    padding:
    clamp(8px,1.2vh,12px)
    5px;

    border:
    1px solid
    rgba(211,165,48,.65);

    border-radius:
    clamp(9px,1.2vw,13px);

    background:
    linear-gradient(
        180deg,
        rgba(12,54,26,.90),
        rgba(3,24,11,.94)
    );

    color:#efd170;

    box-shadow:
    0 6px 13px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);

    transition:
    transform var(--transicao),
    background var(--transicao),
    color var(--transicao);

}


.botao-inferior:hover{

    transform:translateY(-3px);

    background:
    linear-gradient(
        180deg,
        rgba(25,92,44,.96),
        rgba(7,43,18,.98)
    );

    color:#ffe796;

}


.botao-inferior:active{

    transform:translateY(1px);

}


.botao-inferior i{

    font-size:
    clamp(1rem,2.8vw,1.65rem);

}


.botao-inferior span{

    overflow:hidden;

    font-size:
    clamp(.56rem,1.3vw,.76rem);

    font-weight:700;

    text-overflow:ellipsis;

    text-transform:uppercase;

    white-space:nowrap;

}


.rodape-menu{

    color:#dfd4ae;

    font-size:
    clamp(.58rem,1.2vw,.74rem);

    text-align:center;

    text-shadow:
    0 2px 3px rgba(0,0,0,.92);

}


/*==========================================================
    TELAS INTERNAS
==========================================================*/

.tela-interna{

    background:var(--verde-escuro);

}


.interna-conteudo{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    min-height:100dvh;

    display:flex;

    flex-direction:column;

    overflow:auto;

    padding:
    clamp(12px,2vh,22px)
    clamp(12px,3vw,34px)
    clamp(18px,3vh,32px);

}


.cabecalho-interno{

    position:sticky;

    top:0;

    width:100%;

    min-height:
    clamp(58px,8vh,78px);

    display:grid;

    grid-template-columns:
    clamp(45px,6vw,58px)
    1fr
    clamp(45px,6vw,58px);

    align-items:center;

    gap:10px;

    z-index:8;

    padding:
    5px
    0;

}


.cabecalho-interno h2{

    justify-self:center;

    width:min(76vw,650px);

    padding:
    clamp(8px,1.2vh,12px)
    clamp(20px,3vw,34px);

    border:
    2px solid
    #bc8620;

    border-radius:
    5px 5px 14px 14px;

    background:
    linear-gradient(
        180deg,
        #b1221d,
        #6a0808 70%,
        #4b0505
    );

    color:#f9dfa0;

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

    font-size:
    clamp(1.6rem,4vw,2.8rem);

    line-height:1;

    letter-spacing:
    clamp(2px,.4vw,5px);

    text-align:center;

    text-transform:uppercase;

    text-shadow:
    0 2px 0 #4e1a07,
    0 4px 6px rgba(0,0,0,.85);

    box-shadow:
    0 8px 15px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.17);

}


.btn-voltar{

    width:
    clamp(42px,5.7vw,56px);

    height:
    clamp(42px,5.7vw,56px);

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    2px solid
    #c99a2c;

    border-radius:50%;

    background:
    linear-gradient(
        145deg,
        #af261c,
        #5e0807
    );

    color:#ffe495;

    font-size:
    clamp(1rem,2.3vw,1.4rem);

    box-shadow:
    0 6px 12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18);

    transition:
    transform var(--transicao),
    filter var(--transicao);

}


.btn-voltar:hover{

    transform:
    translateX(-3px)
    scale(1.04);

    filter:brightness(1.14);

}


.btn-voltar:active{

    transform:scale(.94);

}


.cabecalho-espaco{

    width:
    clamp(42px,5.7vw,56px);

}


.conteudo-central{

    width:min(100%,980px);

    display:flex;

    flex-direction:column;

    align-items:center;

    margin:auto;

    padding:
    clamp(15px,3vh,32px)
    0;

}


.subtitulo-tela{

    margin-bottom:
    clamp(14px,2.6vh,28px);

    color:#f7d675;

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

    font-size:
    clamp(1.25rem,3vw,2rem);

    letter-spacing:
    clamp(1px,.25vw,3px);

    text-align:center;

    text-shadow:
    0 3px 5px rgba(0,0,0,.90);

}


/*==========================================================
    DIFICULDADES
==========================================================*/

.dificuldades{

    width:100%;

    display:grid;

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

    gap:
    clamp(10px,2vw,20px);

}


.card-dificuldade{

    min-height:
    clamp(170px,31vh,290px);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:
    clamp(7px,1.4vh,13px);

    padding:
    clamp(15px,2.5vw,28px);

    border:
    2px solid
    #c99928;

    border-radius:
    clamp(12px,1.6vw,18px);

    background:
    linear-gradient(
        155deg,
        rgba(17,88,42,.95),
        rgba(6,40,18,.97)
    );

    color:#f8e5a6;

    text-align:center;

    box-shadow:
    var(--sombra-media),
    inset 0 1px 0 rgba(255,255,255,.13);

    transition:
    transform var(--transicao),
    filter var(--transicao),
    box-shadow var(--transicao);

}


.card-dificuldade:nth-child(2){

    background:
    linear-gradient(
        155deg,
        rgba(135,91,14,.96),
        rgba(67,37,5,.98)
    );

}


.card-dificuldade:nth-child(3){

    background:
    linear-gradient(
        155deg,
        rgba(140,20,19,.96),
        rgba(62,5,5,.98)
    );

}


.card-dificuldade:hover,
.card-dificuldade.selecionada{

    transform:
    translateY(-7px)
    scale(1.025);

    filter:brightness(1.12);

    box-shadow:
    0 18px 34px rgba(0,0,0,.62),
    0 0 20px rgba(228,178,53,.25);

}


.card-dificuldade i{

    font-size:
    clamp(2.2rem,6vw,4.5rem);

    color:#f3c957;

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

}


.card-dificuldade strong{

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

    font-size:
    clamp(1.5rem,3.8vw,2.7rem);

    letter-spacing:2px;

    text-transform:uppercase;

}


.card-dificuldade span{

    color:#e3ddc6;

    font-size:
    clamp(.72rem,1.6vw,.95rem);

}


.btn-destaque{

    min-width:
    min(88vw,330px);

    margin-top:
    clamp(20px,4vh,38px);

    padding:
    clamp(13px,2vh,18px)
    clamp(24px,5vw,50px);

    border:
    clamp(2px,.25vw,4px)
    solid
    #8c4e0b;

    border-radius:
    clamp(9px,1.3vw,15px);

    background:
    linear-gradient(
        180deg,
        #f0bd3f,
        #c47c12 68%,
        #8a4708
    );

    color:#2a1606;

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

    font-size:
    clamp(1.25rem,3.5vw,2.1rem);

    font-weight:700;

    letter-spacing:
    clamp(1px,.3vw,3px);

    text-transform:uppercase;

    box-shadow:
    0 10px 20px rgba(0,0,0,.55),
    inset 0 2px 1px rgba(255,255,255,.36),
    inset 0 -3px 0 rgba(80,37,3,.38);

    transition:
    transform var(--transicao),
    filter var(--transicao);

}


.btn-destaque:hover{

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

    filter:brightness(1.12);

}


.btn-destaque:active{

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

}


/*==========================================================
    DESAFIOS
==========================================================*/

.lista-desafios{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:
    clamp(9px,1.6vh,15px);

}


.desafio-item{

    width:100%;

    display:grid;

    grid-template-columns:
    clamp(44px,6vw,62px)
    1fr
    auto;

    align-items:center;

    gap:
    clamp(8px,1.6vw,15px);

    padding:
    clamp(11px,1.8vh,17px)
    clamp(12px,2vw,20px);

    border:var(--borda-dourada);

    border-radius:
    clamp(10px,1.4vw,15px);

    background:
    linear-gradient(
        145deg,
        rgba(12,69,31,.96),
        rgba(4,32,13,.98)
    );

    box-shadow:
    var(--sombra-leve),
    inset 0 1px 0 rgba(255,255,255,.08);

}


.desafio-icone{

    width:
    clamp(42px,5.7vw,58px);

    height:
    clamp(42px,5.7vw,58px);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:
    linear-gradient(
        145deg,
        #d39b24,
        #784307
    );

    color:#fff0a8;

    font-size:
    clamp(1.2rem,2.8vw,1.8rem);

}


.desafio-informacoes{

    min-width:0;

}


.desafio-informacoes strong{

    display:block;

    overflow:hidden;

    color:#f8e8b1;

    font-size:
    clamp(.78rem,1.7vw,1rem);

    text-overflow:ellipsis;

    text-transform:uppercase;

    white-space:nowrap;

}


.progresso-desafio{

    width:100%;

    height:
    clamp(8px,1.2vh,12px);

    overflow:hidden;

    margin:
    7px
    0
    4px;

    border-radius:999px;

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

    box-shadow:
    inset 0 2px 4px rgba(0,0,0,.80);

}


.progresso-desafio span{

    display:block;

    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #bc7111,
        #f1c74b
    );

}


.desafio-informacoes small{

    color:#cfcab8;

    font-size:
    clamp(.62rem,1.3vw,.78rem);

}


.desafio-premio{

    color:#f6d067;

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

    font-size:
    clamp(.9rem,2vw,1.25rem);

    letter-spacing:1px;

    text-align:right;

    white-space:nowrap;

}


/*==========================================================
    AMIGOS / ONLINE
==========================================================*/

.opcoes-amigos,
.opcoes-online{

    width:min(100%,750px);

    display:flex;

    flex-direction:column;

    gap:
    clamp(10px,1.8vh,16px);

}


.opcao-amigos,
.opcao-online{

    width:100%;

    display:grid;

    grid-template-columns:
    clamp(50px,8vw,76px)
    1fr;

    align-items:center;

    gap:
    clamp(10px,2vw,18px);

    padding:
    clamp(14px,2.2vh,21px)
    clamp(15px,2.7vw,25px);

    border:
    2px solid
    #c89625;

    border-radius:
    clamp(11px,1.5vw,17px);

    background:
    linear-gradient(
        145deg,
        rgba(13,81,35,.96),
        rgba(4,38,15,.98)
    );

    text-align:left;

    box-shadow:
    var(--sombra-media),
    inset 0 1px 0 rgba(255,255,255,.11);

    transition:
    transform var(--transicao),
    filter var(--transicao);

}


.opcao-amigos:hover,
.opcao-online:hover{

    transform:
    translateX(7px)
    scale(1.01);

    filter:brightness(1.12);

}


.opcao-amigos:active,
.opcao-online:active{

    transform:
    translateX(2px)
    scale(.99);

}


.opcao-amigos > i,
.opcao-online > i{

    justify-self:center;

    color:#efc551;

    font-size:
    clamp(2rem,5vw,3.3rem);

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

}


.opcao-amigos div,
.opcao-online div{

    display:flex;

    flex-direction:column;

}


.opcao-amigos strong,
.opcao-online strong{

    color:#fff0b0;

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

    font-size:
    clamp(1.35rem,3vw,2rem);

    letter-spacing:
    clamp(1px,.25vw,3px);

    text-transform:uppercase;

}


.opcao-amigos span,
.opcao-online span{

    margin-top:3px;

    color:#d4d0bf;

    font-size:
    clamp(.7rem,1.5vw,.9rem);

}


/*==========================================================
    RANKING
==========================================================*/

.lista-ranking{

    width:min(100%,720px);

    display:flex;

    flex-direction:column;

    gap:
    clamp(8px,1.4vh,13px);

}


.ranking-item{

    width:100%;

    display:grid;

    grid-template-columns:
    clamp(38px,5vw,48px)
    clamp(40px,5.5vw,54px)
    1fr
    auto;

    align-items:center;

    gap:
    clamp(8px,1.6vw,15px);

    padding:
    clamp(10px,1.7vh,16px)
    clamp(12px,2vw,20px);

    border:var(--borda-dourada);

    border-radius:
    clamp(10px,1.3vw,14px);

    background:
    linear-gradient(
        145deg,
        rgba(12,65,29,.96),
        rgba(4,29,12,.98)
    );

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

}


.ranking-posicao{

    color:#f3c64e;

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

    font-size:
    clamp(1.4rem,3.2vw,2.1rem);

    text-align:center;

}


.ranking-avatar{

    width:
    clamp(38px,5vw,50px);

    height:
    clamp(38px,5vw,50px);

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    2px solid
    #c9992a;

    border-radius:50%;

    background:#74100d;

    color:#f7d26b;

}


.ranking-item strong{

    overflow:hidden;

    color:#f5e6b6;

    font-size:
    clamp(.8rem,1.7vw,1rem);

    text-overflow:ellipsis;

    white-space:nowrap;

}


.ranking-item > span:last-child{

    color:#e3c666;

    font-size:
    clamp(.68rem,1.4vw,.88rem);

    font-weight:700;

    white-space:nowrap;

}


/*==========================================================
    PERFIL
==========================================================*/

.perfil-card{

    width:min(92vw,580px);

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:
    clamp(22px,4vh,38px)
    clamp(18px,4vw,35px);

    border:
    2px solid
    #c89929;

    border-radius:
    clamp(16px,2vw,24px);

    background:
    linear-gradient(
        145deg,
        rgba(13,75,33,.96),
        rgba(4,34,14,.98)
    );

    box-shadow:
    var(--sombra-forte),
    inset 0 1px 0 rgba(255,255,255,.12);

}


.perfil-card-avatar{

    width:
    clamp(90px,14vw,130px);

    height:
    clamp(90px,14vw,130px);

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    clamp(3px,.35vw,5px)
    solid
    #d8aa35;

    border-radius:50%;

    background:
    radial-gradient(
        circle at 35% 28%,
        #b83225,
        #600806 72%
    );

    color:#ffe289;

    font-size:
    clamp(2.5rem,6vw,4.3rem);

    box-shadow:
    0 10px 22px rgba(0,0,0,.48),
    inset 0 2px 3px rgba(255,255,255,.18);

}


.perfil-card h3{

    margin-top:15px;

    color:#f8dda0;

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

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

    letter-spacing:3px;

}


.perfil-card > span{

    color:#ddd3b5;

    font-size:
    clamp(.78rem,1.7vw,1rem);

}


.perfil-estatisticas{

    width:100%;

    display:grid;

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

    gap:
    clamp(8px,1.5vw,14px);

    margin-top:
    clamp(22px,4vh,34px);

}


.perfil-estatisticas div{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:
    clamp(12px,2vh,18px)
    8px;

    border:
    1px solid
    rgba(212,164,43,.55);

    border-radius:12px;

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

}


.perfil-estatisticas strong{

    color:#f2c954;

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

    font-size:
    clamp(1.5rem,3.5vw,2.3rem);

}


.perfil-estatisticas span{

    color:#d7d0bd;

    font-size:
    clamp(.62rem,1.3vw,.78rem);

}


/*==========================================================
    SOBRE
==========================================================*/

.sobre-card{

    width:min(92vw,690px);

    padding:
    clamp(22px,4vw,40px);

    border:
    2px solid
    #c99b2d;

    border-radius:
    clamp(14px,2vw,22px);

    background:
    linear-gradient(
        145deg,
        rgba(13,73,33,.96),
        rgba(4,32,13,.98)
    );

    color:#e8e0c9;

    text-align:center;

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

}


.sobre-card h3{

    color:#f7d56f;

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

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

    letter-spacing:4px;

}


.sobre-card p{

    margin-top:
    clamp(12px,2vh,18px);

    font-size:
    clamp(.78rem,1.6vw,1rem);

    line-height:1.8;

}


.sobre-card strong{

    display:block;

    margin-top:
    clamp(20px,3vh,28px);

    color:#edc85b;

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

    font-size:
    clamp(1.1rem,2.6vw,1.7rem);

    letter-spacing:2px;

}


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

.configuracoes-lista{

    width:min(92vw,650px);

    display:flex;

    flex-direction:column;

    gap:
    clamp(9px,1.5vh,14px);

}


.configuracao-item{

    width:100%;

    min-height:
    clamp(60px,8vh,76px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:
    clamp(12px,2vh,17px)
    clamp(15px,2.5vw,24px);

    border:var(--borda-dourada);

    border-radius:
    clamp(10px,1.4vw,15px);

    background:
    linear-gradient(
        145deg,
        rgba(13,74,32,.96),
        rgba(4,34,14,.98)
    );

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

}


.configuracao-item > span{

    display:flex;

    align-items:center;

    gap:12px;

    color:#f4e4b0;

    font-weight:700;

    font-size:
    clamp(.78rem,1.7vw,1rem);

}


.configuracao-item i{

    width:24px;

    color:#efc956;

    font-size:
    clamp(1.1rem,2.4vw,1.5rem);

    text-align:center;

}


.configuracao-item input[type="checkbox"]{

    position:relative;

    width:52px;

    height:28px;

    flex-shrink:0;

    appearance:none;

    border:
    2px solid
    #a6781d;

    border-radius:999px;

    background:#34110e;

    cursor:pointer;

    transition:
    background var(--transicao);

}


.configuracao-item input[type="checkbox"]::before{

    content:"";

    position:absolute;

    top:3px;

    left:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#d7cdb0;

    box-shadow:
    0 2px 5px rgba(0,0,0,.45);

    transition:
    transform var(--transicao),
    background var(--transicao);

}


.configuracao-item input[type="checkbox"]:checked{

    background:#19723a;

}


.configuracao-item input[type="checkbox"]:checked::before{

    transform:translateX(24px);

    background:#ffe18a;

}


.configuracao-volume{

    align-items:flex-start;

    flex-direction:column;

}


.configuracao-volume input[type="range"]{

    width:100%;

    accent-color:#d5a330;

    cursor:pointer;

}


/*==========================================================
    AVISOS
==========================================================*/

.aviso-jogo{

    position:fixed;

    left:50%;

    bottom:
    clamp(18px,4vh,42px);

    z-index:100;

    min-width:
    min(86vw,280px);

    max-width:
    min(90vw,520px);

    padding:
    12px
    20px;

    border:
    1px solid
    rgba(231,186,69,.76);

    border-radius:12px;

    background:
    linear-gradient(
        145deg,
        rgba(12,67,29,.98),
        rgba(3,30,12,.99)
    );

    color:#fff0b6;

    font-size:
    clamp(.72rem,1.5vw,.9rem);

    font-weight:700;

    text-align:center;

    box-shadow:
    0 12px 28px rgba(0,0,0,.65);

    opacity:0;

    visibility:hidden;

    transform:
    translateX(-50%)
    translateY(25px);

    transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease;

    pointer-events:none;

}


.aviso-jogo.ativo{

    opacity:1;

    visibility:visible;

    transform:
    translateX(-50%)
    translateY(0);

}


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

.modal{

    position:fixed;

    inset:0;

    z-index:90;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
    opacity .3s ease,
    visibility .3s ease;

}


.modal.ativo{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


.modal-fundo{

    position:absolute;

    inset:0;

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

    backdrop-filter:
    blur(5px);

}


.modal-conteudo{

    position:relative;

    z-index:2;

    width:min(92vw,480px);

    padding:
    clamp(22px,4vw,36px);

    border:
    2px solid
    #d2a12e;

    border-radius:
    clamp(14px,2vw,20px);

    background:
    linear-gradient(
        150deg,
        #103b20,
        #071d0e 72%
    );

    box-shadow:
    var(--sombra-forte),
    inset 0 1px 0 rgba(255,255,255,.13);

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

    transition:
    transform .3s ease;

}


.modal.ativo .modal-conteudo{

    transform:
    translateY(0)
    scale(1);

}


.modal-fechar{

    position:absolute;

    top:10px;

    right:10px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    1px solid
    #ba8d27;

    border-radius:50%;

    background:#78100d;

    color:#f7db82;

}


.modal-conteudo h2{

    padding-right:38px;

    color:#f5d476;

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

    font-size:
    clamp(1.7rem,4vw,2.6rem);

    letter-spacing:2px;

}


.modal-conteudo p{

    margin-top:8px;

    color:#d6cfb8;

    font-size:
    clamp(.75rem,1.5vw,.9rem);

}


.modal-conteudo label{

    display:block;

    margin-top:22px;

    margin-bottom:7px;

    color:#f2e3b2;

    font-size:.82rem;

    font-weight:700;

}


.modal-conteudo input{

    width:100%;

    height:
    clamp(48px,6.5vh,58px);

    padding:
    0
    15px;

    border:
    2px solid
    #a97a1d;

    border-radius:10px;

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

    color:#ffffff;

    font-size:
    clamp(.9rem,2vw,1.1rem);

    text-transform:uppercase;

    transition:
    border-color var(--transicao),
    box-shadow var(--transicao);

}


.modal-conteudo input:focus{

    border-color:#e7bc4c;

    box-shadow:
    0 0 0 3px rgba(215,169,46,.16);

}


.modal-conteudo .btn-destaque{

    width:100%;

    margin-top:22px;

}


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

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

    outline:
    3px solid
    rgba(255,216,91,.85);

    outline-offset:3px;

}


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

@media(max-width:900px){

    .logo-jogo{

        width:min(94vw,650px);

    }


    .menu-principal{

        width:min(94vw,600px);

    }


    .dificuldades{

        gap:10px;

    }


    .card-dificuldade{

        min-height:210px;

    }

}


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

@media(max-width:680px){

    .abertura-conteudo{

        justify-content:space-between;

        padding:
        16px
        12px
        12px;

    }


    .logo-jogo{

        margin-top:2vh;

    }


    .logo-cartas{

        width:140px;

        height:74px;

        margin-bottom:-24px;

    }


    .carta-logo{

        width:48px;

        height:70px;

        font-size:1.15rem;

    }


    .logo-titulo{

        font-size:
        clamp(3.4rem,19vw,6rem);

    }


    .logo-faixa{

        width:min(90vw,430px);

    }


    .logo-subtitulo{

        max-width:90vw;

    }


    .abertura-acoes{

        width:94vw;

    }


    .menu-conteudo{

        padding:
        11px
        10px
        9px;

    }


    .menu-cabecalho{

        gap:8px;

    }


    .menu-logo{

        gap:6px;

    }


    .menu-logo h2{

        font-size:
        clamp(1.55rem,8vw,2.4rem);

    }


    .menu-logo span{

        padding:
        3px
        7px;

        font-size:
        clamp(.7rem,3.5vw,1rem);

        letter-spacing:1px;

    }


    .btn-perfil{

        padding:
        5px
        8px;

    }


    .perfil-avatar{

        width:36px;

        height:36px;

    }


    .perfil-informacoes{

        min-width:0;

    }


    .perfil-informacoes strong{

        max-width:80px;

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;

    }


    .menu-principal{

        width:100%;

        gap:7px;

    }


    .botao-menu{

        min-height:64px;

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

        gap:8px;

        padding:
        8px
        10px;

    }


    .botao-menu-icone{

        width:42px;

        height:42px;

        font-size:1.1rem;

    }


    .botao-menu-texto strong{

        font-size:
        clamp(1.18rem,5.8vw,1.6rem);

    }


    .botao-menu-texto small{

        font-size:
        clamp(.56rem,2.7vw,.72rem);

    }


    .menu-inferior{

        width:100%;

        gap:5px;

    }


    .botao-inferior{

        padding:
        7px
        2px;

    }


    .botao-inferior span{

        font-size:
        clamp(.46rem,2.3vw,.62rem);

    }


    .interna-conteudo{

        padding:
        8px
        9px
        20px;

    }


    .cabecalho-interno{

        grid-template-columns:
        42px
        1fr
        42px;

        gap:6px;

    }


    .cabecalho-interno h2{

        width:100%;

        padding:
        8px
        9px;

        font-size:
        clamp(1.35rem,7vw,2rem);

        letter-spacing:1px;

    }


    .btn-voltar{

        width:40px;

        height:40px;

    }


    .dificuldades{

        grid-template-columns:1fr;

    }


    .card-dificuldade{

        min-height:125px;

        display:grid;

        grid-template-columns:
        58px
        1fr;

        grid-template-rows:auto auto;

        column-gap:13px;

        row-gap:1px;

        text-align:left;

    }


    .card-dificuldade i{

        grid-row:
        1 / 3;

        align-self:center;

        font-size:2.4rem;

    }


    .card-dificuldade strong{

        align-self:end;

        font-size:1.55rem;

    }


    .card-dificuldade span{

        align-self:start;

    }


    .desafio-item{

        grid-template-columns:
        42px
        1fr;

    }


    .desafio-premio{

        grid-column:
        2 / 3;

        text-align:left;

    }


    .ranking-item{

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

    }


    .ranking-item > span:last-child{

        grid-column:
        3 / 4;

    }


    .perfil-estatisticas{

        gap:5px;

    }


    .perfil-estatisticas div{

        padding:
        10px
        4px;

    }


    .configuracao-item{

        min-height:57px;

    }

}


/*==========================================================
    RESPONSIVO — TELAS BAIXAS
==========================================================*/

@media(max-height:700px){

    .abertura-conteudo{

        padding-top:9px;

        padding-bottom:8px;

    }


    .logo-jogo{

        transform:scale(.88);

        transform-origin:top center;

    }


    .abertura-acoes{

        min-height:86px;

    }


    .menu-principal{

        gap:6px;

    }


    .botao-menu{

        min-height:58px;

        padding-top:7px;

        padding-bottom:7px;

    }


    .menu-inferior{

        margin-bottom:4px;

    }


    .conteudo-central{

        padding-top:12px;

        padding-bottom:12px;

    }


    .card-dificuldade{

        min-height:160px;

    }

}


/*==========================================================
    MODO PAISAGEM EM CELULAR
==========================================================*/

@media(
    max-height:520px
)
and
(
    orientation:landscape
){

    .abertura-conteudo{

        display:grid;

        grid-template-columns:
        1fr
        1fr;

        grid-template-rows:
        1fr
        auto;

        align-items:center;

        gap:10px;

        padding:
        8px
        15px;

    }


    .logo-jogo{

        grid-column:1;

        grid-row:1;

        width:100%;

        transform:scale(.68);

        transform-origin:center;

    }


    .abertura-acoes{

        grid-column:2;

        grid-row:1;

        width:100%;

        min-height:auto;

        margin:0;

    }


    .rodape-abertura{

        grid-column:
        1 / 3;

        grid-row:2;

        margin:0;

    }


    .menu-conteudo{

        display:grid;

        grid-template-columns:
        1fr
        1.25fr;

        grid-template-rows:
        auto
        1fr
        auto;

        gap:8px 16px;

    }


    .menu-cabecalho{

        grid-column:
        1 / 3;

    }


    .menu-principal{

        grid-column:2;

        grid-row:2;

        width:100%;

        gap:5px;

    }


    .menu-inferior{

        grid-column:1;

        grid-row:2;

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

        width:100%;

        align-self:center;

    }


    .rodape-menu{

        grid-column:
        1 / 3;

    }


    .botao-menu{

        min-height:52px;

    }


    .botao-menu-icone{

        width:38px;

        height:38px;

    }


    .dificuldades{

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

    }


    .card-dificuldade{

        min-height:145px;

        display:flex;

        text-align:center;

    }

}
/*==========================================================
    TELA UM JOGADOR — PREMIUM
==========================================================*/

.tela-um-jogador{

    background:#07150d;

}


.fundo-um-jogador{

    background-image:
    linear-gradient(
        180deg,
        rgba(0,0,0,.06),
        rgba(0,0,0,.20)
    ),
    url("../img/backgrounds/fundo-abertura.webp");

    transform:scale(1.025);

}


.camada-um-jogador{

    background:
    radial-gradient(
        circle at center,
        rgba(15,73,35,.12),
        rgba(0,0,0,.68)
    ),
    linear-gradient(
        180deg,
        rgba(0,0,0,.22),
        rgba(0,0,0,.76)
    );

}


.um-jogador-conteudo{

    padding-bottom:
    clamp(16px,3vh,32px);

}


.btn-ajuda{

    width:
    clamp(42px,5.7vw,56px);

    height:
    clamp(42px,5.7vw,56px);

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    2px solid
    #c99a2c;

    border-radius:50%;

    background:
    linear-gradient(
        145deg,
        #165f2c,
        #073517
    );

    color:#ffe495;

    font-size:
    clamp(1rem,2.3vw,1.4rem);

    box-shadow:
    0 6px 12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18);

    transition:
    transform .25s ease,
    filter .25s ease;

}


.btn-ajuda:hover{

    transform:scale(1.06);

    filter:brightness(1.16);

}


.um-jogador-apresentacao{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:
    clamp(10px,2vh,20px);

    margin-bottom:
    clamp(16px,3vh,30px);

    text-align:center;

}


.etiqueta-modo{

    padding:
    6px
    14px;

    border:
    1px solid
    rgba(235,190,67,.65);

    border-radius:999px;

    background:
    rgba(4,34,14,.70);

    color:#f4cf67;

    font-size:
    clamp(.64rem,1.4vw,.84rem);

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.um-jogador-apresentacao h3{

    margin-top:
    clamp(10px,1.8vh,16px);

    color:#fff0b6;

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

    font-size:
    clamp(2rem,5vw,3.8rem);

    line-height:1;

    letter-spacing:
    clamp(2px,.5vw,6px);

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

}


.um-jogador-apresentacao p{

    margin-top:7px;

    color:#d8d3c2;

    font-size:
    clamp(.72rem,1.5vw,.95rem);

}


/*==========================================================
    CARDS DE DIFICULDADE
==========================================================*/

.dificuldades-premium{

    width:min(100%,1050px);

    margin:0 auto;

    align-items:stretch;

}


.dificuldades-premium .card-dificuldade{

    position:relative;

    min-height:
    clamp(340px,50vh,470px);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    gap:0;

    overflow:hidden;

    padding:
    clamp(20px,3vw,30px);

    border:
    2px solid
    rgba(218,169,46,.72);

    border-radius:
    clamp(16px,2vw,24px);

    isolation:isolate;

    text-align:center;

}


.dificuldades-premium .card-dificuldade::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    opacity:.98;

}


.dificuldades-premium .card-dificuldade::after{

    content:"";

    position:absolute;

    top:-70%;

    left:-35%;

    z-index:-1;

    width:25%;

    height:250%;

    transform:rotate(22deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transition:left .7s ease;

}


.dificuldades-premium .card-dificuldade:hover::after{

    left:125%;

}


.card-peao::before{

    background:
    radial-gradient(
        circle at top,
        rgba(58,174,85,.38),
        transparent 38%
    ),
    linear-gradient(
        160deg,
        #176b34,
        #073519 72%
    );

}


.card-gauderio::before{

    background:
    radial-gradient(
        circle at top,
        rgba(243,185,54,.36),
        transparent 38%
    ),
    linear-gradient(
        160deg,
        #9b6614,
        #4a2b06 72%
    );

}


.card-lenda::before{

    background:
    radial-gradient(
        circle at top,
        rgba(240,73,56,.34),
        transparent 38%
    ),
    linear-gradient(
        160deg,
        #8f1b18,
        #400706 72%
    );

}


.dificuldade-selo{

    position:absolute;

    top:
    clamp(12px,1.5vw,18px);

    right:
    clamp(12px,1.5vw,18px);

    padding:
    5px
    11px;

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

    border-radius:999px;

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

    color:#ffe08a;

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

    font-size:
    clamp(.78rem,1.6vw,1rem);

    letter-spacing:2px;

    text-transform:uppercase;

}


.dificuldade-personagem{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:
    clamp(18px,3vh,28px);

}


.personagem-circulo{

    width:
    clamp(100px,14vw,150px);

    height:
    clamp(100px,14vw,150px);

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    clamp(3px,.35vw,5px)
    solid
    rgba(245,202,87,.88);

    border-radius:50%;

    background:
    radial-gradient(
        circle at 35% 28%,
        rgba(255,231,146,.28),
        rgba(0,0,0,.28) 55%
    );

    color:#ffe18a;

    font-size:
    clamp(2.8rem,6vw,5rem);

    box-shadow:
    0 14px 30px rgba(0,0,0,.42),
    inset 0 2px 4px rgba(255,255,255,.18),
    0 0 20px rgba(235,181,47,.20);

    transition:
    transform .32s ease,
    box-shadow .32s ease;

}


.card-dificuldade:hover .personagem-circulo,
.card-dificuldade.selecionada .personagem-circulo{

    transform:
    translateY(-5px)
    scale(1.06);

    box-shadow:
    0 18px 36px rgba(0,0,0,.52),
    inset 0 2px 4px rgba(255,255,255,.20),
    0 0 28px rgba(247,198,68,.35);

}


.dificuldade-conteudo{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:
    clamp(16px,2.5vh,24px);

}


.dificuldade-conteudo strong{

    color:#fff0b0;

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

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

    line-height:1;

    letter-spacing:
    clamp(2px,.35vw,4px);

    text-transform:uppercase;

    text-shadow:
    0 3px 5px rgba(0,0,0,.72);

}


.dificuldade-conteudo small{

    min-height:48px;

    margin-top:9px;

    color:#ded8c4;

    font-size:
    clamp(.7rem,1.45vw,.9rem);

    line-height:1.55;

}


.dificuldade-detalhes{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:
    clamp(7px,1.2vh,11px);

    margin-top:
    clamp(18px,3vh,28px);

}


.dificuldade-detalhes > span{

    width:100%;

    display:flex;

    align-items:center;

    gap:9px;

    padding:
    8px
    10px;

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

    border-radius:9px;

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

    color:#f0e3b6;

    font-size:
    clamp(.65rem,1.35vw,.82rem);

    text-align:left;

}


.dificuldade-detalhes i{

    width:18px;

    color:#f0c54c;

    text-align:center;

}


.dificuldade-selecao{

    position:absolute;

    left:50%;

    bottom:
    clamp(12px,1.7vw,18px);

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    2px solid
    rgba(255,226,135,.60);

    border-radius:50%;

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

    color:transparent;

    transform:
    translateX(-50%)
    scale(.80);

    transition:
    color .25s ease,
    background .25s ease,
    transform .25s ease;

}


.card-dificuldade.selecionada{

    border-color:#ffe07b;

    transform:
    translateY(-9px)
    scale(1.025);

    box-shadow:
    0 22px 42px rgba(0,0,0,.66),
    0 0 24px rgba(238,187,49,.34),
    inset 0 0 0 1px rgba(255,235,157,.20);

}


.card-dificuldade.selecionada .dificuldade-selecao{

    background:#d6a82d;

    color:#281704;

    transform:
    translateX(-50%)
    scale(1);

}


/*==========================================================
    PAINEL DA PARTIDA
==========================================================*/

.painel-partida{

    width:min(100%,1050px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:
    clamp(14px,3vw,28px);

    margin:
    clamp(18px,3vh,30px)
    auto
    0;

    padding:
    clamp(12px,1.8vh,18px)
    clamp(14px,2.3vw,24px);

    border:
    1px solid
    rgba(220,172,48,.65);

    border-radius:
    clamp(12px,1.6vw,18px);

    background:
    linear-gradient(
        145deg,
        rgba(8,50,22,.93),
        rgba(3,24,10,.96)
    );

    box-shadow:
    0 12px 28px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);

}


.partida-resumo{

    display:flex;

    align-items:center;

    gap:
    clamp(10px,1.7vw,16px);

}


.resumo-icone{

    width:
    clamp(42px,5.5vw,58px);

    height:
    clamp(42px,5.5vw,58px);

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    2px solid
    #c99b2e;

    border-radius:50%;

    background:
    linear-gradient(
        145deg,
        #a91d18,
        #5c0706
    );

    color:#ffe08a;

    font-size:
    clamp(1rem,2.4vw,1.45rem);

}


.resumo-texto{

    display:flex;

    flex-direction:column;

}


.resumo-texto small{

    color:#cfc8b0;

    font-size:
    clamp(.62rem,1.3vw,.78rem);

}


.resumo-texto strong{

    margin-top:2px;

    color:#f6d266;

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

    font-size:
    clamp(1.25rem,2.7vw,1.9rem);

    letter-spacing:2px;

}


.btn-comecar-partida{

    min-width:
    min(46vw,310px);

    margin-top:0;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

}


.btn-comecar-partida:disabled{

    filter:
    grayscale(.85)
    brightness(.72);

    transform:none;

    cursor:not-allowed;

}


/*==========================================================
    RESPONSIVO — UM JOGADOR
==========================================================*/

@media(max-width:760px){

    .um-jogador-apresentacao{

        margin-bottom:15px;

    }


    .dificuldades-premium{

        grid-template-columns:1fr;

    }


    .dificuldades-premium .card-dificuldade{

        min-height:0;

        display:grid;

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

        grid-template-rows:
        auto
        auto;

        align-items:center;

        gap:
        4px
        13px;

        padding:
        16px
        14px;

        text-align:left;

    }


    .dificuldade-selo{

        top:8px;

        right:8px;

        font-size:.68rem;

    }


    .dificuldade-personagem{

        grid-column:1;

        grid-row:
        1 / 3;

        margin:0;

    }


    .personagem-circulo{

        width:76px;

        height:76px;

        font-size:2rem;

    }


    .dificuldade-conteudo{

        grid-column:2;

        grid-row:1;

        align-items:flex-start;

        margin:0;

        padding-right:35px;

    }


    .dificuldade-conteudo strong{

        font-size:
        clamp(1.4rem,7vw,2rem);

    }


    .dificuldade-conteudo small{

        min-height:0;

        margin-top:4px;

        font-size:.66rem;

        line-height:1.35;

    }


    .dificuldade-detalhes{

        grid-column:2;

        grid-row:2;

        flex-direction:row;

        flex-wrap:wrap;

        gap:4px;

        margin-top:6px;

    }


    .dificuldade-detalhes > span{

        width:auto;

        padding:
        4px
        7px;

        font-size:.55rem;

    }


    .dificuldade-selecao{

        left:auto;

        right:9px;

        bottom:9px;

        width:28px;

        height:28px;

        transform:scale(.8);

    }


    .card-dificuldade.selecionada .dificuldade-selecao{

        transform:scale(1);

    }


    .card-dificuldade.selecionada{

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

    }


    .painel-partida{

        flex-direction:column;

        align-items:stretch;

    }


    .btn-comecar-partida{

        width:100%;

        min-width:0;

    }

}
/*==========================================================
    CORREÇÕES — TELA UM JOGADOR
==========================================================*/

.tela-um-jogador{

    overflow:hidden;

}


.um-jogador-conteudo{

    height:100%;

    display:flex;

    flex-direction:column;

    padding-top:12px;

    padding-bottom:12px;

}


.um-jogador-apresentacao{

    flex-shrink:0;

    margin-top:5px;

    margin-bottom:10px;

}


.um-jogador-apresentacao h3{

    margin-top:7px;

    font-size:
    clamp(1.7rem,3.6vw,3rem);

}


.um-jogador-apresentacao p{

    margin-top:4px;

}


/*==========================================================
    CARDS MAIS COMPACTOS
==========================================================*/

.dificuldades-premium{

    flex:1;

    min-height:0;

    display:grid;

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

    gap:
    clamp(12px,1.7vw,18px);

    align-items:stretch;

}


.dificuldades-premium .card-dificuldade{

    width:100%;

    min-height:0;

    height:100%;

    max-height:570px;

    padding:
    clamp(14px,1.7vw,22px);

}


.dificuldade-personagem{

    margin-top:
    clamp(10px,1.5vh,18px);

}


.personagem-circulo{

    width:
    clamp(90px,10vw,135px);

    height:
    clamp(90px,10vw,135px);

    font-size:
    clamp(2.5rem,4.5vw,4.3rem);

}


.dificuldade-conteudo{

    margin-top:
    clamp(10px,1.6vh,16px);

}


.dificuldade-conteudo strong{

    font-size:
    clamp(1.7rem,3vw,2.7rem);

}


.dificuldade-conteudo small{

    min-height:42px;

    margin-top:5px;

    line-height:1.35;

}


/*==========================================================
    DETALHES DOS CARDS
==========================================================*/

.dificuldade-detalhes{

    gap:7px;

    margin-top:
    clamp(10px,1.5vh,16px);

}


.dificuldade-detalhes > span{

    min-height:42px;

    display:grid;

    grid-template-columns:
    28px
    1fr;

    align-items:center;

    gap:9px;

    padding:
    7px
    10px;

    line-height:1.2;

    overflow:hidden;

}


.dificuldade-detalhes i{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:
    clamp(.95rem,1.4vw,1.25rem);

    flex-shrink:0;

}


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

.dificuldade-selecao{

    bottom:8px;

    width:29px;

    height:29px;

}


/*==========================================================
    PAINEL INFERIOR
==========================================================*/

.painel-partida{

    flex-shrink:0;

    margin-top:10px;

    padding:
    8px
    14px;

}


.resumo-icone{

    width:42px;

    height:42px;

}


.btn-comecar-partida{

    min-height:46px;

}


/*==========================================================
    TELAS COM ALTURA MENOR
==========================================================*/

@media(max-height:850px) and (min-width:761px){

    .cabecalho-interno{

        min-height:58px;

    }


    .um-jogador-apresentacao{

        margin-top:0;

        margin-bottom:7px;

    }


    .etiqueta-modo{

        padding:
        3px
        10px;

        font-size:.63rem;

    }


    .um-jogador-apresentacao h3{

        font-size:
        clamp(1.5rem,3vw,2.3rem);

        margin-top:4px;

    }


    .um-jogador-apresentacao p{

        font-size:.72rem;

    }


    .dificuldades-premium .card-dificuldade{

        padding:
        12px
        15px;

    }


    .personagem-circulo{

        width:
        clamp(76px,8vw,105px);

        height:
        clamp(76px,8vw,105px);

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

    }


    .dificuldade-conteudo strong{

        font-size:
        clamp(1.55rem,2.5vw,2.15rem);

    }


    .dificuldade-conteudo small{

        min-height:34px;

        font-size:.72rem;

    }


    .dificuldade-detalhes{

        margin-top:8px;

        gap:5px;

    }


    .dificuldade-detalhes > span{

        min-height:34px;

        padding:
        4px
        8px;

        font-size:.68rem;

    }


    .dificuldade-detalhes i{

        width:23px;

        height:23px;

        font-size:.95rem;

    }


    .painel-partida{

        margin-top:7px;

        padding:
        6px
        12px;

    }

}