/* =========================================================
   MoVix — Smart TV Styles (consolidated)
   LG WebOS, Android TV (Xiaomi), Samsung Tizen, TV-боксы
   Загружается на ВСЕХ страницах (лёгкий файл, ~300 правил)

   Раздел «Телевидение» (IPTV, карточки каналов): assets/css/tv_section.css

   Раскладка плиток (все ТВ одинаково):
   - 5 карточек в ряд в слайдерах и в сетке поиска/фильтров
   - Соотношение постеров 2:3 (ширина : высота)
   - Единый отступ между карточками (--tv-gap: 2vw) и по краям (--tv-padding-x: 2.2vw)
   - Название контента: до 2 строк, читаемо (line-clamp + clamp по размеру)
   - Описание на странице деталей: единый размер для всех ТВ
   ========================================================= */

/* Boot button for initial TV focus — completely invisible */
#tvBootFocus,
#tvBootFocus:focus,
#tvBootFocus:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
}

/* Ensure cards are not clipped for browser spatial navigation on TV */
html.tv .row-scroller {
    overflow: visible !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   MEDIA-QUERY TV FALLBACKS (pointer: coarse)
   Работают даже без JS-детекции
   ========================================================= */
/* TV fallback: только при coarse/no pointer (пульт), без JS-детекции.
   Используем --tv-tiles-* из :root (задаются из админки), иначе 5 в ряд. */
@media (min-width: 1920px) and (pointer: coarse),
(min-width: 2560px) and (pointer: coarse),
(min-width: 2560px) and (pointer: none) {
    :root {
        --tv-padding-x: 2.2vw;
        --tv-gap: 2vw;
        --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-per-row, 5) - 1) * var(--tv-gap)) / var(--tv-tiles-per-row, 5));
        --unified-card-width: var(--tv-card-w);
        --unified-card-height: calc(var(--tv-card-w) * 1.5);
        --unified-cards-width: var(--tv-card-w);
        --unified-cards-height: calc(var(--tv-card-w) * 1.5);
        --gap-card: var(--tv-gap);
        --gap-cards: var(--tv-gap);
        --gap: var(--tv-gap);
    }
    .tv-channel-grid {
        grid-template-columns: repeat(var(--tv-tiles-per-row, 5), minmax(0, 1fr));
    }
    .grid,
    .search-page .grid {
        --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-grid, 6) - 1) * var(--tv-gap)) / var(--tv-tiles-grid, 6));
        --unified-card-width: var(--tv-card-w);
        --unified-card-height: calc(var(--tv-card-w) * 1.5);
        --unified-cards-width: var(--tv-card-w);
        --unified-cards-height: calc(var(--tv-card-w) * 1.5);
    }
    .reco-grid {
        --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-detail, 5) - 1) * var(--tv-gap)) / var(--tv-tiles-detail, 5));
        --unified-card-width: var(--tv-card-w);
        --unified-card-height: calc(var(--tv-card-w) * 1.5);
        --unified-cards-width: var(--tv-card-w);
        --unified-cards-height: calc(var(--tv-card-w) * 1.5);
    }

    .grid,
    .tv-channel-grid,
    .row-nav__scroll,
    .cards {
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        max-width: 100vw;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1920px) and (pointer: coarse) {
    .mvx-brand {
        padding: 14px 24px;
        font-size: 1.1rem;
        min-width: 60px;
    }

    .btn {
        padding: 1.2rem 1.8rem;
        font-size: 1.1rem;
        min-width: 60px;
    }

    .mvx-search__input {
        min-height: 56px;
        font-size: 1.02rem;
    }

    .card:hover {
        transform: none;
    }

    .hero {
        scroll-snap-type: none;
    }

    .card:focus,
    .card:focus-visible,
    .btn:focus,
    .btn:focus-visible,
    .mvx-brand:focus,
    .mvx-brand:focus-visible {
        outline-width: 6px;
        outline-offset: 5px;
    }

    .fav-heart {
        width: 48px;
        height: 48px;
        font-size: 22px;
        top: 10px;
        right: 10px;
    }

    .card > .badge {
        margin-right: 60px;
    }

    .cards,
    .row-nav__scroll {
        gap: var(--gap-cards);
    }

    .row-scroller {
        gap: var(--gap-cards);
        padding: 1.2rem 2.2vw 1.5rem;
    }
}

/* =========================================================
   JS-DETECTED TV (html.tv class)
   Higher specificity = always wins over media queries
   ========================================================= */

/* --- Единый расклад плиток для ВСЕХ ТВ (webOS, Android TV, Tizen, TV-боксы) ---
   Количество плиток в ряд задаётся настройками: --tv-tiles-per-row (слайды), --tv-tiles-grid (сетка), --tv-tiles-detail (рекомендации).
   Соотношение постеров 2:3 => height = width * 1.5 */
html.tv {
    --tv-focus-outline: 5px solid rgba(229, 9, 20, 0.92);
    --tv-focus-offset: 3px;
    --tv-focus-outline-strong: 6px solid rgba(229, 9, 20, 0.95);
    --tv-focus-offset-strong: 5px;
    --tv-padding-x: 2.2vw;
    --tv-gap: 2vw;
    --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-per-row, 5) - 1) * var(--tv-gap)) / var(--tv-tiles-per-row, 5));
    --tv-card-h: calc(var(--tv-card-w) * 1.5);
    --unified-card-width: var(--tv-card-w);
    --unified-card-height: var(--tv-card-h);
    --unified-cards-width: var(--tv-card-w);
    --unified-cards-height: var(--tv-card-h);
    --gap-card: var(--tv-gap);
    --gap-cards: var(--tv-gap);
    --gap: var(--tv-gap);
}
/* Каталог каналов: «Плиток в ряду (каталог)» */
html.tv .tv-channel-grid {
    grid-template-columns: repeat(var(--tv-tiles-per-row, 5), minmax(0, 1fr));
}
/* Прочие сетки: «Сетка плиток» */
html.tv .grid,
html.tv .search-page .cards {
    --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-grid, 6) - 1) * var(--tv-gap)) / var(--tv-tiles-grid, 6));
    --unified-card-width: var(--tv-card-w);
    --unified-card-height: calc(var(--tv-card-w) * 1.5);
    --unified-cards-width: var(--tv-card-w);
    --unified-cards-height: calc(var(--tv-card-w) * 1.5);
}
/* Рекомендации на странице деталей: своё число плиток в ряд */
html.tv .reco-grid {
    --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-detail, 5) - 1) * var(--tv-gap)) / var(--tv-tiles-detail, 5));
    --unified-card-width: var(--tv-card-w);
    --unified-card-height: calc(var(--tv-card-w) * 1.5);
    --unified-cards-width: var(--tv-card-w);
    --unified-cards-height: calc(var(--tv-card-w) * 1.5);
}

/* Слайдеры и сетка: единый отступ и зазор */
html.tv .row-scroller,
html.tv .cards,
html.tv .row-nav__scroll {
    gap: var(--tv-gap);
}

html.tv .row-scroller {
    padding: 1.2rem var(--tv-padding-x) 1.5rem;
}

html.tv .grid,
html.tv .tv-channel-grid {
    gap: var(--tv-gap);
}

/* ТВ: горизонтальные вкладки групп (пульт) */
html.tv .tv-groups-nav__tab:focus-visible,
html.tv .tv-groups-nav__tab.tv-focused {
    outline: var(--tv-focus-outline-strong) !important;
    outline-offset: 4px;
    box-shadow: none;
}

/* --- Overscan safe area --- */
html.tv body {
    padding-left: max(2.5vw, env(safe-area-inset-left, 2.5vw));
    padding-right: max(2.5vw, env(safe-area-inset-right, 2.5vw));
}

html.tv .container {
    max-width: 100%;
    padding-left: 1vw;
    padding-right: 1vw;
}

/* Блок «О фильме»: тултип при наведении на персону не обрезать */
html.tv .tv-extra-info,
html.tv .tv-extra-grid,
html.tv .tv-extra-row,
html.tv .tv-extra-value,
html.webos-app .tv-extra-info,
html.webos-app .tv-extra-grid,
html.webos-app .tv-extra-row,
html.webos-app .tv-extra-value {
    overflow: visible !important;
}

/* --- Global focus (scoped): avoid painting every element on focus --- */
html.tv a:focus,
html.tv a:focus-visible,
html.tv button:focus,
html.tv button:focus-visible,
html.tv [data-tv="focus"]:focus,
html.tv [data-tv="focus"]:focus-visible,
html.tv [tabindex]:focus,
html.tv [tabindex]:focus-visible,
html.tv summary:focus,
html.tv summary:focus-visible {
    outline: var(--tv-focus-outline) !important;
    outline-offset: var(--tv-focus-offset);
}

/* --- btn-watch focus: белый фон, красный текст + иконка --- */
html.tv .btn-watch:focus,
html.tv .btn-watch:focus-visible,
html.tv .btn-watch:hover:focus,
html.tv.webos-app .btn-watch:focus,
html.tv.webos-app .btn-watch:focus-visible {
    background: #fff !important;
    background-color: #fff !important;
    color: #e50914 !important;
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
    /* Force text + icon color */
    fill: #e50914 !important;
}

