/* mobile.css - Styles for Stellar Dominion on smaller screens */

/* Apply these styles on screens 768px wide or smaller */
@media (max-width: 768px) {

    /* --- General Layout Adjustments --- */
    body {
        /* Prevent horizontal scrolling on mobile */
        overflow-x: hidden;
    }

    #game-main {
        /* Stack the main content below the navigation bar */
        flex-direction: column;
    }

    #main-content {
        /* Reduce padding on smaller screens */
        padding: 0.5rem;
    }

    /* --- Header Adjustments --- */
    #game-header {
        /* Stack header items vertically */
        flex-direction: column;
        gap: 0.5rem; /* Add space between items */
        padding: 0.5rem;
    }

    #resources-display {
        /* Allow resource icons to wrap onto multiple lines */
        flex-wrap: wrap;
        justify-content: center; /* Center the icons */
        gap: 0.25rem;
    }

    /* --- Navigation Bar --- */
    nav.w-48 {
        /* Make nav bar full width and horizontal */
        width: 100%;
        height: auto;
        padding: 0.25rem;
        /* Create a scrollable horizontal list for buttons */
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        /* Hide scrollbar for a cleaner look */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* Hide scrollbar for Chrome, Safari, and Opera */
    nav.w-48::-webkit-scrollbar {
        display: none;
    }

    nav.w-48 .nav-button {
        /* Ensure buttons don't shrink */
        flex-shrink: 0;
        padding: 0.5rem 0.75rem; /* Adjust padding for smaller buttons */
        font-size: 0.875rem; /* Slightly smaller font */
    }

    /* --- Modal Adjustments (Ship Designer, Crafting) --- */
    #ship-designer-modal .glass-pane,
    .craft-modal__panel {
        width: 95%;
        height: 90%;
        max-width: 100%;
    }

    #ship-designer-content {
        flex-direction: column;
    }

    /* --- Notification Container --- */
    #notification-container {
        /* Make notifications wider and centered at the top */
        width: 90%;
        left: 5%;
        right: 5%;
    }

    /* --- View-Specific Adjustments --- */
    /* Make grid layouts in views single-column */
    .grid {
        grid-template-columns: 1fr !important;
    }
}