@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ================================================================== */
/*  ОСНОВА                                                             */
/*                                                                     */
/*  Один слой значений, из которого собран весь интерфейс. Имена       */
/*  переменных остались прежними (--bg, --surface, --text, --blue):    */
/*  на них ссылаются четыре тысячи строк ниже, и переименование        */
/*  ничего бы не улучшило, зато сломало бы всё разом. Изменились       */
/*  значения — этого хватает, чтобы перекрасить продукт целиком.       */
/*                                                                     */
/*  Тёмная тема — основная и лежит прямо в :root. Светлая осталась     */
/*  как выбор человека и переопределяет только цвета.                  */
/*                                                                     */
/*  Глубина набирается четырьмя ступенями, а не пятнадцатью оттенками: */
/*  фон → плоскость → приподнятая плоскость → окно. Разделять разделы  */
/*  положено отступом и границей, а не новым цветом.                   */
/* ================================================================== */

:root, :root[data-theme="dark"] {
  color-scheme: dark;

  /* ---------------- Поверхности ----------------
     Строй тёплый: у чёрного есть температура, и рядом с кремовой светлой
     темой холодный синеватый читался бы как другой продукт. Ступеней
     по-прежнему четыре — фон, плита, приподнятая плита, окно.

     --bg-hero отделяет полосу с поиском от остальной страницы: та же
     пара «одна полоса светлее другой», что и в светлой теме. */
  --bg: #141110;
  --bg-hero: #191512;
  --surface: #1e1a17;
  --surface-hover: #242019;
  --elevated: #282320;
  --modal: #2d2825;
  --border: #2e2823;
  /* Проверено против всех пяти поверхностей, а не только против фона:
     на приподнятой плите и в окне прежний #736961 давал 2.90 и 2.72
     при пороге 3. Это единственный признак края поля поиска, и в
     модальном окне его было почти не видно. */
  --border-strong: #807569;

  /* ---------------- Текст ---------------- */
  /* Три ступени, и все три проходят порог 4.5 к каждой из поверхностей —
     это проверено расчётом, а не глазом. Приглушённый нельзя делать
     темнее #8d939e: на приподнятой плоскости и в модальном окне он
     перестаёт читаться. */
  --text: #f2ece3;
  --text-2: #b3a99b;
  --text-3: #a0988a;

  /* ---------------- Акцент ----------------
     Один на весь продукт: тёплый жёлтый, цвет света от экрана. Он не
     спорит с постерами — те и так пёстрые — и остаётся заметным на
     холодном тёмном фоне. Текст на нём всегда тёмный. */
  /* Акцент один, но у него две работы, и на светлом фоне они расходятся.
     Заливка кнопки остаётся яркой в обеих темах — это лицо продукта.
     А тот же цвет как **текст** на светлой бумаге контраста не даёт, и
     для надписей, ссылок и знаков заведён отдельный, притемнённый. */
  --accent: #f0b45c;
  --accent-tekst: #f0b45c;
  --accent-hover: #f8c47a;
  --accent-soft: rgba(240, 180, 92, .14);
  /* Плотность украшения по краям первого экрана. Бумага и золото на почти
     чёрном светятся, поэтому в тёмной теме держим их заметно тише. */
  --dekor-plotnost: .2;
  /* Подложка под зрителями.

     На тёмной полосе тени в прямом смысле быть не может: полоса и так
     почти чёрная (#191512), и чёрный под ней при любой плотности даёт
     разницу в яркости 1.1 — глазу этого не видно. Считал, а не подбирал.
     Поэтому в тёмной теме фигуры отделяет не тень, а тёплый ореол
     цвета акцента: широкое размытие без смещения, чтобы читался мягкий
     подсвет позади, а не обводка по контуру. */
  --zritel-ten: 0 8px 46px rgba(240, 180, 92, .19);
  --accent-line: rgba(240, 180, 92, .38);
  --on-accent: #191307;

  /* Прежние имена кнопок ведут на тот же акцент. */
  --blue: var(--accent);
  --blue-hover: var(--accent-hover);
  --blue-soft: var(--accent-soft);
  --on-blue: var(--on-accent);
  /* У «синего» те же две работы, что у акцента: заливка и надпись. На
     кремовой бумаге они расходятся — жёлтый как текст даёт 1.73 при
     пороге 4.5, а как рамка не дотягивает и до 3. Заливка остаётся
     --blue, всё, что читают или обводят, берёт --blue-tekst. */
  --blue-tekst: var(--accent-tekst);

  /* Градиенты и свечения обезврежены здесь, в одном месте: правила
     ниже по файлу продолжают их звать, но получают ровный цвет. */
  --accent-2: var(--accent);
  --accent-grad: var(--accent);
  --accent-glow: transparent;
  --glow-1: transparent;
  --glow-2: transparent;

  /* ---------------- Состояния ---------------- */
  --green: #4cbf78;
  --amber: #d98f3c;
  --red: #ef6f63;
  --red-soft: rgba(239, 111, 99, .12);
  --green-soft: rgba(76, 191, 120, .12);

  /* ---------------- Шрифты ---------------- */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Третья роль: технические подписи — номера разделов, состояния, код
     комнаты, время. Берём системный моноширинный, а не грузим четвёртый
     файл шрифта: на машинах читателей это SF Mono или Consolas, и вид у
     них ровно тот, что нужен. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  /* Шкала. Крупное тянется за шириной окна, мелкое остаётся мелким:
     подпись в 12 точек читается одинаково на любом экране. */
  /* Разрыв между крупным и мелким — главный приём этого оформления:
     огромный заголовок против подписи в одиннадцать точек. Поэтому
     display поднят, а служебные кегли остались там же. */
  --fs-display: clamp(34px, 6vw, 68px);
  --fs-h1: clamp(28px, 3.6vw, 42px);
  --fs-h2: clamp(21px, 2.2vw, 28px);
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-small: 13.5px;
  --fs-caption: 12px;
  --fs-label: 11px;

  --lh-tight: 1.08;
  --lh-head: 1.24;
  --lh-body: 1.62;

  --tr-display: -.032em;
  --tr-head: -.018em;
  --tr-label: .085em;

  /* ---------------- Отступы ---------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  /* Расстояние между разделами. Воздух здесь — не остаток места, а то,
     что отделяет один смысловой блок от другого. */
  --s-razdel: clamp(56px, 8vw, 104px);

  /* ---------------- Скругления ---------------- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-full: 999px;
  --radius: var(--r-2);
  --radius-lg: var(--r-3);

  /* ---------------- Тени ----------------
     Только чтобы показать, что предмет лежит выше остального. Никакого
     цветного свечения. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, .55);

  /* ---------------- Размеры каркаса ---------------- */
  --container: 1320px;
  --container-uzkiy: 760px;
  --shapka-h: 60px;

  /* ---------------- Движение ----------------
     Верхняя граница — четверть секунды: дольше человек уже ждёт, а не
     видит отклик. */
  --bystro: 140ms;
  --srednee: 190ms;
  --medlenno: 240ms;
  --krivaya: cubic-bezier(.2, .6, .3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  /* Кремовая бумага вместо белого листа: две полосы разной светлоты —
     верхняя под поиском темнее, страница ниже светлее. Граница между
     ними и есть главный разделитель страницы. */
  --bg: #fbf7f0;
  --bg-hero: #f4ece0;
  --surface: #ffffff;
  --surface-hover: #f2ebe0;
  --elevated: #ffffff;
  --modal: #ffffff;
  --border: #e2d8c8;
  --border-strong: #918269;

  --text: #241c16;
  --text-2: #5c5147;
  --text-3: #6e6357;

  /* Жёлтый на кремовом приходится притемнять сильнее, чем на белом:
     подложка сама тёплая и светлая. Проверено расчётом. */
  /* Заливка — тот же яркий жёлтый, что и в тёмной теме: кнопка должна
     выглядеть одинаково. Текст на ней тёмный. А акцент-как-надпись
     притемнён до коричневого, иначе на кремовом не читается. */
  --accent: #f0b45c;
  --accent-tekst: #8f5408;
  --accent-hover: #f8c47a;
  --accent-soft: rgba(143, 84, 8, .10);
  --dekor-plotnost: .55;
  --zritel-ten: 0 14px 34px rgba(60, 44, 28, .3);
  --accent-line: rgba(143, 84, 8, .28);
  --on-accent: #241c16;

  --green: #146b3c;
  --amber: #8a5610;
  --red: #b53125;
  --red-soft: rgba(181, 49, 37, .09);
  --green-soft: rgba(20, 107, 60, .09);

  --shadow-1: 0 1px 2px rgba(36, 28, 22, .07);
  --shadow-2: 0 6px 20px rgba(36, 28, 22, .10);
  --shadow-3: 0 20px 48px rgba(36, 28, 22, .14);
}

/* ================================================================== */
/*  Сброс                                                              */
/* ================================================================== */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  min-height: 100vh;
}

/* Прямые дети body — гибкие элементы колонки, и у них min-width: auto:
   ужаться ниже своего содержимого они не могут. Достаточно одного
   широкого ряда внутри (сравнение возможностей, состав фильма), и вся
   страница уезжает вбок. Нулевой минимум это снимает; внутренние ряды
   при этом прокручиваются сами, как и задумано. */
body > * { min-width: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Ни один экран не должен уезжать вбок. Проверялось на 320 точках. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  margin: 0;
}

p { margin: 0; }

input, button, select, textarea { font-family: inherit; font-size: inherit; }

img { max-width: 100%; }

a { color: inherit; }

/* Цифры в одном столбце должны стоять друг под другом: год, рейтинг,
   длительность, время в чате и на шкале плеера. */
.tabl, .rating, .meta-line, time, .timecode { font-variant-numeric: tabular-nums; }

/* ---------------- Фокус ----------------
   Виден всегда и одинаково: два кольца, чтобы читался и на плитке, и
   на постере, и на акцентной кнопке. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-tekst);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

::selection { background: var(--accent-soft); color: var(--text); }

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

/* ================================================================== */
/*  Каркас страницы                                                    */
/* ================================================================== */

.obolochka {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (max-width: 640px) {
  .obolochka { padding-inline: var(--s-4); }
}

/* ================================================================== */
/*  Надпись-ярлык                                                      */
/*                                                                     */
/*  Мелкая разрядка заглавными — единственное типографическое          */
/*  украшение, которое здесь разрешено себе. Она метит служебные       */
/*  строки: заголовок раздела, подпись поля, состояние.                */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*  Технические подписи                                                 */
/*                                                                      */
/*  Моноширинные, заглавными, с разрядкой. Ими помечена структура:      */
/*  номер раздела, состояние, код комнаты, источник. Они не украшение — */
/*  каждая говорит то, что иначе пришлось бы писать предложением.       */
/*                                                                      */
/*  Разрядка здесь положительная, в отличие от заголовков: мелкие       */
/*  заглавные без неё слипаются.                                        */
/* ------------------------------------------------------------------ */

.yarlyk {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Номер раздела набран как приглашение командной строки: «01 $ popular».
   Три части и три цвета — номер приглушён, знак доллара акцентный, имя
   раздела обычным цветом текста. Это единственное место, где акцент
   работает меткой структуры, а не действием. */
.nomer {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

.nomer-chislo { color: var(--text-3); }
.nomer-znak { color: var(--accent-tekst); }
.nomer-imya { color: var(--text-2); }

/* ------------------------------------------------------------------ */
/*  Состояние                                                           */
/*                                                                      */
/*  Короткая метка вместо объяснения: AVAILABLE вместо «этот источник    */
/*  сейчас доступен». Цвет — подсказка, но слово несёт смысл само.       */
/* ------------------------------------------------------------------ */

.sost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.sost::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.sost-est { color: var(--green); }
.sost-net { color: var(--text-3); }
.sost-sboy { color: var(--red); }
.sost-zhdyom { color: var(--accent-tekst); }
/* Точка у состояния «нет» пустая: заполненная читалась бы как «есть». */
.sost-net::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ================================================================== */
/*  Заголовок раздела                                                  */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*  Раздел                                                              */
/*                                                                      */
/*  Линейка сверху, под ней строка «01 / POPULAR» и ссылка, дальше       */
/*  заголовок и содержимое. Линейка задаёт ритм страницы вместо рамок    */
/*  и теней: границы тонкие, поверхности плоские.                       */
/* ------------------------------------------------------------------ */

.razdel {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  margin-bottom: var(--s-6);
}

/* Черта идёт во всю ширину окна, а не по ширине колонки: она делит
   страницу на полосы, и обрываться по краю содержимого ей нельзя.

   Ширина берётся от окна, а центр — от самой черты; блок центрирован в
   окне, поэтому совпадает. Вылет за край срезает overflow-x: clip у
   .page — полосы прокрутки от этого не появляется. */
.razdel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  border-top: 1px solid var(--border);
  pointer-events: none;
}

.razdel-h {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--tr-head);
}

/* Номер и название раздела в одной строке: «01 / POPULAR» и рядом
   человеческий заголовок под ним. */
.razdel-metka {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}

.razdel-vse {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--bystro) var(--krivaya);
}

/* Надпись остаётся той же высоты, а нажимается по 40 точкам: поле
   набирается полями, а отрицательные внешние возвращают разметку на
   место. Так же поступаем со ссылками в подвале. */
.razdel-vse { padding-block: 11px; margin-block: -11px; }
.razdel-vse:hover { color: var(--accent-tekst); }

/* ================================================================== */
/*  Скелет загрузки                                                    */
/*                                                                     */
/*  Повторяет размеры настоящего блока, поэтому при подмене ничего не  */
/*  прыгает. Пульсация одна на весь сайт, 1.4 с — заметно, что идёт    */
/*  загрузка, но не мельтешит.                                         */
/* ================================================================== */

.skelet {
  background: var(--surface-hover);
  border-radius: var(--r-2);
  position: relative;
  overflow: hidden;
}

.skelet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border);
  opacity: 0;
  animation: skelet-puls 1.4s ease-in-out infinite;
}

@keyframes skelet-puls {
  0%, 100% { opacity: 0; }
  50% { opacity: .55; }
}

.skelet-stroka { height: 11px; border-radius: var(--r-1); }
.skelet-stroka.korotkaya { width: 45%; }
.skelet-stroka.srednyaya { width: 70%; }

/* ================================================================== */
/*  Пустое и сломанное                                                 */
/*                                                                     */
/*  Один вид на оба случая. Разница в тексте и в том, что у ошибки      */
/*  всегда есть кнопка «Повторить»: состояние, из которого нельзя      */
/*  выйти, — это тупик, а не сообщение.                                */
/* ================================================================== */

.pusto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  text-align: center;
  padding: var(--s-12) var(--s-5);
  color: var(--text-2);
}

.pusto-znak {
  width: 40px;
  height: 40px;
  color: var(--text-3);
  flex: none;
}

.pusto-znak svg { width: 100%; height: 100%; fill: currentColor; }

.pusto-h {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text);
}

.pusto-p {
  font-size: var(--fs-small);
  max-width: 42ch;
  margin: 0;
}

.pusto-deystvie { margin-top: var(--s-2); }

/* Ошибка отличается не только цветом: у неё есть слово «Не удалось» и
   своя кнопка. Полагаться на один цвет нельзя — его не все видят. */
.pusto.sboy .pusto-znak { color: var(--red); }

/* Слой содержимого.

   У .page z-index намеренно НЕ задан. Стоило его поставить — и блок
   становился точкой отсчёта слоёв, а всё, что лежит внутри и должно
   накрывать страницу, оказывалось заперто в нём со своим номером.
   Из-за этого ломались сразу две вещи на телефоне:

   · подвал (тот же второй слой, но ниже по разметке) рисовался поверх
     листа чата, и сообщения перемешивались со ссылками подвала;
   · затемнение под листом отбора — оно ребёнок body и в запертый слой не
     попадает — ложилось поверх самого листа. Лист выглядел погашенным и
     не принимал ни одного нажатия: фильтры в каталоге просто не работали.

   Теперь .page слоя не заводит, и оба листа со своим z-index: 60
   считаются наравне с затемнением (59) и подвалом (2). */
.topbar, .doc, footer { position: relative; z-index: 2; }
.page { position: relative; }

.topbar {
  height: var(--shapka-h);
  padding: 0 var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;

  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-hero);
}

/* Не сжимаемся и не переносим название: рядом теперь стоит поиск, и без
   этого логотип складывался в две строки. */
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-name { white-space: nowrap; }
.brand-mark {
  width: 28px; height: 28px;
  display: block;
  flex: none;
}
.brand-name {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand { text-decoration: none; color: var(--text); }

.topbar-right { display: flex; align-items: center; gap: 8px; }

.topbar-right .icon-btn { width: 38px; height: 38px; border-radius: 10px; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
  margin-right: 4px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-2);
  flex: 0 0 auto;
}
.status[data-state="online"] .status-dot { background: var(--green); }
.status[data-state="waiting"] .status-dot { background: var(--amber); }
.status[data-state="offline"] .status-dot { background: #d93025; }
.status[data-state="connecting"] .status-dot { animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity: .3 } 50% { opacity: 1 } }

/* ------------------------------------------------------------------ */
/*  Кнопки                                                              */
/*                                                                      */
/*  Три веса и ни одним больше: главное действие, второстепенное,       */
/*  третьестепенное. Если на экране две одинаково яркие кнопки, значит  */
/*  экран не решил, чего он хочет от человека.                          */
/*                                                                      */
/*  Кнопка при наведении не подпрыгивает: сдвиг ничего не сообщает и    */
/*  сбивает прицел. Отклик даёт цвет.                                   */
/* ------------------------------------------------------------------ */

