html, body {
    margin: 0;
    padding: 0;
    height: 100dvh;
    overflow: hidden;
}

.jogar_conteudo {
    background-image: url(../../game_assets/jogar/fundoescuro.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.jogar_conteudo_espacamento {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2rem;
    left: 2rem;
    padding: 2vh 3vw;
    width: auto;
    z-index: 200;
}

.jogar_conteudo_espacamento_cabecalho {
    width: 190px;
    height: auto;
    transition: transform 0.3s ease;
}

.jogar_conteudo_espacamento_cabecalho:hover {
    transform: scale(1.05);
}

.jogar_conteudo_espacamento_cabecalho_imagem {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

.jogar_conteudo_espacamento_cabecalho_imagem img {
    display: block;
    width: 100%;
    height: auto;
}

.jogar_conteudo_espacamento_cabecalho_imagem_texto {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-family: var(--font-primaria);
    color: var(--cor-texto);
    text-align: center;
    white-space: nowrap;
    width: 90%;
    pointer-events: none;
}

.jogar_conteudo_espacamento_cabecalho_imagem_texto p {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.jogar_conteudo_espacamento_cabecalho:hover 
.jogar_conteudo_espacamento_cabecalho_imagem_texto {
    color: var(--cor-hover);
}

.jogar_conteudo_cabecalho {
    margin-top: 5vh;
    font-size: clamp(2.8rem, 4vh, 3rem);
    font-family: var(--font-primaria);
    color: var(--cor-texto);
    text-align: center;
    width: 100%;
}

.jogar_conteudo_mapas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    width: 100%;
    flex: 1;
    padding: 0vh 0vw;
    gap: 4vh 1vw; 
    box-sizing: border-box;
}

.jogar_conteudo_mapas_ilha,
.jogar_conteudo_mapas_caverna,
.jogar_conteudo_mapas_deserto,
.jogar_conteudo_mapas_oceano,
.jogar_conteudo_mapas_floresta {
    width: 30%;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.jogar_conteudo_mapas_ordem_texto {
    font-size: clamp(1.2rem, 2.5vw, 3rem);
    font-family: var(--font-primaria);
    color: var(--cor-texto);
    text-align: center;
    margin-bottom: 0.5vh;
    white-space: nowrap;
    font-weight: 400;
}

.jogar_conteudo_mapas_ordem_imagem {
    display: flex;
    justify-content: center;
    width: 100%;
}

.jogar_conteudo_mapas_ordem_imagem_ilha,
.jogar_conteudo_mapas_ordem_imagem_caverna,
.jogar_conteudo_mapas_ordem_imagem_deserto,
.jogar_conteudo_mapas_ordem_imagem_oceano,
.jogar_conteudo_mapas_ordem_imagem_floresta {
    width: auto;
    height: auto;
    max-height: 28vh;
    max-width: 100%;
    object-fit: contain;
}

.jogar_conteudo_mapas_ilha:hover,
.jogar_conteudo_mapas_caverna:hover,
.jogar_conteudo_mapas_deserto:hover,
.jogar_conteudo_mapas_oceano:hover,
.jogar_conteudo_mapas_floresta:hover {
    transform: translateY(-5px);
    z-index: 10;
}

.mapa-wrapper-relativo:hover .jogar_conteudo_mapas_ordem_imagem_ilha {
    box-shadow: 0 0 15px #0f9e2ead, 0 0 20px #09db3686, 0 0 45px #b8ffaac9, 0 0 85px #beff6ace;
}

.mapa-wrapper-relativo:hover .jogar_conteudo_mapas_ordem_imagem_caverna {
    box-shadow: 0 0 15px #3a3a38, 0 0 20px #5f5f5c, 0 0 45px #706e6e, 0 0 85px #919291;
}

.mapa-wrapper-relativo:hover .jogar_conteudo_mapas_ordem_imagem_deserto {
    box-shadow: 0 0 15px #b8a1208e, 0 0 20px #ffbe0da6, 0 0 45px #ffad3186, 0 0 85px #f5ab3b9f;
}

.mapa-wrapper-relativo:hover .jogar_conteudo_mapas_ordem_imagem_oceano {
    box-shadow: 0 0 15px #023e8ad0, 0 0 30px #0077b6d0, 0 0 50px #0096c7d0, 0 0 80px #48cae4d0;
}

.mapa-wrapper-relativo:hover .jogar_conteudo_mapas_ordem_imagem_floresta {
    box-shadow: 0 0 15px #081c15d0, 0 0 30px #1b4332d0, 0 0 50px #0096c7d0, 0 0 80px #40916cd0;
}

.mapa-wrapper-relativo {
    position: relative;
    width: fit-content; 
    margin: 0 auto; 
    display: flex;
    justify-content: center;
    padding: 0;
}

.jogar_conteudo_mapas_ordem_imagem {
    padding: 0;
    border: none;
    background: none;
    display: block;
    line-height: 0; 
}

.overlay-vitoria {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 97%;
    height: 95%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    pointer-events: none; 
}

.overlay-itens {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.pergaminho-container {
    position: relative; 
    width: 85%; 
    max-width: 260px;
    display: block; 
    margin: 0 auto; 
    transform: translateY(-30px); 
    pointer-events: auto; 
}

.pergaminho-bg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

.medalhas-wrapper {
    position: absolute;
    top: -9%; 
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0; 
    padding: 0 5%; 
    box-sizing: border-box;
}

.medalha {
    width: 38%; 
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    margin: 0 -6%; 
    position: relative; 
}

#prata-ilha, #prata-caverna, #prata-deserto, #prata-oceano, #prata-floresta {
    z-index: 5;
}

.btn-reiniciar-icone {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    z-index: 10;
    width: 35%; 
    left: 50%;
    transform: translateX(-50%);
    bottom: -30%; 
    margin-top: 0; 
    transition: transform 0.1s;
    pointer-events: auto;
}

.btn-reiniciar-icone img {
    width: 100%;
    height: auto;
    display: block;
}

.btn-reiniciar-icone:active {
    transform: translateX(-50%) scale(0.9);
}

.escondido {
    display: none !important;
}

@media (max-width: 1024px) {
    .jogar_conteudo_mapas_ilha,
    .jogar_conteudo_mapas_caverna,
    .jogar_conteudo_mapas_deserto,
    .jogar_conteudo_mapas_oceano,
    .jogar_conteudo_mapas_floresta {
        width: 45%;
    }

    .jogar_conteudo_mapas_ordem_imagem_ilha,
    .jogar_conteudo_mapas_ordem_imagem_caverna,
    .jogar_conteudo_mapas_ordem_imagem_deserto,
    .jogar_conteudo_mapas_ordem_imagem_oceano,
    .jogar_conteudo_mapas_ordem_imagem_floresta {
        max-height: 20vh;
    }

    .pergaminho-container {
        max-width: 160px;
        transform: translateY(-10px);
    }

    .btn-reiniciar-icone {
        bottom: -25%;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .jogar_conteudo_espacamento {
        padding: 5vh 2vw;
    }

    .jogar_conteudo_espacamento_cabecalho {
        width: 180px;
        max-width: 30vw;
        position: fixed;
        top: 1vh;
        left: 1vw;
        z-index: 500;
    }

    .jogar_conteudo_espacamento_cabecalho_imagem_texto {
        font-size: 1.6rem;
        top: 50%;
    }

    .jogar_conteudo_espacamento_cabecalho img {
        width: 100%;
        height: auto;
    }

    .jogar_conteudo_espacamento_cabecalho button {
        padding: 1rem;
    }

    .jogar_conteudo_cabecalho {
        margin-top: 0.5vh;
        margin-bottom: 6vh;
        font-size: clamp(2rem, 3.8vw, 2.7rem);
    }

    .jogar_conteudo_mapas {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10vh 1vw;
        padding: 0 0 8vh 0;
        max-height: 82%;
        overflow-y: auto;
        width: 100%;
    }

    .jogar_conteudo_mapas_ilha,
    .jogar_conteudo_mapas_caverna,
    .jogar_conteudo_mapas_deserto,
    .jogar_conteudo_mapas_oceano,
    .jogar_conteudo_mapas_floresta {
        width: 32%;
        margin: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .jogar_conteudo_mapas_oceano {
        margin-left: 1vw;
    }

    .jogar_conteudo_mapas_floresta {
        margin-right: 1vw;
    }

    .jogar_conteudo_mapas_ordem_texto {
        font-size: clamp(1.9rem, 3vw, 2.2rem);
        text-align: center;
        margin-bottom: 0.5vh;
    }

    .jogar_conteudo_mapas_ordem_imagem_ilha,
    .jogar_conteudo_mapas_ordem_imagem_caverna,
    .jogar_conteudo_mapas_ordem_imagem_deserto,
    .jogar_conteudo_mapas_ordem_imagem_oceano,
    .jogar_conteudo_mapas_ordem_imagem_floresta {
        max-height: 36dvh;
        max-width: 100%;
        margin: 0;
        object-fit: contain;
    }
}

@media (max-width: 700px) and (orientation: landscape) {
    .jogar_conteudo_cabecalho {
        font-size: clamp(1.2rem, 3.5vw, 1.8rem);
    }

    .jogar_conteudo_mapas_ilha,
    .jogar_conteudo_mapas_caverna,
    .jogar_conteudo_mapas_deserto,
    .jogar_conteudo_mapas_oceano,
    .jogar_conteudo_mapas_floresta {
        width: 30%;
    }

    .jogar_conteudo_mapas_ordem_imagem_ilha,
    .jogar_conteudo_mapas_ordem_imagem_caverna,
    .jogar_conteudo_mapas_ordem_imagem_deserto,
    .jogar_conteudo_mapas_ordem_imagem_oceano,
    .jogar_conteudo_mapas_ordem_imagem_floresta {
        max-height: 18dvh;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}