:root {
            --control-height: 48px;
            --primary-color: #76d94f;
            --hover-color: #5cb031;
            --text-color: #ffffff;
            --bg-color: rgba(0, 0, 0, 0.7);
            --progress-height: 4px;
            --progress-hover-height: 6px;
            --hide-delay: 10s;
        }

        @font-face {
            font-family: 'Neue Machina';
            src: url('https://player.rms.group/fonts/NeueMachina-Bold.woff2') format('woff2'),
                 url('https://player.rms.group/fonts/NeueMachina-Bold.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Neue Machina';
            src: url('https://player.rms.group/fonts/NeueMachina-Bold.woff2') format('woff2'),
                 url('https://player.rms.group/fonts/NeueMachina-Bold.woff') format('woff');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        body {
            font-family: 'Neue Machina', -apple-system, BlinkMacSystemFont, sans-serif;
        }


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html, body {
            height: 100%;
            background: #000;
            overflow: hidden;
        }

        .video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
            touch-action: manipulation;
            cursor: pointer;

        }

        /* Фикс для мобильных браузеров */
        @supports (-webkit-touch-callout: none) {
            .video-container {
                height: -webkit-fill-available; /* Для iOS */
            }
        }
        /* Фикс для Safari */
        @supports (overflow: overlay) {
            .video-container {
                overflow: overlay;
            }
        }

        /* Фикс для iOS */
        @supports (-webkit-touch-callout: none) {
            .video-container {
                height: 100vh;
                height: -webkit-fill-available;
            }
        }

        #video {
            width: 100%;
            height: auto;
            max-height: 100%;
            object-fit: contain;
            perspective: 1000px;
            position: relative; /* Важно! */
            z-index: 1; /* Должен быть ниже интерфейса (z-index: 15) */
        }

        .video-container:fullscreen,
        .video-container:-webkit-full-screen,
        .video-container:-moz-full-screen,
        .video-container:-ms-fullscreen {
            width: 100% !important;
            height: 100% !important;
            background: #000;
        }

        .video-container:fullscreen #video,
        .video-container:-webkit-full-screen #video,
        .video-container:-moz-full-screen #video,
        .video-container:-ms-fullscreen #video {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain;
        }

        /* Применяем Neue Machina к конкретным элементам */
        .session-title,
        .live-text,
        .playlist-item,
        .playlist-back,
        .dropdown-item {
            font-family: 'Neue Machina', sans-serif;
            font-weight: 700; /* Bold для Neue Machina */
        }

        .session-title {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 10px 15px 30px;
            color: var(--text-color);
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
            z-index: 5;
            opacity: 1;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .video-container:not(.show-controls) .session-title {
            opacity: 0;
        }


        .progress-container {
            position: absolute;
            bottom: calc(var(--control-height) + 3px); /* Ставим прямо над контрол-баром */
            left: 0;
            right: 0;
            height: -4px;
            background: transparent;
            cursor: pointer;
            z-index: 40;
            opacity: 0;
            transition: all 0.3s;
            touch-action: none; /* Для лучшего управления на тач-устройствах */
            overflow: visible;
            margin: 0 8px; /* Добавляем отступы по бокам */
            background: rgba(255, 255, 255, 0.0);
        }

        .progress-container:hover {
            height: 10px;
        }

        .progress-container:hover #progress-bar {
            height: 6px; /* Утолщаем линию при наведении */
        }

        .progress-container:hover #progress-bar::after {
            top: -12px;
            bottom: -12px;
        }

        .progress-container.dragging {
            cursor: grabbing;
        }

        .progress-container.dragging #progress-bar::before {
            transform: translateY(-50%) translateX(50%) scale(1.8);
            opacity: 1 !important;
            background: #fff;
            box-shadow: 0 0 0 3px var(--primary-color);
            transition: none;
        }

        .progress-container.dragging #progress-bar {
            transition: none !important;
            height: 6px;
            background: #fff;
        }

        #progress-bar::after {
            content: '';
            position: absolute;
            top: -8px;
            bottom: -8px;
            left: 0;
            right: 0;
            background: transparent;

        }

        #progress-bar::before {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%) translateX(50%);
            width: 12px;
            height: 12px;
            background: var(--primary-color);
            border-radius: 50%;
            opacity: var(--thumb-opacity, 0);
            transition: opacity 0.2s ease, transform 0.2s ease;
            z-index: 2;
            box-sizing: border-box;
        }
        .progress-container:hover #progress-bar::before {
            opacity: 1;
            transform: translateY(-50%) translateX(50%) scale(1.2);
        }

        .progress-container:active #progress-bar::before {
            transform: translateY(-50%) translateX(50%) scale(1.5);
            opacity: 1 !important;
        }


        #progress-bar {
            height: 4px;
            background: var(--primary-color);
            width: calc(100% - 6px); /* Учитываем место для кружка */
            transition: width 0.1s linear;
            position: relative;
            margin-top: 7px; /* Опускаем линию прогресса */
            margin-left: 3px; /* Центрируем с учетом отступов */
            margin-right: 3px;
            --thumb-opacity: 0;
        }

        .progress-container:hover #progress-bar::before,
            .progress-container.dragging #progress-bar::before {
                right: 0;
                transform: translateY(-50%) translateX(50%) scale(1.2);
            }

            /* Особые стили для мобильных устройств */
            @media (max-width: 768px) {
                .progress-container {
                    margin: 0 10px; /* Больше отступов на мобильных */
                }

                #progress-bar::before {
                    width: 10px;
                    height: 10px;
                }
            }

        #buffer-bar {
            position: absolute;
            height: 4px;
            background: rgba(255, 255, 255, 0.0);
            width: 0%;
            top: calc(50% - 2px);
            left: 0;
            z-index: -1;
            margin-top: 4px; /* Опускаем линию прогресса */
        }

        .controls-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: var(--control-height);
            background: linear-gradient(to top, var(--bg-color) 20px, rgba(0,0,0,0.9) 100%);
            display: flex;
            align-items: center;
            padding: 0 15px;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 30;
            transform: translateZ(0); /* Фикс для рендера на iOS */
        }

        .video-container.show-controls .controls-bar,
        .video-container.show-controls .progress-container,
        .video-container.show-controls .session-title {
            opacity: 1;
        }

        <!-- В разделе стилей добавим: -->
        .language-icon, .quality-icon {
            width: 24px;
            height: 24px;
            background: transparent;
            color: var(--text-color);
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            border: 1px solid var(--text-color);
            transition: all 0.2s ease;
        }

        #quality-btn {
            background: transparent !important;
            border: none;
            padding: 0;
            margin: 0 5px;
            cursor: pointer;
            transition: transform 0.2s ease;
            border-radius: 4px; /* Закругление как у audio-btn */
            overflow: hidden; /* Важно для сохранения скругления */
        }

        #quality-btn .quality-icon {
            width: 32px;
            height: 24px;
            border-radius: 4px; /* Закругление */
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        @media (max-width: 768px) {
            /* Выравниваем размеры кнопок качества и языка */
            #quality-btn .quality-icon,
            #audio-btn .language-icon {
                min-width: 24px; /* На мобилах делаем уже */
                height: 24px;
                font-size: 8px;
            }

            /* Убираем лишние отступы у кнопки качества */
            #quality-btn {
                margin: 0 2px; /* Такой же отступ как у кнопки языка */
            }

            /* Делаем кнопки одинаковой ширины */
            .quality-icon {
                min-width: 24px; /* Как у language-icon */
                max-width: 24px; /* Фиксируем ширину */
            }
        }



        #audio-btn, #quality-btn {
            transition: transform 0.2s ease;
        }

        /* Состояние при наведении (неактивная кнопка) */
        #audio-btn:hover .language-icon:not(.active),
        #quality-btn:hover .quality-icon:not(.active) {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Активное состояние (когда язык/качество выбраны) */
        .language-icon.active,
        .quality-icon.active {
            background: var(--primary-color) !important;
            color: #000 !important;
            border-color: var(--primary-color) !important;
        }

        /* Состояние при наведении на активную кнопку */
        #audio-btn:hover .language-icon.active,
        #quality-btn:hover .quality-icon.active {
            background: var(--hover-color) !important;
            transform: scale(1.1);
        }

        /* Состояние при нажатии */
        #audio-btn:active .language-icon,
        #quality-btn:active .quality-icon {
            transform: scale(0.95);
        }

        /* Анимация для выбранного состояния */
        .language-icon.active, .quality-icon.active {
            animation: pulse-selected 0.5s ease;
        }

        @keyframes pulse-selected {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .quality-icon {
            min-width: 32px; /* Шире, чем высота */
            height: 24px;
            background: transparent;
            color: var(--text-color);
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Neue Machina', sans-serif;
            font-weight: 700;
            font-size: 9px; /* Уменьшаем размер шрифта */
            letter-spacing: 0.5px;
            border: 1px solid var(--text-color);
            padding: 0 4px; /* Больше отступ по бокам */
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 40px; /* Максимальная ширина для очень длинных значений */
            transition: none;
        }

        .quality-icon.active {
            background: var(--primary-color);
            color: #000;
            border-color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .quality-icon {
                min-width: 28px;
                height: 20px;
                font-size: 8px;
                padding: 0 3px;
            }

            #quality-menu .dropdown-item {
                font-size: 10px;
                padding: 6px 10px;
            }
        }

        /* Для пунктов меню качества */
        #quality-menu .dropdown-item {
            font-family: 'Neue Machina', sans-serif;
            font-weight: 700;
            font-size: 11px;
            padding: 8px 12px;
        }

        .language-icon:hover, .quality-icon:hover {
            background: transparent !important;
            border-color: var(--text-color) !important;
        }

        /* Активное состояние должно менять только цвет текста/иконки */
        #audio-btn.active .language-icon,
        #quality-btn.active .quality-icon {
            background: var(--primary-color);
            color: #000;
            border-color: var(--primary-color);
        }

        /* Но сама кнопка не должна иметь фона */
        #audio-btn.active,
        #quality-btn.active {
            background: transparent !important;
        }

        /* Стили для кнопки Play */
        #play-btn:hover {
            background: var(--hover-color) !important;
        }

        #play-btn:active,
        #play-btn.active {
            background: var(--primary-color) !important;
            color: #000 !important;
        }

        #volume-btn, {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            margin: 0 2px;
            color: var(--primary-color)
        }

        /* Стили для кнопки громкости */
        #volume-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--primary-color)
        }

        #volume-btn:active,
        #volume-btn.active {
            background: transparent !important; /* Прозрачный фон */
            color: #000 !important;
            transform: scale(0.95);
            color: white
        }

        /* Для мобильных устройств (тач) */
        @media (max-width: 768px) {
            #play-btn:active,
            #volume-btn:active {
                transform: scale(0.95);
                color: #000 !important;
                color: white
            }
        }

        /* Иконки внутри кнопок */

        #volume-btn i {
            color: white !important;
            font-size: 16px;
            transition: color 0.2s;
            color: white
        }


        }

        /* Эффект при наведении */
        #volume-btn:hover i {
            color: var(--primary-color)
        }

        /* Для кнопки языка */
        #audio-btn.active:hover .language-icon,
        #audio-btn.active:active .language-icon {
            background: var(--primary-color) !important;
            color: #000 !important;
            border-color: var(--primary-color) !important;
        }

        /* Для кнопки качества */
        #quality-btn.active:hover .quality-icon,
        #quality-btn.active:active .quality-icon {
            background: var(--primary-color) !important;
            color: #000 !important;
            border-color: var(--primary-color) !important;
        }

        /* Общие стили анимации */
        #audio-btn,
        #quality-btn {
            transition: transform 0.2s ease;
        }

        /* Эффект при наведении */
        #audio-btn:hover,
        #quality-btn:hover {
            transform: scale(1.1);
        }

        /* Эффект при нажатии */
        #audio-btn:active,
        #quality-btn:active {
            transform: scale(0.95);
        }

        /* Для активного состояния (когда уже выбрано) */
        #audio-btn.active .language-icon,
        #quality-btn.active .quality-icon {
            transform: scale(1);
            background: var(--primary-color);
            color: #000;
            border-color: var(--primary-color);
        }

        /* Анимация иконок внутри */
        .language-icon,
        .quality-icon {
            transition: all 0.2s ease;
        }

        /* Для мобильных устройств */
        @media (max-width: 768px) {
            #audio-btn:active,
            #quality-btn:active {
                transform: scale(0.95);
            }
        }

        /* Анимация выпадающих меню */
        .dropdown-content {
            transition: opacity 0.2s ease, transform 0.2s ease;
            opacity: 0;
            transform: translateY(10px);
            display: block;
        }

        .dropdown.active .dropdown-content {
            opacity: 1;
            transform: translateY(0);
        }

        /* Анимация пунктов меню */
        .dropdown-item {
            transition: all 0.15s ease;
        }

        .dropdown-item:hover {
            transform: translateX(5px);
        }


        .language-icon.active, .quality-icon.active {
            background: var(--primary-color);
            color: #000;
            border-color: var(--primary-color);
        }

        /* Убираем стандартные стили для иконки шестеренки */
        #quality-btn i {
            display: none;
        }

        .left-controls {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .right-controls {
            display: flex;
            align-items: center;
        }

        .control-btn {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 16px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }



        /* Стили для активных кнопок */
        .control-btn.active {
            background-color: var(--primary-color) !important;
            color: #000 !important;
        }

        .center-space {
            flex: 1; /* Занимает все свободное пространство */
            min-width: 10px; /* Минимальный отступ */
        }

        @media (max-width: 768px) {
            .live-elements {
                display: none; /* Скрываем "Прямой эфир" на мобильных */
            }

            .left-controls {
                flex: 1;
                overflow: hidden;
            }
        }


        @media (max-width: 768px) and (orientation: portrait) {
            .time-display {
                position: static;
                transform: none;
                left: auto;
                bottom: auto;

                padding: 0 4px;
                margin-left: 2px;
                display: none !important;
                order: 1;
                flex: 0 0 auto;
                font-size: 10px;
                border-radius: 3px;
                white-space: nowrap;
            }

            .time-display.show-time {
                display: block !important;
                animation: fadeIn 0.3s ease;
            }

            .control-btn {
                flex-shrink: 0 !important; /* Запрещаем сжатие кнопок */
            }

            .controls-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 5px !important; /* Уменьшаем отступы */
            }
            .left-controls {
                flex: 0 1 auto !important; /* Не растягиваем */
                min-width: 0; /* Разрешаем сжатие */
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }

            .right-controls {
                flex: 1;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                flex-shrink: 0 !important; /* Запрещаем сжатие правых кнопок */
            }

            .live-elements {
                position: absolute;
                left: 15px;
                bottom: calc(var(--control-height) + 40px); /* Размещаем над контрол-баром */
                display: flex;
                align-items: center;
                background: rgba(0, 0, 0, 0.7);
                padding: 6px 10px;
                border-radius: 4px;
                z-index: 20;
                cursor: pointer;
                transition: all 0.3s;
            }

            .live-text {
                color: var(--text-color);
                font-size: 14px;
                white-space: nowrap;
                margin-left: 8px;
                font-family: 'Neue Machina', sans-serif;
                font-weight: 700;
                text-shadow:
                    1px 1px 2px rgba(0,0,0,0.8),
                    -1px -1px 2px rgba(0,0,0,0.8),
                    1px -1px 2px rgba(0,0,0,0.8),
                    -1px 1px 2px rgba(0,0,0,0.8);
            }

            .wifi-btn {
                margin-right: 0; /* Убираем отступ справа у кнопки Wi-Fi */
                padding: 0 3px; /* Уменьшаем внутренние отступы */margin: 0;
                position: relative;
                z-index: 1;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @media (min-width: 769px), (orientation: landscape) {
            .time-display {
                position: static;
                transform: none;
                left: auto;
                bottom: auto;

                padding: 2px 8px;
                margin-left: 6px;
                order: 0;
                display: none !important;
                border-radius: 4px;
            }

            .time-display.show-time {
                display: block !important;
            }
        }

        /* Для ПК версии */
        @media (min-width: 769px), (orientation: landscape) {
            .time-display {
                position: static;
                transform: none;
                left: auto;
                bottom: auto;

                padding: 2px 8px;
                margin: 0 10px;
                order: 0;
                display: none !important;
                border-radius: 4px;
            }

            .time-display.show-time {
                display: block !important;
            }
        }

        /* Добавьте новые стили для активных кнопок */
        .control-btn.active i {
            color: var(--primary-color) !important;
        }

        /* Подсветка при наведении */
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Добавляем исключения для кнопок языка и качества */
            #audio-btn:hover,
            #quality-btn:hover {
                background: transparent !important;
            }

        /* Убираем активный стиль для этих кнопок */
        #audio-btn.active,
        #quality-btn.active {
            background-color: transparent !important;
        }

        /* Стили для активной кнопки wifi */
        .wifi-btn.active {
            color: var(--primary-color) !important;
        }

        .wifi-btn.active i {
            color: var(--primary-color) !important;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        /* Стили для неактивной кнопки wifi */
        .wifi-btn.inactive {
            color: var(--text-color) !important;
            opacity: 0.7;
        }

        .control-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        #playlist-toggle {
            position: absolute;
            top: 60px;
            right: 20px;
            z-index: 1000;
            background: var(--bg-color);
            color: var(--text-color);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            opacity: 0; /* Меняем с 1 на 0 - изначально скрыта */
            transition: opacity 0.3s, transform 0.2s, background-color 0.2s;
            -webkit-tap-highlight-color: transparent; /* Убирает серый фон при тапе (iOS) */
            touch-action: manipulation; /* Улучшает отзывчивость на тач-устройствах */
            pointer-events: none; /* Чтобы не было кликов когда кнопка невидима */
        }

        .video-container.show-controls #playlist-toggle {
            opacity: 1; /* Показываем при активных контролах */
            pointer-events: auto; /* Включаем кликабельность */
            transition-delay: 0.1s; /* Появляется чуть позже других элементов */
        }

        #playlist-toggle:hover {
            background: var(--primary-color) !important;
            transform: scale(1.1);
        }

        .video-container.show-controls .mobile-center-controls {
            opacity: 1;
        }

        /* Уровень 1: Список залов (200px) */
        #hall-level {
            width: 200px;
        }

        /* Уровень 2: Список сессий (300px) */
        #session-level {
            width: 300px;
        }

        #playlist {
            position: absolute;
            top: 70px;
            right: 20px;
            background: rgba(0, 0, 0, 0.95);
            color: white;
            padding: 10px 0;
            border-radius: 8px;
            z-index: 999;
            width: 200px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.1);
            opacity: 1;
            visibility: visible;
            transform: none !important;
            transition: none !important;
            min-width: 200px; /* Минимальная ширина */
        }

        .playlist-error {
            position: fixed;
            top: 0;
            right: 0;
            background: #f00;
            color: white;
            padding: 10px;
            z-index: 10000;
        }

        #playlist.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        @media (max-width: 768px) and (orientation: portrait) {
            #playlist {
                width: 95% !important; /* Увеличиваем ширину, чтобы уменьшить отступы */
                max-height: 70vh !important;
                top: 60px !important;
                left: 50% !important;
                right: auto !important; /* Убираем фиксированное правое положение */
                transform: translateX(-50%) !important;
                padding: 0 !important; /* Убираем внутренние отступы */
                margin: 0 !important;
            }

            /* Стили для уровня залов */
            #hall-level {
                width: 100% !important;
                padding: 0 8px !important; /* Небольшие боковые отступы */
            }

            /* Стили для уровня сессий */
            #session-level {
                width: 100% !important;
                padding: 0 8px !important; /* Такие же отступы, как у залов */
            }

            .playlist-item {
                padding: 10px 8px !important; /* Уменьшаем отступы */
                margin: 0 !important;
            }

            .playlist-back {
                padding: 10px 8px !important; /* Синхронизируем с отступами элементов */
            }
        }

        .session-name {
            flex-grow: 1;
        }

        .session-status {
            font-size: 10px;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Neue Machina', sans-serif;
        }

        .session-status.live {
            background: #ff0000;
            color: #white;
            animation: pulse 1.5s infinite;
        }

        .session-status.off {
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }



        #playlist:not(.active) {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .playlist-item {
            padding: 12px 15px;
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.3);
            font-family: 'Neue Machina', sans-serif;
            color: var(--text-color);
            transition: background 0.2s;
            border-radius: 4px;
            -webkit-tap-highlight-color: transparent; /* Убирает серый фон при тапе (iOS) */
            touch-action: manipulation; /* Улучшает отзывчивость на тач-устройствах */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .playlist-item[data-active="true"] {
            position: relative;
            padding-right: 50px;
        }

        .playlist-item[data-active="true"]::after {
            content: "LIVE";
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;
            background: var(--primary-color);
            color: #000;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 3px;
            animation: pulse 1.5s infinite;
            font-family: 'Neue Machina', sans-serif;
        }



        .playlist-item i {
            display: none; /* Скрываем иконки */
        }

        .playlist-item:last-child {
            border-bottom: none;
        }

        .playlist-item:hover {
            background: var(--hover-color);
        }

        #mobile-play-btn {
            position: relative; /* Для точного позиционирования иконки */
            width: 60px;
            height: 60px;
            border-radius: 50%; /* Делаем идеальный круг */
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Центрирование иконки */
        #mobile-play-btn i.fas {
            position: relative;
            left: 2px; /* Корректировка для треугольной иконки */
            font-size: 35px;
            color: white;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Для состояния паузы */
        #mobile-play-btn i.fa-pause {
            left: 0; /* Убираем смещение для иконки паузы */
        }

        #mobile-backward-btn,
        #mobile-forward-btn {
            width: 38px !important;
            height: 38px !important;
            font-size: 24px !important;
            opacity: 0.7;
            position: relative; /* Для возможного смещения */
        }

        /* Раздвигаем кнопки от Play */
        #mobile-backward-btn {
            margin-right: 50px !important; /* Больший отступ справа */
        }

        #mobile-forward-btn {
            margin-left: 50px !important; /* Больший отступ слева */
        }

        #mobile-backward-btn i.fas {
            position: relative;
            left: -2px; /* Корректировка для треугольной иконки */
            font-size: 20px;
            color: white;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #mobile-forward-btn i.fas {
            position: relative;
            left: 2px; /* Корректировка для треугольной иконки */
            font-size: 20px;
            color: white;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 768px) {
            /* Увеличиваем кнопку Play */
            #mobile-play-btn {
                width: 60px !important;
                height: 60px !important;
                font-size: 28px !important;
            }

            /* Уменьшаем кнопки перемотки */
            #mobile-backward-btn,
            #mobile-forward-btn {
                width: 38px !important;
                height: 38px !important;
                font-size: 24px !important;
                opacity: 0.7; /* Делаем менее заметными */
            }

            /* Раздвигаем кнопки от Play */
            #mobile-backward-btn {
                margin-right: 40px !important; /* Больший отступ справа */
            }

            #mobile-forward-btn {
                margin-left: 40px !important; /* Больший отступ слева */
            }

            /* Центрируем кнопки в контейнере */
            .mobile-center-controls {
                gap: 10px !important;
            }
        }

        /* Индикатор загрузки */
        .video.loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            margin: -20px 0 0 -20px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s ease-in-out infinite;
            z-index: 10;
            }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .playlist-level {
            max-height: 60vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
            overscroll-behavior: contain; /* Чтобы не скроллилась вся страница */
            transition: opacity 0.3s ease;
        }

        #back-to-halls {
            padding: 12px 15px;
            cursor: pointer;
            color: var(--primary-color);
            border-bottom: 1px solid rgba(255,255,255,0.3);
            display: flex !important;
            opacity: 1 !important;
            visibility: visible !important;
            will-change: transform; /* Оптимизация для анимаций */
            align-items: center;
            gap: 8px;
            transition: background 0.2s;
        }

        #back-to-halls:hover {
            background: var(--hover-color);
            color: var(--text-color);
        }

        #back-to-halls i {
            font-size: 14px;
        }

        .playlist-level.loading {
            opacity: 0.7;
        }

        /* Индикатор загрузки для плейлиста */
        .playlist-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--text-color);
            font-family: 'Neue Machina', sans-serif;
            font-size: 12px;
        }

        .playlist-item {
            padding: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.3);
            cursor: pointer;
        }

        .playlist-item:hover {
            background: var(--hover-color);
        }

        .playlist-item.active {
            background: var(--primary-color);
            color: #000;
            font-weight: 700;
            position: relative;
            padding-right: 50px; /* Оставляем место для индикатора */
        }

        /* Добавляем в секцию стилей */
        .playlist-item.inactive {
            filter: grayscale(100%);
            opacity: 0.7;
            pointer-events: none; /* Отключаем клики по неактивным элементам */
        }

        .playlist-item.inactive .session-name {
            color: rgba(255, 255, 255, 0.5);
        }

        /* Убираем анимацию pulse для неактивных элементов */
        .playlist-item:not(.inactive):hover {
            background: var(--hover-color);
        }

        /* Добавим в раздел стилей */
        .playlist-item.active::after {
            content: "LIVE";
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;
            background: var(--primary-color);
            color: #000;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 3px;
            animation: pulse 1.5s infinite;
            font-family: 'Neue Machina', sans-serif;
        }



        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        .playlist-back {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 15px;
            cursor: pointer;
            color: var(--primary-color);
            border-bottom: 1px solid rgba(255,255,255,0.4);
            font-family: 'Neue Machina', sans-serif;
            font-weight: 700;
        }

        .back-container {
            display: flex;
            align-items: center;
            gap: 1px; /* Уменьшаем расстояние между стрелкой и номером */
        }

        .playlist-back:hover {
            background: color-mix(in srgb, var(--back-button-color) 20%, transparent);
            color: var(--back-button-color); !important;
        }

        .playlist-back i {
            font-size: 14px;
            margin-right: 2px; /* Добавляем небольшой отступ справа */
            transition: all 0.2s ease;
        }

        .playlist-back:hover i {
            color: var(--text-color) !important;
        }

        .hall-number {
            flex-grow: 1;
            text-align: left;
            font-size: 18px; /* Сделаем шрифт немного меньше */
            letter-spacing: 0.5px; /* Улучшаем читаемость */
        }

        .time-display {
            color: var(--primary-color);
            font-family: 'Neue Machina', monospace;
            font-size: 11px;
            min-width: 120px;
            text-align: center;
            display: none;
            margin-left: -20px;
            padding: 1px 6px;

            z-index: 1;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            transition: opacity 0.2s ease;
            border-radius: 3px;
            white-space: nowrap;
            transform: translateX(-3px); /* Наложение на разделитель */

        }

        .live-elements {
            position: absolute;
            left: 15px;
            bottom: calc(var(--control-height) + 15px); /* Размещаем над контрол-баром */
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.0);
            padding: 6px 10px;
            border-radius: 4px;
            z-index: 20;
            cursor: pointer;
            transition: all 0.3s;


        }

        .live-text {
            color: var(--text-color) !important;
            font-size: 14px !important;
            margin-left: 8px !important;
            font-family: 'Neue Machina', sans-serif !important;
            font-weight: 700 !important;
            text-shadow:
                0 0 4px rgba(0,0,0,0.9),
                0 0 8px rgba(0,0,0,0.8) !important;
        }

        .live-text-btn {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            font-family: inherit;
            display: flex;
            align-items: center;
        }

        .live-text-btn:hover .live-text {
            color: var(--text-color);
        }


        /* Новые стили для индикатора live */
        .live-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ff0000;
            animation: pulse 1.5s infinite;
        }

        .live-indicator.inactive {
            background-color: #888;
            animation: none;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .wifi-btn {
            display: none !important;
            position: relative;
            padding: 0 4px;
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 14px;
            cursor: pointer;
            z-index: 10; /* Добавляем z-index */
            pointer-events: auto !important; /* Принудительно включаем обработку событий */
        }
        .wifi-btn i {
            pointer-events: none; /* Чтобы клик работал на всей кнопке */
        }




        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            bottom: calc(100% + var(--progress-height) + 10px);
            right: 0;
            background: rgba(0, 0, 0, 0.9);
            min-width: 120px;
            z-index: 100;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            pointer-events: auto;
        }

        .dropdown.active .dropdown-content {
            display: block;
        }

        .dropdown-item {
            color: var(--text-color);
            padding: 8px 12px;
            display: block;
            cursor: pointer;
            white-space: nowrap;
            font-size: 13px;
            pointer-events: auto;
        }

        .dropdown-item:hover {
            background: var(--hover-color);
        }

        .volume-popup {
            display: none !important;
            position: absolute;
            bottom: calc(100% + var(--progress-height) + 10px);
            left: 0;
            background: rgba(0, 0, 0, 0.9);
            padding: 15px 8px;
            border-radius: 4px;
            display: none;
            z-index: 100;
            pointer-events: auto;
            transition: opacity 0.2s ease, transform 0.2s ease;
            opacity: 0;
            transform: translateY(10px);
        }
        .volume-control {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-right: 10px;
        }

        #horizontal-volume {
            width: 80px; /* Ширина ползунка */
            height: 4px; /* Толщина линии */
            margin: 0;
            accent-color: var(--primary-color); /* Цвет прогресса */
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        @media (max-width: 768px) {
            #horizontal-volume {
                display: none !important;
            }
        }

        #horizontal-volume:hover {
            opacity: 1;
        }

        #horizontal-volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
        }


        .volume-popup.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        #vertical-volume {
            width: 8px;
            height: 100px;
            padding: 0 8px;
            accent-color: var(--primary-color);
            pointer-events: auto;
            cursor: pointer;
            transition: opacity 0.2s;
            writing-mode: vertical-lr;    /* поворачивает ползунок «вертикально» */
            transform: rotate(180deg);     /* при необходимости перевернуть направление */
        }

        /* Улучшаем внешний вид ползунка для разных браузеров */
        #vertical-volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
        }

        #vertical-volume::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
        }

        /* Скрываем ползунок на мобильных */
        @media (max-width: 768px) {
            .volume-popup {
                display: none !important;
            }
        }

        /* Для тач-устройств убираем эффект нажатия */
        @media (max-width: 768px) {
            #audio-btn:active,
            #quality-btn:active {
                background: transparent !important;
            }
        }

        .language-icon {
            width: 24px;
            height: 24px;
            background: transparent;
            color: var(--text-color); /* Белый текст вместо черного */
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            border: 1px solid var(--text-color); /* Добавляем белую границу */
            transition: none;
        }

        .language-icon:hover {
            background: transparent !important;
            border-color: var(--text-color) !important;
        }

        .language-icon.active {
            background: var(--primary-color); /* Зеленый фон только когда активно */
            color: #000; /* Черный текст когда активно */
            border-color: var(--primary-color); /* Зеленая граница когда активно */
        }

        .video-container:fullscreen {
            width: 100%;
            height: 100%;
            background: #000;
        }

        .video-container:fullscreen #video {
            height: 100%;
            object-fit: contain;
        }

        .mobile-center-controls {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .mobile-control-btn {
            background: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
            font-size: 24px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0.8;
            transition: all 0.2s;
            pointer-events: auto;
        }

        .mobile-control-btn:hover {
            opacity: 1;
            background: rgba(0, 0, 0, 0.7);
        }

        @media (max-width: 768px) {
            #playlist-toggle {
                top: 40px;
                width: 36px;
                height: 36px;
                font-size: 16px;
            }


            .video-container.show-controls #playlist-toggle {
                opacity: 1;
            }
        }

        .mobile-control-btn {
            transition: transform 0.1s ease, opacity 0.2s ease;
        }

        .mobile-control-btn:active {
            transform: scale(0.9);
        }

        #mobile-play-btn:active {
            transform: scale(0.95); /* Меньше сжимаем основную кнопку */
        }


        @media (max-width: 768px) {
            .controls-bar {
                padding: 0 10px; /* Уменьшаем отступы */

            }


            .time-display {
                display: none !important; /* Полностью скрываем время в вертикальном режиме */
            }

            .right-controls {
                margin-left: auto; /* Автоматический отступ слева */
                flex-shrink: 0; /* Запрещаем сжатие */
            }

            .control-btn {
                width: 30px; /* Уменьшаем размер кнопок */
                height: 30px;
                font-size: 16px;
            }

            .language-icon {
                width: 20px;
                height: 20px;
                font-size: 8px;
            }
        }


        @media (max-width: 768px) {
            :root {
                --control-height: 40px;
            }

            .mobile-center-controls {
                display: flex;
            }

            volume-popup {
                    display: none !important;
                }
            }



            .control-btn {
                width: 36px;
                height: 36px;
                font-size: 18px;
            }

            .live-text {
                font-size: 12px;
            }

            .time-display {
                font-size: 11px;
                width: 50px; /* Уже на мобильных */
            }

            .mobile-control-btn {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }

            .live-elements {
                margin-right: 8px; /* Уменьшаем отступ */
            }
        }

        @media (min-width: 1200px) {
            .live-text {
                white-space: nowrap; /* В одну строку */
                width: auto; /* Автоширина */
            }
        }

        /* Горизонтальный режим */
        @media (orientation: landscape) {
            #video {
                width: 100% !important;
                height: 100% !important;
                max-width: 100% !important;
                max-height: 100% !important;
                object-fit: contain !important;
            }

            .video-container:fullscreen #video {
                object-fit: contain !important;
            }
        }

        .video-container.hide-cursor {
            cursor: none;
        }

        .video-container.menu-open #video {
            pointer-events: none;
        }

        .stream-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 1000;
            display: none; /* По умолчанию скрыт */
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Добавляем в секцию стилей */
        #share-btn i {
            font-size: 16px;
            color: var(--text-color);
            transition: all 0.2s ease;
        }

        #share-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* При наведении на кнопку - меняем только иконку */
        #share-btn:hover i {
            color: var(--primary-color);
        }

        /* При активном состоянии (нажатии) - иконка зеленая */
        #share-btn.active i {
            color: var(--primary-color) !important;
        }

        #share-btn.active {
            background: transparent !important;
        }



        #share-btn i {
            color: var(--text-color);
            transition: color 0.2s ease;
            font-size: 16px; /* Фиксированный размер */
        }

        #share-btn:active i {
            transform: scale(0.9);
            transition: transform 0.1s ease;
        }

        /* Делаем идентичные стили для play и volume */
        #play-btn, #volume-btn {
            min-width: 32px;
            height: 32px;
            border-radius: 4px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 2px;
        }

        /* Общие стили активного состояния */
        #play-btn.active, #volume-btn.active {
            background: var(--primary-color) !important;
        }

        /* Общие стили иконок */
        #play-btn i, #volume-btn i {
            color: white !important;
            font-size: 16px;
        }

        /* Эффект при наведении для обеих кнопок */
        #play-btn:hover:not(.active),
        #volume-btn:hover:not(.active) {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Анимация нажатия */
        #play-btn:active,
        #volume-btn:active {
            transform: scale(0.95);
        }

        /* Добавьте этот стиль в секцию стилей */
        .splash-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 998;
            transition: opacity 0.5s ease;
        }

        /* styles.css */
        .splash-screen {
          position: absolute;
          top: 0; left: 0;
          width: 100vw; height: 100vh;
          overflow: hidden;
          background: #000;
          z-index: 998;
        }

        .splash-screen img {
          position: absolute;
          top: 0; left: 0;
          width: 100vw; height: 100vh;
          object-fit: cover;
          -webkit-user-drag: none;
          user-drag: none;
          user-select: none;
          pointer-events: none;
        }




        /* Специальные стили только для Safari */
        _::-webkit-full-page-media, _:future, :root #horizontal-volume {
            -webkit-appearance: none;
            background: linear-gradient(to right, #76d94f 0%, #76d94f var(--volume-fill, 100%), rgba(255,255,255,0.3) var(--volume-fill, 100%), rgba(255,255,255,0.3) 100%);
            height: 4px;
            border-radius: 2px;
            margin: 0 8px;
        }

        _::-webkit-full-page-media, _:future, :root #horizontal-volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            background: #76d94f;
            border-radius: 50%;
            margin-top: -1px;
        }

        .session-time-container {
            display: flex;
            flex-direction: column;
            gap: 2px;
          }

          .session-time {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);
            font-family: 'Neue Machina', monospace;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
          }

          .session-name {
            font-size: 14px;
          }

        /* Добавить в секцию стилей: */
        .session-status.archive {
            background: var(--primary-color);
            color: #000 !important;
            font-family: 'Neue Machina', sans-serif;
            font-size: 9px;
            font-weight: bold;
            padding: 1px 4px;
            border-radius: 3px;
            margin-left: 8px;
            white-space: nowrap;
        }

        .live-indicator.hidden,
        .live-text.hidden {
            display: none !important;
        }

        .hidden {
            display: none !important; /* !important для переопределения других стилей */
        }

        .live-elements .time-display {
            /* убираем большую фиксированную ширину и уменьшаем отступ */
            min-width: auto !important;
            margin-left: 4px !important;
            transform: none !important;
        }

        .live-text.archive {
            color: var(--primary-color) !important;
        }

        .live-indicator.archive {
            background-color: var(--primary-color) !important;
            animation: none;
        }

        /* Стили для языкового селектора */
        .language-selector {
          position: absolute;
          top: 110px; /* Под кнопкой плейлиста */
          right: 20px;
          z-index: 998;
          display: flex;
          flex-direction: column;
          align-items: center;
          transition: all 0.3s ease;
        }

        /* Когда плейлист открыт */
        #playlist.active + .language-selector {
          top: auto;
          bottom: 60px; /* Над контролами, но под плейлистом */
          right: 20px;
        }


        .lang-main-btn {
          background: var(--bg-color);
          color: var(--text-color);
          border: none;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 18px;
          opacity: 0;
          transition: all 0.3s ease;
          pointer-events: none;
          box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        .video-container.show-controls .lang-main-btn {
          opacity: 1;
          pointer-events: auto;
        }

        .lang-main-btn:hover {
          background: var(--primary-color);
          transform: scale(1.1);
        }

        .lang-main-btn.active {
          background: var(--primary-color);
          color: #000;
        }

        .lang-options {
          position: absolute;
          top: 0;
          right: 50px; /* Выдвигаем влево от основной кнопки */
          display: flex;
          flex-direction: row; /* Горизонтальное расположение */
          gap: 10px;
          opacity: 0;
          transform: translateX(20px);

          transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .language-selector.open .lang-options {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }

        .lang-option {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: var(--bg-color);
          color: var(--text-color);
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: 'Neue Machina', sans-serif;
          font-weight: 700;
          font-size: 12px;
          cursor: pointer;
          transition: all 0.2s ease;
          box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        .lang-option:hover {
          transform: scale(1.1);
          background: var(--hover-color);
        }

        .lang-option.active {
          background: var(--primary-color);
          color: #000;
          transform: scale(1.1);
        }

        /* Анимация для кнопок при появлении */
        .lang-option.ru {
          transition-delay: 0.1s;
        }

        .lang-option.en {
          transition-delay: 0.2s;
        }

        /* Для мобильных устройств */
        @media (max-width: 768px) {
          .language-selector {
            top: 90px;
            right: 20px;
          }

          #playlist.active + .language-selector {
            bottom: 50px;
            right: 15px;
          }

          .lang-main-btn, .lang-option {
            width: 36px;
            height: 36px;
            font-size: 16px;
            pointer-events: auto !important; /* Важно! */
          }
        }

        /* Добавим в стили */
        .lang-option.just-selected {
          animation: pulse-selected 0.5s ease;
        }

        @keyframes pulse-selected {
          0% { transform: scale(1); }
          50% { transform: scale(1.2); }
          100% { transform: scale(1.1); }
        }

        ./* Анимации для контрол-бара */
        .controls-bar {
            transform: translateY(100%);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .video-container.show-controls .controls-bar {
            transform: translateY(0);
        }

        /* Анимации для верхней панели */
        .session-title {
            transform: translateY(-100%);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .video-container.show-controls .session-title {
            transform: translateY(0);
        }

        /* Анимации для прогресс-бара */
        .progress-container {
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .video-container.show-controls .progress-container {
            transform: translateY(0);
        }

        /* Анимации для кнопки плейлиста */
        #playlist-toggle {
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .video-container.show-controls #playlist-toggle {
            transform: translateY(0);
        }

        /* Анимации для языкового селектора */
        .lang-main-btn {
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .video-container.show-controls .lang-main-btn {
            transform: translateY(0);
        }



        /* Задержки для анимаций */
        .video-container.show-controls .session-title {
            transition-delay: 0.05s;
        }

        .video-container.show-controls .progress-container {
            transition-delay: 0.1s;
        }

        .video-container.show-controls .mobile-center-controls {
            transition-delay: 0.15s;
        }

        .video-container.show-controls .controls-bar {
            transition-delay: 0.2s;
        }

        .video-container.show-controls #playlist-toggle,
        .video-container.show-controls .lang-main-btn {
            transition-delay: 0.25s;
        }

        /* styles.css */
        #splash-img {
          -webkit-user-drag: none;
          user-drag: none;
          user-select: none;
          pointer-events: none;  /* события мыши «проскальзывают» к .splash-screen */
        }