/* Mobile Optimization */
@media (max-width: 600px) {
    :root {
        --cell-size: 45px;
        /* Smaller cells on mobile */
    }

    body {
        padding: 0;
        align-items: flex-start;
        /* Allow scrolling if needed, but aim to fit */
    }

    #app {
        padding: 10px;
        gap: 10px;
        height: 100vh;
        /* Use full height */
        max-height: -webkit-fill-available;
        /* Fix for iOS Safari */
    }

    main {
        gap: 10px;
        overflow-y: auto;
        /* Try to fit everything without main scroll */
        display: flex;
        flex-direction: column;
    }

    #target-container {
        padding: 5px;
    }

    #target-container h2 {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }

    #box-wrapper {
        width: fit-content;
        /* Hug grid content */
        height: auto;
        /* aspect-ratio: 1; Removed to allow hugging grid height */
        max-width: 350px;
        /* Limit max size on mobile */
    }

    #box-container {
        padding: 10px;
        width: fit-content;
        /* Hug grid content, don't expand */
        height: auto;
    }

    /* Adjust grid gap for mobile if needed */
    #box-grid {
        gap: 2px;
    }

    #tray-wrapper {
        min-height: auto;
        height: auto;
        margin-bottom: 60px;
        flex-shrink: 0;
    }

    #tray-container {
        padding: 8px;
        gap: 8px;
        --cell-size: 30px;
        min-height: auto;
    }

    /* Ensure pieces in tray don't cause vertical overflow */

    /* Header optimization for mobile - hide title but keep level indicator */
    header h3 {
        display: none;
    }

    #level-indicator {
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    /* Hide "Daily Challenge" text on mobile - calendar button indicates it */
    #level-indicator.daily-mode {
        display: none;
    }

    .header-controls {
        flex: 1;
        justify-content: flex-end;
        gap: 8px;
    }
}