/* Кинозал: полки и экран просмотра.
   Дизайн-язык платформы (тёмный premium glass, Unbounded + Manrope, токены
   тем). Движение по закону: transform и opacity, ничего не прыгает само —
   бежит только транскрипция, и только за голосом. */

.cin-page{min-height:100vh;background:var(--bg-1,#101511);padding:clamp(20px,4vw,44px) clamp(16px,5vw,56px) 80px}
.cin-top{display:flex;gap:18px;align-items:flex-start;max-width:1180px;margin:0 auto 26px}
.cin-top.slim{margin-bottom:16px}
.cin-back{
  flex:none;display:grid;place-items:center;width:44px;height:44px;margin-top:4px;
  border-radius:14px;color:var(--ink-dim);background:var(--shell);
  box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.cin-back:hover{color:var(--ink);background:var(--gold-soft)}
.cin-back:active{transform:scale(.94)}
.cin-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cin-back svg{width:20px;height:20px}
.cin-title{font-family:var(--font-d);font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:600;color:var(--ink);margin:0 0 8px}
.cin-title.sm{font-size:clamp(1.125rem,2.4vw,1.5rem);margin-bottom:4px}
.cin-line{max-width:62ch;color:var(--ink-dim);font-size:.9688rem;line-height:1.55;margin:0}
.cin-line.sm{font-size:.8438rem}
.cin-note{max-width:1180px;margin:30px auto 0;color:var(--ink-faint);font-size:.8125rem;line-height:1.55}
/* дверь в соседний раздел: одна строка над полками, ссылка настоящая */
.cin-door{margin:0 auto 18px;color:var(--ink-dim)}
.cin-door a{color:var(--gold);font-weight:700;text-decoration:none;box-shadow:inset 0 -1px 0 0 color-mix(in oklab,var(--gold) 45%,transparent)}
.cin-door a:hover{box-shadow:inset 0 -1px 0 0 var(--gold)}
.cin-door a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── полка ─────────────────────────────────────────────────────── */
.cin-shelf{max-width:1180px;margin:0 auto 30px}
.cin-shelf h2{font-family:var(--font-d);font-size:1.0938rem;font-weight:600;color:var(--ink);margin:0 0 4px}
.sh-right{display:flex;gap:10px;align-items:center;flex:none}
.sh-count{font-family:var(--font-t);font-size:.75rem;font-weight:800;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.cin-shelf .sh-line{color:var(--ink-dim);font-size:.8438rem;margin:0 0 4px;max-width:66ch}
/* плашка честности полки: текст живёт в rights.json, здесь только вид */
.sh-banner{margin:2px 0 0;color:var(--ink-faint);font-size:.7813rem;line-height:1.5;max-width:70ch}
.sh-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin:0 0 12px}
.sh-titles{min-width:0}
.sh-empty{margin:0;color:var(--ink-dim);font-size:.875rem;line-height:1.55;max-width:62ch}
.sh-again{
  margin-top:10px;min-height:44px;padding:0 16px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 32%,transparent);
  transition:box-shadow .18s var(--ease);
}
.sh-again:hover{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 55%,transparent)}
.sh-again:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* точки прокрутки полки: зона 44 на 44, меньше пальца не бывает */
.sh-nav{display:flex;gap:8px;flex:none}
.sh-nav[hidden]{display:none}
.sh-arrow{
  display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;
  border:0;border-radius:14px;cursor:pointer;font-size:1.25rem;line-height:1;
  color:var(--ink-dim);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .18s var(--ease),background .18s var(--ease);
}
.sh-arrow:hover{color:var(--ink)}
.sh-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sh-arrow:disabled{cursor:default;opacity:.4}
/* Полка едет вбок. Вертикальные отступы обязательны: без них подъём
   карточки на 4 пикселя обрезался бы своим же скроллером. */
.cin-row{
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:8px 2px 10px;margin:-8px -2px -10px;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.cin-row>*{flex:0 0 232px;scroll-snap-align:start}
@media (max-width:640px){.cin-row>*{flex:0 0 74vw}}
/* скелет полок: держит высоту до прихода каталога, лечит CLS 0.24.
   Не мигает: пульс жил 1.4 секунды, а в зале нет анимаций длиннее 600 мс.
   Убери его совсем, и смысл не потеряется, значит это был шум. */
.cin-skel .cs-h{width:180px;height:22px;margin:0 0 12px;border-radius:8px;background:var(--shell)}
.cin-skel .cs-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:0 0 30px}
.cin-skel .cs-row i{display:block;height:292px;border-radius:18px;background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);opacity:.6}
.cin-skel-word{max-width:1180px;margin:0 auto 20px;color:var(--ink-dim);font-size:.875rem}
/* честное состояние страницы: сети нет, каталог не прочитался */
.cin-state{
  max-width:1180px;margin:0 auto 18px;padding:12px 14px;border-radius:14px;
  color:var(--ink);font-size:.9063rem;line-height:1.55;
  background:var(--core);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 26%,var(--shell-line));
}
.cin-state[hidden]{display:none}
/* «Скоро»: список без кнопок */
.cin-soon{max-width:1180px;margin:34px auto 0}
.cin-soon[hidden]{display:none}
.cin-soon h2{font-family:var(--font-d);font-size:1.0938rem;font-weight:600;color:var(--ink);margin:0 0 4px}
.cin-soon .sh-banner{margin:0 0 12px}

