@charset "utf-8";
/* CSS Document */
:root {
    /* Цвета для тёмной темы */
    --dark-bg: #111111;
    --dark-card: #2D2D2D;
    --dark-zard: #79A3C3;
    --dark-tex: #e8e9ec;
    --dark-text: #e8e9ec;
    --dark-accent: #b3a57e;
    --dark-secondary: #DE9828;
    --dark-border: #3d3f4a;
    --dark-link: #4d9b6c;
    --dark-shadow: rgba(0, 0, 0, 0.2);
    --dark-section: #222222;
    --dark-update: #AAA;
    --dark-alphabet: #2a2d38;
    --dark-season: #2c2530;
    --dark-season-active: #ff9e46;
    
    /* Цвета для светлой темы */
    --light-bg: #F7F2E6;
    --light-card: #F9F9F9;
    --light-zard: #79A3C3;
    --light-tex: #e8e9ec;
    --light-text: #333330;
    --light-accent: #8a7e5d;
    --light-secondary: #b3a57e;
    --light-border: #d1d5db;
    --light-link: #2e7d52;
    --light-shadow: rgba(0, 0, 0, 0.1);
    --light-section: #f0f2f5;
    --light-update: #f5f7fa;
    --light-alphabet: #f0f2f5;
    --light-season: #f5f7fa;
    --light-season-active: #e67e22;
    
    /* Общие переменные (по умолчанию - тёмная тема) */
    --theme-bg: var(--dark-bg);
    --theme-card: var(--dark-card);
    --theme-zard: var(--dark-zard);
    --theme-tex: var(--dark-tex);
    --theme-text: var(--dark-text);
    --theme-accent: var(--dark-accent);
    --theme-secondary: var(--dark-secondary);
    --theme-border: var(--dark-border);
    --theme-link: var(--dark-link);
    --theme-shadow: var(--dark-shadow);
    --theme-section-bg: var(--dark-section);
    --theme-update-item: var(--dark-update);
    --theme-update-featured: #updates-item-info;
    --theme-alphabet-bg: var(--dark-alphabet);
    --theme-alphabet-border: var(--dark-border);
    --theme-alphabet-title: var(--dark-accent);
    --theme-alphabet-letter: var(--dark-text);
    --theme-season-card: var(--dark-season);
    --theme-season-active: var(--dark-season-active);
}

.light-theme {
    --theme-card: var(--light-card);
    --theme-bg: var(--light-bg);
    --theme-card: var(--light-card);
    --theme-zard: var(--light-zard);
    --theme-tex: var(--light-tex);
    --theme-text: var(--light-text);
    --theme-accent: var(--light-accent);
    --theme-secondary: var(--light-secondary);
    --theme-border: var(--light-border);
    --theme-link: var(--light-link);
    --theme-shadow: var(--light-shadow);
    --theme-section-bg: var(--light-section);
    --theme-update-item: var(--light-update);
    --theme-update-featured: #f8e9df;
    --theme-alphabet-bg: var(--light-alphabet);
    --theme-alphabet-border: var(--light-border);
    --theme-alphabet-title: var(--light-accent);
    --theme-alphabet-letter: var(--light-text);
    --theme-season-card: var(--light-season);
    --theme-season-active: var(--light-season-active);
}
 
body:not(.light-theme) #mc-container iframe {
    filter: invert(1) hue-rotate(180deg);
    border-radius: 5px;
}

 
body:not(.light-theme) .mc-comment-msg {
    filter: invert(0.9);
}
 
body:not(.light-theme) .cc .mc-comment-username,
body:not(.light-theme) .mc-complaint .mc-comment-username .mc-sort .mc-nav {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    vertical-align: top !important;
}
/* Простой код для всех элементов Cackle в темной теме */
body:not(.light-theme) #mc-container iframe {
    filter: invert(1) hue-rotate(180deg);
    border-radius: 5px;
}

body:not(.light-theme) .mc-comment-msg {
    filter: invert(0.9);
} 

body:not(.light-theme) .cc .mc-comment-username,
body:not(.light-theme) .mc-complaint .mc-comment-username,
body:not(.light-theme) .mc-menu,
body:not(.light-theme) .mc-grid,
body:not(.light-theme) .mc-sort,
body:not(.light-theme) .mc-nocomments,
body:not(.light-theme) .cc .mc-sort li.mc-active a ,
body:not(.light-theme) .mc-username,
body:not(.light-theme) .mc-nav li a,
body:not(.light-theme) .mc-nav {
    color: #B3A57E !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}




* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--theme-text);
    background-color: var(--theme-bg);
    line-height: 1.6;
}

iframe { 
    border-color: var(--theme-border); 
}

a {
    text-decoration: none;
    color: var(--theme-link);
}

a:hover {
    color: var(--theme-accent);
}

/* ========== ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ HEADER ========== */
header {
    background-color: var(--theme-card);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
    overflow: visible;
    width: 100%;
    max-width: 1270px;
    margin: 0 auto;
}

/* ИСПРАВЛЕННЫЕ стили для фиксации header */
header.fixed {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1270px;
    z-index: 1100;
    background: var(--theme-card);
    box-shadow: 0 5px 15px var(--theme-shadow);
    animation: slideDown 0.4s ease;
    margin: 0;
}

@keyframes slideDown {
    from { transform: translateX(-50%) translateY(-100%); }
    to { transform: translateX(-50%) translateY(0); }
}
/* Центральное меню */
.header-menu {
    flex: 1;
    margin: 0 20px;
    position: relative;
}

.header-menu nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 15px;
}

.header-menu nav li {
    position: relative;
}

.header-menu nav a {
    text-transform: uppercase;
    display: block;
    padding: 5px 20px;
    border: 1px solid var(--theme-border);
    background: var(--theme-accent);
    color: var(--theme-border);
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s;
    text-align: center;
}
.header-menu nav a:hover {
    background: var(--theme-link);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--theme-shadow);
}
.game-block {
      width: 100%;
  margin-top: 15px;
      max-width: 900px;
      background: var(--theme-card-bg);
      border: 1px solid var(--theme-border);
      border-radius: 8px;
      box-shadow: 0 4px 12px var(--theme-shadow);
      overflow: hidden;
    }

    /* Обёртка под соотношение 16:9 */
    .game-frame {
      position: relative;
    width: 100%;
    max-width: 900px;
      height: 600px; 
      background: #000;
    }
.game-frame:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}
    .game-frame iframe,
    .game-frame embed,
    .game-frame object {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
.fullscreen-button {
  background: var(--theme-accent);
  color: white;
      font-size: 10px;    
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: background 0.3s;
    text-transform: uppercase;
}

.fullscreen-button:hover {
  background: var(--theme-link);
}
    /* Инфо-блок под игрой */
    .game-info {
      padding: 18px;
      text-align: left;
      color: var(--theme-text);
    }
    .game-info h2 {
      margin: 0 0 8px; 
      color: var(--theme-accent);
    text-transform: uppercase; 
    font-size: 14px;
    font-weight: 400;
    }

    .game-info li {
      padding: 5px;
      line-height: 1.4;
    }
    .game-info p {
      margin: 0;
      font-size: 1em;
      line-height: 1.4;
    }
/* Выпадающие меню */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 355px;
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--theme-shadow);
    z-index: 1200; /* Увеличен z-index */
    display: none;
    padding: 10px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 10px 15px;
    margin: 5px 0;
    background: var(--theme-section-bg);
    border-radius: 5px;
    color: var(--theme-text);
    font-size: 14px;
    text-align: left;
}

.dropdown-menu a:hover {
    background: var(--theme-link);
    color: #fff;
}
body.menu-open {
    overflow: hidden;
}
/* Подменю второго уровня */
.dropdown-submenu {
    position: relative;
}

.submenu {
    position: absolute;
    left: 100%;
    top: 0;
    width: 220px;
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--theme-shadow);
    display: none;
    padding: 10px;
}

.dropdown-submenu:hover .submenu {
    display: block;
}


/* ========== ИСПРАВЛЕННОЕ МОБИЛЬНОЕ МЕНЮ ========== */
/* Мобильное меню backdrop */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1500;
}

.mobile-menu-backdrop.active {
    display: block;
}

/* Мобильное меню */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100%;
    background: var(--theme-card);
    z-index: 2000;
    transition: right 0.4s ease;
    padding: 20px;
    overflow-y: auto;
    box-shadow: -5px 0 15px var(--theme-shadow);
    border-left: 1px solid var(--theme-border);
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: var(--theme-text);
    cursor: pointer;
    z-index: 2001;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme-section-bg);
    transition: all 0.3s;
}

