/* ============================================================================
   ЭКРАНЫ ПЕРЕД ПАРТИЕЙ — широкоформатный вид и ТВ режим (Utils/PBTvPrep.js), юзер 05.11.
   Чёрный фон сайта и вёрстка окон телефона на большом экране (.subtitle, .description, .pb-timerbar —
   style.css, размеры --desk-*), под ними — суть фазы сеткой плашек: темы AI-квиза, выборы «Музыки»,
   игроки «пишет / готово», вопросы «Треш Квиза». Приставка tvprep- — своя.
   ============================================================================ */
:root {
  --tvprep-w: 1060px;            /* колонка экрана: не шире */
  --tvprep-pad-top: 70px;        /* отступ сверху */
  --tvprep-head-w: 640px;        /* заголовок, описание и полоса: не шире */
  --tvprep-head-gap: 40px;       /* от шапки до плашек */
  --tvprep-card-w: 265px;        /* плашка: ширина (в ряд — сколько влезет, ряды по центру) */
  --tvprep-gap: 12px;            /* между плашками (в ряду и между рядами) */
  --tvprep-row-gap: -18px;        /* темы AI-квиза: между рядами (меньше нуля — нижний ряд наезжает на верхний) */
  --tvprep-pad: 9px;            /* плашка: внутренний отступ */
  --tvprep-main-fs: 19px;        /* плашка: тема / выбор / ник / вопрос */
  --tvprep-sub-fs: 15px;         /* плашка: сложность / «пишет…» */
  --tvprep-ava: 29px;            /* аватарка автора в плашке */
  --tvprep-player-ava: 52px;     /* аватарка игрока в плашке игрока */
  --tvprep-trash-card-w: 260px;  /* «Треш Квиз» (игроки, вопросы): плашка, ширина */
  --tvprep-trash-main-fs: 26px;  /* …ник */
  --tvprep-trash-sub-fs: 18px;   /* …«пишет…», текст вопроса */
  --tvprep-big-fs: 63px;         /* экраны без плашек: титр */
  --tvprep-big-desc-fs: 28px;    /* …описание */
  --tvprep-big-desc-w: 710px;    /* …описание: не шире */
  --tvprep-ripple: 520px;        /* «Готовлю вам Квиз»: пульсирующие круги за титром, размер */
  --tvprep-ripple-alpha: .65;    /* …видимость (0 — нет) */
  --tvprep-back-ripple: 900px;   /* генерация AI-квиза: круги позади всего, размер */
  --tvprep-music-ctrl-k: 1.3;    /* «Музыка»: блок поиска и кнопок в панели ведущего шире обычного во столько раз */
  --tvprep-in-ms: 350ms;         /* появление новой плашки */
  --tvprep-peek: 62px;           /* темы AI-квиза: аватарка автора за плашкой, размер */
  --tvprep-peek-show: 41px;      /* …выглядывает над плашкой на */
}

.tvprep {
  position: fixed; inset: 0 0 calc(var(--pb-bottom-bar-height, 76px) + env(safe-area-inset-bottom, 0px)); z-index: 25; display: none;
  background: var(--pb-bg); color: var(--pb-text);
}
.tvprep.is-on { display: block; }
/* Листается страница, а не корень: панель ведущего (PBTvPanel, absolute у корня) стоит на месте. */
.tvprep-page { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: var(--tvprep-pad-top) max(var(--pb-s-6), calc((100% - var(--tvprep-w)) / 2)) var(--pb-s-6); box-sizing: border-box; }
.tvprep-page::-webkit-scrollbar { display: none; }
/* Панель ведущего внутри корня: стоит на его низу (корень и так кончается над нижней панелью сайта). */
.tvprep > .tvp { bottom: 0; }

.tvprep-head { max-width: var(--tvprep-head-w); margin: 0 auto var(--tvprep-head-gap); text-align: center; }
.tvprep-head .pb-timerbar { margin-bottom: var(--pb-s-6); }
.tvprep .tvprep-title { margin: 0 0 var(--desk-title-gap, 12px); font-size: var(--desk-title-fs, 34px); }
.tvprep .tvprep-title:last-child { margin-bottom: 0; }
.tvprep .tvprep-desc { margin: 0 auto; font-size: var(--desk-text-fs, 18px); }
/* Генерация: полоса прогресса без цифр. */
.tvprep-progress .pb-timerbar-fill { width: 0; }

/* Ряды поровну (6 при 4 в ряд → 3 + 3, 10 → 4 + 3 + 3): ширину сетки и переносы рядов ставит PBTvPrep.js (layout). Между рядами —
   нижний отступ ячейки: у тем AI-квиза свой (--tvprep-row-gap, может быть меньше нуля — нижний ряд наезжает на верхний,
   он позже и рисуется поверх), у остальных сеток — как между плашками в ряду (юзер 05.11). */
.tvprep-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; column-gap: var(--tvprep-gap); row-gap: 0;
  margin: 0 auto; }
.tvprep-grid > :not(.tvprep-break) { flex: 0 1 var(--tvprep-card-w); max-width: 100%; margin-bottom: var(--tvprep-gap); }
.tvprep-grid.is-topics { padding-bottom: max(0px, calc(-1 * var(--tvprep-row-gap))); }
.tvprep-grid.is-topics > :not(.tvprep-break) { margin-bottom: var(--tvprep-row-gap); }
.tvprep-break { flex: 0 0 100%; height: 0; }
/* Тема с аватаркой: ячейка — аватарка позади (выглядывает сверху по центру), плашка поверх. */
.tvprep-slot { position: relative; isolation: isolate; display: flex; flex-direction: column; padding-top: var(--tvprep-peek-show);
  transition: opacity var(--tvprep-in-ms) var(--pb-ease), transform var(--tvprep-in-ms) var(--pb-ease); }