.cin-card{
  position:relative;overflow:hidden;text-align:left;border:0;cursor:default;
  border-radius:18px;padding:0;min-height:172px;display:flex;flex-direction:column;
  background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line),var(--inner-light);
  color:var(--ink);font-family:var(--font-t);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
a.cin-card{cursor:pointer;text-decoration:none}
/* наведение: подъём на 4 пикселя, обложка чуть крупнее ВНУТРИ рамки */
a.cin-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 45%,transparent),0 18px 40px -22px color-mix(in oklab,var(--gold) 50%,transparent)}
a.cin-card:hover .cc-poster{transform:scale(1.05)}
a.cin-card:active{transform:translateY(-2px) scale(.99)}
a.cin-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* «афиша»: тёплый луч на чернильном фоне, у неготовых приглушён */
.cc-poster{
  height:84px;flex:none;position:relative;overflow:hidden;
  transform-origin:center 30%;
  transition:transform .18s var(--ease);
  background:
    radial-gradient(130% 150% at 82% 120%, oklch(46% .11 var(--ph,80)) 0%, transparent 62%),
    radial-gradient(120% 130% at 50% 118%, color-mix(in oklab,var(--gold) 22%,transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in oklab,var(--ink) 6%,transparent), transparent 70%),
    var(--bg-2,#151b16);
}
/* инициалы фильма: крупная типографика вместо пустоты */
.cc-mark{
  position:absolute;right:10px;bottom:-14px;margin:0;
  font-family:var(--font-d);font-weight:700;font-size:64px;line-height:1;
  color:oklch(80% .09 var(--ph,80) / .3);letter-spacing:-.03em;user-select:none;
}
.cin-card.off .cc-poster{filter:saturate(.35) brightness(.8)}
.cc-year{
  position:absolute;left:12px;top:10px;
  font-family:var(--font-d);font-size:.6875rem;font-weight:700;color:var(--gold);
  letter-spacing:.06em;
}
.cc-badge{
  position:absolute;right:10px;top:10px;font-size:.6875rem;font-weight:700;
  padding:3px 8px;border-radius:99px;
  color:var(--mint);background:color-mix(in oklab,var(--mint) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 35%,transparent);
}
.cc-badge.wait{color:var(--ink-dim);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line)}
/* превью официального ролика: если хост не отдал картинку, остаётся
   типографский постер, битого квадрата не бывает */
.cc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc-poster.prem::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(8,10,9,.6))}
.cc-poster.prem .cc-year,.cc-poster.prem .cc-badge{z-index:2}
/* пришла настоящая обложка: типографские инициалы больше не нужны,
   они лезли поверх лиц. Не пришла, они снова видны */
.cc-poster.prem .cc-mark{display:none}
/* своя обложка трейлера (наряд 5 §1.4): тон по id, монограмма видна, кадра YouTube нет */
.cc-poster.prem.own{background-image:linear-gradient(160deg,hsl(var(--ph,200) 45% 22%),hsl(calc(var(--ph,200) + 40) 55% 12%))}
.cc-poster.prem.own .cc-mark{display:block}
.cv-thumb.own{display:grid;place-items:center;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));color:var(--ink-dim,#b9bcc8);font-weight:800;font-size:1.25rem}
/* год поверх живой картинки читается только на подложке: без неё
   «ноябрь 2025» ложился на светлое небо трейлера */
.cc-poster.prem .cc-year{padding:3px 8px;border-radius:99px;background:rgba(8,10,9,.62)}
.cc-chip.path{color:var(--gold)}
.cc-body{padding:12px 14px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.cc-body h3{font-family:var(--font-d);font-size:.9375rem;font-weight:600;margin:0;line-height:1.3}
.cc-ru{color:var(--ink-dim);font-size:.7813rem;margin:0}
.cc-note{color:var(--ink-dim);font-size:.7813rem;line-height:1.45;margin:2px 0 0}
.cc-meta{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;padding-top:8px}
.cc-chip{font-size:.6875rem;font-weight:700;padding:3px 8px;border-radius:99px;color:var(--ink-dim);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line)}
.cc-chip.go{color:var(--gold)}

/* ── экран просмотра ───────────────────────────────────────────── */
.w-grid{max-width:1180px;margin:0 auto;display:grid;gap:18px;grid-template-columns:minmax(0,7fr) minmax(280px,3fr)}
@media (max-width:920px){.w-grid{grid-template-columns:1fr}}
.w-screen{
  border-radius:18px;overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px var(--shell-line),0 30px 70px -34px rgba(0,0,0,.8);
}
.w-screen video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.w-draft{
  margin:10px 2px 0;color:var(--gold);font-size:.8125rem;line-height:1.5;
  padding:10px 12px;border-radius:12px;background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent);
}
.w-chapters{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.w-ch{
  border:0;cursor:pointer;font-family:var(--font-t);font-weight:700;font-size:.7813rem;
  padding:8px 12px;border-radius:12px;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.w-ch:hover{color:var(--ink)}
.w-ch:active{transform:scale(.95)}
.w-ch:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.w-ch.now{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent)}

.w-right{display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 180px);position:sticky;top:16px}
@media (max-width:920px){.w-right{max-height:44vh;position:static}}
.w-lines{
  flex:1;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
  border-radius:18px;padding:14px;
  background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);
  mask-image:linear-gradient(transparent 0,#000 22px,#000 calc(100% - 26px),transparent);
}
@media (prefers-reduced-motion:reduce){.w-lines{scroll-behavior:auto}}
.w-l{
  margin:0 0 8px;padding:7px 9px;border-radius:12px;cursor:pointer;
  color:var(--ink-dim);font-size:.9063rem;line-height:1.55;font-weight:600;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.w-l:hover{background:var(--shell)}
.w-l:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.w-l .t{font-variant-numeric:tabular-nums;color:var(--ink-faint);font-size:.7188rem;font-weight:800;margin-right:8px}
.w-l.now{color:var(--ink);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 26%,transparent)}
.w-l.now .t{color:var(--gold)}
.w-w{border-radius:7px;padding:0 2px;transition:background .2s var(--ease),color .2s var(--ease)}
.w-w:hover{background:var(--shell);color:var(--ink)}
.w-w.saved{color:var(--mint)}
.w-hint{color:var(--ink-faint);font-size:.7813rem;line-height:1.5;margin:10px 4px 0}