.mobile-menu-close:hover {
    background: var(--theme-accent);
    color: white;
}

.mobile-menu-close::before {
  content: "×";
  display: inline-block;
}
.mobile-menu nav {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

/* Секции мобильного меню */
.mobile-menu-section {
    margin-bottom: 25px;
}

.mobile-menu-title {
    color: var(--theme-accent);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--theme-border);
    padding-bottom: 8px;
}

/* Пункты меню */
.mobile-menu a {
    display: block;
    padding: 12px 15px;
    margin: 6px 0;
    background: var(--theme-section-bg);
    border-radius: 5px;
    color: var(--theme-text);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    transition: all 0.3s;
    border: 1px solid var(--theme-border);
}

.mobile-menu a:hover {
    background: var(--theme-accent);
    color: white;
    transform: translateX(5px);
}

/* Подменю */
.mobile-submenu {
    padding-left: 20px;
    display: none;
    margin-top: 8px;
}

.mobile-submenu.active {
    display: block;
}

.mobile-submenu a {
    padding: 8px 12px;
    margin: 4px 0;
    font-size: 13px;
    background: var(--theme-alphabet-bg);
}
/* Индикаторы для пунктов с подменю */
.mobile-menu .menu-item[data-submenu] > a {
    position: relative;
    padding-right: 25px !important;
}

.mobile-menu-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: transform 0.3s;
}

.mobile-submenu.active {
    display: block;
}
/* Адаптивные стили */
@media (max-width: 1024px) {
    .header-menu {
        display: none;
    }

    .burger-menu {
        display: flex;
    }
}

@media (max-width: 768px) {
    header {
        padding: 10px;
        flex-wrap: wrap;
    }

    .header-images {
        display: none;
    }

    .theme-toggle {
        margin-left: auto;
    }

    .mobile-menu {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .mobile-menu {
        width: 260px;
    }

    .logo {
        font-size: 18px;
    }
}
/* Стили для элементов подменю */
.menu-item {
    position: relative;
}

}
.com2com {
    border: solid 1px var(--theme-border);
    box-sizing: border-box;
    padding: 7px;
    width: 99%;
    margin-top: 1px;
    margin-bottom: 5px;
    background-color: var(--theme-card);
}

.translation-tabs {
    display: flex;
    margin: 10px 10px;   
    flex-wrap: wrap;
    gap: 2px;    
    max-width: 100%;
    overflow-x: auto;           
}

.translation-tabs button {
    padding: 10px 25px;
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    cursor: pointer;
    font-size: 16px;
    outline: none;
    transition: all 0.2s;
    color: var(--theme-text);
}

.translation-tabs > div {
    cursor: pointer;
    background: var(--theme-card);
    margin-right: 2px;
}

.translation-tabs > .active {
    background: var(--theme-accent);
    color: #fff; 
}

.translation-tabs > div {
    margin-right: 2px;
}

.translation-tabs > .active button {
    background: var(--theme-accent); 
    color: #fff;
}

.translation-tabs button:focus {
    box-shadow: 0 0 0 2px var(--theme-link);
}
 
.tabs {

    display: flex;
    margin: 10px 10px;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;         
}

.tabs > div {
    cursor: pointer;
    background: var(--theme-card);
    margin-right: 2px;
}

.tabs > div.active {
    background: var(--theme-accent);
    font-weight: bold; 
}

.tabs > div {
    margin-right: 2px;
}

.tabs button {
    padding: 10px 25px;
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    cursor: pointer;
    font-size: 16px;
    outline: none;
    transition: background 0.2s;
    color: var(--theme-text);
}

.tabs > div.active button {
    background: var(--theme-accent); 
    color: #fff;
}

.tabs button:focus {
    box-shadow: 0 0 0 2px var(--theme-link);
}

.video-player-container {
    border: 1px solid var(--theme-accent);  
    overflow: hidden;  
    margin: 20px 0;
}

.page-wrapper {
    width: 100%;
    min-width: 320px;
    max-width: 1270px;
    margin: 0 auto;
    position: relative;
    z-index: 200;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--theme-card);
    box-shadow: 0 0 15px var(--theme-shadow);
}

.player, .player-hood {
    width: 100%;
    margin: 0;
    padding: 0;
}

.ifr {
    width: 100%;
    height: 400px;
    display: block;
    border: none;
}

.movies-section {
    background: var(--theme-section-bg);
    border-radius: 8px;
    padding: 15px;
    margin: 30px 0;
    box-shadow: 0 4px 12px var(--theme-shadow);
    border: 1px solid var(--theme-border);
}

.section-header h2 {
    color: var(--theme-accent);
    font-size: 28px;
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
}

.movies-category {
    margin-bottom: 40px;
}

.movies-category:last-child {
    margin-bottom: 0;
}

.movies-category h3 {
    color: var(--theme-secondary);
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--theme-border);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

.movie-card {
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 5px;
    overflow: hidden;
}

.movie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--theme-shadow);
}

.movie-poster {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    border: 1px solid var(--theme-border);
}

.movie-info {
    padding: 10px 5px; /* Увеличиваем отступы */
    text-align: center;
    min-height: 60px; /* Фиксированная высота для выравнивания */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.movie-title {
    color: var(--theme-text);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 3px;
    /* Удаляем эти свойства */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* Добавляем перенос слов */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    /* Можно добавить минимальную высоту для выравнивания карточек */
    min-height: 2.8em; /* Примерное значение, подберите под ваш дизайн */
    line-height: 1.3;
}

.movie-year {
    color: var(--theme-secondary);
    font-size: 12px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;
    }
    
    .section-header h2 {
        font-size: 24px;
    }
    
    .movies-category h3 {
        font-size: 18px;
    }
    
    .movie-title {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    
    .pixar-movies-section {
        padding: 15px;
    }
}

 


/* Левое фоновое изображение */
header::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 94px;
    height: 70px;
    background: url(../img/hbl.webp) no-repeat 0% 50%;
    background-size: contain;
    z-index: 0;
}

/* Правое фоновое изображение */
header::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 88px;
    height: 70px;
    background: url(../img/hb.webp) no-repeat 100% 50%;
    background-size: contain;
    z-index: 0;
}

