/* Общие стили */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    background: #1a1a1a; /* Темно-серый фон */

    color: #e0e0e0; /* Светло-серый текст */

    font-family: 'Roboto', sans-serif; /* Более "земной" шрифт */

}

.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 20px;

}

/* Навигация */

.navbar {

    padding: 20px 0;

    border-bottom: 1px solid rgba(100, 100, 100, 0.2); /* Более тусклая граница */

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

}

.logo {

    font-size: 24px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: -1px;

   

}

.logo span {

    color: #ff6600; /* Терракотовый или приглушенный оранжевый */

}

.back-link {

    color: #ff6600; /* Терракотовый или приглушенный оранжевый */

    text-decoration: none;

    font-size: 14px;

}

/* Сетка: плеер и плейлист */

.main-view-grid {

    display: grid;

    grid-template-columns: 1fr 350px;

    gap: 20px;

    align-items: start;

    margin-bottom: 30px;

}

.player-section {

    width: 100%;

}

.player-wrapper {

    position: relative;

    border-radius: 12px; /* Чуть менее скругленные углы */

    overflow: hidden;

    border: 1px solid rgba(255, 102, 0, 0.3); /* Граница в цветах темы */

    box-shadow: 0 0 40px rgba(255, 102, 0, 0.15); /* Более приглушенная тень */

    background: #080808; /* Очень темный фон */

    height: 0;

    padding-bottom: 65.25%;

}

.player-wrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: none;

}

/* Плейлист */

.episodes-sidebar {

    background: #181818; /* Темно-серый фон */

    border-radius: 12px; /* Чуть менее скругленные углы */

    border: 1px solid rgba(255, 255, 255, 0.08); /* Более заметная, но не яркая граница */

    display: flex;

    flex-direction: column;

    height: 100%;

    max-height: 0;

    min-height: 100%;

}

.sidebar-header {

    padding: 15px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.sidebar-header span {

    color: #ff6600; /* Терракотовый или приглушенный оранжевый */

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.ep-list-scroll {

    overflow-y: auto;

    padding: 15px;

    flex: 1;

}

.ep-list-scroll::-webkit-scrollbar {

    width: 4px;

}

.ep-list-scroll::-webkit-scrollbar-thumb {

    background: #444; /* Более темный ползунок */

    border-radius: 4px;

}

.ep-list-item {

    display: block;

    padding: 27px;

    border-radius: 6px; /* Меньше скругление */

    margin-bottom: 6px; /* Меньше отступ */

    text-decoration: none;

    color: #d0d0d0; /* Чуть менее яркий текст */

    border: 1px solid transparent;

    background: rgba(255, 255, 255, 0.03); /* Едва заметный фон */

    transition: all 0.15s ease;

}

.ep-list-item:hover {

    border-color: rgba(255, 102, 0, 0.4); /* Более выраженная граница при наведении */

    background: rgba(255, 102, 0, 0.05); /* Фон при наведении */

    color: #fff; /* Белый текст при наведении */

}

.ep-list-item.active {

    border-color: #ff6600; /* Терракотовый или приглушенный оранжевый */

    background: rgba(255, 102, 0, 0.12); /* Более заметный фон активного */

    color: #fff; /* Белый текст активного */

}

.ep-list-item .ep-num {

    font-size: 12px;

    color: #aaa;

    text-transform: uppercase;

    font-weight: 600;

}

/* Блок текста */

.episode-info-block {

    margin-top: 15px; /* Больше отступ */

    max-width: 1000px;

}

.episode-label {

    font-size: 13px;

    color: #888; /* Более темный цвет */

    text-transform: uppercase;

    letter-spacing: 1px; /* Меньше расстояние */

    margin-bottom: 6px;

}

.episode-info-block h1 {

    font-size: 30px; /* Чуть меньше размер */

    font-weight: 900;

    margin-bottom: 12px;

}

.episode-info-block h1 span {

    color: #ff6600; /* Терракотовый или приглушенный оранжевый */

}

.description p {

    color: #c0c0c0; /* Более темный текст описания */

    line-height: 1.7;

    font-size: 15px;

}

/* Зернистость */

.grain-overlay {
 position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    pointer-events: none; /* ВАЖНО! Пропускает клики */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.05;
    z-index: 9999;

}

/* Адаптив */

@media (max-width: 1024px) {

    .main-view-grid {

        grid-template-columns: 1fr;

    }

    .episodes-sidebar {

        height: 450px;

        min-height: auto;

        max-height: none;

    }

}