.w-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,8px);
  padding:10px 16px;border-radius:14px;z-index:950;
  color:var(--mint);font-weight:700;font-size:.875rem;
  background:var(--core);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 30%,transparent),0 18px 40px -18px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.w-toast.on{opacity:1;transform:translate(-50%,0)}

/* вкладок залов больше нет: зал это одна страница из восьми полок */
.cin-empty{color:var(--ink-dim);font-size:.9375rem;line-height:1.6;max-width:52ch}

/* ── выбор режима при входе ── */
/* Закон [hidden]: класс с display:grid перебивал атрибут hidden, и невидимая
   пелена выбора режима лежала поверх всей витрины: кнопка «назад в дом» и
   карточки не нажимались настоящим тапом (робот кнопок, 2026-08-30). */
.cin-mode-veil[hidden]{display:none}
.cin-mode-veil{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:18px;
  background:rgba(8,10,9,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cin-mode{width:min(94vw,640px);border-radius:24px;padding:24px;
  background:color-mix(in oklab,var(--bg-2,#151b16) 94%,var(--ink) 2%);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--ink) 14%,transparent),0 40px 90px -40px rgba(0,0,0,.8)}
.cin-mode h2{font-family:var(--font-d);font-size:1.375rem;font-weight:600;margin:0 0 6px;color:var(--ink)}
.cin-mode p{color:var(--ink-dim);font-size:.875rem;margin:0 0 16px}
.cin-mode-cards{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.cm-card{display:flex;flex-direction:column;gap:8px;text-align:left;padding:18px 16px;border:0;border-radius:18px;cursor:pointer;
  color:var(--ink);background:var(--core);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 26%,var(--shell-line));
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cm-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--gold) 55%,transparent)}
.cm-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cm-card b{font-family:var(--font-d);font-weight:600;font-size:1.0625rem}
.cm-card span{color:var(--ink-dim);font-size:.8438rem;line-height:1.5}
/* строка-действие: карточка читается кнопкой, а не абзацем */
.cm-card::after{content:"выбрать →";margin-top:4px;font-size:.8125rem;font-weight:800;color:var(--gold)}
.cm-card:hover::after{text-decoration:underline}
@media (max-width:640px){.cin-mode-cards{grid-template-columns:1fr}}

/* ── режим «Учусь» в плеере ── */
.w-mode{display:flex;gap:6px;align-items:center;min-height:40px;padding:0 14px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent)}
.w-mode:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.w-quiz-veil{position:fixed;inset:0;z-index:920;display:grid;place-items:center;padding:18px;
  background:rgba(8,10,9,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.w-quiz{width:min(94vw,560px);max-height:86vh;overflow-y:auto;border-radius:22px;padding:22px;
  background:color-mix(in oklab,var(--bg-2,#151b16) 94%,var(--ink) 2%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.w-quiz h3{font-family:var(--font-d);font-size:1.125rem;font-weight:600;margin:0 0 4px;color:var(--ink)}
.w-quiz .wq-sub{color:var(--ink-dim);font-size:.8125rem;margin:0 0 14px}
.w-quiz .wq-q{font-size:1rem;line-height:1.5;margin:0 0 12px;color:var(--ink)}
.wq-opts{display:grid;gap:8px}
.wq-opt{text-align:left;padding:12px 14px;border:0;border-radius:14px;cursor:pointer;font-family:var(--font-t);
  font-size:.9375rem;color:var(--ink);background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:background .2s var(--ease)}
.wq-opt:hover{background:var(--gold-soft)}
.wq-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wq-opt.good{color:var(--mint);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 45%,transparent)}
.wq-opt.bad{color:#e07a72;box-shadow:inset 0 0 0 1px color-mix(in oklab,#e07a72 45%,transparent)}
.wq-word{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent);font-size:.9375rem}
.wq-word b{color:var(--gold)}
.wq-word button{margin-left:10px;min-height:34px;padding:0 12px;border:0;border-radius:99px;cursor:pointer;
  font-weight:700;font-size:.8125rem;color:var(--gold);background:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 40%,transparent)}
.wq-go{margin-top:16px;width:100%;min-height:48px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-t);font-weight:800;font-size:.9375rem;color:var(--bg-1,#101511);background:var(--gold)}
.wq-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wq-score{color:var(--ink-dim);font-size:.875rem;margin-top:10px}

/* премьеры: постер из превью трейлера */
.cc-poster.prem{background-size:cover;background-position:center}
.cc-poster.prem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,10,9,.55))}

/* перевод реплики: тихая строка, видна у активной и на hover */
.w-l .w-ru{display:block;color:var(--ink-dim);font-size:.7813rem;line-height:1.4;margin-top:1px;opacity:0;transition:opacity .25s var(--ease)}
.w-l:hover .w-ru,.w-l.now .w-ru{opacity:.9}
/* Пальцем наведения не существует: на телефоне перевод при opacity:0 не видно
   НИКОГДА, и вся работа переводчика оставалась за кадром (находка критика 16.08).
   Там, где мыши нет, перевод виден всегда и просто тише английской строки. */
@media (hover: none){
  .w-l .w-ru{opacity:.72}
  .w-l.now .w-ru{opacity:.95}
}

/* ── колода слов фильма ─────────────────────────────────────────
   Кнопка стоит между экраном и чаптерами и существует только у фильма
   с карточками. Сама колода живёт на том же веиле, что и вопросы. */
.w-deckbtn{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  width:100%;margin:12px 0 0;padding:12px 16px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-t);color:var(--ink);
  background:var(--core);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,var(--shell-line));
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.w-deckbtn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 55%,transparent)}
.w-deckbtn:active{transform:scale(.99)}
.w-deckbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.w-deckbtn b{font-family:var(--font-d);font-weight:600;font-size:.9688rem;color:var(--gold)}
.w-deckbtn span{color:var(--ink-dim);font-size:.7813rem}