/* Контент header (должен быть выше фона) */
.header-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo { 
    text-transform: uppercase;
    font-size: 22px;  
  padding-left: 30px;
    color: var(--theme-text); 
    text-decoration: none; 
    display: inline-block; 
    z-index: 1;
}
.logo a {
  display: block; 
  width: 250px; /* Ширина логотипа */
  height: 50px; /* Высота логотипа */
  background: url('../img/logo.webp') no-repeat center;
  background-size: contain;
  text-indent: -9999px; 
    z-index: 2;/* Скрываем текст */
}
.search-block-with-bg {
  position: relative;
  /* нужно, если ниже будут другие блоки/кнопки */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.search-block-with-bg::before {
  content: "";
  display: block;
  inset: 0; 
  position: absolute;
  left: 80%;
  top: -27px; /* сдвиг выше блока; регулировать по размеру картинки */
  transform: translateX(-50%);
  width: 80px;     /* ширина изображения, подберите под свой макет */
  height: 80px;     /* высота изображения */
  background: url('../img/search.webp') no-repeat center/contain;
  pointer-events: none; /* изображение не кликабельно */
  z-index: 2; /* Выше кнопки! */
}
.search-block-with-bg  {
  position: relative;
  z-index: 1;
}
.random-block-with-bg { 
  position: relative;
  /* нужно, если ниже будут другие блоки/кнопки */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
 
/* Кнопки в сайдбаре */
.sidebar-buttons {
    flex-direction: column;
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.sidebar-button { 
  width: 100%;  
  flex: 1;
  text-align: center;
  padding: 10px;
  background: var(--theme-section-bg);
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  color: var(--theme-text);
  text-decoration: none;
  transition: all 0.3s;
}

.sidebar-button:hover {
  background: var(--theme-accent);
  color: white;
}

/* Блокировка скролла при открытом сайдбаре */
@media (max-width: 768px) {
  body.sidebar-open {
    overflow: hidden;
  }
}
/* Контейнер */
.seasons-container {
    background: var(--theme-section-bg);
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    box-shadow: rgba(142, 142, 142, 0.24) 0px 2px 4px 0px, rgba(142, 142, 142, 0.24) 0px 2px 16px 0px;
}

/* Заголовок */
.seasons-header {
    color: var(--theme-accent); 
    font-weight: 400;
    margin-bottom: 15px;
    text-transform: uppercase;  
    font-size: 14px; 
    text-align: center; 
}

/* Сетка сезонов */
.seasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* Карточка сезона */
.season-card {
    background: var(--theme-season-card);
    color: var(--theme-text);
    padding: 12px 15px;
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s;
    border: 1px solid var(--theme-border);
}

/* Активный сезон */
.season-card.active {
    background: var(--theme-season-active);
    color: #fff;
    font-weight: 600;
    border-color: var(--theme-accent);
}

/* Ховер-эффект */
.season-link:hover .season-card {
    background: var(--theme-border);
    transform: translateY(-3px);
    box-shadow: 0 4px 8px var(--theme-shadow);
}

/* Адаптивность */
@media (max-width: 768px) {
    .seasons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .season-card {
        padding: 10px 10px;
        font-size: 14px;
    }
}

.uff{
    font-size: 14px;
    margin-bottom: 20px;
    padding: 8px 15px;
    background-color: var(--theme-card);
    border-radius: 4px;
    border: 1px solid var(--theme-border);
}
.uff h1 {
    color: var(--theme-text);
    display: inline;
    margin: 0; 
    font-size: inherit;
    font-weight:400;  
}
.uff .yel {
    color: var(--theme-accent); 
    text-decoration: none; 
    transition: color 0.3s;
}

.uff .yel:hover {
    color: var(--theme-link); 
    text-decoration: underline;
}
.uff a {
    color: var(--theme-link);
    text-decoration: none;
    transition: color 0.3s;
}

.uff a:hover {
    color: var(--theme-accent);
    text-decoration: underline;
}

.uff .divider {
    color: var(--theme-secondary);
    margin: 0 5px;
}

.uff span:last-child {
    color: var(--theme-text);
    font-weight: 500;
}

.con-meta {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Вертикальное выравнивание */
    align-items: center; /* Горизонтальное выравнивание */
    gap: 10px;
    margin-top: 20px;
    padding: 10px;
    background: var(--theme-section-bg);
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    
    color: var(--theme-secondary);
    font-size: 14px; 
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    color: var(--theme-text);
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    background: rgba(0,0,0,0.05);
}

.meta-item.accent {
    color: var(--theme-accent);
    font-weight: 600;
    padding-left: 40px; /* Добавляем отступ слева для иконки */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 48' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 12.1248C6 10.399 7.38744 9 9.09981 9H64.9002C66.6122 9 68 10.3993 68 12.1248V35.8753C68 37.601 66.6126 39 64.9002 39H9.09981C7.38781 39 6 37.6008 6 35.8753V12.1248Z' fill='%23E1BE00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M54.1049 14.9226V20.8376C54.4818 20.4016 54.902 20.0763 55.3655 19.862C55.8292 19.6477 56.525 19.5397 57.068 19.5397C57.6936 19.5397 58.2358 19.6367 58.6955 19.8314C59.1556 20.0257 59.506 20.2983 59.7473 20.6489C59.9884 20.9997 60.1331 21.3432 60.1825 21.6792C60.2313 22.0152 60.256 22.7319 60.256 23.8298V28.9317C60.256 30.0222 60.1825 30.8338 60.0355 31.368C59.8881 31.9019 59.5429 32.3654 59 32.7574C58.4568 33.149 57.8125 33.3452 57.0655 33.3452C56.5301 33.3452 55.8375 33.2291 55.3736 32.9964C54.9097 32.7636 54.4855 32.4142 54.101 31.9484L53.8067 33.107H49.5542V14.9227L54.1049 14.9226ZM14.6312 33.1075H19.355V14.9231H14.6312V33.1075ZM27.0923 14.9226C27.2724 16.0235 27.461 17.3157 27.6585 18.7982L28.3354 23.4179L29.4294 14.9229H35.6V33.1073H31.4757L31.4607 20.8335L29.8087 33.1073H26.8618L25.1204 21.1004L25.1055 33.1073H20.9681V14.9229L27.0923 14.9226ZM40.74 14.923C43.0263 14.923 44.3418 15.028 45.1475 15.2374C45.9534 15.4465 46.5666 15.7903 46.9862 16.2689C47.4061 16.7474 47.6684 17.2802 47.7734 17.8668C47.8782 18.4537 47.9454 19.607 47.9454 21.3268V27.713C47.9454 29.343 47.8541 30.433 47.7005 30.9824C47.5466 31.5324 47.2787 31.9622 46.8966 32.2723C46.5139 32.5824 46.0419 32.7993 45.4796 32.9225C44.9171 33.0461 44.0702 33.1077 42.9386 33.1077H37.2154V14.9233L40.74 14.923ZM55.6978 28.6953C55.6978 29.5753 55.6541 30.1313 55.5668 30.3626C55.4793 30.5941 55.099 30.7105 54.8106 30.7105C54.5293 30.7105 54.3418 30.5988 54.2468 30.3748C54.1519 30.151 54.1048 29.64 54.1048 28.8411V24.0354C54.1048 23.2069 54.1465 22.6905 54.2298 22.4849C54.3132 22.2801 54.4953 22.1771 54.7763 22.1771C55.0643 22.1771 55.451 22.2941 55.5498 22.5292C55.6483 22.7643 55.6977 23.2664 55.6977 24.0348L55.6978 28.6953ZM42.987 18.196C43.1736 18.304 43.2933 18.4746 43.3453 18.7058C43.3974 18.9376 43.4239 19.4644 43.4239 20.2864V27.3364C43.4239 28.5471 43.3453 29.2883 43.1885 29.5611C43.0316 29.8343 42.6135 29.9704 41.9347 29.9704V18.0335C42.4493 18.0335 42.8003 18.0876 42.987 18.196Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 35px auto; /* Размер иконки */
}

.meta-item.age-badge {
    background: var(--theme-accent);
    color: white; 
    width: 30px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 13px;
}

/* Адаптив для мобилок */
@media (max-width: 768px) {
    .meta-row {
        gap: 10px;
    }
    
    .meta-item {
        font-size: 13px;
        padding: 4px 8px;
    }
    
    .meta-item.age-badge {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}
.con-genre { 
    display: flex;
    gap: 8px;
    justify-content: center; 
    flex-wrap: wrap;
}

.con-genre span {
    border: 1px solid var(--theme-accent);
    background: #A86E43;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: var(--theme-text);
    text-transform: uppercase;
}

.con-genre span .a {
    border: 1px solid var(--theme-accent);
    background: var(--theme-section-bg);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: var(--theme-text);
    text-transform: uppercase;
}
/* Заголовки */
.con-header h2 {
    color: var(--theme-text);
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 10px 0;
    text-align: center;
}

.con-subtitle {
    color: var(--theme-secondary);
    font-size: 16px; 
    text-align: center;
    margin-bottom: 20px;
}

.con-spotlight { 
    margin: 30px auto;
    text-align: center;
    background: var(--theme-section-bg);
    border-radius: 8px;
    padding: 25px;
    box-shadow: rgba(142, 142, 142, 0.24) 0px 2px 4px 0px, rgba(142, 142, 142, 0.24) 0px 2px 16px 0px;
}

.con-poster {
    margin: 20px 0;
}

.con-poster img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid var(--theme-border);
    box-shadow: 0 2px 8px var(--theme-shadow);
}

.con-description {
    text-align: left;
    color: var(--theme-text);
    line-height: 1.6;
    margin-top: 20px;
    padding: 0 15px;
}
.con-description p { 
    padding: 5px;
}

@media (max-width: 768px) {
    .con-header h2 {
        font-size: 24px;
    }
    
    .con-subtitle {
        font-size: 18px;
    }
}
/* Стили для блока "Последние поступления" */
.sidebar-recent {
    background: var(--theme-alphabet-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 10px;
    margin: 25px 0;
    position: relative;
}

.recent-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.recent-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.recent-card {
    display: block;
    text-decoration: none;
    transition: transform 0.3s;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--theme-border);
}

.recent-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px var(--theme-shadow);
}

.recent-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.recent-title {
    padding: 8px 5px;
    color: var(--theme-text);
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    background: var(--theme-card);
    display: flex; /* Добавляем flexbox */
    align-items: center; /* Вертикальное выравнивание */
    justify-content: center; /* Горизонтальное выравнивание */
    min-height: 50px; /* Минимальная высота для центрирования */
    line-height: 1.3;
    word-break: break-word; /* Перенос длинных слов */
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .recent-row {
        grid-template-columns: 1fr;
    }
    
    .recent-card img {
        height: 150px;
    }
    
    .recent-title {
        font-size: 13px;
        padding: 10px;
    }
}
/* Уточняем для меню */
.sidebar a:visited,
.header-categories a:visited {
    color: var(--theme-text);
}

/* Для ссылок в основном контенте */
.logo a {
    text-shadow:1px 1px 0 var(--theme-shadow),1px -1px 0 var(--theme-shadow),-1px 1px 0 var(--theme-shadow),-1px -1px 0 var(--theme-shadow);
    color:var(--theme-accent);
} 
.logo :hover{
    text-shadow:1px 1px 0 var(--theme-shadow),1px -1px 0 var(--theme-shadow),-1px 1px 0 var(--theme-shadow),-1px -1px 0 var(--theme-shadow);
    color:var(--theme-link);
}

.header-categories a:nth-child(1) {
    background: var(--theme-section-bg) url('../img/iconmenu01.webp') no-repeat 5px center/114px 53px;
}

.header-categories a:nth-child(2) { 
    background: var(--theme-card) url('../img/iconmenu02.webp') no-repeat 0px center/101px 53px;
}

.header-categories a:nth-child(3) {
    background: var(--theme-section-bg) url('../img/iconmenu03.webp') no-repeat 0px center/105px 53px;
}

.sidebar a:nth-child(1) {
    background: var(--theme-card) url('../img/chapter01.webp') no-repeat 5px center/80px 55px;
}
.sidebar a:nth-child(2) {
    background: var(--theme-card) url('../img/chapter02.webp') no-repeat 5px center/97px 60px;
}
.sidebar a:nth-child(3) {
    background: var(--theme-card) url('../img/chapter03.webp') no-repeat 5px center/130px 35px;
}
.sidebar a:nth-child(4) {
    background: var(--theme-card) url('../img/chapter04.webp') no-repeat 5px center/92px 60px;
}
.sidebar a:nth-child(5) {
    background: var(--theme-card) url('../img/chapter05.webp') no-repeat 5px center/104px 55px;
}
.sidebar a:nth-child(6) {
    background: var(--theme-card) url('../img/chapter06.webp') no-repeat 5px center/66px 60px;
}
.sidebar a:nth-child(7) {
    background: var(--theme-card) url('../img/chapter07.webp') no-repeat 5px center/120px 66px;
}
.sidebar a:nth-child(8) {
    background: var(--theme-card) url('../img/chapter08.webp') no-repeat 5px center/69px 65px;
}
.sidebar a:nth-child(9) {
    background: var(--theme-card) url('../img/chapter09.webp') no-repeat 5px center/109px 50px;
}
.sidebar a:nth-child(10) {
    background: var(--theme-card) url('../img/chapter10.webp') no-repeat 5px center/82px 63px;
}
.sidebar a:nth-child(11) {
    background: var(--theme-card) url('../img/chapter11.webp') no-repeat 5px center/94px 63px;
}
 
.sidebar2 nav a:nth-child(1) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(2) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(3) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(4) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(5) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(6) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(7) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(8) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(9) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(10) {
    background: var(--theme-alphabet-bg);
}
.sidebar2 nav a:nth-child(11) {
    background: var(--theme-alphabet-bg);
}

.header-categories {
    display: flex;
    gap: 15px;
}

.header-categories a {
    background: var(--theme-section-bg);
    padding: 10px 20px;
    text-decoration: none;
    border: 1px solid var(--theme-border);
    border-radius: 5px;
    color: var(--theme-text);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    transition: all 0.3s;
    padding-left: 120px;  
}

.header-categories a:hover {
    background-color: var(--theme-accent);
    transform: translateY(-2px);
    box-shadow: 0 2px 5px var(--theme-shadow);
}
.theme-icon-container {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.theme-icon-container .icon {
    position: absolute;
    top: 0;
    left: 0;
    transition: 
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Иконка солнца (по умолчанию скрыта) */
.icon-sun {
    opacity: 0;
    transform: rotate(-45deg) scale(0.5);
    color: #FF6A00;
}

/* Иконка луны (по умолчанию видна) */
.icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #BDEAEF;
}

/* Состояния для светлой темы */
.light-theme .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.light-theme .icon-moon {
    opacity: 0;
    transform: rotate(45deg) scale(0.5);
}
.header-images {
   padding-right: 6.5%; 
    display: flex; 
    gap: 5px; 
}

.header-images img { 
    width: 30px;
    height: 30px;  
    margin-top: 5px;
}
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 7px; 
}
 

/* Бургер-меню - показывается только на мобильных */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    margin-left: 15px;
}

.burger-line {
    height: 3px;
    width: 100%;
    background-color: var(--theme-text);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Анимация для бургера */
.burger-menu.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}


/* Адаптивные стили */
@media (max-width: 1024px) {
    .header-menu {
        display: none;
    }
    
    .burger-menu {
        display: flex;
    }
}
.burger-line {
    height: 3px;
    width: 100%;
    background-color: var(--theme-text);
    border-radius: 3px;
}

.top-block a.top-link {
    display: block;
    border: none !important;
    background: none !important;
    padding: 0;
    margin: 20px 20px 0 20px;
}

.top-block a, 
.top-block a:hover, 
.top-block a:visited {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: normal !important;
}

/* Основной контент */
.container {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 350px;
    background-color: var(--theme-card);
    border: 1px solid var(--theme-border);
    padding: 20px; 
    transition: transform 0.3s ease;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
}

.sidebar a {
    background: var(--theme-section-bg);
    padding: 12px 15px;
    text-decoration: none;
    border: 1px solid var(--theme-border);
    border-radius: 5px;
    color: var(--theme-text);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 10px;
    transition: all 0.3s;
    padding-left: 145px;  
}

.sidebar a:hover {
    background-color: var(--theme-accent);
    color: white;
    transform: translateX(5px);
}

.sidebar-banner {
    margin-top: 30px;
    padding: 15px;
    background-color: var(--theme-card);
    border: 1px solid var(--theme-border);
    border-radius: 5px;
    text-align: center;
  position: relative; /* если блок уже не позиционирован */
  background: var(--theme-card) url('../img/sb.webp') no-repeat left bottom;
  background-size: 90px auto; /* подберите размер под макет */
  border: 1px solid var(--theme-border);  
  min-height: 200px; /* по необходимости */
}

.sidebar2 {
    width: 350px;
    background-color: var(--theme-card);
    border: 1px solid var(--theme-border);
    padding: 20px; 
    transition: transform 0.3s ease;
}

.sidebar2 nav {
    display: flex;
    flex-direction: column;
}

.sidebar2 a {
    background: var(--theme-section-bg); 
    text-decoration: none;
    border: 1px solid var(--theme-border);
    border-radius: 5px;
    color: var(--theme-text);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 10px;
    transition: all 0.3s; 
}

.sidebar2 nav a {
    background: var(--theme-section-bg);
    padding: 12px 15px;
    text-decoration: none;
    border: 1px solid var(--theme-border);
    border-radius: 5px;
    color: var(--theme-text);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 10px;
    transition: all 0.3s;
    padding-left:  30px;  
}
.sidebar2 a:hover {
    background-color: var(--theme-accent);
    color: white;
    transform: translateX(5px);
}

.sidebar2 .letter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-weight: 400; 
    text-align: center;
    color: var(--theme-text);
    text-decoration: none;
    font-size: 16px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    transition: all 0.2s;
}