.tvprep-slot > .tvprep-card { position: relative; flex: 1 1 auto; z-index: 1; }
.tvprep-slot.is-new { opacity: 0; transform: scale(.9); }
.tvprep-peek { position: absolute; top: 0; left: 50%; width: var(--tvprep-peek); height: var(--tvprep-peek);
  translate: -50% 0; object-fit: contain; z-index: 0; pointer-events: none; }
.tvprep-grid.is-dim { opacity: .5; }
.tvprep-card {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0;
  padding: var(--tvprep-pad); box-sizing: border-box; text-align: center;
  background: var(--pb-surface); border: var(--pb-bw) solid var(--pb-line); border-radius: var(--pb-r-md);
  transition: opacity var(--tvprep-in-ms) var(--pb-ease), transform var(--tvprep-in-ms) var(--pb-ease),
              border-color var(--pb-dur) var(--pb-ease), background-color var(--pb-dur) var(--pb-ease);
}
.tvprep-card.is-new { opacity: 0; transform: scale(.9); }
.tvprep-main { margin: 0; font-size: var(--tvprep-main-fs); line-height: var(--pb-lh-snug); overflow-wrap: anywhere; }
.tvprep-sub { margin: 0; font-size: var(--tvprep-sub-fs); color: var(--pb-text-muted); line-height: var(--pb-lh-snug); }
.tvprep-by { display: flex; align-items: center; justify-content: center; gap: var(--pb-s-2); margin-top: 4px;
  font-size: var(--tvprep-sub-fs); color: var(--pb-text-muted); }
.tvprep-ava { width: var(--tvprep-ava); height: var(--tvprep-ava); object-fit: contain; flex: none; }
.tvprep-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Игрок: аватарка, ник, «пишет… / готово»; сдал — плашка кремовая, как выбранный ответ. */
.tvprep-player .tvprep-ava { width: var(--tvprep-player-ava); height: var(--tvprep-player-ava); margin: 0 auto; }
.tvprep-player.is-done { background: var(--pb-cream); border-color: var(--pb-cream); color: var(--pb-on-light); }
.tvprep-player.is-done .tvprep-sub { color: var(--pb-on-light); opacity: .7; }
.tvprep-question .tvprep-main { font-size: var(--tvprep-sub-fs); }
/* Голосование играющего хоста: вопросы нажимаются на экране (свои — нет), выбранные — кремовые. */
.tvprep-question.is-pick { cursor: pointer; }
.tvprep-question.is-pick:hover { border-color: var(--pb-line-strong); background: var(--pb-surface-2); }
.tvprep-question.is-selected, .tvprep-question.is-selected:hover { background: var(--pb-cream); border-color: var(--pb-cream); color: var(--pb-on-light); }
.tvprep-question.is-own { opacity: .55; }
.tvprep-grid.is-full .tvprep-question.is-pick:not(.is-selected) { opacity: .55; cursor: default; }
.tvprep-grid.is-locked .tvprep-question { cursor: default; }

/* «Треш Квиз»: свои размеры плашек и текста. */
.tvprep-grid.is-trash { --tvprep-card-w: var(--tvprep-trash-card-w); --tvprep-main-fs: var(--tvprep-trash-main-fs); --tvprep-sub-fs: var(--tvprep-trash-sub-fs); }
/* Экраны без плашек («Музыка», «Проверка дружбы», генерация «Треш Квиза», ошибки): большой титр и описание по центру. */
.tvprep-page.is-big { display: flex; flex-direction: column; justify-content: center; }
.tvprep-head.is-big { max-width: var(--tvprep-big-desc-w); margin-bottom: 0; }
.tvprep .tvprep-head.is-big .tvprep-title { font-size: var(--tvprep-big-fs); }
.tvprep .tvprep-head.is-big .tvprep-desc { font-size: var(--tvprep-big-desc-fs); }
/* «Готовлю вам Квиз»: круги за титром — те же, что у «Создаю Квиз» на телефоне (style.css .mg-ripples), полоса под титром. */
.tvprep-ripple-wrap { position: relative; isolation: isolate; }
.tvprep-ripple-wrap > .mg-ripples { --mg-ring: var(--tvprep-ripple); --mg-ripple-alpha: var(--tvprep-ripple-alpha); z-index: -1; }
.tvprep-ripple-wrap > .tvprep-title { position: relative; }
.tvprep-head.is-big > .tvprep-progress { margin: var(--pb-s-8) auto 0; max-width: var(--tvprep-head-w); }
/* Генерация AI-квиза: круги позади всего (под страницей), по центру экрана. */
.tvprep > .tvprep-back { --mg-ring: var(--tvprep-back-ripple); --mg-ripple-alpha: var(--tvprep-ripple-alpha); z-index: 0; }
.tvprep > .tvprep-page { z-index: 1; }
.tvp.tvprep-music-panel > .tvp-ctrl { width: calc(var(--tvp-ctrl-w, 420px) * var(--tvprep-music-ctrl-k)); }