html {
    scroll-behavior: smooth;
}
@keyframes fadeIN { /*define animação*/
    from { opacity: 0; }
    to {opacity: 1; }
}
body {
    animation: fadeIN 1s ease-in-out; /*transição*/
    font-family: 'lato', sans-serif;
    margin: 0;
    background-color: #ffffff;
    color:#333333;
    transition: 0.3s;   
}
body.escuro {
    background-color: #0b0e14;
    color: #ffffff;
}
header {
    font-size: 19px;
    display: flex; 
    justify-content: flex-start; 
    align-items: center;
    min-height: 80px;
    background-color: #fff;
    box-shadow: 1px 1px 5px #ccc;
    padding: 0 30px;
    box-sizing: border-box;
    position: sticky; /* deixa o cabeçario fixo*/
    top: 0;
    z-index: 1000;
}
nav{
    margin-left: auto;
}
header img {
    height: 125px;
    width: auto;
}
header nav {
    float: right;
    margin-top: 30px;
}
header nav a {
    text-decoration: none;
    color: #ccc;
    margin: 15px;
}
header nav a:hover {
    color: #6a49a8;
    transform: scale(1.3); /* aumenta o txt sem empurrar */
    transition: 0.3s;
    
}

/*imagem da logo grande*/
.destaque-central { 
    display: flex;/*ativar o alianhamento de txt flexivel*/
    justify-content: center; /*centraliza na horizontal*/
    align-items: center; /*centraliza na vertical*/
    min-height: 80vh; /*define a altura de seção*/
    flex-direction: column; /*faz obotão ficar embaixo da img*/
    gap: 20px; /*espaço entre a img e o botao*/
}
.logo-grande { /*largura da img*/
    width: 400px;
    height: auto; /*altura*/
    display: block; /*faz se comportar como um bloco*/
}
.btn-jogar {
    background-color: #6a49a8; /*cor do fundo*/
    color: white; /*cor da letra*/
    padding: 15px 40px; /*espaço interno*/
    border: none; /*remove a borda padrao do navegador*/
    border-radius: 8px; /*arredonda os cantos do botao*/
    font-size: 20px; /*aumenta o tamanho da letra*/
    cursor: pointer; /*muda o desenho do mause para a maozinha ao passar encima*/
    transition: 0.3s; /*transição*/
    margin-top: 10px; /*cria uma margem externa no topo*/
}
.historia-jogo {
    text-align: center;
    padding: 60px 20px;
    font-size: 23px;
    line-height: 1.8;
}

.historia-jogo h2 {
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #519de5;
}

.btn-jogar:hover {
    background-color: #3a4685; /*cor de fundo*/
    transform: scale(1.1); /*efeito de zoom*/
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /*aumenta a sombra*/
}
.btn-jogar-topo {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
}
nav {
    display: flex;
    align-items: center;
    gap: 20px;
}
.material-symbols-outlined {
    cursor: pointer; /*maozinha*/
    font-size: 30px; /*tamanho do icone*/
    user-select: none; /*impede que use o txt*/
    transition: 0.3s; 
}
.como-jogar h2 {
    text-align: center;
    font-family: sans-serif;
    margin-top: 50px;
    font-size: 28px;
    text-transform: uppercase;
}
.controles-container {
    display: flex; /*modo flexivel*/
    justify-content: center; /*centraliza*/
    gap: 80px; /*espaço entre os blocos*/
    margin-top: 30px;
}
.como-jogar .controles-container i {
    font-size: 100px;
    color: #333;
    display: block;
    margin-bottom: 10px;
}
figcaption { /*legenda de img / icones*/
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #444;
}
.controle-bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rodape {
    text-align: center;
    background-color: #111;
    color: white;
    padding: 40px 0;
    font-family: 'lato' sans-serif;
}
.sociais a {
    font-size: 35px;
    margin: 0 15px;
    transition: 0.3s;
    display: inline-block;
    color: #ffffff;
}
.sociais a:hover i {
    opacity: 0.7;
    transform: translateY(-3px);
}
.tema-container {
    cursor: pointer;
    display: flex;
    align-items: center;
}
body.modo-escuro {
    background-color: #1e1e1e;
    color: #e0e0e0;
}
body.modo-escuro nav a {
    color: white;
}
body.modo-escuro section {
    background-color: #1e1e1e;
    border: 1px solid #333;
}
body.modo-escuro header {
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}
body.modo-escuro .controles-container i {
    color:#ffffff !important;
}
.modo-escuro figcaption {
    color: white;
}
body.modo-escuro .rodape {
    background-attachment: #000000;
    border-top: 1px solid #333;
}
/*galeria*/
.header {
    gap: 30px;
    display: flex;               /*organização linha */
    justify-content: flex-start;
    align-items: center;         /* Alinha todo na mesma altura */
    padding: 10px 5%;            
    width: 100%;
}
.secao-galeria {/*ajuste imagens galeria*/
    padding: 40px 20px;
    text-align: center;
}
/*organiza a grade */
.grade-galeria {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    width: 100%; /* Garante que a grade use a tela toda */
}
.foto-item {
    width: 45%;     
    min-width: 300px;
    background-color: #000;
    border: 2px solid #fff;
    border-radius: 15px;
    padding: 10px;
    box-sizing: border-box; 
}