/* --- Card focus --- */
html.tv .card:focus,
html.tv .card:focus-visible,
html.tv .reco-card:focus,
html.tv .reco-card:focus-visible {
    transform: scale(1.04);
    z-index: var(--z-card-hover);
    outline: var(--tv-focus-outline-strong) !important;
    outline-offset: var(--tv-focus-offset-strong);
    background-color: transparent !important;
    transition: transform 80ms ease;
}

/* Unified focus for TV section controls */
html.tv .tv-channel-card:focus,
html.tv .tv-channel-card:focus-visible,
html.tv .tv-groups-nav__tab:focus,
html.tv .tv-groups-nav__tab:focus-visible,
html.tv .tv-group-title:focus,
html.tv .tv-group-title:focus-visible,
html.tv .tv-watch-dock__btn:focus,
html.tv .tv-watch-dock__btn:focus-visible,
html.tv .tv-ch-item:focus,
html.tv .tv-ch-item:focus-visible,
html.tv .tv-watch-quality-btn:focus,
html.tv .tv-watch-quality-btn:focus-visible {
    outline: var(--tv-focus-outline-strong) !important;
    outline-offset: var(--tv-focus-offset-strong);
}

/* --- Disable hover --- */
html.tv .card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(255,255,255,.06);
}

html.tv .card:hover::after {
    opacity: .65;
}

html.tv .mvx-brand:hover,
html.tv .btn:hover,
html.tv .chip:hover,
html.tv .mvx-chip:hover,
html.tv .reco-card:hover {
    transform: none;
    box-shadow: none;
}

/* --- Larger interactive elements --- */
html.tv .mvx-brand {
    padding: 16px 28px;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    min-height: 52px;
}

html.tv .btn {
    padding: 1.2rem 2.2rem;
    font-size: clamp(1.05rem, 1.15vw, 1.25rem);
    min-height: 58px;
    border-radius: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

html.tv .fav-heart {
    width: 52px;
    height: 52px;
    font-size: 24px;
    top: 12px;
    right: 12px;
}

html.tv .card > .badge {
    font-size: .9em;
    padding: .35em .65em;
}

html.tv .card--continue .card-continue-topbar .badge--kind {
    font-size: .9em;
    padding: .35em .65em;
}

html.tv .card--continue .cont-remove--chip {
    width: 44px;
    height: 44px;
    min-width: 44px;
}

html.tv .card--continue .cont-remove--chip svg {
    width: 18px;
    height: 18px;
}

html.tv .card--continue .fav-heart {
    top: 4.6rem;
}

/* --- Typography for TV viewing distance --- */
/* Название контента: 2 строки, читаемо, вмещается в ширину карточки */
/* Рейтинги на карточке ТВ: выше блока с названием и годом (мета) */
html.tv .card-ratings-large,
html.webos-app .card-ratings-large {
    bottom: 3.25rem;
}
html.tv .card .meta,
html.webos-app .card .meta {
    z-index: 6;
}
html.tv .card-ratings-large,
html.webos-app .card-ratings-large {
    z-index: 8;
}

html.tv .meta .title {
    font-size: clamp(0.85rem, 1.05vw, 1.2rem);
    line-height: 1.35;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

html.tv .slide .title {
    font-size: clamp(2rem, 3.5vw, 3.5rem);
}

html.tv .slide .desc {
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    -webkit-line-clamp: 2;
    line-height: 1.6;
}

html.tv .section h2 {
    font-size: clamp(1.3rem, 1.8vw, 2rem);
}

html.tv .row-sub {
    font-size: clamp(.95rem, 1vw, 1.1rem);
}

/* --- Row navigation --- */
html.tv .row-nav {
    width: 56px;
    height: 90px;
    border-radius: 20px;
    font-size: 2rem;
}

html.tv .row-nav.prev { left: -28px; }
html.tv .row-nav.next { right: -28px; }

html.tv .row-nav:focus,
html.tv .row-nav:focus-visible,
html.tv .row-more:focus,
html.tv .row-more:focus-visible {
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
    background: rgba(255,255,255,.14);
}

/* --- Smooth scrolling --- */
html.tv .row-scroller {
    scroll-behavior: auto;
    scroll-padding: var(--tv-padding-x);
}

html.tv .hero {
    scroll-snap-type: none;
}

/* --- Player on TV --- */
html.tv .player-close {
    right: 5vw;
    padding: 1rem 1.5rem;
    font-size: 1.15rem;
    min-height: 52px;
}

html.tv .player-close:focus,
html.tv .player-close:focus-visible {
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
    background: rgba(255,255,255,.2) !important;
}

html.tv .player-controls {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 24px;
    margin-top: 16px;
}

html.tv .player-controls .player-chooser,
html.tv .player-chooser {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 24px;
    margin-top: 0 !important;
}

html.tv .player-controls .btn,
html.tv .player-controls #watchBtn,
html.tv .player-chooser .chooser-btn {
    width: auto !important;
    height: auto !important;
    min-height: 56px !important;
    min-width: 150px !important;
    font: 600 1.05rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
    padding: .9rem 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 2rem !important;
    text-transform: uppercase;
    letter-spacing: .5px;
}

html.tv .player-controls .btn:focus,
html.tv .player-controls .btn:focus-visible,
html.tv .player-controls #watchBtn:focus,
html.tv .player-controls #watchBtn:focus-visible,
html.tv .player-chooser .chooser-btn:focus,
html.tv .player-chooser .chooser-btn:focus-visible {
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
    background-color: rgba(255,255,255,.18) !important;
}

html.tv #playerClose:focus,
html.tv #playerClose:focus-visible {
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
    background: rgba(255,255,255,.2) !important;
}

/* --- Detail page (TV: постер меньше, текст крупнее) --- */
html.tv .detail {
    grid-template-columns: 31.5rem 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
}

html.tv .detail .poster {
    max-width: 31.5rem;
    border-radius: .8rem;
}

html.tv .detail h2 {
    font-size: clamp(2.2rem, 3.2vw, 3.8rem);
}

html.tv .detail .row {
    font-size: clamp(1rem, 1.15vw, 1.35rem);
    line-height: 1.6;
}

/* Описание на странице деталей: одинаково читаемо на всех ТВ */
html.tv .detail .description,
html.tv .tv-description {
    font-size: clamp(1rem, 1.2vw, 1.45rem);
    line-height: 1.65;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

html.tv .detail .ratings {
    gap: 1.5rem;
}

html.tv .detail .val {
    font-size: clamp(1.1rem, 1.2vw, 1.4rem);
}

html.tv .detail .kp-logo {
    width: 1.6rem;
    height: 1.6rem;
}

html.tv .detail .imdb-logo,
html.tv .detail .mvx-logo {
    height: 1.6rem;
    width: auto;
}

html.tv .detail .imdb-badge {
    font-size: 1rem;
    padding: .15rem .5rem;
}

/* Платформа на странице деталей (все Smart TV) */
html.tv .tv-detail-platform-row,
html.tv .tv-detail-platform-meta {
    display: block;
    width: fit-content;
    max-width: 100%;
    position: relative;
    z-index: 3;
    margin-top: 0.12rem;
    margin-bottom: 0.42rem;
}

html.tv .tv-detail-platform-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    max-width: 100%;
}

html.tv .tv-detail-platform-list .tv-detail-platform-badge:not(:last-child)::after {
    content: '|';
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.88em;
    font-weight: 300;
    line-height: 1;
    vertical-align: middle;
}

html.tv .tv-detail-platform-list .tv-detail-platform-inline__logo {
    width: auto;
    max-width: min(9.5rem, 30vw);
    min-height: 1.15rem;
}

html.tv .tv-detail-platform-inline__logo.is-on-dark,
html.tv .tv-detail-platform-list .tv-detail-platform-inline__logo.is-on-dark {
    filter: brightness(0) invert(var(--mvx-detail-platform-logo-tone, 58%));
    opacity: var(--mvx-detail-platform-logo-opacity, 0.78);
}

html.tv .tv-detail-platform-inline__logo.is-color {
    filter: brightness(0.82) saturate(0.88);
    opacity: 0.8;
}

html.tv .tv-detail-platform-inline__logo {
    width: var(--mvx-detail-platform-logo-w, 24ch);
    max-width: var(--mvx-detail-platform-logo-w, 24ch);
    height: auto;
    max-height: var(--mvx-detail-platform-logo-max-h, 1.85rem);
}

html.tv .tv-detail-platform-inline__text {
    font-size: 0.95rem;
    max-width: var(--mvx-detail-platform-logo-w, 24ch);
    color: rgba(255, 255, 255, 0.58);
}

html.tv .tv-extra-row--platforms .tv-extra-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

html.tv .tv-extra-platform-chip {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

html.tv .tv-extra-platform-chip img {
    max-height: 1.35em;
    max-width: 7em;
    width: auto;
    height: auto;
    object-fit: contain;
}

html.tv .tv-extra-platform-chip img.is-mono {
    filter: brightness(0) invert(78%);
    opacity: 0.92;
}

html.tv .tv-extra-platform-chip--text {
    font-size: 0.92em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.02em;
}

/* Строка «Платформа» в «О фильме» — только на Smart TV */
.tv-only-platform-row {
    display: none;
}

html.tv .tv-only-platform-row {
    display: flex;
}

/* --- Footer --- */
html.tv .sticky-footer {
    padding: .3rem;
}

html.tv .sticky-footer__inner {
    font-size: clamp(.65rem, .8vw, .85rem);
}

/* --- Исключения: не ставить background/outline на изображения --- */
html.tv img:focus,
html.tv img:focus-visible,
html.tv .poster:focus,
html.tv .poster:focus-visible,
html.tv video:focus,
html.tv video:focus-visible {
    background-color: transparent !important;
    outline: none !important;
}

/* --- Performance --- */
html.tv .card,
html.tv .mvx-brand,
html.tv .btn {
    will-change: auto;
}

html.tv .card:focus-visible {
    will-change: auto;
}

/* =========================================================
   Навбар на ТВ: всегда зафиксирован на всех страницах
   ========================================================= */
html.tv .navbar,
html.tv-android .navbar,
html.tv-webos .navbar,
html.webos-app .navbar,
html.tv-tizen .navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
}

/* =========================================================
   LG WebOS OLED (браузер на ТВ — обычные стили)
   ========================================================= */
html.tv-webos body {
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
}

html.tv-webos .navbar {
    background: rgba(0,0,0,.92);
}

html.tv-webos .sticky-footer {
    background: rgba(0,0,0,.92);
}

html.tv-webos .card:focus-visible {
    transition: transform 60ms ease;
}

html.tv-webos .navbar .logo,
html.tv-webos .section h2 {
    color: #f0f0f0;
}

html.tv-webos .search-input:focus {
    position: relative;
    z-index: 2;
}

/* =========================================================
   Navbar theme (sakura branch) — TV platforms
   ========================================================= */
html.tv .sakura-branch,
html.tv-android .sakura-branch,
html.tv-webos .sakura-branch,
html.webos-app .sakura-branch,
html.tv-tizen .sakura-branch {
    position: absolute;
    top: 0rem;
    right: 1rem;
    width: min(8rem, 24vw);
    height: 8rem;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    z-index: calc(var(--z-navbar) + 1);
}

@supports (padding: env(safe-area-inset-top)) {
    html.tv .sakura-branch,
    html.tv-android .sakura-branch,
    html.tv-webos .sakura-branch,
    html.webos-app .sakura-branch,
    html.tv-tizen .sakura-branch {
        right: max(1rem, env(safe-area-inset-right, 0px));
    }
}

/* =========================================================
   webOS App — крупный дизайн для Magic Remote (аиромышь)
   Активируется ТОЛЬКО через ?webos=1 → класс html.webos-app
   Сайт остаётся без изменений.
   ========================================================= */

/* --- Базовый шрифт: крупный для OLED 55" на расстоянии 2-3м --- */
html.webos-app {
    font-size: 28px !important;
    cursor: default;
}

html.webos-app body {
    font-size: 28px !important;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
    padding-left: 3.5vw;
    padding-right: 3.5vw;
}

/* --- Карточки как на всех ТВ: настраиваемое кол-во в ряд (--tv-tiles-* из админки) --- */
html.webos-app {
    --tv-padding-x: 2.2vw;
    --tv-gap: 2vw;
    --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-per-row, 5) - 1) * var(--tv-gap)) / var(--tv-tiles-per-row, 5));
    --tv-card-h: calc(var(--tv-card-w) * 1.5);
    --unified-card-width: var(--tv-card-w);
    --unified-card-height: var(--tv-card-h);
    --unified-cards-width: var(--tv-card-w);
    --unified-cards-height: var(--tv-card-h);
    --gap-card: var(--tv-gap);
    --gap-cards: var(--tv-gap);
    --gap: var(--tv-gap);
    --hero-h: 520px;
    --radius: 12px;
}

