/* Кино: только то, чего нет в style.css. Остальное берётся из общих классов,
   чтобы экран выглядел как родной, а не как приклеенный сбоку. */

/* В общей вёрстке #player-shell рассчитан на iframe ютуба — своему <video> нужна та же рамка */
#player-shell video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: #000; object-fit: contain;
}

.f-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* Плитка серии — та же крупная карточка с превью, что у ленты дня (.day-card).
   Превью появляется не сразу: кадр вынимается из видео уже после отрисовки экрана,
   поэтому под ним нужна заглушка, а не пустая серая дыра. */
.f-tile { margin: 0; }
/* Заглушка гасится сильно и сдвигается вверх: кнопка play рисуется в центре, и при
   одинаковой яркости две картинки в одной точке читались как грязное пятно. */
.f-thumb-fb { position: absolute; inset: 0; display: flex; align-items: flex-start;
  justify-content: center; padding-top: 14px; opacity: .16; }
.f-thumb-fb img { width: 44px; height: 44px; }
.f-thumb img[src] ~ .f-thumb-fb { display: none; }

.f-sync-panel { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.f-sync-panel .row { align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.f-off { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 62px; text-align: center; }

/* В полноэкранном режиме панель синхронизации читается поверх чёрного */
.theater .f-sync-panel { border-top-color: rgba(255, 255, 255, .18); }
.theater .f-sync-panel .muted, .theater .f-off { color: rgba(255, 255, 255, .8); }

@media (min-width: 720px) {
  .f-grid { grid-template-columns: 1fr 1fr; }
}