/* ---------------------------------------------------
   TABLETS EM MODO PAISAGEM / LAPTOPS PEQUENOS (Até 1024px)
   --------------------------------------------------- */
@media screen and (max-width: 1024px) {
    /* Ajusta os widgets de estatísticas para caberem melhor */
    .widgets-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em vez de 3/4 */
    }
}

/* ---------------------------------------------------
   TABLETS EM MODO RETRATO / CELULARES GRANDES (Até 768px)
   --------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* Ajusta o Cabeçalho (HUD) */
    .top-hud {
        flex-direction: column; /* Empilha os itens do topo */
        text-align: center;
        gap: 10px;
    }

    /* Ajusta a Navegação Principal */
    .command-nav {
        flex-wrap: wrap; /* Permite que os botões quebrem de linha se não couberem */
        justify-content: center;
    }
    
    .nav-item {
        width: 48%; /* Botões menores, 2 por linha */
        margin-bottom: 5px;
    }

    /* Transforma a tabela de tropas num formato empilhado se necessário */
    .table-responsive {
        overflow-x: auto; /* Permite rolar a tabela para o lado em vez de quebrar o layout */
    }
}

/* ---------------------------------------------------
   CELULARES NORMAIS (Até 480px)
   --------------------------------------------------- */
@media screen and (max-width: 480px) {
    /* Tudo numa coluna só */
    .widgets-grid {
        grid-template-columns: 1fr; /* 1 widget por linha */
    }

    .nav-item {
        width: 100%; /* Botões ocupam 100% da largura (melhor para o dedo) */
    }

    /* Reduz tamanhos de fonte gigantes (como os dos gráficos e animações) */
    .glitch-text {
        font-size: 2rem !important; /* Força um tamanho menor */
    }

    .status-icon {
        font-size: 2.5rem !important;
    }
}