/* Сетка и рекомендации в webos-app: число плиток из админки */
html.webos-app .tv-channel-grid {
    grid-template-columns: repeat(var(--tv-tiles-per-row, 5), minmax(0, 1fr));
}
html.webos-app .grid,
html.webos-app .search-page .grid {
    --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-grid, 6) - 1) * var(--tv-gap)) / var(--tv-tiles-grid, 6));
    --unified-card-width: var(--tv-card-w);
    --unified-card-height: calc(var(--tv-card-w) * 1.5);
    --unified-cards-width: var(--tv-card-w);
    --unified-cards-height: calc(var(--tv-card-w) * 1.5);
}
html.webos-app .reco-grid {
    --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-detail, 5) - 1) * var(--tv-gap)) / var(--tv-tiles-detail, 5));
    --unified-card-width: var(--tv-card-w);
    --unified-card-height: calc(var(--tv-card-w) * 1.5);
    --unified-cards-width: var(--tv-card-w);
    --unified-cards-height: calc(var(--tv-card-w) * 1.5);
}

/* --- Навбар: крупный, для аиромыши --- */
html.webos-app .navbar {
    background: rgba(0,0,0,.94);
    padding: 0px 3.5vw;
    gap: 2rem;
    min-height: 56px;
}

html.webos-app .navbar .logo {
    font-size: 36px;
    color: #f0f0f0;
}

html.webos-app .mvx-nav {
    gap: 1.5rem;
}

html.webos-app .mvx-brand {
    padding: 16px 40px;
    font-size: 26px;
    min-height: 64px;
    border-radius: 2rem;
    cursor: pointer;
}

html.webos-app .mvx-search-btn {
    width: 68px;
    height: 68px;
    cursor: pointer;
}

html.webos-app .mvx-search-btn svg {
    width: 44px;
    height: 44px;
}

/* --- Hover-эффекты для аиромыши (лёгкие, без box-shadow) --- */
html.webos-app .card:hover {
    transform: scale(1.03) !important;
    border-color: rgba(255,255,255,.35) !important;
    z-index: var(--z-card-hover);
    transition: transform 80ms ease;
    cursor: pointer;
}

html.webos-app .card:hover::after {
    opacity: .5 !important;
}

html.webos-app .mvx-brand:hover,
html.webos-app .btn:hover {
    background-color: rgba(255,255,255,.12) !important;
    cursor: pointer;
}

html.webos-app .chip:hover,
html.webos-app .mvx-chip:hover {
    background-color: rgba(255,255,255,.12) !important;
    cursor: pointer;
}

html.webos-app .reco-card:hover {
    transform: scale(1.03) !important;
    cursor: pointer;
}

/* --- Focus ring (для D-pad как резервное) --- */
html.webos-app .card:focus,
html.webos-app .card:focus-visible {
    transform: scale(1.04);
    transition: transform 80ms ease;
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 5px;
}

/* --- Крупные кнопки --- */
html.webos-app .btn {
    padding: 16px 36px;
    font-size: 24px;
    min-height: 68px;
    border-radius: 2rem;
    cursor: pointer;
}

html.webos-app .fav-heart {
    width: 60px;
    height: 60px;
    font-size: 28px;
    top: 14px;
    right: 14px;
    cursor: pointer;
}

/* --- Типография: крупный текст для расстояния ТВ --- */
html.webos-app .section h2 {
    font-size: 38px;
    color: #f0f0f0;
    margin-bottom: 16px;
}

html.webos-app .meta .title {
    font-size: clamp(0.85rem, 1.05vw, 1.25rem);
    line-height: 1.35;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

html.webos-app .meta .year,
html.webos-app .meta .rating-badge {
    font-size: 20px;
}

html.webos-app .card > .badge {
    font-size: 18px;
    padding: 6px 12px;
}

html.webos-app .card--continue .card-continue-topbar .badge--kind {
    font-size: 18px;
    padding: 6px 12px;
}

html.webos-app .card--continue .cont-remove--chip {
    width: 48px;
    height: 48px;
    min-width: 48px;
}

html.webos-app .card--continue .cont-remove--chip svg {
    width: 20px;
    height: 20px;
}

html.webos-app .card--continue .fav-heart {
    top: 5rem;
}

html.webos-app .row-sub {
    font-size: 22px;
}

/* --- Hero-слайдер крупный --- */
html.webos-app .hero .slide {
    border-radius: 16px;
}

html.webos-app .slide .title {
    font-size: 56px;
}

html.webos-app .slide .desc {
    font-size: 26px;
    -webkit-line-clamp: 3;
    line-height: 1.65;
}

html.webos-app .slide .btn {
    padding: 16px 40px;
    font-size: 26px;
}

/* --- Row scroller и сетка: те же отступы, что на всех ТВ --- */
html.webos-app .cards,
html.webos-app .row-nav__scroll {
    gap: var(--tv-gap);
    padding: 1.5rem 0 2rem;
}

html.webos-app .row-scroller {
    gap: var(--tv-gap);
    padding: 1.5rem var(--tv-padding-x) 2rem;
    scroll-behavior: auto;
    scroll-padding: var(--tv-padding-x);
}

/* --- Поиск: скрываем фильтры, крупная строка --- */
html.webos-app .filter-toggle-btn,
html.webos-app .filters-panel,
html.webos-app .filters-overlay,
html.webos-app .active-filters {
    display: none !important;
}

html.webos-app .search-form {
    max-width: 800px;
    margin: 0 auto;
}

html.webos-app .search-input {
    font-size: 30px !important;
    padding: 18px 28px !important;
    border-radius: 50px !important;
    background: rgba(255,255,255,.08) !important;
    border: 2px solid rgba(255,255,255,.15) !important;
    color: #fff !important;
}

html.webos-app .search-input:focus {
    border-color: rgba(255,255,255,.4) !important;
    background: rgba(255,255,255,.12) !important;
}

html.webos-app .search-submit-btn {
    width: 64px;
    height: 64px;
    right: 0.2rem !important;
    border-radius: 64px !important;
}

html.webos-app .search-submit-btn svg {
    width: 28px;
    height: 28px;
}


html.webos-app .search-page .results-header h2 {
    font-size: 38px;
}

html.webos-app .search-page .results-count {
    font-size: 26px;
}

html.webos-app .row-nav {
    width: 64px;
    height: 100px;
    border-radius: 24px;
    font-size: 2.4rem;
    cursor: pointer;
}

html.webos-app .row-nav.prev { left: -32px; }
html.webos-app .row-nav.next { right: -32px; }

html.webos-app .row-nav svg {
    width: 36px;
    height: 36px;
    stroke-width: 3;
}

html.webos-app .row-more {
    font-size: 26px;
    padding: 8px 16px;
    border-radius: 10px;
}
html.webos-app .row-more svg {
    width: 22px;
    height: 22px;
    stroke-width: 3;
}
html.webos-app .row-more:focus,
html.webos-app .row-more:focus-visible {
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
    background: rgba(255,255,255,.14);
}

/* --- Контейнер --- */
html.webos-app .container {
    max-width: 100%;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
}

/* --- Grid: крупные ячейки --- */
html.webos-app .grid,
html.webos-app .tv-channel-grid {
    gap: 2vw;
}

/* --- Детальная страница (Android TV style) --- */

/* Backdrop: фон за контентом (без blur — webOS perf) */
html.webos-app .tv-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: #050505;
    isolation: isolate;
}

