/*==========================================================
    OS SETE REINOS DA EAD
    Desenvolvido por Claudivan Santana

    Arquivo:
    style.css

    Objetivo:
    Estilização completa do jogo.

==========================================================*/


/*==========================================================
=            RESET GERAL
==========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


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

:root{

    --ouro:#d4af37;
    --ouro-claro:#ffd65a;

    --marrom:#3f2d20;

    --marrom-claro:#715235;

    --fundo:#1e1b17;

    --texto:#f8f5e6;

    --verde:#4caf50;

    --vermelho:#c0392b;

    --cinza:#d8d8d8;

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

    --transicao:.35s;

}


/*==========================================================
=            BODY
==========================================================*/

body{

    background:#111;

    color:var(--texto);

    font-family:'Cinzel', serif;

    overflow:hidden;

}

#mapa{

    opacity:0;

    transform:scale(1.08);

    transition:1.2s;

}

#mapa.ativo{

    opacity:1;

    transform:scale(1);

}

#hud{

    transform:translateY(-120px);

    transition:1s;

}

#hud.ativo{

    transform:translateY(0);

}


@keyframes zoomMapa{

    from{

        transform:scale(1.15);

    }

    to{

        transform:scale(1);

    }

}

#imagemMapa{

    animation:zoomMapa 3s ease;

}

.fadeOut{

    animation: fadeOut 1s forwards;

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}


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

#inicio{

    position:fixed;

    inset:0;

    background:url("../img/bg2.png");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:1000;

}


.escurecer{

    position:absolute;

    inset:0;

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

}


.conteudoInicial{

    position:relative;

    z-index:2;

    width:850px;

    max-width:90%;

    text-align:center;

}


.conteudoInicial h1{

    font-size:58px;

    color:var(--ouro);

    text-shadow:3px 3px 10px #000;

}


.conteudoInicial h2{

    margin-top:20px;

    font-size:28px;

    color:white;

}


.conteudoInicial p{

    margin-top:35px;

    line-height:1.8;

    font-size:19px;

}


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

#btnIniciar{

    margin-top:45px;

    padding:18px 45px;

    border:none;

    cursor:pointer;

    border-radius:12px;

    background:linear-gradient(var(--ouro),#96711f);

    color:#fff;

    font-size:20px;

    font-weight:bold;

    transition:var(--transicao);

}


#btnIniciar:hover{

    transform:scale(1.05);

    box-shadow:0 0 25px var(--ouro);

}


/*==========================================================
=            HUD
==========================================================*/

#hud{
/* antigo top
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:90px;
    background:rgba(33,25,17,.92);
    display:flex;
    justify-content:space-around;
    align-items:center;
    border-bottom:2px solid var(--ouro);
    z-index:500;
*/	
	
	position:fixed;
    bottom:20px;
    right:20px;
    z-index:999;

}

#painelHud{

    width:230px;
    background:rgba(20,20,20,.85);
    color:white;
    border:2px solid #d4af37;
    border-radius:12px;
    padding:15px;
    transition:.4s;
    box-shadow:0 0 15px rgba(0,0,0,.5);

}

#btnHud{

    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:22px;
    margin-bottom:10px;

}
.oculto{

    display:none;

}

.listaReinos{

    display:block;

}

.reino {
    text-decoration: none;
    color: inherit;
}
.reino,
.reino:hover,
.reino:focus,
.reino:active,
.reino:visited {
    text-decoration: none;
}

.listaReinos.aberto{

    display:flex;

}





.player{

    font-size:22px;

}


.nivel{

    font-size:22px;

}


/*==========================================================
=            BARRA XP
==========================================================*/

.barraXP{

    width:320px;

    height:18px;

    background:#555;

    border-radius:20px;

    overflow:hidden;

    margin-top:8px;

}


#progressoXP{

    width:0%;

    height:100%;

    background:linear-gradient(to right,#4caf50,#98ff98);

}


/*==========================================================
=            MAPA
==========================================================*/

#mapa{

    width:100vw;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#111;

}


#imagemMapa{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==========================================================
=            BOTÕES DOS REINOS
==========================================================*/

.reino{

    position:absolute;

    padding:12px 20px;

    border:none;

    border-radius:10px;

    background:rgba(31,31,31,.85);

    color:white;

    cursor:pointer;

    transition:.3s;

    border:2px solid var(--ouro);

}


.reino:hover{

    background:var(--ouro);

    color:#000;

    transform:scale(1.12);

    box-shadow:0 0 25px var(--ouro);

}


/*==========================================================
=            POSICIONAMENTO DOS REINOS
==========================================================*/

#tutoria{

    left:18%;

    top:30%;

}


#design{

    right:18%;

    top:30%;

}


#avaliacao{

    left:47%;

    top:20%;

}


#tecnologia{

    left:25%;

    top:50%;

}


#gestao{

    right:25%;

    top:57%;

}


#gamificacao{

    left:48%;

    top:45%;

}


#inovacao{

    left:48%;

    bottom:15%;

}


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

#modal{

    display:none;

    position:fixed;

    inset:0;

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

    justify-content:center;

    align-items:center;

    z-index:999;

}


.janela{

    width:760px;

    max-width:90%;

    background:#efe3bf;

    color:#222;

    padding:35px;

    border-radius:15px;

    border:5px solid var(--marrom);

    box-shadow:var(--sombra);

}


#tituloReino{

    color:var(--marrom);

    margin-bottom:20px;

}


#alternativas{

    margin-top:25px;

}


/*==========================================================
=            BOTÃO RESPONDER
==========================================================*/

#btnResponder{

    margin-top:35px;

    padding:15px 40px;

    background:var(--verde);

    color:white;

    border:none;

    cursor:pointer;

    border-radius:8px;

    font-size:18px;

}


#btnResponder:hover{

    filter:brightness(110%);

}


/*==========================================================
=            TELA FINAL
==========================================================*/

#vitoria{

    display:none;

    position:fixed;

    inset:0;

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

    justify-content:center;

    align-items:center;

    z-index:1500;

}


.conteudoFinal{

    text-align:center;

}


.conteudoFinal h1{

    font-size:80px;

    color:var(--ouro);

}


.conteudoFinal h2{

    margin-top:20px;

    font-size:42px;

}


#novoJogo{

    margin-top:35px;

    padding:18px 45px;

    background:var(--ouro);

    color:#000;

    border:none;

    cursor:pointer;

    font-size:20px;

    border-radius:12px;

}


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

footer{

    position:fixed;

    bottom:10px;

    width:100%;

    text-align:center;

    font-size:14px;

    color:#ddd;

    z-index:100;

}


/*==========================================================
=            RESPONSIVIDADE
==========================================================*/

@media(max-width:900px){

    .conteudoInicial h1{

        font-size:40px;

    }

    #hud{

        flex-direction:column;

        height:auto;

        padding:10px;

    }

    .barraXP{

        width:220px;

    }

    .reino{

        font-size:13px;

        padding:8px 12px;

    }

}