.w-deck{
  width:min(94vw,560px);max-height:86vh;overflow-y:auto;border-radius:22px;padding:22px;
  background:color-mix(in oklab,var(--bg-2,#151b16) 94%,var(--ink) 2%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.wd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.w-deck h3{font-family:var(--font-d);font-size:1.125rem;font-weight:600;margin:0 0 2px;color:var(--ink)}
.wd-sub{color:var(--ink-dim);font-size:.8125rem;margin:0 0 12px}
.wd-close{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;
  font-size:.9375rem;color:var(--ink-dim);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .25s var(--ease);
}
.wd-close:hover{color:var(--ink)}
.wd-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* честная пометка про озвучку: одна на колоду, не на каждой карточке */
.wd-audio-note{
  margin:0 0 12px;padding:9px 12px;border-radius:12px;
  color:var(--ink-dim);font-size:.7813rem;line-height:1.5;
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
}
.wd-card{border-radius:16px;padding:18px 16px;background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line)}
.wd-word{font-family:var(--font-d);font-size:clamp(1.375rem,4vw,1.75rem);font-weight:600;line-height:1.25;color:var(--ink);margin:0 0 10px}
.wd-quote{margin:0;color:var(--ink-dim);font-size:.9063rem;line-height:1.55}
.wd-t{display:inline-block;margin-right:8px;font-variant-numeric:tabular-nums;font-size:.7188rem;font-weight:800;color:var(--gold)}
.wd-flip{
  margin-top:12px;min-height:38px;padding:0 14px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent);
}
.wd-flip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wd-ru{margin:12px 0 0;color:var(--mint);font-size:.9375rem;line-height:1.5}
.wd-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.wd-actions button{
  min-height:40px;padding:0 14px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.wd-actions button:hover{color:var(--ink)}
.wd-actions button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wd-actions .wd-play{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent)}
.wd-actions button:disabled{cursor:default;color:var(--mint)}
.wd-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.wd-nav button{
  display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;cursor:pointer;
  font-size:1.25rem;line-height:1;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.wd-nav button:hover{color:var(--ink)}
.wd-nav button:active{transform:scale(.94)}
.wd-nav button:disabled{opacity:.4;cursor:default;transform:none}
.wd-nav button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wd-count{min-width:64px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;font-size:.8125rem;color:var(--ink-dim)}
.wd-grab{
  margin-top:14px;width:100%;min-height:48px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-t);font-weight:800;font-size:.9375rem;
  color:var(--bg-1,#101511);background:var(--gold);
}
.wd-grab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wd-grab:disabled{cursor:default;color:var(--mint);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line)}

/* ── плашка разбора: заметка на полях, не чекпоинт ──────────────
   Живёт над транскрипцией, появляется дыханием платформы (opacity и
   transform) и фильм не останавливает. Свёрнута до цитаты, тап
   раскрывает. */
.w-notes{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.w-notes:empty{margin:0}
.w-note{
  border-radius:14px;background:var(--core);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 26%,var(--shell-line));
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.w-note.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.w-note{transform:none;transition:opacity .4s var(--ease)}}
.wn-row{display:flex;align-items:stretch}
.wn-head{
  flex:1;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;text-align:left;
  border:0;cursor:pointer;padding:10px 4px 10px 12px;background:transparent;
  font-family:var(--font-t);font-size:.8438rem;line-height:1.45;color:var(--ink);
}
.wn-head:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:12px}
.wn-t{font-variant-numeric:tabular-nums;font-weight:800;font-size:.7188rem;color:var(--gold)}
.wn-q{font-weight:600}
.wn-more{font-size:.75rem;font-weight:800;color:var(--gold)}
.w-note.open .wn-more{color:var(--ink-faint)}
.wn-x{flex:none;width:36px;border:0;cursor:pointer;background:transparent;color:var(--ink-faint);font-size:.875rem;transition:color .25s var(--ease)}
.wn-x:hover{color:var(--ink)}
.wn-x:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:10px}
.wn-body{margin:0;padding:0 12px 12px;color:var(--ink-dim);font-size:.8438rem;line-height:1.55}

