/* Вёрстка повторяет rivertv.ca по размерам, отступам и шрифтам (сняты с их
   страниц: главная и /vod). Своё — только цвет кнопок (фиолетовый SNES вместо
   их бирюзово-синего), картинки (коробки SNES) и тексты. */

:root {
    /* Цвета rivertv.ca */
    --promo: #0a0e16;        /* фон первого экрана */
    --tv-bg: #0d1013;        /* фон тёмных страниц (/vod) */
    --solid: #1a1e21;        /* сплошная шапка и футер */
    --fixed-top: #11111b;    /* закреплённая шапка: градиент от него */
    --head: #404040;         /* заголовки */
    --text: #747474;         /* основной текст */
    --light: #f9f9f9;        /* светлые секции */
    --line: #e5e5e5;         /* разделители */
    --muted-white: #acb1b5;  /* стрелки лент */
    /* Свой акцент вместо их linear-gradient(#34d2c4 → #418ff9) */
    --grad: linear-gradient(to right, #a98bff, #5b48dc);
    --accent: #6a52e6;
    --accent-light: #b19bff;
    --btn-shadow: rgba(91, 72, 220, .25) 0 8px 20px 0;
    /* Карта библиотеки */
    --beaten: #6a52e6;
    --current: #ff8a3d;
    --postponed: #f4c542;
    --free: #dcdde3;
    --ok: #1f9d6a;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-padding-top: 74px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 400 16px / 1.688em "Open Sans", Arial, sans-serif; color: var(--text); background: #fff; }
main { flex: 1; }
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; transition: color .3s; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }
p { margin: 0 0 1.688em; }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { position: relative; margin: 0 0 .66em; line-height: 1.36em; color: var(--head); letter-spacing: normal; font-weight: 700; }
h1 { font-size: 45px; }
h2 { font-size: 34px; margin-bottom: .83em; }

/* Контейнер rivertv: 1182px с полями по 20px */
.content { position: relative; margin: 0 auto; padding: 0 20px; width: 100%; max-width: 1182px; }

/* Кнопка */
.btn {
    position: relative; display: inline-block; vertical-align: middle; cursor: pointer; overflow: hidden;
    margin: 0; padding: 0 30px; border: 0; border-radius: 1000px;
    font: 600 18px / 50px "Open Sans", Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
    color: #fff; text-align: center; text-decoration: none;
    background: var(--grad); box-shadow: var(--btn-shadow);
    transition: box-shadow .4s, filter .4s;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); box-shadow: rgba(91, 72, 220, .4) 0 8px 24px 0; }
.btn--main { padding: 2px 56px; font-size: 20px; }
.btn--header { padding: 0 22px; font-size: 16px; line-height: 34px; font-weight: 400; letter-spacing: normal; box-shadow: none; }
.btn--small { padding: 0 20px; font-size: 14px; line-height: 40px; box-shadow: none; }
.btn .ico-play { display: inline-block; width: 0; height: 0; margin-right: 12px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; vertical-align: -1px; }

