/* ===============================================================
   LORDFILM V15 — «Ночной янтарь»: тёплый нефтяной тёмный слой
   с медно-янтарным акцентом и мягкими крупными скруглениями.
   Подключается последним, поэтому переопределяет токены из common.css
   (включая .dt — см. блок ниже: сайт открывается в тёмном режиме
   по умолчанию, и .dt задаёт токены прямо на body, так что побеждает
   по порядку подключения). Заголовки — на самостоятельном self-hosted
   Oswald (base-токен --font-display), а не на несуществующем в браузере
   у гостя серифе: гарантированно рендерится одинаково у всех.
   =============================================================== */

:root {
	/* поверхности: глубокий нефтяной, почти чёрный, с тёплым подтоном */
	--bg: #0d1613;
	--bg-darker: #0a1210;
	--bg-darker-1: #182420;
	--bg-black: #070c0a;
	--bg-blackest: #050908;

	/* текст: тёплый кремовый вместо холодного белого */
	--tt: #f0e6d8;
	--tt-fade-0: #cdbfaa;
	--tt-fade: #8f8471;

	/* границы — тёплый янтарный волосок; тень мягкая, для приподнятых карточек */
	--bdc: rgba(230,190,140,0.14);
	--bsh: 0 2px 6px rgba(0,0,0,0.3);
	--bsh-block: 0 4px 14px rgba(0,0,0,0.3);
	--bsh-long: 0 30px 70px rgba(0,0,0,0.5);
	--ui-bsh: 0 20px 50px rgba(0,0,0,0.4);

	/* акцент — медный янтарь, приглушённый, без неоновой яркости */
	--accent: #c8862f;
	--accent-soft: rgba(200,134,47,0.16);
	--ui-bg-btn: #c8862f;
	--ui-tt-btn: #0d1613;
	--ui-bg-btn-hover: #dd9a3e;
	--ui-bdc-inp: rgba(230,190,140,0.14);
	--ui-bdc-inp-focus: #c8862f;
	--ui-bg-inp: rgba(255,255,255,0.04);

	--ui-bg: #0d1613;
	--ui-bg-darker: #182420;
	--ui-bg-darkest: #0a1210;
	--ui-accent: #d9a054;
	--ui-bdc: rgba(230,190,140,0.14);
	--ui-gradient: linear-gradient(to bottom, #1c2622, #0a1210);
	--ui-bg-black: #0a1210;
	--ui-bg-attention: #241a0c;
	--ui-bd-attention: #c8862f;
	--blue: #d9a054;

	/* геометрия: мягкие крупные скругления — противоположность острым углам,
	   сайт должен читаться как обжитой и тёплый, а не строгий */
	--bdrs-card: 22px;
	--bdrs-poster: 18px;
	--ui-elem-bdrs: 14px;
	--ui-bdrs: 14px;
	--indent: 28px;
	--indent-negative: -28px;
	--max-width: 1200px;

	--fs-2xl: 30px;

	/* типографика: заголовки на self-hosted Oswald (гарантированно грузится
	   у всех), интерфейс — системный гротеск */
	--font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
		'Helvetica Neue', Arial, sans-serif;
	--font-display: 'Oswald', 'inter', sans-serif;
	--font-mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
}

/* Сайт открывается в тёмном режиме (sett=['dt','btn1'] в main.tpl) — .dt задаёт
   токены прямо на body, поэтому дублируем палитру и здесь: иначе зелёный
   акцент common.css победит унаследованные из :root. */
.dt {
	--bg: #0d1613; --bg-darker: #0a1210; --bg-darker-1: #182420; --bg-black: #070c0a; --bg-blackest: #050908;
	--tt: #f0e6d8; --tt-fade-0: #cdbfaa; --tt-fade: #8f8471;
	--bdc: rgba(230,190,140,0.14); --bsh-long: 0 30px 70px rgba(0,0,0,0.5); --bsh: 0 2px 6px rgba(0,0,0,0.3);
	--bsh-block: 0 4px 14px rgba(0,0,0,0.3);

	--accent: #c8862f; --accent-soft: rgba(200,134,47,0.16);
	--ui-bg-btn: #c8862f; --ui-bg-btn-hover: #dd9a3e;
	--ui-bg-inp: rgba(255,255,255,0.04); --ui-bdc-inp: rgba(230,190,140,0.14); --ui-bdc-inp-focus: #c8862f;

	--ui-bg: #0d1613; --ui-bg-darker: #182420; --ui-bg-darkest: #0a1210; --ui-accent: #d9a054;
	--ui-bdc: rgba(230,190,140,0.14); --ui-tt-fade: #8f8471;
	--ui-bsh: 0 20px 50px rgba(0,0,0,0.4); --ui-bsh-inset: none;
	--ui-gradient: linear-gradient(to bottom, #1c2622, #0a1210); --ui-bg-black: #0a1210;
	--ui-bg-attention: #241a0c; --ui-bd-attention: #c8862f;
	--blue: #d9a054;
	/* --imdb и --kp не трогаем: жёлтый/оранжевый рейтинг остаётся узнаваемым */
}

body {font-family: var(--font-ui); background-color: var(--bg-blackest); line-height: 1.6;}
.wrapper__container--main {background-color: var(--bg-darker); box-shadow: none;}

/* фон: тёплое янтарное зарево вместо зелёного свечения */
.wrapper::before {height: 520px;
	background: radial-gradient(120% 100% at 50% 0%, rgba(200,134,47,0.12) 0%, transparent 62%), var(--bg-blackest);}

/* ЗАГОЛОВКИ — плотный жирный капс вместо серифа: постерная, афишная подача
----------------------------------------------- */
h1, h2, h3, .sect__title, .home-title, .page__title, .carou__caption {
	font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; line-height: 1.15;
	color: var(--tt); text-transform: uppercase;}
.home-title {font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 18px 0 10px;}
.home-subtitle {color: var(--tt-fade); font-size: var(--fs-md); max-width: 62ch; margin-bottom: 4px;
	font-family: var(--font-ui); text-transform: none; font-weight: 400;}
.sect__title {font-size: clamp(20px, 2.2vw, 27px);}
.carou .carou__caption {font-size: clamp(18px, 2vw, 23px); color: var(--tt); opacity: 1;
	margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bdc);}
.page__title {font-size: clamp(22px, 2.8vw, 32px);}

/* ШАПКА — мягкая, с тёплым подсветом снизу вместо жёсткой линии
----------------------------------------------- */
.header {background-color: var(--bg); backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--bdc); box-shadow: none; min-height: 64px;}
.logo {font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
	font-size: 22px; font-weight: 700; color: var(--tt);}