.btn {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  padding: 0 var(--s-5);
  min-height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--bystro) var(--krivaya),
              border-color var(--bystro) var(--krivaya),
              color var(--bystro) var(--krivaya);
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

/* Главное действие. Тёмный текст на тёплом жёлтом — самое читаемое
   сочетание из тех, что у нас есть. */
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

/* Второстепенное: та же форма, но не тянет взгляд. */
.btn-tonal {
  background: var(--elevated);
  color: var(--text);
  border-color: var(--border);
}
.btn-tonal:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* Третьестепенное: просто слово. */
.btn-text {
  background: transparent;
  color: var(--text-2);
  padding-inline: var(--s-3);
}
.btn-text:hover:not(:disabled) { color: var(--text); background: var(--surface-hover); }

/* Опасное — только там, где отменить нельзя. */
.btn-opasno { background: transparent; color: var(--red); border-color: var(--border); }
.btn-opasno:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red); }

.btn-sm { min-height: 32px; padding-inline: var(--s-3); font-size: var(--fs-caption); }
.btn-lg { min-height: 48px; padding-inline: var(--s-6); font-size: var(--fs-body); }
.btn-shirokaya { width: 100%; }
.btn .icon { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* Кнопка в состоянии ожидания: подпись меняется на многоточие, ширина
   держится, чтобы соседи не разъезжались. */
.btn.zhdyot { pointer-events: none; opacity: .6; }

/* На пальцах цель меньше 44 точек промахивается. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

.icon-btn {
  width: 38px; height: 38px;
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--bystro) var(--krivaya),
              color var(--bystro) var(--krivaya);
  flex: 0 0 auto;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn.active { background: var(--accent-soft); color: var(--accent-tekst); }
.icon-btn .icon { width: 20px; height: 20px; fill: currentColor; }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } }

.link-btn {
  font: inherit;
  font-size: 13px;
  background: none;
  border: 0;
  color: var(--blue-tekst);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.link-btn:hover { background: var(--blue-soft); }

.page {
  flex: 1 1 auto;
  /* Подсветка кадра намеренно выходит за края плеера. Когда слева встала
     карточка участников, справа она стала вылезать за экран и тянула за
     собой горизонтальную прокрутку. clip обрезает вылет, но, в отличие от
     hidden, не превращает страницу в область прокрутки. */
  overflow-x: clip;
  display: flex;
  flex-direction: column;

  /* Дети растягиваются, а не ужимаются по содержимому. При align-items:
     center колонка получала ширину «по содержимому», и один широкий ряд
     внутри (состав фильма, лента похожего) раздувал всю страницу до
     двух с лишним тысяч точек. Каждый блок теперь центрируется сам —
     своей максимальной шириной и полями auto. */
  align-items: stretch;
  justify-content: flex-start;

  /* Боковые поля держат внутренние блоки: у каталога, страницы фильма и
     главной они свои, и здесь они дали бы двойной отступ. */
  padding: 0 0 var(--s-12);
  min-height: 0;
}

/* ================================================================== */
/*  ГЛАВНАЯ                                                            */
/* ================================================================== */

/* Разделы главной идут колонкой с общим промежутком. Именно gap, а не
   поля у каждого: скрытая полка (например, «Продолжить», когда истории
   нет) при display:none промежутка не создаёт, а внешний отступ — создаёт,
   и под поиском оставалась дыра в полторы сотни точек. */
.setup {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s-razdel);
}
/* Отступ снизу у начала страницы уже задан — второй промежуток от gap
   здесь был бы двойным. */
.setup > .nachalo { margin-bottom: calc(-1 * var(--s-razdel)); }

/* ---------------- Начало: заголовок и поиск ----------------
   Держится в 700 точках высоты вместе с шапкой, чтобы первая подборка
   начиналась ещё до прокрутки. */
/* Начало страницы. Не первый экран целиком, а верхняя полоса: метка,
   заголовок, поиск. Всё по левому краю, как и остальное на странице —
   центровка сбивала бы общую сетку. */
/* Блок тянется во всю ширину колонки, а узким держится его содержимое.
   Иначе выходило так: сам блок 860 точек и прижат влево, его центр не
   совпадает с центром окна, а полоса под ним центрируется по блоку —
   и не доезжала до правого края ровно на разницу центров. */
.nachalo {
  position: relative;
  padding: clamp(32px, 5vw, 64px) 0 var(--s-razdel);
  text-align: left;
}
/* Блок стоит по центру, а строки внутри него — по левому краю: так на
   макете. Ширину ограничивает содержимое, а не сам блок: полоса под ним
   центрируется по блоку, и max-width на блоке увёл бы её вбок.

   620 точек — чтобы по краям осталось место зрителям. */
.nachalo > * { max-width: 620px; margin-inline: auto; }
/* Обёртка со зрителями — исключение: она должна быть во всю ширину окна.
   Общее правило выше обрезало её до 620 точек, и персонажи съезжали к
   середине, прямо под заголовок. */
.nachalo > .zriteli { max-width: none; margin: 0; }

.nachalo .yarlyk { display: block; margin-bottom: var(--s-4); }

.setup-title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  margin: 0 auto var(--s-8);
  max-width: 14ch;
}

.setup-title em { font-style: normal; color: var(--accent-tekst); }

.setup-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
  margin: 0 0 var(--s-6);
  max-width: 46ch;
}

/* ---------------- Быстрые разделы ----------------
   Ряд спокойных ссылок под поиском. На узком экране прокручивается вбок
   пальцем и не переносится: перенос превратил бы его в блок кнопок и
   поспорил бы с полем поиска за внимание. */
.bystrye {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
  justify-content: flex-start;
  flex-wrap: wrap;
}

.fishka {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 0 var(--s-4);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--bystro) var(--krivaya),
              border-color var(--bystro) var(--krivaya),
              background-color var(--bystro) var(--krivaya);
}

.fishka:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.fishka.on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.fishka svg { width: 15px; height: 15px; fill: currentColor; opacity: .8; }

/* Свой файл — не раздел каталога, а другой способ открыть видео.
   Отделён чертой, чтобы это читалось без подписи. */
.fishka-svoy { border-style: dashed; }

@media (pointer: coarse) { .fishka { min-height: 40px; } }

@media (max-width: 560px) {
  .bystrye {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Вылезаем за поля страницы, чтобы ряд уходил под край экрана —
       так видно, что он продолжается. */
    margin-inline: calc(-1 * var(--s-4));
    padding-inline: var(--s-4);
    scroll-padding-inline: var(--s-4);
  }
  .bystrye::-webkit-scrollbar { display: none; }
}

/* ---------------- Разделы в шапке ---------------- */
.shapka-nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: var(--s-4);
  flex: 1 1 auto;
  min-width: 0;
}

.shapka-nav a {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  white-space: nowrap;
  transition: color var(--bystro) var(--krivaya),
              background-color var(--bystro) var(--krivaya);
}

.shapka-nav a:hover { color: var(--text); background: var(--surface-hover); }
.shapka-nav a[aria-current="page"] { color: var(--text); }

/* Пока идёт видео, поле поиска переезжает в шапку и разделы уступают ему
   место. Соседний селектор справляется без единой строки кода. */
.shapka-poisk:not([hidden]) ~ .shapka-nav { display: none; }

/* Показ своего экрана имеет смысл только в комнате. Признак ставит
   poisk-shapka.js — он и так следит за появлением плеера. */
body:not(.v-komnate) #screenBtn { display: none; }

@media (max-width: 980px) {
  /* На узком экране те же разделы уже стоят фишками под поиском —
     второй раз их показывать незачем. */
  .shapka-nav { display: none; }
}/* ------------------------------------------------------------------ */
/*  Поле поиска                                                         */
/*                                                                      */
/*  Главный элемент главной страницы, поэтому крупное и с заметной      */
/*  рамкой. При наведении курсора рамка светлеет, при фокусе становится */
/*  акцентной — два разных состояния, а не одно.                        */
/* ------------------------------------------------------------------ */

.url-form {
  display: flex;
  gap: var(--s-2);
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  background: var(--surface);
  transition: border-color var(--srednee) var(--krivaya),
              box-shadow var(--srednee) var(--krivaya);
}
.url-form:hover { border-color: var(--text-3); }
.url-form:focus-within {
  border-color: var(--accent-tekst);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Кольцо фокуса рисует сама форма — на поле внутри оно было бы вторым. */
.url-form .url-input:focus-visible { outline: none; }

.url-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  /* 16 точек: меньше — и Safari на телефоне приближает страницу при фокусе. */
  font-size: 16px;
  padding: 0 var(--s-4);
  min-height: 46px;
  border: 0;
  border-radius: var(--r-2);
  outline: none;
  color: var(--text);
  background: transparent;
}
.url-input::placeholder { color: var(--text-3); }
.url-form .btn { min-height: 46px; padding-inline: var(--s-6); }

.setup-hint {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin: 0;
}
/* Пустая подсказка не занимает места: :empty схлопывает её до нуля, и
   расстояние до первой полки задаёт только отступ раздела. */
.setup-hint:not(:empty) { margin-top: var(--s-4); }
.setup-hint.error { color: #d93025; }

.lead { text-align: left; margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid var(--border); }
.lead-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  color: var(--text-2);
  padding: 8px;
  border-radius: 8px;
  user-select: none;
}
.lead-toggle::-webkit-details-marker { display: none; }
.lead-toggle:hover { color: var(--text); background: var(--surface); }
.lead-chevron { width: 20px; height: 20px; fill: currentColor; transition: transform .2s; }
.lead[open] .lead-chevron { transform: rotate(180deg); }
.lead-intro { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 18px auto 28px; max-width: 560px; text-align: center; }
.lead-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.lead-item {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--elevated);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s, box-shadow .18s;
}
.lead-item:hover {
  border-color: color-mix(in srgb, var(--accent-tekst) 30%, transparent);
  box-shadow: var(--shadow-1);
}
.lead-item h3 { font-size: 15px; font-weight: 600; margin: 0 0 7px; letter-spacing: -.2px; }
.lead-item p { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; }
@media (max-width: 620px) {
  .lead-grid { grid-template-columns: 1fr; gap: 20px; }
  .lead { margin-top: 40px; padding-top: 28px; }
}
:root[data-theme="dark"] .setup-hint.error { color: #f28b82; }

.stage {
  display: flex;
  align-items: flex-start;

  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) 0;
}

/* Потолок ширины плеера. Поднят с 1100: на мониторе от 1500 точек между
   видео и чатом простаивала пустая полоса в две сотни точек.

   Второе слагаемое — высота. Кадр 16:9, и на широком, но невысоком окне
   одна лишь ширина увела бы низ кадра под срез экрана: пришлось бы
   прокручивать страницу, чтобы увидеть картинку целиком. Поэтому берём
   меньшее из двух: потолка и того, что помещается по высоте. Вычет в 220
   точек — это шапка, заголовок комнаты и строка под плеером. */
.player-wrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(1320px, calc((100vh - 220px) * 16 / 9));
}
.chat-panel {
  flex: 0 0 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: min(70vh, 620px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--elevated);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.chat-title { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700; }
/* Сколько человек в комнате — тот же вопрос, что и под плеером, но здесь
   он про собеседников. Стоит рядом с названием, а не отдельной строкой:
   шапка и так узкая. */
.chat-kto {
  font-size: var(--fs-caption);
  color: var(--text-3);
  white-space: nowrap;
}
.chat-zvonki { margin-left: auto; }

.chat-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-empty {
  margin: auto var(--s-5);
  text-align: center;
  line-height: var(--lh-body);
}
.chat-empty-znak {
  display: block;
  margin: 0 auto var(--s-3);
  width: 40px; height: 40px;
  border-radius: var(--r-3);
  background: var(--surface-hover);
  display: grid;
  place-items: center;
}
.chat-empty-znak svg { width: 22px; height: 22px; fill: var(--text-3); }
.chat-empty-h {
  margin: 0 0 var(--s-1);
  font-weight: 600;
  color: var(--text-2);
  font-size: var(--fs-small);
}
.chat-empty-p {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-caption);
}

.msg { max-width: 85%; display: flex; flex-direction: column; gap: 3px; }
.msg-who {
  font-size: var(--fs-caption);
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.msg-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.msg-body {
  font-size: 14px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.mine .msg-body { background: var(--blue); color: var(--on-blue); }
.msg-time { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.45;
  padding: 10px var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  outline: none;
  resize: none;
  max-height: 120px;
  background: var(--bg);
  color: var(--text);
}
.chat-input:focus { border-color: var(--blue-tekst); }
.chat-send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-send:hover { background: var(--blue-hover); }
.chat-send .icon { width: 18px; height: 18px; fill: currentColor; }
.chat-send:disabled { opacity: .4; cursor: default; }

.icon-btn { position: relative; }
.icon-btn-sm { width: 32px; height: 32px; }
.icon-btn-sm .icon { width: 18px; height: 18px; }
.badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #d93025;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.chat-flyout {
  position: absolute;
  left: 16px;
  bottom: 76px;
  z-index: 7;
  max-width: min(420px, 70%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.flyout-msg {
  background: rgba(32,33,36,.92);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 14px;
  border-radius: 14px;
  border-left: 3px solid currentColor;
  overflow-wrap: anywhere;
}
.flyout-msg span { color: #fff; }

.call-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.call-layer > * { pointer-events: auto; }

.call-layer.floating { position: fixed; inset: 76px 0 0 0; }

.call-tiles {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tile {
  position: relative;
  width: 168px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #202124;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #202124;
}
.tile.mine video { transform: scaleX(-1); }
.tile.no-video video { opacity: 0; }
.tile-off {
  position: absolute; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #9aa0a6;
}
.tile.no-video .tile-off { display: flex; }
.tile-off .icon { width: 30px; height: 30px; fill: currentColor; }
.tile-label {
  position: absolute;
  left: 6px; bottom: 6px;
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 2px 7px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tile-label .icon { width: 12px; height: 12px; fill: currentColor; }
.tile.speaking { outline: 2px solid var(--green); outline-offset: -2px; }

.call-bar {
  position: absolute;
  top: 12px; right: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.call-ctrl {
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(32,33,36,.85);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.call-ctrl:hover { background: rgba(32,33,36,1); }
.call-ctrl .icon { width: 20px; height: 20px; fill: currentColor; }
.call-ctrl.off { background: #d93025; }
.call-ctrl-end { background: #d93025; }
.call-ctrl-end:hover { background: #b3261e; }
.call-ctrl-end .icon { transform: rotate(135deg); }

.call-invite {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--elevated);
  color: var(--text);
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  font-size: 14px;
  white-space: nowrap;
}
.call-invite-text { margin-right: 4px; }

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  outline: none;
  box-shadow: var(--shadow-2);
}
.player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  transform-origin: center center;
  transition: transform .18s ease-out;
}
.player.idle .controls { opacity: 0; pointer-events: none; }
.player.idle { cursor: none; }

.player:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.player:-webkit-full-screen { border-radius: 0; width: 100vw; height: 100vh; }

.player.pip {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
}
.player.pip #fsBtn { display: none; }

.draw-layer {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.player.drawing .draw-layer { pointer-events: auto; cursor: crosshair; touch-action: none; }
.player.sticking .sticker-layer, .player.drawing { touch-action: none; }
.player.drawing { cursor: crosshair; }
.player.drawing.idle { cursor: crosshair; }

/* ---------------- Текстовые страницы ----------------
   Мера строки — не точки, а знаки: около семидесяти, дальше глаз теряет
   начало следующей строки. Отсюда и ширина в ch, а не в пикселях. */
.doc {
  /* Ширину задаём явно. Без неё блок — гибкий ребёнок body, и его размер
     подтягивался под самое длинное слово: заголовок «Политика
     конфиденциальности» на 320 точках требовал 430, и страница
     оказывалась на 15 точек шире экрана. */
  width: 100%;
  max-width: var(--container-uzkiy);
  margin: 0 auto;
  /* Русские длинные слова в колонке 280 точек не помещаются целиком.
     Перенос по буквам — некрасиво, но лучше обрезанного края. */
  overflow-wrap: break-word;
  padding: var(--s-10) var(--s-5) var(--s-16);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
}
.doc h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  margin: 0 0 var(--s-4);
}
.doc h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tr-head);
  margin: var(--s-10) 0 var(--s-3);
}
.doc h3 { font-size: var(--fs-h3); font-weight: 700; margin: var(--s-6) 0 var(--s-2); }
.doc p { margin: 0 0 var(--s-4); color: var(--text-2); max-width: 72ch; }
.doc ul, .doc ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); color: var(--text-2); }
.doc li { margin-bottom: var(--s-2); }
.doc strong { color: var(--text); }
/* Ссылка в тексте отличается не только цветом: подчёркивание видно и
   тому, кто цвета не различает. */
/* Ссылка в тексте — но не ссылка, одетая кнопкой: у той свой цвет от
   заливки. В тёмной теме --accent-tekst совпадает с --accent, и надпись
   на жёлтой кнопке становилась жёлтой на жёлтом — то есть исчезала.
   Правило .doc a перебивало .btn-primary по весу: два селектора против
   одного. */
.doc a:not(.btn) { color: var(--accent-tekst); text-underline-offset: 3px; }
.doc a:not(.btn):hover { color: var(--accent-hover); }
.doc-date { color: var(--text-3); font-size: var(--fs-small); margin-bottom: var(--s-2) !important; }
.doc-back { margin-top: var(--s-12); padding-top: var(--s-5); border-top: 1px solid var(--border); }

/* Страница «не найдено»: тот же узкий столбец, что и у правовых страниц,
   но текста три строки — поэтому воздуха сверху больше, а два действия
   стоят в ряд и переносятся на узком экране. */
.oshibka { padding-block: clamp(64px, 14vh, 160px) var(--s-16); }
.oshibka h1 { margin-bottom: var(--s-4); }
.oshibka-deystviya {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.ad {
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
}
.ad ins { display: block; }

.ad-top, .ad-bottom {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  min-height: 90px;
}
.ad-top { margin-bottom: 16px; }
.ad-bottom { margin-top: 20px; }

.ad-side {
  width: 160px;
  min-height: 600px;
  align-self: flex-start;
}

@media (max-width: 1400px) {
  .ad-side { display: none !important; }
}
@media (max-width: 720px) {
  .ad-top, .ad-bottom { min-height: 60px; }
}

.site-foot {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: stretch;
  gap: 0;
  padding: var(--s-16) 0 var(--s-10);
  margin-top: var(--s-razdel);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--text-3);
  text-align: left;
}
.site-foot a { color: var(--text-2); text-decoration: none; }
.site-foot a:hover { color: var(--text); text-decoration: underline; }

.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
}
.consent-text { margin: 0; font-size: 13px; color: var(--text); line-height: 1.45; flex: 1 1 260px; }
.consent-text a { color: var(--blue-tekst); }
.consent-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.who { display: flex; align-items: center; padding-left: 6px; }
.who-chip {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  border: 2px solid var(--bg);
  margin-left: -6px;
  cursor: default;
  flex: 0 0 auto;
  user-select: none;
}
.who-chip.me { cursor: pointer; }
.who-chip.me:hover { filter: brightness(1.12); }

.reaction-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.reaction-fly {
  position: absolute;
  bottom: 68px;
  font-size: 40px;
  line-height: 1;
  animation: reactionUp 2.4s ease-out forwards;
  will-change: transform, opacity;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
@keyframes reactionUp {
  0%   { transform: translate(-50%, 0) scale(.4); opacity: 0; }
  12%  { transform: translate(-50%, -20px) scale(1.15); opacity: 1; }
  30%  { transform: translate(calc(-50% + var(--dx, 0px)), -90px) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx2, 0px)), -280px) scale(.85); opacity: 0; }
}

.reaction-bar {
  position: absolute;
  right: 16px;
  bottom: 68px;
  z-index: 7;
  display: flex;
  gap: 4px;
  background: var(--elevated);
  padding: 6px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
}
.reaction-pick {
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s, transform .12s;
}
.reaction-pick:hover { background: var(--surface); transform: scale(1.18); }

.embed-host {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}
.embed-host iframe { width: 100%; height: 100%; border: 0; display: block; }

.file-ask {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0, 0, 0, .72);
  text-align: center;
  padding: 24px;
}
.file-ask-text { color: #fff; font-size: 15px; margin: 0; line-height: 1.5; max-width: 460px; }

.screen-share {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 4;
}
.screen-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--elevated);
  color: var(--text);
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  font-size: 13px;
  white-space: nowrap;
}

