/* ============================================================================
   ПАНЕЛЬ ВЕДУЩЕГО НА ТВ-ВИДАХ — одна на все режимы. Скрипт: connection/_Scripts/Utils/PBTvPanel.js.

   В Unity её нет: на большом экране ведущий ещё и игрок. Панель выезжает из-за нижней
   панели сайта, чуть светлее неё. Вид — как экран телефона (юзер 30.10): заголовок
   .subtitle, описание .description, поля .input-field, кнопки .btn primary / secondary —
   все стили из style.css; только логические блоки разнесены по горизонтали:
     [свой блок (карточка слова «Шпионажа»)]  [текст]  [поля и кнопки / сетка выбора]
   Размеры текста — как у окон телефона на большом экране (--desk-title-fs, --desk-text-fs).
   Приставка tvp- — своя (с телефонными окнами style.css не пересекается).
   ============================================================================ */
:root {
  --tvp-light: 0;             /* светлее нижней панели на эту долю белого */
  --tvp-pad: 33px;            /* поля панели сверху и снизу */
  --tvp-side: 80px;           /* поля панели слева и справа — элементы не прилипают к краям экрана */
  --tvp-gap-x: 48px;          /* между блоками (текст, поля и кнопки) */
  --tvp-inner-gap: 8px;       /* внутри блока: между полями, кнопками, рядами, карточками — один отступ (юзер 30.10) */
  --tvp-text-w: 460px;        /* блок текста: ширина */
  --tvp-ctrl-w: 420px;        /* блок полей и кнопок: ширина (как кнопки и поля телефона на большом экране) */
  --tvp-choice-w: 200px;      /* кнопки выбора сеткой (игрок, реакция): ширина одной */
  --tvp-emoji: 30px;          /* значок в кнопке (реакции) */
  --tvp-ava: 50px;            /* голос за игрока: аватарка в кнопке, размер */
  --tvp-ava-hide: 8px;        /* …срезана нижним краем кнопки на */
  --tvp-ava-gray: 0.3;        /* аватарки в кнопках обесцвечены на эту долю (1 — чёрно-белые, 0 — цветные; юзер 30.10) */
  --tvp-ava-name-x: -15px;      /* …ник: по центру места справа от аватарки, ещё правее на */
  --tvp-ms: 500;              /* выезд, мс */
  --tvp-grid-w: 420px;        /* сетка карточек (ставка в «Резонансе»): карточка не шире */
}

.tvp {
  position: absolute; left: 0; right: 0; z-index: 2;
  bottom: calc(var(--pb-bottom-bar-height, 76px) + env(safe-area-inset-bottom, 0px));
  display: none; flex-direction: row; align-items: center; justify-content: center; gap: var(--tvp-gap-x);
  padding: var(--tvp-pad) var(--tvp-side); box-sizing: border-box;
  background: color-mix(in srgb, var(--pb-bg), #fff calc(var(--tvp-light) * 100%));
  border-top: var(--pb-bw) solid var(--pb-line);
  font-family: var(--pb-font); color: var(--pb-text); line-height: var(--pb-lh-snug); text-align: center;
  pointer-events: auto;
}
.tvp.is-on { display: flex; }
/* Кнопок выбора больше трёх — они в два ряда (PBTvPanel.js), блок кнопок — справа от текста, как всегда (юзер 30.10). */
.tvp-lead { flex: 0 0 auto; }

/* Текст — как заголовок и описание окна телефона на большом экране. */
.tvp-text { flex: 0 3 var(--tvp-text-w); min-width: 160px; }   /* не влезает в окно — сначала ужимается текст */
/* Панель — один текст (подсказка без кнопок): по ширине текста, в одну строку, если влезает в окно (юзер 30.10). */
.tvp:not(:has(> .tvp-ctrl)) > .tvp-text { flex: 0 1 auto; max-width: 100%; }
.tvp .subtitle { margin: 0 0 var(--desk-title-gap, 12px); font-size: var(--desk-title-fs, 34px); }
.tvp .subtitle:last-child { margin-bottom: 0; }
.tvp .description { margin: 0; font-size: var(--desk-text-fs, 18px); }

/* Поля и кнопки — колонкой шириной кнопок телефона. */
.tvp-ctrl { flex: 0 1 auto; width: var(--tvp-ctrl-w); min-width: 0; display: flex; flex-direction: column; gap: var(--tvp-inner-gap); }
/* Сетка выбора и карточек — шире колонки полей; не влезает в окно — ужимается (кнопки уже, ники с «…»). */
/* Блок не прыгает по ширине (юзер 30.10): не уже колонки полей, даже пока ряд выбора пуст (поиск слова). */
.tvp-ctrl.has-grid, .tvp-ctrl:has(> .tvp-row:not([hidden]) > .tvp-choices:not(.is-fit)) { width: auto; min-width: min(var(--tvp-ctrl-w), 100%); }
.tvp-choices.is-fit { width: 100%; }
.tvp-row.is-form { display: flex; flex-direction: column; gap: var(--tvp-inner-gap); }
.tvp-fields { display: flex; flex-direction: column; gap: var(--tvp-inner-gap); }
.tvp-fields:empty { display: none; }
.tvp-field { display: flex; flex-direction: column; gap: var(--tvp-inner-gap); }
.tvp .tvp-flabel { font-size: var(--pb-fs-sm); color: var(--pb-text-muted); }
.tvp .input-field { margin: 0; max-width: none; -webkit-user-select: text; user-select: text; }
.tvp textarea.input-field { resize: none; }
.tvp .buttons { width: 100%; margin: 0; gap: var(--tvp-inner-gap); }
/* В ряду кнопок вторичная («Я знаю слово», «Поменять карты») — слева от главной, как на телефоне. */
.tvp-btns > .btn.secondary { order: -1; }
/* Кнопки выбора — сеткой до 3 в ряд, одной ширины. */
.tvp-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tvp-inner-gap); margin-inline: auto;
  width: calc(var(--tvp-cols, 1) * var(--tvp-choice-w) + (var(--tvp-cols, 1) - 1) * var(--tvp-inner-gap)); max-width: 100%;
  min-width: 100%; }   /* кнопки — во всю ширину блока, даже одна («Начать голосование», «Готов!») — юзер 30.10 */
