/* =======================================================
   CSS GLOBAL RESPONSIVO (TABLETS E CELULARES)
   ======================================================= */

/* ---------------------------------------------------
   1. REGRAS PARA TABLETS (Telas até 1024px)
   Ex: iPads, tablets Android, ecrãs pequenos de portáteis
--------------------------------------------------- */
@media (max-width: 1024px) {
    /* Empilha os painéis principais (Jogo em cima, Controles embaixo) */
    #main-container, #game-container, #game-board, #structures-panel, #shop {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* Os painéis de controle não precisam ser gigantes no tablet, limitamos a um bom tamanho */
    #ui-panel, #inventory-panel, #algorithm-panel, #code-panel, #left-panel, #control-panel {
        width: 100% !important;
        max-width: 800px !important;
        margin-top: 10px !important;
    }

    /* O Canvas do jogo deve caber na tela sem estourar */
    canvas {
        max-width: 100% !important;
        height: auto !important;
        touch-action: manipulation; /* Evita zoom acidental ao tocar rápido na tela */
    }

    /* Ajuste para estatísticas no topo (ex: Robô da Lógica, Algoritmos) */
    .stats-container, #header {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        text-align: center !important;
    }
}

/* ---------------------------------------------------
   2. REGRAS EXCLUSIVAS PARA CELULARES (Telas até 768px)
   Ex: iPhones, Smartphones Android
--------------------------------------------------- */
@media (max-width: 768px) {
    /* Reduz o respiro geral da página para aproveitar espaço */
    body {
        padding: 10px !important;
    }

    /* Cabeçalhos em formato coluna */
    #header, .header {
        flex-direction: column !important;
        gap: 10px !important;
    }

    h1 { font-size: 1.6rem !important; margin-bottom: 5px !important; }
    h2 { font-size: 1.1rem !important; }
    p.subtitle { font-size: 0.95rem !important; }

    /* Força os botões e inputs a ocuparem 100% da largura para facilitar o clique com o polegar */
    .controls, #controls, .actions {
        flex-direction: column !important;
        width: 100% !important;
        padding: 10px !important;
    }

    button, select, input {
        width: 100% !important;
        margin-bottom: 8px !important;
        padding: 15px 10px !important; /* Aumenta a área de toque do botão */
        font-size: 1rem !important;
    }

    /* Ajusta modais e pop-ups de instruções para não cortarem nas laterais */
    .menu-box, .instructions-box, #menu p, #menu div {
        width: 95% !important;
        max-width: 95% !important;
        padding: 15px !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    /* --- Ajustes Finos Específicos por Jogo --- */
    
    /* Jogo de Ponteiros (Memória RAM): Passa de 2 colunas para 1 coluna */
    #memory-grid { 
        grid-template-columns: 1fr !important; 
        gap: 10px !important;
        padding: 10px !important;
    }

    /* Robô da Lógica / Circuitos: Reduz caixas de listagem e inventários */
    .sequence-container, #inventory-panel {
        padding: 10px !important;
    }

    .cmd-btn {
        padding: 10px !important;
        font-size: 0.85rem !important;
    }
    
    /* Cyber Defense: Lojas de torres e upgrades */
    .structure-box, .structure-container { 
        width: 100% !important; 
        min-width: 100% !important; 
    }
}