.sticker-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.sticker-slap {
  position: absolute;
  width: 22%;
  max-width: 190px;
  min-width: 74px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--rot));
  transform-origin: center;
  animation: slapIn .28s cubic-bezier(.25, .8, .3, 1) both;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-slap.settled { will-change: auto; }

.sticker-slap img, .sticker-slap video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}
.sticker-slap.is-emoji {
  font-size: min(13vw, 120px);
  line-height: 1;
  user-select: none;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .55);
}

@keyframes slapIn {
  0%   { transform: translate(-50%, -50%) rotate(var(--rot)) scale(.6);              opacity: 0; }
  22%  {                                                                              opacity: 1; }
  45%  { transform: translate(-50%, -50%) rotate(var(--rot)) scaleX(1.12) scaleY(.9);  }
  63%  { transform: translate(-50%, -50%) rotate(var(--rot)) scaleX(.96)  scaleY(1.05); }
  80%  { transform: translate(-50%, -50%) rotate(var(--rot)) scaleX(1.03) scaleY(.98); }
  100% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1);                opacity: 1; }
}

.slap-ripple {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .8);
  transform: translate(-50%, -50%) scale(.3);
  animation: slapRipple .38s .1s ease-out both;
  pointer-events: none;
}

@keyframes slapRipple {
  0%   { transform: translate(-50%, -50%) scale(.3); opacity: .5; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

.sticker-slap.peel { animation: peelOff .42s ease-in forwards; }
@keyframes peelOff {
  0%   { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -72%) rotate(calc(var(--rot) + 14deg)) scale(.88); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sticker-slap { animation-duration: .01s; }
  .sticker-slap::after, .slap-ripple { display: none; }
}

.sticker-picker {
  position: fixed;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sticker-picker.in-player { position: absolute; }

.sticker-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  padding: 12px;
  max-height: 260px;
  overflow-y: auto;
}
.sticker-cell {
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  padding: 4px;
  transition: background-color .15s, transform .12s;
  touch-action: none;
}
.sticker-cell:hover { background: var(--surface); transform: scale(1.08); }
.sticker-cell:active { cursor: grabbing; }
.sticker-cell.armed { background: var(--blue-soft); outline: 2px solid var(--blue-tekst); }
.sticker-cell img, .sticker-cell video {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.sticker-foot { padding: 10px 12px; border-top: 1px solid var(--border); }
.sticker-hint { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 8px; line-height: 1.4; }
.sticker-import { display: flex; gap: 6px; }
.sticker-empty { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); text-align: center; padding: 18px 6px; line-height: 1.5; }

.sticker-ghost {
  position: fixed;
  z-index: 70;
  width: 96px; height: 96px;
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
  opacity: .92;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  line-height: 1;
}
.sticker-ghost img, .sticker-ghost video { width: 100%; height: 100%; object-fit: contain; }

.player.sticking { cursor: copy; }

.chat-sticker-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-sticker-btn:hover { background: var(--surface); color: var(--text); }
.chat-sticker-btn .icon { width: 22px; height: 22px; fill: currentColor; }

.msg-sticker {
  width: 128px; height: 128px;
  object-fit: contain;
  display: block;
}
.msg.sticker-msg .msg-body { background: none; padding: 0; }
.msg-emoji { font-size: 60px; line-height: 1.1; }

.controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-3) var(--s-4);
  background: rgba(8, 9, 12, .86);
  border-top: 1px solid rgba(255, 255, 255, .10);
  opacity: 1;
  transition: opacity .2s;
  color: #fff;
  z-index: 6;
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
}
.spacer { flex: 1 1 auto; }

.ctrl {
  background: none;
  border: 0;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .15s;
  padding: 0;
}
.ctrl:hover { background: rgba(255,255,255,.14); }
.ctrl:active { transform: scale(.94); }

/* Пуск — единственное действие, ради которого сюда пришли, и вес у него
   должен быть соответствующий. Остальные кнопки в строке равны между
   собой и тише этой. */
.ctrl-glavnaya {
  width: 48px; height: 48px;
  background: var(--accent);
  color: var(--on-accent);
  margin-right: var(--s-2);
}
.ctrl-glavnaya:hover { background: var(--accent-hover); }
.ctrl-glavnaya .icon { width: 26px; height: 26px; }

/* ---------------- «Ещё» в панели ----------------
   Пять второстепенных инструментов вместо пяти безымянных значков в
   строке. Подписаны словами: догадываться по картинке не приходится. */
.pult { position: relative; flex: 0 0 auto; }
.pult-menyu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 8;
  min-width: 232px;
  padding: var(--s-2);
  border-radius: var(--r-3);
  background: var(--modal);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  color: var(--text);
}
.pult-ryad {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-2) 2px 2px;
  border-radius: var(--r-2);
  font-size: var(--fs-small);
  white-space: nowrap;
}
/* Строка нажимается целиком, поэтому и выглядеть должна нажимаемой:
   курсор и подсветка на всю ширину, а не только на значке. */
.pult-ryad { cursor: pointer; }
.pult-ryad:hover { background: var(--surface-hover); }
.pult-ryad:hover .ctrl { color: var(--text); }
/* Ползунок масштаба живёт своей жизнью — на нём курсор свой. */
.pult-ryad .zoom-range { cursor: pointer; }
.pult-ryad .ctrl { color: var(--text); width: 36px; height: 36px; }
.pult-ryad .ctrl:hover { background: transparent; }
.pult-ryad > span { flex: 1 1 auto; }
/* Ползунок масштаба в меню стоит строкой, а не выезжает по наведению:
   в списке ему прятаться некуда и незачем. */
.pult-ryad .zoom { display: flex; align-items: center; gap: var(--s-2); }
.pult-ryad .zoom-range { width: 84px; opacity: 1; pointer-events: auto; }
.ctrl .icon { width: 22px; height: 22px; fill: currentColor; }
.ctrl.active { color: #8ab4f8; }
.ctrl.active:hover { background: rgba(138,180,248,.18); }

.time { font-size: 13px; color: rgba(255,255,255,.9); margin-left: 8px; font-variant-numeric: tabular-nums; }
.time-sep { color: rgba(255,255,255,.5); margin: 0 2px; }

.volume, .zoom { display: flex; align-items: center; }
.vol-range, .zoom-range {
  width: 0;
  opacity: 0;
  transition: width .2s, opacity .2s, margin .2s;
  accent-color: #fff;
  cursor: pointer;
}
.volume:hover .vol-range, .vol-range:focus { width: 72px; opacity: 1; margin: 0 8px 0 4px; }
.zoom:hover .zoom-range, .zoom-range:focus { width: 80px; opacity: 1; margin: 0 6px 0 2px; }

.vol-svg .vol-arc {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 8px 12px;
  opacity: 0;
  transform: scale(.35);
  transition: opacity .16s ease, transform .22s cubic-bezier(.2,.8,.3,1.35);
}
.vol-svg .vol-arc.on { opacity: 1; transform: scale(1); }

.vol-svg .vol-slash {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .2s ease;
}
.vol-svg.muted .vol-slash { stroke-dashoffset: 0; }

.vol-svg .vol-body { transform-box: view-box; transform-origin: 8px 12px; }
@keyframes volBump { 0% { transform: scale(1) } 45% { transform: scale(1.16) } 100% { transform: scale(1) } }
.vol-svg.bump .vol-body { animation: volBump .3s ease; }

.vol-value {
  font-size: 12px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width .2s, opacity .2s, margin .2s;
  white-space: nowrap;
}
.volume:hover .vol-value, .vol-value.show { width: 34px; opacity: 1; margin-right: 4px; }

.sync-badge, .rate-badge {
  padding: 4px 9px;
  border-radius: var(--r-1);
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: var(--fs-label);
  line-height: 1.4;
}
/* Точку у состояния красим отдельно: сам текст на кадре остаётся белым,
   иначе зелёный по светлому кадру не читается. */
.sync-badge.sost-est::before { background: var(--green); }
.sync-badge.sost-zhdyom::before { background: var(--accent); }
.sync-badge.sost-net::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.sync-badge[data-drift="off"] { background: rgba(249,171,0,.9); color: #202124; }
.rate-badge { background: rgba(138,180,248,.9); color: #202124; font-variant-numeric: tabular-nums; }

.seek { padding: 10px 0 6px; cursor: pointer; position: relative; }
.seek-track {
  position: relative;
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .28);
  transition: height var(--bystro) var(--krivaya);
}
.seek:hover .seek-track { height: 9px; }
.seek-buffer, .seek-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 2px;
}
.seek-buffer { background: rgba(255,255,255,.35); width: 0; }
.seek-fill { background: var(--accent); width: 0; }
.seek-knob {
  position: absolute;
  top: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .12s;
  left: 0;
  pointer-events: none;
}
.seek:hover .seek-knob, .seek.dragging .seek-knob { transform: translate(-50%,-50%) scale(1); }
.seek-tip {
  position: absolute;
  bottom: 26px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  font-variant-numeric: tabular-nums;
}
.seek:hover .seek-tip, .seek.dragging .seek-tip { opacity: 1; }

.menu {
  position: absolute;
  right: 16px;
  bottom: 68px;
  z-index: 7;
  width: 380px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 84px);
  overflow-y: auto;
  background: var(--elevated);
  color: var(--text);
  border-radius: var(--r-3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  padding: var(--s-4);
  font-size: 14px;
}

/* Заголовок панели: человек должен видеть, куда попал, не разбирая
   содержимое. */
.menu-h {
  margin: 0 0 var(--s-4);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--text);
}

/* Разделы отделяются воздухом, а не чертами: их всего два, и линии между
   ними были бы лишним шумом. */
.menu-razdel + .menu-razdel { margin-top: var(--s-5); }

.menu-podpis {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Шесть значений скорости — это шкала, и ячейки у неё равные: ряд
   читается слева направо одним движением, а «2×» не переносится на
   вторую строку, как было при переносе по содержимому. */
#rateChips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
#rateChips .chip { justify-content: center; padding: 0 4px; }

.menu-note {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-3);
  line-height: var(--lh-body);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Все кнопки ряда одной высоты — ряд читается как шкала. */
.chip {
  font: inherit;
  font-size: 13px;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.chip:hover { background: var(--surface-hover); color: var(--text); }
/* Выбранное значение видно с первого взгляда: один заливной акцент, тот
   же, что у кнопки пуска. Полутона тут не годятся — при шести кнопках в
   ряду еле заметная подсветка не читается. */
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
/* «Добавить» — не значение, а действие: пунктир отделяет его от шкалы. */
.chip-dobavit {
  border-style: dashed;
  color: var(--text-3);
}
.chip-dobavit:hover { color: var(--text); }

.menu-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.menu-input {
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  width: 80px;
}
.menu-input-wide { flex: 1 1 140px; width: auto; min-width: 0; }
.menu-input:focus { border-color: var(--blue-tekst); }

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14px;
  padding: 12px 16px;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.menu-item:hover { background: var(--surface); }

.gate {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 4;
}
.gate-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #1a73e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-2);
}
.gate-btn:hover { background: #f1f3f4; }
.icon-lg { width: 38px; height: 38px; fill: currentColor; }
.gate-text { color: #fff; font-size: 15px; margin: 0; }

.spinner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.spinner span {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.toast {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  background: rgba(32,33,36,.92);
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  z-index: 8;
  max-width: 80%;
  text-align: center;
}

/* Строка под плеером: код комнаты, число зрителей и одно действие.
   Код и счётчик слева, «Пересинхронизировать» уходит вправо. */
.player-meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--text-2);
  flex-wrap: wrap;
}

/* ---------------- Строка комнаты под плеером ----------------
   Отвечает на три вопроса подряд: с кем я смотрю, где эта комната и как
   позвать ещё кого-то. Прежде здесь стояли «Room / XXXXXX», «01 Online»
   и ссылка «Пересинхронизировать» — три технических подписи, из которых
   ни одна не была действием. */
.komnata {
  gap: var(--s-3) var(--s-4);
}
.komnata-kto {
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
/* Точка перед числом: зелёная, когда смотрят вдвоём, приглушённая, пока
   человек один. Цвет не единственный признак — рядом стоят слова. */
.komnata-kto::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
}
.komnata-kto-odin::before { background: var(--text-3); }
.komnata-kod { color: var(--text-3); }
.komnata-sinhro { margin-left: var(--s-2); }
.komnata-zvat { margin-left: auto; }

@media (max-width: 560px) {
  .komnata-zvat { margin-left: 0; width: 100%; }
}

.modal {
  position: fixed; inset: 0;
  background: rgba(32,33,36,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 50;
}
.modal-card {
  background: var(--elevated);
  border-radius: 12px;
  padding: 28px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-2);
}
.modal-title { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.modal-sub { font-size: 14px; color: var(--text-2); margin: 0 0 20px; line-height: 1.5; }
.copy-row { display: flex; gap: 10px; }
.copy-row .url-input { font-size: 14px; }
.copy-row .btn { border-radius: 24px; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; gap: 8px; }
.modal-card-sm { max-width: 420px; }
.modal-card-sm .url-input { width: 100%; font-size: 16px; }

@media (min-width: 1081px) {
  .chat-panel {
    position: fixed;
    top: 76px;
    right: 16px;
    bottom: 16px;
    width: 340px;
    height: auto;
    flex: 0 0 auto;
    z-index: 40;
  }

  body.chat-open .page { padding-right: 372px; }
}

.chat-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 55;
  width: 56px; height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-blue);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-2);
}
.chat-fab .icon { width: 26px; height: 26px; fill: currentColor; }
.chat-fab.active { background: var(--surface); color: var(--text); }

@media (max-width: 1080px) {
  .stage { flex-direction: column; align-items: stretch; }
  .player-wrap { max-width: none; }

  .chat-fab { display: flex; }
  .topbar-center #chatBtn { display: none; }
  .chat-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    width: auto;
    height: min(72vh, 560px);
    border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .35);
    animation: sheetUp .22s ease-out;
  }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  @media (prefers-reduced-motion: reduce) {
    .chat-panel { animation: none; }
  }
  .chat-head { padding: 14px 8px 14px 18px; }

  .chat-fab.hidden-by-panel { display: none; }

  /* Приглашение завести аккаунт стоит в том же нижнем углу, что и строка
     набора, и слой у них один. С открытым листом чата оно накрывало поле
     ввода, и написать было нечем. Лист — текущее дело, приглашение
     подождёт до его закрытия. */
  body.chat-open .nudge { display: none; }
}