html.webos-app .tv-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0.27);
    -webkit-filter: brightness(0.27);
    transform: scale(1.04);
    opacity: 0.60;
    position: relative;
    z-index: 0;
}

html.webos-app .tv-backdrop::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.56) 0%,
        rgba(0,0,0,0.72) 48%,
        rgba(0,0,0,0.97) 100%
    );
}

/* Detail grid: poster + info */
html.webos-app .detail.tv-detail {
    position: relative;
    z-index: 1;
    grid-template-columns: 500px 1fr;
    gap: 44px;
    align-items: start;
    margin-top: 0;
    padding: 50px 2vw 0;
}

html.webos-app .detail .poster {
    max-width: 500px;
    border-radius: 16px;
}

/* Info column */
html.webos-app .tv-detail-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-shadow: 0 2px 14px rgba(0,0,0,.88);
}

html.webos-app .detail h2 {
    font-size: var(--mvx-dt-title-size, 58px);
    line-height: 1.12;
    font-weight: 900;
    margin: 0;
    max-width: 100%;
    text-shadow: 0 3px 18px rgba(0,0,0,.92);
}

html.webos-app .tv-original-title {
    font-size: var(--mvx-dt-orig-size, 28px);
    color: rgba(255,255,255,.5);
    margin-top: -6px;
}

html.webos-app .tv-meta-line,
html.webos-app .tv-director-line {
    font-size: var(--mvx-dt-meta-size, 30px);
    color: rgba(255,255,255,.7);
    letter-spacing: 0.02em;
}

html.webos-app .tv-detail-platform-badge,
html.webos-app .tv-detail-platform-inline__link {
    max-width: var(--mvx-detail-platform-logo-w, 24ch);
}

html.webos-app .tv-detail-platform-inline__logo {
    width: var(--mvx-detail-platform-logo-w, 24ch) !important;
    max-width: var(--mvx-detail-platform-logo-w, 24ch) !important;
    height: auto !important;
    max-height: var(--mvx-detail-platform-logo-max-h, 1.85rem) !important;
}

html.webos-app .tv-detail-platform-inline__text {
    font-size: 0.95rem !important;
    max-width: var(--mvx-detail-platform-logo-w, 24ch) !important;
    line-height: 1.375rem !important;
}

html.webos-app .detail .row.rate-row {
    margin: 6px 0;
}

html.webos-app .detail .ratings {
    gap: 28px;
}

html.webos-app .detail .val,
html.webos-app .detail .rate-badge span {
    font-size: 32px;
}

html.webos-app .detail .kp-logo {
    width: 40px;
    height: 40px;
}

html.webos-app .detail .imdb-logo,
html.webos-app .detail .mvx-logo {
    height: 36px;
    width: auto;
}

html.webos-app .tv-genres {
    font-size: var(--mvx-dt-genres-size, 28px);
    color: rgba(255,255,255,.6);
    line-height: 1.5;
}

html.webos-app .tv-description {
    font-size: var(--mvx-dt-desc-size, clamp(1rem, 1.2vw, 1.45rem));
    line-height: 1.65;
    color: rgba(255,255,255,.88);
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 65ch;
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0,0,0,.9);
}

/* Big WATCH button */
html.webos-app .btn-watch {
    display: inline-flex !important;
    align-items: center;
    gap: 16px;
    background: #e50914 !important;
    color: #fff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    padding: 22px 60px !important;
    border-radius: 16px !important;
    min-height: 84px !important;
    min-width: 320px !important;
    border: none;
    cursor: pointer;
    transition: background 80ms ease;
    margin-top: 12px;
}

html.webos-app .btn-watch:hover {
    background: #ff1a25 !important;
}

html.webos-app .btn-watch:focus,
html.webos-app .btn-watch:focus-visible {
    background: #fff !important;
    background-color: #fff !important;
    color: #e50914 !important;
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
    box-shadow: none !important;
    fill: #e50914 !important;
}

/* --- Блок «О фильме» (карточка под деталями) --- */
html.webos-app .tv-extra-info {
    position: relative;
    z-index: 1;
    margin: 28px 2vw 0;
    padding: 36px 48px;
    background: rgba(255,255,255,.07);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.1);
}

html.webos-app .tv-extra-info h3 {
    font-size: 36px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 24px;
}

html.webos-app .tv-extra-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

html.webos-app .tv-extra-row {
    display: flex;
    gap: 24px;
    font-size: 28px;
    line-height: 1.5;
}

html.webos-app .tv-extra-label {
    flex-shrink: 0;
    width: 220px;
    color: rgba(255,255,255,.5);
    font-weight: 600;
}

html.webos-app .tv-extra-value {
    color: rgba(255,255,255,.85);
}

html.webos-app .tv-extra-value a.chips {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 28px;
}

html.webos-app .tv-extra-value a.chips:hover {
    color: #fff;
    text-decoration: underline;
}

/* Рекомендации — поднять над backdrop */
html.webos-app .reco-wrap {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    padding: 0 2vw;
}

html.webos-app .reco-wrap .reco-title {
    font-size: 30px;
}

/* TV: кол-во карточек рекомендаций задаётся через .reco-grid[data-tv-reco-limit] + стиль из detail_view */

/* --- Плеер: iframe масштабирование для крупных контролов --- */
/* Iframe ~57% + scale(1.75) → контролы плеера крупнее для TV, но не 2× */

/* ---- When player is open: hide ALL scrollbars & loading bars ---- */
html.tv body.player-open,
html.webos-app body.player-open {
    overflow: hidden !important;
    scrollbar-width: none !important;
    height: 100vh !important;
}
html.tv body.player-open::-webkit-scrollbar,
html.webos-app body.player-open::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* Hide html-level scrollbar too (class added by JS fallback for :has()) */
html.tv.player-active,
html.webos-app.player-active {
    overflow: hidden !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}
html.tv.player-active body,
html.webos-app.player-active body {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}
html.tv.player-active::-webkit-scrollbar,
html.webos-app.player-active::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* Hide navbar, loading bars, progress elements when player is open */
html.tv body.player-open .navbar,
html.webos-app body.player-open .navbar,
html.tv body.player-open .loading-bar,
html.webos-app body.player-open .loading-bar,
html.tv body.player-open .nprogress,
html.webos-app body.player-open .nprogress,
html.tv body.player-open #nprogress,
html.webos-app body.player-open #nprogress {
    display: none !important;
    visibility: hidden !important;
}
/* Hide ALL page content behind fullscreen player — eliminates bleed-through artifacts */
html.tv body.player-open .detail,
html.tv body.player-open .tv-backdrop,
html.tv body.player-open .tv-extra-info,
html.tv body.player-open .reco-wrap,
html.tv body.player-open .player-controls,
html.tv body.player-open .player-chooser,
html.webos-app body.player-open .detail,
html.webos-app body.player-open .tv-backdrop,
html.webos-app body.player-open .tv-extra-info,
html.webos-app body.player-open .reco-wrap,
html.webos-app body.player-open .player-controls,
html.webos-app body.player-open .player-chooser {
    visibility: hidden !important;
    pointer-events: none !important;
}
html.tv body.player-open .player-dock,
html.webos-app body.player-open .player-dock {
    visibility: visible !important;
    pointer-events: auto !important;
}
/* Не трогаем visibility внутри iframe — ломает слои Venom (плашка поверх кнопок) */
html.tv body.player-open .player-dock,
html.webos-app body.player-open .player-dock,
html.tv body.player-open .player-dock .player-inner,
html.webos-app body.player-open .player-dock .player-inner,
html.tv body.player-open .player-dock .responsive-iframe-wrap,
html.webos-app body.player-open .player-dock .responsive-iframe-wrap,
html.tv body.player-open .player-dock iframe.responsive-iframe,
html.webos-app body.player-open .player-dock iframe.responsive-iframe {
    visibility: visible !important;
}
html.tv .player-dock.open,
html.webos-app .player-dock.open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
}
html.tv .player-dock.open .player-inner,
html.webos-app .player-dock.open .player-inner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
html.tv .player-dock.open .responsive-iframe-wrap,
html.webos-app .player-dock.open .responsive-iframe-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* Кнопка «Закрыть» поверх iframe (не под scale-слоем плеера) */
html.tv .player-dock.open .player-close,
html.webos-app .player-dock.open .player-close {
    z-index: 1000001 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: inline-flex !important;
}

