/* ============================================================================
   ТВ-ВИД «СКАЗКИ НА НОЧЬ» (GM8) НА БОЛЬШОМ ЭКРАНЕ — телевизор Unity в браузере.
   Скрипт: connection/_Scripts/Game/Tl_Tv.js. Картинки: /images_web/tv/gm8/
   (выгружены из Unity: tools/export_gm8_tv_sprites.py, цвет спрайтов запечён).

   Сцена — 1920×1080: числа — пиксели экрана 1920×1080 при камере в покое
   (перспективная, FOV 60, (0, 0.24, −0.76)); сняты с Game Mode 8.prefab и
   сцены GameMode8.unity. Слои на разной глубине — свои планы (.tltv-plane), их
   двигает камера (Tl_Tv.js). Порядок в разметке = порядок отрисовки Unity.
   Номинации — окно итогов главной сцены (Result Window, холст 2208×1242 по
   ширине: ×0.8696).

   Ручки в :root — только то, чего в Unity нет: ведущий ещё и игрок
   (пишет пропуски, голосует; панель — общая, tv-panel.css).
   ============================================================================ */
:root {
  --tltv-min-w: 1000;         /* ТВ-вид — с такой ширины окна, px; уже — телефонные окна */
  --tltv-min-aspect: 1.4;     /* …и окно не уже этого: ширина / высота */
  /* Костёр — видео firewood.webm (133×150, с прозрачностью) вместо частиц пламени Unity. */
  --tltv-fire-video: url('/images_web/tv/gm8/firewood.webm');
  --tltv-fire-x: 972px;          /* видео: центр по горизонтали (px сцены; в Unity центр огня 972) */
  --tltv-fire-y: 956px;          /* видео: низ (линия травы ≈ 930) */
  --tltv-fire-w: 143px;          /* видео: ширина (высота — по пропорциям 133×150) */
  --tltv-logs: 0;                /* брёвна из Unity под огнём: 1 — есть, 0 — нет */
  --tltv-embers: 1;              /* искры из Unity над огнём: 1 — есть, 0 — нет */
  /* Тень-подложка текста сказки (в Unity — материал Book Shadow / BebasNeue-Highlight). */
  --tltv-shadow-a: 0.23;          /* текст сказки: непрозрачность тени */
  --tltv-hl-shadow-a: 0.2;     /* вставки игроков: непрозрачность тени (Unity 0.549) */
  /* Таймер написания «3:00» (в Unity — центр 749 px, кегль 132.9 px). */
  --tltv-timer-y: 416px;       /* центр по вертикали (px сцены) */
  --tltv-timer-fs: 179.4px;      /* кегль */
  /* Голосование ведущего: вся сказка поверх сцены, вставки игроков — нажимаются. */
  --tltv-vote-top: 123px;        /* блок сказки: верх (px сцены 1920×1080) */
  --tltv-vote-bottom: 1080px;     /* …низ */
  --tltv-vote-w: 1474px;         /* …ширина (как поле текста сказки в Unity) */
  --tltv-vote-fs: 36px;          /* …кегль */
  --tltv-vote-lh: 1.1;          /* …межстрочный */
}

.tltv {
  position: fixed; inset: 0; z-index: 25;
  overflow: hidden; background: #597068;   /* «Background 1» — плоский фон во весь кадр */
  display: none;
  -webkit-user-select: none; user-select: none;
}
body.tltv-on .tltv { display: block; }
.tltv.is-cover::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
/* Экраны, которых у ТВ нет: окна сайта — в .wrapper (z-index 1, style.css), на время cover он над сценой. */
body.tltv-on.tltv-cover .wrapper { z-index: 26; }
.tltv img { max-width: none; }

.tltv-stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px; margin: -540px 0 0 -960px;
  transform-origin: 50% 50%;
  font-family: 'Bebas Neue', 'Bebas Neue Pro', Impact, sans-serif;
  line-height: 1;
}
.tltv-plane, .tltv-layer {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 960px 540px; pointer-events: none;
}
.tltv-plane > *, .tltv-layer > * { position: absolute; }
.tltv-sc { font-size: 0.8em; }                        /* TMP SmallCaps */
.tltv-spr { background: center / 100% 100% no-repeat; }
.tltv-flip { scale: -1 1; }