@media (max-width: 720px) {
  .topbar { padding: 0 16px; height: 56px; }
  .status { display: none; }
  .tile { width: 116px; }
  .call-bar { right: 138px; }
  .chat-flyout { bottom: 68px; left: 10px; }
  .brand-name { font-size: 17px; }
  .status { padding: 6px 10px; font-size: 12px; }
  .btn-tonal { padding: 9px 14px; }
  .page { padding: 16px 0 32px; }

  .url-form {
    flex-direction: column;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    gap: var(--s-3);
  }

  .url-form .url-input {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--r-3);
    transition: border-color var(--srednee) var(--krivaya),
                box-shadow var(--srednee) var(--krivaya);
  }
  .url-form .url-input:focus {
    border-color: var(--accent-tekst);
    box-shadow: 0 0 0 3px var(--accent-soft);
    gap: 10px;
  }
  .url-form:focus-within { box-shadow: none; }
  .url-input {
    border: 1px solid var(--border);
    background: var(--elevated);
    padding: 13px 18px;
  }
  .url-input:focus {
    border-color: color-mix(in srgb, var(--accent-tekst) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .url-form .btn { justify-content: center; padding: 13px 26px; }
  .player { border-radius: 10px; }
  .menu { right: 8px; bottom: 64px; }
}

@media (max-width: 620px) {

  .controls-row .ctrl { width: 44px; height: 44px; }
  .controls-row .ctrl .icon { width: 24px; height: 24px; }
  .controls { padding: 40px 8px 10px; }
  .controls-row { gap: 0; }

  .seek { padding: 12px 0 8px; }
  .seek-track { height: 5px; }
  .seek:hover .seek-track { height: 7px; }
  .seek-knob { width: 16px; height: 16px; transform: translate(-50%, -50%) scale(1); }

  /* Название прячем только в комнате: там в шапке десяток кнопок и места
     правда нет. На остальных страницах продукт должен называть себя. */
  body.v-komnate .brand-name { display: none; }
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar-right { gap: 2px; }
  .icon-btn { width: 40px; height: 40px; }
  .who-chip { width: 28px; height: 28px; }

  .page { padding: 16px 0 28px; align-items: stretch; }
  .setup { margin-top: 0; }

  .chat-panel { height: min(56vh, 380px); }
  .chat-input { font-size: 16px; }
  .url-input, .menu-input, .modal-card-sm .url-input { font-size: 16px; }

  .site-foot { padding-bottom: 88px; }

  .sticker-picker { width: calc(100vw - 20px); }
  .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); max-height: 210px; }
  .reaction-pick { width: 44px; height: 44px; font-size: 26px; }
  .menu { width: calc(100% - 20px); right: 10px; }
}

@media (max-width: 460px) {
  .topbar-right .btn-tonal span { display: none; }
  .topbar-right .btn-tonal { padding: 9px 10px; }

  .topbar-right .icon-btn,
  .icon-btn { width: 36px; height: 36px; }
  .lang-btn { padding: 6px 7px; }
}

@media (hover: none) {
  .player.idle .controls { opacity: 1; pointer-events: auto; }
  .player.idle { cursor: auto; }
  .vol-range, .zoom-range { width: 72px; opacity: 1; }
}

/* Вход — обычная второстепенная кнопка. Прежде значок стоял в своей
   рамке с отдельным фоном, и одна кнопка читалась как две. */
.auth-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--elevated);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--bystro) var(--krivaya),
              border-color var(--bystro) var(--krivaya);
}

.auth-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.auth-btn-icon {
  display: grid;
  place-items: center;
  color: var(--text-2);
}

.auth-btn-icon svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.auth-btn:hover .auth-btn-icon { color: var(--accent-tekst); }

.auth-btn-text { padding: 9px 18px; }

@media (max-width: 720px) {
  .auth-btn { border-radius: 12px; }
  .auth-btn-icon { padding: 0 9px; }
  .auth-btn-icon svg { width: 15px; height: 15px; }
  .auth-btn-text { padding: 7px 12px; font-size: 12.5px; }
}

@media (max-width: 400px) {
  .auth-btn-text { display: none; }
  .auth-btn-icon { border-right: 0; background: none; padding: 7px 10px; }
}

.auth-field { display: block; margin-bottom: var(--s-4); }

.auth-field > span {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}

.auth-field .url-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.auth-field .url-input:focus {
  border-color: color-mix(in srgb, var(--accent-tekst) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.auth-field .url-input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: inset 0 0 0 100px var(--surface);
}

.auth-error {
  margin: 0 0 var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--red);
  border-radius: var(--r-2);
  background: var(--red-soft);
  color: var(--red);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.account { position: relative; flex: 0 0 auto; }

.account-chip {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--blue);
  color: var(--on-blue);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.account-chip:hover { filter: brightness(1.08); }

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 6px;
  z-index: 60;
}

.account-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-head strong { font-size: 14px; font-weight: 500; }

.account-head span {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.account-item:hover { background: var(--surface); }
/* «Профиль» и «Друзья» — ссылки, а не кнопки: браузер подчёркивает их сам. */
a.account-item { text-decoration: none; }
.account-item.danger { color: #d93025; }
:root[data-theme="dark"] .account-item.danger { color: #f28b82; }

@media (max-width: 720px) {
  .auth-btn { padding: 6px 10px; font-size: 13px; }
  .account-chip { width: 28px; height: 28px; }
  .account-menu { min-width: 190px; }
}

.authgate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(32, 33, 36, .58);
}

.authgate-card {
  width: 100%;
  max-width: 420px;
  background: var(--elevated);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  padding: 36px 32px 28px;
  text-align: center;
}

.authgate-lock {
  width: 44px; height: 44px;
  fill: var(--blue-tekst);
  margin-bottom: 16px;
}

.authgate-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}

.authgate-sub {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

.authgate-btn { width: 100%; justify-content: center; padding: 11px 20px; font-size: 15px; }
.authgate-link { margin-top: 8px; }

@media (max-width: 480px) {
  .authgate-card { padding: 30px 22px 24px; }
  .authgate-title { font-size: 18px; }
}

#authModal { z-index: 95; }

body.gated { overflow: hidden; }

.lead-sub {
  margin: 34px 0 16px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--text);
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.access-col {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px 20px;
  background: var(--elevated);
}

.access-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.access-head svg { width: 18px; height: 18px; flex: 0 0 auto; }
.access-head.free { color: var(--green); }
.access-head.free svg { fill: var(--green); }
.access-head.paid { color: var(--blue-tekst); }
.access-head.paid svg { fill: var(--blue-tekst); }

.access-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.access-list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.access-note {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  text-align: center;
}

.search-wrap { position: relative; }

.search-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  text-align: left;
  animation: drop-in .18s cubic-bezier(.2, .8, .3, 1);

  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  animation: row-in .26s both cubic-bezier(.2, .8, .3, 1);
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.search-row:hover, .search-row.active { background: var(--surface); }
.search-row + .search-row { border-top: 1px solid var(--border); }

.search-poster {
  width: 44px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}

.search-row:hover .search-poster { transform: scale(1.06); }

.search-info { min-width: 0; flex: 1 1 auto; }

.search-name {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }

.search-rate {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  background: var(--text-2);
}

.search-rate.good { background: var(--green); }
.search-rate.weak { background: #d93025; }

.search-msg { padding: 16px; font-size: 13.5px; color: var(--text-2); text-align: center; }

.search-dots { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 6px; }
.search-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-2);
  animation: dot 1.05s infinite ease-in-out;
}
.search-dots i:nth-child(2) { animation-delay: .16s; }
.search-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes dot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;  transform: translateY(-3px); }
}

@media (max-width: 560px) {
  /* Панель на узком экране остаётся слева: центровка была нужна прежней
     карточке, где постер стоял над названием. Теперь постер сбоку, и
     центрированный столбец разъезжался бы по обе стороны от него. */
}

.tube-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.tube-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  animation: row-in .26s both cubic-bezier(.2, .8, .3, 1);
}

.tube-row + .tube-row { border-top: 1px solid var(--border); }
.tube-row:hover { background: var(--surface); }

.tube-thumb {
  width: 72px;
  height: 41px;
  flex: 0 0 auto;
  border-radius: 5px;
  object-fit: cover;
  background: var(--surface);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}

.tube-row:hover .tube-thumb { transform: scale(1.05); }

.tube-info { min-width: 0; flex: 1 1 auto; }

.tube-title {
  font-size: 13.5px;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tube-channel { font-size: 12px; color: var(--text-2); margin-top: 3px; }

.embed-fail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  background: #000;
  color: #e8eaed;
}

.embed-fail-title { margin: 0; font-size: 17px; font-weight: 500; }

.embed-fail-text {
  margin: 0;
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #9aa0a6;
}

.embed-fail-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.embed-fail-row .btn-text { color: #8ab4f8; }

.what-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tr-head);
  margin: var(--s-16) 0 var(--s-4);
}

.what {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  text-align: left;
}

.what-card {
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--elevated);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s, box-shadow .18s;
}

.what-card:hover {
  border-color: color-mix(in srgb, var(--accent-tekst) 32%, transparent);
  box-shadow: var(--shadow-1);
}

.what-card svg {
  width: 26px; height: 26px;
  fill: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.what-card h3 {
  margin: 0 0 8px;

  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.3px;
}

.what-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}

@media (max-width: 560px) {
  .what-title { margin-top: 42px; }
}

a.brand { text-decoration: none; color: inherit; border-radius: 10px; }
a.brand:hover .brand-name { color: var(--accent-tekst); }
a.brand:hover .brand-mark { transform: scale(1.06); }
a.brand:focus-visible { outline: 2px solid var(--accent-tekst); outline-offset: 4px; }

.brand-mark {
  border-radius: 0;
  box-shadow: none;
  transition: transform .16s cubic-bezier(.2,.8,.3,1);
}

.player {
  border-radius: var(--radius-lg);

  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent),
              0 24px 60px rgba(0, 0, 0, .45);
}

.controls {
  padding: var(--s-3) var(--s-5);
}

.controls-row { gap: 4px; }

.seek { padding: 10px 0 6px; }
.seek-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.seek:hover .seek-track { height: 7px; }

.seek-fill { background: var(--accent-grad); }
:root[data-theme="dark"] .seek-fill { background: var(--accent-grad); }

.seek-knob {
  width: 14px; height: 14px;
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent),
              0 2px 6px rgba(0, 0, 0, .5);
}

.sync-badge, .rate-badge {
  font-size: 11.5px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
}

.sync-badge[data-drift="off"] {
  background: rgba(240, 180, 41, .22);
  border-color: rgba(240, 180, 41, .55);
  color: #ffd98a;
}

.chat-panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.chat-head { padding: 14px 10px 14px 18px; }
.chat-title { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }

.msg-body {
  border-radius: 14px 14px 14px 5px;
  padding: 9px 13px;
  border: 1px solid var(--border);
}

.msg.mine { align-self: flex-end; }
.msg.mine .msg-body {
  border-radius: 14px 14px 5px 14px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-tekst) 26%, transparent);
}
.msg.mine .msg-who { justify-content: flex-end; }

.chat-form { padding: 12px; gap: 10px; }

.chat-input {
  border-radius: 12px;
  transition: border-color .16s, box-shadow .16s;
}
.chat-input:focus {
  border-color: color-mix(in srgb, var(--accent-tekst) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

@media (max-width: 720px) {
  .far-img { width: 150%; margin-left: -25%; }
}@keyframes летит {
  0%     { transform: translate(0, -50%) scale(.5); opacity: 0; }
  0.96%  { transform: translate(0, -50%) scale(1);  opacity: 1; }

  6.02%  { transform: translate(calc(50cqw - 50%), calc(-50% - 7px)) scale(1); opacity: 1; }
  11.09% { transform: translate(calc(100cqw - 100%), -50%) scale(1); opacity: 1; }

  12.02% { transform: translate(calc(100cqw - 100%), -50%) scale(1); opacity: 0; }
  100%   { transform: translate(calc(100cqw - 100%), -50%) scale(1); opacity: 0; }
}

.far-emoji.back { animation-name: летит-назад; }

@keyframes летит-назад {
  0%     { transform: translate(calc(100cqw - 100%), -50%) scale(.5); opacity: 0; }
  0.96%  { transform: translate(calc(100cqw - 100%), -50%) scale(1);  opacity: 1; }
  6.02%  { transform: translate(calc(50cqw - 50%), calc(-50% + 7px)) scale(1); opacity: 1; }
  11.09% { transform: translate(0, -50%) scale(1); opacity: 1; }
  12.02% { transform: translate(0, -50%) scale(1); opacity: 0; }
  100%   { transform: translate(0, -50%) scale(1); opacity: 0; }
}@media (prefers-reduced-motion: reduce) {
  .far-emoji, .far-emoji.back {
    animation: none;
    opacity: 1;
    transform: translate(calc(var(--n) * 26cqw), -50%);
  }
}
.faq { margin: 52px 0 0; }

.faq-title {
  margin: 0 0 16px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -.5px;
  text-align: center;
}

.qa {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elevated);
  margin-bottom: 8px;
  overflow: hidden;
}

.qa summary {
  padding: 14px 44px 14px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
  user-select: none;
}
.qa summary::-webkit-details-marker { display: none; }

/* Знак «плюс» из двух палочек: горизонтальная — ::after, вертикальная —
   ::before. Раскрыли вопрос — вертикальная поворачивается и исчезает,
   остаётся минус. Тот же знак раньше рисовали двумя градиентными
   заливками в фоне; палочки честнее и не требуют слова gradient. */
.qa summary::after,
.qa summary::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin-top: -1px;
  background: var(--text-2);
  transition: transform var(--srednee) var(--krivaya),
              background-color var(--srednee) var(--krivaya);
}
.qa summary::before { transform: rotate(90deg); }

.qa[open] summary::after,
.qa[open] summary::before { background: var(--accent); }
/* Вертикальная палочка доворачивается до горизонтали и сливается с первой:
   из плюса выходит минус. */
.qa[open] summary::before { transform: rotate(0deg); }

.qa summary:hover { background: var(--surface); }
.qa p {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.nudge {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  width: 300px;
  max-width: calc(100vw - 40px);
  padding: 16px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--elevated);
  box-shadow: var(--shadow-2);
  animation: nudge-in .3s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes nudge-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.nudge-text {
  margin: 0 0 12px;
  padding-right: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.nudge-close {
  position: absolute;
  /* Значок остаётся 15 точек, а нажимается по 36: центр держим на месте
     (было 8 + 13, стало 3 + 18). */
  top: 3px; right: 3px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.nudge-close:hover { background: var(--surface); color: var(--text); }
.nudge-close svg { width: 15px; height: 15px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) { .nudge { animation: none; } }

@media (max-width: 560px) {
  .nudge { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

.toast.floating {
  position: fixed;
  top: auto;
  bottom: 28px;
  z-index: 70;
  box-shadow: var(--shadow-2);
}

.access { margin: var(--s-16) 0 0; padding-top: var(--s-10); border-top: 1px solid var(--border); }

.access-title {
  margin: 0 0 20px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -.5px;
  text-align: center;
}

.access-card {
  max-width: 620px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--elevated);
  overflow: hidden;
}

.access-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
  gap: 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.access-tab {
  position: relative;
  z-index: 1;
  padding: 10px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color .18s;
}
.access-tab.on { color: var(--text); }
.access-tab:focus-visible { outline: 2px solid var(--accent-tekst); outline-offset: -2px; }

.access-thumb {
  position: absolute;
  top: 6px; left: 6px;
  width: calc(50% - 8px);
  height: calc(100% - 12px);
  border-radius: 10px;
  background: var(--elevated);
  box-shadow: var(--shadow-1);
  transition: transform .32s cubic-bezier(.4, 1.3, .5, 1);
}
.access-card.second .access-thumb { transform: translateX(calc(100% + 4px)); }

/* Дорожка внутри шире окна вдвое — на ней две колонки сравнения, и
   переключение сдвигает её. overflow: hidden прячет вторую, но ширину
   родителю она всё равно диктует: проценты при расчёте собственного
   размера считаются как auto. contain: inline-size обрывает эту передачу —
   окно меряется само по себе. Без него страница возможностей уезжала
   вбок на 32 точки при ширине 360. */
.access-viewport {
  overflow: hidden;
  min-width: 0;
  contain: inline-size;
}

.access-track {
  display: flex;
  width: 200%;
  transition: transform .32s cubic-bezier(.4, 1.3, .5, 1);
}
.access-card.second .access-track { transform: translateX(-50%); }

.access-pane { width: 50%; flex: 0 0 50%; padding: 20px 22px 22px; }

.access-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 11px;
}

.access-list li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text);
}

.access-list li::before {
  position: absolute;
  left: 0; top: -1px;
  font-size: 15px;
  font-weight: 700;
}

.access-list li.yes::before { content: "✓"; color: var(--green); }

.access-list li.no {
  color: var(--text-2);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, #ef4444 60%, transparent);
  text-decoration-thickness: 1.5px;
  opacity: .72;
}
.access-list li.no::before { content: "✕"; color: #ef4444; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .access-track, .access-thumb { transition: none; }
}

@media (max-width: 480px) {
  .access-tab { font-size: 12.5px; padding: 10px 4px; }
  .access-pane { padding: 18px 16px 20px; }
  .access-list li { font-size: 13.5px; padding-left: 26px; }
}

@media (min-width: 1180px) {
  .setup { max-width: 1040px; }

  .search-wrap { max-width: 620px; }

  .what { grid-template-columns: repeat(3, 1fr); }

  .faq, .access-card { max-width: 760px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 1600px) {
  .setup { max-width: 1180px; }
  .what { gap: 18px; }
}

.auth-google { margin-bottom: 18px; }
.auth-google > div:first-child { display: flex; justify-content: center; }

.auth-or {
  position: relative;
  text-align: center;
  margin-top: 16px;
}
.auth-or::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--border);
}
.auth-or span {
  position: relative;
  padding: 0 10px;
  background: var(--elevated);
  font-size: 12px;
  color: var(--text-2);
}