/* Player dock: full black, no gaps, no scrollbars (без 100vw — иначе горизонтальный скролл) */
html.webos-app .player-dock,
html.tv .player-dock {
    background: #000 !important;
    border: none !important;
    outline: none !important;
    scrollbar-width: none !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
}

/* После закрытия плеера — dock не занимает экран (иначе чёрный блок сверху) */
html.tv .player-dock:not(.open),
html.webos-app .player-dock:not(.open) {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.tv .player-dock.open,
html.webos-app .player-dock.open {
    visibility: visible !important;
    pointer-events: auto !important;
}

html.webos-app .player-dock::-webkit-scrollbar,
html.tv .player-dock::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html.webos-app .player-dock.open,
html.tv .player-dock.open {
    box-shadow: none !important;
}

/* Hide player handle (drag bar) and progress on TV */
html.webos-app .player-handle,
html.tv .player-handle {
    display: none !important;
}

html.webos-app .player-inner,
html.tv .player-inner {
    background: #000 !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
}

html.webos-app .player-inner::-webkit-scrollbar,
html.tv .player-inner::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html.webos-app .responsive-iframe-wrap,
html.tv .responsive-iframe-wrap {
    overflow: hidden !important;
    background: #000 !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    scrollbar-width: none !important;
    aspect-ratio: auto !important;
}

html.tv .player-dock.open .responsive-iframe-wrap,
html.webos-app .player-dock.open .responsive-iframe-wrap {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
}

html.webos-app .responsive-iframe-wrap::-webkit-scrollbar,
html.tv .responsive-iframe-wrap::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* webOS: без zoom/transform на iframe — масштаб только html{zoom} внутри player.php?tv=1 */
html.webos-app.tv-webos .player-dock.open .responsive-iframe-wrap iframe,
html.webos-app.tv-webos .player-dock.open .responsive-iframe,
html.tv.tv-webos .player-dock.open .responsive-iframe-wrap iframe,
html.tv.tv-webos .player-dock.open .responsive-iframe {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    zoom: 1;
    border: none !important;
    background: #000;
    display: block !important;
}

html.webos-app.tv-webos iframe.responsive-iframe:-webkit-full-screen,
html.webos-app.tv-webos iframe.responsive-iframe:fullscreen,
html.tv.tv-webos iframe.responsive-iframe:-webkit-full-screen,
html.tv.tv-webos iframe.responsive-iframe:fullscreen {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    zoom: 1;
    background: #000;
}

/* Android TV: без transform:scale (масштаб — html{zoom} в player.php?tv=1&androidtv=1) */
html.tv-android .player-dock.open .player-inner,
html.tv-android .player-dock.open .responsive-iframe-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

html.tv-android .player-dock.open .responsive-iframe-wrap iframe,
html.tv-android .player-dock.open .responsive-iframe,
html.tv-android .responsive-iframe-wrap iframe,
html.tv-android .responsive-iframe {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    border: none !important;
    background: #000;
    display: block !important;
}

html.tv-android iframe.responsive-iframe:-webkit-full-screen,
html.tv-android iframe.responsive-iframe:fullscreen {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    background: #000;
}

/* Прочие ТВ без webos/android класса (редко): без scale */
html.tv:not(.tv-webos):not(.tv-android) .player-dock.open .responsive-iframe-wrap iframe,
html.tv:not(.tv-webos):not(.tv-android) .player-dock.open .responsive-iframe,
html.webos-app:not(.tv-webos):not(.tv-android) .responsive-iframe-wrap iframe,
html.webos-app:not(.tv-webos):not(.tv-android) .responsive-iframe {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    border: none !important;
    background: #000;
    display: block !important;
}

/* Backdrop за fullscreen iframe — чёрный (только TV) */
html.webos-app iframe.responsive-iframe::backdrop {
    background: #000;
}

html.webos-app .player-close {
    right: 5vw;
    padding: 14px 28px;
    font-size: 26px;
    min-height: 64px;
    cursor: pointer;
}

html.webos-app .player-controls {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 28px;
    margin-top: 20px;
}

html.webos-app .player-controls .player-chooser,
html.webos-app .player-chooser {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 28px;
    margin-top: 0 !important;
}

html.webos-app .player-controls .btn,
html.webos-app .player-controls #watchBtn,
html.webos-app .player-chooser .chooser-btn {
    min-height: 68px !important;
    min-width: 200px !important;
    font-size: 24px !important;
    padding: 14px 32px !important;
    border-radius: 2rem !important;
    cursor: pointer;
}

/* --- Поиск крупный --- */
html.webos-app .search-input-wrapper {
    max-width: 950px;
    min-width: 800px;
}

html.webos-app .search-input,
html.webos-app .mvx-search__input {
    min-height: 72px;
    font-size: 26px;
    padding: 14px 28px;
    border-radius: 50px !important; /* pill-shape как в классической версии */
}

html.webos-app .search-input:focus {
    position: relative;
    z-index: 2;
}

html.webos-app .search-form {
    gap: 20px;
}

/* --- Фильтры / чипсы крупные --- */
html.webos-app .chip,
html.webos-app .mvx-chip,
html.webos-app .filter-chip {
    padding: 12px 24px;
    font-size: 22px;
    min-height: 56px;
    border-radius: 2rem;
    cursor: pointer;
}

/* --- Футер --- */
html.webos-app .sticky-footer {
    background: rgba(0,0,0,.94);
    padding: 8px;
}

html.webos-app .sticky-footer__inner {
    font-size: 18px;
}

/* --- Скролл: гарантируем что работает на webOS --- */
html.webos-app {
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto; /* smooth ломает скролл на webOS */
}

html.webos-app body {
    overflow-y: visible !important;
    overflow-x: hidden;
}

/* Горизонтальные ряды: видимый скролл + перетаскивание */
html.webos-app .cards,
html.webos-app .row-nav__scroll,
html.webos-app .hero {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}

html.webos-app .cards::-webkit-scrollbar,
html.webos-app .row-nav__scroll::-webkit-scrollbar,
html.webos-app .hero::-webkit-scrollbar {
    display: block !important;
    height: 6px;
}

html.webos-app .cards::-webkit-scrollbar-track,
html.webos-app .row-nav__scroll::-webkit-scrollbar-track,
html.webos-app .hero::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
    border-radius: 3px;
}

html.webos-app .cards::-webkit-scrollbar-thumb,
html.webos-app .row-nav__scroll::-webkit-scrollbar-thumb,
html.webos-app .hero::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 3px;
}

html.webos-app .cards::-webkit-scrollbar-thumb:hover,
html.webos-app .row-nav__scroll::-webkit-scrollbar-thumb:hover,
html.webos-app .hero::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.35);
}

/* Вертикальный скроллбар страницы (тонкий, видимый) */
html.webos-app::-webkit-scrollbar {
    width: 8px;
}

html.webos-app::-webkit-scrollbar-track {
    background: rgba(255,255,255,.03);
}

html.webos-app::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 4px;
}

html.webos-app::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.3);
}

/* --- Курсор pointer для всех интерактивных --- */
html.webos-app a,
html.webos-app button,
html.webos-app [tabindex],
html.webos-app [data-tv="focus"],
html.webos-app .card,
html.webos-app .reco-card {
    cursor: pointer;
}

/* ==========================================================
   АЭРОМЫШЬ: ПОЛНОСТЬЮ СКРЫТЬ ФОКУС
   При работе аэромышью рамки фокуса не нужны
   ========================================================== */
html.tv-airmouse *:focus,
html.tv-airmouse *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Высокая специфичность чтобы перебить html.tv .xxx:focus */
html.tv.tv-airmouse .card:focus,
html.tv.tv-airmouse .card:focus-visible,
html.tv.tv-airmouse .reco-card:focus,
html.tv.tv-airmouse .reco-card:focus-visible,
html.tv.tv-airmouse .btn-watch:focus,
html.tv.tv-airmouse .btn-watch:focus-visible,
html.tv.tv-airmouse .btn:focus,
html.tv.tv-airmouse .btn:focus-visible,
html.tv.tv-airmouse .row-nav:focus,
html.tv.tv-airmouse .row-nav:focus-visible,
html.tv.tv-airmouse .row-more:focus,
html.tv.tv-airmouse .row-more:focus-visible,
html.tv.tv-airmouse .player-close:focus,
html.tv.tv-airmouse .player-close:focus-visible,
html.tv.tv-airmouse #playerClose:focus,
html.tv.tv-airmouse #playerClose:focus-visible,
html.tv.tv-airmouse .mvx-brand:focus,
html.tv.tv-airmouse .mvx-brand:focus-visible,
html.tv.tv-airmouse .search-input:focus,
html.tv.tv-airmouse .search-input:focus-visible,
html.tv.tv-airmouse .player-controls .btn:focus,
html.tv.tv-airmouse .player-controls .btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    transform: none !important;
}