/* ===== Шапка ===== */
.header { position: relative; z-index: 20; color: #fff; }
.header__content { display: flex; align-items: center; height: 74px; padding: 20px; }
.header__logo { flex: none; display: block; line-height: 0; }
.header__logo img { height: 28px; width: auto; }
.header__menu { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.header__link { color: #fff; font-size: 16px; line-height: 16px; text-transform: uppercase; white-space: nowrap; }
.header__link:hover { color: #fff; text-decoration: none; opacity: .75; }
.header__link--active { box-shadow: 0 2px 0 var(--accent-light); padding-bottom: 4px; }

/* На главной: прозрачная поверх баннера (68px), после прокрутки — закреплённая с градиентом */
.header--hero { position: absolute; top: 0; left: 0; right: 0; }
.header--hero .header__content { height: 68px; }
.header--hero .btn--header { display: none; }
/* Логотип уже крупно на баннере — в прозрачной шапке его нет, как у rivertv.ca */
.header--hero:not(.is-fixed) .header__logo { visibility: hidden; }
.header--hero.is-fixed { position: fixed; background: linear-gradient(var(--fixed-top) 0, rgba(17, 17, 27, .8) 100%); }
.header--hero.is-fixed .header__content { height: 74px; }
.header--hero.is-fixed .btn--header { display: inline-block; }
.js .header--hero.is-fixed { animation: header-in .35s ease-out; }
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }

/* Светлые внутренние страницы: сплошная шапка */
/* Как на rivertv.ca/channels: на светлых страницах та же закреплённая шапка с градиентом */
.header--solid { position: sticky; top: 0; background: linear-gradient(var(--fixed-top) 0, rgba(17, 17, 27, .8) 100%) var(--light); }

/* Тёмный каталог: двухэтажная шапка 82 + 46 */
.header--tv { position: sticky; top: 0; background: var(--solid); }
.header--tv .header__content { height: 82px; }
.tv-nav { display: flex; gap: 4px; margin-left: 48px; }
.tv-nav__link { padding: 0 10px 0 5px; font-size: 16px; font-weight: 600; line-height: 27px; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.tv-nav__link:hover, .tv-nav__link--active { color: #fff; text-decoration: none; }
.genres { height: 46px; display: flex; align-items: center; gap: 30px; padding: 0 110px; overflow-x: auto; scrollbar-width: none; }
.genres::-webkit-scrollbar { display: none; }
.genres a { flex: none; color: #fff; font-size: 14px; line-height: 46px; }
.genres a:hover { text-decoration: none; opacity: .7; }

/* ===== Главная: первый экран ===== */
.promo { position: relative; overflow: hidden; background: var(--promo); color: #fff; }
/* Стена коробок, как page-index__promo-pics у rivertv: 6 колонок (~228 px), зазор 10 px,
   последние колонки уходят за правый край, лишние ряды обрезает overflow у .promo */
.promo__pics {
    position: absolute; top: 0; left: 0; right: -430px; bottom: 0; overflow: hidden;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-content: start; padding: 40px 10px 10px;
}
/* Плитка — фронтальная NA-коробка SNES (~1.44 : 1), как картинки 228 × 128 у rivertv, только в пропорции коробки */
.promo__pic { display: block; width: 100%; height: auto; aspect-ratio: 1.4; object-fit: cover; }
.promo__gradient {
    position: absolute; inset: 0;
    background:
        linear-gradient(var(--promo) 40px, rgba(10, 14, 22, .73) 60px, rgba(0, 0, 0, 0) 80px),
        linear-gradient(to top, var(--promo) 0, rgba(0, 0, 0, 0) 80px),
        linear-gradient(to right, var(--promo) 15%, rgba(10, 14, 22, .8) 50%, rgba(0, 0, 0, 0) 65%);
}
.promo__full { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; }
.promo .content { padding-top: 100px; padding-bottom: 130px; }
.promo__owner { font-size: 18px; line-height: 1.4; opacity: .75; margin-bottom: 8px; }
.promo__logo { display: block; height: 54px; width: auto; margin: 0 0 40px; }
.promo__title { margin: 0 0 16px; color: #fff; font-size: 50px; line-height: 68px; letter-spacing: 1px; }
.promo__subtitle { max-width: 480px; margin: 0 0 40px; color: #fff; font-size: 20px; line-height: 27px; font-weight: 400; letter-spacing: 1px; }
.promo .btn--main { margin-bottom: 24px; }
.promo__description { font-size: 20px; line-height: 27px; font-weight: 600; }
.promo__arrow { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; }
.promo__arrow a { display: block; width: 44px; height: 35px; position: relative; }
.promo__arrow a::before { content: ""; position: absolute; left: 13px; top: 4px; width: 16px; height: 16px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; rotate: 45deg; }
@media (prefers-reduced-motion: no-preference) { .promo__arrow a { animation: bounce 3s infinite; } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }

/* ===== Главная: секции ===== */
.section { position: relative; overflow: hidden; }
.bg-light { background: var(--light); }
.section-title { font-size: 50px; line-height: 68px; margin-bottom: 33px; }
.section-title--center { text-align: center; }
.section-title--45 { font-size: 45px; line-height: 61.2px; margin-bottom: 17px; }

/* Аналог «Live TV & On Demand» с сеткой логотипов: у нас — полоса прогресса и три цифры */
.library-sec { padding: 80px 0 50px; text-align: center; }
.checks { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 40px; margin: 0 0 40px; list-style: none; }
.checks li, .checklist li { position: relative; padding-left: 22px; font-size: 16px; line-height: 22px; text-align: left; }
.checks li::before, .checklist li::before {
    content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 8px;
    border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); rotate: -45deg; transform-origin: center;
}
.progress { position: relative; max-width: 760px; height: 12px; margin: 0 auto; border-radius: 6px; background: var(--line); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 6px; background: var(--grad); }
.progress__percent { margin-top: 10px; font-size: 14px; color: var(--text); }
.stats { display: flex; justify-content: center; gap: 24px 80px; flex-wrap: wrap; margin: 36px 0 0; list-style: none; }
.stats li { min-width: 140px; font-size: 16px; }
.stats b { display: block; color: var(--head); font-size: 45px; line-height: 61px; font-weight: 700; }
/* Как channels__price-note у rivertv: подпись под цифрами, над кнопкой */
.library-note { margin: 24px 0 22px; font-size: 16px; color: var(--text); }

/* Графики статистики. Один ряд данных — цвет акцента, непройденное — светлый шаг того же цвета.
   Столбики ≤ 24 px со скруглённым концом 4 px, сетка — волосяные линии, подписи цветом текста. */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; max-width: 1000px; margin: 56px auto 8px; text-align: left; }
.chart { margin: 0; min-width: 0; }
.chart__title { margin-bottom: 18px; font-size: 18px; font-weight: 600; color: var(--head); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Подсказка при наведении и фокусе (вместо title: появляется сразу и видна с клавиатуры) */
[data-tip] { position: relative; outline: none; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    padding: 6px 10px; border-radius: 4px; background: var(--head); color: #fff;
    font-size: 13px; line-height: 1.3; font-weight: 400; white-space: nowrap; pointer-events: none;
}

/* Столбики по годам */
.cols { position: relative; height: 220px; padding-left: 28px; }
.cols__grid { position: absolute; inset: 0 0 26px 0; display: flex; flex-direction: column; justify-content: space-between; }
.cols__grid span { position: relative; border-top: 1px solid var(--line); }
.cols__grid i { position: absolute; left: 0; top: -9px; font-style: normal; font-size: 12px; line-height: 1; color: #a5a5a5; font-variant-numeric: tabular-nums; }
.cols__plot { position: absolute; inset: 0 0 0 28px; display: flex; align-items: stretch; }
.cols__col { flex: 1 1 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 26px; cursor: default; }
.cols__col:hover .cols__bar, .cols__col:focus-visible .cols__bar { filter: brightness(1.12); }
.cols__col[data-tip]:hover::after, .cols__col[data-tip]:focus-visible::after { bottom: auto; top: -6px; }
.cols__bar { position: relative; width: min(24px, 70%); min-height: 0; border-radius: 4px 4px 0 0; background: var(--accent); }
.cols__value { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--head); white-space: nowrap; }
.cols__label { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1; color: var(--text); white-space: nowrap; }

/* Полосы по жанрам: длина дорожки — сколько игр в жанре, заливка — сколько пройдено */
.hbars { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hbars__row { display: grid; grid-template-columns: 96px 1fr 72px; align-items: center; column-gap: 12px; }
.hbars__name { font-size: 14px; line-height: 1.2; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbars__track { height: 14px; border-radius: 0 4px 4px 0; background: #e2dcff; }
.hbars__fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); }
.hbars__row:hover .hbars__fill, .hbars__row:focus-visible .hbars__fill { filter: brightness(1.12); }
/* Значение — в своей колонке справа, не внутри: в короткую полосу не поместится */
.hbars__value { text-align: right; font-size: 13px; font-weight: 700; color: var(--head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbars__value small { font-size: 12px; font-weight: 400; color: var(--text); }

/* Круговые диаграммы (Shared/_Donut.cshtml): кольцо 160 px, легенда справа */
.donuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; max-width: 1000px; margin: 56px auto 8px; text-align: left; }
.donut { margin: 0; min-width: 0; }
.donut__body { display: flex; align-items: center; gap: 20px; }
.donut__svg { flex: none; width: 140px; height: 140px; overflow: visible; }
.donut__slice { transition: stroke-width .15s; cursor: default; }
.donut__slice:hover { stroke-width: 24px; }
.donut__total { text-anchor: middle; font: 700 30px/1 "Open Sans", Arial, sans-serif; fill: var(--head); }
.donut__caption { text-anchor: middle; font: 400 12px/1 "Open Sans", Arial, sans-serif; fill: var(--text); }
.donut__legend { flex: 1; min-width: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.25; }
.donut__legend li { display: grid; grid-template-columns: 10px 1fr auto 36px; align-items: center; column-gap: 8px; }
.donut__legend i { width: 10px; height: 10px; border-radius: 2px; }
/* Подпись не обрезаем: если не помещается, легенда уходит под кольцо (см. адаптив) */
.donut__label { color: var(--head); white-space: nowrap; }
.donut__legend b { color: var(--head); font-variant-numeric: tabular-nums; }
.donut__pct { text-align: right; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Аналог «All the On Demand you want»: слева бесконечно едущие колонки, справа текст */
.vod-sec__row { display: flex; align-items: center; max-width: 2000px; margin: 0 auto; padding: 0 20px; }
.vod-sec__left { position: relative; flex: none; width: 52%; max-width: 960px; height: 688px; }
.vod-sec__pic { position: relative; overflow: hidden; height: 100%; margin-left: -25px; }
.vod-sec__pics { display: flex; }
.vod-sec__pics + .vod-sec__pics { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) { .vod-sec__pics { animation: vod-scroll 50s linear infinite; } }
@keyframes vod-scroll { from { transform: translateY(0); } to { transform: translateY(-100%) translateY(-10px); } }
.vod-sec__col { flex-basis: 25%; min-width: 0; margin: -5px 0; padding: 0 5px; }
.vod-sec__col:nth-child(2n+2) { margin-top: -19%; }
.vod-sec__item { display: block; padding-top: 10px; }
.vod-sec__item:hover { text-decoration: none; }
/* Постер 2 : 3 (у rivertv padding-top 146.25%): центральная часть коробки, чуть левее
   середины — справа у NA-коробки тёмная кромка */
.vod-sec__poster { position: relative; display: block; padding-top: 146.25%; background: #14161c; overflow: hidden; }
.vod-sec__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 44% 50%; }
.vod-sec__right { margin-left: 53px; margin-bottom: 22px; max-width: 515px; }
.vod-sec__right .section-title { margin-bottom: 16px; }
.vod-sec__right p { margin-bottom: 33px; }

/* Аналог «Watch Live TV instantly»: ноутбук слева с выносом за край, текст справа */
.stream-sec { padding: 55px 0 50px; }
.stream-sec__row { display: flex; }
.stream-sec__left { flex: 1 0 auto; margin-right: 10px; }
.stream-sec__right { flex: 0 0 auto; width: 520px; padding-top: 110px; }
.stream-sec__right .section-title { margin-bottom: 20px; }
.stream-sec__next { margin-bottom: 33px; font-size: 16px; }
.stream-sec__next a { display: block; color: var(--head); font-size: 24px; line-height: 1.36; font-weight: 700; }
.stream-sec__next a:hover { color: var(--accent); text-decoration: none; }
.device { position: relative; margin-left: -120px; width: 640px; max-width: calc(100% + 120px); }
.device__screen { padding: 14px 14px 0; background: #1c2030; border-radius: 16px 16px 0 0; }
.device__screen iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.device__base { height: 16px; margin: 0 -18px; background: linear-gradient(#d4d6dc, #9da1ab); border-radius: 0 0 16px 16px; position: relative; }
.device__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 110px; margin-left: -55px; height: 6px; background: #b9bcc4; border-radius: 0 0 8px 8px; }

/* Аналог «Hassle-free Live TV»: по центру текст и список с галочками */
.rules-sec { padding: 120px 0 80px; text-align: center; }
.rules-sec__text { max-width: 900px; margin: 0 auto 42px; }
.checklist { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 8px 48px; list-style: none; text-align: left; }

/* Аналог «Ways to watch»: слева текст и логотипы, справа картинка */
.watch-sec { padding: 60px 0 0; }
.watch-sec__row { display: flex; align-items: flex-end; }
.watch-sec__left { flex: 0 0 auto; width: 520px; padding: 40px 35px 110px 0; }
.watch-sec__left p { margin-bottom: 20px; }
.watch-sec__list { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; list-style: none; margin-top: 10px; }
.watch-sec__list a { display: flex; align-items: center; gap: 10px; color: var(--head); font-weight: 600; }
.watch-sec__list a:hover { color: var(--accent); text-decoration: none; }
.watch-sec__list img { width: 40px; height: 40px; filter: brightness(0) opacity(.75); }
.watch-sec__pic { flex: 1 1 auto; min-width: 0; line-height: 0; text-align: center; }
.watch-sec__pic img { max-height: 520px; width: auto; }

/* FAQ — как faq-accordion */
.faq-sec { padding: 100px 0; }
.faq { border-top: 1px solid var(--line); list-style: none; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; cursor: pointer; padding: 20px 50px 20px 0; font-size: 18px; line-height: 1.5em; color: var(--head); list-style: none; user-select: none; transition: .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; position: absolute; top: 25px; right: 4px; width: 10px; height: 10px;
    border-right: 1.5px solid #9a9a9a; border-bottom: 1.5px solid #9a9a9a; rotate: 45deg; transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--accent); }
.faq__detail { padding: 0 50px 20px 0; font-size: 16px; line-height: 1.688em; }
.faq__detail ul { padding-left: 20px; }
.faq__more summary::after { border: 0; rotate: 0deg; width: 14px; height: 14px; top: 26px;
    background: linear-gradient(#9a9a9a, #9a9a9a) center / 14px 1.5px no-repeat, linear-gradient(#9a9a9a, #9a9a9a) center / 1.5px 14px no-repeat; }
.faq__more[open] summary::after { transform: rotate(45deg); }
.faq__more summary { font-weight: 700; }

/* ===== Футер ===== */
/* overflow: hidden — как body-footer__main-right у rivertv: гасит поле −30px у колонок ссылок */
.footer { position: relative; overflow: hidden; padding: 50px 0 34px; color: #fff; background: var(--solid); }
.footer__content { margin: 0 auto; padding: 0 20px; max-width: 1852px; }
.footer__main { display: flex; justify-content: space-between; gap: 0 32px; margin-bottom: 12px; padding-bottom: 17px; border-bottom: 1px solid #505050; }
.footer__left { width: 34%; min-width: 260px; }
.footer__logo { display: inline-block; margin-bottom: 12px; height: 25px; line-height: 0; }
.footer__logo img { height: 100%; width: auto; }
.footer__info { margin: 0 0 32px; max-width: 504px; font-size: 12px; line-height: 1.667em; }
.footer__social { display: flex; gap: 24px; list-style: none; }
.footer__social-link { position: relative; display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; background: rgba(255, 255, 255, .7); transition: background .2s; }
.footer__social-link img { width: 18px; height: 18px; filter: brightness(0) opacity(.9); transition: filter .2s; }
.footer__social-link--twitch:hover { background: #9146ff; }
.footer__social-link--youtube:hover { background: #f00; }
.footer__social-link--vk:hover { background: #07f; }
.footer__social-link:hover img { filter: none; }
.footer__nav { display: flex; margin-right: -30px; padding-top: 5px; }
.footer__nav-col { padding-right: 40px; min-width: 160px; }
.footer__nav-title { margin-bottom: 13px; font-size: 12px; line-height: 1em; letter-spacing: .05em; font-weight: 600; color: #aeaeae; text-transform: uppercase; }
.footer__nav ul { list-style: none; font-size: 12px; line-height: 1.2em; }
.footer__nav li { margin: 0 0 6px; }
.footer__nav a { color: #fff; }
.footer__bottom { font-size: 12px; line-height: 1.2em; }

/* ===== Внутренние светлые страницы ===== */
/* Только вертикаль: боковые поля даёт .content. 100px — как channels-grid-layout */
.page { padding-top: 100px; padding-bottom: 100px; }
.page__title { margin: 0; font-size: 44px; line-height: 60px; }
.page__lead { margin: 4px 0 0; font-size: 16px; }

/* Список игр: заголовок над гридом */
.list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
/* Грид кита (Pages/Games/Index.cshtml): до загрузки скрипта держит место, чтобы
   футер не прыгал. Без JS — простой список ссылок. */
.games-grid { display: block; min-height: 60vh; }
.games-plain { columns: 3 260px; padding-left: 20px; }

/* О проекте — как rivertv.ca/about */
.about__title { margin: 0 0 30px; font-size: 45px; line-height: 61px; }
.about ul { padding-left: 22px; margin-bottom: 1.688em; }
.about li + li { margin-top: 6px; }
.about h2 { font-size: 34px; margin-top: 50px; }
.about h3 { font-size: 20px; margin: 28px 0 10px; }
.follow { margin-top: 50px; padding-top: 50px; border-top: 1px solid var(--line); text-align: center; }
.follow__title { margin-bottom: 10px; font-size: 16px; color: var(--text); }
.follow__list { display: flex; justify-content: center; gap: 24px; list-style: none; }
.follow__link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 2px; }
.follow__link img { width: 22px; height: 22px; }
.follow__link--twitch { background: #9146ff; }
.follow__link--youtube { background: #f00; }
.follow__link--vk { background: #07f; }
.follow__link:hover { filter: brightness(1.1); }

/* ===== Страница игры — как rivertv.ca/vod/details ===== */
.detail { position: relative; overflow: hidden; padding-bottom: 100px; }
.detail__bg {
    position: absolute; top: 0; left: 0; right: 0; height: 760px;
    /* На месте кадра справа сверху (background-size: 83%) — цвет коробки игры */
    background:
        radial-gradient(60% 70% at 78% 30%, hsl(var(--h) 70% 45% / .65), transparent 70%),
        radial-gradient(40% 50% at 95% 0%, hsl(calc(var(--h) + 35) 70% 35% / .6), transparent 70%);
}
/* Если есть обложка: справа сверху на 83% ширины, как кадр у rivertv; размыта, потому что 456 px мало для такого размера */
.detail__bg-img { position: absolute; top: 0; right: 0; width: 83%; height: 100%; object-fit: cover; object-position: center 30%; filter: blur(14px) saturate(1.2); opacity: .55; transform: scale(1.05); }
.detail__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tv-bg) 19%, rgba(13, 16, 19, 0) 50.11%); }
.detail__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--tv-bg) 1%, rgba(13, 16, 19, 0) 100%); }
.detail__inner { position: relative; padding: 0 110px 0 152px; }
.detail__header { display: flex; padding: 40px 0 0; }
.detail__logo { flex: none; width: 420px; }
.detail__logo .box-title { font-size: 26px; line-height: 1.2; }
.detail__logo .box-art { padding: 18px 20px; }
.detail__logo .box-foot { font-size: 14px; padding: 0 20px; }
.detail__about { max-width: 520px; padding: 50px 0 0 40px; }
.detail__title { margin: 0 0 25px; font-size: 45px; line-height: 61px; color: #fff; }
.detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.detail__genre { display: inline-block; padding-right: 10px; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, .6); }
.detail__advisory { display: inline-block; padding: 1px 8px; border: 1px solid #d3d3d3; border-radius: 4px; background: rgba(0, 0, 0, .2); font-size: 12px; line-height: 16px; letter-spacing: .2px; color: #c9c9c9; }
.detail__description { margin: 0; padding: 12px 20px 40px 0; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, .85); white-space: pre-line; }
.detail__play { padding: 40px 0; }
.btn--play { padding: 0 40px; font-size: 18px; }
.detail__block { margin-top: 40px; }
.detail__block-title { margin: 0; padding-bottom: 20px; font-size: 24px; line-height: 33px; font-weight: 600; color: rgba(255, 255, 255, .87); }
.detail__text { margin: 0; max-width: 760px; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, .85); white-space: pre-line; }
/* Вкладки сезонов */
.detail__seasons { display: flex; list-style: none; padding: 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.detail__season { min-width: 100px; padding: 0 15px 6px; text-align: center; font-size: 16px; color: rgba(255, 255, 255, .6); }
.detail__season--active { color: #fff; box-shadow: inset 0 -5px 0 var(--accent-light); }
.detail__episodes { margin-top: 17px; gap: 14px; }
.episode { flex: none; width: 392px; scroll-snap-align: start; color: #fff; }
.episode:hover { text-decoration: none; }
.episode__img { position: relative; display: block; aspect-ratio: 16 / 9; background: #1f242a; overflow: hidden; }
.episode__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.episode__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, .55); opacity: .9; transition: opacity .3s, background .3s; }
.episode__play::after { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.episode:hover .episode__play { background: var(--accent); opacity: 1; }
.episode__time { display: block; margin-top: 8px; font-size: 14px; line-height: 19px; font-weight: 600; letter-spacing: .15px; color: rgba(255, 255, 255, .38); }
.episode__name { display: block; padding: 3px 0; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «Cast & Crew»: круги 188px */
.detail__actors { margin-top: 80px; }
.detail__actors-list { display: flex; flex-wrap: wrap; gap: 0 16px; list-style: none; }
.actor { width: 188px; }
.actor__img { display: block; width: 188px; height: 188px; clip-path: circle(42% at 50% 50%); background: #232930; }
.actor__img span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; }
.actor__name { display: block; width: 188px; margin-top: -8px; padding-left: 16px; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail__crew { display: flex; gap: 60px; margin-top: 60px; }
.crew { flex: 1 1 0; }
.crew--facts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 28px; }
.crew__title { margin: 0 0 12px; font-size: 16px; line-height: 16px; font-weight: 700; color: #fff; }
.crew__role { font-size: 16px; line-height: 22px; color: #ddd; }
.detail__similar { margin-top: 78px; padding: 0 110px 0 152px; }

/* ===== «Коробка» игры (Shared/_Box.cshtml) — горизонтальная NA-коробка SNES ===== */
.box {
    position: relative; display: flex; flex-direction: column; aspect-ratio: 1.4;
    overflow: hidden; color: #fff; background: #14161c; padding-right: 9%;
}
.box::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 9%;
    background: repeating-linear-gradient(to bottom, #2b2e36 0 6px, #14161c 6px 12px);
}
/* Настоящая обложка (~1.44 : 1) — в ту же рамку 1.4 : 1, без нарисованной кромки */
.box--cover { padding: 0; background: #000; }
.box--cover::after { content: none; }
.box--cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.box-art {
    flex: 1; display: flex; align-items: flex-end; padding: 10px 12px;
    background:
        radial-gradient(120% 90% at 85% 10%, hsl(var(--h) 75% 62% / .55), transparent 60%),
        linear-gradient(150deg, hsl(var(--h) 55% 40%), hsl(calc(var(--h) + 35) 60% 16%));
}
.box-title { font-weight: 700; font-size: 15px; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.box-foot { height: 22%; min-height: 22px; display: flex; align-items: center; padding: 0 12px; background: #0d0e12; border-top: 2px solid #d3272b; font-size: 11px; line-height: 1.2; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Каталог (как /vod) ===== */
.body--tv { background: var(--tv-bg); color: #fff; }
.vod { overflow: hidden; padding: 40px 0 100px; }
.vod__grid { padding: 0 110px; }
.vod-line { display: flex; flex-direction: column; }
.vod-line + .vod-line { margin-top: 60px; }
.vod-line__head { display: flex; align-items: baseline; gap: 14px; }
.vod-line__title { margin: 0; color: #fff; font-size: 24px; line-height: 33px; font-weight: 600; }
.vod-line__meta { font-size: 14px; color: rgba(255, 255, 255, .45); }
.vod-line__swiper { position: relative; margin-top: 22px; }
/* Лента видна до края экрана справа, как overflow: visible у их swiper */
.vod-line__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -110px; padding-right: 110px; }
.vod-line__track::-webkit-scrollbar { display: none; }
.vod-tile { flex: none; width: 260px; scroll-snap-align: start; color: rgba(255, 255, 255, .55); }
.vod-tile:hover { text-decoration: none; }
.vod-tile:hover .box { outline: 2px solid #fff; outline-offset: -2px; }
.vod-tile__caption { display: block; margin-top: 8px; font-size: 13px; line-height: 1.3; }
/* «Все (N)» — последняя плитка ленты */
.vod-tile--all { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.38; height: auto; width: 260px; align-self: flex-start; color: var(--accent-light); font-size: 16px; background: rgba(255, 255, 255, .04); }
.vod-tile--all:hover { background: rgba(255, 255, 255, .08); }
/* Стрелки — широкие градиенты от фона страницы */
.vod-arrow { position: absolute; top: 0; bottom: 0; z-index: 2; width: 196px; border: 0; padding: 0; cursor: pointer; color: var(--muted-white); background: none; }
.vod-arrow::before { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; }
.vod-arrow--prev { left: -110px; background: linear-gradient(to left, transparent 0, var(--tv-bg) 110px, var(--tv-bg) 100%); width: 150px; }
.vod-arrow--prev::before { left: 50px; rotate: 135deg; }
.vod-arrow--next { right: -110px; background: linear-gradient(to right, transparent 0, var(--tv-bg) 110px, var(--tv-bg) 100%); width: 150px; }
.vod-arrow--next::before { right: 50px; rotate: -45deg; }
.vod-arrow:hover { color: #fff; }
.vod-arrow[hidden] { display: none; }
@media (hover: none) { .vod-arrow { display: none; } }

/* ===== Адаптив ===== */
@media (max-width: 1199px) {
    /* Как у rivertv до 1199 px: текст ближе к колонкам */
    .vod-sec__right { margin-left: 20px; padding-top: 70px; padding-bottom: 95px; width: 447px; }
    /* Узкие колонки: легенда под кольцом, иначе подписи не помещаются */
    .donut__body { flex-direction: column; align-items: flex-start; }
    .donut__legend { width: 100%; max-width: 260px; }
    /* Как у rivertv: заголовки лент 24px только на широких экранах */
    .vod-line__title { font-size: 18px; line-height: 25px; }
    .stream-sec__right { width: 440px; padding-top: 70px; }
    .watch-sec__left { width: 440px; }
    /* Футер, как у rivertv до 1199px: логотип, текст и иконки по центру, колонки ссылок ниже под линией */
    .footer__main { flex-direction: column; margin-bottom: 26px; padding-bottom: 0; border-bottom: 0; }
    .footer__left { width: auto; text-align: center; }
    .footer__logo { margin-bottom: 22px; }
    .footer__info { margin: 0 auto 15px; }
    .footer__social { justify-content: center; padding: 12px 0; }
    .footer__nav { justify-content: space-around; margin: 15px auto 0; padding: 35px 0 15px; max-width: 850px; border-top: 1px solid #505050; }
    .footer__nav-col { min-width: auto; }
    .footer__bottom { text-align: center; }
}
@media (max-width: 579px) {
    .footer__nav { flex-wrap: wrap; justify-content: space-between; max-width: 400px; }
    .footer__nav-col { width: 50%; margin-bottom: 15px; padding-right: 0; }
    .footer__nav-col:nth-child(2n+1) { padding-right: 20px; }
    .footer__nav-col:nth-child(2n+2) { padding-left: 20px; }
    .footer__nav-title { margin-bottom: 7px; }
}
@media (max-width: 1023px) {
    .donuts { grid-template-columns: 1fr 1fr; }
    .vod__grid { padding: 0 40px; }
    .vod-line__track { margin-right: -40px; padding-right: 40px; }
    .vod-arrow--prev { left: -40px; width: 110px; }
    .vod-arrow--next { right: -40px; width: 110px; }
    .genres { padding: 0 40px; }
    .stream-sec__row, .watch-sec__row { flex-direction: column; align-items: stretch; }
    /* Как у rivertv до 991 px */
    .vod-sec__right { width: 465px; }
    .stream-sec__right, .watch-sec__left { width: auto; padding: 32px 20px 0; }
    .device { margin: 0 auto; }
    .watch-sec__left { padding-bottom: 32px; }
    .detail__inner, .detail__similar { padding-left: 40px; padding-right: 40px; }
    .detail__logo { width: 320px; }
    .detail__about { padding-top: 10px; }
    .detail__title { font-size: 34px; line-height: 46px; }
    .detail__crew { flex-direction: column; gap: 32px; }
    .tv-nav { margin-left: 24px; }
}
@media (max-width: 767px) {
    /* Как у rivertv до 767 px: текст сверху, колонки под ним */
    .vod-sec__row { flex-direction: column; align-items: stretch; }
    .vod-sec__left, .vod-sec__right { margin: 0; width: 100%; max-width: none; }
    .vod-sec__left { order: 1; height: 490px; }
    .vod-sec__right { padding-top: 40px; padding-bottom: 0; }
    h1 { font-size: 32px; }
    .section-title, .section-title--45 { font-size: 30px; line-height: 1.3; }
    .promo__pics { grid-template-columns: repeat(3, 1fr); right: -140px; }
    .promo__gradient { background:
        linear-gradient(var(--promo) 40px, rgba(10, 14, 22, .73) 60px, rgba(0, 0, 0, 0) 80px),
        linear-gradient(to top, var(--promo) 0, rgba(0, 0, 0, 0) 80px),
        linear-gradient(rgba(10, 14, 22, .75), rgba(10, 14, 22, .85)); }
    .promo__title { font-size: 34px; line-height: 44px; letter-spacing: .5px; }
    .promo__subtitle { font-size: 17px; line-height: 25px; }
    .promo__logo { height: 38px; margin-bottom: 28px; }
    .btn--main { padding: 2px 36px; font-size: 18px; }
    .promo__description { font-size: 16px; }
    /* Три цифры всегда в одну строку, равными колонками */
    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .charts { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
    .donuts { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
    .donut__svg { width: 120px; height: 120px; }
    .cols { height: 180px; }
    .hbars__row { grid-template-columns: 84px 1fr 64px; column-gap: 8px; }
    .stats li { min-width: 0; font-size: 13px; line-height: 1.3; }
    .stats b { font-size: 28px; line-height: 40px; }
    .rules-sec { padding: 72px 0 56px; }
    .checklist { grid-template-columns: 1fr; }
    .faq-sec { padding: 64px 0; }
    .page { padding-top: 48px; padding-bottom: 64px; }
    .page__title, .about__title { font-size: 32px; line-height: 42px; }
    .list-head { flex-direction: column; gap: 12px; }
    .detail__inner, .detail__similar { padding-left: 16px; padding-right: 16px; }
    .detail__header { flex-direction: column; padding-top: 24px; }
    .detail__logo { width: 100%; max-width: 340px; }
    .detail__about { padding: 24px 0 0; }
    .detail__title { font-size: 30px; line-height: 40px; margin-bottom: 14px; }
    .detail__description { padding-bottom: 8px; }
    .detail__play { padding: 24px 0; }
    .episode { width: 280px; }
    .detail__actors { margin-top: 48px; }
    .actor, .actor__img, .actor__name { width: 120px; }
    .actor__img { height: 120px; }
    .actor__img span { font-size: 18px; }
    .actor__name { font-size: 14px; padding-left: 8px; }
    .header__content { padding: 16px; gap: 12px; }
    .header__logo img { height: 16px; }
    .header__menu { gap: 14px; }
    .header__link { font-size: 12px; }
    .header .btn--header { display: none !important; }
    .header--tv .header__content { height: 64px; }
    .tv-nav { display: none; }
    .genres { padding: 0 16px; gap: 22px; }
    .vod { padding-top: 24px; }
    .vod__grid { padding: 0 16px; }
    .vod-line + .vod-line { margin-top: 40px; }
    .vod-line__title { font-size: 18px; line-height: 25px; }
    .vod-line__meta { display: none; }
    .vod-line__track { gap: 10px; margin-right: -16px; padding-right: 16px; }
    .vod-tile, .vod-tile--all { width: 170px; }
    .box-title { font-size: 12px; }
    .box-foot { font-size: 9px; padding: 0 8px; }
    .box-art { padding: 8px; }
}
@media (max-width: 479px) {
    .vod-sec__left { height: 394px; }
}