@font-face {
    font-family: 'ArcadeGamer';
    src: url('./fonts/ARCADE_N.TTF') format('truetype');
}

/* ================= HEADER ================= */

.header {
    background-color: #064889;
    color: white;
    padding: 10px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.menu {
    display: flex;
    gap: 70px;
    margin-left: auto;
    flex-wrap: wrap;
}

.imagem_principal_quem_somos {
    width: 600px;
}

.logo-header {
    width: 150px;
}

.logo_informacao {
    width: 40px;
}

.botao_header {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
}

.botao_jogar {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    font-family: 'ArcadeGamer', sans-serif;
}

button:hover {
    background-color: #063d74;
    color: rgb(255, 214, 101);
}

.botao_header2{
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
}

/* ================= FUNDO ================= */

.fundo_em_bits {
    min-height: 100vh;

    background-color: #82e5ff;

    background-image: 
        url("imagens/fundo-esquerda.png"),
        url("imagens/fundo-direita.png");

    background-repeat: no-repeat, no-repeat;

    background-position: 
        left bottom,
        right bottom;
       

    background-size: 
        40% auto, 
        40% auto;
}

@media (max-width: 768px) {
    .fundo_em_bits {
        background-size: 70%, 70%;
    }
}

/* ================= JOGOS ================= */

.jogo-bloco1 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 15px;
}

#area-jogos {
 
    width: 100%;
}

.jogo-img {
    width: 100%;       /* Faz a imagem ocupar a largura da coluna do grid */
    max-width: 550px;  /* Define um tamanho máximo para não ficar gigante em monitores ultra-wide */
    height: 450px;     /* Altura fixa para manter o padrão */
    object-fit: cover;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

/* Ajuste para celular: no mobile, vira 1 coluna só */
@media (max-width: 768px) {
    #area-jogos {
        grid-template-columns: 1fr; 
    }
}

.jogo-img:active {
    filter: brightness(0.8);
}

/* ================= FOOTER ================= */

.imagem_logo_prefeitura {
    width: 300px;
}

.texto_texto_da_barra {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.text_quem_somos_nos {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.ativo {
    color: rgb(255, 214, 101);
}

.texto-quemsomos {
    font-size: 23px;
    text-align: justify;
    line-height: 1.6;
}

.texto-verde {
    font-size: 23px;
    text-align: justify;
    line-height: 1.6;
    color: green;
}


.titulos {
    color: #063d74;
    font-size: 40px;
}

.linha-amarela {
    width: 150px;
    height: 5px;
    background-color: #FFD700;
    border: none;
    margin: 5px 0 0 0;
    opacity: 1;
}

.popup-admin{
    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.7);

    z-index: 9999;

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

.item-jogo {
    background: white;
    border-radius: 16px;
    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: 0.2s;
}

.item-jogo:hover {
    transform: translateY(-3px);
}

.jogo-img-item {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.info-jogo {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 10px;
}

.nome-jogo {
    font-weight: bold;
    color: black;
}

.botao-lixo {
    background: red;
    color: white;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.botao-editar {
    background: #ffa500;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.area-botoes {
    display: flex;
    gap: 10px;
}

.popup-conteudo {
    background: #064889;
    padding: 40px;
    border-radius: 20px;
    /* Alterado de width para min-width */
    min-width: 350px; 
    /* Garante que não fique gigante em telas grandes */
    max-width: 90%;   
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
    /* Adicionado para caso a lista de jogos seja longa */
    max-height: 80vh;
    overflow-y: auto;
}

.titulo-admin{

    color: white;

    text-align: center;

    font-family: Arial;

    margin-bottom: 10px;
}

.input-admin{

    border: none;

    border-radius: 10px;

    padding: 12px;

    outline: none;
}

.botao-admin{

    background: orange;

    color: white;

    border: none;

    padding: 12px;

    border-radius: 10px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}

.botao-admin:hover{
    transform: scale(1.03);
}

.botao-admin:active{
    transform: scale(0.97);
}

.equipe {
    width: 200px;
}

.imagem_Dispositivos{
    width: 800px;
}

.imagem_email{
    width: 100%;
    max-width: 400px;
    height: auto;
}

.col-md-3 {
    margin-bottom: 20px;
}

/* ================= RESPONSIVO ================= */

@media (max-width: 768px) {

    .imagem_email{
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .logo-header {
        width: 120px;
    }

    .menu {
        justify-content: center;
        gap: 10px;
    }

    .botao_header,
    .botao_header2,
    .botao_jogar {
        font-size: 14px;
    }

    .texto-quemsomos,
    .texto-verde {
        font-size: 18px;
        line-height: 1.6;
    }

    .titulos{
        font-size: 20px;
    }


    .jogo-bloco1 {
        align-items: center;
    }

    .imagem_logo_prefeitura {
        width: 180px;
    }

    .texto_texto_da_barra,
    .text_quem_somos_nos {
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .text_quem_somos_nos {
        white-space: normal;
    }
}

.menu-mobile{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:40px;

    cursor:pointer;
}

@media (max-width: 768px){

    .header{

        flex-wrap:wrap;

        padding:15px;
    }

    .menu-mobile{

        display:block;
    }

    .menu{

        display:none;

        width:100%;

        flex-direction:column;

        gap:10px;

        margin-top:15px;
    }

    .menu.menu-aberto{

        display:flex;
    }

    .botao_header,
    .botao_jogar{

        width:100%;
    }

    .logo-header{

        max-width:200px;
    }
}

.menu-mobile{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:40px;

    cursor:pointer;
}

@media (max-width: 768px){

    .header{

        flex-wrap:wrap;

        padding:15px;
    }

    .menu-mobile{

        display:block;
    }

    .menu{

        display:none;

        width:100%;

        flex-direction:column;

        gap:10px;

        margin-top:15px;
    }

    .menu.menu-aberto{

        display:flex;
    }

    .botao_header,
    .botao_jogar{

        width:100%;
    }

    .logo-header{

        max-width:200px;
    }
}