/* ============================================================
   БЛОК №1: [GLOBAL] — Глобальные настройки и ядро
   ============================================================ */
* { 
    margin: 0; padding: 0; box-sizing: border-box; 
}

html, body {
    height: 100%;
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

/* ============================================================
   БЛОК №2: [HEADER-CORE] — Контейнер шапки и сетка
   ============================================================ */
.Header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0px !important;
    padding: 5px 20px !important;
    background: #000 !important;
    /* Линию убрали совсем */
    border-bottom: none !important; 
    min-height: 80px !important;
    overflow: visible !important; 
    position: relative !important;
    z-index: 1000 !important;
    
    /* Сохраняем центрирование и ширину как у mainframe */
    width: 100% !important;
    max-width: 1900px !important;
    margin: 0 auto !important;
}

/* Обязательно удалите или закомментируйте этот блок, если он был: */
/* .Header::after { display: none !important; } */

/* ============================================================
   БЛОК №3: [HEADER-USER] — Приветствие (Никнейм)
   ============================================================ */
/* 1. Стили текста (убираем принудительную ширину 100%) */
.user-info, 
.Header b, 
.Header font[color="#00FF00"], 
.Header a[href*="profile"] {
    width: auto !important;         /* Текст не должен распирать блок */
    text-align: center !important;
    position: static !important;
    display: inline-block !important; /* Важно: чтобы блок облегал текст */
    color: #00ffcc !important;
    font-size: 16px !important;     
    margin: 0 !important;           
    line-height: 1.2 !important;
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.7);
}

/* 2. Сама рамочка приветствия (делаем компактной и центрируем) */
.user-info {
    display: table !important;      /* Хак: элемент схлопнется по ширине контента */
    margin: 15px auto !important;   /* Центрирует "таблицу" по середине */
    width: auto !important;         /* УБРАЛИ 100%, теперь она по размеру текста */
    
    background: rgba(50, 50, 50, 0.8) !important; 
    border-radius: 20px !important; 
    padding: 10px 25px !important;              
    border: 1px solid rgba(255, 215, 0, 0.3) !important; 
    color: #ffffff !important;
    font-weight: bold !important;
    backdrop-filter: blur(5px);                 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);  
}

/* ============================================================
   БЛОК №4: [HEADER-BUTTONS] — Кнопки-аватары шапки
   ============================================================ */
.Header button {
    width: 60px !important; 
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid #555 !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #111 !important;
    position: relative !important;
    overflow: visible !important;   /* КРИТИЧНО: чтобы подсказка вылетала за границы */
    cursor: pointer !important;
    transition: 0.3s ease-in-out !important;
    z-index: 1 !important;          /* Начальный слой */
}

/* Эффект при наведении — кнопка "всплывает" над всеми остальными */
.Header button:hover { 
    transform: scale(1.15) !important; 
    border-color: #0000FF !important; 
    box-shadow: 0 0 15px #0000FF !important; 
    z-index: 9999 !important;       /* Кнопка под мышкой становится самой верхней */
}

/* ============================================================
   БЛОК №5: [HEADER-HINTS] — Вылет СНИЗУ (Подсказки)
   ============================================================ */
.Header button::after {
    /* Поддержка обоих атрибутов (левого и правого) */
    content: attr(data-hint-left) attr(data-hint-right) !important;
    
    position: absolute !important;
    top: auto !important;           
    bottom: -40px !important;       /* Начальная позиция под кнопкой */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    background: rgba(0, 0, 0, 0.95) !important; /* Почти черный фон для контраста */
    color: #00ffcc !important;      /* Ваш фирменный бирюзовый */
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    
    /* СЛОИ: Подсказка должна быть еще выше самой кнопки */
    z-index: 10000 !important; 
    
    border: 1px solid #444 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8) !important;
    
    transition: all 0.25s ease !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Эффект при наведении — Подсказка вылетает вниз и становится видимой */
.Header button:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    /* Увеличили вылет до -60px, чтобы при scale(1.15) текст не налезал на кнопку */
    bottom: -60px !important; 
}


/* ============================================================
   БЛОК №6: [HEADER-ICONS] — Пути к картинкам кнопок шапки
   ============================================================ */
.loud-link-hover-avatar       { background-image: url('Aang3.jpg'); }
.loud-link-hover-transformers { background-image: url('transformers.jpg'); }
.loud-link-hover-main         { background-image: url('main3.jpg'); }
.loud-link-hover-naruto       { background-image: url('Button2.jpg'); }
.loud-link-hover-chat         { background-image: url('chat.jpg'); }
.loud-link-hover-comments     { background-image: url('comments.jpg'); } /* Твой путь из кода */
.loud-link-hover-audiobooks   { background-image: url('audiobooks.jpg'); }

