/* Info Panel Bottom Sheet */
#info-overlay .settings-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    border-radius: 12px;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

@media (max-width: 768px) {
    #info-overlay .settings-panel {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        margin: 0;
    }

    #info-overlay.visible .settings-panel {
        transform: translateY(0);
    }
}