.auth-sub {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.auth-wide { width: 100%; justify-content: center; min-height: 46px; font-size: var(--fs-body); }

.auth-later { display: block; margin: 14px auto 0; }

.auth-head { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.auth-head .modal-title { margin: 0; }

.auth-back {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-left: -6px;
}
.auth-back:hover { background: var(--surface); color: var(--text); }
.auth-back svg { width: 20px; height: 20px; fill: currentColor; }

.auth-known {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  margin-bottom: 16px;
}

.auth-known-label { font-size: 12px; color: var(--text-2); }

.auth-change {
  border: 0;
  background: transparent;
  color: var(--accent-tekst);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
}
.auth-change:hover { text-decoration: underline; }

.auth-known-value {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-2);
  font-size: 14.5px;

  overflow-wrap: anywhere;
}

.nav-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 4px;
  border-radius: 8px;
  transition: color .16s;
}
.nav-link:hover { color: var(--text); }

.vozm {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 48px;
  position: relative;
  z-index: 2;
}

.vozm-hero {
  padding: var(--s-12) 0 var(--s-10);
  max-width: 70ch;
}

.vozm-h1 {
  margin: 0 0 20px;
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  line-height: 1.06;
}

.vozm-h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.18;
}

.vozm-lead {
  margin: 0 0 12px;
  max-width: 52ch;
  font-size: 19px;
  line-height: 1.58;
  color: var(--text-2);
}
.vozm-lead-quiet { font-size: 17px; }

.vozm-row {
  padding: 48px 0;
  border-top: 1px solid var(--border);
}

.vozm-say {
  max-width: 62ch;
  margin-bottom: 26px;
}

.vozm-tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
}
.vozm-tag-free {
  border-color: color-mix(in srgb, #128a52 40%, transparent);
  background: color-mix(in srgb, #128a52 12%, transparent);
  color: #0f7a49;
}
:root[data-theme="dark"] .vozm-tag-free { color: #4ade9a; }

.vozm-text {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
}

.vozm-end {
  border-top: 1px solid var(--border);
  padding: 60px 0 24px;
  text-align: center;
}
.vozm-end .vozm-text { margin: 0 auto; }
.vozm-cta { margin-top: 26px; padding: 14px 34px; font-size: 16px; }

/* Два экрана рядом — «ваш» и «друга». Столбцы с нулевым минимумом:
   у голого 1fr минимум равен содержимому, и ряд кнопок в шапке экрана
   задавал ширину всей странице. На 360 точках она уезжала вбок на 32. */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.demo-screen { min-width: 0; }

.demo-who {
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--text-2);
}
.demo-screen-mine .demo-who { color: var(--accent-tekst); font-weight: 600; }

.demo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: -1px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
  background: var(--elevated);
}
.demo-top-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}
.demo-top-right { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.demo-top-btn {
  border: 0;
  background: none;
  padding: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--text-2);
  transition: background-color .15s, color .15s;
}
.demo-top-btn .icon { width: 15px; height: 15px; fill: currentColor; }
.demo-top-btn.active {
  color: var(--accent-tekst);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Высоту кадра держим старым приёмом с процентным padding, а не через
   aspect-ratio. На этом же элементе стоит container-type, и вместе с
   containment соотношение сторон срабатывает не везде: в Safari кадр
   схлопывался в ноль, потому что всё его содержимое позиционировано
   абсолютно и своей высоты не даёт. Проценты в padding считаются от
   ширины и от containment не зависят. */
.demo-kadr {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  border-radius: 0 0 var(--radius-lg, 14px) var(--radius-lg, 14px);
  overflow: hidden;
  background: #0c0d12;
  container-type: inline-size;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent),
              0 18px 44px rgba(0, 0, 0, .34);
}

.demo-scene { position: absolute; inset: 0; }
.demo-svg { display: block; width: 100%; height: 100%; }

.demo-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.demo .controls {
  padding: 14cqw 2cqw 2.4cqw;
  z-index: 6;
  pointer-events: none;
}
.demo .seek { padding: 1.8cqw 0 1cqw; }
.demo .seek-track { height: 1cqw; border-radius: .5cqw; }
.demo .controls-row { gap: 0; margin-top: 1cqw; }
.demo .ctrl {
  width: clamp(16px, 5cqw, 40px);
  height: clamp(16px, 5cqw, 40px);
}
.demo .ctrl .icon {
  width: clamp(10px, 3.1cqw, 22px);
  height: clamp(10px, 3.1cqw, 22px);
}
.demo .ctrl.active { color: #8ab4f8; background: rgba(138, 180, 248, .2); }
.demo .ctrl.vykl { color: #f28b82; }
.demo .time {
  font-size: clamp(8px, 2.1cqw, 13px);
  margin-left: 1.2cqw;
  white-space: nowrap;
}
.demo .sync-badge {
  font-size: clamp(7px, 1.9cqw, 12px);
  padding: .6cqw 1.6cqw;
  margin-right: 1cqw;
}

.demo .seek-fill { width: 34%; }
.demo .seek-fill.idet { animation: demoIdet 8s linear infinite; }
@keyframes demoIdet {
  from { width: 34%; }
  to   { width: 47%; }
}

.demo .sticker-slap { width: 22%; min-width: 0; max-width: none; }
.demo .sticker-slap.is-emoji { font-size: 18cqw; text-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.6); }
.demo .slap-ripple { width: 28cqw; height: 28cqw; border-width: .5cqw; }
.demo .reaction-fly { bottom: 18%; font-size: 10cqw; }

.demo .reaction-bar {
  right: 2cqw;
  bottom: 11cqw;
  gap: .25cqw;
  padding: .6cqw;
  z-index: 7;
}
.demo .reaction-pick {
  width: 4.8cqw; height: 4.8cqw;
  font-size: 2.8cqw;
}
.demo .reaction-pick.zhat {
  background: color-mix(in srgb, var(--accent) 75%, transparent);
  transform: scale(1.35);
}

.demo .sticker-picker {
  position: absolute;
  left: 50%;
  bottom: 11cqw;
  transform: translateX(-50%);
  width: 30cqw;
  border-radius: 1.6cqw;
  z-index: 7;
  animation: demoVsplyt .2s ease-out both;
}
.demo .sticker-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: .5cqw;
  padding: 1cqw;
  max-height: none;
  overflow: visible;
}
.demo .sticker-cell {
  font-size: 3cqw;
  border-radius: .9cqw;
  padding: .3cqw;
}
.demo .sticker-cell.vybran {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  transform: scale(1.1);
}

.demo .call-tiles { top: 2.2cqw; right: 2.2cqw; gap: 1cqw; z-index: 7; }
.demo .tile {
  width: 15.6cqw;
  display: grid;
  place-items: center;
  border-radius: 2.2cqw;
  background: var(--elevated);
}
.demo-tile-face { font-size: 5.9cqw; line-height: 1; }
.demo .tile-label {
  position: absolute;
  left: .9cqw; bottom: .5cqw;
  font-size: 1.8cqw;
  color: rgba(255,255,255,.85);
}
.demo .tile.speaking { outline-width: .6cqw; }

.demo-stage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

/* В комнате чат — панель, пришпиленная к правому краю окна: 340 точек
   шириной с отступом 16 сверху, справа и снизу. Здесь то же самое, только
   мерой служит кадр, а не окно, поэтому доли те же, а размеры — в cqw.
   Все координаты задаются заново: у настоящей панели position: fixed, и без
   этого она вылезала бы из кадра на весь экран. */
.demo-chat {
  position: absolute;
  inset: 2cqw 2cqw 2cqw auto;
  width: 27cqw;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  flex: none;
  z-index: 7;
  border-radius: 2.4cqw;
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .38);
  container-type: inline-size;
  animation: demoChatIn .28s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes demoChatIn {
  from { opacity: 0; transform: translateX(8%); }
  to   { opacity: 1; transform: none; }
}
.demo-chat .chat-head { padding: 7cqw 8cqw; }
.demo-chat .chat-title { font-size: 9cqw; font-family: var(--font-head); font-weight: 700; }
.demo-chat .chat-list {
  overflow: hidden;
  gap: 5cqw;
  padding: 7cqw 8cqw;
}
.demo-chat .msg { max-width: 94%; gap: 1cqw; }
.demo-chat .msg-who { font-size: 7cqw; gap: 1.6cqw; }
.demo-chat .msg-dot { width: 5.5cqw; height: 5.5cqw; }
.demo-chat .msg-body {
  font-size: 8.6cqw;
  line-height: 1.35;
  padding: 4cqw 6cqw;
  border-radius: 7.5cqw;
  animation: demoVsplyt .22s ease-out both;
}
.demo-chat .chat-form { padding: 5cqw 6cqw; gap: 4cqw; }
.demo-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 16cqw;
  padding: 4cqw 6cqw;
  border: 1px solid var(--border);
  border-radius: 9cqw;
  background: var(--bg);
  color: var(--text);
  font-size: 8.6cqw;
  line-height: 1.35;
}
.demo-chat .chat-send {
  width: 17cqw; height: 17cqw;
  display: inline-grid;
  place-items: center;
}
.demo-chat .chat-send .icon { width: 9cqw; height: 9cqw; fill: currentColor; }
.demo-chat-input.pishet::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 9cqw;
  margin-left: 1px;
  background: var(--accent);
  vertical-align: -1.5cqw;
  animation: demoKursor .9s steps(2, jump-none) infinite;
}
@keyframes demoKursor { 50% { opacity: 0; } }