/* Ряды по центру — и неполный нижний тоже (юзер 30.10). */
.tvp-choices > .btn { flex: 0 1 calc((100% - (var(--tvp-cols, 1) - 1) * var(--tvp-inner-gap)) / var(--tvp-cols, 1));
  min-width: 0; padding-left: var(--pb-s-3); padding-right: var(--pb-s-3); }
.tvp-btn img { width: var(--tvp-emoji); height: var(--tvp-emoji); }
/* Кнопка игрока — как на телефоне (.rz-bet-ava): аватарка без круга слева, стоит на нижнем крае кнопки
   и срезана им (коробка ниже края на --tvp-ava-hide, картинка прижата к верху), ник — справа от неё. */
.tvp .btn.has-ava { justify-content: flex-start; align-items: center; gap: var(--pb-s-2); overflow: hidden;
  padding-top: 0; padding-bottom: 0; padding-left: var(--pb-s-3); }
.tvp-ava { flex: none; align-self: flex-end; width: var(--tvp-ava); height: var(--tvp-ava);
  margin-bottom: calc(-1 * var(--tvp-ava-hide) - var(--pb-bw)); background: no-repeat top center / contain;
  filter: grayscale(var(--tvp-ava-gray)); }
/* Ник — по центру места справа от аватарки (чуть правее центра кнопки — уравновешивает аватарку, юзер 30.10),
   плюс сдвиг --tvp-ava-name-x. */
.tvp .btn.has-ava .tvp-label { flex: 1 1 auto; min-width: 0; text-align: center; translate: var(--tvp-ava-name-x) 0; }
/* Приглушённая главная (варианты слова в поиске «Шпионажа»): цвет — как у неактивной главной (--pb-cream-disabled),
   но нажимается; под курсором — ближе к обычной кремовой. */
.tvp .btn.primary.is-muted { background: var(--pb-cream-disabled); border-color: var(--pb-cream-disabled); }
.tvp .btn.primary.is-muted:hover { background: color-mix(in srgb, var(--pb-cream-disabled) 70%, var(--pb-cream)); border-color: color-mix(in srgb, var(--pb-cream-disabled) 70%, var(--pb-cream)); }
.tvp-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvp-choices.is-wrap .tvp-label { white-space: normal; overflow: visible; overflow-wrap: anywhere; }   /* слова для догадки — не обрезать */
.tvp-row[hidden] { display: none; }

/* Сетка карточек (p.grid): до 3 в ряд, карточки одной ширины, каждый ряд — по центру (неполный тоже). */
.tvp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tvp-inner-gap); margin-inline: auto;
  width: calc(var(--tvp-grid-cols, 3) * var(--tvp-grid-w) + (var(--tvp-grid-cols, 3) - 1) * var(--tvp-inner-gap)); max-width: 100%; }
.tvp-grid > * { flex: 0 1 calc((100% - (var(--tvp-grid-cols, 3) - 1) * var(--tvp-inner-gap)) / var(--tvp-grid-cols, 3)); min-width: 0; }
.tvp-sc { font-size: 0.8em; }                          /* TMP SmallCaps */