/* ── плашка честности: тихая, но на виду, между шапкой и поиском ── */
.cin-honesty{
  max-width:1180px;margin:0 auto 16px;padding:12px 14px;border-radius:14px;
  color:var(--ink-dim);font-size:.8438rem;line-height:1.55;
  background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 25%,transparent);
}

/* ── поиск и фильтры ── */
.cin-find{max-width:1180px;margin:0 auto 18px;position:relative}
.cf-row{display:flex;gap:10px;flex-wrap:wrap}
#cinQ{
  flex:1;min-width:220px;min-height:48px;padding:0 16px;border:0;border-radius:14px;
  font-family:var(--font-t);font-size:1rem;font-weight:600;color:var(--ink);
  background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);
}
#cinQ::placeholder{color:var(--ink-faint)}
#cinQ:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* подсказки: панель под строкой, поверх полок */
.cf-sug{
  position:absolute;left:0;right:0;top:54px;z-index:60;
  display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:16px;
  background:color-mix(in oklab,var(--bg-2,#151b16) 96%,var(--ink) 2%);
  box-shadow:inset 0 0 0 1px var(--shell-line),0 26px 60px -26px rgba(0,0,0,.8);
}
.cf-sug-none{margin:4px 8px;color:var(--ink-dim);font-size:.8438rem}
.cf-opt{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;text-align:left;
  border:0;cursor:pointer;min-height:44px;padding:10px 12px;border-radius:12px;
  font-family:var(--font-t);color:var(--ink);background:transparent;
  transition:background .2s var(--ease);
}
.cf-opt:hover,.cf-opt.on{background:var(--gold-soft)}
.cf-opt:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.cf-opt b{font-weight:700;font-size:.9375rem}
.cf-opt-en{color:var(--ink-dim);font-size:.7813rem}
.cf-opt-draft{margin-left:auto;color:var(--gold);font-size:.6875rem;font-weight:700}

/* шторка фильтров: свёрнута по умолчанию, чипы строятся внутри без CLS */
.cf-filtersbox{margin-top:10px}
.cf-filtersbox summary{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;
  border-radius:12px;cursor:pointer;list-style:none;user-select:none;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.cf-filtersbox summary::-webkit-details-marker{display:none}
.cf-filtersbox summary::after{content:"▾";font-size:.75rem;transition:transform .25s var(--ease)}
.cf-filtersbox[open] summary{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 32%,transparent)}
.cf-filtersbox[open] summary::after{transform:rotate(180deg)}
.cf-filtersbox summary:hover{color:var(--ink)}
.cf-filtersbox[open] summary:hover{color:var(--gold)}
.cf-filtersbox summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cf-filters{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cf-group{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cf-lab{color:var(--ink-faint);font-size:.7188rem;font-weight:800;letter-spacing:.04em;min-width:74px}
.cf-chip{
  min-height:44px;padding:0 15px;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.7813rem;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .18s var(--ease),background .18s var(--ease);
}
/* группа без данных: причина словом, а не кнопка, за которой ноль */
.cf-none{color:var(--ink-faint);font-size:.7813rem;line-height:1.5;max-width:58ch}
.cf-count{margin:10px 2px 0;color:var(--ink-dim);font-size:.8125rem;font-variant-numeric:tabular-nums}
.cf-chip:hover{color:var(--ink)}
.cf-chip.on{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent)}
.cf-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── выдача ── */
.cin-results{max-width:1180px;margin:0 auto 30px}
.cin-res-head h2{font-family:var(--font-d);font-size:1.0938rem;font-weight:600;color:var(--ink);margin:0 0 4px}
.cin-res-line{color:var(--ink-dim);font-size:.8438rem;margin:0 0 12px}
.cin-res-empty{color:var(--ink-dim);font-size:.9375rem;line-height:1.6;max-width:60ch}
.cin-res-empty>p:first-child{color:var(--ink);font-weight:600}
.cin-res-near{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 0}
.cf-near{
  min-height:44px;padding:0 16px;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 32%,transparent);
}
.cf-near:hover{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 55%,transparent)}
.cf-near:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── «предложить фильм» ── */
.cin-offer-wrap{max-width:1180px;margin:34px auto 0}
.cin-offer{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:16px;padding:16px 18px;border-radius:18px;
  background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);
}
.cin-res-empty .cin-offer{max-width:60ch}
.cin-offer p{margin:0;color:var(--ink);font-size:.9063rem;line-height:1.5}
.cin-offer-btn{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:14px;
  font-family:var(--font-t);font-weight:800;font-size:.875rem;text-decoration:none;
  color:var(--bg-1,#101511);background:var(--gold);
  transition:transform .25s var(--ease);
}
.cin-offer-btn:hover{transform:translateY(-1px)}
.cin-offer-btn:active{transform:scale(.98)}
.cin-offer-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── избранное, «хочу», «посмотрел» на карточке ── */
.cc-acts{position:absolute;left:8px;bottom:6px;display:flex;gap:5px;z-index:3}
.cc-act{
  display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:13px;cursor:pointer;
  color:var(--ink-dim);
  background:color-mix(in oklab,var(--bg-2,#151b16) 72%,transparent);
  box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.cc-act svg{width:17px;height:17px}
.cc-act:hover{color:var(--ink)}
.cc-act:active{transform:scale(.9)}
.cc-act:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.cc-act.fav.on,.cc-act.want.on{color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 45%,transparent)}
.cc-act.seen.on{color:var(--mint);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 45%,transparent)}
.cc-chip.draft{color:var(--gold)}
.cc-chip.seen{color:var(--mint)}

/* «что посмотреть сегодня» стало полкой, зум-переход и его анимация на
   1.1 секунды выброшены: без них смысл не потерялся, значит это был шум */

/* ═══ плеер: слой удобства (лупа, субтитры, продолжение) ═══════════
   Аддитивный блок: колоду .w-deck и плашки .w-note не трогает. */

/* строка инструментов под экраном */
.w-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.w-tool{
  display:flex;gap:8px;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8438rem;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.w-tool svg{width:16px;height:16px;flex:none}
.w-tool:hover{color:var(--ink)}
.w-tool:active{transform:scale(.97)}
.w-tool:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.w-tool.on{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent)}

/* поиск по репликам */
.w-search{margin-top:10px;border-radius:16px;padding:14px;background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line)}
.ws-input{
  width:100%;min-height:44px;padding:0 14px;border:0;border-radius:12px;
  font-family:var(--font-t);font-size:1rem;color:var(--ink);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
}
.ws-input::placeholder{color:var(--ink-faint)}
.ws-input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ws-note{margin:10px 2px 0;color:var(--ink-dim);font-size:.7813rem;line-height:1.5}
.ws-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:320px;overflow-y:auto;overscroll-behavior:contain}
.ws-list:empty{margin:0}
.ws-item{
  display:block;text-align:left;border:0;cursor:pointer;padding:8px 10px;border-radius:12px;
  font-family:var(--font-t);font-size:.8438rem;line-height:1.5;color:var(--ink-dim);
  background:transparent;box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.ws-item:hover{background:var(--shell);color:var(--ink)}
.ws-item:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ws-item.now{color:var(--ink);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 26%,transparent)}
.ws-en{display:block}
.ws-t{font-variant-numeric:tabular-nums;font-weight:800;font-size:.7188rem;color:var(--gold);margin-right:8px}
.ws-ru{display:block;color:var(--ink-faint);font-size:.75rem;line-height:1.45;margin-top:1px}
.ws-hl{font-weight:800;color:var(--gold)}