.sidebar2 letter:hover {
    background: var(--theme-accent);
    color: #fff;
    border-color: var(--theme-accent);
    transform: translateY(-2px);
}

.main-content {
    flex: 1;
    padding: 20px;
    max-width: calc(100% - 250px);
    background-color: var(--theme-section-bg);
    border: 1px solid var(--theme-border);
}

.spa {
    background-color: var(--theme-card);
    padding: 15px;
    text-align: center;
    margin: 0;
}
.styled-link { 
    padding: 10px 20px;  
    font-family: sans-serif;   
}
/* Новые стили для блока "Новое на сайте" */
.sidebar-new {
    background: var(--theme-alphabet-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 10px;
    margin: 25px 0;
    position: relative; 
}
 
.sidebar-new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-93%) translateY(-85%);
  width: 100%;                     /* или нужная ширина */
  height: 80px;                   /* высота верхнего изображения */
  background: url("../img/random.webp") no-repeat center top;
  background-size: contain;
  pointer-events: none;            /* отключаем клики */
  z-index: 0;                      /* под содержимым */
} 
.sidebar-title {
    text-transform: uppercase;
    color: var(--theme-accent);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 12px;
    text-align: center;
    position: relative;
    z-index: 1;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--theme-border);
}

.new-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.new-list li {
    border-bottom: 1px dashed var(--theme-border);
}

