/* MOBILE OPTIMIZATIONS para doomscrolling existente */

/* Prevenir scroll horizontal en móvil */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ELIMINAR SCROLLBARS DUPLICADAS */
    * {
        /* Quitar overflow de todos los elementos internos */
        overflow-x: hidden !important;
    }

    /* Solo body puede hacer scroll vertical */
    body * {
        overflow-y: visible !important;
    }

    /* Asegurar que containers no tengan scroll propio */
    .doomscroll-container,
    #doomscroll-container,
    #exhibition-container {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Quitar scrollbar de iframes/divs internos */
    iframe, 
    .media-iframe,
    .info-popup {
        overflow: hidden !important;
    }

    /* Ajustar elementos para que no se salgan */
    .media-element {
        max-width: 85vw !important;
        max-height: 85vh !important;
    }

    /* Ajustar tamaño de elementos grandes */
    .media-element[style*="width"] {
        width: clamp(100px, 80vw, 400px) !important;
        height: auto !important;
    }

    /* Reducir rotación en móvil */
    .media-element {
        transform: rotate(0deg) !important;
    }

    /* Controles más pequeños */
    .controls {
        bottom: 10px !important;
        left: 10px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .control-btn {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }

    /* Info panel más pequeño */
    .info-panel {
        max-width: 90vw !important;
        font-size: 10px !important;
        right: 10px !important;
    }

    /* Status indicator más pequeño */
    .status-indicator {
        font-size: 11px !important;
        bottom: 60px !important;
        left: 10px !important;
    }

    /* Mouse tracker oculto en móvil */
    .custom-cursor,
    .mouse-tracker {
        display: none !important;
    }

    /* Botón de info más pequeño */
    .info-trigger-btn {
        width: 45px !important;
        height: 45px !important;
        font-size: 22px !important;
        bottom: 60px !important;
        right: 10px !important;
    }
}