.header__menu > li > a {font-family: var(--font-ui); font-weight: 500; text-transform: none;
	letter-spacing: 0; font-size: var(--fs-base); color: var(--tt-fade-0); border-bottom: 1px solid transparent;}
.header__menu > li > a:hover {color: var(--accent); border-bottom-color: var(--accent);}
.header__menu-hidden {border: 1px solid var(--bdc); box-shadow: var(--ui-bsh); border-radius: 18px;}
.search-block__input, .search-block__input:focus {background-color: var(--ui-bg-inp); border: 1px solid var(--bdc);
	height: 42px; border-radius: var(--ui-elem-bdrs);}
.header__btn-login {background: var(--ui-bg-btn); color: var(--ui-tt-btn); border-radius: var(--ui-elem-bdrs); font-weight: 600;}
.header__btn-login:hover {background: var(--ui-bg-btn-hover);}

.carou {background-color: var(--bg-darker); color: var(--tt); padding-top: 0;}
.sect.is-empty {display: none;}

/* СЕКЦИИ — воздух между блоками
----------------------------------------------- */
.content {padding: 28px var(--indent) 56px;}
.sect {margin-bottom: 60px;}
.sect__header {margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--bdc);}
.sect__more {color: var(--tt-fade); font-size: var(--fs-base);}
.sect__more:hover {color: var(--accent);}
/* весь заголовок раздела — ссылка на категорию */
.sect__title a {color: inherit; display: inline-flex; align-items: baseline; gap: 10px;}
.sect__title a::after {content: '\2192'; font-size: 0.6em; color: var(--tt-fade); transition: transform .2s ease;}
.sect__title a:hover {color: var(--accent);}
.sect__title a:hover::after {transform: translateX(4px); color: var(--accent);}

.speedbar {color: var(--tt-fade); font-size: var(--fs-sm);}

/* КАРТОЧКИ — крупные мягкие скругления, тёплая приподнятая тень при наведении
----------------------------------------------- */
.item, .grid-items__item {background: transparent;}
.item__img {border: 1px solid var(--bdc); border-radius: var(--bdrs-poster); overflow: hidden;
	background: var(--ui-bg-darker); box-shadow: var(--bsh); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;}
.item:hover .item__img {box-shadow: 0 16px 34px rgba(0,0,0,0.4); transform: translateY(-3px); border-color: var(--accent);}
.item__label {background: rgba(13,22,19,0.86); color: #f0e6d8; font-size: 11px; letter-spacing: 0.04em;
	text-transform: uppercase; border-radius: 999px; padding: 4px 10px; font-weight: 500;}