.new-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.new-list a {
    display: block;
    color: var(--theme-text);
    font-size: 13px;
    padding: 10px 0 0 0;
    transition: all 0.3s;
    background: none;
    border: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    border-radius: 4px;
    padding-left: 20px;
    position: relative;
}

.new-list a::before {
    padding-top: 10px;
    content: "•";
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-accent);
    font-size: 16px;
}

.new-list a:hover {
    color: var(--theme-link);
    background: rgba(var(--theme-accent-rgb), 0.1);
    transform: translateX(3px);
    padding-left: 30px;
}
/* Контейнер */
.notice-bar {
    position: relative; /* Создаем контекст для позиционирования */
    background: linear-gradient(90deg, var(--theme-section-bg) 0%, var(--theme-card) 100%);
    border-left: 4px solid var(--theme-accent);
    border-radius: 4px;
    padding: 12px 15px 12px 50px;
    margin: 0 0 25px 0;
    box-shadow: 0 2px 8px var(--theme-shadow);
    overflow: visible; /* Разрешаем элементам выходить за границы */
    z-index: 1; /* Поднимаем над обычным потоком */
}


/* Градиентный эффект для фона */
.bg-gradient-effect {
  position: relative;
}

.bg-gradient-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 90px auto; /* подберите размер под макет */
  background: linear-gradient(
    to right, 
    rgba(0, 0, 0, 0.8) 20%, 
    rgba(0, 0, 0, 0.3) 30%, 
    rgba(0, 0, 0, 0.1) 60%
  );
  z-index: 1;
  pointer-events: none; /* Чтобы клики проходили сквозь псевдоэлемент */
}

/* Обеспечиваем правильное позиционирование текста */
.bg-gradient-effect .updates-item-text {
  position: relative;
  z-index: 2;
}

/* Общие стили для текста (уже должны быть в вашем CSS) */
.updates-item-text {
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  max-width: 60%;
  padding: 20px;
}
.updates-item-tex {
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  max-width: 60%;
  padding: 20px;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .bg-gradient-effect::before {
    background: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0.7) 0%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0) 100%
    );
  }
  
  .updates-item-text {
    max-width: 100%;
    padding: 15px;
  }
}
/* Блок интересных фактов (упрощенная версия без заголовков) */
.facts-box {
  background: var(--theme-section-bg);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 20px;
  margin: 25px 0;
  box-shadow: 0 4px 12px var(--theme-shadow);
}

.facts-header {
  color: var(--theme-accent);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 15px;
  text-align: center;
}

.facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.facts-item {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  padding: 15px;
  color: var(--theme-text);
  transition: transform 0.3s;
}

.facts-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px var(--theme-shadow);
}

.facts-text {
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
}


/* Стили для статуса */


.status-ongoing {
  background-color: #4CAF50; /* Зеленый для "Выходит" */
}

.status-completed {
  background-color: #AD1457; /* Темно-красный для "Завершен" */
}

.status-info {
  width: 100%;
  margin-top: 10px;
}

.status-announcement {
  background-color: rgba(106, 133, 65, 0.2);
  color: #6A8541;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 400;
  margin-bottom: 8px;
  border-left: 3px solid #6A8541;
}
.status-announcement.closed {
  background-color: rgba(173, 20, 87, 0.2); /* Темно-красный с прозрачностью */
  color: #e8e9ec; /* Темно-красный текст */
  border-left: 3px solid #ad1457; /* Темно-красная граница слева */
}
.status-announcement.air { 
  background-color: #4d9b6c; /* Темно-красный с прозрачностью */
  color: #e8e9ec;  /* Фиксированная ширина */
  margin: 0 auto;   
}
.highlight-date {
  color: #5692B7;
  font-weight: 500;
}

.highlight-date a {
  color: #5692B7;
  font-weight: 500;
}
.highlight-date a:hover {
  color: #ad1457;
  font-weight: 500;
}
 
 


/* Блок алфавита */
.alphabet-box {
  position: relative;              /* для привязки псевдоэлементов */
  padding-top: 80px;              /* высота верхнего изображения */
  padding-bottom: 110px;            /* высота нижнего изображения */
  background: var(--theme-alphabet-bg);
  border: 1px solid var(--theme-alphabet-border);
  border-radius: 6px;
    margin: 35px 0;
    padding: 10px; 
}
/* Стили для ссылки "Весь список" */
.alphabet-box > .letten {
    display: block;
    text-align: center;
    margin: 5px auto 0;
    color: var(--theme-alphabet-letter);
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    transition: all 0.2s;
    width: fit-content;
    padding: 8px 15px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    background: var(--theme-section-bg);
}

.alphabet-box > .letten:hover {
    background: var(--theme-accent);
    color: #fff;
    border-color: var(--theme-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--theme-shadow);
}
/*.alphabet-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-93%) translateY(-95%);
  width: 100%;                   
  height: 80px;                  
  background: url("../img/random.webp") no-repeat center top;
  background-size: contain;
  pointer-events: none;           
  z-index: 0;                    
}*/

.alphabet-box2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-93%);
  width: 100%;                     /* или нужная ширина */
  height: 80px;                   /* высота верхнего изображения */
  background: url("../img/top-bg.webp") no-repeat center top;
  background-size: contain;
  pointer-events: none;            /* отключаем клики */
  z-index: 0;                      /* под содержимым */
}
/* Нижнее фон-изображение */
.alphabet-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 7%;
  transform: translateX(-50%) translateY(-20%);
  width: 100%;                     /* или нужная ширина */
  height: 56px;                    /* высота нижнего изображения */
  background: url("../img/bottom-bg.webp") no-repeat center bottom;
  background-size: contain;
  pointer-events: none;            /* отключаем клики */
  z-index: 2;                      /* под содержимым */
}

/* Чтобы содержимое было над фоном, поднимем его выше по z-index */
.alphabet-box > * {
  position: relative;
  z-index: 1;
}
.alphabet-title {
    text-transform: uppercase;
    color: var(--theme-alphabet-title);
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 400;
}

.alphabet-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

/* Стили букв */
.letter {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: var(--theme-alphabet-letter);
    text-decoration: none;
    font-size: 14px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    transition: all 0.2s;
}

.letter:hover {
    background: var(--theme-accent);
    color: #fff;
    border-color: var(--theme-accent);
    transform: translateY(-2px);
}

/* Содержимое */
.notice-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-text);
    font-size: 15px;
}
 
/* Иконка */
.notice-icon {
    position: absolute;
    left:  30px; /* Сдвигаем влево за границы контейнера */
    top: 50%;
    transform: translateY(-50%);
    width: 65px;
    height: 58px;
    background: url('../img/casper.webp') no-repeat center;
    background-size: contain;
    z-index: 2; /* Поднимаем выше .notice-bar */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); /* Добавляем тень для выделения */
}

/* Ссылки */
.notice-link {
    background: rgba(var(--theme-accent-rgb), 0.2);
    color: var(--theme-text);
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s;
    padding: 3px 6px;
    margin: 3px 5px;
    border-radius: 3px;
}

.notice-link:hover {
    color: var(--theme-text);
    background: var(--theme-accent); 
}

/* Разделитель */
.notice-text {
    margin-left: 10%;
    flex: 1;
}
/* Voice Block - переименованные стили с game-card */
.voice-block {
  display: flex;
  flex-direction: column;
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
}

.voice-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px var(--theme-shadow);
}

.voice-poster {
  width: 100%;
  height: 200px; 
  border-bottom: 1px solid var(--theme-border);
}

.voice-details {
  padding: 15px;
}

.voice-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.voice-title {
  color: var(--theme-accent);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

.voice-badge {
  background: rgba(106, 133, 65, 0.2);
  color: #6A8541;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 13px;
  border-left: 3px solid #6A8541;
}

.voice-social a {
  color: var(--theme-link);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s;
}

.voice-social a:hover {
  color: var(--theme-accent);
}

.voice-genres {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  justify-content: center; 
  flex-wrap: wrap;
}

.voice-genre span {
  border: 1px solid var(--theme-accent);
  background: var(--theme-section-bg);
  padding: 6px 12px; /* Увеличенные отступы */
  border-radius: 3px;
  font-size: 11px;
  color: var(--theme-text);
  text-transform: uppercase;
  transition: all 0.3s;
}

.voice-genre:hover span {
  background: var(--theme-accent);
  color: white;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .voice-poster {
    height: 150px;
  }
  
  .voice-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Стили для игровых карточек */
.game-grid2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin: 20px 0;
}

/* Стили для игровых карточек */
.game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.game-card {
    display: flex;
    flex-direction: column;
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--theme-shadow);
}

