/* --- Responsive Design --- */
@media (max-width: 750px) {
    .controls-content { 
        gap: 5px; 
        padding: 5px 5px; 
    }
    
    .slider-container, #progressBarContainer { 
        max-width: 50px; 
    }
    
    .volume-bar-container { 
        width: 25px; /* 音量條寬度為進度條最大寬度的一半 */
    }
    
    .control-btn, .blessing-btn {
        font-size: 0.9em; 
        min-width: 26px; 
        max-width: 32px; 
        height: 26px; 
        flex-basis: 26px;
    }
    
    /* Responsive input sizes */
    #gridInput { 
        width: 35px; 
        font-size: 0.9em; 
        height: 22px; 
    }
    
    #recursionInput, #passesInput { 
        width: 30px; 
        font-size: 0.9em; 
        height: 22px; 
    } /* Make Rec/Pass same width */
    
    #timeDisplay, #fpsDisplay, #screensDisplay, #passesDisplay { 
        font-size: 0.8em; 
        min-width: 35px; 
    }
}

@media (max-width: 550px) {
    .controls-content { 
        gap: 3px; 
        padding: 4px 3px; 
        flex-wrap: wrap; 
        justify-content: center; 
    }
    
    .slider-container, #progressBarContainer { 
        max-width: 70px; 
        min-width: 40px; 
        flex-basis: 70px; 
    }
    
    .volume-bar-container { 
        width: 35px; /* 音量條寬度為進度條最大寬度的一半 */
    }
    
    .control-btn, .blessing-btn {
        font-size: 0.8em; 
        min-width: 22px; 
        max-width: 28px; 
        height: 22px; 
        flex-basis: 24px;
    }
    
    /* Responsive input sizes */
    #gridInput { 
        width: 28px; 
        font-size: 0.8em; 
        height: 20px; 
        flex-basis: 30px; 
    }
    
    #recursionInput, #passesInput { 
        width: 25px; 
        font-size: 0.8em; 
        height: 20px; 
        flex-basis: 25px; 
    } /* Make Rec/Pass same width and basis */
    
    #timeDisplay, #fpsDisplay, #screensDisplay, #passesDisplay { 
        font-size: 0.75em; 
        min-width: 30px; 
        flex-basis: 40px; 
        text-align: center; 
    }
    
    #timeDisplay { 
        flex-basis: 60px; 
    }
}