/* ============================================================
   БЛОК №7: [MAINFRAME-CORE] — Основная 3-х колонная сетка
   ============================================================ */
/* Основной блок для всех устройств */
[class^="mainframe"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1900px !important;
    padding: 20px !important;
    /* УДАЛЯЕМ: justify-content: center !important; */
    /* ЗАМЕНЯЕМ НА: */
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: flex-start !important; /* Безопасно для Android */
}

/* Специальная защита для режима ПК на Android */
@media screen and (min-width: 1025px) {
    [class^="mainframe"] {
        /* Принудительно выставляем левый край в 0, чтобы Android его не резал */
        justify-content: flex-start !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Запрещаем колонкам сжиматься, что часто происходит в Chrome на Android */
    [class^="mainframe"] > * {
        flex-shrink: 0 !important;
    }
}


/* ============================================================
   БЛОК №8: [COLUMNS-STYLE] — ФИКС ВЕРТИКАЛЬНОГО РАСТЯГИВАНИЯ
   ============================================================ */
[class^="leftv"], [class^="rightv"] {
    width: 320px !important; 
    min-width: 320px !important;
    flex-shrink: 0 !important;
    background: #000 !important;
    border-radius: 15px;
    overflow: visible !important;
    border: 1px solid #222;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

img.background {
    position: fixed !important; /* Картинка приклеена к экрану, а не к странице */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;  /* 100% ширины окна */
    height: 100vh !important; /* 100% высоты окна */
    object-fit: cover !important; /* Растягиваем без искажений */
    z-index: -9999 !important;    /* Уходим на самый нижний слой */
    pointer-events: none;         /* Чтобы фон не мешал кликать по кнопкам */
}


/* ФИКС КАРТИНОК: Ограничиваем высоту, чтобы не тянули колонку вниз */
[class^="leftv"] img, [class^="rightv"] img {
    width: 100% !important;
    max-height: 220px !important;    /* ЖЕСТКИЙ ЛИМИТ ВЫСОТЫ */
    object-fit: cover !important;     /* Сохраняет пропорции, аккуратно подрезая края */
    border-radius: 14px 14px 0 0;
    display: block !important;
}

/* ============================================================
   БЛОК №9: — РАЗДЕЛЕНИЕ ФОНОВ (СЕРЫЙ И ЧЕРНЫЙ)
   ============================================================ */

/* 1. СЕРЫЙ ФОН: Только для описания персонажа/фильма */
[class^="leftv"] p.description, 
[class^="rightv"] p.description,
[class^="leftv"] .description, 
[class^="rightv"] .description { 
    background: #696969 !important; 
    color: #fff !important;
    padding: 15px !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* 2. ЧЕРНЫЙ ФОН: Для названия сезона (как "Bleach Season 1") */
.season-title, 
[class^="leftv"] h3, 
[class^="rightv"] h3,
[class^="leftv"] p:not(.description), 
[class^="rightv"] p:not(.description) {
    background: #808000 !important; /* небесно голубой */
    /*padding: 10px 0 !important;*/
    text-align: center !important;
   /* width: 100% !important; */
    display: block !important;
   /* margin: 0 !important;*/
    font-weight: bold !important;
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 25px !important;
    border: 1px solid #555 !important;
    width: fit-content !important; /* Полоска будет ровно по длине текста */
    min-width: 200px !important;   /* Чтобы короткие названия не были слишком мелкими */
    display: block !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Немного тени для объема */
    color: #fff !important;
    text-align: center !important;
    padding: 8px 20px !important; /* Увеличил боковые отступы для красоты */
    margin: 10px auto 15px !important;
}

/* Убираем лишние рамки и серые пятна у таблиц */
[class^="leftv"] table, [class^="rightv"] table {
    background: #000 !important;
}

/* ============================================================
   БЛОК №10: [VIDEO-PLAYER] — ИДЕАЛЬНЫЕ ВИДЕОРАМКИ
   ============================================================ */
[class^="video"] {
    flex: 1 !important;
    min-width: 450px !important;
    max-width: 900px !important;    /* Ограничили макс. ширину, чтобы не раздувало */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;           /* Расстояние между двумя плеерами */
    padding: 0 10px !important;
}

video {
    width: 100% !important;
    /* МАГИЯ: заставляет плеер ВСЕГДА быть широкоформатным 16:9 */
    aspect-ratio: 16 / 9 !important; 
    
    background: #000 !important;    /* Черный фон для видео 4:3 внутри рамки */
    object-fit: contain !important; /* Видео не растягивается и не обрезается */
    
    border-radius: 12px;
    border: 3px solid #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Внутренняя группа: заголовок + видео */
.video-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 20px !important; /* Расстояние между сезонами */
}
/* ============================================================
   БЛОК №11: [DOT-BUTTONS-CORE] — ГРИД-СЕТКА ДЛЯ НОВОГО PHP
   ============================================================ */
/* Нацеливаемся на новый класс от Qwen */
.episodes-grid {
    display: grid !important; 
    /* Кнопки будут сами вставать в ряд (по 5-6 штук) */
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
    gap: 12px 8px !important;      /* Отступы между рядами и кнопками */
    padding: 15px 10px !important;
    width: 100% !important;
    background: #000 !important;    /* Кнопки на чистом черном */
    justify-items: center !important;
}

/* САМИ КНОПКИ (Кружки) */
.episodes-grid a {
    display: flex !important;
    align-items: center; 
    justify-content: center;
    width: 46px !important; 
    height: 46px !important;
    background: #fdfd96 !important; /* Твой желтый */
    color: #000 !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    border: 2px solid #000;
    
    /* Плавная анимация */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    font-size: 11px !important;      /* Размер букв THE, AVA внутри */
    text-decoration: none !important;
    text-align: center !important;
}

/* МЯГКИЙ ХОВЕР (Твой стальной голубой) */
.episodes-grid a:hover {
    background: #B0C4DE !important; 
    transform: scale(1.25) !important;
    z-index: 1000 !important;
    box-shadow: 0 0 15px rgba(176, 196, 222, 0.5) !important;
}

/* ============================================================
   БЛОК №12: [DOT-HINTS] — ПОДСКАЗКИ С ВЫЛЕТОМ К ЦЕНТРУ
   ============================================================ */
#global-hint {
    position: fixed; /* ГЛАВНОЕ: она парит над всей страницей */
    display: none;
    z-index: 100000; /* Выше всех плееров и окон */
    pointer-events: none; /* Не мешает кликать */
    
    background: rgba(15, 15, 15, 0.98);
    color: #FFD700; /* Твой золотой текст */
    border: 1px solid #FFD700;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}


/* ============================================================
   БЛОК №13: [FOOTER-STYLE] — ЗОЛОТАЯ РАМКА (КЛАССИКА)
   ============================================================ */
.site-footer {
    width: 92% !important;           /* Не на весь экран, а с отступами */
    max-width: 1200px !important;    /* Ограничение для больших мониторов */
    margin: 50px auto 30px !important; /* Центровка на странице */
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px);
    
    /* ВОЗВРАЩАЕМ РАМКУ */
    border: 2px solid #FFD700 !important; 
    border-radius: 20px !important;  /* Скругление углов */
    
    padding: 25px 40px !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1); /* Легкое золотое свечение */
}

#footer-inside {
    display: flex !important;
    justify-content: space-between !important; /* Разносим текст и кнопки по краям */
    align-items: center !important;
    width: 100% !important;
}

