/* Глубокий черный фон сайта */
body { background-color: #050505; }
.screen-off { background: radial-gradient(circle, #222 0%, #000 100%); }
.hide-cursor, .hide-cursor * { cursor: none !important; }
/* Заставка */
.my-dark-bg { background-color: rgba(0, 0, 0, 0.90) !important; }

iframe#player {
    pointer-events: none !important;
}

/* Запрещаем браузеру покадрово анимировать размытие и тени */
#video-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: auto;
    cursor: pointer;
    
    /* Указываем начальное состояние для размытия (это важно для плавности!) */
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    background-color: rgba(0, 0, 0, 0);

    /* Увеличим время до 1.5 секунд (1500ms) для более "дорогого" и плавного эффекта */
    transition: 
        background-color 1500ms ease, 
        backdrop-filter 1500ms ease, 
        -webkit-backdrop-filter 1500ms ease !important;

    will-change: background-color, backdrop-filter;
}


#center-logo {
    transition-property: opacity, transform !important;
    will-change: opacity, transform;
}

/* Стиль для псевдо-полноэкранного режима на мобильных */
 .ios-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    z-index: 99999 !important;
    background-color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}

/* Анимация неонового дыхания логотипа */
@keyframes pulse-neon {
     0% { 
        transform: scale(1) translateZ(0); 
        filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.4)); 
    }
    50% { 
        transform: scale(1.1) translateZ(0); 
        filter: drop-shadow(0 0 60px rgba(236, 72, 153, 1)); 
    }
    100% { 
        transform: scale(1) translateZ(0); 
        filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.4)); 
    }
}
.alive-logo {
    animation: pulse-neon 1.2s ease-in-out 2 !important;
    isolation: isolate;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform; 
}

/* Скрываем скроллбар */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* На мобильных панель управляется через JS */
@media (hover: none) {
    #custom-controls { transition: opacity 0.3s ease; }
}

input[type=range] { -webkit-appearance: none; background: transparent; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%;
    background: #fff; cursor: pointer; margin-top: -4px; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.hide-cursor #custom-controls { opacity: 0 !important; pointer-events: none; }

input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 4px; cursor: pointer; border-radius: 2px;
    background: linear-gradient(to right, #f580bd, #db2777, #831843) !important; 
}
input[type=range]::-moz-range-track {
    width: 100%; height: 4px; cursor: pointer; border-radius: 2px;
    background: linear-gradient(to right, #f580bd, #db2777, #831843) !important;
}

/* Ручное управление размытием */
.backdrop-blur-md {
    /* Для Safari и iOS (обязательно) */
    -webkit-backdrop-filter: blur(30px) !important;
    
    /* Для Chrome, Firefox и Edge */
    backdrop-filter: blur(30px) !important;
}

/* РАСКРЫТИЕ ГРОМКОСТИ ДЛЯ ТВ И СЕНСОРНЫХ ЭКРАНОВ */
@media (hover: none) {
    #volume-slider {
        width: 6rem !important; /* Аналог w-24 в Tailwind */
        opacity: 1 !important;  /* Всегда видимый */
        margin-left: 0.5rem;    /* Отступ от иконки */
    }
}

<!-- ЛОГОТИП ТВ (Водяной знак в правом верхнем углу) -->
        <style>
            /* Встроенные стили обходят кэш и конфликты с Tailwind */
            #watermark-logo {
                top: 25px !important;
                right: 20px !important;
            }
            #watermark-logo img {
                width: auto !important;
                height: 40px !important; /* Базовый размер (смартфоны) */
            }

            /* Планшеты */
            @media (min-width: 768px) {
                #watermark-logo img { height: 60px !important; }
            }

            /* ПК и ноутбуки */
            @media (min-width: 1280px) {
                #watermark-logo img { height: 60px !important; }
                #watermark-logo { top: 30px !important; right: 25px !important; }
            }

            /* Телевизоры 1080p (FullHD) */
            @media (min-width: 1900px) {
                #watermark-logo img { height: 130px !important; }
                #watermark-logo { top: 50px !important; right: 30px !important; }
            }

            /* Огромные телевизоры 4K */
            @media (min-width: 2500px) {
                #watermark-logo img { height: 180px !important; }
                #watermark-logo { top: 70px !important; right: 60px !important; }
            }

            /* УМНЫЙ МАСШТАБ: Если плеер развернули на весь экран */
            #tv-wrapper:fullscreen #watermark-logo img {
                height: 7vh !important; /* Строго 7% от высоты экрана ТВ */
                min-height: 60px !important;
            }
            #tv-wrapper:fullscreen #watermark-logo {
                top: 5vh !important;
                right: 3vw !important;
            }
        </style>

        <div id="watermark-logo" class="absolute z-40 opacity-70 transition-opacity duration-500 pointer-events-none">
            <img src="https://tv.w76q12.ru/img/logo.svg" alt="dNEX-TV" class="drop-shadow-lg">
        </div>