.demo-znak {
  position: absolute;
  left: 50%; top: 42%;
  width: 22cqw; height: 22cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(10, 11, 14, .72);
  display: grid;
  place-items: center;
  animation: demoZnak .32s cubic-bezier(.2,.9,.3,1) both;
}
.demo-znak svg { width: 11cqw; height: 11cqw; fill: #fff; }

@keyframes demoZnak {
  from { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.demo .screen-badge {
  top: 3.4cqw; left: 3.4cqw;
  padding: 1.1cqw 2.6cqw;
  font-size: 3.4cqw;
  z-index: 7;
  animation: demoVsplyt .24s ease-out both;
}

@keyframes demoVsplyt {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.demo-tap {
  position: absolute;
  width: 13cqw; height: 13cqw;
  margin: -6.5cqw 0 0 -6.5cqw;
  border-radius: 50%;
  border: .5cqw solid rgba(255,255,255,.9);
  animation: demoTap .58s ease-out both;
  z-index: 8;
}
@keyframes demoTap {
  0%   { transform: scale(.35); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.demo-draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .5s;
}
.demo-draw.gasnet { opacity: 0; }
.demo-draw-line {
  fill: none;
  stroke: #ff7ad9;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
  filter: drop-shadow(0 0 4px rgba(255, 122, 217, .55));
  animation: demoRisuet .62s cubic-bezier(.4,.1,.3,1) forwards;
}
@keyframes demoRisuet { to { stroke-dashoffset: 0; } }

/* Значок «в синхроне» в кадре демонстрации не помещается рядом с полным
   набором кнопок, а кнопки важнее: их и просили показать один в один. */
.demo .sync-badge { display: none; }

@container (max-width: 470px) {
  .demo .ctrl[data-ctrl="vol"],
  .demo .ctrl[data-ctrl="menu"] { display: none; }
}

@container (max-width: 360px) {
  .demo .ctrl[data-ctrl="back"],
  .demo .ctrl[data-ctrl="fwd"],
  .demo .ctrl[data-ctrl="fs"] { display: none; }
}

@container (max-width: 260px) {
  .demo .time { display: none; }
}

@media (max-width: 900px) {
  .vozm-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 32px 0 44px;
  }
  .vozm-hero-text { order: 2; }
    .vozm-lead { margin-left: auto; margin-right: auto; }
  .vozm-row { padding: 36px 0; }
}

@media (max-width: 620px) {
  .vozm { padding-left: 16px; padding-right: 16px; }
  .vozm-lead { font-size: 17px; }
  .vozm-lead-quiet { font-size: 15.5px; }
  .vozm-text { font-size: 16px; }
  .demo { gap: 8px; }
  .demo-who { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo .seek-fill.idet { animation: none; }
  .demo-znak, .demo-chat, .demo-chat .msg-body,
  .demo .screen-badge, .demo .sticker-picker { animation: none; }
  .demo-draw-line { animation: none; stroke-dashoffset: 0; }
  .demo-tap { display: none; }
  .demo-chat-input.pishet::after { animation: none; }
}

.demo .call-bar {
  top: 2.2cqw;
  right: 20cqw;
  gap: 1cqw;
  z-index: 7;
  animation: demoVsplyt .26s ease-out both;
}
.demo .call-ctrl {
  width: 7cqw; height: 7cqw;
  border: 0;
  padding: 0;
}
.demo .call-ctrl .icon { width: 4cqw; height: 4cqw; fill: currentColor; }
.demo .call-ctrl-end { background: #d93025; }
.demo .call-ctrl.vykl { background: #d93025; }

@container (max-width: 380px) {
  .demo .call-bar { right: 28cqw; }
  .demo .call-ctrl { width: 9cqw; height: 9cqw; }
  .demo .call-ctrl .icon { width: 5cqw; height: 5cqw; }
}

@media (max-width: 620px) {
  .demo-top { padding: 5px 8px; }
  .demo-top-btn { width: 24px; height: 24px; }
  .demo-top-btn .icon { width: 14px; height: 14px; }
}

.demo-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faq-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 0 48px;
  border-top: 1px solid var(--border);
}
.faq-page .qa { margin-bottom: 10px; }
.faq-page .qa:first-of-type { margin-top: 34px; }
.faq-page .qa summary {
  padding: 18px 52px 18px 22px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.2px;
}
.faq-page .qa p {
  padding: 0 22px 20px;
  font-size: 16px;
  line-height: 1.62;
}

@media (max-width: 620px) {
  .faq-page .qa summary { padding: 15px 44px 15px 16px; font-size: 15.5px; }
  .faq-page .qa p { padding: 0 16px 16px; font-size: 15px; }
}

@media (max-width: 620px) {
  .nav-link { font-size: 14px; padding: 8px 2px; }
  /* На узкой шапке главной помещается одна ссылка. Оставляем первую —
     «Возможности»; на самой странице возможностей ссылка одна, «Вопросы»,
     и это правило её не трогает. */
  .nav-link + .nav-link { display: none; }
}

/* На странице вопросов персонаж сидит ниже и занимает больше высоты из-за
   знака над головой — рядом с заголовком он перевешивал. Здесь он мельче. */

/* ------------------------------------------------------------------ */
/*  Безопасные поля на телефонах с вырезом                              */
/*                                                                      */
/*  В разметке главной стоит viewport-fit=cover: страница растягивается */
/*  под вырез и под полосу жеста. Значит, всё, что приколото к краю     */
/*  экрана, обязано само отступить от этих зон — иначе полоса жеста     */
/*  ложится поверх поля ввода в чате и поверх круглых кнопок.           */
/*                                                                      */
/*  max() держит прежние отступы там, где вырезов нет: env() на обычных */
/*  экранах равен нулю, и значение просто остаётся исходным.            */
/* ------------------------------------------------------------------ */

.consent { bottom: max(16px, env(safe-area-inset-bottom)); }
.chat-fab { bottom: max(16px, env(safe-area-inset-bottom)); }
.nudge { bottom: max(20px, env(safe-area-inset-bottom)); }
.toast.floating { bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px)); }

.topbar {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

@media (max-width: 1080px) {
  /* Лист чата снизу: высоту добираем на величину полосы жеста, а поле
     ввода отодвигаем от неё внутренним отступом — иначе клавиатура и
     полоса перекрывают строку набора. */
  .chat-panel {
    height: min(72vh, 560px);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 620px) {
  .controls {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  /* Ссылки в подвале были высотой 29 точек — мимо такой цели легко
     промахнуться пальцем. Сорок — нижняя граница, которую советует Apple
     для второстепенных элементов. */
  .site-foot { gap: 4px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .site-foot a { padding: 10px 6px; }
  .nav-link { padding: 12px 4px; }
}

@media (max-width: 620px) {
  .site-foot {
    gap: var(--s-4);
    padding: var(--s-12) 0 max(var(--s-6), env(safe-area-inset-bottom));
  }
}

.lang { position: relative; flex: 0 0 auto; }
.lang > summary { list-style: none; }
.lang > summary::-webkit-details-marker { display: none; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 10px 0 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s;
}
.lang-btn:hover { background: var(--border); }
.lang-btn svg {
  width: 18px; height: 18px;
  fill: currentColor;
  opacity: .7;
  transition: transform .18s;
}
.lang[open] .lang-btn svg { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--elevated);
  box-shadow: var(--shadow-2);
  animation: langIn .16s ease-out;
}
@keyframes langIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.lang-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.lang-menu a:hover { background: var(--surface); }
.lang-menu a.on { color: var(--accent-tekst); font-weight: 600; }

@media (max-width: 620px) {
  .lang-btn { height: 34px; padding: 0 8px 0 11px; font-size: 13px; }
  .lang-btn svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-menu { animation: none; }
  .lang[open] .lang-btn svg { transition: none; }
}

.vhod {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  position: relative;
  z-index: 2;
}

.vhod-card {
  width: 100%;
  max-width: 420px;
  padding: var(--s-8) var(--s-6) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.vhod-title {
  margin: 0 0 var(--s-5);
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--tr-head);
}

.vhod-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.vhod-card .auth-known { margin-bottom: 18px; }
.vhod-card .auth-later { margin-top: 16px; }

@media (max-width: 620px) {
  .vhod { padding: 24px 16px 40px; align-items: flex-start; }
  .vhod-card { padding: 26px 20px 20px; }
  .vhod-title { font-size: 23px; }
}

.doc-note {
  margin: 0 0 22px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.demo-scene picture { display: contents; }

/* ------------------------------------------------------------------ */
/*  Свечение от кадра                                                   */
/*                                                                      */
/*  Тот же приём, что у ютуба в «профессиональном освещении»: кадр      */
/*  раз в несколько долей секунды рисуется на крошечный холст 32×18,    */
/*  холст растягивается шире плеера и размывается. Мелкий размер и      */
/*  редкая перерисовка нужны не для красоты, а чтобы это не грело       */
/*  телефон: размытие большой картинки каждый кадр стоит дорого.        */
/*                                                                      */
/*  Холст лежит под плеером и не ловит нажатия.                         */

.turnstile {
  margin: 0 0 14px;
  min-height: 65px;
  display: flex;
  justify-content: center;
}
.turnstile:empty { display: none; }

/* ------------------------------------------------------------------ */
/*  Лента «Чаще всего смотрят»                                          */
/* ------------------------------------------------------------------ */

/* ================================================================== */
/*  ЛЕНТА И КАРТОЧКА ФИЛЬМА                                            */
/*                                                                     */
/*  Один вид на всё: главная, каталог, «похожее». Лента листается       */
/*  человеком — прежняя ехала сама по кругу, и чтобы прочитать          */
/*  название, приходилось догонять карточку курсором.                  */
/* ================================================================== */

.lenta {
  display: flex;
  flex-direction: column;
  gap: var(--s-razdel);
  /* Точка отсчёта для украшения: оно лежит внутри и меряется по полкам. */
  position: relative;
}

/* Полка — точка отсчёта слоёв для своего украшения. Без z-index
   отрицательный слой уходит в корневой контекст и оказывается под
   заливкой страницы: сборка есть в разметке, а на экране её нет.
   С нулём она остаётся внутри полки — ниже карточек, но выше фона. */
.lenta-row { position: relative; z-index: 0; }

.lenta-view {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Вылезаем за поля страницы: так карточки уходят под самый край и
     видно, что ряд продолжается. */
  margin-inline: calc(-1 * var(--s-5));
  padding-inline: var(--s-5);
  scroll-padding-inline: var(--s-5);
  /* Боковая прокрутка не должна перехватывать вертикальную: без этого
     страница застревает, когда пальцем ведут наискось. */
  overscroll-behavior-x: contain;
}
.lenta-view::-webkit-scrollbar { display: none; }

.lenta-track {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  padding-bottom: var(--s-2);
}

/* ---------------- Стрелки ----------------
   Только для мыши: на пальцах листают смахом, и кнопка там лишняя.
   Погасшая стрелка означает, что листать в эту сторону больше нечего. */
.lenta-strelka {
  position: absolute;
  top: calc(50% + 12px);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: var(--shadow-2);
  transition: opacity var(--bystro) var(--krivaya),
              background-color var(--bystro) var(--krivaya);
}
.lenta-strelka svg { width: 22px; height: 22px; fill: currentColor; }
.lenta-strelka:hover:not(:disabled) { background: var(--surface-hover); }
.lenta-strelka:disabled { opacity: 0; pointer-events: none; }
.lenta-strelka.vlevo { left: calc(-1 * var(--s-4)); }
.lenta-strelka.vpravo { right: calc(-1 * var(--s-4)); }

@media (hover: hover) and (pointer: fine) {
  .lenta-strelka { display: inline-flex; }
}

/* ---------------- Карточка ---------------- */

.karta {
  flex: 0 0 auto;
  width: 158px;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-3);
}

.karta-poster {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  transition: border-color var(--srednee) var(--krivaya);
}

.karta:hover .karta-poster { border-color: var(--border-strong); }
.karta:focus-visible { outline: none; }
.karta:focus-visible .karta-poster {
  outline: 2px solid var(--accent-tekst);
  outline-offset: 2px;
}

.karta-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Постера нет или он не открылся: ровная плашка с первой буквой. Пустое
   место или значок сломанной картинки читаются как поломка сайта. */
.karta-bez-postera {
  display: flex;
  align-items: center;
  justify-content: center;
}
.karta-bukva {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 800;
  color: var(--text-3);
}

.karta-rating {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  padding: 3px 7px;
  border-radius: var(--r-1);
  font-size: var(--fs-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  color: #fff;
  background: rgba(10, 11, 14, .82);
}
/* Цвет — подсказка, а не единственный носитель смысла: само число
   стоит рядом и читается без него. */
.karta-good { background: rgba(16, 92, 52, .92); }
.karta-mid  { background: rgba(10, 11, 14, .82); }
.karta-low  { background: rgba(10, 11, 14, .82); }

/* Единственное действие при наведении. Не увеличение, не размытие и не
   запуск ролика — просто подпись, куда ведёт нажатие. */
.karta-smotret {
  position: absolute;
  left: var(--s-2);
  right: var(--s-2);
  bottom: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-2);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transition: opacity var(--bystro) var(--krivaya);
}
@media (hover: hover) and (pointer: fine) {
  .karta:hover .karta-smotret,
  .karta:focus-visible .karta-smotret { opacity: 1; }
}
/* На пальцах наведения не бывает — подпись там не нужна вовсе. */
@media (hover: none) { .karta-smotret { display: none; } }

.karta-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.karta-year {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Скелет: те же размеры, поэтому подмена ничего не двигает. */
.karta-skelet .karta-poster { border-color: transparent; }
.karta-skelet .skelet-stroka { margin-top: var(--s-2); display: block; }

/* ---------------- Сетка каталога ----------------
   Колонок столько, сколько влезает при читаемой ширине карточки: лучше
   четыре разборчивых постера в ряд, чем восемь марок. */
.setka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--s-5) var(--s-4);
}
.setka .karta { width: auto; }

/* Три колонки, а не две: при двух постер занимал половину экрана, ряд
   уходил за нижний край и каталог листался по две карточки за экран.
   Три меньших читаются так же — обложку узнают по картинке, а не по
   размеру, — и на экран помещается вшестеро больше. */
@media (max-width: 560px) {
  .setka { grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-2); }
  .karta { width: 136px; }
  .setka .karta { width: auto; }
  /* Подписи под мелкой обложкой соразмерны ей: прежний кегль давал по
     три строки на название. */
  .setka .karta-name { font-size: var(--fs-caption); }
  .setka .karta-year { font-size: 11px; }
}

/* ---------------- Жанры ---------------- */
.zhanry { margin-top: 0; }
.zhanry-set { display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (max-width: 640px) {
  /* Расстояния между разделами задаёт gap у .setup и .lenta — внешние
     поля здесь складывались бы с ним и давали лишние семьдесят точек
     пустоты под поиском. */
  .karta { width: 130px; }
}

/* Шаг подтверждения почты */

.auth-sent {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
  word-break: break-word;
}

.auth-code {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.auth-code::placeholder {
  letter-spacing: 10px;
  font-weight: 600;
  opacity: .35;
}

.auth-again {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
}
.auth-again:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------------ */
/*  Профиль                                                             */
/*                                                                      */
/*  Страница на всю ширину, без карточек: на широком экране коробка      */
/*  посреди пустоты смотрится потерянной. Поля при этом не растягиваем   */
/*  во всю строку — читать строку в тысячу пикселей неудобно.            */
/* ------------------------------------------------------------------ */

.profil {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--s-5) var(--s-20);
  position: relative;
  z-index: 2;
}

.profil-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  margin: 0 0 var(--s-8);
  font-family: var(--font-head);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.profil-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* Заголовок раздела в правой колонке: без него широкая часть выглядит
   безголовой, а слева при этом висит подсвеченный пункт меню. */
.profil-razdel {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

.profil-nav {
  display: grid;
  gap: 2px;
  position: sticky;
  top: 78px;
}

.profil-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 15px;
  color: var(--text-2);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.profil-nav-item svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
.profil-nav-item:hover { background: var(--surface); color: var(--text); }
.profil-nav-item.on { background: var(--surface); color: var(--text); font-weight: 600; }

.profil-card { display: grid; gap: var(--s-6); }

.profil-foto {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
  max-width: 660px;
}

.profil-foto-img,
.profil-foto-bukvy {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
}

.profil-foto-bukvy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-head);
  font-size: 38px;
  font-weight: 600;
  user-select: none;
}

.profil-foto-knopki { display: flex; flex-wrap: wrap; gap: 10px; }
.profil-foto-btn { font-size: 14.5px; }

.profil-pole { display: grid; gap: 7px; max-width: 660px; }

.profil-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-2);
}

.profil-pole .url-input {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  padding: 12px 14px;
  font-size: 15.5px;
  width: 100%;
}
.profil-pole .url-input:focus {
  outline: none;
  border-color: var(--blue-tekst);
  background: var(--elevated);
  box-shadow: 0 0 0 3px var(--glow-1);
}

/* Почту здесь только показываем: сменить её без подтверждения нового
   адреса нельзя, а это отдельный разговор. */
.profil-znachenie {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 11px;
  color: var(--text-2);
  font-size: 15.5px;
  word-break: break-word;
}

.profil-oshibka { margin: 0; color: #d93025; font-size: 14px; }
:root[data-theme="dark"] .profil-oshibka { color: #f28b82; }

.profil-niz {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

.profil-gotovo { font-size: 14px; color: var(--green); }

.profil-back { display: inline-block; margin-top: 30px; font-size: 14.5px; }

/* Подпись под фотографией: что можно загрузить и какого размера. */
.profil-podskazka {
  /* Внутри строки с кнопками — своей строкой, а не рядом с ними. */
  flex: 0 0 100%;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-2);
}

.account-chip.has-foto {
  background-size: cover;
  background-position: center;
  color: transparent;
}

@media (max-width: 900px) {
  .profil-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 720px) {
  .profil { padding: 28px 18px 56px; }
  .profil-title { margin-bottom: 20px; }
  .profil-grid { grid-template-columns: 1fr; gap: 22px; }
  /* На узком экране разделы становятся строкой сверху и прокручиваются
     вбок — их со временем станет больше. */
  .profil-nav {
    position: static;
    grid-auto-flow: column;
    justify-content: start;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .profil-nav::-webkit-scrollbar { display: none; }
  .profil-nav-item { white-space: nowrap; }
  /* На узком экране пункт меню стоит прямо над содержимым и уже называет
     раздел — второй такой же заголовок только повторяется. */
  .profil-razdel { display: none; }
  .profil-foto { gap: 16px; padding-bottom: 20px; }
  .profil-foto-img, .profil-foto-bukvy { width: 88px; height: 88px; }
  .profil-foto-bukvy { font-size: 28px; }
  .profil-pole { max-width: none; }
}

/* ------------------------------------------------------------------ */
/*  Друзья                                                              */
/* ------------------------------------------------------------------ */

.profil-nav-item { position: relative; }

.profil-nav-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.podvkladki {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  max-width: 660px;
}

.podvkladka {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  min-height: 36px;
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.podvkladka:hover { background: var(--surface); color: var(--text); }
.podvkladka.on { background: var(--surface); color: var(--text); font-weight: 600; }

.podvkladka-schet {
  min-width: 19px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--border);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.podvkladka.on .podvkladka-schet { background: var(--blue); color: var(--on-blue); }

.podvkladka-telo { max-width: 660px; }

.druzya-spisok { display: grid; gap: 2px; }

.drug {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .15s ease;
}
.drug:hover { background: var(--surface); }

.drug-foto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
}

.drug-bukvy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 15px;
  font-weight: 600;
  user-select: none;
}

.drug-text { min-width: 0; flex: 1 1 auto; }
.drug-imya {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drug-login { font-size: 13px; color: var(--text-2); }

.drug-knopki { display: flex; gap: 6px; flex: 0 0 auto; }

.druzya-podzagolovok {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-2);
}
.druzya-podzagolovok:first-child { margin-top: 0; }

.druzya-pusto { margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--text-3); }
.druzya-gotovo { margin: 0; font-size: var(--fs-small); color: var(--green); }

.profil-podskazka-pole { flex: none; }

@media (max-width: 720px) {
  .podvkladki { max-width: none; }
  .podvkladka { padding: 8px 11px; font-size: 14px; }
  .podvkladka-telo { max-width: none; }
  .drug { gap: 10px; padding: 9px 8px; }
  .drug-foto { width: 38px; height: 38px; }
  .drug-knopki { flex-direction: column; gap: 4px; }
}

/* ------------------------------------------------------------------ */
/*  Название в комнате и кнопка YouTube                                 */
/* ------------------------------------------------------------------ */

.now {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 auto 14px;
  width: 100%;
  max-width: 1180px;
  padding: 0 4px;
}

.now-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* В комнате за заголовком стоит подсветка от кадра, и обычный цвет текста
   на ней тонет. Берём чистый белый и подкладываем мягкую тень. */
:root[data-theme="dark"] .now-title {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.now-meta { display: inline-flex; align-items: center; gap: 10px; }

.now-year { font-size: 14px; color: var(--text-2); }

#filmTube { margin-top: 12px; }

@media (max-width: 720px) {
  .now { margin-bottom: 10px; gap: 6px 10px; }
  .now-title { font-size: 20px; }
  .now-year { font-size: 13px; }
}

/* ------------------------------------------------------------------ */
/*  Колокольчик и карточка участников                                   */
/* ------------------------------------------------------------------ */

.vesti { position: relative; }
.vesti-btn { position: relative; }

.vesti-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(330px, calc(100vw - 24px));
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--elevated);
  box-shadow: var(--shadow-2);
}

.vesti-head {
  padding: 6px 8px 10px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.vesti-list { display: grid; gap: 2px; }

.vest {
  padding: 10px 10px 11px;
  border-radius: 10px;
}
.vest-new { background: var(--surface); }

.vest-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text); }
.vest-hint { margin: 6px 0 2px; font-size: 12.5px; color: var(--text-2); }

.vest-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-tekst);
  text-decoration: none;
}
.vest-link:hover { text-decoration: underline; }

.vest-time { display: block; margin-top: 6px; font-size: 12px; color: var(--text-2); }
.vesti-pusto { margin: 10px 8px; font-size: 14px; color: var(--text-2); }

/* ------------------------------------------------------------------ */
/*  Окно «Кого позвать»                                                  */
/* ------------------------------------------------------------------ */

.zvat-card { max-width: 420px; }

.zvat-list {
  display: grid;
  gap: 4px;
  margin: 16px 0 4px;
  max-height: min(52vh, 360px);
  overflow-y: auto;
  /* Полоса прокрутки не должна прижиматься к самим строкам. */
  padding-right: 2px;
}

.zvat-drug {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.zvat-drug:hover {
  border-color: var(--blue-tekst);
}
.zvat-drug:disabled { opacity: .55; cursor: default; transform: none; }

.zvat-foto {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
}

/* Стрелка справа: показывает, что по строке можно нажать. */
.zvat-drug::after {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: auto;
  background: currentColor;
  opacity: .35;
  -webkit-mask: no-repeat center/18px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: no-repeat center/18px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.zvat-drug:hover::after { opacity: .8; }

.zvat-pusto { margin: 16px 2px 4px; font-size: 14.5px; color: var(--text-2); }

/* ------------------------------------------------------------------ */
/*  Кнопка «Ещё» в шапке                                                */
/* ------------------------------------------------------------------ */

.esche { position: relative; }

.esche-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--elevated);
  box-shadow: var(--shadow-2);
  display: grid;
  gap: 2px;
}

.esche-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.esche-item:hover { background: var(--surface); }
/* Внутри строки иконка — просто картинка: нажатие ловит вся строка. */
.esche-item .icon-btn { pointer-events: none; flex: 0 0 auto; }

@media (max-width: 720px) {
  /* Чат на телефоне открывается круглой кнопкой над плеером — вторая
     такая же в шапке только отнимает место. */
  .topbar-right #chatBtn { display: none; }
  /* Подпись состояния съедает всю ширину; кружки участников её заменяют. */
  .status { display: none; }
}

/* Ссылка «Забыли пароль?» под кнопкой входа. */
.auth-zabyl {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  color: var(--text-2);
  text-decoration: none;
}
.auth-zabyl:hover { color: var(--blue-tekst); text-decoration: underline; }

/* ------------------------------------------------------------------ */
/*  Значок подписки у имени                                             */
/* ------------------------------------------------------------------ */

/* Рисуем строчным блоком с выравниванием по середине текста: имя рядом может
   быть любого размера, и значок должен садиться на его линию, а не свисать. */
.pro-znak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-left: .3em;
  vertical-align: -.09em;
  flex: none;
}