/* Настройки текста внутри рамки */
.footer-left { text-align: left !important; flex: 1; }
.footer-right { text-align: right !important; flex: 1; }

.footer-nav { list-style: none !important; padding: 0; margin: 0; }
.footer-oferta a, .footer-nav a {
    color: #FFD700 !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 16px;
}


/* ============================================================
   БЛОК №14: [RESPONSIVE] — МОБИЛЬНЫЙ ФИКС (ФИНАЛ С РАМКОЙ)
   ============================================================ */
@media (max-width: 640px) {
    /* 1. Разрешаем телу быть длиннее экрана, но не короче его */
    html, body {
        height: auto !important; 
        min-height: 100vh !important; 
        display: flex !important;
        flex-direction: column !important;
    }

    [class^="mainframe"] {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. СКРЫВАЕМ БОКОВУШКИ ДЛЯ СКРИПТА */
    [class^="leftv"], [class^="rightv"] {
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: visible !important; 
        opacity: 0 !important;
    }

    [class^="leftv"] .season-title, [class^="rightv"] .season-title,
    [class^="leftv"] img, [class^="rightv"] img,
    [class^="leftv"] p, [class^="rightv"] p {
        display: none !important;
    }

    /* 3. ЦЕНТРАЛЬНЫЙ БЛОК (ВИДЕО + КНОПКИ) */
    [class^="video"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important; 
    }

    .video .season-title {
        display: block !important;
        width: 100% !important;
        background: #000 !important;
        color: #FFD700 !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        font-size: 17px !important;
        text-align: center !important;
        letter-spacing: 1px;
    }

    video {
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 !important;
    }

    /* 4. СЕТКА КНОПОК ПОД ВИДЕО */
    .episodes-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
        width: 100vw !important;
        background: #000 !important;
        padding: 10px 5px !important;
        margin: 0 0 20px 0 !important; 
        opacity: 1 !important;
        visibility: visible !important;
        justify-items: center !important;
    }

    .episodes-grid a {
        width: 46px !important;
        height: 46px !important;
        font-size: 13px !important;
        margin: 4px !important;
        background: #fdfd96 !important;
        color: #000 !important;
        border-radius: 50% !important;
    }

    .description, [class^="leftv"] a::after, [class^="rightv"] a::after {
        display: none !important;
    }
}