/* панель субтитров */
.w-subs{margin-top:10px;border-radius:16px;padding:14px;background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line)}
.w-subs h3{font-family:var(--font-d);font-size:.9688rem;font-weight:600;color:var(--ink);margin:0 0 2px}
.wsu-sub{color:var(--ink-dim);font-size:.7813rem;margin:0 0 6px}
.wsu-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.wsu-row>b{flex:none;min-width:56px;font-size:.75rem;font-weight:800;color:var(--ink-faint)}
.wsu-row button{
  min-height:38px;padding:0 12px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.7813rem;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.wsu-row button:hover{color:var(--ink)}
.wsu-row button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wsu-row button.on{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent)}

/* настройки субтитров: классы на #w-lines, режимы просмотра их делят */
.w-lines.subs-s .w-l{font-size:.8125rem}
.w-lines.subs-s .w-l .w-ru{font-size:.7188rem}
.w-lines.subs-l .w-l{font-size:1.0625rem}
.w-lines.subs-l .w-l .w-ru{font-size:.875rem}
.w-lines.subs-en .w-l .w-ru{display:none}
.w-lines.subs-ru .w-l .w-w{display:none}
.w-lines.subs-ru .w-l .w-ru{opacity:.95}
.w-lines.subs-off .w-l{display:none}
.ws-off{display:none;margin:4px;color:var(--ink-dim);font-size:.8438rem;line-height:1.5}
.w-lines.subs-off .ws-off{display:block}
/* подсказка под транскрипцией зовёт нажимать на реплики: при выключенных
   субтитрах она обещала бы спрятанное */
.w-lines.subs-off+.w-hint{display:none}

/* плашка «продолжаем с NN-й минуты» с кнопкой «сначала» */
.w-resume{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 2px 0;padding:10px 12px;border-radius:12px;
  color:var(--ink);font-size:.8438rem;font-weight:600;
  background:var(--core);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 26%,var(--shell-line));
}
.w-resume button{
  min-height:36px;padding:0 14px;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.7813rem;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent);
}
.w-resume button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ═══ мировой поиск: «Найти любой фильм мира» ══════════════════════
   Аддитивный блок под залом. Урок 15.08 учтён заранее: авторский
   display на .cw-controls не должен перебивать hidden, поэтому guard. */