.game-image {
    width: 100%;
    height: 220px;
    background-size: contain;
    background-position: center;
    border-bottom: 1px solid var(--theme-border);
}

.game-content {
    padding: 15px;
}

.game-title {
    color: var(--theme-accent);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.game-description {
    color: var(--theme-text);
    font-size: 14px;
    line-height: 1.4;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .game-grid {
        grid-template-columns: 1fr;
    }
    
    .game-image {
        height: 150px;
    }
}
/* Updates Block Styles */
.updates-container {
    background: var(--theme-section-bg);
    border-radius: 8px;
    padding: 15px;
    margin: 30px 0;
    box-shadow: 0 4px 12px var(--theme-shadow);
    color: var(--theme-text);
    box-shadow: rgba(142, 142, 142, 0.24) 0px 2px 4px 0px, rgba(142, 142, 142, 0.24) 0px 2px 16px 0px;
}

.updates-header {
    text-align: center;
    margin-bottom: 20px;
}

.updates-header h2 {
    color: var(--theme-accent);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.updates-subtitle {
    color: var(--theme-secondary);
    font-size: 16px;
    margin-bottom: 10px;
}

.updates-highlight {
    color: var(--theme-text);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
}

.updates-description {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--theme-secondary);
    margin-bottom: 20px;
}

.updates-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--theme-secondary), transparent);
    margin: 25px 0;
}


.updates-section-subtitle {
    color: var(--theme-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.updates-item {
    position: relative;
    margin-bottom: 10px;
    height: 80px;
    display: flex
;
    align-items: center;
    overflow: hidden;
    padding: 15px;
    border-radius: 5px;
    transition: 0.3s;
}

.updates-item:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 8px var(--theme-shadow);
}
.updates-item-title {
    font-size: 15px;
    color: var(--theme-text);
    font-weight: 400; 
}

.updates-item-title {
    font-size: 15px;
    color: var(--theme-tex);
    font-weight: 400; 
}
.updates-item-subtitle {
    font-size: 11px;
    color: var(--theme-accent);
    margin-bottom: 3px;
}

.updates-item-info {
    font-size: 13px;
    color: #95B6D0;
}

.updates-item.featured {
    background: var(--theme-season-card);
}

.updates-item.featpr {

    background: var(--theme-card);
    border-left: 8px solid #F93838;
}
.updates-item.featfin {
    background: var(--theme-update-item);
    border-left: 8px solid #669;
}
.updates-item.featnew {
    border-left: 8px solid #6A8541;
}
.updates-item-text {
    flex: 1;
    position: relative;
}

.updates-item-image {
    width: 230px;
    height: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.updates-item-image img {
    width: 100%; 
    height: 100%; 
    border: 1px solid var(--theme-border);
    border-radius: 5px;
    object-fit: cover;
}
.circle-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--theme-secondary);
    border-radius: 50%;
    margin: 0 10px;
    vertical-align: middle;
}
.dot-separator { padding: 0 5px; }
.updates-section h3 {
    color: var(--theme-accent);
    margin: 35px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--theme-border);
    position: relative;
    padding-left: 25px;
    color: var(--theme-accent);
    font-size: 16px;
    font-weight: 400; 
    text-transform: uppercase;
}

/*.updates-section h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Иконки для разных категорий */
/*.updates-section h3:nth-child(1)::before 
    background-image: url('../img/chapter08.webp');
}
*/
/*.updates-section h3:nth-child(3)::before {  
    background-image: url('../img/icon-premiere.svg');
}
*/
/*.updates-section h3:nth-child(5)::before {  
    background-image: url('../img/icon-new-release.svg');
}
*/
/*.updates-section h3:nth-child(7)::before {  
    background-image: url('../img/icon-finale.svg');
} */
.updates-featured-tag {
    position: absolute;
    top: 30%;
    right: 5%;
    background: var(--theme-accent);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px; 
    align-items: center;
}

.updates-dub {
    position: absolute; 
    bottom: 25%;
    right: 0;
    background: rgba(var(--theme-accent-rgb), 0.2);
    color: var(--theme-accent); 
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 15px;
    margin-top: 20px;    
}

.updates-grid-item { 
    justify-content: space-between;  
    background: var(--theme-update-item);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid var(--theme-border);  
}

.updates-category {
    font-size: 12px;
    color: var(--theme-accent);
    margin-bottom: 8px;
}

.updates-title {
    font-size: 16px;
    color: var(--theme-text);
    margin-bottom: 3px;
}

.updates-subtitle {
    font-size: 13px;
    color: var(--theme-accent);
    margin-bottom: 8px;
}

.updates-info {
    font-size: 12px;
    color: var(--theme-secondary);
    margin-bottom: 5px;
}

.ads {
    background-color: var(--theme-bg);
    padding: 15px;
    text-align: center; 
}

.updates-featured-title {
    font-size: 16px; 
}

.updates-featured-subtitle {
    font-size: 12px;
    color: var(--theme-accent); 
}

.updates-featured {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--theme-update-featured);
    padding: 5px 0 0 20px;
    border-radius: 5px;
    margin: 5px 0 7px 0;
    border-left: 4px solid var(--theme-accent);
    text-align: center;  
} 

.updates-featured-content {
    flex: 1;
    text-align: left;
}

.updates-featured-image {
    width: 300px;
    flex-shrink: 0;
}

.updates-featured-image img {
    width: 80%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--theme-border);
}

.updates-grid-content {
    flex: 1;
}

.updates-grid-image {
    width: 80px;
    flex-shrink: 0;
}

.updates-grid-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--theme-border);
}
/* Адаптация для мобильных */
@media (max-width: 768px) {
  .updates-item {
    height: 120px;
    background-position: center center !important;
  }
  
  .updates-item-text {
    max-width: 100%;
    background: rgba(0, 0, 0, 0.5); /* Фон с прозрачностью для мобилок */
    padding: 10px;
    border-radius: 5px;
  }
  
  .updates-item-title {
    font-size: 18px;
    opacity: 1;
  }
  
  .updates-item-subtitle {
    font-size: 14px;
    opacity: 0.9;
  }
}
/* Сериалы по алфавиту */
.series-container {
    background: var(--theme-section-bg);
    border-radius: 8px;  
    padding: 0 10px;
    margin: 30px 0;
    box-shadow: 0 4px 12px var(--theme-shadow);
}

.series-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.series-header h2 {
    color: var(--theme-accent);
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 15px;
}

.series-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.series-sort span {
    color: var(--theme-secondary);
    font-size: 14px;
}

