/* Este arquivo é necessário porque o Tailwind CDN não suporta variants (hover, disabled) */
/* para classes customizadas (tecla-base) sem a instalação completa. */

/* Estilo para as letras (traços) geradas pelo JavaScript */
.letras {
    width: 1rem; /* 16px */
    text-align: center;
    border-bottom: 2px solid #F2A20C;
    color: #032c1f;
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
    /* Font size pode ser ajustado aqui ou via JS */
}


#imagem {
  width: 400px;
  height:400px;
  /* REMOVER ou COMENTAR estas linhas: */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* margin-left: 10%; */ /* <-- ESTE É O CRÍTICO */
  background-repeat: no-repeat;
  mix-blend-mode: darken;
  margin-bottom: -30px;
}
/* Base Style para as teclas (botões) */
.tecla-base {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    margin: 0.125rem; /* 2px */
    margin-bottom: 0.3125rem; /* 5px */
    cursor: pointer;
    box-shadow: 0px 2px 8px #000000;
    border-radius: 5px;
    border: 1px solid #000000;
    background: #000;
    color: greenyellow;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 900;
}

/* ESTILOS DE INTERAÇÃO (HOVER e DISABLED) */

/* Comportamento de Hover */
.tecla-base:hover {
    transform: scale(1.3);
    background: greenyellow;
    color: #000;
}

/* Comportamento de Disabled */
.tecla-base:disabled {
    cursor: not-allowed;
    /* Estilo para a tecla desabilitada (pode ser o mesmo que o hover para indicar que foi usada) */
    /* Você pode ajustar isso se quiser uma cor de tecla desabilitada diferente */
    /* background: #333; 
    color: #666; */
}

/* Classes para estilização do Modal via JS */
/* O JavaScript deve aplicar estas classes à div #myModal ou #modalBody */
.modal-vitoria .modal-content {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.modal-gameover .modal-content {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}


/* Este arquivo é necessário porque o Tailwind CDN não suporta variants (hover, disabled) */
/* para classes customizadas (tecla-base) sem a instalação completa. */

/* Estilo para as letras (traços) geradas pelo JavaScript */
.letras {
    width: 1rem; /* 16px */
    text-align: center;
    border-bottom: 2px solid #F2A20C;
    color: #032c1f;
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
    /* Font size pode ser ajustado aqui ou via JS */
}

/* Removendo mix-blend-mode para evitar problemas de fundo, conforme discutido. */
/* #imagem {
    mix-blend-mode: darken;
} */

/* Base Style para as teclas (botões) */
.tecla-base {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    margin: 0.125rem; /* 2px */
    margin-bottom: 0.3125rem; /* 5px */
    cursor: pointer;
    box-shadow: 0px 2px 8px #000000;
    border-radius: 5px;
    border: 1px solid #000000;
    background: #000;
    color: greenyellow;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 900;
}

/* ESTILOS DE INTERAÇÃO (HOVER e DISABLED) */

/* Comportamento de Hover */
.tecla-base:hover {
    transform: scale(1.3);
    background: greenyellow;
    color: #000;
}

/* Comportamento de Disabled */
.tecla-base:disabled {
    cursor: not-allowed;
}

/* ======================================================= */
/* ✅ AJUSTES PARA MODAL DE TELA CHEIA */
/* ======================================================= */

/* 1. Força o modal (o fundo) a cobrir toda a tela */
/* Usando !important para sobrescrever o Bootstrap */
#myModal.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1040; /* Z-index do Bootstrap para modais */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden; /* Evita scroll na tela de fundo */
    background: rgba(0, 0, 0, 0.5) !important; /* Adiciona um fundo semi-transparente padrão */
}

/* 2. Força o modal-dialog a ser grande */
#myModal .modal-dialog {
    max-width: 100vw !important; /* Ocupa a largura total */
    width: 100vw !important;
    height: 100vh !important; /* Ocupa a altura total */
    margin: 0 !important;
}

/* 3. Força o modal-content a preencher o dialog e centraliza o texto */
#myModal .modal-content {
    height: 100vh !important;
    border-radius: 0 !important; /* Remove borda arredondada */
}

/* 4. Estiliza o corpo do modal para centralizar o texto grande */
#modalBody {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente o texto */
    align-items: center; /* Centraliza horizontalmente o texto */
    width: 100% !important;
    height: 100% !important; /* Preenche o espaço restante */
    padding: 50px !important; /* Espaçamento interno */
    font-size: 2.5rem; /* Aumenta a fonte para destaque */
    color: #fff;
    text-align: center;
    border-radius: 0 !important;
}

/* 5. Garante que cabeçalho e rodapé não fiquem escondidos */
#myModal .modal-header, #myModal .modal-footer {
    z-index: 1041; /* Acima da modal */
    flex-shrink: 0; /* Impede que diminuam */
    background-color: rgba(0, 0, 0, 0.1); /* Fundo sutil */
    border-top: none;
    border-bottom: none;
}

/* ======================================================= */
/* Classes para estilização do Modal via JS */
/* ======================================================= */
.modal-vitoria .modal-content {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.modal-gameover .modal-content {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* MEDIA QUERIES - Ajustando o tamanho dos botões */
/* Mantive a estrutura original, mas usei unidades rem */

/* Mínimo 376px (médio) */
@media (min-width: 376px) {
    .tecla-base {
        width: 1.875rem; /* 30px */
        height: 1.875rem; /* 30px */
    }
    .teclas #btnReiniciar {
        width: 5rem; /* 80px */
        font-size: 1.25rem; /* 20px */
        height: 2.8125rem; /* 45px */
    }
}

/* Mínimo 769px (desktop) */
@media (min-width: 769px) {
    .tecla-base {
        width: 4.25rem; /* 68px */
        height: 4.25rem; /* 68px */
        font-size: 2em;
    }
    .letras {
        width: 2.1875rem; /* 35px */
        font-size: 2.5em; /* Ajuste o tamanho da fonte da letra */
    }
    .teclas #btnReiniciar {
        width: 8.125rem; /* 130px */
        height: 4.25rem; /* 68px */
        font-size: 1.5em; 
    }
}
/* MEDIA QUERIES - Ajustando o tamanho dos botões */
/* Mantive a estrutura original, mas usei unidades rem */

/* Mínimo 376px (médio) */
@media (min-width: 376px) {
    .tecla-base {
        width: 1.875rem; /* 30px */
        height: 1.875rem; /* 30px */
    }
    .teclas #btnReiniciar {
        width: 5rem; /* 80px */
        font-size: 1.25rem; /* 20px */
        height: 2.8125rem; /* 45px */
    }
}

/* Mínimo 769px (desktop) */
@media (min-width: 769px) {
    .tecla-base {
        width: 4.25rem; /* 68px */
        height: 4.25rem; /* 68px */
        font-size: 2em;
    }
    .letras {
        width: 2.1875rem; /* 35px */
        font-size: 2.5em; /* Ajuste o tamanho da fonte da letra */
    }
    .teclas #btnReiniciar {
        width: 8.125rem; /* 130px */
        height: 4.25rem; /* 68px */
        font-size: 1.5em; 
    }
}