#cinWorld [hidden]{display:none!important}
.cin-world{
  max-width:1180px;margin:34px auto 0;padding:18px;border-radius:18px;
  background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);
}
.cin-world h2{font-family:var(--font-d);font-size:1.0938rem;font-weight:600;color:var(--ink);margin:0 0 4px}
.cw-sub{color:var(--ink-dim);font-size:.8438rem;margin:0 0 12px}
.cw-controls{display:flex;flex-direction:column;gap:10px}
.cw-row{display:flex;gap:10px;flex-wrap:wrap}
#cwQ{
  flex:1;min-width:220px;min-height:48px;padding:0 16px;border:0;border-radius:14px;
  font-family:var(--font-t);font-size:1rem;font-weight:600;color:var(--ink);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
}
#cwQ::placeholder{color:var(--ink-faint)}
#cwQ:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cw-btn{
  min-height:48px;padding:0 18px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-t);font-weight:800;font-size:.9375rem;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 32%,transparent);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.cw-btn:hover{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 55%,transparent)}
.cw-btn:active{transform:scale(.97)}
.cw-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cw-btn:disabled{cursor:default;opacity:.6;transform:none}
.cw-region{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cw-lab{color:var(--ink-faint);font-size:.7188rem;font-weight:800;letter-spacing:.04em}
.cw-chip{
  min-height:44px;padding:0 15px;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.7813rem;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.cw-chip:hover{color:var(--ink)}
.cw-chip.on{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent)}
.cw-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* плашка «ждёт ключа»: честная, вместо строки ввода */
.cw-wait{
  margin:0;padding:10px 12px;border-radius:12px;
  color:var(--gold);font-size:.8438rem;line-height:1.5;
  background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent);
}
/* выдача мирового поиска */
.cw-status{margin:14px 0 0;color:var(--ink-dim);font-size:.9063rem;line-height:1.5}
.cw-card{margin-top:14px;border-radius:16px;padding:16px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line)}
.cw-title{font-family:var(--font-d);font-size:1.0625rem;font-weight:600;color:var(--ink);margin:0 0 2px}
.cw-ru{color:var(--ink-dim);font-size:.8125rem;margin:0 0 8px}
.cw-overview{
  color:var(--ink-dim);font-size:.8438rem;line-height:1.55;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* яркий бейдж «у нас есть разбор»: дверь обратно в наш зал */
.cw-ours{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:0 0 10px;
  border-radius:99px;text-decoration:none;
  font-family:var(--font-t);font-weight:800;font-size:.8125rem;
  color:var(--bg-1,#101511);background:var(--gold);
  transition:transform .25s var(--ease);
}
.cw-ours:hover{transform:translateY(-1px)}
.cw-ours:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cw-provs{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.cw-prov{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.cw-prov-lab{flex:none;color:var(--ink-faint);font-size:.7188rem;font-weight:800;letter-spacing:.04em}
.cw-prov-row{display:inline-flex;gap:6px;flex-wrap:wrap}
.cw-prov-chip{
  font-size:.7813rem;font-weight:700;padding:5px 10px;border-radius:99px;
  color:var(--ink);background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);
}
.cw-noprov{color:var(--ink-dim);font-size:.8438rem;line-height:1.5;margin:0 0 10px}
.cw-link{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--gold);font-weight:700;font-size:.8125rem;text-decoration:none;
}
.cw-link:hover{text-decoration:underline}
.cw-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.cw-alts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cw-alt{
  min-height:44px;padding:0 16px;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 32%,transparent);
}
.cw-alt:hover{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 55%,transparent)}
.cw-alt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* обе атрибуции: мелко, но видимо, прятать нечестно */
.cw-attr{margin:12px 0 0;color:var(--ink-faint);font-size:.7188rem;line-height:1.5}
.cw-out .cin-offer{margin-top:14px}

/* ═══ экран фильма: зал открывает его у себя ═══════════════════════
   Обложка карточки превращается в шапку экрана за 320 мс (правило
   движения 3), само появление слоя 200 мс. Оверлей одноразовый: после
   закрытия его нет в DOM, поэтому спор hidden с авторским display
   невозможен по устройству. */