/* btn-watch при аэромыши: обычный красный фон (без инверсии) */
html.tv.tv-airmouse .btn-watch:focus,
html.tv.tv-airmouse .btn-watch:focus-visible {
    background: #e50914 !important;
    color: #fff !important;
    fill: #fff !important;
}

/* webos-app + airmouse: тоже скрыть */
html.tv-airmouse.webos-app .card:focus,
html.tv-airmouse.webos-app .card:focus-visible,
html.tv-airmouse.webos-app .reco-card:focus,
html.tv-airmouse.webos-app .reco-card:focus-visible,
html.tv-airmouse.webos-app .btn:focus,
html.tv-airmouse.webos-app .btn:focus-visible,
html.tv-airmouse.webos-app .mvx-brand:focus,
html.tv-airmouse.webos-app .mvx-brand:focus-visible,
html.tv-airmouse.webos-app .row-nav:focus,
html.tv-airmouse.webos-app .row-nav:focus-visible,
html.tv-airmouse.webos-app .row-more:focus,
html.tv-airmouse.webos-app .row-more:focus-visible,
html.tv-airmouse.webos-app .btn-watch:focus,
html.tv-airmouse.webos-app .btn-watch:focus-visible,
html.tv-airmouse.webos-app .search-input:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

html.tv-airmouse.webos-app .btn-watch:focus,
html.tv-airmouse.webos-app .btn-watch:focus-visible {
    background: #e50914 !important;
    color: #fff !important;
    fill: #fff !important;
}

/* ==========================================================
   D-PAD: белый фокус 6px (только при управлении стрелками)
   ========================================================== */
html.tv-dpad-active a:focus,
html.tv-dpad-active a:focus-visible,
html.tv-dpad-active button:focus,
html.tv-dpad-active button:focus-visible,
html.tv-dpad-active [data-tv="focus"]:focus,
html.tv-dpad-active [data-tv="focus"]:focus-visible,
html.tv-dpad-active [tabindex]:focus,
html.tv-dpad-active [tabindex]:focus-visible,
html.tv-dpad-active summary:focus,
html.tv-dpad-active summary:focus-visible {
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
}

html.tv-dpad-active .card:focus,
html.tv-dpad-active .card:focus-visible,
html.tv-dpad-active .reco-card:focus,
html.tv-dpad-active .reco-card:focus-visible {
    transform: scale(1.04);
    outline: 6px solid rgba(229,9,20,.95) !important;
    outline-offset: 5px;
    background-color: transparent !important;
}

html.tv-dpad-active .btn-watch:focus,
html.tv-dpad-active .btn-watch:focus-visible {
    background: #fff !important;
    background-color: #fff !important;
    color: #e50914 !important;
    outline: 6px solid rgba(229,9,20,.95) !important;
    outline-offset: 3px;
    fill: #e50914 !important;
}

/* =========================================================
   Android TV (Xiaomi, Chromecast, Shield, Fire TV)
   ВАЖНО: не ставим transform на body, чтобы не ломать position:fixed у .navbar
   ========================================================= */
html.tv-android {
    font-size: clamp(12px, 0.68vw + 6px, 20px) !important;
    --tv-gap: 1.65vw;
    --tv-padding-x: 2vw;
}

html.tv-android body {
    -webkit-font-smoothing: antialiased;
}

html.tv-android a:focus,
html.tv-android a:focus-visible,
html.tv-android button:focus,
html.tv-android button:focus-visible,
html.tv-android [data-tv="focus"]:focus,
html.tv-android [data-tv="focus"]:focus-visible,
html.tv-android [tabindex]:focus,
html.tv-android [tabindex]:focus-visible,
html.tv-android summary:focus,
html.tv-android summary:focus-visible {
    outline: var(--tv-focus-outline) !important;
    outline-offset: var(--tv-focus-offset);
}

html.tv-android .card:focus,
html.tv-android .card:focus-visible,
html.tv-android .reco-card:focus,
html.tv-android .reco-card:focus-visible {
    transform: scale(1.04);
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 5px;
    background-color: transparent !important;
}

html.tv-android .tv-channel-card:focus,
html.tv-android .tv-channel-card:focus-visible,
html.tv-android .tv-groups-nav__tab:focus,
html.tv-android .tv-groups-nav__tab:focus-visible,
html.tv-android .tv-group-title:focus,
html.tv-android .tv-group-title:focus-visible,
html.tv-android .tv-watch-dock__btn:focus,
html.tv-android .tv-watch-dock__btn:focus-visible,
html.tv-android .tv-ch-item:focus,
html.tv-android .tv-ch-item:focus-visible,
html.tv-android .tv-watch-quality-btn:focus,
html.tv-android .tv-watch-quality-btn:focus-visible {
    outline: var(--tv-focus-outline-strong) !important;
    outline-offset: var(--tv-focus-offset-strong);
}

/* Android TV: использует те же переменные раскладки, что и html.tv (5 плиток, 2:3, единый отступ).
   Дополнительно только скролл и фокус. */