.pro-znak svg {
  width: 100%;
  height: 100%;
  fill: var(--amber);
  /* Тонкая подложка, чтобы звезда читалась и на светлом, и на цветном. */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25));
}

.profil-foto-namek { margin-top: -4px; }

/* ------------------------------------------------------------------ */
/*  Поиск в шапке комнаты                                              */
/* ------------------------------------------------------------------ */

.shapka-poisk {
  /* Стоит вплотную к логотипу, а не посередине шапки: свободное место
     уходит вправо. Ширина своя, но сжаться поле может — иначе на пограничных
     ширинах шапка вылезала за край экрана. */
  flex: 0 1 440px;
  margin-right: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Значок нужен только на узком экране: там поле прячется за ним. */
.shapka-poisk-btn {
  display: none;
  border-radius: 10px;
  width: 38px;
  height: 38px;
}

.shapka-poisk-mesto { flex: 1 1 auto; min-width: 0; }

/* Поле в шапке ниже и без отдельной кнопки «Смотреть»: строку всё равно
   отправляют с клавиатуры, а место в шапке дорогое. Углы прямые со
   скруглением — как у соседних кнопок, а не таблетка. */
/* В шапке ограничение ширины с экрана выбора не нужно: там оно центрует
   поле посреди страницы, а здесь строка и так своей ширины. */
.search-wrap-shapka {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.search-wrap-shapka .url-form {
  padding: 0;
  border-radius: 10px;
}

.search-wrap-shapka .url-input {
  padding: 9px 14px;
  font-size: 14.5px;
  border-radius: 10px;
}

.search-wrap-shapka .url-form .btn { display: none; }

/* Подсказки в шапке шире самого поля: названия фильмов длинные, а поле
   узкое. Растягиваем вправо, но не за край экрана. */
.search-wrap-shapka .search-drop {
  left: 0;
  right: auto;
  width: min(420px, calc(100vw - 32px));
}

/* Граница подобрана замером, а не на глаз: в комнате справа стоит кнопок
   на 764 точки плюс логотип, и до 1400 точек на поле остаётся полтора слова.
   Ниже этой ширины в шапке живёт значок, а поле раскрывается по нажатию
   отдельной строкой во всю ширину — так оно всегда нормального размера. */
@media (max-width: 1400px) {
  .shapka-poisk { margin-right: auto; }
  .shapka-poisk-btn { display: inline-flex; }

  /* В свёрнутом виде поля нет вовсе — только значок. */
  .shapka-poisk-mesto {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 8px 16px 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: none;
    z-index: 25;
  }

  .shapka-poisk.raskryt .shapka-poisk-mesto { display: block; }

  .search-wrap-shapka .search-drop {
    width: auto;
    left: 0;
    right: 0;
  }
}

/* Карточка выбора поверх комнаты. Обычно она стоит в потоке экрана выбора,
   но во время просмотра тот экран — это главная страница целиком, и
   показывать её значило бы увести человека из комнаты. */
.pick-podlozhka {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 11, 16, .55);
  overflow-y: auto;
}

.pick.pick-poverh {
  margin-top: 0;
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: var(--shadow-2);
}

/* Пока карточка открыта, страница под ней не прокручивается. */
body.pick-otkryta { overflow: hidden; }

@media (max-width: 620px) {
  .pick-podlozhka { padding: 10px; align-items: flex-start; }
  .pick.pick-poverh { max-height: calc(100vh - 20px); }
}

/* ------------------------------------------------------------------ */
/*  Звонки в шапке чата                                                */
/* ------------------------------------------------------------------ */

.chat-head { gap: 6px; }
.chat-title { flex: 1 1 auto; }

.chat-zvonki {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.chat-zvonki .icon-btn-sm { width: 32px; height: 32px; border-radius: 9px; }

@media (min-width: 1081px) {
  /* В комнате чат закрывать нечем — крестик там лишний. */
  #chatCloseBtn { display: none; }
}

/* ------------------------------------------------------------------ */
/*  Текст на странице возможностей                                     */
/* ------------------------------------------------------------------ */

.vozm-opis {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
}

.vozm-proza {
  max-width: 70ch;
  margin: 8px auto 0;
  padding: 0 4px;
}

.vozm-proza p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-2);
}

.vozm-proza .vozm-h2 { margin-top: 34px; }
.vozm-proza a { color: var(--blue-tekst); }

@media (max-width: 720px) {
  .vozm-opis { max-width: none; font-size: 15.5px; }
  .vozm-proza p { font-size: 16px; }
}

/* ------------------------------------------------------------------ */
/*  Текстовый блок на главной                                          */
/* ------------------------------------------------------------------ */

.proza { text-align: left; }
.proza p { max-width: 68ch; color: var(--text-2); margin-bottom: var(--s-4); }
.proza .razdel-h { margin-bottom: var(--s-5); }
.proza-vopros { font-size: var(--fs-small); }
.proza-vopros a { color: var(--accent-tekst); text-decoration: none; }
.proza-vopros a:hover { text-decoration: underline; }

.proza-h2 {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tr-head);
  margin: var(--s-10) 0 var(--s-3);
}
.proza-h2:first-child { margin-top: 0; }

.proza p {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-2);
}

.proza a { color: var(--blue-tekst); }
.proza a:hover { text-decoration: underline; }

.proza-vopros {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .proza { padding: 0 16px 32px; }
  .proza p { font-size: 16px; }
}

/* Заголовки групп на странице вопросов. */
.faq-grup {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin: 34px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.faq-grup:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------------ */
/*  Серии в плеере                                                     */
/* ------------------------------------------------------------------ */

.serii { position: relative; display: inline-flex; }

/* Панель раскрывается вверх от кнопки — под ней ряд управления. */
.serii-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 8;
  width: 280px;
  max-width: calc(100vw - 32px);
  /* У плеера overflow: hidden, и всё, что выше его края, просто срезается.
     На невысоком кадре три списка с кнопкой туда не влезают — ограничиваем
     высоту и прокручиваем внутри. */
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border-radius: 12px;
  background: var(--elevated);
  color: var(--text);
  box-shadow: var(--shadow-2);
  font-size: 14px;
  text-align: left;
}

.serii-pole { display: block; margin-bottom: 10px; }
.serii-pole > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text-2);
}
.serii-pole select { width: 100%; }

.serii-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); }
.serii-hint.serii-beda { color: #e5484d; }

.serii-vkl { width: 100%; }

/* Кнопка на исходе серии: поверх кадра, но выше ряда управления, чтобы не
   перекрывать перемотку. */
.serii-dalshe {
  position: absolute;
  right: 18px;
  bottom: 88px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 11, 14, .90);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  animation: seriiVsplyt .25s ease-out;
}

@keyframes seriiVsplyt {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .serii-dalshe { animation: none; }
}

.serii-dalshe:hover { background: rgba(16, 17, 24, .92); }
.serii-dalshe svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.serii-dalshe-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.serii-dalshe-imya { font-weight: 400; font-size: 12.5px; opacity: .8; }
.serii-dalshe-imya:empty { display: none; }

.player:fullscreen .serii-dalshe { bottom: 104px; }

@media (max-width: 620px) {
  .serii-dalshe { right: 10px; bottom: 76px; padding: 9px 14px 9px 11px; font-size: 13.5px; }
  .serii-dalshe svg { width: 18px; height: 18px; }
  /* Кадр на телефоне низкий, а у плеера overflow: hidden — панель в нём
     просто срезается сверху. Поэтому на узком экране вынимаем её из потока
     плеера: fixed обрезается только окном, и панель видна целиком. */
  .serii-panel {
    position: fixed;
    /* Вынутая из плеера панель попадает в общий поток страницы и оказывается
       под кнопками подвала и баннером о куках — поднимаем её слой. */
    z-index: 70;
    left: 50%;
    right: auto;
    bottom: 84px;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 24px));
    max-height: 46vh;
    padding: 14px;
  }
  .serii-pole { margin-bottom: 10px; }
}

/* ------------------------------------------------------------------ */
/*  Пропуск заставки                                                    */
/* ------------------------------------------------------------------ */

.zastavka {
  position: absolute;
  right: 18px;
  bottom: 88px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: seriiVsplyt .25s ease-out;
}

.zastavka-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px 11px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 11, 14, .90);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.zastavka-btn:hover { background: rgba(16, 17, 24, .92); }
.zastavka-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* Цифра отсчёта в кружке — видно, сколько осталось до самопропуска. */
.zastavka-schet {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.zastavka-net {
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(10, 11, 14, .78);
  color: rgba(255, 255, 255, .85);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.zastavka-net:hover { background: rgba(16, 17, 24, .8); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .zastavka { animation: none; }
}

@media (max-width: 620px) {
  .zastavka { right: 10px; bottom: 74px; gap: 6px; }
  .zastavka-btn { padding: 9px 13px 9px 11px; font-size: 13.5px; }
  .zastavka-net { padding: 8px 11px; font-size: 12.5px; }
}

/* ================================================================== */
/*  КАТАЛОГ                                                            */
/*                                                                     */
/*  Отбор на широком экране стоит строкой над сеткой, на узком уезжает */
/*  в лист снизу. Разметка одна и та же — переезжает только положение, */
/*  поэтому два набора полей держать в согласии не приходится.         */
/* ================================================================== */

.katalog {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-8) var(--s-5) var(--s-16);
}

.katalog-shapka { margin-bottom: var(--s-6); }

.katalog-h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-2);
}

.otbor-strochka {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}

/* ---------------- Поле выбора ----------------
   Обычный select: он умеет всё, что от него нужно, — работает с
   клавиатуры, читается голосовыми программами и на телефоне открывается
   родным барабаном. Своя выпадашка не дала бы ничего, кроме отладки. */
.pole {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.pole-podpis {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.pole-vybor {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 0 30px 0 var(--s-3);
  min-height: 40px;
  cursor: pointer;
  appearance: none;
  transition: border-color var(--bystro) var(--krivaya);
}
.pole-vybor:hover { border-color: var(--border-strong); }

/* Галочку рисует сама подпись — треугольником на границах. Картинкой это
   стоило бы отдельного запроса, а фоном из двух полос не получается
   наклона, и выходила одна чёрточка вместо стрелки. */
.pole { position: relative; }
.pole::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 18px;
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5px solid var(--text-3);
  pointer-events: none;
}

.pole-sort { margin-left: auto; }

@media (pointer: coarse) { .pole-vybor { min-height: 44px; } }

.otbor { display: contents; }
.otbor-polya { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.otbor-nizh { display: none; }
.otbor-knopka { display: none; }

.otbor-schyot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
}

.katalog-schyot {
  font-size: var(--fs-caption);
  color: var(--text-3);
  margin-bottom: var(--s-4);
  font-variant-numeric: tabular-nums;
}

.setka-pusto { display: block; }

.katalog-eshchyo {
  display: flex;
  justify-content: center;
  margin-top: var(--s-10);
}

/* ---------------- Лист с отбором на узком экране ---------------- */

@media (max-width: 860px) {
  .otbor-strochka { align-items: center; }
  .otbor-knopka { display: inline-flex; }

  .otbor {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 82vh;
    overflow-y: auto;
    padding: var(--s-6) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));
    background: var(--modal);
    border-top: 1px solid var(--border);
    border-radius: var(--r-4) var(--r-4) 0 0;
    box-shadow: var(--shadow-3);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform var(--medlenno) var(--krivaya), visibility var(--medlenno);
  }

  .otbor-polya { flex-direction: column; gap: var(--s-4); }
  .otbor-polya .pole { width: 100%; }
  .otbor-nizh {
    display: flex;
    gap: var(--s-3);
    justify-content: space-between;
    align-items: center;
  }
  .otbor-nizh .btn-primary { flex: 1 1 auto; }

  body.otbor-otkryt .otbor { transform: translateY(0); visibility: visible; }

  /* Подложка гасит страницу под листом и закрывает его по нажатию мимо. */
  body.otbor-otkryt::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(0, 0, 0, .55);
  }
  body.otbor-otkryt { overflow: hidden; }
}

@media (max-width: 560px) {
  .katalog { padding-inline: var(--s-4); }
  .pole-sort { margin-left: 0; flex: 1 1 auto; }
  .pole-sort .pole-vybor { width: 100%; }
}

/* ================================================================== */
/*  СТРАНИЦА ФИЛЬМА                                                    */
/*                                                                     */
/*  Порядок сверху вниз один и тот же на любой ширине: название,        */
/*  сведения, оценка, описание, «Смотреть». На широком экране постер    */
/*  просто уходит влево — колонки не меняются местами.                 */
/* ================================================================== */

.film {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-5) var(--s-5) var(--s-16);
}

.nazad {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  margin-bottom: var(--s-5);
  border-radius: var(--r-2);
  transition: color var(--bystro) var(--krivaya),
              background-color var(--bystro) var(--krivaya);
}
.nazad:hover { color: var(--text); background: var(--surface-hover); }
.nazad svg { width: 18px; height: 18px; fill: currentColor; }

.film-verh {
  display: grid;
  /* Оба столбца с нулевым минимумом: иначе длинное название или ряд
     «В ролях» задают ширину страницы вместо того, чтобы переноситься. */
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--s-12);
  align-items: start;
  padding-bottom: var(--s-razdel);
}

.film-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--surface-hover);
  border: 1px solid var(--border);
}
.film-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.film-svedeniya { min-width: 0; }

/* Длинные названия без пробелов не должны расширять страницу. */
.film-h1, .film-alt, .film-meta { overflow-wrap: anywhere; }

.film-h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-1);
}

.film-alt {
  color: var(--text-3);
  font-size: var(--fs-small);
  margin-bottom: var(--s-4);
}

/* Строка сведений: год · жанр · длительность · возраст · оценка.
   Моноширинные цифры держат её ровной при любой ширине. */
.film-meta {
  color: var(--text);
  font-size: var(--fs-small);
  margin-bottom: var(--s-2);
}

.film-eshchyo {
  color: var(--text-3);
  font-size: var(--fs-caption);
  margin-bottom: var(--s-6);
}

/* Описание: несколько строк, дальше — «Подробнее». Простыня текста
   отодвинула бы кнопку за нижний край экрана. */
.film-opisanie {
  color: var(--text-2);
  line-height: var(--lh-body);
  max-width: 68ch;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.film-opisanie.razvyornuto {
  display: block;
  overflow: visible;
}
.film-podrobnee { margin-top: var(--s-2); padding-inline: 0; }

.yarlyk + .film-h1 { margin-top: var(--s-3); }

/* ---------------- Оценки ----------------
   Заметны, но не спорят с названием: цифра крупнее подписи, и только. */

.film-deystviya {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-6);
  flex-wrap: wrap;
}

/* Подпись под кнопкой отвечает на вопрос «что сейчас будет»: без неё
   человек не знает, начнётся видео или откроется ещё один экран. */

.film-razdel { margin-top: var(--s-razdel); }
.film-razdel .razdel-h { font-size: var(--fs-h2); font-weight: 700; margin-bottom: var(--s-4); }

.film-opisanie {
  max-width: 72ch;
  color: var(--text-2);
  line-height: var(--lh-body);
}

/* ---------------- Трейлер ---------------- */

.film-treyler {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 760px;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.film-treyler iframe { width: 100%; height: 100%; border: 0; display: block; }

.film-treyler-pusk {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font: inherit;
}
.film-treyler-pusk:hover { background: var(--surface-hover); }

.film-treyler-znak {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.film-treyler-znak svg { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.film-treyler-podpis { font-size: var(--fs-small); color: var(--text-2); max-width: 40ch; text-align: center; }

/* ---------------- В ролях ---------------- */

.sostav {
  display: flex;
  min-width: 0;
  gap: var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--s-5));
  padding-inline: var(--s-5);
  padding-bottom: var(--s-2);
  overscroll-behavior-x: contain;
}
.sostav::-webkit-scrollbar { display: none; }

.sostav-chelovek { flex: 0 0 auto; width: 96px; text-align: center; }

.sostav-foto {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--s-2);
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-3);
}
.sostav-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sostav-imya {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.3;
}
.sostav-rol {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.3;
}

/* ---------------- Узкий экран ----------------
   Постер сверху и уже: во всю ширину телефона он занимал бы полтора
   экрана, и до названия пришлось бы прокручивать. */
@media (max-width: 860px) {
  .film-verh { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .film-poster { max-width: 200px; }
  .film-deystviya .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .film { padding-inline: var(--s-4); }
  .sostav { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
}

/* ================================================================== */
/*  ВЫБОР ИСТОЧНИКА                                                    */
/*                                                                     */
/*  Шаг между «нашёл фильм» и «смотрю». Появляется только тогда, когда */
/*  выбор действительно есть: один источник открывается сам, без       */
/*  экрана с единственной кнопкой.                                     */
/*                                                                     */
/*  Раньше это место собиралось инлайновыми стилями прямо в коде и     */
/*  жило по своим правилам — своя рамка, свой серый, свои размеры.     */
/* ================================================================== */

.istochniki { width: 100%; }

.istochniki-shapka { margin-bottom: var(--s-3); }

.istochniki-zhdyom {
  font-size: var(--fs-small);
  color: var(--text-2);
  padding: var(--s-3) 0;
}

.istochniki-nabor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}

/* Источники стоят списком, а не плиткой: их два-три, и сравнивать их
   удобнее строками — имя слева, состояние справа, всё на одной линии. */
.istochniki-nabor { display: flex; flex-direction: column; gap: 0; }

.istochnik {
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  text-align: left;
  padding: var(--s-4) 0;
  min-height: 56px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: color var(--bystro) var(--krivaya);
}
.istochnik:last-child { border-bottom: 1px solid var(--border); }
.istochnik:hover .istochnik-imya { color: var(--accent-tekst); }

/* Недоступный источник видно, но нажать нельзя: состояние справа само
   говорит почему, и всплывающая подсказка не нужна — на телефоне её нет. */
.istochnik:disabled { opacity: .5; cursor: not-allowed; }
.istochnik:disabled:hover .istochnik-imya { color: var(--text); }

.istochnik-tekst { display: flex; flex-direction: column; min-width: 0; }
.istochnik-imya {
  font-size: var(--fs-body);
  font-weight: 700;
  transition: color var(--bystro) var(--krivaya);
}
.istochnik-podpis {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-3);
  margin-top: 3px;
}