.sort-btn {
    background: var(--theme-card);
    color: var(--theme-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
}

.sort-btn:hover, .sort-btn.active {
    background: var(--theme-accent);
    color: #fff;
}

.series-table {
    width: 100%;
    border-collapse: collapse;
}

.series-table-header {
    display: flex;
    background: var(--theme-card);
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 5px;
}

.series-th {
    flex: 1;
    color: var(--theme-accent);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 5px;
    position: relative;
}

.series-th:hover {
    color: var(--theme-text);
}

.series-th::after {
    content: "↕";
    margin-left: 5px;
    opacity: 0.3;
}

.series-table-body {
    display: flex;
    flex-direction: column;
}

.series-row {
    display: flex;
    background: var(--theme-card);
    border-radius: 4px;
    padding: 12px 15px;
    margin-bottom: 5px;
    text-decoration: none;
    transition: all 0.3s;
    align-items: center;
}

.series-row:hover {
    background: var(--theme-section-bg);
    transform: translateX(3px);
}
.series-td, .series-th {
    word-wrap: break-word; /* Перенос длинных слов */
    overflow-wrap: break-word; /* Современная альтернатива */
    padding: 8px 5px; /* Уменьшенные отступы */
    white-space: normal !important; /* Разрешаем перенос строк */
    hyphens: auto; /* Автоматическая расстановка переносов */
}
.series-td {
    flex: 1;
    color: var(--theme-text);
    font-size: 14px;
    padding: 5px;
}

.series-td[data-title="Рейтинг"] {
    color: var(--theme-accent);
    font-weight: 500;
}
/* Специальные стили для колонки статуса */
.series-td[data-title="Статус"] {
    min-width: 90px; /* Минимальная ширина */
    font-size: 13px; /* Чуть меньший размер шрифта */
}
/* Для названий разрешаем перенос строк */
.series-td[data-title="Название"], 
.series-td[data-title="Оригинал"] {
    line-height: 1.4; /* Увеличиваем межстрочный интервал */
}

.status-badge {
    text-transform: uppercase; 
  border-radius: 4px;
  font-weight: 400; 
  color: white; 
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%; 
    padding: 2px 6px; 
    font-size: 11px; 
}

.status-badge.finished {
    background: rgba(102, 102, 153, 0.2);
    color: #669;
    border: 1px solid #669;
}

.status-badge.airing {
    background: rgba(106, 133, 65, 0.2);
    color: #6A8541;
    border: 1px solid #6A8541;
}

.status-badge.paused {
    background: rgba(var(--theme-accent-rgb), 0.2);
    color: var(--theme-accent);
    border: 1px solid var(--theme-accent);
}
.series-table-header, .series-row {
     display: grid;
    grid-template-columns: 30% 30% 6% 9% 9% 16%; /* Новые пропорции колонок */
    gap: 10px;
    align-items: start; /* Выравнивание по верхнему краю */
}

.series-th, .series-td {
    flex: none;
    width: auto;
}
.hover-img {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.hover-img .hover-img-preview {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  padding: 4px;
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  box-shadow: 0 2px 8px var(--theme-shadow);
  z-index: 100;
  white-space: nowrap;
}

.hover-img .hover-img-preview img {
  display: block;
  max-width: 620px;
  height: auto;
}

.hover-img:hover .hover-img-preview {
  display: block;
}

/* Стили для страницы 404 */
.error-container {
    background: var(--theme-section-bg);
    border-radius: 8px;
    padding: 40px 20px;
    margin: 30px 0;
    text-align: center;
    box-shadow: 0 4px 12px var(--theme-shadow);
    border: 1px solid var(--theme-border);
}

.error-content {
    max-width: 600px;
    margin: 0 auto;
}

.error-image {
    margin-bottom: 30px;
}

.error-image img {
    max-width: 600px;
    height: auto;
}

.error-container h1 {
    color: var(--theme-accent);
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 400;
}

.error-message {
    color: var(--theme-text);
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.error-button {
    background: var(--theme-card);
    color: var(--theme-accent);
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s;
    border: 1px solid var(--theme-border);
}

.error-button:hover {
    background: var(--theme-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--theme-shadow);
}

.error-search {
    margin-top: 30px;
}

.error-search p {
    color: var(--theme-secondary);
    margin-bottom: 15px;
}

.error-search form {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
}

.error-search input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--theme-border);
    border-radius: 5px 0 0 5px;
    background: var(--theme-card);
    color: var(--theme-text);
    font-size: 16px;
    outline: none;
}

.error-search button {
    background: var(--theme-accent);
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.error-search button:hover {
    background: var(--theme-link);
}

@media (max-width: 768px) {
    .error-container h1 {
        font-size: 28px;
    }
    
    .error-message {
        font-size: 16px;
    }
    
    .error-image img {
        max-width: 200px;
    }
    
    .error-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .series-table-header {
        display: none;
    }
 
    .series-row {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        padding-left: 100px;
        grid-template-columns: none;
    }
    
    .series-td {
        flex: 0 0 50%;
        margin-bottom: 5px;
    }
    
    .series-td[data-title="Название"] {
        flex: 0 0 100%;
    }
}

@media (max-width: 768px) {
    .series-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .series-sort {
        margin-top: 10px;
    }
    
    .series-table-header {
        display: none;
    }
    
    .series-row {
        flex-wrap: wrap;
        position: relative;
        padding-left: 100px;
    }
    
    .series-td {
        flex: 0 0 50%;
        margin-bottom: 5px;
    }
    
    .series-td::before {
        content: attr(data-title);
        display: inline-block;
        width: 80px;
        color: var(--theme-secondary);
        margin-right: 10px;
    }
    
    .series-td[data-title="Название"] {
        flex: 0 0 100%;
        font-weight: 500;
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .series-td[data-title="Название"]::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .series-row {
        padding-left: 0;
    }
    
    .series-td {
        flex: 0 0 100%;
    }
}

@media (max-width: 768px) {
    .updates-grid {
        grid-template-columns: 1fr;
    }
    
    .updates-header h2 {
        font-size: 20px;
    }
    
    .updates-item-title {
        font-size: 16px;
    }
} 
@media (max-width: 768px) {
    .updates-item,
    .updates-grid-item,
    .updates-featured {
        flex-direction: column;
        gap: 15px;
    }
    
    .updates-item-image,
    .updates-grid-image,
    .updates-featured-image {
        width: 100%;
        order: -1;
    }
    
    .updates-item-image img,
    .updates-grid-image img,
    .updates-featured-image img {
        max-width: 200px;
        margin: 0 auto;
        display: block;
    }
}
/* Добавляем стили для вложенных подменю */
.mobile-submenu .mobile-submenu {
    padding-left: 25px;
    border-left: 2px solid var(--theme-accent);
    margin-top: 5px;
    margin-bottom: 5px;
}

.mobile-submenu .menu-item[data-submenu] > a {
    padding-left: 35px;
    background-position: 10px center;
}

/* Улучшаем видимость вложенных пунктов */
.mobile-submenu .menu-item a {
    font-size: 13px;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.05);
}
@media (max-width: 768px) {
    .notice-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* Стили для блока рандомных мультсериалов */
.random-series {
    background: var(--theme-section-bg);
    border-radius: 8px;
    padding: 20px; 
    box-shadow: 0 4px 12px var(--theme-shadow);
    border: 1px solid var(--theme-border);
}

.random-series-header {
    color: var(--theme-accent);
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 400;
}
.random-series-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}
.random-series-item {
    background: var(--theme-card);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    transition: all 0.3s;
     display: flex;              /* Включаем flex-контейнер */
  flex-direction: row;        /* Элементы выстраиваются в строку */
  align-items: center;        /* Вертикальное выравнивание по центру */
  gap: 20px;
    height: auto;
    text-decoration: none;
    color: inherit;
}

.random-series-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--theme-shadow);
}
/* Изображение мультсериала */
.random-series-image {
  flex-shrink: 0;             /* Запрещаем уменьшать блок с изображением */
  width: 100px;               /* Фиксированная ширина для изображения */
  height: 100px;              /* Фиксированная высота для изображения */
  overflow: hidden;
}

.random-series-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.random-series-content {
  display: flex;
    padding: 5px 5px 5px 0;
  flex-direction: column;     /* Название над описанием */
  justify-content: center;    /* Вертикальное выравнивание текста */
}

.random-series-title {
    color: var(--theme-accent);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
}

.random-series-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.random-series-title a:hover {
    color: var(--theme-accent);
}

.random-series-description {
    color: var(--theme-update);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    flex: 1;
}

/* Адаптация для планшетов (4 в ряд) */
@media (max-width: 1024px) {
    .random-series-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .random-series-image {
        height: 180px;
    }
    
    .random-series-title {
        font-size: 15px;
    }
    
    .random-series-description {
        font-size: 12px;
    }
}

