/* Estilos responsivos para dispositivos móveis */

@media (max-width: 768px) {
    /* Ocultar o texto informativo no topo em dispositivos móveis */
    body > div:first-of-type {
        display: none;
    }
    
    /* Ajustes para o contador de dias, botões e contadores */
    #days-counter,
    #record-counter,
    #apocalypse-days-counter {
        width: auto !important;
        height: auto !important;
        padding: 3px !important;
        margin: 2px auto !important;
        font-size: 0.8em !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1px !important; /* Reduzido de 2px para 1px para diminuir o espaço entre ícone e contador */
        position: relative !important; /* Para controlar melhor o z-index */
    }
    
    /* Reduzir especificamente o tamanho dos contadores de record e registro */
    #record-counter,
    #days-counter {
        max-width: 60px !important; /* Mais estreito que o contador de apocalipse */
        padding: 2px !important; /* Padding menor */
        border-radius: 5px !important; /* Reduzido de 8px para 5px */
        font-size: 0.7em !important; /* Fonte menor */
    }
    
    /* Manter o contador de apocalipse com tamanho normal */
    #apocalypse-days-counter {
        max-width: 50px !important;
    }
    
    /* Ajustes específicos para posicionamento dos contadores */
    #apocalypse-days-counter {
        margin-left: 5px !important; /* Movido para a direita */
        margin-right: 10px !important;
        z-index: 15 !important; /* Z-index mais alto para ficar na frente */
    }
    
    #record-counter {
        margin-left: -40px !important; /* Reduzido um pouco para não ir muito longe */
        margin-right: 15px !important;
        z-index: 10 !important; /* Z-index intermediário */
    }

    #days-counter {
        margin-left: 20px !important; /* Contador de dias normal - posição central */
        margin-right: 15px !important;
        z-index: 12 !important; /* Z-index intermediário */
    }

    /* Reduzir o tamanho dos ícones nos contadores de record e registro */
    #days-counter .resource-icon,
    #record-counter .resource-icon {
        width: 14px !important; /* Reduzido de 16px para 14px */
        height: 14px !important;
        min-width: 14px !important;
    }
    
    /* Manter ícones normais para o contador de apocalipse */
    #apocalypse-days-counter .resource-icon {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
    }

    /* Ajustar o tamanho do texto nos contadores de record e registro */
    #days-counter .resource-value,
    #record-counter .resource-value {
        font-size: 0.8em !important; /* Reduzido de 0.9em para 0.8em */
    }
    
    /* Manter texto normal para o contador de apocalipse */
    #apocalypse-days-counter .resource-value {
        font-size: 0.9em !important;
    }

    /* Reorganizar o layout da barra de recursos para mover o contador de dias para a direita */
    .resources {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-areas: 
            "survivors supplies morale defenses"
            "menu menu menu days" !important;
        gap: 5px !important;
    }

    #survivors { grid-area: survivors; }
    #supplies { grid-area: supplies; }
    #morale { grid-area: morale; }
    #defenses { grid-area: defenses; }
    #days-counter { 
        grid-area: days; 
        justify-self: end !important;
        margin-right: 10px !important; /* Ajustado para trabalhar melhor com os outros contadores */
        margin-left: 10px !important; /* Adicionado para melhor espaçamento */
    }
    .menu-container { 
        grid-area: menu; 
        justify-self: start !important;
        margin-left: 5px !important;
    }

    /* Ajustes para os botões do menu */
    .menu-container {
        margin: 2px 0 !important;
    }

    .menu-buttons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 5px !important;
    }

    .menu-button {
        padding: 4px 8px !important;
        font-size: 0.75em !important;
        min-width: 0 !important;
        height: auto !important;
    }

    /* Ajustes para o card-container (não elevar tanto) */
    .card-container {
        margin-top: 0 !important; /* Removido o valor negativo que estava elevando demais */
        margin-bottom: 10px !important;
        padding: 10px !important;
        width: 100% !important; /* Garantir que ocupe toda a largura disponível */
        position: relative !important; /* Para posicionamento correto */
        z-index: 5 !important; /* Garantir que esteja acima de outros elementos */
    }
    
    /* Melhorar a interação com as cartas em dispositivos móveis */
    .card {
        touch-action: pan-x !important; /* Permitir apenas movimento horizontal para evitar conflitos com scroll */
        cursor: grab !important; /* Indicador visual de que pode ser arrastado */
        user-select: none !important; /* Evitar seleção de texto ao arrastar */
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important; /* Remover highlight ao tocar */
        width: 100% !important; /* Garantir que ocupe toda a largura disponível */
        max-width: 400px !important; /* Limitar largura máxima */
        margin: 0 auto !important; /* Centralizar */
        z-index: 5 !important; /* Garantir que esteja acima da área de toque */
    }
    
    /* Estilo para a área de toque que cobre toda a tela */
    #mobile-touch-area {
        display: none !important; /* Inicialmente oculto, será mostrado via JavaScript */
    }
    
    /* Quando a funcionalidade de toque móvel está ativa */
    body.mobile-touch-enabled #mobile-touch-area {
        display: block !important;
    }
    
    /* Ocultar botão de login em dispositivos móveis */
    #open-login {
        display: none !important;
    }
    
    /* Ocultar o texto grande do rodapé em dispositivos móveis */
    footer p {
        display: none !important;
    }
    
    /* Ajustes para a hotbar de itens */
    .hotbar {
        position: fixed !important;
        bottom: 120px !important; /* Elevado de 80px para 120px para posicionar ainda mais acima */
        z-index: 10 !important; /* Garantir que fique acima de outros elementos */
        background: rgba(0, 0, 0, 0.8) !important; /* Fundo mais escuro para destacar */
        display: none !important; /* Ocultar a hotbar em dispositivos móveis */
    }

    /* Reduzir o tamanho da fonte nas respostas */
    .card-text {
        font-size: 0.85em !important;
        line-height: 1.4 !important;
    }

    /* Ajustar os botões de escolha para centralizar na tela com fundo cinza */
    #choice-left, #choice-right {
        font-size: 0.85em !important; /* Reduzido para ficar menor conforme solicitado */
        padding: 15px 25px !important; /* Aumentado para melhorar área clicável */
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
        background-color: #1a1a1a !important; /* Cinza escuro já usado no site */
        border: 1px solid #3d2b2b !important;
        border-radius: 8px !important;
        white-space: nowrap !important; /* Evitar quebra de linha */
        max-width: 85% !important; /* Aumentado para melhor visualização */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        z-index: 1500 !important;
        min-width: 120px !important; /* Garantir largura mínima para facilitar o toque */
        min-height: 44px !important; /* Altura mínima recomendada para elementos tocáveis */
    }
    
    /* Posicionar os botões verticalmente no centro da tela */
    #choice-left {
        top: 45% !important; /* Movido mais para cima para melhor separação */
        margin-top: -10px !important; /* Margem negativa para afastar mais do centro */
    }
    
    #choice-right {
        top: 55% !important; /* Movido mais para baixo para melhor separação */
        margin-top: 10px !important; /* Margem positiva para afastar mais do centro */
    }
    
    /* Ajustes para a tela inicial (popup) em dispositivos móveis */
    .popup-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
    }
    
    .start-popup {
        padding: 20px !important;
        max-width: 95% !important;
        width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .start-popup h2 {
        font-size: 2em !important;
        margin-bottom: 15px !important;
    }
    
    .start-button {
        max-width: 100% !important;
        font-size: 1em !important;
        padding: 12px 16px !important;
        margin: 5px auto !important;
        width: 100% !important;
    }
    
    .popup-content {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Ajustes para os popups de perfil e mundo */
    .profile-popup > div, .world-popup > div {
        max-width: 95% !important;
        max-height: 85vh !important;
        padding: 20px 15px !important;
        overflow-y: auto !important;
    }
    
    .world-map-container {
        flex-direction: column !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    
    .world-map {
        width: 100% !important;
        height: auto !important;
        min-height: 300px !important;
        margin-top: 20px !important;
    }
    
    .location-info {
        width: 100% !important;
        margin-top: 15px !important;
    }
    
    .expansion-containers {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;    }

    /* Ad container for mobile popups */
    .mobile-ad-container {
        margin-top: 10px !important;
        text-align: center !important;
    }

    .mobile-ad-container iframe {
        width: 100% !important;
        height: 60px !important;
    }

    /* Bottom ad container for mobile screens */
    #mobile-bottom-ad {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        text-align: center !important;
        z-index: 1000 !important;
    }

    #mobile-bottom-ad iframe {
        width: 100% !important;
        height: 60px !important;
    }

    /* Adjust footer position above the ad */
    footer {
        bottom: 60px !important;
    }
}