.item__title {color: var(--tt); font-weight: 500;}

/* КНОПКИ И ТЕГИ — крупные мягкие скругления
----------------------------------------------- */
button, .btn, [type="button"], [type="submit"] {border-radius: var(--ui-elem-bdrs); font-weight: 500; box-shadow: none;}
button:active, [type="submit"]:active {transform: scale(0.98); box-shadow: none;}
.pagination__btn-loader a {background: var(--ui-bg-btn); color: var(--ui-tt-btn); border-radius: var(--ui-elem-bdrs); font-weight: 600;}
/* при живом JS кнопку прячем: страница добирает следующий блок сама */
.has-autoload .pagination__btn-loader a {display: none;}
.autoload-status {text-align: center; color: var(--tt-fade); font-size: var(--fs-sm);
	font-family: var(--font-mono); padding: 18px 0 8px; min-height: 20px;}

/* ПОДВАЛ
----------------------------------------------- */
.footer {border-top: 1px solid var(--bdc); background: var(--bg-darker); padding-top: 28px; padding-bottom: 28px;}
.footer__logo {font-family: var(--font-display); text-transform: uppercase; font-weight: 700;}

/* ПОЯВЛЕНИЕ БЛОКОВ ПРИ ПРОКРУТКЕ
----------------------------------------------- */
.has-reveal .reveal {opacity: 0; transform: translateY(12px);}
.has-reveal .reveal.is-in {opacity: 1; transform: none;
	transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
.sect:has(> .sect__content.grid-items:not(:has(*))) {display: none;}

@media (prefers-reduced-motion: reduce) {
	.has-reveal .reveal, .has-reveal .reveal.is-in {opacity: 1; transform: none; transition: none;}
	.item:hover .item__img {transform: none;}
}

@media (max-width: 900px) {
	:root {--indent: 18px; --bdrs-card: 16px; --bdrs-poster: 14px;}
	.sect {margin-bottom: 44px;}
}

/* Заглушка, когда нет ни CDN-плеера, ни своих плееров в доп. полях */
.player-empty {display: none;}
#page__player:not(:has(.tabs-block__content)) .player-empty {
	display: block; text-align: center; padding: 48px 20px; color: var(--tt-fade);
	border: 1px solid var(--bdc); border-radius: var(--bdrs-card); background: var(--bg-darker-1);}

/* ===== Шапка всегда закреплена при прокрутке (десктоп + мобильные) ===== */
.header-is-sticky .header {translate: 0 0 !important;}
.wrapper {overflow-x: clip; overflow-y: visible;}
.header {position: -webkit-sticky; position: sticky; top: 0;}

/* ===== Мобильная шапка: логотип в одну строку, кнопки компактнее ===== */
@media screen and (max-width: 760px) {
	.header {column-gap: 8px;}
	.header__logo {flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.header__logo:not(:has(img)) {height: 34px; line-height: 34px; display: block;
		font-size: 16px; letter-spacing: 0; padding-left: 30px;}
	.header__logo:not(:has(img))::before {width: 24px; height: 24px;}
	.header__theme-select {width: 34px; height: 34px; margin-left: auto;}
	.header__theme-select::before {width: 22px; height: 22px;}
	.header__btn-menu {width: 34px; height: 34px; border-radius: 10px;}
	.header__btn-menu::before {width: 20px; height: 20px;}
}
@media screen and (max-width: 400px) {
	.header__logo:not(:has(img)) {font-size: 14px; padding-left: 26px;}
	.header__logo:not(:has(img))::before {width: 20px; height: 20px;}
	.header__theme-select, .header__btn-menu {width: 30px; height: 30px;}
	.header__theme-select::before {width: 20px; height: 20px;}
	.header__btn-menu::before {width: 18px; height: 18px;}
}

/* ===============================================================
   ЗАГЛУШКИ, ПАНЕЛИ, МОДАЛКИ — тот же мягкий крупный радиус, что и у карточек,
   вместо стандартных мелких. Круглые по смыслу элементы (аватары, ручка
   слайдера, спиннер, тумблеры) не трогаем — им радиус нужен по смыслу.
   =============================================================== */
.pwidget, .access, .lgn__content,
.ui-dialog, .ui-dialog-titlebar,
#searchsuggestions,
.filter-block, .page__schedule, .top-users,
.us__one
{border-radius: var(--bdrs-card) !important;}
.access__btn, .fr__img, .page__scr a, .page__scr img,
.fs-result__img, .tuser__rating
{border-radius: var(--ui-elem-bdrs) !important;}