*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Trebuchet MS', sans-serif;
}

body{

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #f5f4c8,
        #d8f3d8,
        #c8edf0
    );

    padding:20px;

    color:#103d2e;

    overflow-x:hidden;
}
.voltar-site{

    margin-top:30px;

    display:flex;

    justify-content:center;
}

.voltar-site button{

    background:#38e87b;

    color:#063820;

    padding:14px 28px;

    font-size:1rem;

    font-weight:bold;

    border:none;

    border-radius:999px;

    cursor:pointer;

    transition:.25s;

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

.voltar-site button:hover{

    transform:scale(1.05);
}

.container{

    width:100%;

    max-width:1100px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;
}

/* TOPO */

.topo{

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    margin-bottom:35px;
}

.emojis{

    font-size:2.6rem;

    margin-bottom:10px;
}

.topo h1{

    font-size:3rem;

    line-height:1.1;

    color:#014421;

    text-align:center;

    max-width:700px;

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

.topo p{

    margin-top:14px;

    font-size:1.1rem;

    color:#2c5b47;
}

/* CARDS */

.menu-niveis{

    display:flex;

    justify-content:center;

    align-items:stretch;

    flex-wrap:wrap;

    gap:20px;
}

.card{

    width:280px;

    min-height:290px;

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

    backdrop-filter:blur(10px);

    border-radius:32px;

    border:
    4px solid #d3efd0;

    padding:28px;

    text-align:center;

    cursor:pointer;

    transition:.25s;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.card:hover{

    transform:
    translateY(-10px)
    scale(1.02);
}

.emoji-card{

    font-size:3rem;

    margin-bottom:15px;
}

.card h2{

    font-size:1.8rem;

    line-height:1.15;

    margin-bottom:15px;
}

.card p{

    color:#476757;

    margin-bottom:18px;
}

.card span{

    color:#45a04c;

    font-weight:bold;
}

/* JOGO */

#jogo{
    display:none;
}

.titulo-jogo{

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;

    margin-bottom:25px;
}

.titulo-jogo h1{

    font-size:3rem;

    line-height:1.1;

    color:#014421;
}

.titulo-jogo p{

    margin-top:10px;

    color:#38604e;

    font-size:1.1rem;
}

/* BOTÕES */

.acoes{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:25px;
}

button{

    border:none;

    padding:12px 20px;

    border-radius:999px;

    font-weight:bold;

    font-size:1rem;

    cursor:pointer;

    transition:.2s;

    background:#c7e8c1;

    color:#063820;

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

button:hover{

    transform:scale(1.05);
}

button:nth-child(4),
button:nth-child(5){

    background:#f5dd88;
}

/* CONTEUDO */

.conteudo{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:20px;

    flex-wrap:wrap;
}

/* TABULEIRO */

.tabuleiro{

    width:auto;

    display:grid;

    justify-content:center;

    align-content:center;

    gap:4px;

    padding:15px;

    border-radius:30px;

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

    backdrop-filter:blur(8px);

    border:
    3px solid #d5efd2;

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

    margin:0;
}

.celula{

    width:30px;

    height:30px;

    background:
    linear-gradient(
        180deg,
        #ecfae8,
        #d7f2d2
    );

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    font-size:.92rem;

    color:#084426;

    cursor:pointer;

    transition:.08s;

    user-select:none;
}

.celula:hover{

    transform:scale(1.08);

    background:
    linear-gradient(
        180deg,
        #d9f6d1,
        #c2e9ba
    );
}

.selecionada{

    background:
    linear-gradient(
        180deg,
        #7ed87c,
        #5abf59
    ) !important;

    color:white;
}

.encontrada{

    background:
    linear-gradient(
        180deg,
        #2e9943,
        #227d35
    ) !important;

    color:white;
}

/* PAINEL */

.painel{

    width:280px;

    min-width:280px;

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

    backdrop-filter:blur(8px);

    border-radius:30px;

    border:
    3px solid #d5efd2;

    padding:20px;

    text-align:center;

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

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;
}

.painel h2{

    font-size:2rem;

    margin-bottom:18px;
}

.lista-palavras{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;
}

.palavra{

    width:100%;

    background:#dff4d9;

    border-radius:999px;

    padding:11px;

    text-align:center;

    font-weight:bold;

    transition:.2s;
}

.palavra.ok{

    background:#4ea64d;

    color:white;

    text-decoration:line-through;
}

.contador{

    margin-top:18px;

    font-weight:bold;
}

/* MENSAGEM */

.mensagem-final{

    margin-top:20px;

    background:#cff1c8;

    border-radius:22px;

    padding:20px;

    display:none;

    animation:aparecer .5s ease;
}

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(15px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/* RESPONSIVO */

@media(max-width:1050px){

    .conteudo{

        grid-template-columns:1fr;
    }

    .painel{

        width:100%;
    }
}

@media(max-width:700px){

    body{
        padding:12px;
    }

    .topo h1,
    .titulo-jogo h1{

        font-size:2rem;
    }

    .topo p,
    .titulo-jogo p{

        font-size:.95rem;
    }

    .card{

        width:100%;
    }

    .celula{

        width:26px;
        height:26px;

        font-size:.8rem;
    }

    .tabuleiro{

        padding:12px;

        gap:4px;
    }

    button{

        width:100%;
    }
}

/* POPUP FINAL */

.overlay-final{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    display:none;

    justify-content:center;
    align-items:center;

    z-index:999;
}

.caixa-final{

    width:90%;
    max-width:420px;

    background:white;

    border-radius:35px;

    padding:35px;

    text-align:center;

    animation:popup .4s ease;

    box-shadow:
    0 20px 40px rgba(0,0,0,.20);
}

.caixa-final h2{

    color:#16713d;

    font-size:2rem;

    margin-bottom:15px;
}

.caixa-final p{

    color:#446555;

    margin-bottom:25px;

    font-size:1.05rem;
}

.caixa-final button{

    background:#7fd37b;

    color:#063820;

    font-size:1rem;

    padding:14px 26px;
}

@keyframes popup{

    from{

        opacity:0;

        transform:
        scale(.8)
        translateY(30px);
    }

    to{

        opacity:1;

        transform:
        scale(1)
        translateY(0);
    }
}