.istochniki-shapka { margin-bottom: var(--s-2); }
.istochniki-zhdyom { padding: var(--s-4) 0; }

/* ---------------- Внутри выбранного источника ---------------- */

/* ================================================================== */
/*  ПОЛОСА ПРОЙДЕННОГО НА КАРТОЧКЕ                                     */
/*                                                                     */
/*  Только у полки «Продолжить». Процент рядом не пишем — полосы       */
/*  достаточно, а число заняло бы место названия.                      */
/* ================================================================== */

.karta-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, .6);
}
.karta-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* ================================================================== */
/*  ПОДВАЛ                                                             */
/*                                                                     */
/*  Две строки ссылок и черта сверху. Прежние «таблетки» со стрелками   */
/*  были украшением: они выделяли два раздела из семи безо всякой      */
/*  причины и занимали больше места, чем весь остальной подвал.        */
/* ================================================================== */

.foot-ryad {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.foot-znak {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--tr-head);
  color: var(--text);
}

.foot-nav {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.foot-nav a {
  font-size: var(--fs-small);
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--bystro) var(--krivaya);
}
.foot-nav a { padding-block: 9px; margin-block: -9px; }
.foot-nav a:hover { color: var(--text); }

.foot-nizh {
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.foot-nizh .foot-nav a { font-size: var(--fs-caption); color: var(--text-3); }

.foot-copy {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-3);
  margin: 0;
}

@media (max-width: 640px) {
  .foot-ryad { padding-inline: var(--s-4); flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .foot-nav { gap: var(--s-4); }
}

/* ================================================================== */
/*  ПАНЕЛЬ ПРОСМОТРА                                                   */
/*                                                                     */
/*  Один контейнер: постер слева, справа название, источник и кнопка.  */
/*  Прежде здесь была карточка внутри карточки — внешняя рамка вокруг  */
/*  фильма и внутренняя вокруг настроек; человек читал два блока       */
/*  вместо одного и искал, где же кнопка.                              */
/*                                                                     */
/*  Всё, что можно решить за него, решено: единственный источник       */
/*  выбирается сам, поле с одним вариантом не показывается, озвучка и  */
/*  качество лежат под «Настройками».                                  */
/* ================================================================== */

.pick {
  max-width: 820px;
  margin-inline: auto;
  padding: var(--s-6) 0 0;
}

/* Возврат — обычной строкой слева сверху, а не значком в углу: значок в
   правом верхнем читался как «закрыть», а это шаг назад к поиску. */
.pick-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-2);
  background: none;
  border: 0;
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  margin-bottom: var(--s-5);
  cursor: pointer;
  border-radius: var(--r-2);
  transition: color var(--bystro) var(--krivaya);
}
.pick-back:hover { color: var(--text); }
.pick-back svg { width: 18px; height: 18px; fill: currentColor; }

/* Сетка на два столбца и две строки. Постер занимает обе строки слева,
   справа сверху сведения, справа снизу действия. */
.pick-verh {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-areas:
    "poster svedeniya"
    "poster deystviya";
  grid-template-rows: auto 1fr;
  column-gap: var(--s-8);
  row-gap: var(--s-6);
  align-items: start;
}
.pick-poster-ramka { grid-area: poster; }
.pick-body { grid-area: svedeniya; }
.pick-deystviya { grid-area: deystviya; min-width: 0; }

.pick-poster-ramka {
  aspect-ratio: 2 / 3;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface-hover);
  border: 1px solid var(--border);
}
.pick-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Пустой src показал бы значок сломанной картинки — прячем сам элемент,
   рамка с подложкой остаётся и место не прыгает. */
.pick-poster:not([src]),
.pick-poster[src=""] { display: none; }

.pick-body { min-width: 0; }

.pick-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--tr-head);
  line-height: var(--lh-head);
  margin: var(--s-2) 0 var(--s-2);
}

.pick-meta {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin-bottom: var(--s-8);
}

/* ---------------- Источник ----------------
   Между сведениями о фильме и источником — воздух, между источником и
   кнопкой — почти нет: они об одном действии. */
.pick-istochnik { margin-bottom: var(--s-4); }

.pick-istochnik-ryad {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

.pick-istochnik-imya {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.pick-drugoy { margin-left: auto; }

.pick-sources { display: block; }

/* Поля, которые остались на виду, — сезон и серия. */
.istochnik-polya {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.istochnik-polya .pole { min-width: 150px; flex: 1 1 150px; }

.istochnik-pusk {
  width: 100%;
  max-width: 260px;
  margin-bottom: var(--s-4);
}

/* ---------------- Настройки ----------------
   Свёрнуты по умолчанию. Тому, кому ничего менять не надо, они не
   мешают; тому, кому надо, — одно нажатие. */
.nastroyki { border-top: 1px solid var(--border); padding-top: var(--s-3); }

.nastroyki-shapka {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-2);
  padding: var(--s-2) 0;
  user-select: none;
}
.nastroyki-shapka::-webkit-details-marker { display: none; }
.nastroyki-shapka:hover { color: var(--text); }
/* Галочка поворачивается при раскрытии — единственное движение здесь. */
.nastroyki-shapka::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--srednee) var(--krivaya);
}
.nastroyki[open] .nastroyki-shapka::after { transform: rotate(180deg); }

.nastroyki-telo {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) 0 var(--s-4);
}
.nastroyki-telo .pole { min-width: 180px; flex: 1 1 180px; }

/* ---------------- Другой путь ----------------
   Тот же фильм на ютубе. Кнопкой наравне со «Смотреть» он спорил за
   главное действие — теперь это ссылка. */
.pick-inache {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
/* Ссылка выравнивается по левому краю панели, как и всё остальное:
   у .link-btn есть внутренние поля, из-за которых она вставала по центру. */
.pick-inache .link-btn { margin: 0; padding-inline: 0; }

@media (max-width: 640px) {
  /* Действия уходят под постер во всю ширину: в колонке шириной с ладонь
     кнопка и «Настройки» переносились по словам и читались криво. */
  .pick-verh {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      "poster svedeniya"
      "deystviya deystviya";
    column-gap: var(--s-4);
    row-gap: var(--s-5);
  }
  .pick-title { font-size: var(--fs-h2); }
  .istochnik-pusk { max-width: none; }
  .istochnik-polya .pole,
  .nastroyki-telo .pole { flex-basis: 100%; }
}

/* Верхняя полоса светлее (в тёмной теме — темнее) остальной страницы и
   тянется во всю ширину окна. Это то же деление на полосы, что и черта
   между разделами, только заливкой.

   ВАЖНО: приём работает лишь тогда, когда сам блок центрирован в окне.
   Стоит задать ему max-width без auto-полей — и полоса уедет вбок на
   разницу центров. Поэтому у .nachalo ширину ограничивает содержимое,
   а не он сам. */
/* ---------------- Зрители по краям ----------------
   Полноширинная обёртка: сами картинки стоят у краёв окна, а не колонки.
   Тот же приём, что у полосы, — ширина от окна, центр от блока. */
.zriteli {
  position: absolute;
  inset: calc(-1 * var(--shapka-h)) 0 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* Позади содержимого, но поверх полосы: у обоих отрицательный слой, а
     порядок решает очерёдность — псевдоэлемент рисуется первым. */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Вырезка одна на обе темы — чистая, без светлой каймы по контуру.
   Прежняя оставляла по краю почти белые полупрозрачные пиксели: на
   кремовой бумаге их не видно, а на тёмной полосе они читались как
   свечение вокруг фигур. Лечится не стилями, а самой картинкой. */
.zritel {
  position: absolute;
  bottom: 0;
  display: block;
  width: clamp(190px, 21vw, 330px);
  /* Мягкая тень идёт по контуру вырезки, а не по прямоугольнику: это
     drop-shadow, а не box-shadow. Цвет и плотность — от темы: тёплая
     коричневая на почти чёрной полосе не читается вовсе. */
  filter: drop-shadow(var(--zritel-ten));
}

.zritel img { width: 100%; height: auto; display: block; }
.zritel > source { display: none; }

.zritel-levo  { left: max(0px, calc(50% - 640px)); }
.zritel-pravo { right: max(0px, calc(50% - 640px)); }

/* На узком экране места по краям нет — зрители ушли бы под текст. */
@media (max-width: 1080px) {
  .zriteli { display: none; }
}

/* ---------------- Украшение у полок ----------------
   Три киношные сборки: билет с бобиной, хлопушка с попкорном и проектор.
   Чистое украшение — ничего не сообщают и ничего не ловят, отсюда
   aria-hidden и pointer-events: none.

   Каждая стоит у **своей** полки: 01 у «Популярного», 02 у «Новинок»,
   03 у «Лучших оценок» — номер на сборке совпадает с номером раздела.
   Раньше они висели на долях высоты блока (34 %, низ) и уезжали к чужим
   полкам, как только менялся их состав. Теперь коробка лежит внутри
   самой полки: спрячется полка — уйдёт и сборка, следить отдельно не
   нужно.

   Обёртка во всю ширину окна и без высоты: место в потоке она не
   занимает, картинка висит поверх неё. Слой отрицательный, поэтому
   карточки идут сверху сами, без z-index на каждой.

   Вылет за край окна срезает .page с overflow-x: clip — своего
   обрезания обёртке не нужно, иначе она обрубила бы картинку и сверху.

   Только WebP, без запасного PNG: тот весил бы под мегабайт ради
   браузеров старше 2020 года, а не загрузившееся украшение здесь ничего
   не ломает. */
.dekor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 0;
  z-index: -1;
  pointer-events: none;
}

/* Размер задаёт **только высота**, ширина считается от неё сама.

   Потолка ширины здесь быть не должно: у картинки задана высота, и
   max-width не уменьшает её следом — он просто сжимает кадр по
   горизонтали, и сборка выглядит вытянутой. Ровно на этом я и
   споткнулся, поставив 20vw. object-fit оставлен страховкой: даже если
   коробка когда-нибудь окажется другой формы, пропорции не поедут. */
.dekor-kray {
  position: absolute;
  height: clamp(400px, 46vw, 680px);
  width: auto;
  object-fit: contain;
  opacity: var(--dekor-plotnost);
  /* Парение — только сдвигом: это работа видеокарты, страница при нём не
     пересчитывается. Половина роста в самом сдвиге, а не отдельным
     правилом: transform у элемента один, и центровка с движением живут
     в одном значении. Длительности разные нарочно — с одинаковой все
     три ходили бы строем. */
  animation: parenie 13s ease-in-out infinite alternate;
}

/* Сдвиг от края внутрь — два процента ширины окна. Считается от вылета
   в 70 точек: на 1440 это −41, то есть сборка чуть выходит за край и
   продолжается за экраном, но не прячется там целиком, как раньше при
   −70. Проценты, а не точки: на широком экране сдвиг больше. */
.dekor-levo  { left: calc(2vw - 70px); }
.dekor-pravo { right: calc(2vw - 70px); animation-duration: 17s; animation-delay: -5s; }

/* Длительности у всех пяти разные: с одинаковой они ходили бы строем, и
   вместо «парят» читалось бы «дёргается вся страница разом». */
.dekor-03 { animation-duration: 21s; animation-delay: -11s; }
.dekor-04 { animation-duration: 15s; animation-delay: -3s; }
.dekor-05 { animation-duration: 19s; animation-delay: -8s; }

@keyframes parenie {
  from { transform: translate3d(0, calc(-50% + 10px), 0); }
  to   { transform: translate3d(0, calc(-50% - 18px), 0); }
}

/* Ниже 1100 точек колонка занимает всю ширину, и от украшения остались бы
   обрывки между постерами. Лучше ничего, чем клочья. */
@media (max-width: 1100px) {
  .dekor { display: none; }
}

.nachalo::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--shapka-h)) 0 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--bg-hero);
  z-index: -1;
  pointer-events: none;
}

/* ================================================================== */
/*  СТРАНИЦА ПРОСМОТРА НА ТЕЛЕФОНЕ                                     */
/*                                                                     */
/*  Ширины 320–560 не вмещают строку управления целиком: семь кнопок   */
/*  по 44 точки — это уже 316, и на время с состоянием места не        */
/*  остаётся. Поэтому они не выбрасываются, а поднимаются отдельной    */
/*  тонкой строкой над полосой прокрутки: слева состояние просмотра,   */
/*  справа время. Кнопки внизу остаются крупными — по ним попадают     */
/*  пальцем, а не курсором.                                            */
/* ================================================================== */

@media (max-width: 720px) {
  .ctrl { width: 44px; height: 44px; }
  .ctrl-glavnaya { width: 52px; height: 52px; }
  .ctrl .icon { width: 23px; height: 23px; }
  .ctrl-glavnaya .icon { width: 28px; height: 28px; }
  .pult-ryad .ctrl { width: 44px; height: 44px; }

  /* Громкость на телефоне меняют кнопками устройства, ползунок в строке
     только отнимает место. Кнопка «звук» остаётся — ею глушат. */
  .volume .vol-range,
  .volume .vol-value { display: none; }
}

@media (max-width: 560px) {
  .controls { padding: var(--s-2) var(--s-4) var(--s-3); }
  .controls-row { gap: 0; justify-content: space-between; margin-top: 2px; }
  .spacer { display: none; }

  /* Тонкая строка сведений над полосой. .controls стоит absolute, и
     отсчёт у этих двух идёт от неё. */
  .seek { padding-top: 24px; }
  .time {
    position: absolute;
    top: 5px; right: var(--s-4);
    margin: 0;
    font-size: 12px;
  }
  .sync-badge {
    position: absolute;
    top: 4px; left: var(--s-4);
    margin: 0;
  }
  .rate-badge { position: absolute; top: 4px; left: 148px; margin: 0; }

  /* Всплывающее окно у самого края экрана не помещается — разворачиваем
     его листом во всю ширину. */
  .pult-menyu {
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-width: 0;
  }
  .pult-ryad { padding: 4px var(--s-3) 4px 4px; font-size: var(--fs-body); }
  .pult-ryad .zoom-range { width: 100px; }
}

/* Ниже 360 точек семь кнопок по 44 в строку не помещаются: на них уходит
   308 при 304 доступных. Убираем кнопку звука — на телефоне громкость
   меняют клавишами устройства, а у перемотки на десять секунд замены
   нет. На 375 и шире остаётся всё. */
@media (max-width: 360px) {
  .volume { display: none; }
}

/* На 375 семь кнопок по 44 занимают 308 при 303 доступных — не хватает
   пяти точек. Отдаём их полями панели, а не размером кнопок: палец важнее
   отступа. */
@media (max-width: 400px) {
  .controls { padding-left: 4px; padding-right: 4px; }
  .time { right: 8px; }
  .sync-badge { left: 8px; }
}

/* Настройки на телефоне разворачиваются во всю ширину плеера: при 380
   точках справа оставалась пустая полоса, а ряд скорости жался. Высоту
   ограничивает сам кадр — панель лежит внутри него, — поэтому при
   коротком видео она прокручивается. */
@media (max-width: 560px) {
  .menu {
    left: 8px;
    right: 8px;
    bottom: 60px;
    width: auto;
    max-width: none;
    max-height: calc(100% - 68px);
  }
}

/* ---------------- Подвал на телефоне ----------------
   Ссылки переносились по две строки в каждом ряду: пять пунктов при
   кегле 13,5 и полях по шесть точек требуют 431 при 343 доступных.

   Ставим их в одну строку. Место набираем не одним рычагом, а тремя
   сразу — кегль, промежуток и боковые поля, — иначе пришлось бы уводить
   шрифт до нечитаемого. Вертикальные поля не трогаем: это площадь
   нажатия, её резать нельзя.

   Ниже 360 точек строка всё равно не помещается ни при каком разумном
   кегле, поэтому ряд прокручивается вбок. Полосу прокрутки прячем:
   ряд короткий, о ней и так догадаются по обрезанному краю. */
@media (max-width: 620px) {
  .foot-nav {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Занимаем строку целиком и от неё же считаем ширину. На одном
       min-width: 0 полагаться нельзя: ряд подвала переносится, и полоса
       ссылок оставалась шириной по содержимому — 339 при 288 доступных,
       страница уезжала вбок на 34 точки. */
    flex: 1 1 100%;
    /* Жёсткий потолок ширины, а не только min-width: гибкая раскладка
       здесь всё равно оставляла полосе ширину по содержимому. */
    max-width: 100%;
    min-width: 0;
    scrollbar-width: none;
  }
  .foot-nav::-webkit-scrollbar { display: none; }
  .foot-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 3px;
    font-size: 12.5px;
  }
  .foot-nizh .foot-nav a { font-size: 11.5px; }
}