/* ajusta a imagem */
.foto-item img {
    width: 100% !important; 
    height: auto !important; 
    object-fit: contain;       
    border-radius: 10px;
    display: block;
}

/* Texto acima da foto */
.titulo-foto {
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
.btn-jogar {
    display: block;
    margin: 30px auto;
    padding: 15px 40px;
}
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* pagina de contato*/

.corpo-contato {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 20px;
    min-height: 100vh;
}
.logo-contato {
    display: flex;
    justify-content: center;
    margin-bottom: 30px; /*espaço margem e formulário*/
    width: 100%;
}
.logo-contato img {
    width: 250px;
    height: auto;
}
.card-feedback {
    background-color: #121214;
    color: #fff;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column; /*um em baixo do outro*/
    align-items: stretch; /*alinha o campo de preenchimento*/
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #8a2be2;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4);
}
.input-grupo {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}
.input-grupo input,
.input-grupo textarea {
    width: 100%;
    padding: 20px;
    font-size: 18px;
    margin-top: 10px;
    box-sizing: border-box;
}
.btn-jogar-topo {
    background-color: #8a2be2;
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}
.btn-jogar-topo:hover {
    background-color: #a855f7;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
}
header {
    gap: 30px;
    display: flex;               /*organização linha */
    justify-content: flex-start;
    align-items: center;         /* Alinha todo na mesma altura */
    padding: 10px 5%;            
    width: 100%;
}
nav {
    margin-left: auto;
}
.btn-redefinir-escuro {
    background-color: red;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    transition: 0.3s;
}
.form-escondido {
    display: none !important;
}
.esconder-social {
    display: none !important;
}

/*sobre*/

.info-jogo {
    background: rgba(0, 0, 0, 0.7); /* Fundo preto semi-transparente */
    border: 2px solid #00d4ff;      /* Borda azul neon */
    border-radius: 10px;
    padding: 20px;
    margin: 20px auto;
    max-width: 500px;               /* Não deixa o texto espalhado */
    box-shadow: 0 0 15px rgba(148, 21, 203, 0.3); /* Brilho neon */
    font-family: 'Courier New', Courier, monospace; /* Fonte estilo código */
}

.info-jogo p {
    color: #fff;
    font-size: 1.1rem;
    margin: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.info-jogo strong {
    color: #00d4ff; /* Deixa os títulos em azul neon */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-jogo span {
    color: #8a2be2; /* Os dados em verde (estilo Matrix/Terminal) */
    font-weight: bold;
    float: right; /* Alinha os dados na direita pra ficar organizado */
}

/* Ajuste no Botão Jogar */
.btn-jogar {
    display: block;
    width: 200px;
    margin: 30px auto;
    padding: 15px;
    background: #8a2be2;
    color: white;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn-jogar:hover {
    background: rgba(138, 43, 226, 0.5);
    color: white;
    transform: scale(1.05);
}
.logo-grande {
    display: block;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
}