/* ---------------------------------------------------------------- лес -- */
.tltv-trees19 { background-image: url('/images_web/tv/gm8/trees19.webp'); }
.tltv-trees18 { background-image: url('/images_web/tv/gm8/trees18.webp'); }
.tltv-tree13 { background-image: url('/images_web/tv/gm8/tree13.webp'); }
.tltv-tree11 { background-image: url('/images_web/tv/gm8/tree11.webp'); }
.tltv-pine7 { background-image: url('/images_web/tv/gm8/pine7.webp'); }
.tltv-pine8 { background-image: url('/images_web/tv/gm8/pine8.webp'); }
.tltv-pine9 { background-image: url('/images_web/tv/gm8/pine9.webp'); }
.tltv-square { background: #394830; }
.tltv-bear { background-image: url('/images_web/tv/gm8/bear.webp'); }
.tltv-fox { background-image: url('/images_web/tv/gm8/fox.webp'); }
.tltv-sparrow { background-image: url('/images_web/tv/gm8/sparrow.webp'); }
.tltv-owl { background-image: url('/images_web/tv/gm8/owl.webp'); }
.tltv-hare { background-image: url('/images_web/tv/gm8/hare.webp'); }
.tltv-radio { background-image: url('/images_web/tv/gm8/radio.webp'); display: none; }
.tltv.is-news .tltv-radio { display: block; }
.tltv-logs { background-image: url('/images_web/tv/gm8/logs.webp'); }
.tltv-logs2 { background-image: url('/images_web/tv/gm8/logs2.webp'); }
.tltv-ground { background-image: url('/images_web/tv/gm8/ground.webp'); }
.tltv-stone1 { background-image: url('/images_web/tv/gm8/stone1.webp'); }
.tltv-stone2 { background-image: url('/images_web/tv/gm8/stone2.webp'); }
.tltv-bird1 { background-image: url('/images_web/tv/gm8/bird1.webp'); }
.tltv-bird2 { background-image: url('/images_web/tv/gm8/bird2.webp'); }
/* Персонаж подпрыгивает от своей опоры (родительский transform в Unity — под картинкой). */
.tltv-animal { transform-origin: 50% 100%; }

/* Облако: Cloud 2.svg, z 4.294, белое с прозрачностью 11/255 (почти не видно), едет влево. */
.tltv-clouds { left: -242.8px; top: -50.5px; height: 239.4px; width: 7218.3px; display: flex;
  animation: tltv-clouds 173.4s linear infinite; }
.tltv-clouds i { flex: 0 0 2406.1px; height: 100%; opacity: .0431;
  background: url('/images_web/tv/gm8/cloud.svg') center / 100% 100% no-repeat; }
@keyframes tltv-clouds { to { transform: translateX(-2406.1px); } }

/* Огонь, искры, светлячки — рисует Tl_Tv.js на canvas (частицы как в Unity). */
.tltv-canvas { left: 0; top: 0; width: 1920px; height: 1080px; }
/* Пламя — видео (выбрал юзер); видно со старта сказки до конца чтения. */
.tltv-firevid {
  left: calc(var(--tltv-fire-x) - var(--tltv-fire-w) / 2); top: calc(var(--tltv-fire-y) - var(--tltv-fire-w) * 150 / 133);
  width: var(--tltv-fire-w); height: calc(var(--tltv-fire-w) * 150 / 133); display: none;
}
.tltv.is-fire .tltv-firevid { display: block; }
.tltv-logs, .tltv-logs2 { opacity: var(--tltv-logs); }
/* Откуда Tl_Tv.js берёт лист кадров огня (Tx_Fire_ground_04, 5×4) и искру (Tx_Ember_01, 2×2). */
.tltv-fire-src { background-image: url('/images_web/tv/gm8/fire.webp'); }
.tltv-ember-src { background-image: url('/images_web/tv/gm8/ember.webp'); }

/* Вспышка: белый → прозрачный чёрный за 2 с (DOColor к Color.clear) — цвет ставит Tl_Tv.js.
   Лежит поверх сцены — клики пропускает (иначе в голосовании вставки не нажимаются). */
.tltv-flash { position: absolute; inset: -2000px; background: transparent; pointer-events: none; }

/* --------------------------------------------------------------- текст -- */
.tltv-text {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; white-space: normal;
}
.tltv-text > .tltv-in { display: block; width: 100%; }
.tltv-c { display: inline-block; white-space: pre; }   /* буква — своя, для покачивания (TextWiggleEffect) */
/* Слово — цельный блок: между буквами-блоками браузер иначе переносит строку
   посреди слова; переносы — только на пробелах между словами. */
.tltv-w { display: inline-block; white-space: nowrap; }
/* Блок сказки: Bebas Neue Book, белый, тень-подложка (материал Book Shadow). */
.tltv-block {
  left: 252.85px; top: 208.8px; width: 1414.3px; height: 269.6px; font-weight: 300;
  text-shadow: .062em .044em .06em rgba(0, 0, 0, var(--tltv-shadow-a));
}
/* Вставка игрока (<hl>): шрифт BebasNeue-Highlight — Regular, цвет #FFD990, своя тень. */
.tltv-hl { color: #FFD990; font-weight: 400; text-shadow: .063em .056em 0 rgba(0, 0, 0, var(--tltv-hl-shadow-a)); }
.tltv-writing, .tltv-gen { font-weight: 300; opacity: 0; }
.tltv-writing { left: 504px; top: 54.9px; width: 912px; height: 199.4px; }
.tltv-gen { left: 250.05px; top: 5.9px; width: 1419.9px; height: 297.4px; }
.tltv-timer { left: 591px; top: calc(var(--tltv-timer-y) - 92.5px); width: 738px; height: 185px; font-weight: 300; display: none;
  font-size: var(--tltv-timer-fs); }
/* Отсчёт «3», «2», «GO!»: Regular, белый, без тени (юзер, 28.10). */
.tltv-count { left: 734.8px; top: 279.3px; width: 429px; height: 423px; font-size: 407px; font-weight: 400; opacity: 0; }

/* -------------------------------------- голосование ведущего (в Unity нет) -- */
.tltv-vote {
  left: calc(960px - var(--tltv-vote-w) / 2); width: var(--tltv-vote-w);
  top: var(--tltv-vote-top); height: calc(var(--tltv-vote-bottom) - var(--tltv-vote-top));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; box-sizing: border-box;
  pointer-events: auto; display: none;
  color: #fff; font-weight: 300; font-size: var(--tltv-vote-fs); line-height: var(--tltv-vote-lh); text-align: center;
  text-shadow: .062em .044em .06em rgba(0, 0, 0, var(--tltv-shadow-a));
}
.tltv-vote::-webkit-scrollbar { display: none; }
.tltv.is-vote .tltv-vote { display: block; }
.tltv.is-vote .tltv-block { visibility: hidden; }
.tltv-vote p { margin: 0 0 .5em; }
.tltv-frag { border-radius: 6px; padding: var(--tltv-frag-pt, 0) .12em var(--tltv-frag-pb, 0);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* --tltv-frag-pt/-pb ставит Tl_Tv.js по метрикам шрифта: у Bebas верх строки почти по заглавным,
   снизу — запас под хвосты; плашку добирают, чтобы над буквами было столько же, сколько под ними. */
.tltv-frag.is-pick { cursor: pointer; }
.tltv-frag.is-pick:hover { background: rgba(247, 232, 220, .14); }
/* Выбрано — цветом primary сайта, как выбранный ответ в квизе. */
.tltv-frag.is-on, .tltv-frag.is-on:hover { background: var(--pb-cream); color: var(--pb-on-light); text-shadow: none; }
.tltv-vote.is-full .tltv-frag.is-pick:not(.is-on) { cursor: default; opacity: .55; }

/* Окно итогов (номинации) и круг перехода — общие для всех ТВ-видов: tv-awards.css. */

/* Панель ведущего (пропуски, «Отправить» голосования) — общая для ТВ-видов:
   _Styles/tv-panel.css. */

/* Название режима на заставке — как в «Шпионаже» (Game Name: z 0.6 → на кадре 1547×663 по центру 960, 411;
   Bebas 407 px, #FFDAB1, капитель), юзер 30.10. Скрипт — gameNameIn(). */
.tltv-gname { position: absolute; left: 186.3px; top: calc(var(--tltv-gname-y) - 331.45px); width: 1547.4px; height: 662.9px; opacity: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; white-space: normal;
  color: var(--tltv-gname-c); font-family: 'Bebas Neue', 'Bebas Neue Pro', Impact, sans-serif; font-weight: 400; pointer-events: none; }
:root {
  --tltv-gname-z: 1.36;            /* название режима на заставке: дальше камеры в покое на, единиц Unity (как «Шпионаж»: 1.36) */
  --tltv-gname-y: 411px;         /* …центр по высоте на кадре в покое */
  --tltv-gname-fs: 407px;        /* …кегль (длинное название уменьшается, чтобы влезть) */
  --tltv-gname-c: #FFDAB1;         /* …цвет */
}
.tltv-gname > span { display: block; }
.tltv-gname-sc { font-size: 0.8em; }