/* Адаптация для средних экранов (3 в ряд) */
@media (max-width: 768px) {
    .random-series-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .random-series {
        padding: 15px;
        margin: 20px 0;
    }
    
    .random-series-header {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .random-series-image {
        height: 140px;
    }
    
    .random-series-content {
        padding: 12px;
    }
    
    .random-series-title {
        font-size: 13px;
        margin-bottom: 6px;
    }
    

    .random-series-description {
        font-size: 10px;
    }
}

/* Адаптация для мобильных (2 в ряд) */
@media (max-width: 480px) {
    .random-series-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .random-series {
        padding: 12px;
        margin: 15px 0;
    }
    
    .random-series-header {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .random-series-image {
        height: 120px;
    }
    
    .random-series-content {
        padding: 10px;
    }
    
    .random-series-title {
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    .random-series-description {
        font-size: 10px;
        line-height: 1.3;
    }
}

/* Адаптация для очень маленьких экранов (1 в ряд) */
@media (max-width: 320px) {
    .random-series-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .random-series-item {
        flex-direction: row;
        height: 120px;
    }
    
    .random-series-image {
        width: 100px;
        height: 100%;
        flex-shrink: 0;
    }
    
    .random-series-content {
        padding: 8px;
        justify-content: center;
    }
    
    .random-series-title {
        font-size: 12px;
        text-align: left;
    }
    
    .random-series-description {
        font-size: 10px;
        text-align: left;
    }
}
/* Упрощенный блок рандомных мультсериалов */
.random-series-simple {
    background: var(--theme-section-bg);
    border-radius: 8px;
    padding: 20px;
    margin: 25px 0;
    box-shadow: 0 4px 12px var(--theme-shadow);
    border: 1px solid var(--theme-border);
}

.random-series-simple-header {
    color: var(--theme-accent);
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 18px;
    text-align: center;
    font-weight: 400;
}

/* Контейнер для горизонтального отображения - DESKTOP: 6 В РЯД */
.random-series-simple-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
}

/* Отдельный элемент мультсериала - вся карточка является ссылкой */
.random-series-simple-item {
    background: var(--theme-card);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    height: auto;
    text-decoration: none;
    color: inherit;
}

.random-series-simple-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px var(--theme-shadow);
}

/* Изображение мультсериала */
.random-series-simple-image {
    width: 100%; 
    overflow: hidden;
}

.random-series-simple-image img {
    width: 100%; 
    object-fit: contain;
    display: block;
    background: var(--theme-section-bg);
}

/* Контент с названием */
.random-series-simple-content {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.random-series-simple-title {
    color: var(--theme-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    margin: 0;
}

/* Адаптация для больших планшетов (5 в ряд) */
@media (max-width: 1200px) {
    .random-series-simple-container {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }
}

/* Адаптация для средних планшетов (4 в ряд) */
@media (max-width: 1024px) {
    .random-series-simple-container {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .random-series-simple-image {
        height: 140px;
    }
    
    .random-series-simple-title {
        font-size: 13px;
    }
}

/* Адаптация для мобильных (3 в ряд) */
@media (max-width: 768px) {
    .random-series-simple-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .random-series-simple {
        padding: 15px;
        margin: 20px 0;
    }
    
    .random-series-simple-header {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .random-series-simple-image {
        height: 120px;
    }
    
    .random-series-simple-content {
        padding: 10px;
    }
    
    .random-series-simple-title {
        font-size: 12px;
    }
}

/* Адаптация для маленьких мобильных (2 в ряд) */
@media (max-width: 480px) {
    .random-series-simple-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .random-series-simple-image {
        height: 100px;
    }
    
    .random-series-simple-content {
        padding: 8px;
    }
    
    .random-series-simple-title {
        font-size: 11px;
    }
}

/* Адаптация для очень маленьких экранов (1 в ряд) */
@media (max-width: 320px) {
    .random-series-simple-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .random-series-simple-item {
        flex-direction: row;
        height: 80px;
    }
    
    .random-series-simple-image {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
    
    .random-series-simple-content {
        padding: 8px;
        justify-content: center;
        align-items: flex-start;
    }
    
    .random-series-simple-title {
        font-size: 12px;
        text-align: left;
    }
}

/* Футер */
 
footer {
  border: 1px solid var(--theme-border);
  background-color: var(--theme-card);
  color: var(--theme-text);
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
    background: var(--theme-card) url(../img/fb.webp) no-repeat 81% 50%;
    background-size: 170px auto;
  gap: 30px;
}

.footer-left{
  position: relative;
  flex: 1 1 32%;
    color: var(--theme-accent);
    font-size: 13px;
    font-weight: 400;
  min-width: 220px;
  display: flex;
  align-items: flex-start;
  padding-left: 85px; /* место для иконки */
}
.footer-center {
    color: var(--theme-text);
    font-size: 13px; 
    font-weight: 400;
  position: relative;
  flex: 1 1 34%;
  min-width: 220px;
  display: flex;
  align-items: flex-start;
  padding-left: 75px; /* место для иконки */
  flex-direction: column;     /* Вертикальное выравнивание */
  justify-content: center;    /* центр по вертикали — замените на flex-start (вверх) или flex-end (вниз) */
  align-items: left;        /* центрировать по горизонтали */
  text-align: center;          /* высота блока — укажите нужную */
    
}

/* Фоновые картинки для левой и центральной части */
.footer-left::before {
  content: "";
  position: absolute;
  left: 0; 
  width: 69px;
  height: 48px;
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
}
.footer-center::before {
  content: "";
  position: absolute;
  left: 0;
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  border-radius: 4px;
}

.footer-left::before {
  background-image: url("../img/iconfl.webp"); /* свой путь */
}
.footer-center::before {
  background-image: url("../img/iconfc.webp"); /* свой путь */
}

.footer-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.footer-right img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: transform 0.2s;
}

.footer-right img:hover {
  transform: scale(1.07);
}

/* Адаптация для мобильных */
/* Моб. версия */
@media (max-width: 900px) {
  footer {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 16px 8px;
    text-align: center;
  }
  .footer-left,
  .footer-center,
  .footer-right {
    min-width: 0;
    width: 100%;
    padding-left: 0 !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 14px;
  }
  .footer-left,
  .footer-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
    min-height: 48px;
    padding: 0;
  }
  .footer-left::before,
  .footer-center::before {
    content: "";
    position: static;
    width: 56px;
    height: 39px;
    margin-right: 10px;
    margin-left: 0;
    left: auto;
    top: auto;
    flex-shrink: 0;
    display: inline-block;
  }
  .footer-center {
    flex-direction: row;
  }
  .footer-right {
    justify-content: center;
    margin: 6px 0 0 0;
    gap: 14px;
  }
}
 

.footer-content {
    flex: 1;
    text-align: center;
    z-index: 2;
}

.footer-title {
    font-size: 18px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.footer-links {
    font-size: 12px; 
    color: var(--theme-secondary);
}

.footer-copyright {
    font-size: 12px;
    color: var(--theme-secondary);
}

.footer-partner {
    z-index: 2;
}

.footer-partner img {
    height: 40px;
    transition: transform 0.3s;
}

.footer-partner img:hover {
    transform: scale(1.05);
}

/* Стили для переключателя темы */

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-border);
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--theme-accent);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

 
@media (max-width: 768px) {
    header {
        padding: 10px;
        flex-wrap: wrap;
    }
    
    .header-images {
        display: none;
    }
    
    .theme-toggle {
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .breadcrumbs {
        font-size: 12px;
        padding: 6px 10px;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .footer-bg {
        display: none;
    }
}

@media (max-width: 768px) {
    .breadcrumbs {
        font-size: 12px;
        padding: 6px 10px;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    @media (max-width: 768px) {
        .header-categories {
            display: flex;
            gap: 5px;
            overflow-x: auto;
            padding-bottom: 5px;
            width: 100%;
            margin-left: 20%; 
            order: 3; 
            margin-top: 10px; 
        }
        
        .header-categories a {
            padding: 8px 12px;
            font-size: 12px;
            white-space: nowrap;
            flex-shrink: 0;
            padding-left: 40px;
            background-size: 30px !important;
        }
        
        .burger-menu {
            margin-left: auto;
        }
        
        .header-images {
            display: none;
        }
        
        .burger-menu {
            display: flex;
        }
        
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            z-index: 100;
            transform: translateX(-100%);
            box-shadow: 2px 0 10px var(--theme-shadow);
        }
        
        .sidebar.active {
            transform: translateX(0);
        }
        
        .sidebar2 {
    width: 380px; /* Уменьшаем ширину для мобильных */
    overflow-y: auto; /* Добавляем вертикальную прокрутку */
    height: 100vh; 
            position: fixed;
            top: 0;
            left: 0; 
            z-index: 100;
            transform: translateX(-100%);
            box-shadow: 2px 0 10px var(--theme-shadow);
        }
        
        .sidebar2.active {
            transform: translateX(0);
        }
        
        .main-content {
            max-width: 100%;
            padding: 15px;
        }
        
        footer {
            flex-direction: column;
            text-align: center;
            padding: 20px;
            height: auto;
            overflow: visible;
        }

        .footer-bg {
            width: 100%;
            height: 100px;
            opacity: 0.2;
        }

        .footer-content {
            margin: 15px 0;
        }

        .footer-partner {
            margin-top: 15px;
        }
    }
    
    @media (max-width: 480px) {
        .logo {
            font-size: 20px;
        }
        
        .spa {
            padding: 10px;
            font-size: 14px;
        }
        
        footer {
            padding: 15px;
        }
        
        .sidebar a {
            padding: 10px 12px;
            font-size: 12px;
        }
        
        .footer-title {
            font-size: 16px;
        }
        
        .footer-links {
            font-size: 13px;
        }
    }
}