/* --- Responsive Design --- */
@media (max-width: 767px) {
    #ui-controls {
        flex-wrap: nowrap;          /* Force a single row */
        overflow-x: auto;           /* Allow horizontal scrolling if needed */
        padding: 8px;
        gap: 8px;
        bottom: 10px;

        /* Hide scrollbar for a cleaner look */
        -ms-overflow-style: none;   /* IE and Edge */
        scrollbar-width: none;      /* Firefox */
    }
    #ui-controls::-webkit-scrollbar { display: none; } /* Chrome, Safari, Opera */

    #repick-emoji-btn,
    #download-btn,
    #upload-btn,
    #undo-btn,
    #redo-btn,
    #multiplayer-btn,
    #layers-btn,
    #clear-canvas-btn,
    #share-painting-btn {
        width: 40px;
        height: 40px;
        font-size: 24px;
        border-radius: 10px;
    }

    #undo-btn, #redo-btn { font-size: 22px; }

    #opacity-toggle {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    #brush-mode-toggle {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    /* Fullscreen modals unchanged */
    #emoji-picker-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    #timelapse-controls {
        border-radius: 14px;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 10px 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    #timelapse-controls .slider-container {
        justify-content: flex-start;
        width: auto;
    }
    #timelapse-controls .timelapse-option-group {
        width: auto;
    }
}