/* Inherit body styles from root for consistency, or override if needed */
body {
    font-family: 'Arial', sans-serif; /* Example font */
    display: flex;
    flex-direction: column;
    /* align-items: center; */ /* Removed to allow header/footer full width */
    margin: 0;
    min-height: 100vh; /* Ensure body takes full viewport height */
    background-color: #f0f0f0; /* Light gray background for the page */
}

main.flex-grow {
    display: flex; /* Ensure main also uses flex for centering its content */
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative; /* Ensure stacking context for overlay */
}

.game-container {
    border: 2px solid #333;
    background-color: #fff; /* White background for the game area */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    /* Max width to prevent it from becoming too large on wide screens */
    max-width: 90%; 
    width: auto; /* Allow it to shrink */
    position: relative; /* Ensure stacking context for overlay elements if any inside */
}

@media (min-width: 768px) { /* Corresponds to 'md' or typical desktop */
    .game-container {
        max-width: 840px; /* Increased for a larger canvas (e.g., 800px + padding) */
    }
}

#gameCanvas {
    display: block; /* Remove extra space below canvas */
    /* Canvas dimensions will be set in JS, but provide a fallback or max */
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    background-color: #2c2c2c; /* Dark background for the canvas itself */
}

.game-info {
    font-family: 'Consolas', 'Courier New', monospace;
}

#gameOverScreen p {
    margin-bottom: 0.5rem;
}

#restartButton {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Mobile Controls Styling */
#mobileControls button {
    font-size: 1.5rem; /* Make buttons larger for touch */
    font-weight: bold;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#mobileControls button:active {
    transform: scale(0.95);
    background-color: #bbb; /* Darker when pressed */
}

/*
.hidden {
    display: none !important; // Important to override other display properties
}
*/

/* Dark mode specific styles for game elements if not covered by Tailwind */
.dark .game-container {
    border-color: #555;
    background-color: #2d2d2d; /* Darker background for game container in dark mode */
}

.dark #gameCanvas {
    background-color: #1e1e1e; /* Even darker for canvas in dark mode */
    border-color: #444;
}

.dark #mobileControls button {
    border-color: #555;
}

.dark #mobileControls button:active {
    background-color: #4a4a4a;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .game-container {
        padding: 0.75rem; /* p-3 */
    }
    h1 {
        font-size: 1.5rem; /* text-2xl */
    }
    .game-info span {
        font-size: 0.875rem; /* text-sm */
    }
    #mobileControls button {
        font-size: 1.25rem; /* Slightly smaller for very small screens */
        padding: 0.5rem; /* p-2 */
    }
    #restartButton {
        padding: 0.5rem 1rem; /* py-2 px-4 */
        font-size: 0.875rem; /* text-sm */
    }
}

/* Explicitly hide mobile controls on screens sm (640px) and wider */
@media (min-width: 640px) { 
    #mobileControls {
        display: none !important;
    }
}