/* ============================================================
   ФУТЕР: ПРИЖИМ К НИЗУ + ЗОЛОТАЯ РАМКА (ФИНАЛ)
   ============================================================ */
@media screen and (max-width: 640px) {
    /* 1. РАЗБЛОКИРУЕМ ВЫСОТУ ВСЕГО САЙТА (Перебиваем colors.css:8) */
    html, body {
        height: auto !important; 
        min-height: 10dvh !important; /* dvh - чтобы футер не прыгал в Safari */
        display: flex !important;
        flex-direction: column !important; /* План: Контент сверху -> Футер снизу */
        margin: 0 !important;
        background: #000 !important;
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch; 
        /* Убираем эффект резинового подпрыгивания (если он раздражает) */
       /* overscroll-behavior-y: none; 
    }
    
        /* Главный виновник болтанки — 100vw. Меняем на 100% */
    .episodes-grid, [class^="video"], [class^="mainframe"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. MAINFRAME СТАНОВИТСЯ ПРУЖИНОЙ (Занимает всё место) */
    [class^="mainframe"] {
        flex: 1 0 auto !important; /* Выталкивает футер вниз экрана */
    }

    /* 3. САМ ФУТЕР: ЗОЛОТАЯ РАМКА + ПРИЖИМ */
    .site-footer {
        margin-top: auto !important; /* ТОЛКАЕТ В САМЫЙ НИЗ */
        flex-shrink: 0 !important;   /* Не дает футеру сплющиться */
        width: 92% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 10px !important; /* Отступ от самого края экрана */
        padding: 10px 5px !important; 
        border: 2px solid #FFD700 !important; /* ТА САМАЯ РАМКА */
        border-radius: 20px !important;
        background: rgba(0, 0, 0, 0.9) !important;
        box-sizing: border-box !important;
        position: static !important; /* Перебиваем инлайновые стили */
        /* Создаем огромную тень снизу, которая закроет любую изнанку */
        box-shadow: 0 500px 0 500px #000 !important;
    
    }

    
    /* 4. ВНУТРЕННОСТИ ФУТЕРА */
    #footer-inside { 
        display: flex !important;
        flex-direction: column !important; 
        gap: 5px !important; 
        text-align: center !important;
    }

    .footer-left, .footer-right {
        width: 100% !important;
        text-align: center !important;
    }

    /* 5. ФИКС ДЛЯ IPHONE (Чтобы скрипт видел ссылки в боковушках) */
    [class^="leftv"], [class^="rightv"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important; /* Не 0, чтобы Safari не "забывал" про них */
        opacity: 0.01 !important;
        overflow: hidden !important;
    }
}

-------------------------------------------------------------------------------
/* ============================================================
   ГЛОБАЛЬНОЕ ЗОЛОТО ФУТЕРА (ДЛЯ ВСЕХ СТРАНИЦ)
   ============================================================ */


/* Эффект наведения (Белое свечение) */
.site-footer a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px #FFD700 !important;
    opacity: 1 !important;
}

/* 2. УБИРАЕМ ТОЧКИ У СПИСКА СПРАВА (НА ВСЕХ СТРАНИЦАХ) */
.footer-nav, 
.footer-nav li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* 3. ТЕКСТ АДМИНИСТРАЦИИ (СЕРЫЙ ДЛЯ БАЛАНСА) */
.footer-email {
    color: #888 !important;
    font-size: 0.85em !important;
    margin-top: 5px !important;
}
/* УНИВЕРСАЛЬНОЕ ЗОЛОТО ДЛЯ ВСЕХ ССЫЛОК В ФУТЕРЕ */
html body .site-footer a, 
html body .site-footer a:link, 
html body .site-footer a:visited {
    color: #FFD700 !important;             /* ТО САМОЕ ЗОЛОТО */
    text-decoration: underline !important;  /* Подчеркивание для оферты */
    opacity: 1 !important;
    font-weight: bold !important;
}

/* Свечение при наведении */
html body .site-footer a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px #FFD700 !important;
}

/* Стили для колонок со скроллом */
.video, .rightv, .leftv {
    scrollbar-width: thin; /* Для Firefox */
    scrollbar-color: #337ab7 #111; /* Для Firefox */
}

/* Выводим видео и его контейнер на передний план */
.video, video {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

/* На всякий случай убираем наложение от боковых колонок */
.leftv, .rightv {
    z-index: 10 !important;
}