html.tv-android .row-scroller,
html.tv-android .hero {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

html.tv-android .search-input:focus {
    scroll-margin-bottom: 300px;
}

/* Android TV: навбар — крупнее лого и пункты «Фильмы / Сериалы» */
html.tv-android {
    --navbar-h: clamp(56px, 4.6vw, 72px);
}

html.tv-android .navbar {
    padding: 0.35rem 1.75rem !important;
    min-height: var(--navbar-h);
    gap: 1.25rem !important;
}

html.tv-android .mvx-nav {
    gap: 0.65rem !important;
}

html.tv-android .navbar .mvx-brand.logo {
    font-size: clamp(1.45rem, 1.85vw, 1.95rem) !important;
    padding: 0.55rem 1.15rem !important;
    min-height: 48px !important;
    letter-spacing: 0.02em !important;
}

html.tv-android .mvx-nav .mvx-brand {
    font-size: clamp(1.15rem, 1.4vw, 1.38rem) !important;
    padding: 0.5rem 1.25rem !important;
    min-height: 48px !important;
}

html.tv-android .mvx-brand {
    font-size: clamp(1.15rem, 1.4vw, 1.38rem) !important;
    padding: 0.5rem 1.25rem;
    min-height: 48px;
}

html.tv-android .btn {
    font-size: clamp(0.8rem, 0.92vw, 0.95rem) !important;
    padding: 0.75rem 1.35rem;
    min-height: 44px;
}

html.tv-android .mvx-search__input,
html.tv-android .search-input {
    font-size: 0.88rem !important;
}

html.tv-android .fav-heart {
    font-size: 18px !important;
    width: 44px;
    height: 44px;
}

html.tv-android .card > .badge {
    font-size: 0.78em !important;
}

html.tv-android .card--continue .card-continue-topbar .badge--kind {
    font-size: 0.78em !important;
}

html.tv-android .card--continue .cont-remove--chip {
    width: 44px;
    height: 44px;
    min-width: 44px;
}

html.tv-android .card--continue .fav-heart {
    top: 4.5rem;
}

html.tv-android .meta .title {
    font-size: clamp(0.66rem, 0.82vw, 0.88rem) !important;
    min-height: 2.4em;
}

html.tv-android .slide .title {
    font-size: clamp(1.3rem, 2.1vw, 1.95rem) !important;
}

html.tv-android .slide .desc {
    font-size: clamp(0.75rem, 0.92vw, 1rem) !important;
}

html.tv-android .section h2 {
    font-size: clamp(0.95rem, 1.25vw, 1.3rem) !important;
}

html.tv-android .row-sub {
    font-size: clamp(0.72rem, 0.82vw, 0.86rem) !important;
}

html.tv-android .row-nav {
    font-size: 1.5rem !important;
    width: 46px;
    height: 74px;
}

html.tv-android .player-close {
    font-size: 0.95rem !important;
    padding: 0.75rem 1.2rem;
    min-height: 44px;
}

/* Плеер открыт: «Закрыть» компактнее, чем панель Venom в iframe */
html.tv-android body.player-open .player-close,
html.tv-android .player-dock.open .player-close {
    font-size: 0.78rem !important;
    padding: 0.45rem 0.95rem !important;
    min-height: 36px !important;
    letter-spacing: 0.02em;
}

html.tv-android .player-controls .btn,
html.tv-android .player-controls #watchBtn,
html.tv-android .player-chooser .chooser-btn {
    font-size: 0.9rem !important;
    min-height: 46px !important;
    min-width: 120px !important;
    padding: 0.7rem 1.4rem !important;
}

html.tv-android .sticky-footer__inner {
    font-size: clamp(0.55rem, 0.65vw, 0.7rem) !important;
}

/* Android TV: детали — типографика из админки (--mvx-dt-*) */
html.tv-android .detail.tv-detail,
html.tv-android .detail {
    grid-template-columns: minmax(0, var(--mvx-dt-poster-w, 21rem)) 1fr !important;
    gap: var(--mvx-dt-gap, clamp(0.9rem, 1.75vw, 1.65rem)) !important;
    margin-top: clamp(0.5rem, 1.1vw, 0.9rem) !important;
    padding-top: clamp(0.5rem, 1vw, 1rem) !important;
    max-width: var(--mvx-dt-max-width, none) !important;
}

html.tv-android .detail .poster,
html.tv-android .detail.tv-detail .poster {
    max-width: var(--mvx-dt-poster-w, 21rem) !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3;
    object-fit: cover !important;
    border-radius: .8rem !important;
    justify-self: start;
}

html.tv-android .tv-detail-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html.tv-android .detail h2,
html.tv-android .tv-detail-info h2 {
    font-size: var(--mvx-dt-title-size, clamp(2.45rem, 2.1vw, 2.65rem)) !important;
    line-height: 1.15 !important;
}

html.tv-android .tv-original-title {
    font-size: var(--mvx-dt-orig-size, 1.14rem) !important;
}

html.tv-android .tv-meta-line,
html.tv-android .tv-director-line,
html.tv-android .tv-detail-platform-meta {
    font-size: var(--mvx-dt-meta-size, 1.18rem) !important;
}

html.tv-android .tv-genres {
    font-size: var(--mvx-dt-genres-size, 1.18rem) !important;
}

html.tv-android .tv-detail-platform-meta {
    gap: 0.52rem;
    margin-top: 0.08rem;
}

html.tv-android .tv-detail-platform-inline__logo {
    width: var(--mvx-detail-platform-logo-w, 24ch) !important;
    max-width: var(--mvx-detail-platform-logo-w, 24ch) !important;
    height: auto !important;
    max-height: var(--mvx-detail-platform-logo-max-h, 2.25rem) !important;
}

html.tv-android .tv-detail-platform-list .tv-detail-platform-inline__logo {
    width: auto !important;
    max-width: min(9.5rem, 34vw) !important;
}

html.tv-android .tv-detail-platform-list .tv-detail-platform-badge,
html.tv-android .tv-detail-platform-list .tv-detail-platform-inline__link {
    width: auto !important;
    max-width: none !important;
}

html.tv-android .tv-detail-platform-inline__text {
    font-size: var(--mvx-dt-meta-size, 1.18rem) !important;
    max-width: var(--mvx-detail-platform-logo-w, 24ch) !important;
}

html.tv-android .detail .ratings,
html.tv-android .detail .ratings .val,
html.tv-android .detail .ratings .rate-badge span,
html.tv-android .detail .ratings .imdb-badge,
html.tv-android .detail .val,
html.tv-android .detail .rate-badge span,
html.tv-android .detail .imdb-badge {
    font-size: 1.25rem !important;
}

html.tv-android .detail .row.rate-row {
    font-size: 1.25rem !important;
}

html.tv-android .detail .age-marker,
html.tv-android .detail .mpaa-marker {
    font-size: 1.05rem !important;
}

html.tv-android .detail .kp-logo {
    width: 1.55rem;
    height: 1.55rem;
}

html.tv-android .detail .imdb-logo,
html.tv-android .detail .mvx-logo {
    height: 1.55rem;
    width: auto;
}

html.tv-android .detail .description,
html.tv-android .tv-description,
html.tv-android .tv-detail-info .tv-description,
html.tv-android .tv-detail-info .description {
    font-size: var(--mvx-dt-desc-size, 1.26rem) !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 20;
    line-clamp: 20;
    flex: 1;
    min-height: 6em;
    min-width: 0;
}

html.tv-android .tv-detail-info .tv-description,
html.tv-android .tv-detail-info .description {
    flex: 1 1 auto;
}

html.tv-android .detail .btn-watch,
html.tv-android .detail .player-controls .btn,
html.tv-android .detail .player-controls #watchBtn {
    font-size: 1.2rem !important;
    min-height: 52px !important;
}

html.tv-android .tv-extra-info,
html.tv-android .tv-extra-info .tv-extra-label,
html.tv-android .tv-extra-info .tv-extra-value,
html.tv-android .tv-extra-info .tv-extra-value a.chip,
html.tv-android .tv-extra-info .tv-extra-value a.chips {
    font-size: var(--mvx-dt-extra-row-size, 1.18rem) !important;
    line-height: 1.45;
}

html.tv-android .tv-extra-info h3 {
    font-size: var(--mvx-dt-extra-title-size, 1.26rem) !important;
    line-height: 1.3;
    margin-bottom: var(--mvx-dt-extra-title-gap, 0.5rem);
}

/* Если SSR ошибочно оставил webos-app на Android TV — перебиваем крупные webOS-правила */
html.tv-android.webos-app {
    font-size: clamp(12px, 0.68vw + 6px, 20px) !important;
}

html.tv-android.webos-app body {
    font-size: inherit !important;
    padding-left: max(2.5vw, env(safe-area-inset-left, 2.5vw)) !important;
    padding-right: max(2.5vw, env(safe-area-inset-right, 2.5vw)) !important;
}

html.tv-android.webos-app .detail.tv-detail {
    grid-template-columns: minmax(0, var(--mvx-dt-poster-w, 21rem)) 1fr !important;
    gap: var(--mvx-dt-gap, clamp(0.9rem, 1.75vw, 1.65rem)) !important;
    margin-top: clamp(0.5rem, 1.1vw, 0.9rem) !important;
    padding: clamp(0.5rem, 1vw, 1rem) 2vw 0 !important;
}

html.tv-android.webos-app .detail .poster,
html.tv-android.webos-app .detail.tv-detail .poster {
    max-width: var(--mvx-dt-poster-w, 21rem) !important;
    aspect-ratio: 2 / 3;
    justify-self: start;
}

html.tv-android.webos-app .detail h2,
html.tv-android.webos-app .tv-detail-info h2 {
    font-size: var(--mvx-dt-title-size, clamp(2.45rem, 2.1vw, 2.65rem)) !important;
}

/* =========================================================
   Samsung Tizen — та же раскладка, что на webOS и Android TV
   ========================================================= */
html.tv-tizen {
    --tv-padding-x: 2.2vw;
    --tv-gap: 2vw;
    --tv-card-w: calc((100vw - 2 * var(--tv-padding-x) - (var(--tv-tiles-per-row, 5) - 1) * var(--tv-gap)) / var(--tv-tiles-per-row, 5));
    --tv-card-h: calc(var(--tv-card-w) * 1.5);
    --unified-card-width: var(--tv-card-w);
    --unified-card-height: var(--tv-card-h);
    --unified-cards-width: var(--tv-card-w);
    --unified-cards-height: var(--tv-card-h);
    --gap-card: var(--tv-gap);
    --gap-cards: var(--tv-gap);
    --gap: var(--tv-gap);
}

html.tv-tizen body {
    -webkit-font-smoothing: antialiased;
}

html.tv-tizen a:focus,
html.tv-tizen a:focus-visible,
html.tv-tizen button:focus,
html.tv-tizen button:focus-visible,
html.tv-tizen [data-tv="focus"]:focus,
html.tv-tizen [data-tv="focus"]:focus-visible,
html.tv-tizen [tabindex]:focus,
html.tv-tizen [tabindex]:focus-visible,
html.tv-tizen summary:focus,
html.tv-tizen summary:focus-visible {
    outline: var(--tv-focus-outline) !important;
    outline-offset: var(--tv-focus-offset);
}

/* =========================================================
   PERFORMANCE NUCLEAR OVERRIDES — webOS TV
   =========================================================
   Smart TV GPU budget is ~16 ms/frame.
   filter, backdrop-filter, box-shadow, text-shadow, transition
   on non-compositor properties all cause paint/layout and
   destroy frame rate on Chromium-based TV browsers.

   ONLY transform and opacity run on the compositor thread
   (GPU) without blocking the main thread.
   ========================================================= */

/* ---- 1. KILL ALL FILTERS (blur is ~3-5 ms per frame) ---- */
html.webos-app *,
html.webos-app *::before,
html.webos-app *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
}

/* ---- 2. KILL ALL BOX-SHADOW (triggers full-layer repaint) ---- */
html.webos-app *,
html.webos-app *::before,
html.webos-app *::after {
    box-shadow: none !important;
}

/* ---- 3. KILL ALL NON-COMPOSITOR TRANSITIONS ----
   Only transform and opacity can be GPU-composited.
   Everything else (background, border, margin, padding,
   height, width, filter, box-shadow, color, etc.)
   forces layout/paint on every frame of the animation. ---- */
html.webos-app *,
html.webos-app *::before,
html.webos-app *::after {
    transition-property: transform, opacity !important;
    transition-duration: 50ms !important;
    transition-timing-function: linear !important;
}

/* Elements that should have NO transition at all */
html.webos-app body,
html.webos-app .navbar,
html.webos-app .container,
html.webos-app .section,
html.webos-app .grid,
html.webos-app .tv-channel-grid,
html.webos-app .footer,
html.webos-app .sticky-footer,
html.webos-app img,
html.webos-app video {
    transition: none !important;
}