.cin-film{
  position:fixed;inset:0;z-index:940;display:grid;place-items:start center;
  padding:clamp(12px,4vw,40px) clamp(10px,4vw,32px);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(8,10,9,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body.cin-locked{overflow:hidden}
.cfm{
  width:min(96vw,760px);border-radius:24px;padding:20px;
  background:color-mix(in oklab,var(--bg-2,#151b16) 95%,var(--ink) 2%);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--ink) 14%,transparent),0 40px 90px -40px rgba(0,0,0,.8);
}
.cfm-head{display:flex;gap:16px;align-items:flex-start}
.cfm-poster{
  flex:none;width:168px;height:110px;border-radius:16px;position:relative;overflow:hidden;
  background:
    radial-gradient(130% 150% at 82% 120%, oklch(46% .11 var(--ph,80)) 0%, transparent 62%),
    radial-gradient(120% 130% at 50% 118%, color-mix(in oklab,var(--gold) 22%,transparent) 0%, transparent 55%),
    var(--bg-1,#101511);
}
.cfm-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cfm-poster .cc-mark{right:8px;bottom:-10px;font-size:56px}
.cfm-titles{min-width:0;flex:1}
.cfm-titles h2{font-family:var(--font-d);font-size:1.25rem;font-weight:600;color:var(--ink);margin:0 0 4px;line-height:1.25}
.cfm-sub{color:var(--ink-dim);font-size:.8125rem;margin:0 0 6px}
.cfm-line{color:var(--ink);font-size:.9063rem;line-height:1.5;margin:0 0 6px}
.cfm-path{margin:0;color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.03em}
.cfm-rights{margin:4px 0 0;color:var(--ink-faint);font-size:.75rem;line-height:1.5}
.cfm-close{
  flex:none;min-width:44px;min-height:44px;padding:0 14px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .18s var(--ease);
}
.cfm-close:hover{color:var(--ink)}
.cfm-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cfm-modes{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:18px 0 0}
@media (max-width:640px){.cfm-modes{grid-template-columns:1fr}.cfm-head{flex-wrap:wrap}.cfm-poster{width:100%;height:150px}}
.cfm-mode{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;text-decoration:none;
  min-height:44px;padding:14px 16px;border:0;border-radius:16px;cursor:pointer;
  font-family:var(--font-t);color:var(--ink);
  background:var(--core);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 26%,var(--shell-line));
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.cfm-mode:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--gold) 55%,transparent)}
.cfm-mode:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cfm-mode b{font-family:var(--font-d);font-weight:600;font-size:1rem;color:var(--gold)}
.cfm-mode span{color:var(--ink-dim);font-size:.8125rem;line-height:1.45}
.cfm-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cfm-act{
  min-height:44px;padding:0 16px;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--ink-dim);
  background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .18s var(--ease),background .18s var(--ease);
}
.cfm-act:hover{color:var(--ink)}
.cfm-act.on{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent)}
.cfm-act:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cfm-h3{font-family:var(--font-d);font-size:.9688rem;font-weight:600;color:var(--ink);margin:20px 0 8px}
.cfm-scenes{display:flex;flex-direction:column;gap:6px}
.cfm-scene{
  display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:12px;text-decoration:none;
  color:var(--ink-dim);font-size:.8125rem;
  background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);
}
a.cfm-scene{min-height:44px;transition:color .18s var(--ease),background .18s var(--ease)}
a.cfm-scene:hover{color:var(--ink);background:var(--shell)}
a.cfm-scene:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cfm-scene b{font-family:var(--font-t);font-weight:700;font-size:.8438rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfm-bar{display:block;height:6px;border-radius:99px;background:var(--shell);overflow:hidden}
.cfm-bar i{display:block;height:100%;background:var(--gold)}
@media (max-width:640px){.cfm-scene{grid-template-columns:1fr;gap:6px}}
.cfm-wait,.cfm-hint{margin:8px 2px 0;color:var(--ink-dim);font-size:.8125rem;line-height:1.5}
.cfm-where{margin-top:6px}
.cfm-where p{margin:0 0 8px;color:var(--ink-dim);font-size:.8438rem;line-height:1.55}
.cfm-src{
  display:inline-flex;align-items:center;min-height:44px;margin-right:10px;
  color:var(--gold);font-weight:700;font-size:.8125rem;text-decoration:none;
}
.cfm-src:hover{text-decoration:underline}
.cfm-src:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.cfm-world{
  min-height:44px;padding:0 16px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-t);font-weight:700;font-size:.8125rem;color:var(--gold);
  background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 32%,transparent);
}
.cfm-world:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cfm .cin-offer{margin-top:18px}

/* уход в фильм: зал затемняется 200 мс и только потом уезжает */
.cin-dim{
  position:fixed;inset:0;z-index:960;pointer-events:none;
  background:#050706;opacity:0;transition:opacity .2s var(--ease);
}
.cin-dim.on{opacity:.92}
@media (prefers-reduced-motion:reduce){
  .cin-dim{transition:none}
  a.cin-card:hover{transform:none}
  a.cin-card:hover .cc-poster{transform:none}
}

/* ═══ пауза-вопрос и верный ответ: движение задаёт этот файл ═══════
   Разметку вопроса строит движок сцен (study-engine.js), классы .wq-opt
   и .good ставит он же. Правило движения приходит сюда стилем: чужой
   файл не трогается, а цифры видны и меряются вычисленным стилем.
   Сцена уходит в размытие веилом .w-quiz-veil выше (backdrop-filter),
   ответы приходят по одному через 40 мс, верный ответ обводится тёплым
   светом на 400 мс. Конфетти на платформе не существует. */
.wq-opt{animation:wq-in .2s var(--ease) backwards}
@keyframes wq-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wq-opt:nth-child(2){animation-delay:40ms}
.wq-opt:nth-child(3){animation-delay:80ms}
.wq-opt:nth-child(4){animation-delay:120ms}
.wq-opt:nth-child(5){animation-delay:160ms}
/* стоит ПОСЛЕ задержек и с той же силой селектора: сокращённая запись
   animation обнуляет задержку входа, и тёплый свет начинается сразу */
.wq-opt.good{animation:wq-warm .4s var(--ease)}
@keyframes wq-warm{
  0%{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 45%,transparent)}
  45%{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--gold) 70%,transparent),0 0 26px -6px color-mix(in oklab,var(--gold) 60%,transparent)}
  100%{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 45%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .wq-opt,.wq-opt.good{animation:none}
}