:root{--hdr-h:72px}   /* высота закреплённой шапки — от неё считаются отступы */

/* Горизонтальной прокрутки на сайте быть не должно: из-за неё закреплённая
   шапка и нижняя панель визуально «съезжают». overflow-x на одном body
   не спасает — html тоже должен быть закрыт. */

/* ============================================================
   ТАЧ-УСТРОЙСТВА: убираем системную подсветку и задержку нажатия
   ============================================================ */
*{-webkit-tap-highlight-color:transparent}

/* синий прямоугольник при тапе — это выделение текста внутри карточки.
   В интерактивных блоках текст выделять не нужно, в статьях и полях — нужно. */
a,button,.card,.cat-card,.top-card,.prem-card,.fav-card,.sr-card,
.story,.story-add,.tab-item,.side-item,.fsel,.fchip,.type-card,
.ep-card,.season-tab,.chip,.arrow,.icon-btn{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
/* браузер не ждёт двойного тапа — нажатие срабатывает сразу */
a,button,input,select,textarea,label,.card,.cat-card,.top-card,.prem-card,
.fav-card,.sr-card,.story,.tab-item,.side-item,.fsel,.fchip,.type-card,.p-act{
  touch-action:manipulation;
}

html{overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;max-width:100%}

/* ============================================================
   КАДР — единый стиль модальных окон.
   Подключается последним, поэтому выравнивает все всплывающие
   окна под одну сетку: фон, размытие, радиусы, кнопки закрытия.
   ============================================================ */

/* ---- служебное ----
   Атрибут hidden должен побеждать любые display из классов,
   иначе скрытые блоки (подсказки, пустые состояния) остаются видимыми. */
[hidden]{display:none !important}

/* ---- подложка ---- */
.auth-overlay,
.modal,
.editor-overlay,
.post-overlay,
.article-overlay,
.kp-overlay{
  background:rgba(5,7,11,.80);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.post-overlay,
.article-overlay{
  background:rgba(5,7,11,.94);
}
.kp-overlay{
  background:rgba(3,5,9,.93);
}

/* ---- панель ---- */
.auth-box,
.modal-box,
.editor,
.kp-stage{
  border-radius:22px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.kp-stage{background:#03050a}

/* появление */
@keyframes kadr-pop{
  from{transform:translateY(10px) scale(.97);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.auth-overlay.open .auth-box,
.modal.open .modal-box,
.editor-overlay.open .editor{
  animation:kadr-pop .26s cubic-bezier(.2,.8,.3,1);
}

/* ---- заголовки внутри окон ---- */
.auth-box h2,
.editor h2{
  font-family:'Unbounded',sans-serif;
  font-weight:800;
  letter-spacing:.01em;
}

/* ---- кнопка закрытия ---- */
.auth-close,
.modal-close,
.kp-close,
.player-close{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(20,25,37,.82);
  border:1px solid var(--line);
  color:var(--text);
  transition:border-color .2s,color .2s,background .2s;
}
.auth-close:hover,
.modal-close:hover,
.kp-close:hover,
.player-close:hover{
  border-color:var(--gold);
  color:var(--gold);
  background:var(--surface-2);
}

/* ---- поля ввода ---- */
.editor .ed-field input[type=text],
.editor .ed-field select,
.editor .ed-field textarea,
.c-form textarea,
.comment-form textarea{
  border-radius:13px;
  border:1px solid var(--line);
  background:var(--surface-2);
  transition:border-color .2s,box-shadow .2s;
}
.editor .ed-field input[type=text]:focus,
.editor .ed-field select:focus,
.editor .ed-field textarea:focus,
.c-form textarea:focus,
.comment-form textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,181,71,.16);
}

/* ---- кнопки в окнах ---- */
.auth-submit,
.ed-save,
.c-send,
.comment-send{
  border-radius:13px;
  font-weight:800;
  color:#1a1206;
  background:var(--grad);
  box-shadow:0 6px 24px rgba(255,140,60,.28);
  transition:transform .2s,box-shadow .2s;
}
.auth-submit:hover,
.ed-save:hover,
.c-send:hover,
.comment-send:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(255,140,60,.4);
}
.ed-cancel{
  border-radius:13px;
  border:1px solid var(--line);
  transition:background .2s,border-color .2s;
}
.ed-cancel:hover{background:var(--surface-2);border-color:rgba(255,255,255,.16)}

/* ---- прокрутка внутри окон ---- */
.editor::-webkit-scrollbar,
.post-overlay::-webkit-scrollbar,
.article-overlay::-webkit-scrollbar{width:8px}
.editor::-webkit-scrollbar-thumb,
.post-overlay::-webkit-scrollbar-thumb,
.article-overlay::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);border-radius:var(--r-xs);
}

@media (max-width:1024px){
  .auth-box,
  .editor{border-radius:var(--radius)}
}
@media (prefers-reduced-motion:reduce){
  .auth-overlay.open .auth-box,
  .modal.open .modal-box,
  .editor-overlay.open .editor{animation:none}
}

/* ---- редактор (общий) ---- */
.editor-overlay{
  position:fixed;inset:0;z-index:750;display:grid;place-items:center;padding:20px;overflow-y:auto;
  background:rgba(5,7,11,.80);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.editor-overlay.open{opacity:1;visibility:visible}
.editor{
  width:min(620px,100%);border-radius:22px;background:var(--surface);border:1px solid var(--line);
  padding:26px;max-height:92vh;overflow-y:auto;box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.editor h2{font-family:'Unbounded',sans-serif;font-size:22px;font-weight:800;margin-bottom:6px}
.editor .hint-text{color:var(--muted);font-size:13.5px;font-weight:600;margin-bottom:20px}
.ed-field{margin-bottom:16px}
.ed-field label{display:block;font-weight:800;font-size:13px;margin-bottom:8px}
.ed-field input[type=text],.ed-field select,.ed-field textarea{
  width:100%;padding:12px 14px;border-radius:13px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:14.5px;
  transition:border-color .2s,box-shadow .2s;
}
.ed-field textarea{min-height:170px;resize:vertical;line-height:1.6}
.ed-field input:focus,.ed-field select:focus,.ed-field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,181,71,.16);
}
.ed-field .note{color:var(--muted);font-size:12px;font-weight:600;margin-top:7px}
.ed-cover{display:flex;gap:14px;align-items:center}
.ed-cover-prev{
  width:120px;height:76px;border-radius:var(--r-sm);flex-shrink:0;border:1px solid var(--line);
  background-image:var(--poster,none);background-size:cover;background-position:center;
  background-color:var(--surface-2);display:grid;place-items:center;color:var(--muted);font-size:11px;font-weight:700;
}
.ed-file{
  padding:11px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);
  font-weight:800;font-size:13.5px;cursor:pointer;transition:.2s;display:inline-block;
}
.ed-file:hover{border-color:var(--gold);color:var(--gold)}
.ed-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}
.ed-cancel{padding:12px 20px;border-radius:13px;border:1px solid var(--line);font-weight:800;font-size:14px;transition:.2s}
.ed-cancel:hover{background:var(--surface-2);border-color:rgba(255,255,255,.16)}
.ed-save{
  padding:12px 24px;border-radius:13px;font-weight:800;font-size:14px;color:#1a1206;background:var(--grad);
  box-shadow:0 6px 24px rgba(255,140,60,.28);transition:transform .2s,box-shadow .2s;
}
.ed-save:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(255,140,60,.4)}
.ed-msg{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--coral)}
.ed-msg.ok{color:#4ad991}
.editor-overlay.open .editor{animation:kadr-pop .26s cubic-bezier(.2,.8,.3,1)}
@media (max-width:1024px){ .editor{padding:20px;border-radius:var(--radius)} }

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ: шапка и нижняя навигация (общее для всех страниц)
   ============================================================ */
@media (max-width:1024px){

  /* шапка: меню слева, лого по центру, поиск справа */
  header{
    padding:14px var(--pad-x);gap:0;justify-content:space-between;
    background:linear-gradient(180deg,rgba(11,14,19,.96),rgba(11,14,19,.78) 70%,transparent);
    border-bottom:0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
  header.scrolled{background:rgba(11,14,19,.96);border-bottom:1px solid var(--line)}
  header>.brand{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-size:22px;letter-spacing:.16em;
  }
  header .burger{margin-right:auto}
  header .head-right{margin-left:auto}
  .burger,.head-right .search-btn{
    width:42px;height:42px;border-radius:var(--r-md);background:transparent;border:0;color:var(--text);
  }
  /* шапка перестала быть прозрачной поверх контента */
  header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.35)}
  .burger:hover,.head-right .search-btn:hover{background:rgba(255,255,255,.07)}

  /* нижняя навигация — закреплена у нижней кромки, только иконки.
     Плавающая «таблетка» и сжатие при прокрутке убраны: кнопки
     всегда на одном месте, в них проще попадать не глядя. */
  body{padding-bottom:82px}
  .mobile-tabbar{
    display:flex;align-items:center;gap:0;
    left:0;right:0;width:auto;max-width:none;
    bottom:0;transform:none;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border-radius:0;border:none;border-top:1px solid var(--line);
    background:rgba(15,18,26,.96);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:0 -8px 28px rgba(0,0,0,.35);
  }

  /* только иконки — подписи убраны */
  .mobile-tabbar .tab-item{
    flex:1 1 0;width:auto;min-width:0;      /* кнопки делят ширину поровну */
    height:52px;
    padding:0;gap:0;border-radius:16px;
    display:grid;place-items:center;
  }
  /* подписи скрыты визуально, но остаются для скринридеров */
  .mobile-tabbar .tab-item span{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .mobile-tabbar .tab-item svg{width:30px;height:30px}
  /* подсветку рисует отдельный элемент — он плавно переезжает между кнопками */
  .mobile-tabbar .tab-item{position:relative;z-index:1;transition:color .25s}
  .mobile-tabbar .tab-item.active{color:var(--gold);background:transparent}
  .tab-ind{
    position:absolute;top:0;left:0;z-index:0;pointer-events:none;
    border-radius:16px;background:rgba(255,181,71,.14);
    opacity:0;
    /* подсветка перемещается мгновенно — без анимации перехода */
    transition:opacity .2s;
  }
  .tab-ind.ready{opacity:1}
  .mobile-tabbar .tab-item:active{background:rgba(255,255,255,.05)}

  /* профиль обёрнут в .profile-wrap с инлайновым flex:1 — выравниваем */
  .mobile-tabbar .profile-wrap{flex:1 1 0!important;width:auto!important;min-width:0;display:block!important}
  .mobile-tabbar .profile-wrap .tab-item{width:100%!important}
  .tabbar-menu{bottom:calc(100% + 16px);right:0}
}
@media (max-width:420px){
  .mobile-tabbar .tab-item svg{width:28px;height:28px}
}

/* ---- горизонтальные карусели на тач-устройствах ---- */
@media (max-width:1024px){
  .row,.ep-row,.tile-row{
    /* свайп внутри карусели не тянет всю страницу вбок */
    overscroll-behavior-x:contain;
    /* мягкая привязка вместо жёсткой — не дёргает при инерции */
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  /* стрелки прокрутки на телефоне не нужны */
  .row-wrap .arrow{display:none}
}

/* ---- карточки фильмов на телефоне: компактнее и с многоточием ---- */
@media (max-width:1024px){
  .card .meta{gap:7px;margin-top:10px}
  .card .rate-chip{padding:3px 7px;font-size:11.5px;border-radius:7px}
  .card .title{
    font-size:13px;line-height:1.25;
    min-width:0;                      /* иначе многоточие во flex не работает */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .card .sub{
    font-size:11px;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}
@media (max-width:420px){
  .card .rate-chip{font-size:11px;padding:3px 6px}
  .card .title{font-size:12.5px}
  .card .sub{font-size:10.5px}
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ: компактные отступы (общее для всех страниц)
   ============================================================ */
@media (max-width:1024px){
  :root{--pad-x:14px}

  /* секции ближе друг к другу */
  section{padding:17px 0 3px}
  .sec-head{gap:10px;margin-bottom:13px}
  .sec-head h2{font-size:20px;line-height:1.2}
  .sec-head .all{font-size:13px}

  /* карусели: меньше зазоры между карточками и снизу */
  .row{gap:11px;padding:4px var(--pad-x) 18px}
  .ep-row{gap:11px;padding:4px var(--pad-x) 18px}

  /* заголовки страниц */
  .page-head{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .news-head{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .feed{padding-left:var(--pad-x);padding-right:var(--pad-x);gap:18px}

  /* каталог */
  .type-tabs{padding:16px var(--pad-x) 0;gap:8px}
  .tile-grid{gap:10px}
  .cat-grid{gap:20px 11px}
  .filter-panel{padding-left:var(--pad-x);padding-right:var(--pad-x)}

  /* подвал */
  footer{padding:32px var(--pad-x) 26px}
}

@media (max-width:420px){
  :root{--pad-x:12px}
  section{padding:15px 0 3px}
  .sec-head{margin-bottom:11px}
  .sec-head h2{font-size:18.5px}
  .row,.ep-row{gap:9px;padding-bottom:15px}
  .cat-grid{gap:18px 9px}
}

/* ---- метка сторис на телефоне компактнее ---- */
@media (max-width:1024px){
  .story-tag{
    top:6px;left:6px;
    font-size:7.5px;letter-spacing:.09em;
    padding:2px 5px;border-radius:5px;
  }
}
@media (max-width:420px){
  .story-tag{font-size:7px;padding:2px 4px;letter-spacing:.07em}
}

/* ============================================================
   ТАЧ-УСТРОЙСТВА: убираем «залипающие» эффекты наведения.
   На телефоне после тапа браузер оставляет состояние :hover,
   поэтому карточка так и остаётся приподнятой и подсвеченной.
   ============================================================ */
@media (hover:none){
  /* карточки и плитки не приподнимаются */
  .card:hover,.cat-card:hover,.top-card:hover,.fav-card:hover,
  .search-card:hover,.sr-card:hover,.story:hover,.story-add:hover,
  .prem-card:hover,.p-card:hover,.tile:hover,.ep-card:hover,
  .post:hover,.premiere:hover{
    transform:none;
  }
  /* и не подсвечиваются рамкой */
  .card:hover .poster,.cat-card:hover .poster,.fav-card:hover .poster,
  .ep-card:hover .ep-thumb{border-color:var(--line)}
  .prem-card:hover,.p-card:hover,.tile:hover,.post:hover,.story-add:hover{
    border-color:var(--line);
  }
  .tile:hover::after{opacity:.5}
  .story-add:hover{color:var(--muted);background:var(--surface)}

  /* кнопки не «подпрыгивают» */
  .cta:hover,.btn-play:hover,.auth-submit:hover,.cab-admin-btn:hover,
  .ed-save:hover,.c-send:hover,.comment-send:hover,.new-post-btn:hover,
  .hm-cta:hover,.prem-go:hover,.kd-ok:hover,.hm-fav:hover,.prem-fav:hover{
    transform:none;
  }

  /* всплывающее превью при наведении — только для мыши */
  .preview{display:none!important}
}

/* ---- открытый сторис на телефоне: на весь экран, без стрелок ---- */
@media (max-width:1024px){
  .modal{padding:0}
  .modal-box{
    width:100vw;max-width:none;
    height:100vh;height:100dvh;max-height:none;
    aspect-ratio:auto;
    border-radius:0;border:0;
  }
  /* листаем свайпом — стрелки на телефоне лишние */
  .modal-nav{display:none}
  .modal-bars{top:calc(16px + env(safe-area-inset-top));left:12px;right:12px}
  .modal-close{top:calc(46px + env(safe-area-inset-top));right:12px}
  .modal-info{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* ---- полосы прокрутки в каруселях не показываем ---- */
.row,.ep-row,.tile-row,.cat-row,.season-tabs,.type-tabs,.news-filters{
  scrollbar-width:none;-ms-overflow-style:none;
}
.row::-webkit-scrollbar,.ep-row::-webkit-scrollbar,.tile-row::-webkit-scrollbar,
.cat-row::-webkit-scrollbar,.season-tabs::-webkit-scrollbar,
.type-tabs::-webkit-scrollbar,.news-filters::-webkit-scrollbar{
  width:0;height:0;display:none;
}

/* ---- окно поиска на телефоне: заголовок по центру, поле-капсула ---- */
.search-title{display:none}

@media (max-width:1024px){
  .search-overlay{background:rgba(8,10,15,.92)}
  .search-top{
    padding:calc(14px + env(safe-area-inset-top)) var(--pad-x) 16px;
  }
  .search-bar{
    display:block;position:relative;
    margin-bottom:0;gap:0;
  }
  .search-bar .brand{display:none}

  .search-title{
    display:block;text-align:center;
    font-family:'Unbounded',sans-serif;font-weight:800;
    font-size:19px;line-height:40px;letter-spacing:.01em;
    margin-bottom:14px;
  }
  /* крестик — в одну строку с заголовком, у правого края */
  .search-bar > .icon-btn{
    position:absolute;top:0;right:0;
    width:40px;height:40px;border-radius:50%;
    background:transparent;border:0;color:var(--text);font-size:20px;
  }
  .search-bar > .icon-btn:hover{background:rgba(255,255,255,.07)}

  /* поле ввода — капсула с рамкой в цвете сайта */
  .search-input-wrap{
    border:1.5px solid var(--gold);
    border-radius:var(--r-pill);
    background:var(--surface);
    padding:13px 18px;gap:12px;
    transition:box-shadow .2s, border-color .2s;
  }
  .search-input-wrap:focus-within{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(255,181,71,.18);
  }
  .search-input-wrap .glyph{
    display:grid;place-items:center;width:22px;height:22px;
    font-size:0;color:var(--muted);flex-shrink:0;
  }
  .search-input-wrap .glyph svg{width:20px;height:20px}
  .search-input-wrap:focus-within .glyph{color:var(--gold)}
  .search-input-wrap input{
    font-size:16px;font-weight:600;min-width:0;
  }

  .search-suggest{padding:20px 0 8px}
  .search-suggest h2{font-size:19px;margin-bottom:14px}
}

/* ---- окно поиска: прокрутка результатов ----
   Оверлей занимает весь экран и до этого обрезал содержимое:
   при длинной выдаче до нижних карточек было не добраться. */
.search-overlay{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

@media (max-width:1024px){
  /* запас снизу, чтобы последний ряд не прятался под нижней панелью */
  .search-results,.search-suggest{padding-bottom:120px}

  /* профиль в шапке на телефоне не нужен — он есть в нижней навигации.
     Селектор с header перебивает правило body.logged-in .logged-only,
     у которого специфичность выше обычного .head-right .profile-wrap. */
  header .head-right .profile-wrap,
  header .head-right .cta.login-cta{display:none!important}
}

/* ---- шапка не перекрывает контент ----
   Шапка закреплена сверху; страницы, у которых первым идёт кадр
   (главная и страница тайтла), сдвигают его на её высоту. */
@media (max-width:1024px){
  :root{--hdr-h:70px}                 /* 42px кнопка + 2*14px поля */
  header{background:rgba(15,18,26,.94);backdrop-filter:blur(16px);}
}

/* ---- метка на постере: премьера, новый сезон, финал ---- */
.pin{
  position:absolute;top:9px;left:9px;z-index:4;
  padding:5px 11px;border-radius:var(--r-lg);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:11.5px;font-weight:800;line-height:1;letter-spacing:.01em;
  color:#fff;white-space:nowrap;pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.pin-premiere{background:#2f6bff}
.pin-season  {background:#ff8a2b;color:#2a1403}
.pin-final   {background:#1fae7a;color:#04211a}

/* родители, внутри которых лежит метка */
.card .poster,.cat-card .poster,.fav-card .fav-poster,
.top-card .top-poster,.prem-card .prem-media,.sr-card .sr-poster{position:relative}

@media (max-width:1024px){
  .pin{top:7px;left:7px;padding:4px 9px;font-size:10px;border-radius:16px}
  .top-card .pin,.sr-card .pin{font-size:9.5px;padding:3px 8px}
}

/* ============================================================
   ПРОИЗВОДИТЕЛЬНОСТЬ НА ТЕЛЕФОНЕ
   Размытие фона — самая дорогая операция для мобильной видеокарты.
   Шапка и нижняя панель закреплены на экране, поэтому браузер
   пересчитывает их размытие на каждом кадре прокрутки и анимации.
   Уменьшаем радиус и делаем фон плотнее — визуально почти то же,
   но кадры перестают проседать.
   ============================================================ */
@media (max-width:1024px){
  header{
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  .mobile-tabbar{
    background:rgba(19,23,33,.94);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }

  /* мелкие декоративные размытия на карточках не нужны совсем */
  .story-play,.big-play,.arrow,.hero-arrow,.p-badge,.ep-play{
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }

  /* карточки в лентах отрисовываются независимо друг от друга —
     браузер не перерисовывает всю ленту при прокрутке.
     Топ-10 сюда не входит: у него цифра намеренно выходит за карточку,
     а contain:paint обрезал бы её по краю. */
  .card,.prem-card,.cat-card,.story,.p-card{
    contain:layout paint;
  }
  .top-card{contain:layout}
}

/* пользователь просил меньше движения — выключаем всё лишнее */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* Правило .art с нейтральным градиентом убрано отсюда: это был
   ВТОРОЙ фон карточек. Он спорил с цветными .a1….a8 из style.css
   — селекторы равной силы, побеждал подключённый позже, — и
   именно из-за этого фон отличался от страницы к странице.
   Единственный фон карточек теперь задан в style.css, в блоке
   «ЕДИНЫЙ ФОН КАРТОЧЕК». */
.hero-bg-poster{background-color:#11141b}
#heroSlider .hero{background-color:#11141b}

.tab-ind{display:none!important}

.cat-card .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cat-card .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* лого названия в герое (вместо текстового h1), если админ загрузил */
.hero-logo{max-width:80%;max-height:200px;width:auto;height:auto;object-fit:contain;object-position:left center;display:block;margin:0 0 18px}
.mini-slider .hero-logo{max-height:100px}

/* длинные названия в остальных карточках — тоже троеточие, без переноса */
.fav-title,.sr-title,.hm-title,.prem-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.fav-sub,.sr-sub,.hm-orig,.prem-orig{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* лого названия на странице фильма — крупнее, чем в герое на главной */
.film-logo{max-width:90%;max-height:126px;width:auto;height:auto;object-fit:contain;object-position:left center;display:block;margin:0 0 14px}
@media(max-width:1024px){.film-logo{max-width:65%;max-height:44px;margin-bottom:10px}}

/* скелетон вместо карточки избранного, пока не подъехали настоящие данные */
.fav-card.skeleton{pointer-events:none}
.skel-line{display:block;height:14px;border-radius:6px;margin-top:10px;background:linear-gradient(90deg,#1c212c 25%,#2a303e 37%,#1c212c 63%);background-size:400% 100%;animation:skel-pulse 1.4s ease-in-out infinite}
.skel-title{width:70%;height:16px}
.skel-sub{width:45%}
@keyframes skel-pulse{0%{background-position:100% 0}100%{background-position:0 0}}

/* скелетон героя на главной, пока не пришёл настоящий порядок с сервера */
.skeleton-hero{cursor:default}
.skeleton-hero .hero-inner{width:100%;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:0 0 8px}
.skel-herotitle{width:50%;height:36px;margin-bottom:14px}
.skel-herometa{width:22%;height:16px}

/* Трейлеров пока нет — вместо видео показываем статичную обложку,
   поэтому кнопку play и элементы управления видео прячем. Когда
   появится сервер с трейлерами, эту правку нужно будет откатить. */
.pv-live,.pv-ctrl{display:none!important}

/* новый формат блока: широкие карточки (обложка для телефона 396x238),
   рейтинг и название на двух языках под картинкой — как у обычных карточек.
   Селекторы двойные (.card.wide-card) намеренно: карточка несёт оба класса
   разом — .card ради наведения и клика по общему механизму сайта, .wide-card
   ради своего вида — а .card{width:218px} и .wide-card{width:300px} имеют
   одинаковый вес в CSS, и то, какое правило победит, зависело бы от порядка
   подключения файлов на конкретной странице. Двойной селектор весит больше
   и побеждает всегда, на любой странице. */
.card.wide-card{
  width:230px;flex-shrink:0;cursor:pointer;transition:transform .25s;
  /* на части страниц у .card есть свой overflow:hidden + border-radius
     на ВСЮ карточку (не только на картинку) — это скругление обрезало
     нижний левый угол текста под изображением. Явно сбрасываем оба
     свойства здесь, чтобы widecard не зависел от того, какая версия
     .card победит на конкретной странице. */
  overflow:visible;border-radius:0;
}
@media (hover:hover) and (pointer:fine){.card.wide-card:hover{transform:translateY(-5px)}}
.wide-card .wide-media{
  position:relative;width:100%;aspect-ratio:396/238;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(160deg,#1c212c,#11141b);
}
.wide-card .wide-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
@media (max-width:1024px){.card.wide-card{width:190px}}
.card.wide-card .title,.card.wide-card .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}

/* обрезка длинных названий троеточием на десктопе тоже (раньше было только на мобильном) */
.card .title,.card .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block}