/* ---- 4. KILL ALL ANIMATIONS (infinite loops eat CPU) ---- */
html.webos-app * {
    animation: none !important;
    animation-duration: 0s !important;
}

/* ---- 5. DETAIL BACKDROP — webOS: тёмный фон + градиент поверх картинки ---- */
html.webos-app .tv-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    will-change: auto !important;
    z-index: 0 !important;
    background: #050505 !important;
    isolation: isolate !important;
}

html.webos-app .tv-backdrop img {
    object-position: top center !important;
    filter: brightness(0.27) !important;
    -webkit-filter: brightness(0.27) !important;
    transform: scale(1.04) !important;
    opacity: 0.60 !important;
    content-visibility: visible !important;
    contain: none !important;
    position: relative !important;
    z-index: 0 !important;
}

html.webos-app .tv-backdrop::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.56) 0%,
        rgba(0,0,0,0.72) 48%,
        rgba(0,0,0,0.97) 100%
    ) !important;
}

/* ---- 6. NAVBAR: solid background, no blur ---- */
html.webos-app .navbar {
    background: rgba(9,9,9,0.97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---- 7. GPU LAYER PROMOTION for scroll containers ---- */
html.webos-app .row-scroller,
html.webos-app .cards,
html.webos-app .row-nav__scroll,
html.webos-app .hero,
html.webos-app .grid,
html.webos-app .tv-channel-grid {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* NOTE: НЕ ставим transform на body — это ломает position:fixed
   у .tv-backdrop и .navbar. GPU-промоушн только на scroll-контейнерах. */

/* ---- 8. content-visibility:auto — skip rendering off-screen sections ---- */
html.webos-app .section,
html.webos-app .reco-wrap,
html.webos-app .sticky-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}
/* .tv-extra-info не включаем: тултипы staff (фото+описание) должны вылетать за блок */

/* ---- 9. REDUCE TEXT RENDERING COST ---- */
html.webos-app,
html.webos-app body {
    text-rendering: optimizeSpeed !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ---- 10. IMAGE RENDERING HINTS ---- */
html.webos-app img {
    image-rendering: auto;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Prevent browser from decoding offscreen images eagerly */
    content-visibility: auto;
}

/* ---- 11. CARD FOCUS — яркий outline (НЕ box-shadow!) ---- */
html.webos-app .card:focus,
html.webos-app .card:focus-visible,
html.webos-app .reco-card:focus,
html.webos-app .reco-card:focus-visible {
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 5px;
    box-shadow: none !important;
    background-color: transparent !important;
    transform: scale(1.04);
}

html.webos-app .card:hover {
    border-color: rgba(255,255,255,.3) !important;
    box-shadow: none !important;
}

/* ---- 12. BUTTON FOCUS — яркий outline ---- */
html.webos-app .btn:focus,
html.webos-app .btn:focus-visible,
html.webos-app .mvx-brand:focus,
html.webos-app .mvx-brand:focus-visible,
html.webos-app .row-nav:focus,
html.webos-app .row-nav:focus-visible,
html.webos-app .row-more:focus,
html.webos-app .row-more:focus-visible {
    box-shadow: none !important;
    background-color: rgba(255,255,255,.18) !important;
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
}

/* btn-watch focus: белый фон + красный текст (performance section) */
html.webos-app .btn-watch:focus,
html.webos-app .btn-watch:focus-visible {
    box-shadow: none !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #e50914 !important;
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
    fill: #e50914 !important;
}

/* ---- 13. DISABLE HOVER TRANSFORMS for cards (reduce recomposite) ---- */
/* BUT keep scale on focused cards (focus wins over hover) */
html.webos-app .card:hover:not(:focus):not(:focus-visible),
html.webos-app .reco-card:hover:not(:focus):not(:focus-visible) {
    transform: none !important;
}

/* Keep hover only as a subtle opacity change (compositor-only) */
html.webos-app .card:hover::after {
    opacity: 0.45 !important;
}

/* ---- 14. DISABLE contain for items that must be visible ---- */
html.webos-app .navbar,
html.webos-app .player-dock,
html.webos-app .detail,
html.webos-app .tv-extra-info,
html.webos-app .tv-backdrop,
html.webos-app .tv-backdrop img {
    content-visibility: visible;
    contain: none;
}

/* ---- 15. SEARCH PAGE — no expensive effects, but keep focus ring ---- */
html.webos-app .search-input:focus {
    border-color: rgba(255,255,255,.5) !important;
    box-shadow: none !important;
    outline: 6px solid rgba(229,9,20,.92) !important;
    outline-offset: 3px;
}

/* ---- 16. SCROLLBAR — lightweight ---- */
html.webos-app ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

html.webos-app ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border-radius: 2px;
}

html.webos-app ::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- 17. REDUCE PAINT AREA — contain layout ---- */
html.webos-app .card {
    contain: layout style;
}

html.webos-app .slide {
    contain: layout style paint;
}

/* ---- 18. HERO SLIDE — no filter on images ---- */
html.webos-app .slide > img {
    filter: none !important;
}

/* ---- 19. MODAL — no blur, solid background ---- */
html.webos-app .mvx-modal-overlay {
    background: rgba(0,0,0,.85) !important;
    backdrop-filter: none !important;
}

/* ---- 20. RATINGS — no filter effects ---- */
html.webos-app .kp-logo,
html.webos-app .imdb-logo,
html.webos-app .mvx-logo,
html.webos-app .rate-badge {
    filter: none !important;
}

/* ---- 21. HERO — disable CSS mask (expensive GPU op) ---- */
html.webos-app .hero-wrap {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Hero slides: no will-change (save memory) */
html.webos-app .hero.is-fade .slide {
    will-change: auto !important;
}

/* ---- 22. CARDS — no will-change (too many layers eat GPU memory) ---- */
html.webos-app .card {
    will-change: auto !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,.08);
}

/* ---- 23. POINTER EVENTS — reduce hit-test cost ---- */
html.webos-app .card::after,
html.webos-app .slide .overlay {
    pointer-events: none !important;
}

/* ---- 24. DISABLE SMOOTH SCROLL EVERYWHERE ---- */
html.webos-app,
html.webos-app *,
html.webos-app body {
    scroll-behavior: auto !important;
}

/* ---- 25. TIER-2 TV (Android TV-боксы, webOS 3-5, Tizen 4-5): убрать blur на backdrop ----
   blur(6px) на full-screen картинке на слабом ARM-GPU = 5-10 ms/frame.
   Заменяем на просто тёмный градиент — выглядит почти так же, рендерится в 0 мс. */
html.tv-android .tv-backdrop img,
html.tv-tizen .tv-backdrop img,
html.tv-firetv .tv-backdrop img,
html.tv-hisense .tv-backdrop img,
html.tv-viera .tv-backdrop img {
    object-position: top center !important;
    filter: brightness(0.22) !important;
    -webkit-filter: brightness(0.22) !important;
    transform: none !important;
}

/* webOS browser: backdrop — финальный override после tier-2 */
html.webos-app .tv-backdrop img {
    object-position: top center !important;
    filter: brightness(0.27) !important;
    -webkit-filter: brightness(0.27) !important;
    opacity: 0.60 !important;
    transform: scale(1.04) !important;
    content-visibility: visible !important;
    contain: none !important;
    position: relative !important;
    z-index: 0 !important;
}

html.webos-app .tv-backdrop::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.56) 0%,
        rgba(0,0,0,0.72) 48%,
        rgba(0,0,0,0.97) 100%
    ) !important;
}

/* ---- 26. TIER-2 TV: hero — никаких блюров / clip-path / scale-эффектов ---- */
html.tv-android .hero .slide > img,
html.tv-webos .hero .slide > img,
html.tv-tizen .hero .slide > img,
html.tv-firetv .hero .slide > img {
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    transition: none !important;
}
html.tv-android .hero .slide,
html.tv-webos .hero .slide,
html.tv-tizen .hero .slide,
html.tv-firetv .hero .slide {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    animation: none !important;
}

/* ---- 27. TIER-2 TV: убрать оставшиеся transition-цепочки на больших контейнерах ----
   Микро-анимации (opacity, color) оставляем — они дёшевы.
   Убираем дорогие transition на transform/filter/box-shadow для .card, .tv-channel-card, .slide. */
html.tv-android .card,
html.tv-android .tv-channel-card,
html.tv-android .slide,
html.tv-webos .card,
html.tv-webos .tv-channel-card,
html.tv-webos .slide,
html.tv-tizen .card,
html.tv-tizen .tv-channel-card,
html.tv-tizen .slide {
    transition-property: opacity, background-color, border-color, color !important;
}

/* ---- 28. TIER-2 TV: содержим перерисовку в карточках ----
   contain: content; помогает браузеру не пересчитывать всю страницу при изменении одной карточки.
   Поддерживается с Chrome 52 (Android TV 6.0+ / webOS 4+). На webOS 3 свойство просто игнорируется. */
html.tv-android .card,
html.tv-android .tv-channel-card,
html.tv-webos .card,
html.tv-webos .tv-channel-card,
html.tv-tizen .card,
html.tv-tizen .tv-channel-card {
    contain: content;
}